:root {
	--container-w: 880px;
	--graph-w: 900px;
	--interface-w: 620px;
	--description-w: 254px;
	--carrier-w: 300px;
	--carrier-map-w: 290px;
	--carrier-hist-w: 280px;
	--legend-desc-w: 120px;
	--legend-desc-h: 38px;
	--gap: 10px;
	--border-color: #ccc;
	--panel-bg: #eee;
	--muted: #aaa;
	--text: #333;
}

body {
	margin: 0;
}

h1 {
	margin: 30px auto 10px;
}

#container {
	width: var(--container-w);
	margin: 0 auto;
}

#header {
	width: var(--container-w);
	height: 50px;
	text-align: center;
}

#legend {
	width: var(--container-w);
	height: 40px;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	padding: 5px 0;
	margin-bottom: 20px;
}

#interface {
	width: var(--interface-w);
	height: 40px;
	font-size: 10px;
	float: left;
}

#description {
	width: var(--description-w);
	height: 40px;
	float: right;
}

#descMap,
#descHistogram {
	width: var(--legend-desc-w);
	height: var(--legend-desc-h);
	background-color: var(--panel-bg);
	border: 1px solid var(--border-color);
}

#descMap {
	float: left;
	margin-right: var(--gap);
}

#descHistogram {
	float: right;
}

#menu-title {
	color: var(--muted);
}

#menu-desc {
	width: var(--interface-w);
	height: 20px;
	background-color: var(--text);
	float: left;
}

#menu-desc-text {
	color: #fff;
	margin: 0 var(--gap);
	float: left;
}

ul#media-menu {
	width: var(--interface-w);
	height: 20px;
	padding: 0;
	margin: 0;
}

ul#media-menu li {
	display: block;
	float: left;
	margin-right: var(--gap);
	cursor: pointer;
	color: #ccc;
}

ul#media-menu li.selected {
	font-weight: bold;
	color: #fff;
}

#graph {
	width: var(--graph-w);
	height: 430px;
	margin-bottom: 30px;
}

.carrier {
	width: var(--carrier-w);
	height: 430px;
	float: left;
}

.carrier-map {
	width: var(--carrier-map-w);
	height: var(--carrier-map-w);
	margin-right: var(--gap);
}

.carrier-histogram {
	width: var(--carrier-hist-w);
	height: 121px;
	margin-right: var(--gap);
	background-color: var(--panel-bg);
}

.carrier:last-child .carrier-map,
.carrier:last-child .carrier-histogram {
	margin-right: 0;
}

.logo {
	display: block;
	margin: 0 auto 10px;
}

/* Histogram */

.bar {
	shape-rendering: crispEdges;
}

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

#commentary {
	font-size: 12px;
	line-height: 1.5em;
	color: var(--text);
	margin-bottom: 60px;
}

#footer {
	width: var(--container-w);
	height: 60px;
}