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


.myPix{float:right;width:250px;height:250px;}
.myPix img{width:250px;height:250px;}

#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:460px;margin:auto;background-color:#fff;margin-top:40px;margin-bottom:10px;border:1px solid #6C7A89;box-sizing: border-box;}

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


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

#butang2{float:right;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;}
#butang2:hover{opacity:.6;}

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

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

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

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






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

.blanks{ background-color:#CCC;font-size:18px;margin-bottom:2px;}
.currentblanks{ border:1px solid #f9690e;color:#000;font-size:18px;padding:1px;margin-bottom:2px;}
.answeredblanks{ border:none;font-weight: bold;font-size:18px;padding:1px;background-color:#f2f1ef;margin-bottom:2px;}

span {
  display: inline-block;
  width: 120px;
  text-align:center;
}

 

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

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

.answeredOption{display:none;
		
}

.correctFeedback{text-align:center; font-size:20px; border-radius: 0px 9px 9px 0px;
	margin-top:10px;
	margin-left:10px;	
	width:140px;
	background-color:#3caf47;
	padding:2px; 
	color:#fefefe;
}

.incorrectFeedback{text-align:center; font-size:20px;border-radius: 0px 9px 9px 0px;
	margin-top:10px;
	margin-left:10px;	
		width:140px;
	background-color:#e8202d;
	padding:2px; 
	color:#fefefe;
}



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

#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:0px;left:12px;
 -moz-user-select     : none;
 -khtml-user-select   : none;
 -webkit-user-select  : none;
 -o-user-select       : none;
 user-select          : none;
 }
 
 
#nextButton:hover{opacity:.6;}

.text1{width:100%;text-align:center;font-size:36px;padding-top:60px;}






















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

.speaker{width:50px;height:40px;float:left;cursor:pointer;opacity:.8;}
.speaker img{width:40px;height:40px; }
.speaker:hover{opacity:1}

.def{font-size:19px;float:none;clear:both;margin-left:10px;color:grey;margin-bottom:10px;}

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

.clearoff{float:none;clear:both;}


#defArea{margin-top:20px;width:70%;margin:auto;}

.ddword{float:left;margin:2px;min-width:60px;font-size:27px;}


















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

}

@media screen and (max-width:720px) {
	.question{font-size:18px;}
}

@media screen and (max-width:710px) {
	 #nextButton{bottom:-40px;}
}


@media screen and (max-width:650px) {
 
#quiz{margin:2%;margin-top:40px;width:95%;height:300px;float:left;position:relative;}
}



@media screen and (max-width:560px) {
 
 .myPix{float:right;width:200px;height:250px;}
.myPix img{width:200px;height:200px;}
}












@media screen and (max-width:510px) {
#quiz{margin:2%;margin-top:15px;}
 #opArea{width:100%;height:125px;}
 .myPix{display:none;}
.option{float:none;margin:auto;margin-bottom:10px;}
 #gameArea{margin-top:15px;}
#nextButton{margin:auto;position:relative;left:auto;bottom:-30px;}
.correctFeedback{text-align:center; font-size:23px; border-radius: 9px 9px 9px 9px;
	margin:auto;	
	width:160px;
	background-color:#3caf47;
	padding:2px; 
	color:#fefefe;

}

.incorrectFeedback{text-align:center; font-size:23px;border-radius: 9px 9px 9px 9px;
	margin:auto;	
		width:160px;
	background-color:#e8202d;
	padding:2px; 
	color:#fefefe;
}
}










@media screen and (max-width:420px) {
	 .speaker{width:40px;height:30px;float:left;cursor:pointer;opacity:.8;}
.speaker img{width:30px;height:30px; }
 .ddword{float:left;margin:2px;min-width:60px;font-size:22px;}
#defArea{margin-top:15px;width:80%;margin:auto;}
}















 


@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: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{}
}

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

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