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

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

}



#t2{text-align:center;font-size:30px;}

#qsa{padding:15px;font-size:19px;}
 

 
#gameArea{width:800px;height:460px;margin:auto;background-color:#fff;margin-top:10px;margin-bottom:10px;}
 
#pix1{margin-top:2px;text-align:center;}
#pix1 img{width:220px;}

#butang1{float:left;width:140px;margin:auto;text-align:center;background-color:#c0392b;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang1:hover{opacity:.6;}

#butang2{float:right;width:140px;margin:auto;text-align:center;background-color:#c0392b;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang2:hover{opacity:.6;}

#butang3{float:right;width:140px;margin:auto;text-align:center;background-color:#c0392b;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang3:hover{opacity:.6;}

#butang1x{float:left;width:140px;margin:auto;text-align:center;background-color:#c0392b;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang1x:hover{opacity:.6;}

#butang2x{float:left;width:140px;margin:auto;margin-left:25px;text-align:center;background-color:#c0392b;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang2x:hover{opacity:.6;}

#butang3x{float:right;width:140px;margin:auto;text-align:center;background-color:#c0392b;height:24px;padding:5px;font-size:17px;color:#fff;font-family:Verdana, Geneva, sans-serif;cursor:pointer;border-radius:5px;}
#butang3x:hover{opacity:.6;}

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

 #butangholder{width:310px; margin:auto;clear:both;float:none;}
 
 #butangholder2{width:500px; margin:auto;clear:both;float:none;}
 
 
#promo{margin:auto;text-align:center;margin-top:10px;}

 
#spacer{width:100%;height:20px;}
 
 

#holder{margin:auto;margin-top:20px;width:90%;}

#question{text-align:center;margin:auto;width:90%;padding:10px;background-color:#fde3a7;border-radius:8px;font-size:22px;}
#option1{ text-align:center;margin:auto;width:50%;padding:10px;border-radius:8px;font-size:17px;min-width:50%;background-color:#ececec;margin-top:40px;cursor:pointer;}
#option2{ text-align:center;margin:auto;width:50%;padding:10px;border-radius:8px;font-size:17px;min-width:50%;background-color:#ececec;margin-top:10px;cursor:pointer;}
#option3{ text-align:center;margin:auto;width:50%;padding:10px;border-radius:8px;font-size:17px;min-width:50%;background-color:#ececec;margin-top:10px;cursor:pointer;}
#option4{ text-align:center;margin:auto;width:50%;padding:10px;border-radius:8px;font-size:17px;min-width:50%;background-color:#ececec;margin-top:10px;cursor:pointer;}


#option1:hover{background-color:#d35400;color:#efefef;}
#option2:hover{background-color:#d35400;color:#efefef;}
#option3:hover{background-color:#d35400;color:#efefef;}
#option4:hover{background-color:#d35400;color:#efefef;}


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


#nextButang{margin:auto;clear:both;float:none;opacity:0;padding:8px;border-radius:6px;font-size:17px;width:50px;background-color:#D2D7D3;margin-top:40px;cursor:pointer;}

#nextButang:hover{background-color:#ececec;color:grey;}


#displayBar{width:100%;height:40px;background-color:#6c7a89;color:#efefef;cursor:pointer;}
#displayBar:hover{opacity:0.9;} 
#displayBar1{ font-size:20px;line-height:40px;text-align:center;float:left;width:20%; }
#displayBar2{font-size:20px;line-height:40px;text-align:center;float:right;width:20%;  }
#displayBar3{float:left;width:60%;height:100%; }
#displayBar3inner{width:100%;height:100%; text-align:center;font-size:25px;line-height:35px;}





#score1{background-color:#03A678;font-size:19px;color:#efefef;padding:8px;text-align:center;width:300px;margin:auto;}
#score2{background-color:#D2D7D3;font-size:19px;padding:8px;text-align:center;width:150px;margin:auto;margin-top:4px;}
#score3{text-align:center;width:150px;margin:auto;margin-top:40px;}
#score4{text-align:center;width:200px;margin:auto;margin-top:40px;} 
#stars{text-align:center;width:100px;margin:auto;margin-top:40px;}



#cardHolder{width:700px;margin:auto;height:350px;padding-top:20px;}
#hider{width:100%;height:40px;background-color:white;position:absolute;top:0px;}
#wrdcard{float:right;width:350px;height:350px;}
#pixcard{float:left;width:350px;height:350px;}
#imgholder{}
#imgholder img{width:350px;margin-top:80px;}
.theword{margin-top:110px;font-size:40px;color:#2e3131;}





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

}


@media screen and (max-width:700px) {
#cardHolder{width:100%;margin:auto;height:350px;padding-top:20px;}
#wrdcard{float:right;width:50%; }
#pixcard{float:left;width:50%; }
#imgholder img{width:100%;height:auto;}
.theword{margin-top:110px;font-size:40px;color:#2e3131;}
#qsa{padding:15px;font-size:18px;}
}





@media screen and (max-width:650px) {
#gameArea{margin-top:15px;height:540px;}
#displayBar3inner{width:100%;height:100%; text-align:center;font-size:20px;line-height:35px;}
}



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

#question{width:90%;padding:10px;border-radius:8px;font-size:22px;text-align:center;}
#option1{ width:90%;text-align:center;}
#option2{width:90%;text-align:center;}
#option3{width:90%;text-align:center;}
#nextButang{width:50px;margin:auto;margin-top:40px;}
.theword{font-size:30px;}

#butang1x{float:none;width:160px;margin:auto;margin-bottom:10px;}


#butang2x{float:none;width:160px;margin:auto;margin-left:0px;margin-bottom:10px;}


#butang3x{float:none;width:160px;margin:auto;}


 
 #butangholder2{width:160px;}



}

 



@media screen and (max-width:450px) {
	 #nextButang{margin-top:20px;}
	 #qsa{padding:15px;font-size:15px;}
}




@media screen and (max-width:430px) {
#cardHolder{width:100%;margin:auto;height:380px;padding-top:10px;}
#wrdcard{float:none;width:100%;text-align:center; }
#pixcard{float:none;width:100%;text-align:center;height:250px; }
#imgholder img{width:100%;margin-top:10px;}
.theword{margin-top:5px;font-size:30px;color:#2e3131;}
#displayBar3inner{width:100%;height:100%; text-align:center;font-size:15px;line-height:35px;}
}