/*
 *
 * Video.css
 *
 * Contains styles for slideshow elements, as used on our product pages.
 * David Palmer, 31 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;
}





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

	width:				700px;
	height:				480px;
	padding-top:		28px;
	padding-bottom:		0px;

	background:			#000000;
}

/* this should be initially hidden, so we don't get all of the messages piled on top of each other */
.videoClass
{
	margin-left:		auto;
	margin-right:		auto;
	display:			none;
	width:				640px;
	height:				480px;
}



/*******************************************************************************
 Caption Box
*******************************************************************************/
#captionBox
{
	margin-left:		auto;
	margin-right:		auto;
	text-align:			center;
/*	width:				760px;	*/
	width:				700px;
	height:				32px;
	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:				#EEEEEE;
}



#captionList,
#videoList,
#thumbList,
#videoData
{
	display:			none;
}


/*******************************************************************************
 Slide Tray
 This is positionned below the control buttons, and includes embedded slide
 thumbnails.
*******************************************************************************/
#slideTray
{
	width:				760px;
	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 */
#slide1, #slide2, #slide3, #slide4, #slide5, #slide6
{
	float:				left;
	background-repeat:	no-repeat;
	background:			#FFFFFF;	/* "to designate empty slide */
	border:				1px solid #EEEEEE;
	margin-right:		8px;
}

#slide6
{
	margin-right:		0px;
}

#slide1 img, #slide2 img, #slide3 img, #slide4 img, #slide5 img, #slide6 img
{
	width:				100px;
	height:				75px;
}

#slide1 a, #slide2 a, #slide3 a, #slide4 a, #slide5 a, #slide6 a
{
	display:			block;
	width:				100px;
	height:				75px;
	padding:			4px;
}

#slide1 a:hover, #slide2 a:hover, #slide3 a:hover, #slide4 a:hover, #slide5 a:hover, #slide6 a:hover
{
	background:			#AAAAFF;
}

/**************************** Video Tours *************************************/

#tourBox
{
	padding-top:		20px;
	padding-bottom:		20px;
	display:			block;
	height:				495px;	/* allow room for movie controller, 15px */
/*	background:			#000000;	*/
}

#playButton
{
	position:			absolute;	/* we want this to appear floating _over_ the "tourViewer" div */
	margin-top:			215px;
	margin-left:		238px;
	width:				160px;
	height:				40px;
	text-align:			center;
	line-height:		40px;
	font-size:			18px;
	color:				#FFFFFF;
	background:			#000000;
	opacity:			0.75;
	filter:				alpha(opacity=75);	/* for IE win, n.b., percentage! */
	border:				2px solid #FFFFFF;
	border-radius:		20px;
}

#playButton a
{
	color:				#FFFFFF;
}


#tourViewer
{
	text-align:			center;
	float:				left;
	width:				640px;
	height:				480px;
	background:			#333333;
	border:				0px solid #FFFFFF;

	background-image:	url('../../crystalmaker/tours/resources/tour-background.jpg');
										/* N.B., path is expressed relative to
										  the path of this script */
}


#tourList
{
	float:				left;
	width:				240px;			/* was 230px */
	padding:			0px;
	margin-top:			0px;
	margin-left:		10px;			/* 20px; */
	border:				0px solid #CCCCCC;
	list-style:			none;			/* No bullets! */
}

#tourList li,
#tourList li .selected
{
	width:						100%;
	float:						left;
	margin-bottom:				10px;

	display:					block;
	text-decoration:			none;
	text-align:					left;
	font-size:					12px;			/* was 11px */

	padding:					4px;
	padding-left:				8px;
	color:						#FFFFFF;
	background:					#BBBBBB;
	border-left:				1px solid #EEEEEE;
	border-top:					1px solid #EEEEEE;
	border-right:				1px solid #888888;
	border-bottom:				1px solid #888888;
	border-top-left-radius:		0px;
	border-top-right-radius:	12px;
	border-bottom-left-radius:	0px;
	border-bottom-right-radius:	12px;
	color:						#000000;
}

#tourList li:hover
{
	color:				#FFFFFF;
	background:			#777788;

	border-left:		1px solid #9999BB;
	border-top:			1px solid #9999BB;
	border-right:		1px solid #555577;
	border-bottom:		1px solid #555577;

	cursor:				pointer;
}

#tourList li.selected
{
	color:				#FFFFFF;
	background:			#666699;
	border-left:		1px solid #444466;
	border-top:			1px solid #444466;
	border-right:		1px solid #8888AA;
	border-bottom:		1px solid #8888AA;
}


/* "New" box, appears towards the right-hand side of the tour button */
#tourList li .newFeature
{
	color:				#666699;
	font-style:			italic;
	font-size:			0.75em;
	font-weight:		bold;

	margin-left:		8px;
	margin-right:		2px;

	float:				right;

	padding-left:		10px;
	padding-right:		10px;
	padding-top:		2px;
	padding-bottom:		2px;
	
	margin-top:			1px;
	line-height:		12px;
	height:				12px;
	
	background-color:	#EEEEEE;
	border-radius:		8px;
}

#tourList li.selected .newFeature
{
	color:				#FFFFFF;
	background-color:	#9999CC;
}