html, body { height:100%; }
body {
	padding:0; margin:0; border:0;
}

body {
	background:#999;
	font-family:helvetica;
}

#stage {
	position:absolute;
	top:50%; left:50%;
	width:700px; height:700px;
	margin-top:-350px; margin-left:-350px;
	-webkit-border-radius:8px;
	background:#fff;
}

#popup {
	display:none;
	position:absolute; z-index:1000;
	width:600px; height:100px; line-height:100px;
	top:50%; left:50%;
	margin-left:-300px; margin-top:-50px;
	-webkit-border-radius:10px;
	background:rgba(0,0,0,0.5);
	color:#fff;
	text-align:center;
}

.ball {
	position:absolute;
	top:0; left:0;
	width:40px;
	height:40px;
	-webkit-border-radius:20px;
	-webkit-box-shadow:2px 2px 6px rgba(0,0,0,0.3);
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-timing-function:linear;
	-webkit-transition-duration:0;
	-webkit-transform:translate3d(0,0,0);
}

.player {
	z-index:100;
	background-color:#c30;
	background-image:-webkit-gradient(radial, 15 15, 0, 15 15, 40, from(rgba(255,60,60,1)), color-stop(0.1, rgba(255,60,60,1)), to(rgba(20,0,0,1)));
}

.opponent {
	z-index:10;
	background-color:#ccc;
	background-image:-webkit-gradient(radial, 15 15, 0, 15 15, 40, from(rgba(250,250,250,1)), color-stop(0.1, rgba(250,250,250,1)), to(rgba(20,20,20,1)));
}