/*<---------------------------  frame.css  --------------------------->  */

body{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#b4b5b7), to(#ffffff));
	background-image: -webkit-linear-gradient(top, #b4b5b7, #ffffff);
	background-image: -moz-linear-gradient(top, #b4b5b7, #ffffff);
	background-image: -ms-linear-gradient(top, #b4b5b7, #ffffff);
	background-image: -o-linear-gradient(top, #b4b5b7, #ffffff);
	background-image: linear-gradient(top, #b4b5b7, #ffffff);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b4b5b7', EndColorStr='#ffffff');
	background-attachment: fixed;
    margin: 0px;
	overflow-y: scroll;
	font: 13px Arial,sans-serif;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
						  supported by Chrome and Opera */
}

img {
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

div.header{
    display: block;
    height: 100px;
}

h1, h4{
  margin-top: auto!important;
  margin-bottom: auto!important;
}

#accountLogin, #inactive_live, #inactive_archive,
#inactive_expired, #mediaframe, #registration,
#qaEmail, #qaEmailConfirmation, #passcodeLogin,
#downloadPlugin, #invalid_ip_address, #forgotLogin,
#createNewAccount {
    position: relative;
    background-color: white;
    width: 1080px;
	margin-top: 10px;
    margin-right: auto;
	margin-left: auto;
    border-radius: 2px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

#accountLogin, #inactive_live, #inactive_archive,
#inactive_expired, #registration, #passcodeLogin,
#downloadPlugin, #invalid_ip_address, #forgotLogin,
#createNewAccount {
	min-height: 670px;
	line-height: normal;
	padding-top: 50px;
}

#inactive_live, #inactive_archive, #inactive_expired,
#mediaframe, #registration, #qaEmail, #invalid_ip_address {
    top: 0px;
}

#registrationBody input[type="text"] {
    height: auto!important;
    width: 200px;
    line-height: normal;
	border-radius: 0px;
	margin-top: 4px;
}

#passcodeLogin {
    text-align: center;
	padding-top: 100px;
}

.main {
	margin-top: 20px;
}

/* <---------------------------  Toggle Slides  --------------------------->   */

#expandSlide{
	position: absolute;
	right: 2px;
	bottom: 0px;
	opacity: 0.2;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	cursor: pointer;
}

#expandSlide:hover {
	opacity:1;
}

/* <---------------------------  Slides  --------------------------->   */

div.slideContainer{
    width: auto;
    display: block;
	margin: 0;
	margin-left:7px;
	margin-right:6px;
    z-index:0; /*make css3pie happy*/
}

div.slideContainer div.slide{
    background-color:#f6f6f6;
}

div.slideContainer img.slide{
    width: 610px;
    height: auto;
    left: 0px;
    top: 0px;
    display: block;
}

#slideImageContainer {
	position: relative;
}

#slideNavigationWindow{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e0e0e0));
    background-image: -webkit-linear-gradient(top, #f6f6f6, #e0e0e0);
    background-image: -moz-linear-gradient(top, #f6f6f6, #e0e0e0);
    background-image: -ms-linear-gradient(top, #f6f6f6, #e0e0e0);
    background-image: -o-linear-gradient(top, #f6f6f6, #e0e0e0);
    background-image: linear-gradient(top, #f6f6f6, #e0e0e0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f6f6', EndColorStr='#e0e0e0');
	border-top: 1px solid #b2b2b2;
	text-align: center;
}

#slideWait{
    position: absolute;
    z-index: 2;
    top: 198px;
    left: 275px;
}

#slideWait.hidden{
    display:none;
}

#slideNavigationWindow button.slideNavigation{
    width: 35px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    border: 0;
    padding: 6px 2px;
    margin: 0 0 0 0;
    cursor: pointer;
	background: transparent;
}

#slideNavigationWindow .slideSelector{
	display:inline-block;
	margin-right: auto;
	margin-left: auto;
    padding-bottom: 2px;
	font: 13px arial;
}

#slideDropDown{
	width: 398px;
	margin-right: auto;
	margin-left: auto;
}

#slideNavigationWindow .slideCount{
	display:inline-block;
    margin-right: 10px;
	margin-left: 10px;
    padding-top: 5px;
    font: 13px arial;
}

.thumbnailToggle {
    display: block;
	display:inline-block;
	line-height: normal;
}

.prevSlide {
	display: inline-block;
	margin-right: auto;
	margin-left: auto;
	line-height: normal;
}

.nextSlide{
	display: block;
	display:inline-block;
	margin-right: auto;
	margin-left: auto;
	line-height: normal;
}

#thumbnailWindow {
	height: 104px;
	display: none;
}

.hideButton {
	display:none;
}

	/* <---------------------------  Thumbnail Container  --------------------------- >  */

	#thumbnailContainer {
		display: none;
		width: 584px;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		margin-right: auto;
		margin-left: auto;
		border: 1px solid #b2b2b2;

	}

	#thumbnailContainer .thumbnail{
		display: inline;
		margin-left: 2px;
		margin-right: 2px;
		margin-top: 1px;
		margin-bottom: 1px;
		border: 2px solid #b2b2b2;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e0e0e0));
		background-image: -webkit-linear-gradient(top, #f6f6f6, #e0e0e0);
		background-image: -moz-linear-gradient(top, #f6f6f6, #e0e0e0);
		background-image: -ms-linear-gradient(top, #f6f6f6, #e0e0e0);
		background-image: -o-linear-gradient(top, #f6f6f6, #e0e0e0);
		background-image: linear-gradient(top, #f6f6f6, #e0e0e0);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#f6f6f6, EndColorStr=#e0e0e0);
		cursor:pointer;
	}

	#thumbnailContainer .thumbnailHighlightON{
		border: 2px solid #949ca1;
		margin-top: 0px;
		margin-bottom: 0px;
		background: #c0c1c3;
	}
	
	#thumbnailContainer img:hover {
	  border: 2px solid #000;
	}

/*	.tab-content>.tab-pane {
		line-height: 0;
	} */
	
/* Tooltip */
		.tooltip {
		  position: relative;
		  display: inline-block;
		  opacity: 1;
		}

		.tooltip .tooltiptext {
			transition:visibility .25s, opacity .25s; 
            visibility:hidden; opacity:0;
			width: 110px;
			background-color: black;
			color: #fff;
			text-align: center;
			border-radius: 6px;
			padding: 5px 0;
			position: absolute;
			z-index: 1;
			bottom: 150%;
			left: 50%;
			margin-left: -50px;
		}

		.tooltip .tooltiptext::after {
			content: " ";
			position: absolute;
			top: 100%; 
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: black transparent transparent transparent;
		}

		.tooltip:hover .tooltiptext {
			visibility:visible;
			opacity:1;
		}	
	
	@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px)  { 
	
		.tooltip .tooltiptext {
			display: none;
		}
	}
	
/*  <---------------------------  Player Container  --------------------------- > */

div.playerContainer{
    width: 448px;
}

.playerOptions {
	height: 24px;
	text-align: right;
}

.playerOptionsPostion {
	top: 2px;
}

.playerOptionsButtons {
	background-color: #000;
}

#playerOptionsBarContainer {
	background-color: #000;
	float: right;
	line-height: normal;
}

#ccButton {
	background:url(../images/cc1.png)	no-repeat;
    display: inline-block;
    position: relative;
	width: 25px;
	height: 20px;
	margin: 1px 14px 0;
}

#ccButton:hover {
	background-position: -25px 0;
	cursor: pointer;
}

#expandVideoButton {
	background:url(../images/expandVideo.png)	no-repeat;
	background-size:cover;
	display: inline-block;
	position: relative;
	width: 25px;
	height: 20px;
    margin: 1px 14px 0;
}

#expandVideoButton:hover {
	transition: all 0.5s;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-ms-transform: scale(1.25, 1.25);
	-webkit-transform: scale(1.25, 1.25);
	transform: scale(1.25, 1.25);
	cursor: pointer;
}

#audioImageDiv{
    overflow: hidden;
    text-align: center;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e0e0e0));
    background-image: -webkit-linear-gradient(top, #f6f6f6, #e0e0e0);
    background-image: -moz-linear-gradient(top, #f6f6f6, #e0e0e0);
    background-image: -ms-linear-gradient(top, #f6f6f6, #e0e0e0);
    background-image: -o-linear-gradient(top, #f6f6f6, #e0e0e0);
    background-image: linear-gradient(top, #f6f6f6, #e0e0e0);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#f6f6f6, EndColorStr=#e0e0e0);
}

#playerDiv{
	width: 448px;
	height: 276px;
}

#mediaframe{
    display: block;
}

#mediaframe.hidden{
    display: none;
}

#optext{
    margin-top:15px;
	font: 13px arial;
}

/* <---------------------------   Log  --------------------------->  */

#log{
    display: block;
    position: absolute;
    top: 5px;
    left: 250px;
    height: 80px;
    width: 500px;
    overflow: scroll;
    font-family: monospace;
    font-size: 8pt;
    border: 2px yellow dashed;
    background-color: black;
    padding: 5px 5px 5px 5px;
    z-index:255;
}

#log.hidden{
    display:none;
}

#log div{
    border-bottom: 1px darkgray solid;
    padding-bottom: 2px;
    padding-top: 2px;
}

#log .info{
    color: white;
}

#log .warning{
    color: yellow;
}

#log .error{
    color: red;
    font-weight: bold;
}

/*  <--------------------------- Footer  --------------------------->  */

.mmappletpoweredbyP hr {
	border: 0;
	color: #b2b2b2;
	background-color: #b2b2b2;
	height: 1px;
	margin: 2px 0;
}

.mmappletpoweredbyP {
    bottom: 3px;
    width: 99%;
	margin-top: 20px;
	margin-right: auto;
    margin-left: auto;
}

.mmappletpoweredbyP .copyright{
    font-size: 8pt;
	float: left;
}
.mmappletpoweredbyP .logo{
    text-align: right;
	float: right;
}

.mmappletpoweredbyP .logo img{
    cursor: pointer;
}


#hiddenSection {
    display: none;
    position: fixed;
}
#hiddenPopup {
    position: relative;
    width: 400px;
    height: 100px;
    background: #e3e3e3;
    color: #222;
    border: 1px solid #333;
    border-radius: 5px;
    margin: 15% auto;
}

#popupHeader {
    background: grey;
    color: white;
    padding: 0px 20px;
    font-weight: bold;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#disconnectMessage {
    padding: 20px;
}