.chart {
	float: left;
	width: 1000px;
	height: 300px;
}

.c.chart {
	height: 200px;
}

.titled-chart .chart {
	clear: both;
	width: 300px;
	height: 300px;
	border-bottom: 1px solid #fff;
}

.chart text {
	font: 10px sans-serif;
	fill: #fff;
}

.chart text.title {
	font: 20px sans-serif;
	font-style: bold;
	fill: #3ca3de;
}

.chart .axis path,
.chart .axis line {
	fill: none;
	stroke: #fff;
	shape-rendering: crispEdges;
}

.chart .area {
	stroke: #CCC;
	stroke-width: 1;
}

.chart .area.break {
	fill: #fff;
	fill-opacity: 0.7;
}

.chart .area.analysis {
	fill: #fff;
	fill-opacity: 0.3;
}

.chart .area.game {
	fill: #3D6899;
	fill-opacity: 0.6;
}

.chart path.break {
	stroke: #CCC;
	stroke-width: 1;
	fill: #fff;
	fill-opacity: 0.7;
}

.chart path.analysis {
	stroke: #CCC;
	stroke-width: 1;
	fill: #fff;
	fill-opacity: 0.3;
}

.chart path.game {
	stroke: #CCC;
	stroke-width: 1;
	fill: #3D6899;
	fill-opacity: 0.6;
}

.chart circle.details {
	stroke: #fff;
	stroke-width: 2;
	fill: #84BDFF;
}

.chart circle.details:hover {
	cursor: pointer;
	stroke: #84BDFF;
	fill: #fff;
}