/*These classes are used with the overlay for the player that pops up when clicked on*/
/* the overlayed element */
.overlay {
	position: absolute;
	width: 570px;
	height:522px;
	font-size:11px; color:#fff;
	padding:0px;
	top:10px;
	left:10px;
	z-index: 100;
	margin:auto;
	-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;
	text-align:center;
}
/* default close button positioned on upper right corner */
.overlay .close {
	position:absolute;
	background:url(../img/close.png) #D00;
	top:0px; right:0px;
	cursor:pointer;
	height:24px; width:24px; z-index:104;
	border-bottom:1px solid black; border-left:1px solid black;
	border-radius: 0px 5px 0px 5px;
	opacity:0.4; filter:alpha(opacity=40);
	display:none;
}
.overlay .facebook {background-image:url(../img/facebook.png); position:absolute;  right:82px;  bottom:8px; cursor:pointer; height:25px; width:12px; z-index:104; clear:both;}
.overlay .twitter {background-image:url(../img/twitter.png); position:absolute; right:47px;  bottom:8px; cursor:pointer; height:25px; width:20px; z-index:104;}
.overlay .email {background-image:url(../img/email.png); position:absolute;  right:10px;  bottom:8px; cursor:pointer; height:27px; width:26px; z-index:104;}

/*hover states*/
.overlay .close:hover {opacity:0.8; filter:alpha(opacity=80);}
.overlay .facebook:hover {background-position: -12px 0px;}
.overlay .twitter:hover {background-position: -20px 0px;}
.overlay .email:hover {background-position: top right;}
/*.overlay .overlayToolbar {
	position:relative; margin:10px 0px; border-radius: 5px; width:100%;height:40px;
	background:#444 url(../img/grad40h.png) repeat-x;
	opacity:0.98; filter:alpha(opacity=98);
}
.overlay .playerDescription {position:relative; text-align:center; font-size:11px; line-height:40px; display:inline-block; padding:0px 100px; width:auto; clear:both;}
.overlay .playerDescription.hiddenDiv {display:none;}
*/

.overlay .overlayToolbar {
	position:relative; margin:10px 0px 0px -1px; border-radius: 5px; width:100%;height:150px;
	background:#444 url(../img/grad150h.png) repeat-x;
	opacity:0.98; filter:alpha(opacity=98);
}
.overlay .playerTitle {position:relative; text-align:center; font-size:11px; line-height:40px; display:inline-block; padding:0px 100px; width:auto; clear:both;}
.overlay .playerTagline {display:none;}
.overlay .playerDescription {
	position:absolute; border-radius:5px; top:46px; right:52px; bottom:6px; left:52px; display:block; padding:10px;
	-moz-box-shadow: inset 0 0 5px 2px #222; -webkit-box-shadow: inset 0 0 5px 2px #2222; box-shadow: inset 0 0 5px 2px #222; background:url(../img/trans/black/20.png) repeat;
}

.overlay .overlayBox {position:relative; display:inline-block; width:auto; height:100px; max-height:100%;}
.overlay #startScreenDiv {position:absolute; top:0px; left:0px; z-index:997; width:570px; height:360px; cursor:pointer;}
.overlay #startScreenDiv div.img {position:absolute; top:50%; left:50%; margin:-75px 0px 0px -75px; width:150px; height:150px; cursor:pointer; background:url(../img/PlayIcon.png) no-repeat;}
.overlay #startScreenDiv div.img:hover {background-position:0 -150px;}
.overlay #loadingimg {width:275px; height:103px; background:url(../img/background.png) repeat; padding:5px; position:absolute; top:50%; left:50%; margin:-70px 0px 0px -142px; border-radius:5px; z-index:100;}

.overlay .playerContainer {position:relative; display:inline-block; width:auto; max-width:570px; height:360px; z-index:101;}
.playerContainer .comingUpScreen {position:absolute; top:0px; left:0px; width:570px; height:360px; z-index:999; background:url(../img/comingUp.jpg) no-repeat; border-radius:5px; }
.playerContainer .bufferScreen {position:absolute; width:570px; height:360px; z-index:998; }
.bufferScreen .buffer {
	position:absolute; width:275px; top:50%; left:50%; margin:-70px 0px 0px -142px;
	background:url(../img/background.png) repeat; border-radius:5px; padding:5px; color:#DDD;
}
.bufferScreen .bufferText {font-size:14px; font-weight:bold; padding:3px 0px; background:#444; border-radius:0px 0px 5px 5px; line-height:16px;}
.bufferScreen .jCountdown {font-size:12px; font-weight:normal;}
.overlay #mmFlashPlayer {position:relative; width:570px; height:360px; padding:0px; background:#222; display: inline-block; border-radius: 5px;}
.overlay #mmFlashPlayer object {border-radius:5px;}
.overlay #mainimgviewer {position:relative; display:inline-block; width:auto; min-height:100px; max-height:360px; z-index:101;}
.overlay #mainimgviewer img {position:relative; display:block; max-width:570px; max-height:360px; min-height:250px; margin:auto; border-radius:5px;}
.overlay #playerNavigator {position:absolute; top:50%; float:left; width:100%; height:75px; margin-top:-36px; z-index: 100;}

/*.overlay .navigate {position:absolute; display:block; top:0px; z-index:100; width:40px; height:100%; cursor:pointer; background:#FFF;}
.overlay .nextmedia  { background:url(../img/arrowRight.png) center right no-repeat;  right: 0px; z-index: 100;}
.overlay .nextmedia:hover 	{ background-position:center left; }
.overlay .prevmedia  {background:url(../img/arrowLeft.png) center left no-repeat; left:0px;}
.overlay .prevmedia:hover  { background-position:center right; }*/

.overlay .navigate {position:absolute; display:block; cursor:pointer; font-size:1px; width:24px; height:100%; top:0px;}
/* right */
.overlay .nextmedia  {background: url(../img/arrowRight.png) right no-repeat; right:13px;}
.overlay .nextmedia:active {background-position:left;}
/* left */
.overlay .prevmedia  {background: url(../img/arrowLeft.png) left no-repeat; left:13px;}
.overlay .prevmedia:active {background-position: right;}

.overlay #html5player { position:relative; display: inline-block; width: 570px; height:360px; z-index:102; border-radius: 5px; background:#000;}
.overlay #html5player.hiddenDiv {display:none;}
.overlay #html5video {border-radius:5px;}
.hiddenDiv {display:none;}