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

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

}


#splashTitle{margin:auto;margin-top:5%;width:380px;}



#foot{height:50px;background-color:white;}
 

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

 #clueArea{border:1px solid #ececec;color:#ececec;width:400px;font-size:30px;padding:10px;margin:auto;font-family:tf;text-align:center;
 position:relative;
 }
 
 #tile{text-align:center;}
 #tile img{width:150px;}
 
 
 #fbb{width:200px;text-align:center;margin:auto;}

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

#maintitle{font-size:96px;color:#fefefe;text-align:center;padding-top:50px;font-family:tf;}
#maintitle2{font-size:26px;color:#fefefe;text-align:center;padding-top:30px; }
#maintitle3{font-size:26px;color:#fefefe;text-align:center;padding-top:10px;padding-bottom:10px; }
 
#appAreaLarge{width:100%;height:560px;width:540px;margin:auto;margin-top:10px;
border:1px solid #fff;}
#appAreaInner{ background-color:#A0C226;background-color:#8592b2;
height:580px;width:540px;}


#butang1{width:250px;font-size:18px;cursor:pointer;text-align:center;border:3px solid #facd92;padding:5px;margin:auto;background-color:#F06a23;border-radius:5px;margin-bottom:18px; }
#butang1:hover{opacity:.6;}

#butang2{width:250px;font-size:18px;cursor:pointer;text-align:center;border:3px solid #facd92;padding:5px;margin:auto;background-color:#F06a23;border-radius:5px;margin-bottom:18px; }
#butang2:hover{opacity:.6;}

#butang3{width:250px;font-size:18px;cursor:pointer;text-align:center;border:3px solid #facd92;padding:5px;margin:auto;background-color:#F06a23;border-radius:5px;margin-bottom:8px; }
#butang3:hover{opacity:.6;}

#logo img{margin-left:10%;}
 
 
 #gridHolder{background-color:#EFECEB;margin:auto;}
 
 .grid4{width:320px;height:320px;padding:20px;}
 .grid4x{width:320px;height:390px;padding:20px;}
 .grid5{width:400px;height:390px;padding:20px;}
 
 #grid{margin:auto;}
 
 .mgrid4{width:350px;}
 .mgrid5{width:400px;}
 
 
 .tile{float:left;width:78px;height:78px;border:1px solid #EFECEB;background-color:#F9CB8E;text-align:center;font-size:60px;font-family:tf;color:#fff;
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;}

.tile4{float:left;width:78px;height:78px;border:1px solid #EFECEB;background-color:#F9CB8E;text-align:center;font-size:60px;font-family:tf;color:#fff;
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;}
.tile5{float:left;width:78px;height:78px;border:1px solid #EFECEB;background-color:#F9CB8E;text-align:center;font-size:60px;font-family:tf;color:#fff;
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;}





 
 .ht{background-color:#f06a23;color:#fefefe;width:78px;height:78px;}
 
 .ut{background-color:#E4F1FE;background-color:#81CFE0;color:#666;width:78px;height:78px;}
 
  .et{background-color:#136C7E;width:78px;height:78px;color:#fefefe;}
    .et2{background-color:#00B16A;width:74px;height:74px;border:3px solid #2ECC71;color:#E4F1FE;}
 

 
 #hsarea{width:100%;height:35px; }
 
 
 #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; }
  
  
  .greytex{color:#Fefefe;}
  
  
  .cpouter{width:33%;float:left;text-align:center;padding-top:10px;}
  #cp1{width:100px;border:1px solid white;border-radius:3px;margin:auto;color:#fff;cursor:pointer;}
  #cp1:hover{opacity:.5;}
  
  #cp2{width:100px;border:1px solid white;border-radius:3px;margin:auto;color:#fff;cursor:pointer;}
  #cp2:hover{opacity:.5;}
  #cp3{width:100px;border:1px solid white;border-radius:3px;margin:auto;color:#fff;cursor:pointer;}
#cp3:hover{opacity:.5;}


.str1{color:#fff;text-align:center;}



@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;}
	
	#hsarea{width:100%;height:15px;}
	 #appAreaLarge{width:100%;}
 
	#appAreaInner{ 
height:560px;width:100%;border:none;}
#appAreaLarge{border:none;}
 
 
#gameBanner{width:100%;height:60px;background-color:#A0C226;font-family:tf;font-size:0px;position:relative;}
}

@media screen and (max-width:450px) {
	#banner img{width:100%;}
 #maintitle{font-size:76px;}
  
  .grid5{width:100%;padding:0px;padding-top:20px;padding-bottom:20px;}
  
}




@media screen and (max-width:400px) {
.mgrid5{width:320px;}
  .grid4{width:320px;margin:auto;padding:10px;padding-top:20px;padding-bottom:20px;}
  .grid4x{width:320px;margin:auto;padding:10px;padding-top:20px;padding-bottom:20px;}
  .tile5{float:left;width:62px;height:62px;border:1px solid #EFECEB;font-size:45px; vertical-align: middle;line-height:62px;}
  
  
  
}


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


@media screen and (max-width:350px) {
  #grid{width:320px;margin:auto;}
 .tileold{float:left;width:43px;height:48px;border:1px solid grey;font-size:40px;}
  .tileold:hover{background-color:#eeeeec;width:41px;height:46px;border:2px solid #FABB00;}
   .mgrid4{width:320px;}
   .grid4{width:320px;margin:auto;padding:0px;padding-top:20px;padding-bottom:20px;}
       .grid4x{width:320px;margin:auto;padding:0px;padding-top:20px;padding-bottom:20px;}
}