body,html{margin:0px;padding:0px;

font-family:Arial, Helvetica, sans-serif;
 background-color:#F2F1E6;

}
#fbholder{text-align:center;}
#foot{height:50px;background-color:white;}
.oldbody{ background-image:URL(tile.png);}

#hiScoreTab{margin-top:50px;text-align:center;}

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


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


	
	.colorme{color:#84bc01;font-size:34px;}
	
	
	#titlelogo{text-align:center;}
	#titlelogo img{width:80%;}

 #clueArea{border:1px solid #ececec;color:#ececec;width:400px;font-size:30px;padding:10px;margin:auto;font-family:tf;text-align:center;
 position:relative;
 }
 
  #answerArea{width:100%;height:40px;font-family:tf;text-align:center;}






#feedbackBox{height:300px;width:100%;background-color:white;position:absolute;top:-300px;}

#grid2{position:absolute;}


#grid3{position:absolute;}
.minitile{color:#fff;position:absolute;font-size:12px;width:20px;top:40px;right:0px;}


#banner{background-color:#716E5D;text-align:center;
  
  font-size:24px;
  color:#FFFFFF;width:100%;height:70px;}
#banner img{width:450px;}


 
#appAreaLarge{width:100%;height:560px;width:540px;margin:auto;margin-top:10px;
border:1px solid #fff;}
#appAreaInner{ background-color:#A0C226;background-color:#FEFDF7;
height:560px;width:540px;}


#butang1{width:150px;font-size:18px;cursor:pointer;text-align:center;border:3px solid white;padding:5px;margin:auto;
background-color:#D4532E;border-radius:5px;color:#eee;}
#butang1:hover{opacity:.6;}

#butang2{width:150px;font-size:18px;cursor:pointer;text-align:center;border:3px solid white;padding:5px;margin:auto;
background-color:#D4532E;border-radius:5px;color:#eee;}
#butang2:hover{opacity:.6;}



#butang2x{width:150px;font-size:18px;cursor:pointer;text-align:center;border:3px solid white;padding:5px;margin:auto;background-color:#FF6501;border-radius:5px;float:right;margin-right:10%;}
#butang2x:hover{opacity:.6;}


#butang3{width:150px;font-size:18px;cursor:pointer;text-align:center;border:3px solid white;padding:5px;margin:auto;background-color:#FF6501;border-radius:5px;}
#butang3:hover{opacity:.6;}

#logo img{margin-left:10%;}
 
 

#mytimer1{width:296px;margin:auto;height:2px;position:relative;}
#mytimer2{width:296px;margin:auto;height:2px;position:absolute;background-color:#34A9FF;}


 
 #grid{width:300px;margin:auto;height:300px;overflow-y:hidden;position:relative;}
 .tile{font-family:tf2;font-size:50px; line-height: 90px;position:relative;
float:left;width:96px;height:96px;border:2px solid #FEFDF7;background-color:#EAAB25;color:#fff;cursor:pointer;text-align:center;
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;}
 
 .tile:hover{background-color:#eeeeec;width:96px;height:96px;border:2px solid black;color:#716E5D;cursor:pointer;}
 
 
 

  #clueArea2{width:400px;;margin:auto;text-align:center;height:40px;}
 .wrd{padding:5px;margin-left:5px;margin-right:5px;background-color:#ecedec;text-align:center;font-family:tf;color:#ecedec;font-size:20px;
 -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

 
 
 }
 
 
 
   #clueArea3{width:100%;;margin:auto;text-align:center;height:40px;color:#fff;margin-top:20px;float:none;clear:both;}
 
 .gr{color:#84bc01;font-weight:700;}
 
 #txtsmall{font-size:20px;}
 
 
 
 #mt{width:100%;height:100%;background-color:rgba(255,255,255, 0.1);position:absolute;top:0px;left:0px;}
 
 
 .selectedTile1{color:#D91E18;}
 .selectedTile2{color:#26A65B;}
 
 #str1{text-align:center;color:white;font-size:24px;}
 
  #str2{width:80%;text-align:center;color:white;height:230px;margin:auto; }
  #strpix{margin:auto;}
  #strpix img{width:180px;}
  
  
  #ca1{font-size:13;}
  #ca2{font-size:13;color:#84bc01;}
  
  
  #promotst{text-align:center;width:300px;height:50px;background-color:#C63;margin:auto;}
  #promo{text-align:center;}




.faund{background-color:#C8F7C5  !important;}



#controlArea{width:300px;margin:auto;padding-top:20px;}
#sButton{cursor:pointer;float:left;margin-right:20px;margin-top:20px;width:200px;border-radius:4px;background-color:#97CD4F;color:#fff;font-size:30px;text-align:center;}
#uButton{cursor:pointer;float:left;margin-top:20px;width:80px;border-radius:4px;background-color:#34A9FF;color:#fff;font-size:30px;text-align:center;}

#sButton:hover{opacity:.6;}
#uButton:hover{opacity:.6;}


#displayArea{ height:80px;padding:20px;padding-top:40px;width:488px;margin:auto;}

#displayAreaInner{margin:auto;height:50px;background-color:#F2F1E6;font-size:60px;text-align:center;}

#title1{font-family:tf;text-align:center;font-size:96px;color:#EAAB25;padding-top:50px;}

 	.displayTile{font-family:tf2;font-size:43px;width:59px;height:59px;border:1px solid white;float:left;background-color:#F2F1E6;text-align:center;}






#scoreBox{position:absolute;top:0px;}
#score{float:left;width:120px;background-color:#EAAB25;color:white;text-align:center;margin-left:30px;font-size:18px;border-radius: 0px 0px 4px 4px;}
#level{float:right;width:120px;background-color:#EAAB25;color:white;text-align:center;margin-right:30px;font-size:18px;border-radius: 0px 0px 4px 4px;}



#feedbackBox1{width:100%;text-align:center;font-size:35px;}
#feedbackBox2{width:100%;text-align:center;height:80px;}
#feedbackBox3{width:100%;text-align:center;font-size:25px;color:#2574A9;}
#feedbackBox4{width:100%;text-align:center;}



#bonus2{width:120px;border-radius:3px;text-align:center;margin:auto;margin-top:50px;background-color:#2ECC71;}

#bonus1{width:120px;border-radius:3px;text-align:center;margin:auto;margin-top:50px;background-color:#F89406;}


#t0{border-radius:7px 0px 0px 0px;}
#t2{border-radius:0px 7px 0px 0px;}
#t6{border-radius:0px 0px 0px 7px;}
#t8{border-radius:0px 0px 7px 0px;}








#titleText{margin-top:20px;font-size:28px;text-align:center;}
#titleText2{margin-top:10px;font-size:26px;text-align:center;}
#subButang{width:150px;font-size:18px;cursor:pointer;text-align:center;border:3px solid white;padding:5px;margin:auto;background-color:#DAC9AF;border-radius:5px;}
#subButang:hover{opacity:.6;}
#vqinput{text-align:center;}
#ip{text-align:center;}

#hsbutang{text-align:center;border:1px solid grey; padding:3px;border-radius:3px;cursor:pointer;width:144px;margin:auto;}
#hsbutang:hover{opacity:.7;}





@media screen and (max-width:550px) {
	#logo img{margin:auto;width:90%;}
	 #clueArea{width:90%;font-size:25px;padding:10px;margin:auto;font-family:tf;text-align:center;}
	 #clueArea2{width:90%;margin:auto;text-align:center;height:40px;}


#displayArea{ height:80px;padding:0px;padding-top:40px;width:288px;margin:auto;}

.displayTile{font-family:tf2;font-size:30px;width:34px;height:34px;border:1px solid white;float:left;background-color:#F2F1E6;text-align:center;}


	#hsarea{width:100%;}
	 #appAreaLarge{width:100%;}
 
	#appAreaInner{ height:560px;width:100%;border:none;}
#appAreaLarge{border:none;}
#appAreaLargeold{border:none;border-top:1px solid #fff;border-bottom:1px solid #fff;}
 
#gameBanner{width:100%;height:60px;background-color:#A0C226;font-family:tf;font-size:0px;position:relative;}
}



	


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

#title1{font-size:70px;}
	#banner img{width:100%;}
	 #butang1{width:100px;font-size:14px;}
 

#butang2{width:100px;font-size:14px;}
}
@media screen and (max-width:350px) {
  #gridx{width:315px;margin:auto;}

}