/* 3D Bouncing ball */
/* RED */
.ball-red {
	width: 16px !important;
	height: 16px !important;
	border: 1.8px solid #f72700 !important;
	border-radius: 8px !important;
	background: rgb(251,78,3);
	background: -moz-linear-gradient(top,  rgba(251,78,3,1) 0%, rgba(247,39,0,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,78,3,1)), color-stop(99%,rgba(247,39,0,1)));
	background: -webkit-linear-gradient(top,  rgba(251,78,3,1) 0%,rgba(247,39,0,1) 99%);
	background: -o-linear-gradient(top,  rgba(251,78,3,1) 0%,rgba(247,39,0,1) 99%);
	background: -ms-linear-gradient(top,  rgba(251,78,3,1) 0%,rgba(247,39,0,1) 99%);
	background: linear-gradient(top,  rgba(251,78,3,1) 0%,rgba(247,39,0,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb4e03', endColorstr='#f72700',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(224,36,1,0.4), 
				0 0 1px #e02401;
	margin-top: 2px;
	position: absolute;
	z-index: 11;
}

.ball-red::after {
	content: "";
	width: 8px; 
	height: 6px;
	position: absolute;
	left: 2.8px;
	top: 0;
	z-index: 10;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f72700', endColorstr='#ffffff',GradientType=0 );
	border-radius: 10px / 5px;	
}

/* GRAY */
.ball-gray {
	width: 16px;
	height: 16px;
	border: 1.8px solid #666666;
	border-radius: 8px;
	background: rgb(187,187,187);
	background: -moz-linear-gradient(top,  rgba(187,187,187,1) 0%, rgba(51,51,51,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(99%,rgba(51,51,51,1)));
	background: -webkit-linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(0,0,0,1) 99%);
	background: -o-linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(51,51,51,1) 99%);
	background: -ms-linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(51,51,51,1) 99%);
	background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(51,51,51,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#666666',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(68,68,68,0.4), 
				0 0 1px #444444;	
	position: absolute;
	margin-top: 2px;
	z-index: 11;
}

.ball-gray::after {
	content: "";
	width: 8px; 
	height: 6px; 
	position: absolute;
	left: 2.8px;
	top: 1px;
	z-index: 10;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#ffffff',GradientType=0 );
	border-radius: 10px / 5px;	
}


/* BROWN */
.ball-brown {
	width: 16px;
	height: 16px;         
	border: 1.8px solid #916d38;
	border-radius: 8px;
	background: rgb(179,150,99);
	background: -moz-linear-gradient(top,  rgba(179,150,99,1) 0%, rgba(120,88,41,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,150,99,1)), color-stop(99%,rgba(120,88,41,1)));
	background: -webkit-linear-gradient(top,  rgba(179,150,99,1) 0%,rgba(120,88,41,1) 99%);
	background: -o-linear-gradient(top,  rgba(179,150,99,1) 0%,rgba(120,88,41,1) 99%);
	background: -ms-linear-gradient(top,  rgba(179,150,99,1) 0%,rgba(120,88,41,1) 99%);
	background: linear-gradient(top,  rgba(179,150,99,1) 0%,rgba(120,88,41,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b39663', endColorstr='#916d38',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(120,88,41,0.4), 
				0 0 1px #785829;	
	position: absolute;
	margin-top: 2px;
	z-index: 11;
}

.ball-brown::after {
	content: "";
	width: 8px; 
	height: 6px; 
	position: absolute;
	left: 2.8px;
	top: 0;
	z-index: 10;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#916d38', endColorstr='#ffffff',GradientType=0 );
	border-radius: 10px / 5px;	
}


/* GREEN */
.ball-green {
	width: 16px;
	height: 16px;
	border: 1.8px solid #3bb95c;
	border-radius: 8px;
	background: rgb(65,181,95);
	background: -moz-linear-gradient(top,  rgba(65,181,95,1) 0%, rgba(32,169,67,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,181,95,1)), color-stop(99%,rgba(32,169,67,1)));
	background: -webkit-linear-gradient(top,  rgba(65,181,95,1) 0%,rgba(32,169,67,1) 99%);
	background: -o-linear-gradient(top,  rgba(65,181,95,1) 0%,rgba(32,169,67,1) 99%);
	background: -ms-linear-gradient(top,  rgba(65,181,95,1) 0%,rgba(32,169,67,1) 99%);
	background: linear-gradient(top,  rgba(65,181,95,1) 0%,rgba(32,169,67,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbca30', endColorstr='#b0af00',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(176,175,0,0.4), 
				0 0 1px #979600;	
	position: absolute;
	margin-top: 2px;
	z-index: 11;
}

.ball-green::after {
	content: "";
	width: 8px; 
	height: 6px; 
	position: absolute;
	left: 2.8px;
	top: 0;
	z-index: 10;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0af00', endColorstr='#ffffff',GradientType=0 );
	border-radius: 10px / 5px;	
}


/* YELLOW */
.ball-yellow {
	width: 16px;
	height: 16px;
	border: 1.8px solid #e29e00;
	border-radius: 8px;
	background: rgb(237,189,3);
	background: -moz-linear-gradient(top,  rgba(237,189,3,1) 0%, rgba(226,158,0,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,189,3,1)), color-stop(99%,rgba(226,158,0,1)));
	background: -webkit-linear-gradient(top,  rgba(237,189,3,1) 0%,rgba(226,158,0,1) 99%);
	background: -o-linear-gradient(top,  rgba(237,189,3,1) 0%,rgba(226,158,0,1) 99%);
	background: -ms-linear-gradient(top,  rgba(237,189,3,1) 0%,rgba(226,158,0,1) 99%);
	background: linear-gradient(top,  rgba(237,189,3,1) 0%,rgba(226,158,0,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edbd03', endColorstr='#e29e00',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(204,143,0,0.4), 
				0 0 1px #cc8f00;	
	position: absolute;
	margin-top: 2px;
	z-index: 11;
}

.ball-yellow::after {
	content: "";
	width: 8px; 
	height: 6px; 
	position: absolute;
	left: 2.8px;
	top: 0;
	z-index: 10;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e29e00', endColorstr='#ffffff',GradientType=0 );
	border-radius: 10px / 5px;	
}


/* BLUE */
.ball-blue {
	width: 16px;
	height: 16px;
	border: 1.8px solid #4c599d;
	border-radius: 8px;
	background: rgb(120,133,188);
	background: -moz-linear-gradient(top,  rgba(120,133,188,1) 0%, rgba(76,89,157,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(120,133,188,1)), color-stop(99%,rgba(76,89,157,1)));
	background: -webkit-linear-gradient(top,  rgba(120,133,188,1) 0%,rgba(76,89,157,1) 99%);
	background: -o-linear-gradient(top,  rgba(120,133,188,1) 0%,rgba(76,89,157,1) 99%);
	background: -ms-linear-gradient(top,  rgba(120,133,188,1) 0%,rgba(76,89,157,1) 99%);
	background: linear-gradient(top,  rgba(120,133,188,1) 0%,rgba(76,89,157,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7885bc', endColorstr='#4c599d',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(60,71,125,0.4), 
				0 0 1px #3c477d;	
	position: absolute;
	margin-top: 2px;
	z-index: 11;
}

.ball-blue::after {
	content: "";
	width: 8px; 
	height: 6px; 
	position: absolute;
	left: 2.8px;
	top: 0;
	z-index: 10;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c599d', endColorstr='#ffffff',GradientType=0 );
	border-radius: 10px / 5px;	
}


/* PURPLE */
.ball-purple {
	width: 16px;
	height: 16px;
	border: 1.8px solid #602062;
	border-radius: 8px;
	background: rgb(133,63,135);
	background: -moz-linear-gradient(top,  rgba(133,63,135,1) 0%, rgba(96,32,98,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(133,63,135,1)), color-stop(99%,rgba(96,32,98,1)));
	background: -webkit-linear-gradient(top,  rgba(133,63,135,1) 0%,rgba(96,32,98,1) 99%);
	background: -o-linear-gradient(top,  rgba(133,63,135,1) 0%,rgba(96,32,98,1) 99%);
	background: -ms-linear-gradient(top,  rgba(133,63,135,1) 0%,rgba(96,32,98,1) 99%);
	background: linear-gradient(top,  rgba(133,63,135,1) 0%,rgba(96,32,98,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#853f87', endColorstr='#602062',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(71,23,72,0.4), 
				0 0 1px #471748;	
	position: absolute;
	margin-top: 2px;
	z-index: 11;
}

.ball-purple::after {
	content: "";
	width: 8px; 
	height: 6px; 
	position: absolute;
	left: 2.8px;
	top: 0;
	z-index: 10;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#602062', endColorstr='#ffffff',GradientType=0 );
	border-radius: 10px / 5px;	
}


/* KHAKI */
.ball-khaki {
	width: 16px;
	height: 16px;
	border: 1.8px solid #b19600;
	border-radius: 8px;
	background: rgb(204,183,80);
	background: -moz-linear-gradient(top,  rgba(204,183,80,1) 0%, rgba(177,150,0,1) 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,183,80,1)), color-stop(99%,rgba(177,150,0,1)));
	background: -webkit-linear-gradient(top,  rgba(204,183,80,1) 0%,rgba(177,150,0,1) 99%);
	background: -o-linear-gradient(top,  rgba(204,183,80,1) 0%,rgba(177,150,0,1) 99%);
	background: -ms-linear-gradient(top,  rgba(204,183,80,1) 0%,rgba(177,150,0,1) 99%);
	background: linear-gradient(top,  rgba(204,183,80,1) 0%,rgba(177,150,0,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccb750', endColorstr='#b19600',GradientType=0 );
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(128,109,0,0.4), 
				0 0 1px #806d00;	
	position: absolute;
	margin-top: 2px;
	z-index: 11;
}

.ball-khaki::after {
	content: "";
	width: 8px; 
	height: 6px; 
	position: absolute;
	left: 2.8px;
	top: 0;
	z-index: 10;
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 1%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b19600', endColorstr='#ffffff',GradientType=0 );
	border-radius: 10px / 5px;	
}