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

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





/*******************************************************************************
 Slide fader: used to fade out the first slide, so we can superimpose a
 "click to begin" message.
 
 To be displayed in slide viewer (760 x 565px + caption: 28px)
*******************************************************************************/
#slideFader
{
	margin-left:		280px;
	margin-right:		280px;
	margin-top:			245px;
	border:				1px solid #000000;
	width:				200px;
	height:				40px;	/* = 500 - padding-top, etc. */
	position:			absolute;
	padding-top:		20px;	/* 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.80;
	filter:				alpha(opacity=90);	/* for IE win, n.b., percentage! */

	border-radius: 		32px;
}



/*******************************************************************************
 Slide Viewer - we show the slide here
*******************************************************************************/
#slideViewer
{
	margin-left:		auto;
	margin-right:		auto;
	display:			block;
	max-width:			760px;
	max-height:				565px;
	
//	border-top:			1px solid #CCCCCC;
//	border-left:		1px solid #CCCCCC;
//	border-right:		1px solid #CCCCCC;
//	background:			#FFFFFF;
}

/* this should be initially hidden, so we don't get all of the messages piled on top of each other */
.slideClass
{
	margin-top:			10px;
	margin-left:		10px;
	margin-right:		10px;
	display:			none;
//	width:				740px;
//	max-width:			740px;
//	height:			555px;

}



/*******************************************************************************
 Caption Box
*******************************************************************************/
#captionBox
{
	margin-left:		auto;
	margin-right:		auto;
	text-align:			center;
	max-width:			760px;
	height:				28px;
//	background:			#FFFFFF;
//	border-left:		1px solid #CCCCCC;
//	border-right:		1px solid #CCCCCC;
//	border-bottom:		1px solid #CCCCCC;
}

/* 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:				#666666;
}






/*******************************************************************************
 Slide Tray
 This is positionned below the control buttons, and includes embedded slide
 thumbnails.
*******************************************************************************/
#slideTray
{
//	width:				760px;
	max-width:			760px;	/* Liquid Layout */
	height:				84px;
	padding:			0px;
	margin-left:		auto;
	margin-right:		auto;
	margin-top:			20px;
	margin-bottom:		20px;
/*	background:			#FFFFFF; */

	display:			none;	/* initially hidden */
}

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

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

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

#nextTray
{
	margin-left:		10px;
	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 */
#thumb1, #thumb2, #thumb3, #thumb4, #thumb5, #thumb6
{
	float:				left;
	background-repeat:	no-repeat;
	background:			#FFFFFF;	/* "to designate empty slide */
	border:				1px solid #EEEEEE;
	margin-right:		8px;
}

#thumb6
{
	margin-right:		0px;
}

#thumb1 img, #thumb2 img, #thumb3 img, #thumb4 img, #thumb5 img, #thumb6 img
{
	width:				100px;
	height:				75px;
}

#thumb1 a, #thumb2 a, #thumb3 a, #thumb4 a, #thumb5 a, #thumb6 a
{
	display:			block;
	width:				100px;
	height:				75px;
	padding:			4px;
}

#thumb1 a:hover, #thumb2 a:hover, #thumb3 a:hover, #thumb4 a:hover, #thumb5 a:hover, #thumb6 a:hover
{
	background:			#AAAAFF;
}