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

#smol{font-size:10px;}
#clearMe{width:100%;height:1px;clear:both;float:none;}

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

.question{
	 
	margin-top:10px;
	margin-bottom:10px;
	padding:5px;;
	margin-left:10px;
	border-radius:3px;
	font-size:24px;
	height:60px;
}

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

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

#pix22{opacity:.7;cursor:pointer;}
#pix22:hover{opacity:.9;}

#pix{width:250px;height:300px;float:right;margin-right:15px;margin-top:15px;
position:relative;overflow-x:hidden;overflow-y:hidden;border:1px solid grey;}
#pix img{position:absolute;top:-1px;left:-1px;}
#pixtext{position:absolute;bottom:10px;text-align:center;padding:1%;width:98%;background: rgba(255, 255, 255, 0.7);}

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


#bb2{padding:3px;text-align:center;border:1px solid white;border-radius:5px;float:left;margin-left:10px;cursor:pointer;}
#bb2:hover{opacity:.7;}
#ctt{width:100px;text-align:center;margin:auto;}

#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:800px;height:auto;min-height:460px;margin:auto;background-color:#fff;margin-top:40px;margin-bottom:10px;}

#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;}
#title2a{padding:5px;text-align:center;background-color:#6C7A89;min-height:40px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;width:auto;}

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

#butang3{float:left;width:100px;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;}
#butang3:hover{opacity:.6;}

#butang4{float:left;width:100px;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;}
#butang4:hover{opacity:.6;}

#butang5{float:left;width:100px;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;}
#butang5:hover{opacity:.6;}

 
#butangg{margin:auto;width:100px;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;}
#butangg:hover{opacity:.6;}

#spacerx{width:100%;height:20px;float:none;clear:both;}





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

 #butangholderb{width:236px; margin:auto;}
 #butangholder2{width:120px; margin:auto;}

#passage{padding:2%;width:96%;text-align:center;color:#fff;background-color:#6C7A89;font-size:35px;cursor:pointer;}
#passage:hover{opacity:.7;}

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

#glossArea{width:780px;padding:10px;margin:auto;background-color:#fff;}
#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;}






.centralText{width:100%;text-align:center;float:none;clear:both;margin-bottom:10px;margin-top:10px;}




#mydef1{width:40%;float:left;text-align:center;font-size:40px;margin-top:40px;margin-bottom:20px;}
#mydef2{width:40%;float:left;text-align:center;}

#playB{width:40%;float:left;text-align:center;cursor:pointer;}
#playB:hover{opacity:.6;}




#uber{width:720px;margin:auto;height:1050px;background-color:#fff;}




#defArea{margin-top:20px;width:80%;margin:auto;}
.ddword{background-color:#5C97BF;margin:2px;border-radius:2px;color:#fff;cursor:pointer;min-width:150px;}
.ddword:hover{opacity:.6;}
#filler{width:100%;height:5px;}


@media screen and (max-width:745px) {#uber{width:600px;margin:auto;}}
@media screen and (max-width:615px) {#uber{width:480px;margin:auto;}}
@media screen and (max-width:495px) {#uber{width:360px;margin:auto;}}
@media screen and (max-width:375px) {#uber{width:240px;margin:auto;}}


#t2{text-align:center;}

.wrd{float:left;width:150px;text-align:center;margin:1px;background-color:#EEEEEE;font-size:19px;padding-top:3px;padding-bottom:3px;border-radius:3px;}
.wrd:hover{background-color:#ffeeee;cursor:pointer;}
#wrdarea{height:300px;width:760px;margin:auto;}

@media screen and (max-width:760px) {#wrdarea{width:608px;}}
@media screen and (max-width:608px) {#wrdarea{width:456px;}}
@media screen and (max-width:456px) {#wrdarea{width:304px;}}
 

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



.meaning1{
	color:#3A539B;
	margin-top:0px;
	margin-bottom:10px;
 
	padding:5px;
	margin-left:30px;
	border-radius:3px;
	font-size:48px;
	height:60px;
	width:40%;
 
}

.meaning2{
	color:#6C7A89;
	margin-top:10px;
	margin-bottom:10px;
	padding:5px;;
	margin-left:30px;
	border-radius:3px;
	font-size:24px;
	height:60px;
}


#nextButton{width:100px;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:20px;
 -moz-user-select     : none;
 -khtml-user-select   : none;
 -webkit-user-select  : none;
 -o-user-select       : none;
 user-select          : none;
 }
#nextButton:hover{opacity:.6;}
#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;position:absolute;bottom:20px;left:30px;
 -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%;}


@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:800px) {
	 
#gameArea{width:100%;}
 #glossArea{width:95%;}
.meaning1{font-size:35px;}

}



@media screen and (max-width:750px) {
 .question{	font-size:20px;height:50px;}

}







@media screen and (max-width:660px) {
.pixop{text-align:center;width:230px;
}


@media screen and (max-width:650px) {
	#title1x{font-size:32px;}
#passage{padding:2%;width:96%;float:left;height:auto;}
#quiz{margin:2%;margin-top:40px;width:95%;height:340px;float:left; border-radius:1px;position:relative;}
#gameArea{margin-top:15px;}
}
@media screen  and (max-width:600px){
.question{text-align:center;}
#bannerb{display:none;}
#banners{width:100%;display:inline;}
#banners img{width:100%;}
#allContent{width:96%;padding:2%;border:0px;}
#butangholderold{width:354px; margin:auto;}

#butang4old{margin-top:20px;}

#butang5old{margin-top:20px;}

}



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

 #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;background-color:red;}
#nextButton2{position:relative;float:right;bottom:0px;left:0px;}
#nextButton3{position:relative;float:left;bottom:0px;left:0px;}
#spacer1{height:0px;}
#spacer2{height:0px;}
}





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

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

@media screen and (max-width:590px) {
.pixop{margin:auto;margin-bottom:10px;}
#gameArea{min-height:570px;}
#nextButton{width:250px;margin:auto;text-align:center;right:20px;bottom:-17px; }
 
 #quiz{height:460px;border: none; margin-top:5px;}
 #pix{width:180px;height:216px;float:none;margin:auto;margin-top:0px;}
 #pix img{width:100%;height:100%;}
.question{width:360px;margin:auto;}
.option{margin:auto;margin-top:3px;}
 

}


@media screen and (max-width:450px) {
	#passage{font-size:25px;}
	#title1{font-size:25px;}
	#title2{font-size:15px;}
	#banner{width:100%;height:50px;background-color:#F39C12;padding-left:0%;}
}



 





@media screen and (max-width:425px) {
	.question{font-size:14px;}
	.option{font-size:16px;height:30px;margin-bottom:6px;}
	.answeredOption{font-size:16px;}
	.question{width:100%;margin:auto;height:40px;}
 
	 
}





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

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