body,html{margin:0px;padding:0px;background-image:url(bg.png);font-family:Verdana, Geneva, sans-serif;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}


#clearance{clear:both;float:none;width:100%;}


#notes{width:90%;margin:auto;text-align:center;}
#notesArea{min-height:250px;}

#promo{margin-top:3px;margin-bottom:3px;text-align:center;}
#menuArea a:hover, a:visited, a:link, a:active{
    
	text-decoration: inherit;
}
#menubutang{
width:60px;
text-align:center;
font-size:16px;
padding:2px;
cursor:pointer;
color:#000;

margin-top:-2px; 
 
background-color:#dadfe1;
border: 1px solid #6C7A89;
border-top:none;
border-radius:0px 0px 4px 4px;
font-family:Arial;
}

#menubutang:hover{
opacity:.6;
}



#menuArea{width:800px;margin:auto;}



@font-face {
    font-family: Montserrat;
    src: url('Montserrat-Medium.ttf'); 
	 
    }




.blue{color:#446CB3;}
.senario{padding:8px;color:#ededed;background-color:#446CB3;}










 
#gameArea{width:800px;min-height:460px;margin:auto;background-color:#fff;margin-top:10px;margin-bottom:10px;}


#title1{text-align:center;background-color:#6C7A89;height:100px;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;}

#pix1a{margin:auto;margin-top:2px;text-align:center;}
#pix1a img{margin:auto;margin-top:2px;text-align:center;width:40%;}

#pix1{margin-top:2px;text-align:center;}
#butang1{ width:110px;margin:auto;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{ width:110px;margin:auto;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{float:right;width:110px;margin:auto;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;}
#butang3:hover{opacity:.6;}

 #butangholder{width:400px; margin:auto;}


 
 

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

 
#spacer{width:100%;height:20px;}
 
#spacer2{width:100%;height:10px;clear:both:float:none;}

#spacer3{width:100%;height:40px;}




#feedbackx1{float:right;}
#feedbackx1 img{width:17px;}

#feedback1{float:right;position:relative;}
#feedback1 img{width:28px;position:absolute;right:-8px;top:-3px;}


#nextButang{clear:both;float:none;opacity:0.1;padding:8px;border-radius:6px;font-size:17px;width:50px;background-color:#D2D7D3;margin:auto;margin-top:120px;cursor:pointer;}

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


#displayBar{width:100%;height:40px;background-color:#2574A9;color:#efefef;}

#displayBar1{font-size:20px;line-height:40px;margin-left:10px;float:left;}

#displayBar2{font-size:20px;line-height:40px;margin-right:10px;float:right;}







#pixq{margin:auto;text-align:center;margin-top:50px;font-size:25px;}
#piximg{margin-left:50px;width:200px;height:200px;float:left;padding:10px; }
#piximg img{width:200px;height:200px;}














#oholder{width:300px;margin:auto;}

#pixop1{text-align:center;float:left;width:115px;padding:10px;border-radius:8px;font-size:17px;background-color:#ececec;margin-top:20px;cursor:pointer;}

#pixop1:hover{background-color:#2574A9;color:#efefef;}


#pixop2{text-align:center;float:right;width:115px;padding:10px;border-radius:8px;font-size:17px;background-color:#ececec;margin-top:20px;cursor:pointer;}

#pixop2:hover{background-color:#2574A9;color:#efefef;}



#feedbackScore{text-align:center;width:90%;margin:auto;margin-top:50px;font-size:25px;}


#menuButton{text-align:center;width:100px;border-radius:5px;background-color:#5C97BF;cursor:pointer;margin:auto;padding:9px;margin-top:50px;color:#EFEFEF;}
#menuButton:hover{opacity:.7;}


#stars{text-align:center;width:100px;margin:auto;margin-top:40px;}


#butang6{margin:auto;width:230px;margin:auto;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;}
#butang6 img{float:right;}
#butang6:hover{opacity:.6;}










.correctA{background-color:#03A678;color:#ececec;}
.wrongA{background-color:#EF4836;color:#ececec;}



#fbArea{float:none;clear:both;height:30px;width:100%;text-align:center;}

#fbArea2{width:250px;margin:auto;text-align:center;}


#menuButton2{float:right;text-align:center;width:100px;border-radius:5px;background-color:#5C97BF;cursor:pointer;margin:auto;padding:9px;margin-top:50px;color:#EFEFEF;}
#menuButton2:hover{opacity:.7;}

#resetButton{float:left;text-align:center;width:100px;border-radius:5px;background-color:#5C97BF;cursor:pointer;margin:auto;padding:9px;margin-top:50px;color:#EFEFEF;}
#resetButton:hover{opacity:.7;}



#title2inner{margin:auto;}
.pager{background-color:#F2F1EF;color:#000;width:30px;height:30px;float:left;border-radius:10px;font-size:22px;margin-left:2px;margin-right:2px;cursor:pointer;}
.pager:hover{opacity:.7;}






#nbp{padding:50px;text-align:center;}




#piximg2{margin-right:30px;width:200px;height:200px;float:right;padding:10px; }
#piximg2 img{width:200px;height:200px;}

#openq{font-family:Open Sans,Arial, Helvetica, sans-serif;font-size:23px;margin-top:22px;line-height:2;}

.openwrong{border:1px solid grey;padding:2px;border-radius:5px;cursor:pointer;background-color:#fff;margin-left:3px;margin-right:3px;}
.openright{border:1px solid grey;padding:2px;border-radius:5px;cursor:pointer;background-color:#fff;margin-left:3px;margin-right:3px;}

.openwrong:hover{background-color:#D2D7D3;}
.openright:hover{background-color:#D2D7D3;}





#dyk1{padding:20px;font-size:30px;text-align:center;}
#dyk2{padding:20px;font-size:20px;height:60px;padding-top:5px;padding-bottom:5px;text-align:center;}
#dyk3{text-align:center;}
#dyk3 img{width:230px;height:230px}

#nextButang2{clear:both;float:none;opacity:0.1; padding:8px;border-radius:6px;font-size:17px;width:50px;background-color:#D2D7D3;margin:auto;margin-top:10px;cursor:pointer;}

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






@media screen and (max-width:800px) {
	
#gameArea{width:100%;}
 #menuArea{width:100%;}

#menubutang{margin-left:5px;}


}





 







@media screen and (max-width:790px) {
	
#pixq{text-align:center;font-size:23px;}
#piximg{margin:auto;text-align:center;float:none; } 
.pixop{width:290px;padding:10px;border-radius:8px;font-size:17px;background-color:#ececec;margin:auto;margin-top:20px;cursor:pointer;float:none; }


#nextButang{margin:auto;padding:8px;width:50px;margin-top:120px;display: block;}
#gameArea{margin-top:15px;min-height:550px;}
}












@media screen and (max-width:775px) {
#dyk1{padding:20px;font-size:30px;text-align:center;}
#dyk2{padding:20px;font-size:16px;height:60px;padding-top:5px;padding-bottom:5px;text-align:center;}
#dyk3{text-align:center;}
#dyk3 img{width:230px;height:230px}
}




@media screen and (max-width:570px) {
.pixop{margin-top:14px;}
#pix1a img{margin:auto;margin-top:2px;text-align:center;width:70%;}
#dyk1{padding:20px;font-size:20px;text-align:center;}
#dyk2{padding:20px;font-size:15px;height:80px;padding-top:5px;padding-bottom:5px;text-align:center;}
#dyk3{text-align:center;}
#dyk3 img{width:200px;height:200px}
#pixq{  font-size:20px;}
}






@media screen and (max-width:650px) {
	#title1{font-size:32px;}

}


@media screen and (max-width:450px) {
	#title1{font-size:25px;}
	#title2{font-size:15px;}
	 #butang1{width:90px;margin:auto;text-align:center;background-color:#5C97BF;height:24px;padding:5px;font-size:15px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang1:hover{opacity:.6;}

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

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

 #butangholder{width:320px; margin:auto;}
}
 
 



 

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

#question{width:90%;padding:10px;background-color:#89C4F4;border-radius:8px;font-size:22px;}
#option1{ width:90%;}
#option2{width:90%;}
#option3{width:90%;}




}










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

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