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


#t2x{background-image:url(title2.png);}


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

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


#spacer50{width:100%;height:90px;}

.fon1{font-family:Cal,Verdana, Geneva, sans-serif;font-size:60px;text-align:center;color:#f3c394;}
.fon1a{font-family:Cal,Verdana, Geneva, sans-serif;font-size:60px;text-align:center;color:#f3c394;}
.fon2{font-family:sans-serif;font-size:20px;text-align:center;color:#f3c394;padding:20px;}
.fon2a{font-family:sans-serif;font-size:30px;text-align:center;color:#f3c394;padding:20px;margin-top:40px;margin-bottom:20px;}
.fon3{font-family:Cal,Verdana, Geneva, sans-serif;font-size:40px;text-align:center;color:#f3c394;}
.fon4{font-family:sans-serif;font-size:25px;text-align:center;color:#f3c394;padding:20px;} 
.fon5{font-family:sans-serif;font-size:28px;text-align:center;color:#f3c394;padding:20px;} 
.fon6{font-family:sans-serif;font-size:20px;text-align:center;color:#f3c394;padding:10px;}
.showNum{width:80px;height:70px;margin:auto;border:1px solid grey; border-radius:4px;font-family:Cal,Verdana, Geneva, sans-serif;font-size:60px;text-align:center;color:#f3c394;}

.lpix{text-align:center;width:270px;margin:auto;}
.lpix img{width:270px;}

#board{margin:auto;width:256px;height:256px;}

.tile2{width:60px;height:60px;box-sizing:border-box;margin:2px;background-color:white;float:left;cursor:pointer;}
.tile2:hover{opacity:.8;}
.tile2 img{width:60px;}

#structions{padding-top:20px;margin-bottom:20px;text-align:center;font-family:sans-serif;font-size:20px;color:#f3c394;}

#shortTimer{text-align:center;font-size:40px;color:#f3c394;}

#tileHolder{margin:auto;width:720px;}
.th1{width:630px!important;}
.th2{width:540px!important;}
.th3{width:450px!important;}
.tile{width:80px;height:80px;margin-left:5px;margin-right:5px;background-color:#f3c394;box-sizing:border-box;
	font-size:60px;text-align:center;border-radius:4px; border: 3px solid #fdfbcb;float:left;cursor:pointer;}
.tile:hover:{opacity:.8;}

.icon{position:relative;margin-left:50px;}
.icon img{position:absolute;top:-3px;left:-43px;width:30px;}

.qq{padding:5px;background-color:#5e595a;padding-left:10px;padding-right:10px;}


#timer1{width:300px;margin:auto;height:1px;  }
#timer1ins{width:300px;height:1px; background-color:#f3c394;}

#butang1{margin:auto;text-align:center;color:white;border-radius:4px; width:130px;padding:17px;font-size:20px;
		background-color:#7d3f15;border:2px solid #f3c394;;cursor:pointer; }
#butang1:hover{opacity:.6;}

#butang2{margin:auto;text-align:center;color:white;border-radius:4px; width:130px;padding:10px;font-size:20px;
		background-color:#7d3f15;border:2px solid #f3c394;;cursor:pointer;}
#butang2:hover{opacity:.6;}

#butangHolder1{width:300px;margin:auto;}
.butang3{text-align:center;width:50px;height:30px;padding:10px;background-color:#5e595a;padding-left:10px;padding-right:10px;
	border:1px solid #f3c394;border-radius:3px; margin-left:14px;margin-right:14px;cursor:pointer;color:white;font-size:25px;
	float:left;line-height:27px;}
.butang3:hover{opacity:.6;}

#butangHolder2{width:90px;margin:auto;margin-top:40px;cursor:pointer;}
#butangHolder2:hover{opacity:.7;}

#butangHolder3{width:350px;height:20px;margin:auto; }
 


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

#t1{width:450px;float:left;}
#t1b{width:450px;float:left;}
#t2{width:450px;float:right;height:500px;background-color:#261f21;}
#t3{width:450px;float:right;height:500px;background-color:#261f21;}
#t4{width:100%;height:500px;background-color:#261f21;}
#t5{width:100%;height:20px; }


.option{text-align:center;width:220px;margin:auto;color:#f3c394;border:2px solid #f3c394;border-radius:5px;
		cursor:pointer;margin-bottom:10px;padding:10px;font-size:20px;}
.option:hover{background-color:#5e595a;}

.optionP{width:104px;height:104px;float:left; border:2px solid #f3c394;border-radius:5px;
		cursor:pointer;margin-left:10px;box-sizing:border-box; }
.optionP:hover{background-color:#5e595a;}

.optionP2{text-align:center;width:220px;margin:auto;color:#f3c394;border:2px solid #f3c394;border-radius:5px;
		cursor:pointer;margin-bottom:4px;margin-top:4px;padding:10px;font-size:18px;}
.optionP2:hover{background-color:#5e595a;}

#flagHolder{width:420px;margin:auto;}
.optionPix{width:130px;height:130px;float:left;   border-radius:5px;
		cursor:pointer;margin-left:5px;margin-right:5px;box-sizing:border-box; }
.optionPix:hover{opacity:.7;}

#fbb{float:right;margin-right:0px;width:0px;margin-top:-5px;}
#fbb2{float:right;margin-right:4px;width:0px;margin-top:5px;}

#smallButtonHolder{margin:auto;width:300px;}

#smb1{font-size:30px;line-height:50px;width:50px;height:50px;background-color:#5e595a;color:white;text-align:center;cursor:pointer;float:left;border-radius:5px;}
#smb2{font-size:30px;line-height:50px;margin-left:75px;width:50px;height:50px;background-color:#5e595a;color:white;text-align:center;cursor:pointer;float:left;border-radius:5px;}
#smb3{font-size:30px;line-height:50px;margin-left:75px;width:50px;height:50px;background-color:#5e595a;color:white;text-align:center;cursor:pointer;float:left;border-radius:5px;}

#smb1:hover{font-size:32px;opacity:.7;}
#smb2:hover{font-size:32px;opacity:.7;}
#smb3:hover{font-size:32px;opacity:.7;}




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

 
#gameArea{width:900px;height:500px;margin:auto;background-color:#fff;margin-top:15px;margin-bottom:10px;}



@media screen and (max-width:900px) {
#gameArea{width:100%;}
#t1{width:50%;}
#t1b{width:50%;}
#t2{width:50%;}
#t3{width:50%;}
}


@media screen and (max-width:830px) {
#flagHolder{width:360px;margin:auto;}
.optionPix{width:110px;height:110px;float:left;   border-radius:5px;
		cursor:pointer;margin-left:5px;margin-right:5px;box-sizing:border-box; }
.optionPix img{width:100%; }

.optionPix:hover{opacity:.7;}
}

@media screen and (max-width:750px) {
#gameArea{width:100%;overflow-y:hidden;}
#t1{width:100%;position:absolute;overflow-y:hidden;height:500px;}
 #t1 img{width:100%; }
#t1b{width:0px;display:none;;}
#t2{width:100%;opacity:.8;}
#t3{width:100%;}
}


@media screen and (max-width:720px) {
#tileHolder{margin:auto;width:640px;}
.th1{width:560px!important;}
.th2{width:480px!important;}
.th3{width:400px!important;}
.tile{width:70px;height:70px;margin-left:5px;margin-right:5px;background-color:#f3c394;box-sizing:border-box;
	font-size:50px;text-align:center;border-radius:4px; border: 3px solid #fdfbcb;float:left;cursor:pointer;}
.tile:hover:{opacity:.8;}
}

@media screen and (max-width:640px) {
#tileHolder{margin:auto;width:512px;}
.th1{width:448px!important;}
.th2{width:384px!important;}
.th3{width:320px!important;}
.tile{width:60px;height:60px;margin-left:2px;margin-right:2px;background-color:#f3c394;box-sizing:border-box;
	font-size:40px;text-align:center;border-radius:4px; border: 3px solid #fdfbcb;float:left;cursor:pointer;}
.tile:hover:{opacity:.8;}
}

@media screen and (max-width:515px) {
#tileHolder{margin:auto;width:432px;}
.th1{width:378px!important;}
.th2{width:324px!important;}
.th3{width:270px!important;}
.tile{width:50px;height:50px;margin-left:2px;margin-right:2px;background-color:#f3c394;box-sizing:border-box;
	font-size:35px;text-align:center;border-radius:4px; border: 3px solid #fdfbcb;float:left;cursor:pointer;}
.tile:hover:{opacity:.8;}
}


@media screen and (max-width:432px) {
#tileHolder{margin:auto;width:352px;}
.th1{width:308px!important;}
.th2{width:264px!important;}
.th3{width:220px!important;}
.tile{width:40px;height:40px;margin-left:2px;margin-right:2px;background-color:#f3c394;box-sizing:border-box;
	font-size:28px;text-align:center;border-radius:4px; border: 3px solid #fdfbcb;float:left;cursor:pointer;}
.tile:hover:{opacity:.8;}
}

@media screen and (max-width:370px) {
#flagHolder{width:315px;margin:auto;}
.optionPix{width:95px;height:95px;float:left;   border-radius:5px;
		cursor:pointer;margin-left:5px;margin-right:5px;box-sizing:border-box; }
.optionPix img{width:100%; }

.optionPix:hover{opacity:.7;}
}

@media screen and (max-width:352px) {
#tileHolder{margin:auto;width:320px;}
.th1{width:280px!important;}
.th2{width:240px!important;}
.th3{width:200px!important;}
.tile{width:36px;height:40px;margin-left:2px;margin-right:2px;background-color:#f3c394;box-sizing:border-box;
	font-size:25px;text-align:center;border-radius:4px; border: 3px solid #fdfbcb;float:left;cursor:pointer;}
.tile:hover:{opacity:.8;}
}


@media screen and (max-width:450px) {
 
 #t1 img{width:100%;height:100%; }
 #banner img{width:100%;}
.fon1a{font-family:Cal,Verdana, Geneva, sans-serif;font-size:50px;text-align:center;color:#f3c394;}
}