/*These classes are used with the overlay for the player that pops up when clicked on*/
/* the overlayed element */
.overlay {
	position: absolute!important;  display:none;
	width: 100%;
	font-size:11px; color:#fff;
	padding:0px;
	z-index: auto;  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/grad20h.png) repeat-x bottom #D00;
	top:0px; right:0px;
	cursor:pointer;
	height:30px; width:30px; z-index:104;
	/*border-bottom:1px solid black; border-left:1px solid black;*/
	border:1px solid #400;
	border-radius: 0px 5px 0px 5px;
	opacity:0.4; filter:alpha(opacity=40);
}

.overlay .close .xIcon {display:block; background:url(../img/close.png); width:24px; height:24px; margin:3px;}
.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 .overlayBox {position:relative; display:inline-block; min-width:200px; max-width:680px; min-height:100px; max-height:100%;}
.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; min-width:200px; max-width:680px; min-height:100px; max-height:446px; z-index:101;}
.overlay #mmFlashPlayer {position:relative; width: 680px; height:420px; 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:420px; z-index:101;}
.overlay #mainimgviewer img {position:relative; display:block; max-width:595px; max-height:420px; 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; 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: 680px; height:420px; z-index:102; border-radius: 5px; background:#000;}
.overlay #html5video {border-radius:5px;}
.overlay #html5player.hiddenDiv {display:none;}
.hiddenDiv {display:none;}