#grid{display: table;}
.gridcol {display: table-row;}
.gridcol div {display: table-cell;
border:1px outset #ccc;background:#ADD8E6;box-sizing:border-box;position:relative;}	
.gridcol div:before{content:"";width:80%;height:80%;box-sizing:border-box;border-radius:100%;position:absolute;top:5%;left:7%;}
#score{font-size:2rem;line-height:2.1rem;color: #5e542d;background: #FCE168;text-align:center;}
#grid .ball{cursor:pointer;}
.empty:before{background:transparent;}
.forecast{width:100%;height:1.8rem;}
.forecast div{position:relative;width:1rem;height:1rem;float:left;}

.forecast div:before{content:"";position:absolute;top:5px;left:5px;
width:1rem;height:1rem;border-radius:100%;}

/* Ball colors */
.red:before{
	background: rgb(255,0,0);
	background: radial-gradient(ellipse at center, rgb(255,77,77) 0%, rgb(255,0,0) 100%);
}

.blue:before{
	background: rgb(0,0,255);
	background: radial-gradient(ellipse at center, rgb(77,77,255) 0%, rgb(0,0,255) 100%);
}

.green:before{
	background: rgb(0,128,0);
	background: radial-gradient(ellipse at center, rgb(77,166,77) 0%, rgb(0,128,0) 100%);
}

.yellow:before{
	background: rgb(255,255,0);
	background: radial-gradient(ellipse at center, rgb(255,255,77) 0%, rgb(255,255,0) 100%);
}

.brown:before{
	background: rgb(165,42,42);
	background: radial-gradient(ellipse at center, rgb(192,106,106) 0%, rgb(165,42,42) 100%);	
}

.cyan:before{
	background: rgb(0,255,255);
	background: radial-gradient(ellipse at center, rgb(77,255,255) 0%, rgb(0,255,255) 100%);	
}

.magenta:before{
	background: rgb(255,0,255);
	background: radial-gradient(ellipse at center, rgb(255,77,255) 0%, rgb(255,0,255) 100%);
}


/* Ball effects */
.ball.fadein:before{-webkit-animation:fadein 0.3s; animation:fadein 0.3s;}
.ball.fadeout:before{-webkit-animation:fadeout 0.3s; animation:fadeout 0.3s;}

@-webkit-keyframes fadein{
	0% {opacity:0;}
	100% {opacity:1;}
}

@keyframes fadein{
	0% {opacity:0;}
	100% {opacity:1;}
}

@-webkit-keyframes fadeout{
	0% {opacity:1;}
	100% {opacity:0;}
}

@keyframes fadeout{
	0% {opacity:1;}
	100% {opacity:0;}
}

.ball.selected:before{
	-webkit-animation:jumping 0.5s;
	-webkit-animation-iteration-count: infinite;
	animation:jumping 0.5s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes jumping{
	0% {top:5px;}
	50% {top:9px;}
	100% {top:3px;}
}

@keyframes jumping{
	0% {top:5px;}
	50% {top:9px;}
	100% {top:3px;}
}