body{ 
	font-family: "expo-sans-pro";
	margin: 0; 
	color: #555; 
	border-bottom: #949494;
	font-weight: regular; 
	font-size: .95em;
}

h1{ 
	color: #245574; 
	letter-spacing: -.01em;
	font-weight: bold; 
	font-size: 31px; 
	line-height: .95em;}

h3{ 
	margin: .25em 0 0 0; 
	color: #245574; 
	text-transform: uppercase;
	font-weight: bold; 
	font-size: 15px;}
	
h4{
	color: #245574; 
	font-weight: 100;
	font-size: .7em;
	padding: 22px 28px 1px 29px
}

p{
	color: #245574; 
	margin: 8px 0 10px 0; 
	line-height: 18px;
}

a, a:visited{
	color: #397DB8; 
	text-decoration: none;
}

ul{
	color: #245574; 
	font-size: .75em; 	
	list-style-type: none;
}

li{
	margin: 4px -1px 4px -10px;
}

a:hover{
	text-decoration: underline;
}

.wrapper{
	display: block; 
	padding: 4px 30px 0 30px;
}

#map{ 
	position: absolute; 
	width: 100%;
	height:100%;
	top:0%;
	opacity:0.99;
}

/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}
.leaflet-control-zoom-out {
	font-size: 20px;
	}

.leaflet-touch .leaflet-control-zoom-in {
	font-size: 22px;
	}
.leaflet-touch .leaflet-control-zoom-out {
	font-size: 24px;
	}
.leaflet-left .leaflet-control {
	margin-left:15px;
	margin-top: 275px;
	}

.d3-tip {
	font-family: "expo-sans-pro";
	font-size: 1em;
	line-height: 1em;
	padding: 3px;
	background: #fff;
	border: 1px solid #a7a9ac;
	color: #a7a9ac;
	border-radius: 5px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1.5;
	color: #a7a9ac;
	content: "\25BC";
	position: absolute;
	text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
}

.reportTitle p{
	top:1%;
	position:absolute;
	font-size: 1.65em;
	font-family: "expo-sans-pro";
	font-weight: bolder;
	line-height: 1em;
	color: #683c91;
}

#rudinLogo img{
	position: absolute;
	bottom: 10px;	
	left:10px;
	width: 87px;
	height: 55px;
	z-index: 10000;
}
.legendPanel{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border:20px solid;
	font-family: "expo-sans-pro";
	position: absolute; 
	width:220px;
	height: 250px;
	background-color:#fff;
	opacity: 1;
	top:1%;
	left:.75%;
	z-index: 10000;
	padding: 10px 0px 0px 10px;
	margin: 0px 5px 5px 5px;
	border: 0px solid #7facec;}

.sidePanel{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border:20px solid;
	font-family: "expo-sans-pro";
	position: absolute; 
	width:630px;
	height: 250px;
	background-color:#fff;
	opacity: 1;
	top:1%;
	left:245px;
	z-index: 10000;
	padding: 10px 0px 0px 10px;
	margin: 0px 5px 5px 5px;
	border: 0px solid #7facec;
}

.bottomInfopanel{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 10px;
	border:20px solid #000;
		font-family: "expo-sans-pro";
	position: absolute; 
	width:100%;
	height:100%;
	opacity: 1;
	top:60%;
	left:0%;
	z-index: 10000;
	margin: 0px 5px 0px 5px;
	border: 0px solid #7facec;

}

#legendDesc {
	font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 75px;
	left:20%;
}

#legend30 {
	position: absolute;
	font-size: 1em;
	color: #000;
	background-color: #fde06c;
	width: 30%;
	height: 8%;
	top: 90px;
	left: 3%;
	text-align: center;
}

#legend45 {
	position: absolute;
	font-size: 1em;
	color: #000;
	background-color: #fde06c;
	width: 30%;
	height: 8%;
	top: 90px;
	left:35%;
	text-align: center;
}

#legend60 {
	position: absolute;
	font-size: 1em;
	color: #000;
	background-color: #fff2bf;
	width: 30%;
	height: 8%;
	top: 90px;
	right:3%;
	text-align: center;
}

#jobCentersLegend {
	position: absolute;
	top: 120px;
	left:35%;
}

#jobCentersLegend img{
	margin: -1px;
	top: 150px;
	left:-40%;
	width: 20px;
	height: 20px;
}


#neighbNameTitle{
	font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 1.5%;	
	left:2%;
	}
#neighbName{
	font-family: "expo-sans-pro"
;	font-size: 2.75em;
	font-weight: lighter;
	position: absolute;
	top: 9.5%;	
	left:2%;
	line-height: 1em;
	letter-spacing: .05em;
	}
#zipCodeTitle{
font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 1.5%;	
	left:45%;
	}
#zipCode{
	font-family: "expo-sans-pro";
	font-size: 1.55em;
	font-weight: bolder;
	color: #AEB2b5;
	position: absolute;
	letter-spacing: .04em;
	top: .0%;	
	left:53%;
	}

#medianIncomeRankTitle{
	font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 25%;	
	left:2%;
	}
#medianIncomeRank{
	font-family: "expo-sans-pro";
	font-size: 2.75em;
	font-weight: bolder;
	position: absolute;
	text-align: right;
	color: #683c91;
	letter-spacing: .05em;
	top: 28%;	
	left:2%;
}

#jobsAccessibleTitle{
	font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 49%;	
	left:2%;
	}

#jobsAccessible{
	font-family: "expo-sans-pro";
	font-size: 1.5em;
	font-weight: lighter;
	position: absolute;
	letter-spacing: .05em;
	top: 52%;	
		left:2%;
}


#unemploymentTitle{
font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 13%;	
	right:4%;
	}
#unemployment{
	font-family: "expo-sans-pro";
	font-size: 1.5em;
	font-weight: lighter;
	position: absolute;
	letter-spacing: .05em;
		top: 16%;	
		right:4%;
}

#populationTitle{
	font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 1.5%;	
	right:4%;
	}
#population{
	font-family: "expo-sans-pro";
	font-size: 1.5em;
	font-weight: lighter;
	position: absolute;
	letter-spacing: .05em;
	top: 4%;	
	right:4%;
	}	

#medianIncomeTitle{
font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 25%;	
	right:4%;
	}
#medianIncome{
	font-family: "expo-sans-pro";
	font-size: 1.5em;
	font-weight: lighter;
	position: absolute;
	letter-spacing: .05em;
	top: 28%;	
	right:4%;
}

#jobTypesTitle{
	font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 25%;	
	left:32%;
	}

#jobTypes{
	font-family: "expo-sans-pro";
	font-size: 1em;
	font-weight: lighter;
	position: absolute;
	letter-spacing: .05em;	
	top: 30%;	
	left:32%;
	line-height: 1.1em;
}

#baJobsPerc{
	font-family: "expo-sans-pro";
	font-size: 1.5em;
	font-weight: lighter;
	position: absolute;
	letter-spacing: .05em;
	top: 37%;	
	right:4%;
	margin-right:0.15em;
}
#baJobsTitle{
font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: uppercase;
	letter-spacing: .15em;
	top: 46%;	
	right:4%;
	line-height: 1em;
	text-align: right;
	}

#baJobs{
		font-family: "expo-sans-pro";
	font-size: 1.5em;
	font-weight: lighter;
	position: absolute;
	letter-spacing: .05em;
	top: 55%;	
		right:4%;
}

#credits {
	font-size: .75em;
	position: absolute;
	top: 53%;	
	left:4%;
	color:#AEB2B5;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: .05em;
}


#creditsList {
	font-size: .75em;
	position: absolute;
	top: 57%;	
	left:4%;
	color:#AEB2B5;
	line-height: 1em;
	letter-spacing: .05em;
}

#sources {
	font-size: .75em;
	position: absolute;
	top: 72%;	
	left:4%;
	color:#AEB2B5;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: .05em;
}
#sourcesList {
	font-size: .75em;
	position: absolute;
	top: 76%;	
	left:4%;
	color:#AEB2B5;
	line-height: 1em;
	letter-spacing: .05em;
}

#creditsList a, #sourcesList a {
	color: purple;
}

.line-chart-frame{
	position: absolute;
	bottom:2%;
/*	width: 100%;
	height: 100%;
*/
}


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

.grid line,
.grid path {
  fill: none;
  stroke: #AEB2B5;
  stroke-opacity: .25;
  shape-rendering: crispEdges;
}

.grid .minor.tick line {
  stroke-opacity: .25;

}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.actual {
  stroke-opacity: 0.25;
}

#Transit {
  stroke: #2850AD;
}

#Vehicle {
  stroke: #FF6319;
}

#Walking {
  stroke: #6cBE45;
}

#Vehicle.chart-text{
	fill:#FF6319;
	stroke: none;
		font-size: .85em;

}
#Transit.chart-text{
	fill:#2850AD;
	stroke: none;
			font-size: .85em;

}
#Walking.chart-text{
	fill:#6cBE45;
	stroke: none;
			font-size: .85em;

}

.zcta_select {
	fill: #caa308;
}

.chart-text{ 
 	stroke-width:0;
	font-size: .75em;
	font-weight: bold;
	color:#AEB2B5;
	position: absolute;
	text-transform: lowercase;
	letter-spacing: .20em;
	top: 46%;	
	left:4%;
}

/*same as jobTypes*/
.axis-label{
	font-family: "expo-sans-pro";
	font-size: 1em;
	font-weight: lighter;
	position: absolute;
	letter-spacing: .05em;	
	top: 50%;	
	left:4%;
	line-height: 1.75em;	
}

/*same as jobTypes*/
.label-text{
	font-family: "expo-sans-pro";
	font-size: 1.75em;vehicl
	font-weight: lighter;
	position: absolute;
	letter-spacing: .05em;	
	top: 50%;	
	left:4%;
	line-height: 1.75em;
}

#alert {
	font-family: "expo-sans-pro";
	font-weight: bolder;
	font-size: .85em;
	padding: 10px;
	opacity: .7;r
	border-radius: 5px;
	text-align: center;
	background-color:#feeb9d;
	color: gray;
	top: 280px;
	left: 24%;
	width: 40%;
	font-weight: bold;
	z-index:10000;
	position: absolute;
	line-height: 1em;

}

#searchBox {
	position:relative;
	/*height:30px;*/
	width:125px;
	font-family: "expo-sans-pro";
	/*font-weight: bolder;*/
	font-size: 1.5em;
	top:0%;
	right:0%;
	padding:8px 15px;
    /*background:rgba(50, 50, 50, 0.2);*/
    border:0px solid #dbdbdb;
}

#searchButton {
    position:relative;
    height:38px;
    top:0%;
    right:0%;
    float:right;
    padding:6px 15px;
    left:-8px;
    border:2px solid #207cca;
    background-color:#207cca;
    color:#fafafa;
    background: url("../images/mag_icon_small.png") no-repeat #207cca center; 
    background-size: 65% 60%;
    /*text-align:right;*/
}

/*@media only screen and (max-width: 900px) {
	#map{
		position: absolute; 
		height: 100%; 
		width: 100%; 
		display: block;
	}
	.sidePanel{
		position: inherit; 
		width: 70%;
	}
}*/

@media only screen and (max-width: 900px) {
	#map {
		position: absolute; 
		height: 100%; 
		width: 100%;
		display: block;
	}


	.legendPanel{
		visibility: hidden;
	}
	
	.sidePanel{
		left: 40px; 
		height: 70px; 
		width: 300px;
	}
	
	
	.leaflet-left{
		position; absolute;
		top: -255px;
		left:-4px;
	}
	
	.line-chart-frame{
		visibility: hidden;
	}
	
	#neighbName {
		font-size: 1.5em;
	}
	
	#medianIncomeRankTitle {
		top: 35px;
	}
	
	#medianIncomeRank {
		font-size: 2em;
		top: 40px;
	}
	
	#neighbNameTitle, #zipCodeTitle, #zipCode, 
	#jobsAccessibleTitle, #jobsAccessible, #unemploymentTitle,
	#unemployment, #populationTitle, #population, #medianIncomeTitle, #medianIncome, #jobTypesTitle, #jobTypes, #baJobsPerc, #baJobsTitle, #baJobs{
		visibility: hidden;
	}

	#alert {
		top: 190px;
		left: 40px;
	}

	#legendDesc {
		visibility: visible;
		font-size: .75em;
		top: 90px;
		left:10px;
	}

	#legend30 {
		visibility: visible;
		position: absolute;
		font-size: 1em;
		width: 40px;
		height: 8%;
		top: 105px;
		left: 10px;
	}
	#legend45 {
		visibility: visible;
		font-size: 1em;
		width: 40px;
		height: 8%;
		top: 105px;
		left:55px;
	}

	#legend60 {
		visibility: visible;
		font-size: 1em;
		width: 40px;
		height: 8%;
		top: 105px;
		left:100px;
	}

	#jobCentersLegend {
		visibility: visible;
		top: 135px;
		left:10px;
	}

	#jobCentersLegend img{
		visibility: visible;

	}

}