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

font-family:Arial, Helvetica, sans-serif;
 background-color:#ffffff;
 background-image:url(bg.png);
 -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}


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

 #blink{width:100%;text-align:center;}

#gameCanvas{-webkit-tap-highlight-color: transparent;}

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

#appArea{text-align:center;min-height:420px;  }
 
#appAreaLarge{text-align:center;width:100%;height:560px;width:540px;margin:auto;margin-top:10px;
border:1px solid #fff;}
#appAreaInner{ background-color:#A0C226; 
height:560px;width:540px;
position:relative;}


#butang1{width:150px;font-size:18px;cursor:pointer;text-align:center;border:3px solid white;padding:5px;margin:auto;background-color:#DAC9AF;border-radius:5px;float:left;margin-left:10%;}
#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:#DAC9AF;border-radius:5px;float:right;margin-right:10%;}
#butang2:hover{opacity:.6;}

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


#logo img{width:60%;}
 
 
 
 #str1{width:80%;margin:auto;text-align:left;}
 .str2{font-size:24px;text-align:center;}
 #strimg{width:230px;height:280px;margin:auto;}
 
 
 #wordHolder{width:256px;height:80px;background-color:#C0D76F;margin:auto;position:relative;top:0px;}
 #letter1{width:60px;margin-left:2px;margin-right:2px;margin-top:5px;float:left;text-align:center;font-size:60px;background-color:#D2E298;color:#333}
 #letter2{width:60px;margin-left:2px;margin-right:2px;margin-top:5px;float:left;text-align:center;font-size:60px;background-color:#D2E298;color:#333}
 #letter3{width:60px;margin-left:2px;margin-right:2px;margin-top:5px;float:left;text-align:center;font-size:60px;background-color:#D2E298;color:#333}
 #letter4{width:60px;margin-left:2px;margin-right:2px;margin-top:5px;float:left;text-align:center;font-size:60px;background-color:#D2E298;color:#333}
 
 
 #prestripHolder{position:absolute;height:50px;width:100%;top:0px;background-color:red;}
 
 #stripHolder{position:relative;height:306px;overflow-y:hidden;margin:auto;width:260px;top:0px;}
 
 .strip{width:65px;text-align:center;height:400px;float:left;}
 
 #strip1{position:absolute;top:-60px;}
  #strip2{position:absolute;top:-60px;left:65px;}
   #strip3{position:absolute;top:-60px;left:130px;}
    #strip4{position:absolute;top:-60px;left:195px;}
 
 .topsquare{width:125px;height:120px;margin:5px;float:left;background-color:#fff;}
 
 .tile{background-image:url(tile.png);background-size: 60px 60px;width:60px;height:60px;font-size:50px;color:#333;border-bottom:1px solid grey;cursor:pointer;}
 
 #arrowHolder{position:relative;height:30px;margin:auto;width:260px;}
 .arrow{width:60px;height:30px;background-image:url(arrow.png);cursor:pointer;float:left;margin-right:5px;}
 
 
 #myTimer{color:#34495E;font-size:35px;position:absolute;right:5px;top:5px;width:80px;height:70px;border-radius:2px;background-color:#C96;background-color:#DAC9AF;border:3px solid white;}
 
 #scoreBox{color:#34495E;font-size:35px;position:absolute;left:5px;top:5px;width:80px;height:70px;border-radius:2px;background-color:#C96;background-color:#DAC9AF;border:3px solid white;}
 
 
 #feedback1{font-size:24px;padding:10px;font-family:tf;color:#333;}
 
  #feedback2{font-size:24px;padding:10px;font-family:tf;color:#333;}
 
 #dotHolder{width:70px;margin:auto;}
#dotHolder2{width:140px;margin:auto;}
.dot{width:10px;height:10px;border-radius:6px;background-color:#34495E;margin-left:2px;margin-right:2px;float:left;}
 
 #littleText{font-size:14px;}

.selectedTile{background-image:url(tile2.png) !important;background-size: 60px 60px !important;width:60px;height:60px;}


#go{width:100%;text-align:center;height:60px;margin-top:30px;}
#go img{width:70%;}

.pw{font-weight:bold;margin-left:4px;margin-right:4px;}

#smallScoreBox{display:none;}

#xscore{font-size:40px;}
#spacer1{height:10px;width:100%;float:none;clear:both;}
#hiScoreTab{border:1px solid grey;padding:2px;width:90%;float:none;clear:both;margin:auto; }

#titleText{margin-top:20px;font-size:18px;}
#titleText2{margin-top:10px;font-size:16px;}
#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;}

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

@media screen and (max-width:550px) {
	#hsarea{width:100%;}
	 #appAreaLarge{width:100%;}
 
	#appAreaInner{background-color:#A0C226;
width:100%;border:none;}
#appAreaLarge{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;}
#logo img{width:70%;}
#hiScoreTab{border:1px solid grey;padding:4px;width:96%;float:none;clear:both;margin:auto;margin-top:15px;font-size:14px;}
}

@media screen and (max-width:450px) {
	#banner img{width:100%;}
	 #butang1{width:120px;font-size:15px;cursor:pointer;text-align:center;border:3px solid white;padding:5px;margin:auto;background-color:#DAC9AF;border-radius:5px;float:left;margin-left:3%;}
#butang1:hover{opacity:.6;}

#butang2{width:120px;font-size:15px;cursor:pointer;text-align:center;border:3px solid white;padding:5px;margin:auto;background-color:#DAC9AF;border-radius:5px;float:right;margin-right:3%;}
#butang2:hover{opacity:.6;}

 #scoreBox{display:none;}
 #myTimer{display:none;}
 
 #smallScoreBox{display:inline-block;height:24px;color:#34495E;background-color:#DAC9AF;width:280px;}
 #ss2{float:left;width:40%;text-align:center;}
 #ss3{float:right:width:40%;text-align:center;}
#xscore{font-size:33px;}
}