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;


}


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

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

#gameArea{width:790px;border:5px solid #52B3D9;height:460px;margin:auto;background-color:#fff;margin-top:40px;margin-bottom:10px;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;}

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

#pix1{margin-top:2px;text-align:center;}
#butang1{position:relative;float:left;width:150px;margin:auto;text-align:center;background-color:#5C97BF;height:28px;padding:5px;font-size:25px;color:#fff;font-family:nf,Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang1:hover{opacity:.6;}

#butang1 img{width:60px;float:right;position:absolute;right:-30px;top:-10px;}
#butang2 img{width:60px;float:right;position:absolute;right:-30px;top:-10px;}

#butang2{position:relative;float:right;width:150px;margin:auto;text-align:center;background-color:#5C97BF;height:28px;padding:5px;font-size:25px;color:#fff;font-family:nf,Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang2:hover{opacity:.6;}

 #butangholder{width:300px; margin:auto;}
 #butangZone{width:400px; margin:auto;margin-top:40px;}

#passage{padding:2%;width:96%;text-align:center;color:#fff;background-color:#6C7A89;}

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

#glossArea{width:780px;padding:10px;margin:auto;background-color:#fff;}
#spacer{width:100%;height:40px;}
#spacer2{width:100%;height:40px;margin:auto; clear:both;float:none;}


#quizStatement{text-align:center;color:#3498DB; font-size:40px;margin-top:35px;min-height:80px;}


#quizStatement2{text-align:center;color:#3498DB; font-size:30px;margin-top:28px;font-family:nf,arial;}


#endStatement{text-align:center;color:#3498DB; font-size:30px;font-family:nf,arial;}



#fbZone{color:#6c7a89 ;margin:auto; clear:both;float:none;text-align:center;font-family:nf,arial;font-size:20px;width:75%;padding:10px;border-radius:5px; border:2px solid #6C7A89;}

#fbZone img{width:56px;float:left;}


.greener{color:green;}

.redder{color:red;}



#butang1i{width:150px;margin:auto;text-align:center;background-color:#5C97BF;height:28px;padding:5px;font-size:25px;color:#fff;font-family:nf,Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang1i:hover{opacity:.6;}
#butang2i{width:150px;margin:auto;margin-top:5px;text-align:center;background-color:#5C97BF;height:28px;padding:5px;font-size:25px;color:#fff;font-family:nf,Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang2i:hover{opacity:.6;}
#butang3i{width:150px;margin:auto;margin-top:5px;text-align:center;background-color:#5C97BF;height:28px;padding:5px;font-size:25px;color:#fff;font-family:nf,Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang3i:hover{opacity:.6;}



#endImage{text-align:center;}
#endImage img{width:180px;}



#clickaboo{width:100%;height:100%;position:absolute;background-color:black;top:0px;opacity:0.01}


#butang1b{position:relative;width:580px;margin:auto;margin-top:40px;text-align:center;background-color:#efefef;height:28px;padding:5px;font-size:21px;color:#2e3131;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border:2px solid #5C97BF;border-radius:5px;}
#butang1b:hover{opacity:.6;}
#butang2b{position:relative;width:580px;margin:auto;margin-top:10px;text-align:center;background-color:#efefef;height:28px;padding:5px;font-size:21px;color:#2e3131;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border:2px solid #5C97BF;border-radius:5px;}
#butang2b:hover{opacity:.6;}
#butang1b img{width:60px;float:right;position:absolute;right:-30px;top:-10px;}
#butang2b img{width:60px;float:right;position:absolute;right:-30px;top:-10px;}



#notesArea{height:300px;width:80%;margin:auto;margin-top:30px;font-size:20px;}


.zample{margin-left:20px;color:blue;color:#5C97BF;}

.zample2{margin-left:20px;color:blue;color:#d91e18;}


@media screen and (max-width:800px) {
	body,html{background-image:none;}
#gameArea{width:100%;border: 0px solid #52B3D9;}
 #glossArea{width:95%;}


 

}

@media screen and (max-width:650px) {
	#title1{font-size:32px;}
#passage{padding:2%;width:96%;float:left;height:auto;}
#quiz{margin:2%;margin-top:40px;width:95%;height:300px;float:left;border: 1px solid #3CF; border-radius:1px;position:relative;}
#gameArea{margin-top:15px;}
}



@media screen and (max-width:460px) {
 #butang1 img{width:30px;float:right;position:absolute;right:0px;top:3px;}
#butang2 img{width:30px;float:right;position:absolute;right:0px;top:3px;}



}



@media screen and (max-width:450px) {
	#title1{font-size:25px;}
	#title2{font-size:15px;}
	#banner{width:100%;height:50px;background-color:#F39C12;padding-left:0%;}
	#pix1a img{width:85%;}
	 #butangZone{width:90%; margin:auto;}
#fbZone{width:85%;}
}

@media screen  and (max-width:820px){
#bannerb{width:100%;}
#bannerb img{width:100%;}
#allContent{width:96%;padding:2%;border:0px;}
#bar1{}
}


@media screen  and (max-width:600px){
#bannerb{display:none;}
#banners{width:100%;display:inline;}
#banners img{width:100%;}
#allContent{width:96%;padding:2%;border:0px;}
#bar1{}
#butang1b{min-height:48px;font-size:19px;width: 90%;}

#butang2b{min-height:48px;font-size:19px;width: 90%;}


}

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

 #butang1b img{width:30px;float:right;position:absolute;right:0px;top:3px;}
#butang2b img{width:30px;float:right;position:absolute;right:0px;top:3px;}



}


@media screen  and (max-width:390px){
#butang1{width:130px;}
#butang2{width:130px;}
}





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

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