html, body { 
	margin: 0; 
	padding: 0;
	font-family: "Arial";
}

body {
	background: #772222;
	background-image: url('../img/bg_normal_tile.png');
	overflow: hidden;
}

#resources {
	display: none;
	overflow: hidden;
}

#canvasContainer { 
	width: 800px;
	margin: 0 auto; 
	display: block;
	position: relative; 
	top: 0px;
	left:0px
}
table { color: #cc4444; }
#scoreDialog {
	width: 180px;
	height: 250px;
	position: absolute;
	top: 100px;
	left: 280px;
	padding: 20px;
	text-align:center;
	color: #cc4444;
}

.bar {
	border-radius: 8px;
}
.player {	
	background-image: url('../img/energy_bg_cell.png');
	background-repeat: none;
}

.host {	
	background-image: url('../img/energy_bg_host.png');
	background-repeat: none;
}

.meat {
	position: absolute;
	background-image: url('../img/front-tile.png');
	width: 400px;
	height: 400px;
}
 
@-webkit-keyframes beatleft {
  from {
      margin-left: 10px;
  }
 
  to {
    margin-left: 0px;
  }
}

@-webkit-keyframes beatright {
  from {
      margin-right: 10px;
  }
 
  to {
    margin-right: 0px;
  }
}
@-webkit-keyframes beatbottom {
  from {
      margin-top: 10px;
  }
 
  to {
    margin-top: 0px;
  }
}

.beatbottom {
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 2s;
	-webkit-animation-duration: 2.5s;
    -webkit-animation-name: beatbottom;
}
.beatbottomFast {
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 2s;
	-webkit-animation-duration: 0.5s;
    -webkit-animation-name: beatbottom;
}
.beatleft {
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 2s;
	-webkit-animation-duration: 2.5s;
    -webkit-animation-name: beatleft;
}
.beatleftFast {
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 2s;
	-webkit-animation-duration: 0.5s;
    -webkit-animation-name: beatleft;
}

.beatright  {
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 2s;
	-webkit-animation-duration: 2.5s;
    -webkit-animation-name: beatright;
}
.beatrightFast  {
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 2s;
	-webkit-animation-duration: 0.5s;
    -webkit-animation-name: beatright;
}

.west {
	top: -80px;
	left: -320px;
	overflow: hidden;
}
.east {
	top: -80px;
	right: -320px;
	height: 400px;
	overflow: hidden;
}
.south {
	bottom: -270px;
	left: 230px;
	overflow: hidden;
}
.southwest {
	bottom: -30px;
	left: -280px;
	overflow: hidden;
}
.southeast {
	bottom: -75px;
	right: -280px;
	overflow: hidden;
}

.southsouthwest {
	bottom: -230px;
	left: -80px;
	overflow: hidden;
}
.southsoutheast {
	bottom: -230px;
	right: -80px;
	overflow: hidden;
}