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


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

.scText{color:#39f;}
.scText2{color:#666;font-size:20px;}

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


#t4{position:relative;top:-75px;}
.tileFrame{height:70px;}

#displayHolder{width:100%;height:40px;background-color:#22ADC2;color:#FFF;position:relative;top:0px;padding-top:10px;}
#score{float:left;margin-left:10px;}
#round{width:100%;text-align:center;}
#lives{float:right;margin-right:10px;}

#feedbackHolder{float:none;clear:both;width:150px;margin:auto;text-align:center;color:#090;}
#optionHolder{float:none;clear:both;width:150px;margin:auto;}
#op1{cursor:pointer;}
#op2{cursor:pointer;}

 
#banner{text-align:center;margin:auto;}
#content{width:100%;margin:auto;text-align:center;}
#navSpace{background-color:#FF9900;width:100px;text-align:center;padding:10px;cursor:pointer;border-radius: 0px 0px 10px 0px;}
#navSpace:hover{background-color:#FFCC66;}

#strucSpace{padding:10px;font-family:Arial, Helvetica, sans-serif;color:#333;}

#spacer1{height:10px;}
#spacer2{height:0px;}
#uber{overflow:hidden;width:798px;margin:auto;height:400px;border:solid white 1px;background-color:#F3F3F3;}
#uberold{overflow:hidden;width:800px;margin:auto;height:400px;border:solid white 1px;background-image:url('bgtile.png');}
#gameArea{width:800px;margin:auto;height:400px;font-family:Mandatory,Arial;color:white;position:relative;}
#pauseArea{color:white;}

#title1{text-align:center;font-size:70px;margin-top:50px;color:#22ADC2;}
#title2{text-align:center;font-size:20px;margin-top:30px;cursor:pointer;color:#22ADC2;}
#title2:hover{color:#CCC;}
#title3{text-align:center;font-size:20px;margin-top:10px;cursor:pointer;color:#22ADC2;}
#title3:hover{color:#CCC;}
#title4{text-align:center;font-size:20px;margin-top:10px;color:#22ADC2;}
#title5{text-align:center;font-size:20px;margin-top:50px;cursor:pointer;color:#22ADC2;}
#title5:hover{color:#CCC;}
#title6{text-align:center;font-size:50px;margin-top:150px;font-family:Mandatory,Arial;cursor:pointer;color:#22ADC2;}
#scoreHolder1{text-align:center;font-size:16px;margin-top:70px;width:100%;}
#title2x{text-align:center;font-size:20px;margin-top:30px;color:#22ADC2;}

.tileHolder{width:375px;margin:auto;font-size:40px;text-align:center;}
.tileHolder2{width:450px;margin:auto;font-size:40px;text-align:center;}
.tileFrame{position:relative;float:left;padding:5px;width:65px;}
.tileFrameo{height:70px;position:relative;float:left;padding:5px;width:65px;}
 

.lettero{position:absolute;top:10px;width:90%;}
.letter{font-size:36px;width:100%;margin:auto;text-align:center;}
.letter2{font-size:36px;width:100%;margin:auto;text-align:center;}

 

#timerHolder{ width:20%;margin:auto;position:relative;padding-top:49px;position:relative;}
#timer1{float:left;padding:4px;width:20px;}
#timer2{float:left;}
#timer3{height:1px;background-color:#333;width:100%;}

#feedback{width:600px;;margin:auto;margin-top:25px;height:60px;text-align:center;font-size:40px;color:#22ADC2; }

#hiScoreTab{position:absolute;text-align:center;width:100%; bottom:100px;}

#pauseButton1{position:absolute;bottom:10px;width:100%;}
#pauseButton2{width:90px;border-radius:3px;color:#FFF;background-color:#22ADC2;font-size:18px;text-align:center;padding:5px;margin:auto;cursor:pointer;}
.pauseButton3{width:110px;border-radius:3px;color:#FFF;background-color:#22ADC2;font-size:16px;text-align:center;padding:5px;margin:auto;cursor:pointer;}
#pauseButton2:hover{opacity:.5;}
.pauseButton3:hover{opacity:.5;}
#hsarea{width:100%; }
#hsareains{margin:auto;width:800px;text-align:center;padding-top:5px;padding-bottom:5px;background-color:#22ADC2;font-family:Arial, Helvetica, sans-serif;color:#333;}
.gop3{margin:auto;width:90%;text-align:center;padding-top:10px;font-size:30px;margin-bottom:10px;color:#333;}
.gop4{margin:auto;width:170px;text-align:left;padding-top:3px;font-size:14px;color:#333;}
.gop4 a:hover, a:visited, a:link, a:active{
    text-decoration: none;
	color:#333;
}
.gop33{margin:auto;width:90%;text-align:center;padding-top:10px;font-size:30px;margin-bottom:10px;color:#333;}
.gop33 a:hover, a:visited, a:link, a:active{
    text-decoration: none;
	color:#333;
}
#gameArea a:hover, a:visited, a:link, a:active{
    text-decoration: none;
	 
}


#nameInput{border:2px #69F solid; border-radius:3px;padding:10px;width:200px;text-align:center;font-size:18px;margin:auto;}
#ipHolder{width:200px;margin:auto;margin-top:30px;margin-bottom:30px;}

#butang1{width:150px;margin:auto;margin-bottom:15px;padding:5px;text-align:center;border:1px solid grey;border-radius:5px;cursor:pointer;color:#999;}
#butang1:hover{opacity:.6;}
#ad{margin-top:10px;}

#c1{cursor:pointer;}
#c2{cursor:pointer;}

@media screen and (max-width:800px) {
#uber{width:99%;}
#gameArea{width:100%;}
#feedback{width:100%;font-size:30px;}
#hsareains{width:100%;}
}

@media screen and (max-width:530px) {
#timerHolder{ width:40%;margin:auto;position:relative;padding-top:49px;position:relative;}	

.tileHolder{width:220px;margin:auto;}
.tileHolder2{width:264px;margin:auto;}
.tileFrame{position:relative;float:left;padding:2px;width:40px;height:40px; }
.tileFrameo{position:relative;float:left;padding:5px;margin:2px;width:60px;height:60px; }
#optionHolder{float:none;clear:both;width:148px;margin:auto;}
.lettero{top:10%;}
.letter{font-size:25px;}
.letter2{margin-top:5px;}
 
.tileFrame img{width:100%;float:left;}
#title6{text-align:center;font-size:40px;}
#strucSpace img{width:100%;height:auto;}
#hiScoreTab{font-size:12px;font-family:Arial, Helvetica, sans-serif;}
#t4{position:relative;top:-40px;}
.gop3{padding-top:30px;font-size:20px;margin-bottom:20px;}
.gop33{padding-top:30px;font-size:20px;margin-bottom:20px;}
}


@media screen and (max-width:450px) {
	#banner img{width:100%;}
	#banner {height:auto;}
	 
}