body{margin:0px;padding:0px;
background-color:#1b191c;
 -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
 }

a{text-decoration: none;color:#ececec;}





@font-face {
    font-family: tt;
    src: url('tile.ttf'); 
    }
 
 
 #mainArea{float:right;width:400px;height:400px;}
 
 #starArea{height:50px;width:160px;margin:auto;text-align:center;color:#efffff;font-family:arial,calibri;}
 #starArea2{height:50px;width:100px;margin:auto;}
 .star{float:left;width:25px;opacity:.1;text-align:center;}
  .staro{float:left;width:25px;text-align:center;}
 
 #block1{width:100%;height:200px;}
#block1a{width:100%;height:100px;color:#ececec;font-size:20px;font-family:arial,calibri;}
#block1b{width:100%;height:100px;color:#ececec;font-size:30px;font-family:arial,calibri;}
 
 #tileArea2{width:100%;height:50px;}
 
 
 #subArea{color:#efefef; font-family: tt;height:20px;}

#fresh{height:0px;}

  #fbutton{float:right;}
#fbutton img{cursor:pointer;}	
#fbutton img:hover{opacity:0.5;}


 #structionsArea img{width:100%;}
 
 
 .blank{float:left;width:46px;height:46px;margin:2px;background-color:#4b4b4b;border-radius:3px;font-family:tt;font-size:36px;text-align:center;line-height:46px;}
 
 .filled{background-color:#f2df3e!important;}
 
 .unfilled{background-color:#1b191c!important;color:#1b191c!important;opacity:.4;cursor:default!important;}


 .green{background-color:#1e824c!important;color:#ececec!important;}
 
 .rare{background-color:#f5ab35!important;}
 
.oranger{color:#d35400;}
.oranger2{color:#d35400;}
 
#banner{text-align:center;margin:auto;}

#banner1{text-align:center;background-color:#2cafdb;}
#banner2{display:none;}

#pix img{width:100%;}

#smallpix {margin:auto;text-align:center;}
#smallpix img{width:50%;margin:auto;text-align:center;}

#em1{text-align:center;font-size:30px;color:#ececec;font-family:arial,calibri;}
.em1{text-align:center;font-size:22px;color:#ececec;font-family:arial,calibri;}

#scoreArea{height:30px;padding-top:5px;padding-bottom:5px;margin:auto;width:420px;background-color:white;margin-bottom:10px;
border-radius: 0px 0px 5px 5px;text-align:center;font-size:30px;font-family:arial,calibri;}





.filled2{background-color:#fff9e5!important;border:2px solid #e67e22!important;border-radius:12px;}


.filled3{background-color:#87d37c!important;}


#gameArea{width:500px;margin:auto;height:560px;background-color:#1b191c;position:relative;border-radius: 0px 0px 9px 9px;}

#title1{position:relative;margin:auto;text-align:center;width:250px;background-color:#fefefe;font-family: Mandatory;font-size:70px;border-radius:8px;} 


#butang1{border:3px solid #8599ac;margin:auto;padding:5px;border-radius:8px;background-color:#fbb92f;width:140px;text-align:center;cursor:pointer;font-family:arial,calibri;}
#butang1:hover{opacity:.7;}

#butang2{border:3px solid #8599ac;margin:auto;padding:5px;border-radius:8px;background-color:#fbb92f;width:140px;text-align:center;cursor:pointer;font-family:arial,calibri;}
#butang2:hover{opacity:.7;}


.x{background-image:url('bg.png');}

 
#board{width:420px;height:420px;margin:auto;}
.tile{width:64px;height:64px;margin:1px;background-color:#effcfd;float:left;text-align:center;line-height:60px;font-size:45px;font-family:tt;border:2px solid #effcfd;border-radius:12px;}

.tile2{position:absolute;width:52px;height:52px;border:3px solid #fcd670; margin:1px;background-color:#fcd670;float:left;text-align:center;line-height:52px;font-size:42px;font-family:tt;cursor:pointer;}
.tile2:hover{background-color:#f2df3e}
#tileArea{width:55px;float:left;}


.tholder{width:60px;height:60px;float:left;position:relative;}



















#buttonArea{margin:auto;width:420px;clear:both;float:none;}
#butang3{float:left;border:3px solid #8599ac;margin:auto;padding:5px;border-radius:8px;background-color:#fefefe;width:80px;text-align:center;cursor:pointer;font-family:arial,calibri;}
#butang3:hover{opacity:.7;}
#butang4{float:right;border:3px solid #8599ac;margin:auto;margin-right:20px;padding:5px;
	border-radius:8px;background-color:#fefefe;width:80px;text-align:center;
	cursor:pointer;font-family:arial,calibri;}
#butang4:hover{opacity:.7;}
#butang5{float:right;border:3px solid #8599ac;margin:auto;padding:5px;border-radius:8px;background-color:#fefefe;width:50px;text-align:center;cursor:pointer;font-family:arial,calibri;}
#butang5:hover{opacity:.7;}

.hgh{border:3px solid #ffa800;}


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

}
 



@media screen and (max-width:540px) {
 #mainArea{float:right;width:auto;height:400px;}
 #tileArea{margin-left:10px;}
 .oranger2{color:#d35400;font-size:20px;}
 .oranger{color:#d35400;font-size:20px;}
}




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

 #tileArea2{width:320px;height:50px;}
 .xxxx{width:34px;height:34px;border:3px solid #fcd670; margin:1px;line-height:34px;font-size:30px;}
.blank{width:34px;height:34px;margin:2px;font-size:30px;line-height:34px;}
 #buttonArea{margin:auto;width:320px;clear:both;float:none;}
}


@media screen and (max-width:500px) {
#gameArea{width:100%;}
#banner1{display:none;}
#banner2{display:inline-block;background-color:#8599ac;color:#ececec;height:25px;width:100%;font-family:tt,arial,calibri;font-size:20px;}
}



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

.tile2x{width:38px;height:38px;border:0px; margin:1px;background-color:#fff9c5;float:left;text-align:center;line-height:38px;font-size:27px;font-family:tt;cursor:pointer;}
.tile2x:hover{background-color:#f2df3e}
#tileAreax{margin:auto;width:320px;}

}


@media screen and (max-width:420px){
#scoreArea{width:100%;}
#board{width:318px;height:318px;}
.tile{width:47px;height:47px;margin:1px;background-color:#effcfd;float:left;text-align:center;line-height:43px;font-size:38px;font-family:tt;border:2px solid #effcfd;border-radius:12px;}
#buttonArea{width:220px;}
}




@media screen and (max-width:390px){
.blank{width:29px;height:29px;margin:1px;font-size:25px;line-height:29px;}
 #tileArea2{width:250px;margin-right:10px;}
}

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

 #tileArea2{margin-right:0px;}
}