@import "mbar.css";
body {
   margin: 0;
   padding: 0;
   background: #EEE;
   color: #ff9900;
}
.headerbg {
    background-image:url('./wir/wallboard1.jpg');
		background-size: 25%;
    width:100%;
    height:200px;
    padding:0px;
    border:0px solid gray;
margin:0px; 
}
.title {
background:url('./wir/Wurmopolis Title_y.png');
background-repeat:no-repeat;
width:360px;
height:120px;
padding:0px;
border:0px solid gray;
margin:0px; 
}
.mbar {
background:url('');
background-repeat:no-repeat;
background-color: #000000;
width:100%;
height:24px;
padding:0px;
border:0px solid gray;
margin:0px; 
}

.wrap {
   overflow: hidden;
   margin: 10px;
}
.box {
   float: left;
   position: relative;
   width: 330px;
   padding-bottom: 190px;
}
.boxInner {
   position: absolute;
   left: 10px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 320px;
	 heigth: 180px;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
   font: 10px/13px 'Lucida Sans',sans-serif;
}

body.no-touch .boxInner:hover .titleBox, body.touch .mbar.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 0;
}