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



#gameArea{width:900px;height:400px;margin:auto;background-color:#fff;margin-bottom:10px;border:2px solid #2574A9;overflow:hidden;position:relative;}
#pregameArea{width:900px;min-height:40px;margin:auto;background-color:#fff;margin-top:40px;margin-bottom:10px;border:2px solid #2574A9;text-align:center;}
#structions{height:30px;line-height:30px;font-size:25px; }
#menuArea{height:400px;overflow-y:scroll;overflow-x:hidden;}


#ba{width:30px;height:30px;float:left;cursor:pointer;}
#ba:hover{opacity:0.5;}

#cBox{text-align:center;   position:absolute;width:400px; margin:auto;margin-top:220px;height:28px; background-color:white;opacity:.7;color:black;font-size:20px;border-radius:5px;cursor:pointer;}


#stage{margin:auto;width:400px;}

#bgx{position:absolute;}

#bgx img{height:400px;}

#quad{position:absolute;height:400px;width:400px; }

#q1{width:200px;height:200px;float:left;}
#q2{width:200px;height:200px;float:left;color:black;}
#q3{width:200px;height:200px;float:left;text-align:center;}
#q4{width:200px;height:200px;float:left;text-align:center;}

#q1 img{position:absolute;}
 
.padder{padding:30px;width:145px;position:absolute;padding-top:10px;font-size:18px;}
.padder2{padding:30px;position:absolute;color:#efefef;padding-top:10px;font-size:18px;}

.padder3{padding:30px;width:145px;position:absolute;padding-top:30px;font-size:18px;}

#q2a{width:200px;height:100px;margin:2px;cursor:pointer;background-color:#fff;border-radius:4px; border: 3px solid grey;}
#q2a:hover{border: 3px solid #f15a22;}

#q2b{width:200px;height:100px;margin:2px;cursor:pointer;background-color:#fff;border-radius:4px; border: 3px solid grey;}
#q2b:hover{border: 3px solid #f15a22;}

#q2a img{position:absolute;}
#q2b img{position:absolute;}

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



#fbb{font-size:22px;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:150px;margin:auto;margin-top:10px;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:150px;margin:auto;margin-top:10px;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;}



.myTitle{font-size:20px;border-bottom:solid 1px grey;min-height:35px;padding-left:10px;cursor:pointer;}
.myTitle:hover{background-color:#e4f1fe;}




#contentArea{height:347px;overflow-y:scroll;overflow-x:hidden;}

#contentArea2{padding:5px;margin:auto; width:400px;margin-top:2px;margin-bottom:2px;}



#introTitle{font-size:40px;text-align:center;margin-top:50px;padding:20px;}
#intro2{text-align:center;color:#6c7a89;font-size:20px;}

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


#attribution{color:blue;margin-top:50px;text-align:center;}
#attribution a{color:grey;}



@media screen and (max-width:904px) {
#pregameArea{width:90%;}
#gameArea{width:90%;}
}


@media screen and (max-width:825px) {
 .myTitle{font-size:18px;}
#structions{height:25px;line-height:25px;font-size:20px; }
}

@media screen and (max-width:670px) {
 
 #pregameArea{min-height:50px;}
#structions{height:40px;  }
#introTitle{font-size:35px;text-align:center;margin-top:50px;padding:20px;}
}




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

#q2a{width:92%;}
#q2b{width:92%;}
#cBox{width:90%;margin:auto;margin-left:5%;margin-top:220px;}
#contentArea2{padding:20px;margin:auto; width:96%;background-color:#fff;}
}









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



}

 
@media screen and (max-width:435px) {
#pregameArea{width:100%;border:none;}
#gameArea{width:100%;border:none;}
#stage{width:100%;}
#quad{width:100%;}
#q1{width:50%;}
#q2{width:50%;}
#q3{width:50%;}
#q4{width:50%;}
#q2a{width:92%;}
#q2b{width:92%;}
#q1 img{width:48%;}
#q2a img{width:48%;height:98px;}
#q2b img{width:48%;height:98px;}
.padder{padding:20px;width:35%;position:absolute;padding-top:10px;font-size:15px;}
.padder2{padding:20px;width:35%position:absolute;color:#efefef;padding-top:10px;font-size:15px;}

.padder3{padding:30px;width:35%;position:absolute;padding-top:30px;font-size:15px;}
}