/*
 *
 * Slideshow.css
 *
 * Contains styles for slideshow elements, as used on our product pages.
 * David Palmer, 12 March 2010
 * (c) 2010 CrystalMaker Software Ltd.
 *
 */

/*******************************************************************************
 Gallery Container: this holds everything
*******************************************************************************/
#galleryContainer
{
	margin-top:			20px;
	margin-bottom:		20px;
	margin-left:		auto;
	margin-right:		auto;
	width:				760px;
}



/*******************************************************************************
 Slide fader: used to fade out the first slide, so we can superimpose a
 "click to start" message.
*******************************************************************************/
#slideFader
{
}


#slideFader a
{
	margin-top:					6px;
	margin-left:				36px;
	margin-right:				6px;
	width:						688px;
	height:						280px;	/* = 500 - padding-top, etc. */

	position:					absolute;
	padding-top:				255px;	/* so text is vertically-aligned */
	text-align:					center;

	z-index:					23;

	display:					block;
	color:						#FFFFFF;
	font-size:					24px;
	text-decoration:			none;
	background:					#333333;
	opacity:					0.90;
	filter:						alpha(opacity=90);	/* for IE win, n.b., percentage! */

	border-top-left-radius:		6px;
	border-top-right-radius:	6px;
}




/*******************************************************************************
 Slide Viewer - we show the slide here
*******************************************************************************/
#slideViewer
{
	margin-left:		auto;
	margin-right:		auto;
	display:			block;

	width:				640px;
	height:				480px;

	padding-top:		24px;
	padding-left:		24px;
	padding-right:		24px;
	background:			#EEEEFF;
	background:			#333333;
	background:			#000000;
	border-top:			6px solid #CCCCCC;
	border-left:		6px solid #CCCCCC;
	border-right:		6px solid #CCCCCC;
	border-top-left-radius:		12px;
	border-top-right-radius:	12px;
}

/* this should be initially hidden, so we don't get all of the messages piled on top of each other */
.videoClass
{
	display:			none;
}



/*******************************************************************************
 Caption Box
*******************************************************************************/
#captionBox
{
	margin-left:		auto;
	margin-right:		auto;
	text-align:			center;
	padding-left:		24px;
	padding-right:		24px;
	border-left:		6px solid #CCCCCC;
	border-right:		6px solid #CCCCCC;
	width:				640px;
	height:				32px;
	background:			#333333;
	background:			#000000;
}

/* this should be initially hidden, so we don't get all of the messages piled on top of each other */
.captionText
{
	display:			none;
	text-align:			center;
	font-size:			11px;
	line-height:		28px;
	color:				white;
}



/*******************************************************************************
 Viewer Control Area: this is a horizontal strip underneath the caption box,
 which we colour grey, and which holds all of the buttons for controlling the
 show, toggling looping and showing/hiding the slide tray.
*******************************************************************************/
#viewerControlArea
{
	margin-left:		auto;
	margin-right:		auto;
	width:				700px;
	height:				48px;
	background:			#CCCCCC;
	padding-top:		16px;
	border-bottom:		1px solid #AAAAAA;
}

/* Loop on/off buttons */
#loopUp, #loopDn
{
	margin-left:		10px;
	margin-right:		200px;
	float:				left;
	background-repeat:	no-repeat;
}

#loopUp, #loopDn, #loopUp a, #loopDn a
{
	display:			block;
	width:				40px;
	height:				40px;
}

#loopUp
{
	background-image:	url('../images/slideshow/LoopButtonUp.png');
}

#loopDn
{
	display:			none;	/* initially hidden */
	background-image:	url('../images/slideshow/LoopButtonDn.png');
}


/* Eject button */
#ejectUp, #ejectDn
{
	margin-right:		10px;
	margin-left:		200px;
	float:				left;
	background-repeat:	no-repeat;
}

#ejectUp, #ejectDn, #ejectUp a, #ejectDn a
{
	display:			block;
	width:				40px;
	height:				40px;
}

#ejectUp
{
	background-image:	url('../images/slideshow/EjectButtonUp.png');
}

#ejectDn
{
	display:			none;	/* initially hidden */
	background-image:	url('../images/slideshow/EjectButtonDn.png');
}




/*	
	Here we have a container to hold the centrally-placed buttons for playing,
	pausing, and switching slides.
*/
#slideControls
{
	float:				left;
	width:				200px;
	height:				40px;
}

#firstSlide, #prevSlide, #playSlides, #pauseSlides, #nextSlide, #lastSlide
{
	float:				left;
	background-repeat:	no-repeat;
}

#firstSlide, #prevSlide, #playSlides, #pauseSlides, #nextSlide, #lastSlide,
#firstSlide a, #prevSlide a, #playSlides a, #pauseSlides a, #nextSlide a, #lastSlide a
{
	display:			block;
	width:				40px;
	height:				40px;
}


#firstSlide
{
	background-image:	url('../images/slideshow/FirstButtonUp.png');
}

#lastSlide
{
	background-image:	url('../images/slideshow/LastButtonUp.png');
}

#prevSlide
{
	background-image:	url('../images/slideshow/BackButtonUp.png');
}

#nextSlide
{
	background-image:	url('../images/slideshow/NextButtonUp.png');
}

#playSlides
{
	background-image:	url('../images/slideshow/PlayButtonUp.png');
}

#pauseSlides
{
	display:			none;		/* initially hidden */
	background-image:	url('../images/slideshow/PauseButtonDn.png');
}

#loopUp a:hover,
#loopDn a:hover,
#firstSlide a:hover,
#prevSlide a:hover,
#nextSlide a:hover,
#playSlides a:hover,
#pauseSlides a:hover,
#lastSlide a:hover,
#ejectTray a:hover
{
	background:			#CCCCCC;
	opacity:			0.25;
	filter:				alpha(opacity=25);	/* for IE win, n.b., percentage! */
}







/*******************************************************************************
 Slide Tray
 This is positionned below the control buttons, and includes embedded slide
 thumbnails.
*******************************************************************************/
#slideTray
{
	width:				692px;
	height:				84px;
	padding:			0px;
	margin-left:		auto;
	margin-right:		auto;
	padding-top:		4px;
	padding-bottom:		4px;
	background:			#999999;
	border-top:			2px solid #888888;
	border-bottom:		1px solid #CCCCCC;

	display:			none;	/* initially hidden */
}

/* these button areas can be clicked to change the slide tray */
#prevTray, #nextTray, #prevTray a, #nextTray a
{
	width:				32px;
	height:				84px;
	background-position:	center;
	background-repeat:	no-repeat;
}

#prevTray a, #nextTray a
{
	display:			block;
}

#prevTray
{
	margin-right:		2px;
	background-image:	url('../images/slideshow/BackArrowUp.png');
}

#nextTray
{
	margin-left:		2px;
	background-image:	url('../images/slideshow/NextArrowUp.png');
}

#prevTray a:hover, #nextTray a:hover
{
	background:			#999999;
	opacity:			0.25;
	filter:				alpha(opacity=25);	/* for IE win, n.b., percentage! */
}

/* Position the "Previous" button on the extreme left, and the "Next" button
   on the extreme right. */
#prevTray
{
	float:				left;
}

#nextTray
{
	float:				right;
}


/* individual slides in the slide tray */
#slide1, #slide2, #slide3, #slide4, #slide5, #slide6
{
	float:				left;
	background-repeat:	no-repeat;
	background:			#AAAAAA;	/* "to designate empty slide */
	margin:				1px;
	border:				1px solid #999999;
	border-radius:		12px;
}

#slide1 img, #slide2 img, #slide3 img, #slide4 img, #slide5 img, #slide6 img
{
	width:				80px;
	height:				60px;
	box-shadow: 0px 2px 4px #333333;
}

#slide1 a, #slide2 a, #slide3 a, #slide4 a, #slide5 a, #slide6 a
{
	display:			block;
	width:				80px;
	height:				60px;
	padding:			10px;
}

#slide1 a:hover, #slide2 a:hover, #slide3 a:hover, #slide4 a:hover, #slide5 a:hover, #slide6 a:hover
{
	background:			#BBBBBB;
	border-radius:		12px;
}

/*******************************************************************************
 SlideViewerBottom
 this is the small strip at the bottom of our virtual "screen" 
*******************************************************************************/
#slideViewerBottom
{
	margin-left:					auto;
	margin-right:					auto;
	width:							652px;
	height:							12px;
	padding-left:					24px;
	padding-right:					24px;
	background:						#CCCCCC;
	border-bottom-left-radius:		12px;
	-border-bottom-right-radius:	12px;
	border-top:						1px solid #DDDDDD;
	margin-bottom:					30px;
}