body{margin:0px;padding:0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background-color:#EEEFF1;
background-image:url('sos.png');
}


#topbar{height:30px;background-color:#80C1C3;}
#qbar{height:15px;background-color:#80C1C3;}
#midbar{height:70px;}
#midbarins{width:1000px;margin:auto;}
#midbarins img{width:238px;margin-left:10px;}
#bottombar{min-height:400px;background-color:#80C1C3;}
#bottombar2{height:auto;background-color:#80C1C3;}
#logo2 img{float:right;padding:10px;}
#logo3 img{float:right;padding:30px;}
#bottombarins{width:1000px;margin:auto;font-family:Montserrat;}

#title1{color:#fff;font-size:30px;font-family:Montserrat;padding-top:20px;}
#title1a{color:#fff;font-size:30px;font-family:Montserrat;padding-top:20px;}
#title2{color:#fff;font-size:20px;font-family:Montserrat;margin-top:10px;}
#title3{color:#FDE3A7;margin-top:10px;}
#title3a{color:#FDE3A7;margin-top:10px;}


#butang1{font-size:18px;color:#fff;width:140px;text-align:center;cursor:pointer;border-radius:3px;background-color:#88B03C;border:2px solid white;margin-top:20px;}
#butang1:hover{opacity:.6;}
#butang2{font-size:18px;color:#fff;width:140px;text-align:center;cursor:pointer;border-radius:3px;background-color:#88B03C;border:2px solid white;margin-top:20px;}
#butang2:hover{opacity:.6;}

.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;}


#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;}

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

#butang3{float:none;clear:both;color:#fff;width:140px;text-align:center;cursor:pointer;border-radius:3px;background-color:#88B03C;border:2px solid white;margin-top:20px;font-size:18px;}
#butang3:hover{opacity:.6;}

#uberTileHolder{width:216px;float:left;}
.tileHolder{width:50px;float:left;margin-left:4px;position:relative;cursor:pointer;}


.lettertext{position:absolute;color:#fff;font-size:38px;font-family:Montserrat;top:0px;left:8px;}


.spacer40{width:100%;height:40px;}

#tinytileHolder{width:320px;float:left;margin-left:100px;opacity:.2;text-align:center;height:40px;}
#tinytileHolder img{width:150px;}
.tinytile{width:36px;height:36px;background-color:#F4B350;color:#FFF;margin:2px;float:left;text-align:center;cursor:pointer;font-size:27px;font-family:Montserrat;}

#feedbackHolder{clear:both;float:none;margin-top:50px;color:#FFF;}

#levelMessage1{color:#FFF;font-size:30px;}
#levelMessage2{color:#FFF;font-size:20px;}
#levelMessage3{color:#FFF;font-size:20px;}

#controlBox{margin-right:10px;width:200px;height:150px;border:1px solid white;background-color:#80C1CF;float:right;margin-top:95px;text-align:center;color:#fff;}

#turnsBox{background-color:#F9BF3B;text-align:center;width:60px;height:60px;font-size:50px;margin:auto;margin-top:20px;}

.yellow{color:#FDE3A7;}

#clearme{float:none;clear:both;}

#qbutton{float:right;margin-right:2px;font-size:12px;font-family:Montserrat;color:#fff;cursor:pointer;}
#qbutton:hover{background-color:#999;}

#hsarea{width:100%;text-align:center;margin:auto;margin-top:5px;margin-bottom:15px;}

#gameArea{margin-left:100px;margin-right:100px;background-color:#FFF; min-height:400px;padding:20px;font-family:Montserrat;}

#pauseButton1{margin:auto;text-align:center;border:1px solid grey; border-radius:4px;width:150px;cursor:pointer;padding:8px;margin-top:10px;}
#pauseButton1:hover{opacity:.6;}


@media screen and (max-width:1000px){
#midbarins{width:100%;}
#bottombarins{width:auto;padding-left:20px;padding-right:20px;}
}



@media screen and (max-width:900px){
#tinytileHolder{float:none;clear:both;margin-left:10px;}
#controlBox{height:150px;margin-right:10px;margin-top:10px;}
#tinytileHolder img{display:none;}
.leftist{text-align:left;width:190px !important;}
}


@media screen and (max-width:750px){
#logo2xx{display:none;}
#logo3 img{width:180px;}
#gameArea{margin-left:50px;margin-right:50px;}
.gop3{padding-top:30px;font-size:20px;margin-bottom:20px;}
}




@media screen and (max-width:499px){
#logo2 img{display:none;}
#controlBox{height:87px;margin:auto;width:auto;float:none;}
#turnsBox{width:40px;height:40px;font-size:30px;margin:auto;margin-top:5px;}
#title1{width:auto;margin-left:10px;margin-right:10px;text-align:center;}
#title2{width:auto;margin-left:10px;margin-right:10px;text-align:center;}
#title3{width:auto;margin-left:10px;margin-right:10px;text-align:center;}
#title3a{width:auto;margin-left:10px;margin-right:10px;}
#title1a{font-size:24px;text-align:center;}
.spacer40{height:20px;}
#uberTileHolder{float:none;margin:auto;}
#tinytileHolder{width:306px;float:none;margin:auto;}
#bottombarins{width:auto;padding-left:0px;padding-right:0px;}
#butang1{margin:auto;margin-top:20px;}
#butang2{margin:auto;margin-top:20px;}
#logo2 img{width:auto;padding:30px;}
#midbarins {text-align:center;}
#midbarins img{width:238px;margin:auto;}
#butang3{margin:auto;margin-top:0px;}
#feedbackHolder{text-align:center;}
#gameArea{margin-left:20px;margin-right:20px;
}


@media screen and (max-width:360px){
#tinytileHolder{width:306px;}
}

@media screen and (max-width:330px){
#logo3 img {text-align:center;float:none;display:none;}
}