body{
background-color:#333333;
margin-top:0;
font-family:Arial,Courier;
}
a{
text-decoration:none;
color:#777777;
}
a:hover{
color:#FFFFFF;
}
.contentWrap{
width:75%;
min-width:750px;
position:relative;
margin:0px auto;
padding:10px 0 2px 0;
background-color:#2A2A2A;
vertical-align:top;

-moz-box-shadow: 1px 1px 7px 5px #222;
-webkit-box-shadow: 1px 1px 7px 5px #222;
box-shadow: 1px 1px 7px 5px #222;
}
.header{
height:200px;
}
.header h1{
margin:auto;
text-align:center;
color:#FFFFFF;
}
.menuWrap{
display:inline-block;
}
.menuWrap ul{
margin:0;
padding:0;
list-style-type:none;
}
.menuItem{
width:120px;
height:120px;
margin:5px;
background-color:#008800;

border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;

color:#FFFFFF;
vertical-align:bottom;
}
.menuItem:hover img{
opacity:0.6;
filter:alpha(opacity=60);
}
.menuItem img{
margin:0.5em 26px 0 26px;
height:70px;
width:70px;
border:none;

opacity:0.4;
filter:alpha(opacity=40);
}
.menuItem h1{
font-size:0.9em;
font-weight:bold;
text-transform:uppercase;
text-align:center;
margin:0.1em 0;
}
.menuItem h2{
font-size:0.7em;
font-variant:small-caps;
text-align:center;
margin:0.2em 0;
}

.m1{
border:1px solid #228800;
background: -webkit-gradient(linear, center top, right bottom, from(#22AA00), to(#227700));
}
.m1:hover{
border:1px solid #22AA00;
background: -webkit-gradient(linear, center top, right bottom, from(#22CC00), to(#228800));
}
.m2{
border:1px solid #669900;
background: -webkit-gradient(linear, center top, right bottom, from(#66CC00), to(#668800));
}
.m2:hover{
border:1px solid #66CC00;
background: -webkit-gradient(linear, center top, right bottom, from(#66EE00), to(#669900));
}
.m3{
border:1px solid #AA9900;
background: -webkit-gradient(linear, center top, right bottom, from(#AACC00), to(#AA8800));
}
.m3:hover{
border:1px solid #AACC00;
background: -webkit-gradient(linear, center top, right bottom, from(#AAEE00), to(#AA9900));
}

.m4{
border:1px solid #FF9900;
background: -webkit-gradient(linear, center top, right bottom, from(#FFDD00), to(#FF8800));
}
.m4:hover{
border:1px solid #FFDD00;
background: -webkit-gradient(linear, center top, right bottom, from(#FFEE00), to(#FF9900));
}
.m5{
border:1px solid #FF7700;
background: -webkit-gradient(linear, center top, right bottom, from(#FFAA00), to(#FF6600));
}
.m5:hover{
border:1px solid #FFAA00;
background: -webkit-gradient(linear, center top, right bottom, from(#FFCC00), to(#FF7700));
}
.m6{
border:1px solid #FF5500;
background: -webkit-gradient(linear, center top, right bottom, from(#FF8800), to(#FF3300));
}
.m6:hover{
border:1px solid #FF8800;
background: -webkit-gradient(linear, center top, right bottom, from(#FFAA00), to(#FF5500));
}

.mainContent{
display:inline-block;
width:calc(100% - 292px);
background-color:#222222;
vertical-align:top;
margin:10px 0;
padding:5px 10px;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;

color:#BBBBBB;
}
.mainContent h2{
text-transform:uppercase;
color:#CDCDCD;
}
.mainContent .dark{
color:#777777;
}

.footer{
width:90%;
background-color:#222222;
vertical-align:top;
text-align:right;
margin:6px auto;
padding:0.25em 1.0em;
font-size:0.8em;
color:#888888;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
}

.menuR{
display:inline-block;
right:0px;
position:absolute;
}
.menuL{
display:inline-block;
position:relative;
left:0px;
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
 .menuItem{
  width:80px;
  height:80px;
  margin:5px;
  background-color:#008800;
  display:inline-block;

  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;

  color:#FFFFFF;
  vertical-align:bottom;
 }
 .menuItem img{
  margin:5px 5px 0 5px;
  height:70px;
  width:70px;
  border:none;

  opacity:0.4;
  filter:alpha(opacity=40);
 }
 .menuItem h1{
  position:relative;
  top:-40px;
  font-size:0.9em;
  font-weight:bold;
  text-align:center;
  margin:0.1em 0;
 }
 .menuItem h2{
  display:none;
 }
 .menuWrap{
  display:block;
 }

 .header{
  height:100px;
 }
 .contentWrap{
  min-width:300px;
 }
 .mainContent{
  display:block;
  width:90%;
  margin:10px 3%;
 }
 .menuR{
  position:relative;
 }

}