body{margin:0px;padding:0px;
background-color:#f4f4f4;
 -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'); 
    }


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

#banner1{text-align:center;border-bottom:1px solid white;background-color:grey;}
#banner2{display:none;}


#content{width:100%;margin:auto;text-align:center;}
#navSpace{background-color:#3d7ba7;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;}

#spacer1{height:10px;}
#spacer2{height:50px;}
#uber{overflow:hidden;width:800px;margin:auto;height:400px;border:solid white 1px;background-color:#3d7ba7;}
#gameArea{width:800px;margin:auto;height:400px;font-family:Mandatory,Arial; 
color:white;position:relative;
}
#pauseArea{color:white;}

#struct1{text-align:center;}
#struct1 img{width:400px;}

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


#tileHolder{width:600px;margin:auto;background-color:#009900;}
.tileFrame{position:relative;float:right;padding:5px;cursor:pointer;width:65px;}
 

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


#pauseButton{text-align:center;  font-size:22px;border-radius:4px;width:50px;margin:auto;color:#fee55a;cursor:pointer;margin-top:35px;}
#pauseButton:hover{opacity:.5;}

#timerHolder{ width:70%;margin:auto;position:relative;padding-top:9px}
#timer1{float:left;padding:4px;width:20px;}
#timer2{float:left;}
#timer3{height:1px;background-color:#CCCCCC;width:50%;float:left;margin-top:15px;margin-left:10px;}

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

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



a {
 color:white;
  text-decoration: none; /* no underline */
}



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

@media screen and (max-width:630px) {
#tileHolder{width:352px;}
.tileFrame{position:relative;float:right;padding:2px;cursor:pointer;width:50px;height:50px;line-height: 36px;}
.lettero{top:10%;}
.letter{font-size:25px;}
.tileFrame img{width:100%;}
#title6{text-align:center;font-size:40px;}
#strucSpace img{width:100%;height:auto;}
#hiScoreTab{font-size:12px;font-family:Arial, Helvetica, sans-serif;}
}




@media screen and (max-width:360px) {
#tileHolder{width:312px;}
.tileFrame{position:relative;float:right;padding:2px;cursor:pointer;width:40px;height:40px;line-height: 30px;}
.lettero{top:10%;}
.letter{font-size:25px;}
.tileFrame img{width:100%;}
#title6{text-align:center;font-size:30px;}
}



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

#banner1{display:none;}
#banner2{display:block;text-align:center;border-bottom:1px solid white;background-color:grey;color:white;font-family:Mandatory,Arial;font-size:20px;}
#struct1 img{width:320px;}
}