/* CSS Resets */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

body {
	background: #eee;
	color: #333;
	font-family: 'Lato', helvetica, arial, sans-serif;
}

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

#headerTop, #headerBottom {
	background: #fafafa;
	overflow: hidden;
}

#headerTop {
	border-bottom: 1px solid #fff;
	height: 50px;
}

#headerBottom {
}

	h1 {
		width: 76px;
		height: 50px;
		float: left;
		margin-left: 20px;
		overflow: hidden;
		text-indent: -9999px;
		background: url('../img/wnyc_76x100.png') 0px 50px;
		z-index: 1;
	}
	h1:hover {
		background: url('../img/wnyc_76x100.png') 0px 0px; 
	}
	
	@media all and (-webkit-min-device-pixel-ratio: 1.5) {
		h1 {
		    background-image: url('../img/wnyc_76x100@2x.png');
		    background-size: 76px 100px;
			background-position: 0px 50px;
		}
		h1:hover {
		    background-image: url('../img/wnyc_76x100@2x.png');
		    background-size: 76px 100px;
			background-position: 0px 0px;
		  }
	}

	h2 {
		font-size: 18px;
		font-weight: 400;
		float: left;
		margin-left: 20px;
		padding: 15px 0;
	}
	#headerBottom h2 {
		display: none;
	}

	#headerTop #share {
		color: #000;
		float: right;
	}
		#headerTop #share a {
			float: left;
			background: #fafafa;
			width: 55px;
			height: 35px;
			padding: 15px 0 0 0;
			border-left: 1px solid #fff;
			text-align: center;
			cursor: pointer;
			color: #000;
			text-decoration: none;
		}
		#headerTop #share a:hover {
			background: #e51133;
			color: #fff;
		}
	
	#toggle {
		width: 55px;
		height: 42px;
		float: right;
		border-left: 1px solid #fff;
		display: none;
		text-align: center;
		padding: 8px 0 0 0;
		cursor: pointer;
		z-index: 5;
	}
	#toggle:hover {
		background: #e51133;
		color: #fff;
	}
	.toggleOn {
		background: #333;
		color: #fff;
	}
	
	p.intro {
		padding: 15px 20px;
		font-family: 'Georgia', serif;
		font-size: 14px;
		line-height: 1.4em;
		max-width: 800px;
	}
	p.intro a {
		color: #333;
		text-decoration: underline;
	}
	p.intro a:hover {
		color: #e51133;
		text-decoration: underline;
	}

#legend {
	width: 100%;
	background: #444;	
	color: #fff;
	font-size: 12px;
}

#map {
	background: #f4f4f4;
}

.map-tooltip {
	border: 0;
	border-radius: 0;
	-webkit-border-radius: 0;
	box-shadow: 0 0 0 0 rgba(0,0,0,0);
	-webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0);
	background: #000;
	color: #fff;
	font-family: 'Lato', helvetica, arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	width: 400;
}

.map-tooltip-content, .tooltip-school-name, .tooltip-school-address, .tooltip-school-boro {
	text-transform: capitalize;
}

#tooltip-pct {
	font-weight: 900;
	font-size: 16px;
	letter-spacing: 0.05em;
}

#tooltip-2009, #tooltip-2012 {
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.05em;
}

#flyouts, .toolsFlyouts {
	width: 100%;
	position: fixed;
	bottom: 35px;
	left: 0;
	padding: 10px 0 20px 0;
	z-index: 10;	
	display: none;
}
	#flyouts *, .toolsFlyouts * {
		padding: 0 20px;
	}
		.toolsFlyouts a {
			padding: 0;
		}

.toolsFlyouts {
	height: ;
	color: #333;
	background: #ffea00;
}
	.toolsFlyouts strong {
		display: block;
		margin: 0 0 15px 0;
	}
	.toolsFlyouts p {
		margin: 0 40px 0 0;
	}
	.toolsFlyouts .closeButton, #flyouts .closeButton {
		padding: 0;
		background: url('../img/close.gif') 0px 0px;
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		text-indent: -9999px;
		overflow: hidden;
        cursor: pointer;
	}
	.toolsFlyouts .closeButton:hover, #flyouts .closeButton:hover {
		background: url('../img/close.gif') 0px 50px;
	}
	
	.toolsFlyouts a, .toolsFlyouts a:visited {
		color: #000;
		text-decoration: underline;
	}
	#flyouts a, #flyouts a:visited {
		color: #fff;
		text-decoration: underline;
	}
	.toolsFlyouts a:hover, #flyouts a:hover {
		color: #e51133;
		text-decoration: underline;
	}

ul#tools {
	background: #fafafa;
	color: #000;
	width: 100%;
	height: 35px;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
	cursor: pointer;
}
	ul#tools a li {
		color: #000;
		text-decoration: none !important;
	}
	
	ul#tools a {
		text-decoration: none !important;
	}
	
	ul#tools li {
		height: 25px;
		padding: 10px 20px 0 20px;
		list-style: none;
		font-size: 12px;
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}
	ul#tools li.left {
		float: left; 
		border-right: 1px solid #fff;
	}
	ul#tools li.right {
		float: right; 
		border-left: 1px solid #fff;
	}
	ul#tools li:hover {
		background: #e51133;
		color: #fff;
		text-decoration: none;
	}
	.toolsOn {
		background: #333;
		color: #fff;
	}

#mobileFlyout {
	background: #333;
	border-top: 1px solid #333;
	color: #fff;
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	z-index: 15;
	display: none;
}
	#mobileFlyout p {
		clear: both;
	}
	#mobileFlyout p a {
		color: #fff;
	}
	#mobileFlyout #share {
		color: #000;
		float: left;
		padding: 20px 20px 10px 20px;
		font-size: 12px;
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}
		#mobileFlyout #share a {
			float: left;
			margin: 0 10px 10px 0;
			background: #fff;
			padding: 10px;
			cursor: pointer;
			color: #000;
			text-decoration: none;
		}
		#mobileFlyout #share a:hover {
			background: #e51133;
			color: #fff;
		}
		#mobileFlyout #share a i {
			margin: 0 15px 0 5px;
			font-size: 16px;
		}
	#mobileFlyout #menu {
		clear: both;
	}
	#mobileFlyout #menu a {
		text-decoration: none;
		color: #fff;
	}
	#mobileFlyout #menu a:hover {
		text-decoration: underline;
		color: #fff;
	}
	#mobileFlyout #menu li {
		list-style: none;
		background: #000;
		color: #fff;
		margin: 1px 0 0 0;
		font-size: 12px;
		display: block;
		overflow: hidden;
		cursor: pointer;
	}
	#mobileFlyout #menu li:hover {
		background: #e51133;
	}
	#mobileFlyout #menu li h4 {
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		float: left;
		padding: 20px 0 20px 20px;
	}
	#mobileFlyout #menu li i.iconRight {
		color: #fff;
		float: right;
		position: relative;
		top: 1px;
		padding: 20px 20px 0 0;
	}
	#mobileFlyout #menu li h4 i {
		float: left;
		padding: 0;
		margin: 0 10px 0 0;
		width: 15px;
		position: relative;
		top: 1px;
	}
	#mobileFlyout #menu li.drawer {
		color: #000;
		background: #fff;
		padding: 20px;
		clear: both;
		font-size: 14px;
		display: none;
		position: relative;
		top: -1px;
	}
	#mobileFlyout #menu li.drawer strong {
		font-weight: 900;
	}
	#mobileFlyout #menu li.drawer p {
		font-weight: 400;
		padding: 10px 0;
	}
	#mobileFlyout #menu li.drawer p a {
		color: #000;
		text-decoration: underline;
	}
	#mobileFlyout #menu li.drawer p a:hover {
		text-decoration: underline;
		color: #e51133;
	}	

/* Mobile */

@media handheld, only screen and (max-width: 575px) {

	#headerTop h2, #headerBottom p.intro, ul#tools, #toolsFlyouts {
		display: none;
	}
	#headerBottom h2, #toggle {
		display: inline;
	}
	
}

@media handheld, only screen and (max-width: 375px) {

	#headerTop #share, #headerBottom {
		display: none;
	}
	#flyouts, .toolsFlyouts {
		bottom: 0px;
	}
}

@media handheld, only screen and (max-width: 225px) {

	#toggle {
		position: absolute;
		top: 0;
		right: 0;
		background: #fafafa;
	}
	#toggle.toggleOn {
		background: #333;
		color: #fff;
	}
	#mobileFlyout #menu li i, #mobileFlyout #share a i {
		display: none;
	}
	#flyouts, .toolsFlyouts {
		bottom: 0px;
	}
	
}