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

font-family:Arial, Helvetica, sans-serif;
 background-color:#F4f4f4;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

}

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



#hiScoreTab{margin-top:50px;text-align:center;color:#efefef;}
#titleText{margin-top:20px;font-size:28px;text-align:center;color:#efefef;}
#titleText2{margin-top:10px;font-size:26px;text-align:center;color:#efefef;}
#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;color:#efefef;}
#hsbutang:hover{opacity:.7;color:#efefef;}
#feedbackBox1{width:100%;text-align:center;font-size:35px;color:#efefef;}
#feedbackBox2{width:100%;text-align:center;height:80px;color:#efefef;}
#feedbackBox3{width:100%;text-align:center;font-size:25px;color:#fff;}
#feedbackBox4{width:100%;text-align:center;color:#efefef;}











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


.blackout{opacity:.3;}

 
#appAreaLarge{width:100%;height:550px;width:900px;margin:auto;margin-top:10px;
border:10px solid #fff;}
#appAreaInner{ background-color:#38445c;
height:550px;width:900px;}


.structions{padding-right:20px;padding-left:20px;text-align:center;color:#efefef;font-size:20px;}
#structionsPane{min-height:280px;}


#butangArea{width:320px;margin:auto;}

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

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

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

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

  #promo{text-align:center;}



#logo{text-align:center;}
#logo img{width:450px;}






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

.square{width:75px;height:75px;float:left;position:relative;}
.square img{width:75px;}
 

.activesquare{cursor:pointer;}
.activesquare:hover{opacity:.7;}

.letter{position:absolute;top:0px;left:0px;width:75px;height:75px;text-align:center;line-height:75px;font-size:35px;color:#efefef;}

.stem{position:absolute;top:0px;left:0px;width:60px;height:60px;}


.spesh{position:absolute;top:0px;left:0px;width:60px;height:60px;}

#panel{width:320px;margin:auto;height:41px;padding-top:3px;}

#timerx{width:320px;margin:auto;height:2px; }
#timerxinner{width:100%;float:left;height:2px;background-color:#efefef;}

.blank{width:33px;height:36px;margin:1px;background-color:#6d7587;float:left;color:#efefef;text-align:center;font-size:32px;line-height:36px;}





#lumessage{text-align:center;color:#efefef;margin-top:40px;font-size:30px;}
#lumessage2{text-align:center;color:#efefef;font-size:30px;}

#bonus1{padding:5px;text-align:center;width:220px;font-size:24px;color:#efefef;background-color:#F2784B;margin:auto;}
#bonus2{padding:5px;text-align:center;width:220px;font-size:24px;color:#efefef;background-color:#913D88;margin:auto;}
#bonus3{padding:5px;text-align:center;width:220px;font-size:24px;color:#efefef;background-color:#C0392B;margin:auto;}
#bonus4{padding:5px;text-align:center;width:220px;font-size:24px;color:#efefef;background-color:#F9690E;margin:auto;}


#scorePanel{width:400px;margin:auto;padding-top:15px;height:35px;color:#efefef;text-align:center;}
#scoreBox{float:left;width:150px;text-align:center;background-color:#6BB9F0;color:#efefef;border-radius:0px 0px 3px 3px;}
#levelBox{float:right;width:150px;text-align:center;background-color:#6BB9F0;color:#efefef;border-radius:0px 0px 3px 3px;}


#GO1{text-align:center;padding-right:30px;padding-left:30px;padding-top:40px;font-size:55px;color:#efefef;}
#GO2{text-align:center;padding-right:30px;padding-left:30pxmargin-top:20px;font-size:25px;color:#efefef;}
.GO3{text-align:center;padding-right:30px;padding-left:30px;color:#efefef;}



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

.letter{position:absolute;top:0px;left:0px;width:60px;height:60px;text-align:center;line-height:60px;font-size:30px;color:#efefef;}

	 #appAreaLarge{width:100%;}
 
	#appAreaInner{ height:560px;width:100%;border:none;}
#appAreaLarge{border:none;height:500px;}

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

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







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


	
	 #appAreaLarge{width:100%;}
 
	#appAreaInner{ height:560px;width:100%;border:none;}
#appAreaLarge{border:none;}
#logo img{width:90%;}
 #scorePanel{width:320px;margin:auto;height:20px;}

}