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


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

@font-face {
    font-family: nf;
    src: url('nf.ttf'); 
	 
    }

 
#gameArea{width:800px;min-height:480px;margin:auto;background-color:#fff;margin-top:10px;margin-bottom:10px;}


#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;padding-left:30px;padding-right:30px;}
#title3{text-align:center;padding-left:30px;padding-right:30px;font-size:40px;color:#2e3131;}
#title3x{text-align:center;padding-left:20px;padding-right:20px;font-size:35px;color:#2e3131;}
#title3xx{text-align:center;padding-left:10px;padding-right:10px;font-size:28px;color:#2e3131;}
#title4{text-align:center;padding-left:30px;padding-right:30px;font-size:25px;}

#pix1a{margin:auto;margin-top:2px;text-align:center;}
#pix1a img{margin:auto;margin-top:2px;text-align:center;width:150px;}

#pix1{margin-top:2px;text-align:center;}
#butang1{width:180px;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;}
 
#butang3{width:180px;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;}

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


#butangArea{width:230px;margin:auto;} 
#butang4{float:left;width:90px;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;}
#butang5{float:right;width:90px;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;}
#butang4:hover{opacity:.6;}
#butang5:hover{opacity:.6;}


 

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

 
#spacer{width:100%;height:20px;}
 
#spacer2{width:100%;height:10px;clear:both:float:none;}

#spacer3{width:100%;height:40px;}





#hider{width:100%;height:40px;background-color:white;position:absolute;top:0px;}



#fcard{position:relative;border:2px solid #2e3131;width:250px;height:250px;margin:auto;overflow:hidden;background-color:#ececec;text-align:center;cursor:pointer;border-radius:4px;}
#fcard:hover{border:2px solid #95a5a6;}

#wcard{position:absolute;width:250px;height:250px;}



.theword{margin-top:80px;font-size:27px;color:#2e3131;}


#meaning{width:250px;height:250px;position:absolute;top:250px;background-color:#fde3a7;}
.themeaning{margin-top:80px;font-size:20px;color:#2e3131;text-align:center;padding-left:10px;padding-right:10px;}





#clueArea{margin:auto;padding:10px;border:1px solid grey; border-radius:5px;width:80%;text-align:center;}

#answerArea{height:60px;padding-top:10px;margin:auto;position:relative;}


.blank{font-family:nf;font-size:40px;text-align:center;line-height:40px;float:left;width:48px;height:48px;background-color:#ecf0f1;margin-left:1px;margin-right:1px;border-bottom:2px solid grey;}

 


#inputArea{width:300px;margin:auto;height:180px;}
.inputTile{color:#efefef;font-size:40px;text-align:center;line-height:50px;float:left;width:50px;height:50px;background-color:#e87e04;margin-left:3px;margin-right:3px;margin-bottom:3px;border-radius:8px;cursor:pointer;border:2px solid #f3bb7a;font-family:nf;}
.inputTile:hover{opacity:.7;}



.hlite{background-color:pink;}



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


}




@media screen and (max-width:700px) {
	
 #answerArea{height:60px;padding-top:10px;margin:auto;position:relative;}


.blank{font-size:25px;line-height:25px;width:25px;height:25px;}



}





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

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

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

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

 #butangholderx{width:310px; }
}






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

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