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


#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:#68C3A3;font-size:18px;text-align:center;padding-top:4px;padding-bottom:4px;top:0px;position:absolute;}
#structionsMessage{}

#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:4px;}

#digit1{float:left;width:30px;text-align:center;border-radius:4px;background-color:#FFF;color:#336E7B;}
#digit2{float:left;width:30px;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:60px;margin-bottom:10px;height:80px;}
#gq{width:100%;text-align:center;font-size:26px;margin-top:60px;margin-bottom:10px;height:60px;float:none;clear:both;}
#lq{width:100%;text-align:center;font-size:26px;margin-top:80px;margin-bottom:10px;min-height:50px;float:none;clear:both;}
#gqs{margin-left:80px;font-size:22px;margin-top:30px;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;}

#rq{margin-left:10px;font-size:15px;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;
-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 #39F;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;}
#text2{visibility: hidden;margin:auto;width:760px;background-color:#fff;margin-top:20px;margin-bottom:10px;padding:10px;}
#text3{font-size:25px;color:#39F;}
#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: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;}
#butang1: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:.6;} 

.butang3{width:300px;text-align:center;height:24px;padding:5px;font-size:14px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin:auto;border:1px solid grey;margin-bottom:4px;}
.butang3:hover{opacity:.6;}

.butang3a{width:500px;text-align:center;min-height:24px;padding:5px;font-size:14px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;margin:auto;border:1px solid grey;margin-bottom:4px;}
.butang3a:hover{opacity:.6;}

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


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

#lb1{float:left;margin-left:300px;margin-top:30px;}
#lb2{float:right;margin-right:300px;margin-top:30px;}
#lb3{width:50px;margin:auto;text-align:center;margin-top:30px;margin-bottom:-55px;}

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

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


#readingblock1{
height:320px;width:50%;border:2px solid #68C3A3;float:left;padding:5px;
margin-top:50px;	
overflow-y:scroll;
}	
#readingblock2{
height:380px;width:40%;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:90%;}
#text2{margin:auto;width:90%;}
#contentAreaOuter{width:98%;}
#bottom{bottom:-40px;}
#lb1{float:left;margin-left:25%;margin-top:30px;}
#lb2{float:right;margin-right:25%;margin-top:30px;}
.butang5{width:225px;}
#readingblock1{max-height:300px !important;}
}


@media screen and (max-width:700px) {
#structionsMessage{margin-top:30px;}
#qTimer{float:left;}
#lb1{margin-top:60px;}
#lb2{margin-top:60px;}
#lb3{margin-top:60px;}
}




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


@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;height:20px;font-size:12px;}
 .butang3a{width:280px;min-height:20px;font-size:12px;}
 #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:500px){
 #readingblock1{
height:120px !important;width:95%;border:2px solid #68C3A3;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;font-size:13px;margin-top:4px;width:98%;text-align:center;min-height:16px;padding:5px;font-size:13px;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;border:1px solid grey;}
}

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


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

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