/* video gallery  */


/* 
gallerybox goes around each 'gallery'
gallerywrapper sets the visible DIV so we can hide the other gallerybox when not used.
gallerywrapper height must be set
*/


.whyisdcvidHTLM5
{
width:630px;
}

/* gallery box is inside whyisdcvidHTLM5 */

.gallerybox { 
	float:left;
	padding: 10px;
	border:none;
	margin:5px auto;
	background-color: none;
	width:auto;
	}


div.whyisdvidholder {
	position:relative; 
	float:left;
	margin:5px; 
	padding: 5px;
	border: 5px solid #eee; 
	margin: 0 auto; 
	background-color:#333;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}



/* original scroolbox is provided by Stu Nicholls at www.cssplay.co.uk */

/* defaults required for IE 
a, a:visited, a:hover, a:active, a:focus {color:#000;}

*/


/* text for click thumbnail to view */
.clickthumbview
{
	margin:50px 0 0 50px;
	font-family:Arial, sans-serif; 
	font-size:1.8rem;
	font-size:18px; 
	font-weight:bold;
	text-align:left;
	color:#fff;
	border:none;
	width:260px;
	float:left;
}


/* turn overflow to auto to have scroll bar. none to wrap. this wrap all thumbnail. use this to 
move the thumbnails */
#scrollbox {
	padding:5px 0 0 20px; 
	margin:0; 
	width:380px; 
	height: auto;
	list-style:none;
	border:none;
	overflow:none; }

/*individual box border around thumbnail.*/
#scrollbox li {float:none;border:none;}

/* spec for each thubmnail */
#scrollbox a {
	display:block; 
	color:#fff; /*hover over text color */
	text-decoration:none; 
	border:2px solid #808080; 
	width:100px; 
	height:70px; 
	float:left; 
	padding:0px; 
	margin:2px;
	font-family:Arial, sans-serif; 
	font-size:1.3rem;
	font-size:13px; 
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

/* thumbnail. don't put border:none here */
#scrollbox a.slideA1 {background:url(../videos/Paul-Damphousse-on-ISDC_thumb.jpg) no-repeat center center; }
#scrollbox a.slideA2 {background:url(../videos/Kirby-Ikin-on-ISDC_thumb.jpg) no-repeat center center; }
#scrollbox a.slideA3 {background:url(../videos/Rich-Godwin-on-ISDC_thumb.jpg) no-repeat center center; }
#scrollbox a.slideA4 {background:url(../videos/Jay-Wittner-on-ISDC_thumb.jpg) no-repeat center center; }
#scrollbox a.slideA5 {background:url(../videos/Joe-Redfield-on-ISDC_thumb.jpg) no-repeat center center; }
#scrollbox a.slideA6 {background:url(../videos/David-Dunlop-on-ISDC_thumb.jpg) no-repeat center center; }
#scrollbox a.slideA7 {background:url(../videos/Jim-Crowell-on-ISDC_thumb.jpg) no-repeat center center; }
#scrollbox a.slideA8 {background:url(../videos/Lon-Levin-on-ISDC_thumb.jpg) no-repeat center center; }



#scrollbox a span {display:block; position:absolute; left:-9999px; top:0;}
#scrollbox a span img {border:none;}

/*thumbnail hover fill */
#scrollbox a:hover {border:2px solid #fff;}

/* hover image location and div that display the hover texts or hover movie. the top measure should match a:focus span top */
#scrollbox a:hover span {border:none; width:290px; height:290px; left:40px; top:20px; background:#333333; z-index:100;}  

#scrollbox a:active {}
#scrollbox a:focus {border:2px solid #66ff66; outline:0;}

/* left in next two are for location of the hover/active image. focus is for clicked images. make sure they line up with hover */
* html #scrollbox a:active span {width:290px; height:290px; top:40px; left:50px; color:#000; background:#fff; z-index:-1;}
#scrollbox a:focus span {width:290px; height:290px; top:20px; left:40px; color:#fff; background:#333333; z-index:10; outline:0;}





/* start of ipad/mobile device profile */

@media only screen and (orientation:landscape) {

#scrollbox {
	padding:5px 0 0 0; 
	margin:0; 
	width:220px; 
	list-style:none; 
	height:380; overflow:none; float:right; }
	
	
	/* the 10/5px location on image is for padding from left -> top. this wrap the thumbnails and viewer */
	div.whyisdvidholder {
		width:560px; 
		height:350px; 
	}
	
}


@media only screen and (orientation:portrait) {

	/* turn overflow to auto to have scroll bar. none to wrap. this wrap all thumbnail. use this to 
	move the thumbnails */

#scrollbox {
		padding:290px 0 0 10px; 
		margin:0; 
		width:360px; /* substract from padding right */
		height: 240px;
		list-style:none; 
		overflow:none; }
	
	
div.whyisdvidholder {
		width:370px; 
		height:530px; 
	}
}