body { position: relative }
.ral { font-family: 'Raleway', Helvetica, Arial, Sans-Serif }
.rob { font-family: 'Roboto Slab', Georgia, Times, Serif }
.clearfix { clear: both; display: block; }


#intro {
	max-width: 700px;
	margin: 0 auto;
	padding: 40px 0;
}

#wrapper { position: relative }

#dade-breakdown {
	max-width: 600px;
	margin: 0 auto 50px auto;
}

#dade-breakdown .r2 { width: 62% }
#dade-breakdown .bar-seg { float: left}

.g-component > p, .g-component > h3 { max-width: 600px; margin: 0 auto}

.g-component p {
	line-height: 1.5em;
	margin-bottom: 16px;
}

#multiples { max-width: 800px; margin: 0 auto}
#multiples:after { display: block; content:''; clear: both}
.g-unit { 
	padding: 20px 2.5%;
	width: 40%;
	float: left;
}
.g-unit-img {
	width: 100px;
	display: block;
	float: left;
	margin: 0 25px 15px 0;
	position: relative;
}

.g-unit-img > img {
	width: 100%;
	height: auto;
}


#interactive { max-width: 1000px; margin: 0 auto 30px auto}
#interactive > div {  border: 1px solid #ccc; border-radius: 3px }

#map-container {
	margin-right: -2px;
	border-right: 2px solid #aaa;
	width: 50%;
	float: left;
	height: 600px;
	position: relative;
}

#map { width: 100%; height: 100%}


#map-label {
	width: 190px;
	padding: 10px;
	background: #fff;
	border-radius: 2px;
	border: 1px solid #ccc;
	box-shadow: 0px 0px 8px #aaa;
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 12px;
	line-height: 15px;
}
#map-label > p { margin-bottom: 0; color: #333}

#list-container {
	width: 50%;
	float: right;
	background: #f8f5f2;
	height: 600px;
}

#list-container > header {
	padding: 10px;
	display: block;
	position: relative;
}

#srcbox {
	font-family: 'Roboto Slab', Georgia, Times, Serif;
	font-size: 16px;
	width: 78%;
	padding: 14px 10.5% 14px 2.5%;
	margin: 15px auto 25px auto;
	display: block;
	border: none;
	background: #eee;
	box-shadow: inset 0px 0px 10px #ccc;
	border-radius: 3px;
}
	
#srcbox-button {
	background: transparent url('../img/src.png') no-repeat scroll center center;
	width: 25px;
	height: 25px;
	position: absolute;
	right: 10%;
	top: 35px;
}

#reset {
	padding: 4px;
	position: absolute;
	right: 7%;
	top: 78px;
	display: inline-block;
	cursor: pointer;
}

#reset:hover {
	border-radius: 2px;
	background: #ddd;
}
	


#school-list {
	border-top: 2px solid #aaa;
	width: 100%;
	height: 500px;
	overflow-y: scroll;
	box-shadow: inset 0px 0px 10px #ccc;
}

#school-list > ul > li {
	padding: 20px;
	cursor: pointer;
	border-bottom: 1px solid #aaa;
}

#school-list > ul > li:hover { background: #fff }

.active-listing { background: #fff; display: block !important; cursor: default !important }
.miss { display: none !important}

.breakdown {
	font-family: 'Roboto Slab', Georgia, Times, Serif;
	font-size: 13px;
	line-height: 13px;
	vertical-align: middle;
}

.row { cursor: default !important }
.row > div { display: inline-block; padding: 0 2.5%; vertical-align: middle; margin: 5px 0}

.row-header { font-weight: 700}
.row-dat:hover { background: #eee; border-radius: 3px}

.r1 { width: 13%; text-align: right }
.r2 { width: 60%; text-align: center }
.r3 { width: 7% }

.breakdown tr:last-of-type > td {
	border-bottom: none !important;
}

.bar-seg {
	height: 15px;
	margin: 0;
	display: inline-block;
}


.w-seg { background: #62B360 }
.b-seg { background: #648097 }
.h-seg { background: #D36D6E }
.o-seg { background: #A067A8 }
.w-tag { color: #62B360 }
.b-tag { color: #648097 }
.h-tag { color: #D36D6E }
.o-tag { color: #A067A8 }

.none-seg { background: #ccc; text-align: center; width: 100%; font-size: 9px; text-transform:uppercase; font-weight: 900; color: #666 }

#hover-box {
	position: fixed;
	width: 100px;
	background: #fff;
	color: #000;
	padding: 8px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
	display: none;
	z-index: 9999;
	line-height: 1.3em;
}

#selected-csvg > path {
	stroke-width: 6 !important;
	stroke: #000;
}

#chart-box {
	position: absolute;
	width: 260px;
	background: #fff;
	color: #000;
	padding: 8px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
	display: none;
	z-index: 9999;
	line-height: 1.3em;
}
#chart-box > .clearfix {margin:4px 0;}
#chart-box > div {
	display: inline-block;
	width: 20%;
	padding: 0 1.7%;
	text-align: center;
	border-right: 1px dotted #ccc;
}

#chart-box > div:last-of-type { border-right: none !important; }

#chart-box > .tip {
	width: 10px;
	height: 10px;
	background: #fff;
	position: absolute;
	top: -6px;
	left: 50%;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=6);
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}

#chart-box > div > small {
	display: inline-block;
}

#chart-box > div > .small { font-size: 10px; text-transform: uppercase}
#chart-box > div > .xsmall { font-size: 12px; display: block; text-transform: uppercase; margin-top: 5px}


@media only screen and (max-width : 900px) {
	body { padding: 0 4%}
	#map-container { width: 100%; height: 300px; float: none !important; border-right: none !important; border-bottom: 3px solid #aaa}
	#list-container { width: 100%; height: 400px; float: none !important}
}

@media only screen and (max-width : 800px) {
.g-unit { 
	padding: 20px 2.5%;
	width: 95%;
	float: none !important;
}
.g-unit:after { display: block; content:''; clear: both}
#dade-breakdown .r2 { width: 55%;}
}