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

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

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

#gameArea{width:800px;height:460px;margin:auto;background-color:#fff;margin-top:10px;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;}

#butang1a{float:left;width:100px;margin:auto;margin-left:15px;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;}
#butang1a: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;}

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


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

#passage{cursor:pointer;padding:2%;width:96%;text-align:center;color:#fff;background-color:#6C7A89;}
#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;}





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

.blanks{ ;background-color:#CCC;font-size:15px;}
.currentblanks{ border:1px solid #CCC;color:#000;font-size:15px;}


#pix{width:250px;height:250px;float:right;margin-right:15px;margin-top:15px;}

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

.option{
	 border-radius:5px; width:220px;background-color:#ececec;
		margin-top:6px;
	 text-align:center;
	border: 0px grey solid;
 	position:relative;
	margin-left:10px;
	padding:4px;
	padding-left:12px;
	cursor:pointer;
	height:30px;line-height:30px;
	}
	
	 
.option:hover{
	background-color:#d35400;color:#efefef;

}

.answeredOption{
		color:#3A539B;
		margin-top:3px;
	width:250px;
	border: 3px grey solid;
	border-radius:3px;
	margin-left:10px;
	padding:2px;
	padding-left:12px;
	cursor:pointer;
	opacity:1;
}

.correctFeedback{
	margin-top:10px;
	margin-left:10px;	
	width:150px;
	background-color:#2ECC71;
	padding:2px;padding-left:10px;
	color:#fff;
	font-size:24px;
}

.incorrectFeedback{
	margin-top:10px;
	margin-left:10px;	
		width:250px;
	background-color:#D91E18;
	padding:2px;padding-left:10px;
	color:#fff;
}



#quiz{margin:2%;margin-top:40px;width:94%;height:335px; border-radius:1px;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: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;}

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


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

}


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


@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-radius:1px;position:relative;}
#gameArea{margin-top:15px;}
}



@media screen and (max-width:590px) {
 #quiz{height:460px;border:none; margin-top:5px;padding-top:0px;}
 #pix{width:180px;height:180px;float:none;margin:auto;margin-top:0px;}
 #pix img{width:100%;height:100%;}
.question{width:360px;margin:auto;text-align:center;}
.option{margin:auto;margin-top:3px;}
.correctFeedback{margin:auto;width:320px;text-align:center;margin-top:10px;}
.incorrectFeedback{margin:auto;width:320px;text-align:center;margin-top:10px;}
#nextButton{width:100px;margin:auto;text-align:center;right:20px;bottom:25px; }
}

@media screen and (max-width:425px) {
	.question{font-size:16px;}
	.option{font-size:16px;height:30px;margin-bottom:10px;}
	.answeredOption{font-size:16px;}
	.question{width:100%;margin:auto;height:55px;text-align:center;}
	.correctFeedback{margin:auto;width:250px;margin-top:10px;font-size:24px;border-radius:3px;}
	.incorrectFeedback{margin:auto;width:250px;text-align:center;margin-top:10px;}
	#nextButton{bottom:25px;}
}













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

}




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


@media screen and (max-width:590px) {
	
	#gameArea{height:490px;}

}

@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:365px){

	 #butangholder{width:318px; margin:auto;}
	#butang1{float:left;width:83px;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;}


#butang1a{float:left;width:83px;margin:auto;margin-left:15px;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{float:right;width:95px;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;}



}

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

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