/* PAGE DEFAULTS */
	html,
	body {
		margin: 0;
		padding: 0;
		height: 100%;
	}

	/* PAGE */
	#pageWrapper {
		min-width: 100vw;
	  	min-height: 100%;
	  	position: relative;
	  	margin: 0;
	  	padding: 0;
	}
	.pageWrapperMobile{
		bottom: 0px;
	}

	/* HEADER */
	#classroomHead {
		background-color: black;
		padding:3px;
		height: 45px;
		/*font-size: 1.5vw;*/
		color: white;
		padding-left: 3px;
		padding-top: 4px;
		max-height:45px;
	}
	.classroomHeadMobile{
		display: none;
	}
	#hdrButtons{
		float: left;
	}
	#hdrClassName{
		padding-left: 5px;
		color: white;
		max-height: inherit;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: medium;
		white-space: nowrap;
		float: left;
		width: 75%;
	}
	/*.mobileHeader{
		height:45px;
		min-width: 100vw;
		display:none;
		background-color: white;
	}
	.mobileHeaderShow{
		display:block;
	}*/

	@media screen and (max-width: 730px){
		#hdrClassName{
			font-size: small;
		}
	}

	/*##################################################*/
	/* CLASS CONTENT */
	
	#classroomContent {
		display: block;
		position: absolute;
		height: auto;
		left: 0;
		right: 0;
	}
	.classroomContentNonMobile{
		top: 45px;
		bottom: 47px;
	}
	.classroomContentMobile{
		top: 0px;
		bottom: 0px;
	}
	
	/* NAVIGATION */
	#ulNavigation{
		padding: 10px 0px 0px 0px;
		list-style-type: none;
		border-bottom : 0px;
	}
	.navContainer{
		margin-right:0;
		margin-left:0;
		background-color:#fff;
		box-shadow: none;
		position: relative;
		padding: 5px 5px 5px;
		width: 250px;
		overflow-y: scroll;	 
		float:left;
	}
	.navigationContainer{
		line-height:40px;
		background-color: #444444;
		min-width:250px;
		float:left;
		font-family: Arial, Verdana, sans-serif;
		font-size: 1.3em;
		color: white;
		overflow-y: scroll;	 
		top: 0px;
		right: 0px;
		left: 0px;
		bottom: 0px;   
		height: inherit;  
		position:absolute;
		z-index:1000;
		display: none;
		max-width: 250px;
	}
	.divNavEventClass{
		width: 100%;
		height: 40px;
		overflow: hidden;
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.divNavEventClassSelected{
		width: 100%;
		height: 40px;
		opacity: .3;
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.divNavText{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.divNavEventClassCurrent{
		width: 100%;
		height: 40px;
		cursor: pointer;
		background-color: navy;
	}
	.divNavEventClass:hover{
		background-color: #B1C9FF;
		opacity: 1;
	}
	.divNavEventClassSelected:hover{
		background-color: #B1C9FF;
		opacity: .5;
	}
	#divSpanType{
		float: left;
		margin-right: 5px;
		top: 5px;
		left: 0px;
		position: relative;
		box-sizing: border-box;
	}
	.divNavLabelContainer{
		left: 2px;
		height: 26px; 
		text-align: center;
		width: 65px;
		font-size: large;
	}
	
	/* WARP */
	/*.contentLeft{
		float:left;
		width: 30%;
		min-height:100%;
		max-height:100%;
		overflow-y:scroll;
		padding: 5px;
	}*/
	#divWarpMain{
		float:left;
		/*height:100%;*/
		overflow-y:scroll;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 15px;
		padding-bottom: 5px;
		background-color: white;

		width:100%;
		/*min-height:100%;*/
		max-height:100%;
		overflow-y:scroll;
		padding: 5px;

	}
	.UnitySimplePollContainerQuestionContainerClass
	{
		margin: 12px 4px 10px 4px;
		font-size: larger;
		font-weight: bold;
	}
	.UnitySimplePollContainerQuestionClass
	{
		font-style:italic;
	}
	.uspcChoiceChoiceDivClass
	{
		position: relative;
		left: 5%;
		width: 90%;
		margin-top: 8px;
		margin-bottom: 10px;
		border-radius: 10px;
	}
	.uspcChoiceChoiceDivClassNoHover {
		position: relative;
		left: 5%;
		width: 90%;
		margin-top: 8px;
		margin-bottom: 10px;
		border-radius: 10px;
	}
	/*.uspcChoiceChoiceDivClass:hover {
		background-color:#AAAAAA;
	}*/
		
	/*.contentRight{
		background-color:#C6CDD3;
		float:left;
		width: 70%;
		height: 100%;
		position: relative;
	}*/
	.contentRightMobile{
		float: inherit;
		width: 100%;
		height: 70%;
		background-color:#C6CDD3;
		/*padding: 4px;*/
		position: relative;
	}
	.divSlideContainer
		{
			display: block;
			min-height:95%;
			max-height:95%;
			max-width:97%;
			/*height: 60vh;*/
			position: relative;
			margin: 0 auto;
			padding-top: 4px;
			padding-bottom: 8px;
		}
	#divSlideFrame{
		height: 99%;
		width: 99%;
		margin: 0 auto;
		background-size: contain;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		position: absolute;
	}
	#topRight{
		padding-bottom: 5px;
		display: none;
	}
	#player{
		display: none;
	}

	@media (orientation: portrait)  {
		.contentLeft {
			float: inherit;
			width: 100%;
			min-height: 35%;
			max-height: 35%;
			border-bottom: darkgray;
			border-bottom-width: 3px;
			border-bottom-style: solid;
		}
		.contentLeftWrapper {
			width: 100%;
	    	max-height: 35%;
	    	min-height: 35%;
	    	height: 35%;
			float: none;
		}
		.contentLeftCollapse {
			float: inherit;
			width: 100%;
			min-height: 35%;
			max-height: 35%;
			border-bottom: darkgray;
			border-bottom-width: 3px;
			border-bottom-style: solid;
		}
		.contentRight {
			float: none;
			width: 100%;
			height: 65%;
			background-color:#C6CDD3;
		}
		#divWarpMain {
			float: none;
		}
		#divToolsText{
			display: none;
		}
		#divFullScreenMode{
			width: 100px;
			position: absolute;
			right: 15px;
			top: 10px;
			z-index: 99;
			opacity: .75;
		}
	}
	@media (orientation: landscape){
		#divWarpMain {
			float:left;
			/*height:100%;*/
			overflow-y:scroll;
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 15px;
			padding-bottom: 5px;
			background-color: white;
		}
		.contentLeft{
			float:left;
			width: 30%;
			min-height:100%;
			max-height:100%;
			overflow-y:scroll;
			padding: 5px;
		}
		.contentLeftWrapper {
			width: 30%;
    		height: 100%;
    		float: left;
		}
		.contentRight{
			background-color:#C6CDD3;
			float:left;
			width: 70%;
			height: 100%;
			position: relative;
		}
		#divToolsText{
			display: block;
		}
		#divFullScreenMode{
			width: 100px;
			position: absolute;
			left: 15px;
			top: 10px;
			z-index: 99;
			opacity: .75;
		}
	}

	/* FOOTER */
	#footerAudio
	{
		background-color: black;
		width:100%;
		height:47px;
		position:absolute;
		bottom:0;
		left:0;
		padding-left: 3px;
		padding-top: 4px;
		padding-bottom: 2px; 
		padding-right: 3px;
	}
	.footerAudioMobile{
		display: none;
	}
	#slider 
	{
		float:left;
		width: 100%;
		position: relative;
		height:25px;
		/*margin-left: 20px;*/
	}
	.footerDiv{
		float: left;
		/*margin-left: 5px;*/
		margin-right: 5px;
	}
	#controlButtons{
		/*width: 25%;*/
		/*min-width: 130px;*/
		min-width: 20px;
	}
	#divInterval{
		float:left;
		color: white;
	}
	#divProgress{
		width: 100%;
		float:left;
		height: 10px;
		margin:0px;
	}
	#divProgressBar{
	}
		
	/* END CLASS CONTENT*/
	/*##################################################*/
	
	/* MODAL */
	.modal-dialog{
		z-index: 1051;
	}
	
	.glyphicon-refresh-animate {
	-animation: spin .7s infinite linear;
	-webkit-animation: spin2 .7s infinite linear;
	-moz-animation: spinMoz .7s infinite linear;
	}
	@-webkit-keyframes spin2 {
		from { -webkit-transform: rotate(0deg);}
		to { -webkit-transform: rotate(360deg);}
	}
	@keyframes spin {
		from { transform: scale(1) rotateZ(0deg);}
		to { transform: scale(1) rotateZ(360deg);}
	}
	@-moz-keyframes spinMoz	{
		from { -webkit-transform: rotate(0deg);}
		to { -webkit-transform: rotate(360deg);}
	}
	.collapse.width {
		height: auto;
		-webkit-transition: width 0.40s ease;
		-moz-transition: width 0.40s ease;
		-o-transition: width 0.40s ease;
		transition: width 0.40s ease;
	}
	.collapse {
		-webkit-transition: width 0.40s ease;
		-moz-transition: width 0.40s ease;
		-o-transition: width 0.40s ease;
		transition: width 0.40s ease;
	}

	#player-tooltip
	{
		background-color: #f5f5b5;
		color: #373737;
		border: 2px solid #DECA7E;
		font-family: sans-serif;
		font-size: 12px;
		line-height: 18px;
		padding: 10px 13px;
		position: absolute;
		text-align: center;
		top: -42px;
		/*width: auto;
		max-width: 200px*/
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		font-size: large;
	}
	.divHeader {
	  border-color: gray;
	  border-style: solid;
	  border-width: 1px;
	  background-color: bisque;
	  height: 20px;
	  display: inline-block;
	  width: 100%;
	  text-align: center;
	}
	.divHeader:hover{
		cursor:pointer;
		background-color: cornflowerblue;
	}

	.adminCheckBox{
		margin-left: 25px;
	}

	.helpGlyph{
		color: #428BCA;
		background-color: lightgray;
	}

	.helpGlyph:hover{
		color: #286090;
		background-color: lightgray;
		cursor: help;
	}

	.adminGlyph:hover{
		cursor: pointer;
		color: green;
	}

	.spanAdminTotalTime{
		font-style: italic;
	}

	.divAdminTotalTime{
		margin-left: 25px;
	}

	.inputTime{
		width: 55px;
	}
	.adminTable{
		padding: 2px;
	}
    
	.adminDivDefault{
		float:left;
		height:50%;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 15px;
		padding-bottom: 5px;
		background-color: lightgray;
		display: none;
	}
	.contentLeftWrapper {
		/*width: 30%;*/
    	height: 100%;
    	/*float: left;*/
	}
	.divWarpWithAdmin{
		height:50%;
		min-height: 50%;
	}
	.divWarpWithoutAdmin{
		height: 100%;
		min-height: 100%;
	}
	.adminDivShow{
		display: block;
	}
	#divAdministrator{
		overflow-y: scroll;
		border-top: gray;
    	border-top-style: solid;
    	border-top-width: thin;	 
	}


	.adminSaveCancel{
		padding-top: 10px;
		text-align: right;
		position: static;
	}
	.adminSaveCancel:before,
	.adminSaveCancel:after{
		content: "";
		display: table;
	}
	.adminSaveCancel:after{
		clear:both;
	}


	.adminRefresh {
		padding-left: 10px;
		float: left;
	}
	.adminSaveCancelButtons{
		float: left;
	}

	.tblAdministrator{
		width: 100%;
	}

	.tblAdministrator th {
		padding-left: 2px;
		padding-right: 2px;
		padding-bottom: 1px;
	}

	.tblAdministrator tr td{
		padding-bottom: 2px;
		padding-left: 2px;
		padding-right: 2px;
	}

	.hrAdmin{
		margin-bottom: 10px;
    	margin-top: 10px;
	}
	.taClassTitle{
		width: 100%;
	}

	.adminBottom{
		margin-top: 10px
	}
	
	.adminTotalTime{
		margin-top: 10px;
	}

    .btn-bold {
        font-weight:bold;
    }

    .btn-botmargin{
    	margin-bottom: 3px;
    }

    .overrideTimeWarning {
        background-color: lightcoral;
    }