@charset "utf-8";
/* CSS Document */
html, body {
   margin: 0;
   padding: 0;
}

#game-canvas {
   background-image:url(../images/bg.jpg);
   background-repeat: repeat;
   display: block;
}

#game {
   width: 480px;
   height: 320px;
   border: 1px solid black;
   margin: auto;
   position: relative;
   overflow: hidden;
}

#hud {
   position: absolute;
   top: 0;
   left: 0;
   color: #ac1000;
   background: #efefef;
   padding: 0 10px;
   background: url(../images/hud.png) no-repeat;
   width: 110px;
   height: 32px;
}

#hud #next-count {
	display:block
   width: 100%;
   height: 20px;
   text-align: center;
}

#gameover {
   position: absolute;
   top: -320px;
   left: 0;
   width: 480px;
   height: 270px;
   background: white;
   text-align: center;
   padding-top: 50px;
   font-size: 2em;
   background: white url(../images/gameover.png);
}

#gameover.gameover-appear { 
   top: 0;
   -webkit-transition: top .3s ease-out;
   -moz-transition: top .3s ease-out;
   transition: top .3s ease-out;
}
#game-time {
   display: block;
   margin: 60px auto 0 auto;	
}
#game-score {
	display: block;
	margin: 0 auto 0 auto;
}
#restart-button {
   display: block;
   margin: 0 auto 0 auto;
   background: url(../images/restart-button.png);
   
   width: 160px;
   height: 67px;
}

#restart-button:active {
	background-position: 0 -67px;
}