body{
padding:0;
margin:0;
font: 16px/1.5 Futura, Helvetica, sans-serif;
background-image:url("../img/bg.png");
}

header{
position:absolute;
z-index:-1;
top:1%;
padding:2%;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg); /* IE 9 */
-webkit-transform: rotate(-5deg); /* Safari and Chrome */
-o-transform: rotate(-5deg); /* Opera */
-moz-transform: rotate(-5deg); /* Firefox */
height:30px;
}

#field{
width:60%;
height:180px;
min-width:570px;
max-width:620px;
margin:15% auto 5% auto;
padding:0;
z-index:1;
}

#canvasContainer{
background-image:url("../img/bgtile.png");
border:solid #222 8px;
width:416px;
height:216px;
padding:0;
margin:0;
float:left;
}

#gamecanvas{
position:absolute;
border:dotted #222 8px;
transition:2s;
-moz-transition:2s;
-webkit-transition:2s;
-o-transition:2s; 
}

#debugcanvas{
position:absolute;
border:solid #85B888 8px;
opacity:0.0;
}

#gameprogress{
padding:0;
margin:0;
width:9%;
min-width:100px;
float:right;
color:#FFF;
background-color:#222;
padding:1em;
-webkit-border-radius:15px;
-moz-border-radius:15px;
}

.sidediv{
float:left;
color:#222;
background-color:#FFF;
width:90px;
text-align:center;
margin:2px;
}

#healthbars{
width:100px;
height:40px;
padding:0;
margin:0;
float:left;
}
#healthbartop, #healthbar{
position:absolute;
}

@media screen and (max-width:610px) {
.sidediv{
float:right;
}
#help{
margin:-5px 0;
}
#field{
margin:90px 2%;
max-width:300px;
}
}



#menuscreen{
z-index:2;
position:absolute;
width:200px;
padding:auto;
width:410px;
height:20px;
clear:both;
height:130px;
vertical-align: middle;
text-align:center;
}

.gamebutton{
font-size:0.8em;
display:inline-block;
text-decoration:none;
text-align:center;
color:#fff;
background-color:#dd5454;
border:2px solid #dd5454;
-webkit-border-radius:9px;
-moz-border-radius:9px;
}

.gamebutton:hover{
color:#dd5454;
background-color:#FFF;
border:2px solid #FFF;
-webkit-border-radius:2px;
-moz-border-radius:2px;
}

.gamebutton, .gamebutton:hover, header{
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition:1s; 
}

footer{
text-align:center;
background-color:#333;
color:#FFF;
}

#borders{
position:absolute;
border:8px #333 solid;
width:400px;
height:200px;
}

.pres{
margin:0 2%;
width:95%;
padding:0;
width:100%
text-align:center;
}



a, a:hover, a:visited{
color:#FFF;
text-decoration:none;
}

a:hover{
color:#222;}