body {

	line-height: 22px;
	font-family: Verdana, Geneva, sans-serif;
	/*background: #666;*/
	background:  #333;
	margin:0px;
/*	min-width: 100%;*/
	
}
header{
	width:990px;
	height:52px;
	background-color: #1f78a6;
	margin:auto;
	margin-top:0px;
	border-radius:20px 20px 0px 0px/20px 20px 0px 0px;
	}
	
#coursename{
	color: #FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	padding:15px;
	font-size:18px;
	float:left;

}

#navup{
	width:560px;
	height:52px;
	float:right;

	}
	
#helpicon{
	width:120px;
	float:right;
	cursor: pointer;
}	

/*#helpicon :hover{
	width:120px;
	background-color: #CCC;
	height:52px;
	border-radius:0px 20px 0px 0px/0px 20px 0px 0px;
	
}	
*/

#menuicon{
	width:120px;
	float:right;
}

#menuContainer{
	/*position: absolute;
	float:right;
	float:left;*/
    /*left: 800px;
    top: 0px;*/
    z-index: 100;
}

#menuC{
	width:990;
	position:absolute;
	/*float:right;*/
	
}


/*#menuicon :hover{
	width:120px;
	background-color: #CCC;	
}*/	

#transcripticon{
	width:120px;
	float:right;
}

#glossaryicon{
	width:120px;
	float:right;
}

#illustrationicon{
	width:120px;
	float:right;
}

/*#glossaryicon :hover{
	width:120px;
	background-color: #CCC;
}*/

#courseinfo{
	width:990px;
	box-sizing:border-box;
	/*height:50px;
	background-color: #FFF;*/
	background-color:#0cadb7;
	margin:auto;
}

	
	
#lessonname{
	width:100%;
	/*height:25px;
	background-color:#ea581e;
	background-color:#c7270f;
	background-color:#b22d00;
	*/
	margin:auto;
	background-color:#3C3C3C;
	color:#FFF;
	font-size:14px;
	padding-left:15px;
	padding-right:15px;
	box-sizing:border-box;
	position:relative;
	overflow:auto;
}

#topicname{
	width:100%;
	/*height:75px;
	background-color:#c7270f;
	background-color: #CCC;
	color: #333;*/
	margin:auto;
	background-color:#838383;
	color:#FFF;
	font-size:14px;
	padding-left:15px;
	font-weight:bold;
	box-sizing:border-box;
	position:relative;
	overflow:auto;
}

	
#topicContainer	{
	width:990px;
	height:500px;
	background-color:#FFF;
	position:relative;
	margin:auto;
	/*overflow:auto;*/
}

#menuContainer {

}
	
#topicLoader{
	width:990px;
	height:500px;
	background-color:#FFF;
	/*position:relative;*/
	margin:auto;
}

#tracer{
	width:990px;
	height:500px;
	background-color:#FFF;
	overflow:auto
}

#help{
	width:990px;
	height:500px;
	background-color:#FFF;
	position:absolute;
	margin:auto;
}

#glossary{
	width:990px;
	height:500px;
	background-color:#FFF;
	position:absolute;
	margin:auto;
}

#transcript{
	width:100%;
	height:500px;
	background-color:#FFF;
	position: absolute;
	margin:auto;
}
	
#line{
	width:990px;
	height:2px;
	background-color: #8e023f;
	margin:auto;
}

#bottoncontents{
	height:62px;
	
	}


footer{
	width:990px;
	height:51px;
	background-color: #1f78a6;
	/*background-color:#ec731a;
	background-color:#9c2c21;*/
	margin:auto;
	border-radius:0px 0px 22px 22px/0px 0px 22px 22px;
	position:relative;
	bottom:1px;
}



#p1{
	float:left;
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}



#gotobtn{
	float:right;
	height:51px;
	padding-top:13px;
}

#goBtn{
	float:right;
	color: #FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-size:13px;
	border:none;
	padding:8px;

}

/*#goBtn:hover{
	cursor: pointer;
	float:right;
	color: #333;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	padding-top:5px;
}*/

#gotoText{
	border-radius:5px 5px 5px 5px/5px 5px 5px 5px;
	border:none;
	width:32px;
	height:25px;
	float:right;
}
	
#gotobox{
	width:71px;
	height:51px;
	float:right;
	padding-top:12px;
}	


#pageNo{
	border-radius:5px 5px 5px 5px/5px 5px 5px 5px;
	border:none;
	width:71px;
	height:25px;
}



/* Navigatemenu */

#controls{
	width:600px;
	height:51px;
	float:left;
}

#nexttxt{
	width:64px;
	height:51px;
	float:left;
	color:#FFF;
	font-size:12px;
	padding-top:15px;
	padding-left:5px;
	padding-right:0px;
}

#nextTopicBtn{
	float:left;
	padding-left:5px;
	padding-right:5px;
}
	
/*#nextTopicBtn:hover{
	float:left;
	padding-left:5px;
	padding-right:5px;
	background-color:#333;
}*/	
	
#nextBtn{
	float:left;
	padding-left:5px;
	padding-right:5px;
}

/*#nextBtn:hover{
	float:left;
	padding-left:5px;
	padding-right:5px;
	background-color:#333;
}*/	
	
#pagebox{
	width:71px;
	height:25px;
	float:left;
	padding-top:12px;
}	

		
#preBtn{
	float:left;
	padding-left:5px;
	padding-right:5px;
}
	
/*#preBtn:hover{
	float:left;
	padding-left:5px;
	padding-right:5px;
	background-color:#333;
}*/

#preTopicBtn{
	float:left;
	padding-left:5px;
	padding-right:5px;
}
	
/*#preTopicBtn:hover{
	float:left;
	padding-left:5px;
	padding-right:5px;
	background-color:#333;
}*/
	
#prvtxt{
	width:64px;
	height:51px;
	float:left;
	color:#FFF;
	font-size:12px;
	padding-top:18px;
	padding-left:10px;
	padding-right:10px;
}



#shapelogo{
	width:201px;
	height:51px;
	border-radius:0px 0px 20px 0px/0px 0px 20px 0px;
	background-color:#FFF;
	float:right;
}

#golslogo{
	width:187px;
	height:51px;
	float:right;
	padding-right:8px;
}

#triangle-Right {
	width: 0;
	height: 0;
	border-left: 35px solid transparent;
	border-right: 0px solid transparent;
	border-top:50px solid white;
	margin-left:50px;
	float:right;	
}

#topicNo{
	position:absolute;
	font-size:9px;
	color:#999;
	margin-left:50px;
}

#copywrite{
	text-align:center;
	color:#d6d6d6;
	font-size:11px;
}



/* ------- CSS added by iMRAN for button effects -------*/
.hover_dark{
	background-color:#333;
}

.hover_light{
	background-color: #CCC;
}
	
.disable{
	opacity: 0.5;
	cursor:not-allowed;
	/*cursor:default;*/
}

#closeBtn{
	cursor:pointer;
	width:30px;
	height:30px;
	background-color:#1f78a6;
	position: relative;
	font-size:18px;
	color: #FFF;
	margin-left:940px;
	font-weight:bold;
	font-family:Verdana, Geneva, sans-serif;

}

/*#closeBtn{
	cursor:pointer;
	width:30px;
	height:30px;
	background-color: #b22d00;
	position: relative;
	font-size:18px;
	color: #FFF;
	margin-left:940px;
	font-weight:bold;
	font-family:Verdana, Geneva, sans-serif;
	border-style: dotted;
}*/
	
.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-ms-user-select: none;
	user-select: none;
}

/*-----------------------------
for creating blinking effect of
next button
------------------------------*/
.blink {
    animation-duration: 0.35s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
	/*background-color:#F00;*/
	background-color:#333;

}

@keyframes blink {
    from {
        opacity: 1;
    }
	
    to {
        opacity: 0;
    }
}

/* ------------------------
for hidding the download button of HTML5 video
---------------------------*/
	video::-internal-media-controls-download-button {
    display:none;
   }

   video::-webkit-media-controls-enclosure {
        overflow:hidden;
   }

   video::-webkit-media-controls-panel {
        width: calc(100% + 30px); /* Adjust as needed */
   }