body,html{margin:0px;padding:0px;background-image:url(sos.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;}

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

#uberTitle{text-align:center;background-color:#6C7A89;height:40px;padding:20px;font-size:40px;color:#fff;font-family:Verdana, Geneva, sans-serif;}

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

#butang4{width:100px;margin:auto;text-align:center;background-color:#EC644B;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang4:hover{opacity:.6;}

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

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

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

 
#spacer{width:100%;height:40px;}
#spacer2{width:100%;height:25px;}
#spacer3{width:100%;height:15px;}

#structions{text-align:center;background-color:#6C7A89;height:40px;padding:20px;font-size:20px;color:#fff;font-family:Verdana, Geneva, sans-serif;}
#holder{text-align:center;font-size:23px;width:90%;margin:auto;}

#op1{border:1px solid grey;border-radius:5px;padding:8px; cursor:pointer;}
#op1:hover{background-color:#EEEEEE;}
#op2{border:1px solid grey;border-radius:5px;padding:8px; cursor:pointer;}
#op2:hover{background-color:#EEEEEE;} 
#question{line-height: 2;}
#feedbackholder{width:auto;margin:auto;background-color:#FDE3A7;padding:9px;}
#feedback{ text-align:center;width:auto;margin:auto;opacity:0;line-height:30px;}

#butang3{opacity:0;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;}

#scorebox{width:100px;height:30px;margin:auto;border: 2px solid #FDE3A7;padding:2px;margin-top:5px;}
#scorebox img{width:20px;padding-top:5px; }
.sc{width:20px;float:left;}
#sc1{padding:5px;text-align:right;} 
#sc2{text-align:left;}
#sc3{padding:5px;text-align:right;} 
#sc4{text-align:left; }

#stars{text-align:center;width:100px;margin:auto;margin-top:40px;}
#score1{text-align:center;margin-top:50px;margin-bottom:20px;font-size:30px;}
#score2{text-align:center;margin-top:20px;margin-bottom:10px;font-size:20px;}


#buttons{width:300px;margin:auto;margin-top:10px;margin-bottom:10px;}
#butang5{width:100px;float:left;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;}
#butang6{width:100px;float:right;text-align:center;background-color:#EC644B;height:24px;padding:5px;font-size:18px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang5:hover{opacity:.6;}
#butang6:hover{opacity:.6;}

#clearance{float:none;clear:both;width:100%;height:1px;}

#allNotes{background-color:#fff;padding:5px;}
.notestitle{font-size:25px;margin-top:20px;}

.zample{width:90%;padding:5px;background-color:#FDE3A7;line-height:18px;}
.zample2{margin-left:15px;}

.hlight{color:#013243;font-weight:900;}


@media screen and (max-width:800px) {
	 
#gameArea{width:100%;}
 

}

@media screen and (max-width:650px) {
	#title1{font-size:32px;}
 .notestitle{font-size:19px;margin-top:20px;}
#gameArea{margin-top:15px;}
}


@media screen and (max-width:470px) {
	#title1{font-size:25px;}
	#title2{font-size:15px;}
	#banner{width:100%;height:50px;background-color:#F39C12;padding-left:0%;}
 #holder{text-align:center;font-size:20px;width:94%;margin:auto;}
#feedbackholder{width:90%;margin:auto;background-color:#FDE3A7;padding:5px;}
#feedback{width:90%;margin:auto;}
}

@media screen  and (max-width:820px){
#bannerb{width:100%;}
#bannerb img{width:100%;}
 
}


@media screen  and (max-width:600px){
#bannerb{display:none;}
#banners{width:100%;display:inline;}
#banners img{width:100%;}
 #uberTitle{height:40px;padding:20px;font-size:28px;}
}

@media screen  and (max-width:610px){
#spacer2{height:0px;}
	#spacer3{height:0px;} 
}



@media screen  and (max-width:350px){
#butang3{margin-top:-20px;}
#feedback{margin-top:-20px;}
	#banner img{width:100%;height:auto;}
}