body {background-color:#000000;margin:0; padding:0;}

.clockback {background-image: url('../images/clockback.png'); position: absolute; width:800px;height:800px; }
.zombiebody {background-image: url('../images/body.png'); position: absolute; width:117px;height:209px; }
.zombiehead {background-image: url('../images/head.png'); position: absolute; width:84px;height:106px; }
.zombieleft {background-image: url('../images/arm.png'); position: absolute; width:257px;height:41px;-webkit-transition: -webkit-transform 0.5s ease-in;-webkit-transform-origin: 5px 20px;-webkit-transform:rotate(20deg);}
.zombieright {background-image: url('../images/arm.png'); position: absolute; width:257px;height:41px;-webkit-transition: -webkit-transform 0.5s ease-in;-webkit-transform-origin: 5px 20px;-webkit-transform:rotate(120deg);}

	@-webkit-keyframes dance_spin {
      to     { -webkit-transform: rotateY(0deg) }
	  from    { -webkit-transform: rotateY(360deg)}
    }

   @-webkit-keyframes dance_backing_movearound {
      0%      { -webkit-transform: translateZ(-1000px) }
	  50%    { -webkit-transform: translateZ(-500px)}
      100%  { -webkit-transform: translateZ(-1000px)}
    }
	
	@-webkit-keyframes dance_front_movearound {
      0%      { -webkit-transform: translateZ(-800px) }
	  50%    { -webkit-transform: translateZ(-200px)}
      100%  { -webkit-transform: translateZ(-800px)}
    }

	
	@-webkit-keyframes dance_bounce {
      0%{ -webkit-transform: translateY(0px) }
	  50%{ -webkit-transform: translateY(20px)}
      100%   { -webkit-transform: translateY(0px)}
    }
	
	@-webkit-keyframes dance_leftMove {
      0% { -webkit-transform: rotateZ(-20deg)}
      50%   { -webkit-transform: rotateZ(10deg) }
	  100%   { -webkit-transform: rotateZ(-20deg)}
    }
	
	@-webkit-keyframes dance_rightMove {
      0% { -webkit-transform: rotateZ(160deg); }
      30%   { -webkit-transform: rotateZ(200deg); }
	  100%   { -webkit-transform: rotateZ(160deg); }
    }
	
	@-webkit-keyframes fallDead {
      0% { -webkit-transform: rotateX(0deg);opacity:1; }
	  30%   { opacity:1; -webkit-transform: rotateX(80deg); }
	  100%   { opacity:0; }
    }
	
	@-webkit-keyframes shake {
	0% { -webkit-transform: translate(4px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -3px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 5px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-2px, 3px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 4px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(3px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -4px) rotate(-1deg); }
}

#contents {margin: 0px auto;}
.gameField {-webkit-transform-style: preserve-3d;-webkit-perspective-origin: 50% 20%;-webkit-perspective: 500;
height: 100%;
width: 100%;
}
.danceZombieBacking{position: absolute;-webkit-animation: dance_backing_movearound 4s infinite}
.danceZombieFront{position: absolute;-webkit-animation: dance_front_movearound 4s infinite}
.danceZombieMove {-webkit-animation: dance_bounce 0.5s infinite}
.danceZombieRotate {-webkit-animation: dance_spin 5s infinite}
.danceZombieBody{background-image: url('../images/body.png'); position: absolute; width:117px;height:209px; }
.danceZombieHead {background-image: url('../images/head.png'); position: absolute; width:84px;height:106px;-webkit-animation: dance_bounce 0.5s infinite; }
.danceZombieLeft {background-image: url('../images/arm.png'); position: absolute; width:257px;height:41px;-webkit-transform-origin: 5px 20px;-webkit-animation: dance_leftMove 3s linear infinite;}
.danceZombieRight {background-image: url('../images/arm.png'); position: absolute; width:257px;height:41px;-webkit-transform-origin: 5px 20px;-webkit-animation: dance_rightMove 2s linear infinite;}


.gameZombie {position: absolute;-webkit-transform: translate3d(0px,0px,-800px);}
.gameZombieMove {-webkit-animation: shake 3s infinite;-webkit-transform-origin: 0px 300px;}
.gameZombieRotate {-webkit-animation: dance_spin 5s infinite}
.gameZombieBody{background-image: url('../images/body.png'); position: absolute; width:117px;height:209px; }
.gameZombieHead {background-image: url('../images/head.png'); position: absolute; width:84px;height:106px;-webkit-animation: shake 2s infinite; }
.gameZombieHead:hover {border: 1px solid #fff;}
.gameZombieLeft {background-image: url('../images/arm.png'); position: absolute; width:257px;height:41px;-webkit-transform-origin: 5px 20px;-webkit-animation: dance_leftMove 3s linear infinite;}
.gameZombieRight {background-image: url('../images/arm.png'); position: absolute; width:257px;height:41px;-webkit-transform-origin: 5px 20px;-webkit-animation: dance_rightMove 2s linear infinite;}
.gameZombieLeft:hover {border: 1px solid #fff;}
.gameZombieRight:hover {border: 1px solid #fff;}
.gameZombieFallDead{-webkit-transform-origin: 0px 300px;-webkit-transform:rotateX(80deg);opacity:0;-webkit-animation: fallDead 3s ;}

.ammoBox {position:absolute;top:5px; left:5px; height:25px; width: 85px; border:1px solid #990000;padding:5px;}
.shell{float:left; height:20px;width:10px;background-color:#990000;margin:2px;}
