#ie-modal {

	position: fixed;
	width: 90%;
	height: 90%;
	padding: 5%;
	background: #fff;
	z-index: 10000;
}

#ie-modal > div { 
	max-width: 600px;
	margin: 0 auto;
}

body {font-family: 'Roboto Slab', Georgia, Times, Serif}
.rob {font-family: 'Roboto Slab', Georgia, Times, Serif !important}
.ral {font-family: 'Raleway', Helvetica, Arial, Sans-Serif !important}
#folio-title { background: #FFCC00; padding: 3px 5px; top: -6px}
#loading { text-align: center; margin-top: 30% }
.perc-holder {background: #FFCC00 !important}
#tracker {background: #000 !important}
#article-wrapper { max-width: 1100px; margin: 0 auto}
#article-wrapper > p{
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
}

.subhead {
	display: block;
	font-family: 'Raleway', Helvetica, Arial, Sans-Serif !important;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 24px;
}

/*HACKS*/
.quote-item > p > span {
	background: #FFCC00;
	display: inline-block;
	font-size: 30px;
	line-height: .8em;
	padding: 4px 3px;
	color: #000;
}

.splash0 { background: url('../img/0/splash.jpg') no-repeat fixed center left; background-size: auto 100%; }
.splash1 { background: url('../img/1/splash.jpg') no-repeat fixed center right; background-size: auto 100%; }
.splash2 { background: url('../img/2/splash.jpg') no-repeat fixed center center; background-size: auto 100%; }
.splash3 { background: url('../img/3/splash.jpg') no-repeat fixed center center; background-size: auto 100%; }
.splash4 { background: url('../img/4/splash.jpg') no-repeat fixed center center; background-size: auto 100%; }
.splash5 { background: url('../img/5/splash.jpg') no-repeat fixed center center; background-size: auto 100%; }

#splash {
	border-bottom: 2px solid #999;
}

#topsnap {
	position: absolute;
	top: 20px;
	right: 20px
}

#splash > .inner {
	width: 50%;
	min-width: 300px;
	position: absolute;
	top: 0;
	left: 0;
	padding: 30px;
	font-family: 'Raleway', Helvetica, Arial, Sans-Serif !important;
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
}

#splash > .inner > h3 {
	color: #fff;
	font-weight: 900;
	background: #000;
	padding: 4px 10px;
	display: inline-block;
	vertical-align: center
}

#splash > .inner > h1 {
	margin: 10px 0;
}

#splash > .inner > h1 > span {
	background: #FFCC00;
	display: inline-block;
	font-size: 60px;
	line-height: .8em;
	padding: 10px 15px;
	color: #000;
}

#splash > .inner > p {line-height: 1em }

#splash > .inner > p > span {
	display: inline-block;
	background: rgba(0,0,0,0.8);
	padding: 6px 4px;
	font-size: 18px;
	line-height: .8em;
	margin: 0;
	font-weight: 500 !important;
}

#splash > span {
	width: 100%;
	text-align: center;
	display: block;
	position: absolute;
	bottom: 0px;
	cursor: pointer;
}

#article-wrapper > p {
	font-size: 1.2em;
	line-height: 1.6em;
	color: #333;
}

#article-wrapper > p > a[href*="/map/?"]:before {
	content:url('../img/map.png');
	margin-right: 3px;
	position: relative;
	top: 2px;
}

.b-holder { margin: 40px auto; text-align: center}

.withDrop:first-letter {
	font-family: 'Raleway', Helvetica, Arial, Sans-Serif;
	font-size: 4em;
	line-height: 1em;
	width: .8em;
	text-align: center;
	float: left;
	margin: .1em .2em .3em 0;
	font-weight: 700;
	background: #FFCC00;
}

.photo-item > figcaption { color: #333 }

.zip-item p { margin-bottom: 10px}
.zip-refer {
	float: left;
	margin: 0 10px 10px 0;
}

.zip-label {
	font-size: 18px;
	font-family: 'Raleway', Helvetica, Arial, Sans-Serif;
	font-weight: 900;
	padding: 2px 8px 4px 8px;
	background: #FFCC00;
	display: inline-block;
	margin-bottom: 5px;
}

.barn-l, .barn-n {
	border-top: 1px dotted #aaa;
	width: 50%;
}

.barn-l {
	color: #666;
	width: 40%;
	display: block;
	padding: 5px 0;
	float: left;
	text-align: left;
}

.barn-n {
	font-size: 30px;
	line-height: 60px;
	vertical-align: middle;
	width: 60%;
	display: block;
	padding: 5px 0;
	float: right;
	text-align: right;
}


/*SIG*/
#sig { width: 220px !important; margin-top: 0px}
#sig > header { margin-bottom: 10px}
#sig > header > h3 { padding: 10px 0 5px 6px; line-height: 1em}
#sig > header > h2 > span, #series-nav-footer > header > h2 > a > span {
	background: #FFCC00;
	display: inline-block;
	font-size: 40px;
	line-height: 40px;
	padding: 2px 10px 2px 5px;
}

.story-list {
	list-style-type: square;
	padding-left: 20px;
	margin-bottom: 15px;
}

.story-list li { font-size: 14px; line-height: 16px; margin-bottom: 4px}
.story-list > li > a {text-decoration: none}
.story-list > li > a:hover {text-decoration: underline}
#line { margin-top: -40px; border-bottom: 4px solid #000; padding: 0; height: 93px}

/*DB TEASE*/

.search-field {
	width: 140px;
	font-family: 'Roboto Slab', Georgia, Times, Serif;
	padding: 8px 10px;
	height: 24px;
	outline: none;
	font-size: 16px;
	line-height: 22px;
	vertical-align: center;
	border: none;
	background: #ddd;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	box-shadow: inset 0px 0px 10px #aaa;
	float: left;
}

.search-interface-trigger {
	font-family: 'Raleway', Helvetica, Arial, Sans-Serif;
	font-weight: 900;
	color: #fff;
	float: left;
	width: 38px;
	height: 38px;
	line-height: 30px;
	vertical-align: center;
	text-align: center;
	cursor: pointer;
	border-bottom: 2px solid #777;
	border-right: 1px solid #888;
}

.search-interface-trigger:first-of-type {
	border-left: 1px solid #888;
}

.search-trigger {
	background: #aaa url('../img/src.png') no-repeat scroll center center;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/*BIG EXPLAINER*/

.zip-biggex {
	
}

.profile-map {
	width: 35% !important;
	height: 400px !important;
	float: left;
}

.simple-stats {
	float: left;
	width: 25%;
	padding: 0 2.5%;
}

.simple-stats > dt {
	margin: 10px 0 4px 0;
	padding-top: 10px;
	border-top: 1px solid #ccc;
}
.simple-stats > dt:first-of-type {
	border-top: 0px solid #333;
	margin-top: 0px;
	padding-top: 0px;
}
.simple-stats > dd {color: #666}
.simple-stats > dd:after {
	content:'';
	clear:both;
	display: block;
}
.simple-stats > dd > .l {display: block;float: left}
.simple-stats > dd > .r {display: block;float: right}
.simple-stats > dt + dd {color: #000}
.simple-stats > dt + dd > .r { font-weight: 700}

/*LINE CHART*/

.chart-container { width: 34%; float: left}

.whyareyouusingIE8 { width: 90%; margin: 0 auto; font-size: 14px}
.whyareyouusingIE8 td {padding: 4px 0; margin: 4px 0; border-bottom: 1px dotted #ccc}
.whyareyouusingIE8 th  {border-bottom: 2px solid #ccc; font-weight: 700}
.c0 { width: 20%; text-align: left}
.c1 { width: 40%; text-align: center}
.c2 { width: 40%; text-align: right}

.chart-container > svg { width: 100%}
svg.chart > g > path.median-data-line {
	stroke: #ccc;
	stroke-width: 3;
	fill: none;
}

svg.chart > g > path.zip-data-line {
	stroke: #D97F25;
	stroke-width: 4;
	fill: none;
}

.median-sales-line {
	stroke: #ccc;
	stroke-width: 3;
	fill: none;
}

.chart text {
	font-family: 'Roboto Slab', Georgia, Times, Serif;
	font-size: 12px
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis line {
  stroke: lightgrey;
}

.x.axis .minor {
  stroke-opacity: .5;
}

.x.axis path {
  display: none;
}
.y.axis .domain { display: none }
.y.axis line, .y.axis path {
  fill: none;
  stroke: #aaa;
}
.y.axis .tick:first-of-type > line { stroke: #666; stroke-width: 2;}

.point {
	fill: #fff;
	stroke: #D97F25;
	stroke-width: 3;
}

.point:hover {
	fill: #aaa;
	stroke: #000;
}

.toss.point {
	fill: #fff;
	stroke-width: 2;
	stroke: #91b6d4;
	stroke-dasharray: 3 3;
	stroke-linecap: round;
}

.fake-box { fill: #aaa; fill-opacity: 0;}

.avg-text-label, .zip-text-label { font-family: 'Raleway', Helvetica, Arial, Sans-Serif !important}
.avg-text-label { fill: #666;}
.zip-text-label { fill: #a00 }

#chart-box {
	position: absolute;
	background: #fff;
	color: #000;
	min-width: 110px;
	padding: 6px 8px 2px 8px;
	box-shadow: 0px 0px 10px #666;
	-moz-box-shadow: 0px 0px 10px #666;
	display: none;
	z-index: 9999;
}

#chart-box small { margin-bottom: 3px}

#chart-box div:last-of-type {
	width: 10px;
	height: 10px;
	background: #fff;
	position: absolute;
	bottom: -6px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=6);
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;

}

/*NAVIGATION*/

#interactive-teez { background: #f8f5f2; padding: 15px; border-radius: 6px}
#interactive-teez:after { content:'';clear:both;display:block}
#interactive-teez .float-left { max-width: 350px; padding: 10px;}
#interactive-teez .float-right { margin-top: 15px}
/*FOOTER*/

.current-part { position: relative }

.currently-reading-tag {
	color: #fff;
	background: #c00;
	font-size: 11px;
	line-height: 10px;
	padding: 5px 5px;
	text-transform: uppercase;
	display: inline-block;
	font-weight: 900;
	font-family: 'Raleway', Helvetica, Arial, Sans-Serif;
	position: absolute;
	top: 0px;
	right: 0px;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}

#series-nav-footer {
	margin: 30px auto;
	width: 100%;
}
#series-nav-footer header {
	max-width: 700px;
	padding: 20px;
	margin: 0 auto 20px auto;
}
.series-part-mainbar-title { font-size: 40px; line-height: 40px}
#series-nav-footer > header > a >img {
	width: 100%;
	height: auto;
}

#series-list-footer {margin: 20px 0}
#series-list-footer:after {
	content: '';
	display: block;
	clear: both;
}
.series-part{
	text-decoration: none;
	display: block;
	width: 27.33%;
	height: 150px;
	vertical-align: middle;
	padding: 40px 3% 10px 3% !important;
	float: left;
	box-shadow: inset 0px 0px 1px #000;
} 
.series-part-header { padding: 4px 6px; color: #fff; background: #000; display: inline-block}
.series-part-mainbar-title {
	font-size: 18px;
	line-height: 20px;
	margin-bottom: 8px;
	color: #000;
}

.series-part-mainbar-title > span {
	background: #FFCC00;
	padding: 4px 3px;
	display: inline-block;
}

.series-part:hover{
	background: #ddd;
}

#comment-wrapper { max-width: 700px; padding: 0 20px; margin: 40px auto 0 auto}
#comment-wrapper p { margin-bottom: 14px; color: #444}
/*NEXT | PREVIOUS*/

.tab-controller {
	display: block;
	position: fixed;
	top: 40%;
	height: 110px;
	background: #eee;
	padding: 15px 20px;
	cursor: pointer;
	border: 1px solid #ccc;
}

/*.tab-controller:hover {
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0px 0px 10px #000;
}*/

.tab-controller > .sprite {
	display: inline-block;
	height: 140px;
	width: 40px;
	position: absolute;
}

.tab-controller > .tab-content {
	display: none;
	width: 250px;
	height: 130px;
}

.tab-controller > .tab-content > small {
	font-family: 'Raleway', Helvetica, Arial, Sans-Serif;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 900;
}

.tab-controller > .tab-content > h4 {
	font-family: 'Roboto Slab', Georgia, Times, Serif;
	font-size: 16px;
	font-weight: 700;
}

#tab-next { right: -1px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
#tab-previous { left: -1px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
#tab-next .tab-content { float: left; margin-right: 50px}
#tab-previous .tab-content { float: right; margin-left: 50px}

#tab-next .sprite {
	top: 0;
	right: 0;
	background: url('right-controller.png') no-repeat scroll 12px 50px;
}

#tab-previous .sprite {
	top: 0;
	left: 0;
	background: url('left-controller.png') no-repeat scroll 5px 50px;
}



@media only screen and (max-width : 800px) {
	#article-wrapper > p { font-size: 1.1em; }
	#splash > .inner {
		padding: 0% !important;
		width: 80% !important;
		left: 5% !important;
	}
	
	.profile-map { width: 50% }
	.simple-stats { width: 45% ; padding: 0 0 0 5%}
	.chart-container { width: 50%; width: 50%; margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc}
	.chart-container:first-of-type { clear: left}
	.series-part{width: 44%}
}

@media only screen and (max-width : 750px) {
	
	.tab-controller {
		display: block;
		position: static !important;
		width: 40%;
		border: 1px solid #555;
		border-radius: 4px;
	}
	
	.tab-controller > .sprite {
		display: none !important;
	}

	.tab-controller > .tab-content {
		height: 130px;
		display: block !important;
		width: auto;
		margin: 0 auto !important;
	}

	#tab-previous { float: left }	
	#tab-next { float: right }
}

@media only screen and (max-width : 600px) {
	#article-wrapper > p { font-size: 16px; }
	.series-part {display: block; width: auto !important; padding-left: 30px;padding-right: 30px}
	#tiny-refer { display: none}
	.tab-controller {
		width: 80%;
		display: block;
		margin: 10px auto !important;
		text-align: center !important;
	}
	
	.tab-content { float: none !important}


	#tab-previous, #tab-next { float: none !important }
	.profile-map, .simple-stats, .chart-container { float: none !important; width: 100% !important; padding: 10px 0 !important}
	.profile-map {height: 250px !important}
}

@media only screen and (max-width : 450px) {
	#splash > .inner {
		padding: 0% !important;
		width: 80% !important;
		left: 10px !important;
		top: 80px !important;
	}
	#splash > .inner > h1 > span { font-size: 30px; padding: 8px !important}
	#splash > .inner > p > span { font-size: 14px}
}