#intro { max-width: 600px; margin: 0 auto;}
#intro > h1 {
	font-size: 6em;
}
#main-container{
	margin-top: 60px;
}
#locator { 
	float: left;
	margin-right: 20px;
}
.updated { color: #CC131E }
.gray { color: #666;}
#tt { width: 150px }

.caps { text-transform : uppercase;}

.map-unit {
	max-width: 800px; margin: 20px auto; padding: 20px 0;
	border-top: 1px solid #eee;
}

.map-unit > img { float: left; margin-right: 20px ;}


 .split-unit h5.caps { font-size: 1em; color: #333;}
.split-box {
	position: relative;
	width: 230px;
	float: left;
	margin-bottom: 25px;
}

.split-box > .tl {
	position: absolute;
	top: 0;
	left: 0;
	padding: 7px 10px;
	margin: 0;
	background: #000;
	background: rgba(0,0,0,0.75);
	color: white;
	font-weight: bold;
	font-size: 14px;
	font-family: Arial;
}

#charts {
	padding-top: 20px;
	margin-top: 20px;
	border-top: 4px solid #eee;
}

.split-chart { width: 48.5%; float: left;}
#byday-chart { padding-right: 1.5%;}
#mount-chart { padding-left: 1.5%;}

.chart-note {
	width: 30%;
	position: absolute;
	top: 50px;
	padding: 10px;
	background: #fff;
}
.chart-note > h5 {
	font-size: 14px;
	text-transform: uppercase;
}

.lab-small {
	width: 12px;
	height: 12px;
	display: inline-block;
	margin-left: 5px;
}

.lab-select { cursor: default !important;}

.lab-select { padding: 4px 10px;}
.lab-select:hover { background: #eee; border-radius: 4px;}
.lab:before , .lab-select:before {
	width: 12px;
	height: 12px;
	display: inline-block;
	margin-right: 6px;
	content: ' ';
}

.lab-sol:before { background: #01665e }
.lab-isr:before { background: #5ab4ac}
.lab-mil:before { background: #898775 }
.lab-civ:before { background: #c4c19c }
.lab-unk:before { background: #dbe1b0 }

.overlay { fill-opacity: 0;}
.overlay:hover { fill-opacity: 0.05;}

.hidden-bar { fill-opacity: 0.09 }

.y.axis .tick {
	stroke-dasharray: 1 5;
}
.y.axis .tick:first-of-type {
	stroke-dasharray: none;
}

.y.axis text { text-anchor: start !important;}
.y.axis .tick:first-of-type > text { display: none;}

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

#demographics {
	max-width: 600px;
	margin: 40px auto 40px 0;
	padding: 40px 0;
	border-top: 4px solid #eee;
	float: left;
}

.g-unit-sp { width: 95%; padding: 2.5%; float: left;}
.g-unit-sp > .hack { width: 300px; float: left; margin-right: 20px;}
.g-unit { width: 45%; padding: 2.5%; float: left;}
.g-unit-sp > h5, .g-unit > h5 { font-size: 14px; text-transform: uppercase;}
.g-unit > img { width: auto;}

#timeline {
	max-width: 500px;
	margin: 40px 0 40px auto;
	padding: 40px 0;
	border-top: 4px solid #eee;
}

#timeline > .time-obj {
	padding: 10px 0;
}

.time-obj > p {
	margin-left: 100px;
}

.time-obj > strong {
	display: block;
	float: left;
	width: 80px;
	text-align: right;
}


@media (max-width: 1200px) {
	#timeline { width : 35%; }
}

@media (max-width: 1000px) {
	.split-chart { display: inline-block; float: none; width: 48%;}
	.chart-note { position: static; margin-bottom: 20px; width: auto;}
	#demographics { width: 700px; margin: 0 auto; float: none !important;}
	 #timeline { width : 100%; max-width: none !important;}
 	.time-obj > p {
 	margin-left: 100px;
 	}
}

@media (max-width: 980px) {
	.split-box { width: 180px;}
	
	.map-unit > img { width: 330px;}
}

@media (max-width: 750px) {
	#demographics { width: auto;}
	.split-chart, .split-box { width: 100%; margin-left: 0 !important; margin-right: 0 !important; float: none;}
	.map-unit > img { float: none;}
	.map-unit { max-width: 300px;}
}

@media (max-width: 650px) {
	#demographics > h5 { text-align: center;}
	#demographics p, .g-unit-sp, .g-unit, .hack { max-width: 300px !important; width: auto; float: none !important; margin-left: auto  !important; margin-right: auto !important;}
}

@media (max-width: 500px) {
	#intro { text-align: center;}
	#locator { float: none; margin: 0 auto 20px auto;}
}