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

#noteyButang{top:40px;position:absolute;right:10px;width:75px;font-size:15px;height:21px;background-color:#9aa4ae;padding:4px;border-radius:5px;cursor:pointer;}
#homeyButang{position:absolute;top:5px;right:10px;width:75px;font-size:15px;height:21px;background-color:#9aa4ae;padding:4px;border-radius:5px;cursor:pointer;}
#noteyButang:hover{opacity:.7;}
#homeyButang:hover{opacity:.7;}

#pixxholder{}

#tcarea img{width:38px;height:38px; }
#shans{text-align:center;height:36px;}

#ipb2{width:0px;height:0px;opacity:0;}


#inputwrap{width:278px;margin:auto;}

#feedback1{float:right;position:relative;}
#feedback1 img{width:30px;position:absolute;right:0px;top:-4px;}
 
 

#gameArea{width:800px;height:auto;min-height:460px;margin:auto;background-color:#fff;margin-top:40px;margin-bottom:10px;border:1px solid #6C7A89;box-sizing:border-box;}

#gameArea2{width:800px;height:auto;min-height:460px;margin:auto;margin-top:40px;margin-bottom:10px;}
#noteses{background-color:#fff;padding:5px;display:none;}

#notesButang{border:1px solid grey; border-radius:3px; cursor:pointer;padding:3px;margin-left:5px;width:60px;text-align:center;height:23px;margin-top:30px;}


#title1{text-align:center;background-color:#6C7A89;height:37px;padding:10px;font-size:35px;color:#fff;font-family:Verdana, Geneva, sans-serif;}
#title2{text-align:center;background-color:#6C7A89;height:20px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;}
 
#pix1{margin-top:2px;text-align:center;}
#butang1{float:left;width:250px;margin:auto;margin-right:4px;margin-left:4px;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-top:0px;}
#butang1:hover{opacity:.6;}

#butang2{float:left;width:250px;margin:auto;margin-top:15px;margin-right:4px;margin-left:4px;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;}




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

 
 #butangholder2{width:268px; margin:auto;}

#passage{padding:20px;width:100%;text-align:center;color:#fff;background-color:#6C7A89;font-size:30px;position:relative;box-sizing:border-box;}
 

#promo{margin:auto;text-align:center;margin-top:10px;}
 
#spacer{width:100%;height:40px;}




.ppx img{float:left;width:108px;height:110px;}
.ppxHolder{float:left;width:108px;height:135px;text-align:center;cursor:pointer;border:2px solid grey;margin:3px}
.ppxHolder:hover{opacity:.8;}



 
 

#pix1 img{width:500px;margin-top:20px;}



 

.meaning2{
	 text-align:center;
	margin-top:10px;
	margin-bottom:20px;
	padding:5px;;
	 
	border-radius:3px;
	font-size:24px;
	height:120px;
}


.aqblank{font-size:18px;width:150px;margin-left:30px;border:2px solid #336E7B;padding:5px;float:left;}
#enterButang{cursor:pointer;margin-left:232px;font-size:12px;padding:9px;width:50px;text-align:center;border:1px solid grey;border-radius:3px;}
#enterButang:hover{background-color:#ececec;}
#tcarea{width:30px;height:30px;margin-left:5px;float:left; }

#nextButton2{width:90px;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;position:absolute;bottom:20px;left:140px;
 -moz-user-select     : none;
 -khtml-user-select   : none;
 -webkit-user-select  : none;
 -o-user-select       : none;
 user-select          : none;
 }

#nextButton2:hover{opacity:.7;}


#nextButton3{width:90px;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;
 -moz-user-select     : none;
 -khtml-user-select   : none;
 -webkit-user-select  : none;
 -o-user-select       : none;
 user-select          : none;
 }
#nextButton3:hover{opacity:.7;}


#spacer1{height:50px;width:100%;}
#spacer2{height:50px;width:100%;}






#quiz{margin:2%;margin-top:40px;width:94%;height:335px; position:relative;}







@media screen and (max-width:829px) {
	 
#gameArea{width:100%;}
#gameArea2{width:100%;}
 #glossArea{width:95%;}
.meaning1{font-size:35px;}

}

@media screen and (max-width:650px) {
	#title1{font-size:32px;}
#passagex{padding:2%;width:96%; height:auto;}
#quiz{margin:2%;margin-top:30px;width:95%;height:300px;position:relative;}
#gameArea{margin-top:15px;}
}
 

@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%;}
}

 


 

@media screen  and (max-width:600px){
.question{text-align:center;}
 
 
  #quiz{height:460px;border: none;  }

 

}

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

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

 #mydef1{width:100%;float:none;text-align:center;font-size:30px;margin-top:10px;margin-bottom:10px;}
#mydef2{width:100%;float:none;text-align:center;}
#playB{width:100%;float:none;text-align:center;}

.meaning1{float:none;		margin:auto;	width:100%;text-align:center;padding:0px;}

.meaning2{	float:none;	margin:auto;	width:100%;text-align:center;}

#buttonHole{width:220px;margin:auto;}
#nextButton2{position:relative;float:right;bottom:0px;left:0px;}
#nextButton3{position:relative;float:none;margin:auto;bottom:0px;left:0px;}
#spacer1{height:0px;}
#spacer2{height:0px;}
#inputwrap{width:278px;margin:auto;}
#shans{margin:auto;text-align:center;}
#notesButang{border:1px solid grey; border-radius:3px; cursor:pointer;padding:3px;margin:auto;width:60px;text-align:center;}
#pixxholder{height:40px;}

 #pix{width:300px;height:auto;float:none;margin:auto;margin-top:0px;}
 #pix img{width:100%;height:100%;}
.questionx{width:360px;margin:auto;}
.option{margin:auto;margin-top:3px;}
.correctFeedback{margin:auto;text-align:center;margin-top:10px;}
.incorrectFeedback{margin:auto;text-align:center;margin-top:10px;}
#nextButtonx{width:250px;margin:auto;text-align:center;right:20px;bottom:auto;margin-top:50px; }
#ca{margin-bottom:-45px;}

}





@media screen  and (max-width:540px){
#spacer2{height:22px;}
#pix1 img{width:90%;margin-top:20px;}
}



@media screen  and (max-width:410px){
#noteyButang{right:5px;width:70px;}
#homeyButang{right:5px;width:70px;}
#passage{font-size:23px;padding-bottom:25px;}
}

@media screen  and (max-width:345px){
#noteyButang{display:none;}
#homeyButang{display:none;}
}

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

	#banner img{width:100%;height:auto;}
 .aqblank{font-size:18px;width:150px;margin-left:10px;border:2px solid #336E7B;padding:5px;float:left;}
#enterButang{cursor:pointer;margin-left:200px;font-size:12px;padding:9px;width:50px;text-align:center;border:1px solid grey;border-radius:3px;}
}