body{margin:0px;padding:0px;background-image:url('sos.png');
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;


}

.medaler{width:250px;margin:auto;}
.medaler img{width:100%;}
#audioAttrib{position:absolute;bottom:-20px;font-family:Arial;font-size:11px;color:grey;text-align:center;width:100%;}

#introTitle{margin:auto;min-height:50px;font-size:40px;text-align:center;padding:10px;width:80%;margin-top:80px;border:3px solid grey;border-radius:5px;font-family:Arial, Helvetica, sans-serif;}


#buttonbar{margin-top:20px;width:250px;margin:auto;}

#bb1{float:left;font-family:Arial, Helvetica, sans-serif;width:80px;font-size:21px;color:#2e3131;padding:5px;border-radius: 8px;cursor:pointer;background-color:#ececec;text-align:center;}
#bb2{float:right;font-family:Arial, Helvetica, sans-serif;width:80px;font-size:21px;color:#2e3131;padding:5px;border-radius: 8px;cursor:pointer;background-color:#ececec;text-align:center;}

#bb1:hover{color:#FFF;background-color:#67809f;}
#bb2:hover{color:#FFF;background-color:#67809f;}

#slider{width:400px;margin:auto;margin-top:42px;}


#revPix {margin:auto;width:80px;height:90px;}
#revPix img{margin:auto;width:80px;}

#revText{font-family:Arial, Helvetica, sans-serif;font-size:27px;color:#2e3131;text-align:center;
padding-top:80px;padding-bottom:10px;width:90%;margin:auto;margin-bottom:25px;}
#revText2{text-align:center;width:90%;margin:auto;font-family:Arial, Helvetica, sans-serif;margin-bottom:10px;}


#revText3{font-size:19px;text-align:center;width:90%;margin:auto;font-family:Arial, Helvetica, sans-serif;margin-bottom:25px;}

#butang{color:#fff;border-radius:5px;background-color:#446cb3; text-align:center;cursor:pointer;width:90px;margin:auto;font-family:Arial, Helvetica, sans-serif;font-size:16px;padding:8px;}
#butang:hover{opacity:.7;}

.lefter{ margin-left:330px!important;text-align:left!important; width:460px!important;}

.tooltip {
  position: relative;
  display: inline-block;
}

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

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

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


#dpMenu{position:absolute;height:0px;z-index:250;width:100%;box-sizing:border-box;}

#reddot{width:20px;height:20px;float:left;margin-right:5px;}
#reddot img{width:20px;height:20px;}

#microLesson{width:796px;min-height:40px;margin:auto;margin-top:5px;border-radius:4px;cursor:pointer;border:3px orange solid;}
#leftLesson{width:25%;background-color:orange;float:left;min-height:40px;line-height:20px;}
#leftLessonInner{font-family: sans-serif;color:#fff;padding:10px;}
#rightLesson{width:75%;background-color:white;float:right;min-height:40px;line-height:20px;}
#rightLessonInner{font-family: sans-serif;padding:10px;float:left;}
#mlindex{float:right;font-family: sans-serif;line-height:20px;padding:10px;background-color:#f3f1ef;}

#dummy{
	display:none;
	}
	#lbinner{
		border:4px solid orange;
	width:280px;
	height:200px;
	padding-top:50px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;font-size:16px;
	}

#contbutton{cursor:pointer;}

#semibutton{cursor:pointer;background-color:#eceded;border-radius:4px;padding:4px;width:250px;margin:auto;}


#drop{height:0px;}



#spacer{height:0px;}
.spacer3{height:10px;width:100%;font-size:9px;}
#navbar{height:80px;float:right; }
#navbarinner { height:22px;   margin-top:5px;}
#navbarinner1 { height:30px;   }

.navelement{
	color: #efefef;
	 
	width: auto;
	text-align: center;
	margin-top: 0px;
	height:18px;
	 font-family: sans-serif;
	 font-size:17px;
	margin-left: 17px;
	cursor:pointer;
	border:1px  solid #e67e22;
	border-width: 0 1px 1px 1px;
	border-radius:5px;
	padding:5px;
	float:left;	background-color:#eb9951;
}

.navSelected{border:2px solid white;}
 


.navelement:hover{background-color:#F5AB35;color:#fff!important;}





.smallMenu{width:100%;margin:auto;font-family:Arial, Helvetica, sans-serif;font-size:24px;cursor:pointer;padding-bottom:2px;padding-top:2px;text-align:center;height:30px;border-top:2px solid white;}
 

.orange{background-color:#e67e22;color:white;}
.orange:hover{background-color:#f39c12;color:white;}

 





.navelement1{
	float: none;
}

.navelementsmall{
	color: #27241d;
	 
	width: 4%;
	text-align: center;
	margin-top: 3px;
	height:28px;
	 font-family: 'Paytone One', sans-serif;
	margin-left: 1%;
	cursor:pointer;
}
#navbar3{width:80px;position:absolute;top:5px;right:5px;background-color:#e67e22!important;cursor:pointer;}
#navbar3 img{width:70px;}
#navbar3:hover{opacity:0.4;}
 

 


#navContent{
	border: solid 3px grey;overflow:hidden;
	width:798px;height:470px;margin:auto;background:white;position:relative;margin-top:5px;}
	

#infoBar{position:absolute;width:100%;height:0px;float:left; }
#qtitle{font-size:26px; padding-left:150px;font-family:Arial, Helvetica, sans-serif;position:absolute;top:5px;color:#FFF;}
#qtitle2{font-size:26px; text-align:center; font-family:Arial, Helvetica, sans-serif; padding-top:5px;color:#FFF;}

.text4{font-family:Arial, Helvetica, sans-serif;position:absolute;
font-size:26px; padding-left:40px;top:5px;
color:#FFF; }



#game1{
margin:auto;
width:800px;
height:400px;
right:0px;
position:absolute;
z-index:1;
}
 


 .qq{text-align:center;width:50px;padding:1px;background-color:#FFFBEA;height:100%;float:right;margin-left:5px;border-right:1px solid #abb7b7;}
 .pp{text-align:center;width:50px;padding:1px;background-color:#FFFBEA;height:100%;float:right;margin-left:5px;border-right:1px solid #abb7b7;}
 .rr{text-align:center;width:50px;padding:1px;background-color:#FFFBEA;height:100%;float:right;margin-left:5px;border-right:1px solid #abb7b7;}
 .ss{text-align:center;width:50px;padding:1px;background-color:#FFFBEA;height:100%;float:right;margin-left:5px;border-right:1px solid #abb7b7;}
 

#innerBox{position:absolute;}
	
#quizList{ margin:40px;margin-right:0px;width:90%;height:345px;overflow-y:scroll;border:1px grey solid;overflow-x:hidden;}	

#quizListH{ height:0px;}	
#page1Message{ width:100%;height:40px;text-align:center; font-family: arial;font-size:24px;color:#333;}	


.spacer2{height:3px;width:800px;;background-color:#e8ecf1;clear:both;float:none;}

.box1{cursor: pointer; min-height:23px;width:100%;font-family: arial;opacity:.6;overflow:hidden;padding:1px;}
 

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
#pageno{position:absolute;text-align:center;bottom:15px; width:80px;font-family: sans-serif;font-size:10px;right:46%;}
 

 
.questionText{
font-family:Arial, Helvetica, sans-serif;
font-size:27px;
color:#2e3131;
text-align:center;
padding-top:80px;
padding-bottom:10px;
width:710px;
margin:auto;
margin-bottom:40px;
}

.qpix{width:250px;height:250px;padding-left:40px;float:left;margin-top:-80px; }
.qpix img{width:250px;height:100%;}

.questionText2{
font-family:Arial, Helvetica, sans-serif;
font-size:27px;
color:#000;
text-align:center; 
padding-top:80px;
padding-bottom:10px;
width:710px;margin:auto;
}

.text1{font-family:Arial, Helvetica, sans-serif;
font-size:23px;margin-left:40px;
color:#009900;}
.text2{font-family:Arial, Helvetica, sans-serif;
font-size:22px;margin-left:40px;
color:#CC3300;}

.text3{font-family:Arial, Helvetica, sans-serif;
font-size:22px;text-align:center; 
color:#2c3e50;}

.text3x{font-family:Arial, Helvetica, sans-serif;
font-size:22px;text-align:center; 
color:#2c3e50;}


.option{
font-family:Arial, Helvetica, sans-serif;
width:250px;
margin:auto; 
margin-top:10px;
font-size:21px;
color:#2e3131;
padding:5px;
position:relative;
border: 2px solid white;
border-radius: 8px;
cursor:pointer;
background-color:#ececec;
text-align:center;
}

.option:hover{
 
color:#FFF;
background-color:#67809f;
}

.optionlong{width:400px;}


.optionxtra{margin-left:330px;}


 

#newNextButang{text-align:center;font-family:Arial;clear:both;float:none;margin:auto;opacity:0.2;padding:6px;border-radius:6px;font-size:16px;width:50px;background-color:#D2D7D3;margin-top:0px;cursor:pointer;}

#newNextButang:hover{background-color:#ececec;color:grey;}


 #newNextButang2{text-align:center;font-family:Arial; float:right; opacity:0.2;padding:6px;border-radius:6px;font-size:16px;width:50px;background-color:#D2D7D3;margin-top:0px;cursor:pointer;}

#newNextButang2:hover{background-color:#ececec;color:grey;}
#fbarea3{width:120px;margin:auto;}

#playButang{opacity:0.2;float:left;cursor:pointer;}
#playButang2{margin:auto;width:30px;cursor:pointer;}
 

#fbimg{position:absolute;top:-10px;right:-20px;}
#fbimglong{position:absolute;top:-10px;right:-20px;}



.active{height:32px;color:#C63;background-color:#006600;}

 


.mynotes{position:absolute;right:20px;top:70px;z-index:100;}
 
.dloads{position:absolute;right:20px;top:170px;z-index:101;}
#mymenu{position:absolute;right:30px;top:10px;padding:1px;width:50px;text-align:center;color:#FFF;border:solid white 1px;border-radius:3px;cursor:pointer;font-family:Arial, Helvetica, sans-serif;cursor:pointer;z-index:101;}
#mylink{background-color:#e67e22;opacity:1;position:absolute;right:0px;top:7px;width:28px;height:28px;text-align:center;cursor:pointer;font-family:Arial, Helvetica, sans-serif;cursor:pointer;z-index:101;}
#mylink img{width:28px;}
#mylink:hover{opacity:.5;}

#mynotes{position:absolute;right:90px;top:10px;padding:1px;width:50px;text-align:center;color:#FFF;border:solid white 1px;border-radius:3px;cursor:pointer;font-family:Arial, Helvetica, sans-serif;cursor:pointer;z-index:101;}
#mynotes2{position:absolute;right:10px;top:10px;padding:1px;width:50px;text-align:center;color:#FFF;border:solid white 1px;border-radius:3px;cursor:pointer;font-family:Arial, Helvetica, sans-serif;cursor:pointer;z-index:101;}

.mynotes:hover{border: 3px solid #FEF2D8;cursor:pointer;}
.dloads:hover{border: 3px solid #FEF2D8;cursor:pointer;}
#mymenu:hover{background-color:#FF9966;cursor:pointer;}
#mynotes:hover{background-color:#FF9966;cursor:pointer;}
 

#socmediabar{text-align:center;width:200px;margin:auto;margin-top:10px;}
#socmediabar img{width:50px;}
#socmediabar img:hover{opacity:.7;}

.twitpic{text-align:center;width:100px;float:left;}
.fb1{text-align:center;width:180px;float:left;padding-top:8px;}

.bottomlink{ padding:5px;margin:5px;padding-top:1px;padding-bottom:1px; 
background-color:#CC3300;color:#FFFFCC;}




.fstext1{font-family:Arial, Helvetica, sans-serif;
font-size:23px;text-align:center; padding:5px;
color:#333; margin-bottom:3px;}
.fstext1a{font-family:Arial, Helvetica, sans-serif;
font-size:23px;  
color:#fff;background-color:#009900;padding:5px;width:35px;text-align:center;margin-bottom:3px;}


.fstext2{font-family:Arial, Helvetica, sans-serif;
font-size:23px;text-align:center; padding:5px;
color:#333;}
.fstext2a{font-family:Arial, Helvetica, sans-serif;
font-size:23px;text-align:center; 
color:#fff;background-color:#CC3300;padding:5px;width:35px;text-align:center;}

#extremefooter{padding-top:7px;padding-bottom:7px;text-align:center;position:absolute;bottom:0px;width:100%;background-color:#666666;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;}

#promo{margin-bottom:5px;text-align:center;}


.clearme{float:none;clear:both;}



.h1005 img{margin-top:-5px;width:36px;}



@media screen and (max-height:810px) {
#extremefooter{display:none;}
}



@media screen and (min-width:823px) {
#navbar3{display:none;}
#drop{display:none;}
}
@media screen and (max-width:822px) {
 #navbar{display:none;}
}

@media screen and (max-width:822px) {
#leftLesson{width:30%;}
#rightLesson{width:70%;}
#microLesson{width:94%;border:1px orange solid;}
#banner{width:100%;}
#navbar{display:none;}
#navContent{width:94%;min-height:400px;}
#game1{width:100%;}
#spacer{height:5px;}
#quizList{width:80%;margin:auto;margin-top:30px;float:none;height:280px;}
#sideBar{display:none;}
#game2{width:100%;}
.questionText{font-size:25px;padding-top:60px;width:92%;}
.questionText2{font-size:25px;padding-left:40px;padding-top:60px;width:92%;}
.optionold{width:90%;margin:15px;font-size:18px;padding:5px;margin-left:5%;}
#fbarea{width:90%;margin-left:5%;}
.feedback1{margin-left:0px;}
.feedback2{margin-left:0px;}
#newNextButanxg{margin-left:0px;}
.feedback3{padding-top:2px;}
.exBox2{text-align:center;width:40%;float:left;position:relative; margin-left:6%;margin-top:5px;margin-bottom:5px;padding-left:0px;padding-right:0px;height:auto;padding-top:5px;padding-bottom:5px;}
.exBox2 img{margin:auto;text-align:center;}
.exBox1{display:none;}
#aHolder{position:relative;overflow-y:scroll;height:400px;margin:auto;width:auto; text-align:center;}
#aHolder img{margin:auto;text-align:center;}
#aHolder2{position:relative;width:100%;margin:auto;}

 #qtitle{display:none;}
 .lefter{width:100%;margin-left:0px;}
.lefter{ margin-left:0px!important;text-align:center!important; width:100%!important;}
 .optionxtra{margin-left:270px;width:40%;}
 .qpix{width:170px;height:170px;padding-left:40px;float:left;margin-top:0px;}
 .qpix img{width:170px;height:170px;}
}


@media screen and (max-width:720px) {
.qq{display:none;}
.pp{display:none;}
.rr{display:none;}
.ss{display:none;}
#mlindex{display:none;}
}



@media screen and (max-width:700px) {
  #fbarea3{text-align:left;margin-left:300px;}
 
}


@media screen and (max-width:605px) {
  #qtitle2{display:none;}
#reddot{display:none;}
}

@media screen and (max-width:525px) {
 #fbarea3{text-align:center;margin:auto;}
.questionText{font-size:23px;padding-bottom:0px;padding-top:65px;}

#fbimglong{position:absolute;top:-4px;right:-10px;}
#fbimglong img{width:35px;}

.feedback4{}
.smallhide{visibility:hidden;}
.feedback5{visibility:hidden;}
.optionlong{font-size:16px;}

.qpix{width:140px;height:140px;padding-left:0px;float:none;text-align:center;margin:auto;}
.qpix img{width:140px;height:140px;}
.optionxtra{margin:auto;margin-top:7px;width:80%;margin-bottom:3px;}
.lefter{ text-align:center!important;margin:auto;margin-bottom:10px;}

.feedback1pix{clear:both;float:left;}
.fbarea2{margin-left:10px!important;}
#shortspacer{clear:both;float:none;width:100%;height:5px;}
.smoltext{font-size:18px;}
}


@media screen and (max-width:500px) {
#banner img{width:100%;}
#page1Message{font-size:18px;}
.questionText2{padding-left:0px;width:92%;margin:auto;font-size:23px;}
#microLesson{min-height:60px;}
#leftLesson{min-height:60px;line-height:20px;}
#rightLesson{min-height:60px;line-height:20px;}
.text3x{width:92%;margin:auto;font-size:20px;}

}





@media screen and (max-width:450px) {

 


.optionlong{width:90%;}

#rightLessonInner{padding:10px;}
#leftLessonInner{padding:10px;}
#quizList{width:90%;margin:auto;margin-top:30px;float:none;height:280px;}

}

@media screen and (max-width:400px) {
#slider{width:100%;}
#slider img{width:100%;}
#revText{font-size:24px;margin-bottom:20px;}
}


@media screen and (max-width:385px) {
 
#fbarea3{margin-top:-5px;}

}

@media screen and (max-width:350px) {
.questionText2{padding-left:0px;width:92%;margin:auto;font-size:20px;}
#fbarea3{margin-top:-5px;}

}