@charset "UTF-8";



/* Layout Rules

----------------------------------------------- */

#wrap {

	padding-top: 20px;

	margin: 0 0px;

	width:500px;

}







/* Gallery and Playback Controls

----------------------------------------------- */



#controls {	margin:0 auto 5px auto; width:585px;}



#transport {

	margin: 0;

	padding: 0;

	list-style: none;

}

#transport li {

	float: left;

	margin: 0px 100px 0px 0px;

	padding: 0;

	text-align: center;

}

#transport a {

	text-decoration: none;

	text-transform: uppercase;

	font-size: 85%;

	font-weight: bold;

	letter-spacing: 0.1em;

	margin: 0 1px 0 0;

	padding: 4px 8px;

	width: 64px;

	float: left;

	display: block;

	-moz-user-select: none;

	-khtml-user-select: none;

}

#transport a:link {

	background: #666 url('../demos/images/bg_grad_gray1.gif') repeat-x;

	color: #fff;

	border-top: solid 1px #999;

	border-right: solid 1px #404040;

	border-bottom: solid 1px #3a3a3a;

	border-left: solid 1px #404040;

}

#transport a:visited {

	background: #666 url('../demos/images/bg_grad_gray1.gif') repeat-x;

	color: #fff;

	border-top: solid 1px #999;

	border-right: solid 1px #404040;

	border-bottom: solid 1px #3a3a3a;

	border-left: solid 1px #404040;

}

#transport a:hover {

	background: #666 url('../demos/images/bg_grad_gray2.gif') repeat-x;

	color: #000;

	border-top: solid 1px #999;

	border-right: solid 1px #404040;

	border-bottom: solid 1px #3a3a3a;

	border-left: solid 1px #404040;

}

#transport a:focus {

	-moz-user-select: none;

	-khtml-user-select: none;

}



#transport .playBtn .pauseLabel, #transport .pauseBtn .playLabel {

	display: none;

}



#previews {

	padding: 0px 0px 0px 0px;

	margin-bottom: 5px;

	background-image: url('../demos/images/bg.gif');

	width: 500px;

	float: left;

	margin-right: 10px;

}

#thumbnails {

	clear: both;

	width:500px;

	margin: 0px auto;

}

#thumbnails div {

	position: relative;

	width: 50px;

	height: 50px;

	float: left;

	margin: 5px 10px 0px 0px;

	padding: 0;

	float: left;

	display:inline;

}

#thumbnails img {

	width: 50px;

	height: 50px;

	position: absolute;

	border-top: solid 1px #999;

	border-right: solid 1px #404040;

	border-bottom: solid 1px #333;

	border-left: solid 1px #404040;

}

#picture {

	padding: 0px;

	float: left;

}

#mainImageOutline {

	margin: 0 auto;

	padding: 0;

	background-color: #eee;

	border-top: solid 1px #999;

	border-right: solid 1px #404040;

	border-bottom: solid 1px #333;

	border-left: solid 1px #404040;

	overflow: hidden; 


}

#mainImage {



}



#picture img {	border: 1px solid #999; }

.selectedThumbnail {  border: solid 2px #fc0 !important; }

.inFocus {  border: solid 1px #fc0 !important; }



/* Spry Validation Widgets Demo*/

#MovieList{

  height: 600px;

  overflow: auto;

}



/* iFrame Stuff

----------------------------------------------- */

iframe { 

	border: none; 

	background: #3a3a3a; 

	width: 100%; height: 365px;

	border-top: solid 1px #404040;

	border-left: solid 1px #404040;

	border-right: solid 1px #404040;

	border-bottom: solid 1px #404040;

  }



/* Utility IDs, classes, and HTML selectors

----------------------------------------------- */

#boxshot {

	background-color: #fff;

	border-top: solid 1px #999;

	border-bottom: solid 1px #3a3a3a;

	border-left: solid 1px #3a3a3a;

	border-right: solid 1px #3a3a3a;

	text-align: center;

 }

.clear {

	visibility: hidden;

	display: block;

	clear: both;

	height: 0px;

	margin: 0;

	padding: 0;

	}

.ClearAll {

	clear: both;

	height: 0;

	font-size: 0;

	line-height: 0;

}



code { color: #000; }

pre { font-size: small; color: #000; }



.highlightedcode {background-color: #ff9;}



.sample {

	background: #eee;

	padding: 20px;

	border: 2px solid #666;

	margin-top: 20px;

	overflow: scroll;

}