body {
    height: 100%;
    margin:0px;
    padding:400px;
}

#table {
	width: 800px;
	height: 400px;
	transform : translateZ(0);
	/*background-color: darkgreen;*/
	background-image: url("billiard-table.png");
	background-size: 800px 400px;
	overflow: hidden;
    margin:0px;
    padding:0px;
}
#table_inner {
	border:0px solid red;
	width: 714px;
	height: 322px;
	margin-top: 39px;
	margin-left: 43px;
	background: none;
}
#meter {
	display: none;
	height: 10px;
	width: 270px;
	position: absolute;
	top: 3px;
	left: 80px;
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 8px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
#meter > span {
	display: block;
	height: 100%;
	width: 0px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	background-color: #f0a3a3;
  	background-image: linear-gradient(to bottom, #f00, #f42323);
  	box-shadow: 
	    inset 0 2px 9px  rgba(255,255,255,0.3),
	    inset 0 -2px 6px rgba(0,0,0,0.4);
  	position: relative;
  	overflow: hidden;
}
#meter > span:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-image: linear-gradient(
    	-45deg, 
    	rgba(255, 255, 255, .2) 25%, 
    	transparent 25%, 
    	transparent 50%, 
    	rgba(255, 255, 255, .2) 50%, 
    	rgba(255, 255, 255, .2) 75%, 
    	transparent 75%, 
    	transparent
	);
	z-index: 1;
	background-size: 50px 50px;
	animation: move 2s linear infinite;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	overflow: hidden;
}
#cue {
	display: block;
	position: absolute;
	top: 500px;
	left: 600px;
	z-index: 103;
	transform-origin: -4% 50%;


}

#end_game_layer {
	width: 300px;
	height: 100px;
	text-align: center;
	margin: auto;
	/*background-color: white;*/
	background:radial-gradient(circle at 150px 30px, #0F0, #0FF);
	border: 2px solid white;
	border-radius: 50px;
	position: relative;
	top: 100px;
	z-index: 100;
	box-shadow: -5px -5px 1px 1px rgba(0,0,0,0.3)
}
#end_game_layer span {
	font-size: 25px;
	font-weight: bold;
	/*font-family: fantasy;*/
	line-height: 40px;
	position: relative;
	top: 15px;
	color: darkorchid;
}
#end_game_layer button {
	position: relative;
	z-index: 101;
}

.ball {
    transition: transform linear;
	-webkit-transition: -webkit-transform linear;
    -moz-transition: -moz-transform linear;
	transform : translateZ(0); 
	
	position: absolute;
	width: 30px;
	height: 30px;
	text-align: center;
	background:#004E99;
	border-radius:50%;
	box-shadow: -5px -5px 1px 1px rgba(0,0,0,0.1);
}
.ball.half:before {
	content: "";
	position: absolute;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 20%);
	border-radius:50%;
	bottom: 0%;
	left: 0%;
	opacity: 0.9;
	height: 30px;
	width: 30px;
	z-index: -1;
}
.ball.half:after {
	content: "";
	position: absolute;
	background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(244,247,250,0) 80%,rgba(247,249,251,1) 80%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
	border-radius:50%;
	top: 0%;
	left: 0%;
	opacity: 0.9;
	height: 30px;
	width: 30px;
	z-index: -1;
}

.ball>div{
	position:absolute;
    width:100%;
	height:100%;
}

.ball>div>span{
	position:absolute;
	left:8px;
	top:8px;
	width:15px;
	height:15px;
	border-radius:50%;
	text-align:center;
	line-height:15px;
	font-size:12px;
	font-weight:bold;
	background:#fff;
}

.ball.yellow {
	background: radial-gradient(circle at 20px 20px, #fc0, #001);
}
.ball.blue {
	background: radial-gradient(circle at 20px 20px, #09f, #001);
}
.ball.red {
	background: radial-gradient(circle at 20px 20px, #f30, #001);
}
.ball.pink {
	background: radial-gradient(circle at 20px 20px, #80f, #001);
}
.ball.orange {
	background: radial-gradient(circle at 20px 20px, #f73, #001);
}
.ball.green {
	background: radial-gradient(circle at 20px 20px, #0f4, #001);
}
.ball.brown {
	background: radial-gradient(circle at 20px 20px, #a30, #001);
}
.ball.black {
	background: radial-gradient(circle at 20px 20px, #000, #001);
}
.ball.white {
	background: radial-gradient(circle at 20px 20px, #fff, #999);
}
.ball.white>div>span{
	background:none;
}