body,html{margin:0px;padding:0px;background-image:url(sos.png);font-family:Verdana, Geneva, sans-serif;}


.a1{font-weight:bold;color:#392e4a;}
.a2{font-weight:bold;color:#197292;}
.a3{font-weight:bold;color:#00b5cc;}
.a4{font-weight:bold;color:#95a5a6;}


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

.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;}

.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;}


#anim{width:100%;height:20px;display:none;}
.animins{width:19%;height:20px;float:left;text-align:center;border:1px solid grey; }

#bottom{position:absolute;height:10px;bottom:40px;border-top:1px solid grey;margin:auto;right:20px;}


#structions{width:100%;margin:auto; color:white;background-color:#5c97bf;font-size:18px;text-align:center;padding-top:12px;padding-bottom:12px;top:0px;position:absolute;}
#structionsMessage{position:absolute;width:100%;text-align:center;}

#QNUMS{float:left;margin-left:5px}
#qTimer{float:right;margin-right:5px;width:80px;text-align:center;top:0px;position:absolute;right:0px;padding-top:12px;}

#digit1{float:left;width:34px;text-align:center;border-radius:4px;background-color:#FFF;color:#336E7B;}
#digit2{float:left;width:34px;text-align:center;border-radius:4px;background-color:#FFF;color:#336E7B;margin-left:5px;}


#vq{width:100%;text-align:center;font-size:32px;margin-top:80px;margin-bottom:10px;height:80px;}
#gq{width:100%;text-align:center;font-size:24px;margin-top:60px;margin-bottom:10px;height:60px;float:none;clear:both;}
#lq{width:100%;text-align:center;font-size:26px;margin-top:100px;margin-bottom:10px;min-height:50px;float:none;clear:both;}
#gqs{margin-left:80px;font-size:22px;margin-top:50px;margin-bottom:10px;}
#vqinput{width:200px;margin:auto;}
#lqinput{width:500px;margin:auto;}
#ip{width:200px;text-align:center;font-size:28px;}

#ipl{width:500px;text-align:center;font-size:16px;height:40px;}

#rq{margin-left:10px;font-size:17px;margin-top:0px;margin-bottom:10px;font-weight:bold;}

#bar1{width:100%;background-color:#3498DB;}
#bar2{width:100%;padding-top:5px;padding-bottom:5px;background-color:#6BB9F0;}
#bannerb{width:800px;height:auto;margin:auto;}
#banners{display:none;}

#contentArea{padding:10px;box-sizing:border-box;
-webkit-user-select: none;       
-moz-user-select: none;
-ms-user-select: none; 
-o-user-select: none;
user-select: none;}
#contentAreaOuter{width:776px;min-height:400px;margin:auto;background-color:#fff;margin-top:10px;margin-bottom:10px;border:2px solid #5c97bf;position:relative;}

#title1{text-align:center;background-color:#6C7A89;height:40px;padding:20px;font-size:40px;color:#fff;font-family:Verdana, Geneva, sans-serif;}
#title2{text-align:center;background-color:#6C7A89;height:40px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;}

#text1{padding-top:5px;width:100%;text-align:center;}
#text2{visibility: hidden;margin:auto;width:760px;background-color:#fff;margin-top:20px;margin-bottom:10px;padding:10px;}
#text3{font-size:35px; font-family:Arial black;width:100%;text-align:center;}
#text4{font-size:13px;margin-top:10px;}
#text5{font-size:33px;margin:auto;margin-top:150px;width:100px;text-align:center;}


#butang1{margin-top:10px;width:130px;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;float:left;margin-right:20px;}
#butang1:hover{opacity:.6;}

#butang1n{width:130px;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin:auto;margin-top:20px;}
#butang1n:hover{opacity:.6;}


#butang1a{margin-top:10px;width:130px;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;float:left;margin-right:20px;}
#butang1a:hover{opacity:.6;}

#butang1b{margin-top:10px;width:130px;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;float:right;}
#butang1b:hover{opacity:.6;}

#butang2{margin:auto;margin-top:10px;width:100px;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang2:hover{opacity:.4;} 

.butang3{background-color:#ececec;width:360px;text-align:center;min-height:24px;padding:5px;font-size:17px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin:auto;border:0px solid grey;margin-bottom:7px;}
.butang3:hover{opacity:.6;}

.butang3a{background-color:#ececec;width:500px;text-align:center;min-height:24px;padding:5px;font-size:17px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin:auto;border:0px solid grey;margin-bottom:7px;}
.butang3a:hover{opacity:.6;}

.butang4x{margin-top:4px;width:40px;text-align:center;height:16px;padding:5px;font-size:12px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;border:1px solid #68C3A3;color:white;background-color:#68C3A3;}
.butang4:hover{opacity:.6;cursor:pointer;}
.butang4 img{width:40px;}

.butang6{background-color:#ececec;text-align:center;min-height:24px;padding:5px;font-size:17px;font-family:Verdana, Geneva, sans-serif; border-radius:5px;margin:auto;border:0px solid grey;margin-bottom:7px; width:200px; min-width:150px;}


#butang7{background-color:#ececec;text-align:center;min-height:24px;padding:5px;font-size:17px;font-family:Verdana, Geneva, sans-serif; border-radius:5px;margin:auto;border:0px solid grey;margin-bottom:7px; width:110px;float:left;  }
#butang7:hover{opacity:.6;cursor:pointer;}
#butang8{background-color:#ececec;text-align:center;min-height:24px;padding:5px;font-size:17px;font-family:Verdana, Geneva, sans-serif; border-radius:5px;margin:auto;border:0px solid grey;margin-bottom:7px; width:110px; float:right;  }
#butang8:hover{opacity:.6;cursor:pointer;}
#barea{width:250px;margin:auto;}

#feedback{float:right;width:1px;}
#feedback img{width:40px;margin-top:-8px;margin-right:-20px;}

#fb1{width:90%;margin:auto;text-align:center;margin-top:30px;padding:5px;border-radius:3px;background-color:#e4f1fe;box-sizing:border-box;}
#fb2{width:90%;margin:auto;text-align:center;margin-top:35px;}

.oride{font-weight: normal!important;color:black!important;font-size:40px;}
 

/*reading quiz buttons*/
.butang5{background-color:#ececec;margin-left:10px;margin-top:4px;width:280px;text-align:center;min-height:16px;padding:4px;font-size:16.5px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;border:0px solid grey;}
.butang5:hover{opacity:.6;}

#lb1{float:left;margin-left:300px;margin-top:50px;}
#lb2{float:right;margin-right:300px;margin-top:50px;}
#lb3{width:20%;text-align:centermargin:auto;margin-left:40%;float:left;text-align:center;margin-top:50px;}

.shortie{width:180px;}
.clear{float:none;clear:both;}
.point1{height:1px;width:100%;}

#promo{text-align:center;margin-top:20px;}


#readingblock1{background-color:#e4f1fe;
height:320px;width:50%;float:left;padding:5px;
margin-top:50px;	
overflow-y:scroll;
}	
#readingblock2{
height:380px;width:45%;float:left;padding:5px;	
margin-top:50px;
}
#rtitle{width:100%;color:#fff;background-color:#68C3A3;}




#resultText{font-size:50px;color:#000;float:left;}
#squareScore{background-color:#68C3A3;color:#fff;font-size:50px;
border-radius:8px;float:right;padding:5px;}
.subtitle{font-weight:bold;font-size:18px;}




#levText{font-size:25px;clear:both;float:none;}

#redText{color:#EF4836;clear:both;float:none;}


.fullbar{width:100px;background-color:#D2D7D3;height:20px;float:left;margin-right:10px;}

.tag1{width:95px;float:left;}

.bar{position:relative;height:20px;background-color:#f38c12;}
 

.boxy{background-color:#ECECEC;margin-top:40px;}

.highlight{background-color:#87D37C;margin-right:5px;color:#fff;width:auto;padding:1px;float:left;font-size:13px;}





@media screen and (max-width:780px) {
	body,html{background-image:none;}
#contentArea{width:100%;}
#text2{margin:auto;width:90%;}
#contentAreaOuter{width:98%;min-height:428px;}
 
#lb1{float:left;margin-left:25%;margin-top:50px;}
#lb2{float:right;margin-right:25%;margin-top:50px;}
.butang5{width:225px;}
#readingblock1{max-height:300px !important;}
}


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

#qTimer{float:left;}
#lb1{margin-top:70px;}
#lb2{margin-top:70px;}
#lb3{margin-top:70px;}

#readingblock1{margin-top:70px;}
#readingblock2{margin-top:70px;}

}


@media screen and (max-width:680px) {
  #vq{font-size:22px;}
#contentArea{margin-top:15px;}
 #gq{font-size:20px;}
#readingblock1{margin-top:60px;}
#readingblock2{margin-top:60px;}
}

@media screen and (max-width:500px) {
 #bottom{position:relative;height:auto;bottom:auto;border-top:0px solid grey;margin:auto;right:auto;}
#butang1{margin:auto;float:none;margin-top:8px;}
#butang1a{margin:auto;float:none;margin-top:8px;}
#butang1b{margin:auto;float:none;margin-top:8px;}
#text1{text-align:center;}
#text3{text-align:center;}
}


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

	#banner{width:100%;height:50px;background-color:#F39C12;padding-left:0%;}
	#tx{width:20em;height:10em;}
	#lq{font-size:16px;}
}

@media screen  and (max-width:820px){
#bannerb{width:100%;}
#bannerb img{width:100%;}
 
}


@media screen  and (max-width:600px){
#bannerb{display:none;}
#banners{width:100%;display:inline;}
#banners img{width:100%;}
 .butang3{width:280px;min-height:20px;font-size:17px;}
 .butang3a{width:280px;min-height:20px;font-size:17px;}
 #gq{font-size:18px;}
 #lq{font-size:18px;}
 #aa1{float:none !important;margin-left:auto !important;}
 #aa2{float:none !important;margin-left:auto !important;}
 #aa3{float:none !important;margin-left:auto !important;}
 #aa4{float:none !important;margin-left:auto !important;}
 .bouter{width:auto !important;}
 #ipl{width:360px;height:40px;margin:auto;font-size:12px;}
 #lqinput{width:360px;margin:auto;}
}

@media screen  and (max-width:550px){
#text3 img{width:100%;}
}



@media screen  and (max-width:525px){
 #readingblock1{
height:120px !important;width:98%;float:none;padding:5px;
margin:auto;margin-top:60px;	
overflow-y:scroll;
}	
#readingblock2{
height:250px;width:98%;float:none;padding:5px;	
margin-top:3px;
}
.butang5{margin:auto; margin-top:9px;width:98%;text-align:center;min-height:16px;padding:5px;font-size:16px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;border:0px solid grey;}
}

@media screen  and (max-width:425px){#structionsMessage{display:none;}
.butang5{font-size:14.5px;}
}

@media screen  and (max-width:415px){
#readingblock1{margin-top:78px;}
}


@media screen  and (max-width:400px){
 #ipl{width:290px;height:40px;margin:auto;font-size:11px;}
 #lqinput{width:290px;margin:auto;}
#text3{font-size:26px;}
}


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

	#banner img{width:100%;height:auto;}

@media screen and (max-width:700px) {
 
#lb1{margin-top:75px;}
#lb2{margin-top:75px;}
#lb3{margin-top:75px;}
}

}