*:focus{
	outline: none;
}
body{
	font-family: Lato;
	color: #353535;
}
.mainContent{
	width: 1120px;
	margin: 0 auto;
    border-top: 1px solid #9D9D9D;
    margin-top: -143px;
    padding-top: 70px;
}
.mainContent.bottom{
	margin-top: 40px;
	padding-top: 60px;
}

.thinButton{
	padding: 8px 20px 8px 20px;
	background-color: #1696d2;
	color: #fff;
	display: inline-block;
	cursor: pointer;
}
.thinButton a, .thicButton a{
	color: #fff;
	text-decoration: none;
}
.thinButton:hover, .thicButton:hover{
	background-color: #353535;
}
.thicButton{
	padding: 13px 20px 13px 20px;
	background-color: #1696d2;
	color: #fff;
	display: inline-block;
	cursor: pointer;
	margin-right: 5px;
	margin-top: 20px;
	margin-bottom: 50px;
}
a{
	color: #1696d2;
	text-decoration: none;
}
a.scrollLink{
	cursor: pointer;
}
a.standard{
	color: #1696d2;
	text-decoration: none;
}
a.standard:hover{
	color: #353535;
}
a.inverted{
	color: #353535;
	text-decoration: none;
}
a.inverted:hover{
	color: #1696d2;
}
select{
	display: none;
}

/*********************************************************************************/
/*******************************       MENU      *********************************/
/*********************************************************************************/

#menuBar{
	/*position: fixed;*/
    /*width: 100%;*/
    /*background: #F5F5F5;*/
    margin-top: 150px;
    /*z-index: 98;*/
    /*height: 60px;*/
}

/*#tabWrapper{
	width: 69px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    background: none;
}*/
#tabWrapper a{
	/*text-align: center;*/
	color: #333;
}
.menuTab{
	display: inline-block;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: normal;
    margin-top: 17px;
}
.menuTab:hover{
	font-weight: bold;
	color: #1696d2;
}
.menuTab.home{
	width: 100%;
}
.menuTab.cities{
	width: 98px;
	position: relative;
	left: 1px;
	text-align: center;
}
.menuTab.groups{
    width: 124px;
    text-align: right;
}
.menuTab.menu{
	display: none;
}


/*********************************************************************************/
/***************************       MENU POPUP     ********************************/
/*********************************************************************************/

.menu.popup{
	position: fixed;
	top: 100px;
	width: 100%;
	background-color: #ffffff;
	border-top: 1px solid #9D9D9D;
	-webkit-box-shadow: 0px 16px 31px -11px rgba(105,105,105,0.62);
	-moz-box-shadow: 0px 16px 31px -11px rgba(105,105,105,0.62);
	box-shadow: 0px 16px 31px -11px rgba(105,105,105,0.62);
	z-index: 9999;
}
.menu.popup:after, .menu.popup:before {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.city.menu.popup:after, .city.menu.popup:before{
	left: calc(50% - 28px);
}
.group.menu.popup:after, .group.menu.popup:before{
	left: calc(50% + 110px);
}
.menu.popup:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 12px;
	margin-left: -12px;
}
.menu.popup:before {
	border-color: rgba(157, 157, 157, 0);
	border-bottom-color: #9D9D9D;
	border-width: 14px;
	margin-left: -14px;
}

.colContainer{
	width: 1027px;
	margin: 0 auto;
}
.popupColumn{
    display: inline-block;
    width: 20%;
    font-size: 16px;
    padding-top: 40px;
    padding-bottom: 40px;
}
.popupCity{
	padding-top: 10px;
	padding-bottom: 10px;
	cursor: pointer;
}
.popupCity:hover{
	font-weight: bold;
	color: #1696d2;
}

.popupRow{
	padding-bottom: 30px;
	padding-top: 30px;
	border-bottom: 1px solid #9D9D9D
}
.popupRow_first{
	margin-top: 20px;
}
.popupRow_last{
	margin-bottom: 20px;
	border-bottom: none;
}
.popupGroup{
	font-size: 18px;
    line-height: 1.2;
    display: inline-block;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
    width: 280px;
    padding-left: 9px;
    margin: 20px;
}


/*********************************************************************************/
/***************************       HOME TITLE     ********************************/
/*********************************************************************************/
#titleContainer{
	width: 100%;
	border-bottom: 1px solid #9D9D9D;
    padding-bottom: 60px;
}
#title, #subtitle{
	display: block;
	font-size: 40px;
	width: 100%;
	text-align: center;
}
#title{
    margin: 0 auto;
    margin-top: 260px;
    font-weight: bold;
    width: 83%;
    text-align: left;
}
#datePublished{
	color: #707070;
	font-style: italic;
	font-size: 20px;
    width: 83%;
    text-align: left;
    margin: 0 auto;
    margin-top: 10px;
    /*font-weight: 300;*/
}
#subtitle{
	font-size: 14px;
	color: #333333;
	margin-top: 10px;
	/*margin-bottom: 50px;*/
}
.introText{
    text-align: left;
    width: 83%;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 20px;
    /*font-weight: 300;*/
    line-height: 1.5;
    color: #696969;
}
#titleNavContainer{
	width: 528px;
	margin: 0 auto;
}
#titleNavContainer a{
	font-size: 22px;
    color: #000;
    /*font-weight: 300;*/
    display: inline-block;
    margin-right: 18px;
    margin-left: 18px;
    margin-top: 40px;
}
#titleNavContainer a:hover{
	color: #1696d2;
}
#titleNavContainer a svg{
	margin-left: 10px;
}
#csvDownload img{
    width: 20px;
    position: relative;
    top: 3px;
    margin-left: 10px;
}

/*********************************************************************************/
/********************      PAGE TEXT COMPONENTS      *****************************/
/*********************************************************************************/
#questionTitle{
    font-size: 30px;
    font-weight: bold;
    width: 83%;
    margin-left: 17%;
    text-align: center;
    margin-top: 65px;
	margin-bottom: 10px;
}
#questionContainer{
	display: inline-block;
	float: left;
    width: 16.666%;
    border-right: 1px solid #707070;
    position: relative;
}
#questionContainer.change{
	width: 170px !important;
}
#questionContainer.map{
	height: 523px;
}
/*#popupContainer, #questionContainer{
	margin-top: 30px;
}*/
/*#popupContainer{
	width: 83%;
}*/
#popupContainer.change{
	width: calc(100% - 172px)!important;
}
#questionMenuLabel{
	font-size: 16px;
    /*font-weight: 300;*/
    margin-left: 10px;
    margin-bottom: 40px;
    text-decoration: underline;
}
#questionContainer .questionMenu{
	width: calc(100% - 20px);
	font-size: 16px;
	color: #12719E;
	margin-bottom: 28px;
	padding-left: 10px;
	cursor: pointer;
    font-weight: 500;
}
#questionContainer .questionMenu.active{
	font-weight: bold;
	border-left: 1px solid #707070;
}
.questionMenu.map{
	color: #0A4C6A !important;
    text-transform: uppercase;
    position: absolute;
    top: -142px;
    width: 210px !important;
    padding-left: 0px !important;
    font-size: 20px !important;
}
.questionMenu.map img{
	height: 38px;
	top: 13px;
	padding-right: 20px;
	position: relative;
}
.questionMenu.map.active{
	display: none;
}
.questionMenu.map.cityPage{
	top: 10px;
	cursor: pointer;
}
.questionMenu:hover{
	color: #0A4C6A !important;
    font-weight: 600 !important;
}
.questionMenu.noMap{
	border-left: 1px solid white;
}

#graphContainer, #sidebarContainer{
	display: inline-block;
	float: left;
}
body.cityPage #graphContainer{
	width: 100%;
}
#graphContainer{
	width: 65%;
	/*margin-left: 5%;*/
}
#graphContainer.mapQuestion{
	width: 70%;
	margin-left: 0%;
}
#sidebarContainer.healthQuestion, #sidebarContainer.sizeQuestion{
	width: calc(20% - 40px);
    margin-right: 20px;
}
#sidebarContainer.changeQuestion{
	width: 100%;
	display: block;
	margin-left: 20px;
	float: none;
}
#graphContainer.changeQuestion{
	width: 100%;
	margin-left: 20px;
	position: relative;
}
#sidebarContainer{
	padding-left: 20px;
	display: inline-block;
	width: 240px;
	float: left;
}
#sidebarContainer.map{
	display: none;
}
#paragraphContainer.sizeQuestion, #paragraphContainer.healthQuestion{
	width: 100%;
    margin-top: -18px;
    margin-bottom: 60px;
    font-size: 16px;
}
#legendContainer.scatter{
	position: relative;
    width: 142px;
}

/*********************************************************************************/
/*****************************       LEGEND      *********************************/
/*********************************************************************************/
.mapQuestion #legendContainer{
	width: 140px;
    position: absolute;
    top: 250px;
    right: 0;
}
#legend-title{
	color: #414141;
    border-bottom: 1px solid #707070;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 3px;
    margin-bottom: 10px;
}
.legendDot{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-bottom: 5px;
    cursor: pointer;
}
#legend-more, #legend-less{
	font-size: 14px;
    font-weight: bold;
    color: #707070;
    width: 60px;
    position: absolute;
    left: 30px;
}
#legend-more{
    top: 29px;
}
#legend-less{
	top: 145px;
}
/*********************************************************************************/
/*******************************       MAP      **********************************/
/*********************************************************************************/
#noteContainer{
    font-size: 14px;
    font-style: italic;
    margin-bottom: 7px;
}

#graphContainer.mapQuestion {
	position: relative;
	/*margin-top: -55px;*/
	height: auto;
    width: 80%;
    margin: 0 10%;
    padding: 5% 0;
}
.mapQuestion #inclusionContainer{
	margin-top: 25px;
}
.mapQuestion #plotContainer{
	position: relative;
    width: 80%;
}
.mapQuestion #plotContainer svg{
	/*cursor: pointer;*/
	overflow: hidden;
}
#zoomOut{
    position: absolute;
    bottom: 10px;
    right: 16px;
    background: rgba(0,0,0,.8);
    padding: 10px;
    color: white;
    cursor: zoom-out;
    opacity: 0;
}

#homeMap, #groupMap{
	cursor: pointer;
	width: 100%;
    position: absolute;
    top: 270px;
}
#homeMap{
	top: 270px;
}
#groupMap{
	top: -10px;
}
.states {
  fill: #9D9D9D;
  stroke: #fff;
  stroke-width: 1px;
  stroke-linejoin: round;
  stroke-linecap: round;
  cursor: zoom-in;
}
.mapQuestion .dot{
	pointer-events: none;
}
.states.hover{
	fill: #d2d2d2;
    /*stroke: #353535;*/
    /*stroke-width: 2px;*/
}
.cityText{
	font-family: Lato;
	font-size: 14px;
	font-weight: bold;
}

.cell-path {
  fill: none;
  stroke: none;
  pointer-events: all;
}
.cell-path.grab{
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: pointer;
}
.cell-path.grabbing{
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grabing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

/*********************************************************************************/
/*****************************       BODY COPY      ******************************/
/*********************************************************************************/
#homeCopy{
    display: block;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.copyHeader{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0px;
    margin-top: 35px;
}
.copyP, .copyUl{
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 22px;
}
#customPrintSpacer{
	margin-top: -28px;
}
.copyUl{
	padding-left: 21px;
	width: calc(100% - 21px);
    margin-bottom: 0;
}
.copyUl li{
	text-align: left;
    list-style: initial;
    padding-left: 20px;
    margin-bottom: 30px;
}

.copyOl {
    line-height: 1.65;
}

.copyOl li {
    text-align: left;
    padding-left: 20px;
    padding-bottom: 20px;
}

/*********************************************************************************/
/*****************************      HOME FOOTER      *****************************/
/*********************************************************************************/

#footerContainer{
	margin-top: 90px;
	background-color: #F5F5F5;
}
#footerContent{
	width: 700px;
	margin: 0 auto;
}
.footerHeader{
	margin-top: 50px;
	margin-bottom: 8px;
	font-size: 34px;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
}
#topFooterHeader{
	padding-top: 44px;
}
.footerAbout, .footerCredits, .footerSpecialCredit{
    font-size: 16px;
    line-height: 1.65;
}
.footerCredits, .footerSpecialCredit{
	font-size: 14px;
	font-style: italic;
	line-height: 22px;
}
#bottomFooterCredits{
	margin-bottom: 45px;
}
.creditsHeader{
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
}
.creditsNames{
	margin-bottom: 30px;
	margin-top: 5px;
	font-size: 16px;
    line-height: 1.65;
}
#copyright{
	margin-bottom: 100px;
	display: inline-block;
}
.footerButton{
	display: inline-block;
    width: 135px;
    border: 1px solid #333;
    cursor: pointer;
    font: 13px Lato;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
    margin-right: 10px;
}
.footerButton:hover{
	background: #12719E;
	color: #fff;
	font-weight: bold;
}


/*********************************************************************************/
/****************************      SCATTER PLOT      *****************************/
/*********************************************************************************/
#scatterSvg{
	cursor: pointer;
	margin-top: 20px;
	margin-right: 20px;
	position: relative;
	pointer-events: visible;
}
.scatterTopNote{
	position: relative;
	top: 36px;
	font-size: 14px;
	font-style: italic;
}
.scatterTopNote.topSize{
	top: 61px;
}
/*.dot.hover{
	fill: #ec008b;
}*/
.fitLine{
	stroke: #ec008b;
	fill: none;
	stroke-width: 2px;
}
.axis line{
	stroke: #dedddd;

}
.axis path{
	display: none;
}
.axis text{
	font-size: 12px;
	font-family: Lato;
}

.axisLabel{
	position: absolute;
	text-transform: uppercase;
	color: #656565;
	font-size: 16px;
	font-weight: normal;
}
#ml_y_1{
	top: 90px;
    left: 94%;
}
#ml_y_2{
	top: 450px;
    left: 94%;
}
#ml_x_1.size{
	bottom: 40px;
    left: 0px;
}
#ml_x_2.size{
	bottom: 40px;
    right: 62px;
}
#ml_x_1.econHealth{
	top: 0px;
    left: 0px;
}
#ml_x_2.econHealth{
	top: 0px;
    right: 62px;
}
.axisLabel.rotate {
	/* Safari */
	-webkit-transform: rotate(90deg);

	/* Firefox */
	-moz-transform: rotate(90deg);

	/* IE */
	-ms-transform: rotate(90deg);

	/* Opera */
	-o-transform: rotate(-90deg);

	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}




/*********************************************************************************/
/***********************      CHANGE LINE CHARTS      ****************************/
/*********************************************************************************/


.chartDiv{
	border: 1px solid #dedddd;
/*	margin-right: 20px;
	margin-bottom: 30px;
	display: inline-block;
	float: left;*/
	position: absolute;
}
.chartDiv svg{
	cursor: pointer;
}
svg.clone{
	pointer-events: none;
}
.changeLine{
	stroke-width: 2px;
	fill: none;
}
.changeDot{
	stroke: none;
}
.changeLine.rank{
	stroke: #12719E;
}
.changeDot.rank{
	fill: #12719E;
}
.changeLine.econHealth{
	stroke: #F7C100;
}
.changeDot.econHealth{
	fill: #F7C100;
}
.changeLine.comparison{
	stroke: #919191;
}
.changeDot.comparison{
	fill: #919191;
}
.chartTitle{
	margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
}
.chartTitle span{
	margin-right: 10px;
	float: right;
}
.moreDiv.Citypctnonwhite .chartSubtitle{
	margin-bottom: 0px;
}
.chartSubtitle{
	font-size: 12px;
	margin-left: 10px;
    margin-top: 5px;
    width: 200px;
}
.moreDiv .chartSubtitle{
	margin-bottom: 17px
}
/*.chartSubtitle .inclSpan{
    background: rgba(18,113,158,.8);
    padding-left: 3px;
    padding-right: 3px;
    color: white;

}

.chartSubtitle .healthSpan{
    background: rgba(253,191,17,.8);
    padding-left: 3px;
    padding-right: 3px;
    color: #333;

}
*/
.smallTT text{
	font-size: 12px;
}
.smallTT{
	pointer-events: none;
}
/*********************************************************************************/
/******************************      TOOL TIPS      ******************************/
/*********************************************************************************/
#tt-container{
	position: absolute;
	background: #eeeeee;
	padding: 12px;
	z-index: 99999;
}
#tt-container.left.down{
	-moz-box-shadow:    -3px 5px 16px 3px rgba(0,0,0,.3);
	-webkit-box-shadow: -3px 5px 16px 3px rgba(0,0,0,.3);
	box-shadow:         -3px 5px 16px 3px rgba(0,0,0,.3);
}
#tt-container.right.down{
	-moz-box-shadow:    4px 5px 16px 3px rgba(0,0,0,.3);
	-webkit-box-shadow: 4px 5px 16px 3px rgba(0,0,0,.3);
	box-shadow:         4px 5px 16px 3px rgba(0,0,0,.3);
}
#tt-container.left.up{
	-moz-box-shadow:    -3px -2px 16px 3px rgba(0,0,0,.3);
	-webkit-box-shadow: -3px -2px 16px 3px rgba(0,0,0,.3);
	box-shadow:         -3px -2px 16px 3px rgba(0,0,0,.3);
}
#tt-container.right.up{
	-moz-box-shadow:    4px -2px 16px 3px rgba(0,0,0,.3);
	-webkit-box-shadow: 4px -2px 16px 3px rgba(0,0,0,.3);
	box-shadow:         4px -2px 16px 3px rgba(0,0,0,.3);
}

#tt-title{
	font-family: Lato;
	font-size: 20px;
	color: #666666;
	font-weight: bold;
}
#tt-title svg{
	float: right;
	cursor: pointer;
	padding-top: 2px;
}
.tt-text{
    padding-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #666666;
}
#tt-click a{
	font-size: 14px;
    position: absolute;
    bottom: 8px;
    right: 11px;
}
#tt-click a svg{
	padding-left: 5px;
}

/*********************************************************************************/
/****************************       CITY PAGE      *******************************/
/*********************************************************************************/
body.cityPage #popupContainer{
	width: 100%;
}
body.cityPage #questionContainer{
	display: none;
}
#topContainer{
	position: relative;
}
#dropdownContainer{
    position: absolute;
    top: 10px;
    right: 56px;
}
#dropdownViewOtherCity{
    font-size: 14px;
    position: absolute;
    /*bottom: -22px;*/
    top: 64px;
    right: 0px;
    font-weight: bold;
    opacity: 0;
}
#topContainerLegend{
    position: relative;
    display: block;
    width: 100%;
    height: 7px;
    padding-top: 104px;
    margin-bottom: 18px;
    pointer-events: none;
}
.topLegend-symbol{
    margin-top: 5px;
    margin-right: -12px;
}
.topLegend-symbol.thisCity{
	background: #12719E;
	margin-left: 18px;
}
.topLegend-symbol.newCity{
	background: #919191;
}
.newCity{
	opacity: 0;
}
#removeCity{
    position: absolute;
    color: rgb(157, 157, 157);
    top: 24px;
    right: 475px;
    font-size: 16px;
    text-decoration: underline;
    font-style: italic;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
}
#removeCity svg{
	padding-left: 8px;
}
#topContainerLegend div{
	float: right;
}
.topDiv, .moreDiv{
	display: inline-block;
}
.topDiv{
	position: relative;
    border-left: 1px solid #BCBCBC;
    height: auto;
    margin-bottom: 10px;
    margin-top: 50px;
    margin-right: 30px;
}
.topDiv svg{
	/*height: 254px;*/
}
.topDiv.active{
	background-color: #F5F5F5;
}
.topDiv .chartTitle{
	font-size: 18px;
}
.clone{
	position: absolute;
	/*top: 0px;*/
	left: 0px;

}
#moreContainer{
	/*width: 90%;*/
    /*margin: 0 auto;*/
    background: #F5F5F5;
    position: relative;
}
#more-head{
	width: 880px;
    margin: 0 auto;
    font-size: 30px;
    font-weight: bold;
    border-bottom: 1px solid #707070;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
}
#more-navContainer{
	display: block;
    width: 500px;
    margin: 0 auto;
    margin-bottom: 40px;
}
#more-navContainer .nav{
	display: inline-block;
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
}
#more-navContainer .nav.econ, #more-navContainer .nav.race{
	margin-right: 10px;
	padding-right: 10px;
	border-right: 1px solid #707070;
}
#more-navContainer .nav.active{
	font-weight: bold;
}
.moreChartContainer{
	width: 880px;
	padding-bottom: 30px;
	margin: 0 auto;
	position: relative;
}
.moreDiv{
	background: white;
    margin-right: 10px;
    border: 1px solid #CCCCCC;
    width: 281px;
    margin-bottom: 10px;
    vertical-align: top;
}
.moreDiv .chartTitle{
	width: 190px;
}
.moreAxisLabel{
	font-size: 14px;
	color: #353535;
}
.moreAxisArrow{
	stroke: #353535;
	fill: none;
	stroke-width: 1;
}
#moreLegendContainer{
	position: absolute;
    top: -23px;
    right: 10px;
}
.moreLegend-text, .topLegend-text{
    display: inline-block;
    text-align: right;
    font-size: 14px;
    margin-right: 8px;
    margin-left: 20px;
}
.moreLegend-symbol, .topLegend-symbol{
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: inline-block;
}
.moreLegend-symbol.all{
	background: #fdbf11;
}
.moreLegend-symbol.city{
	background: #12719E;
}

#consolidatedNoteContainer{
    margin-left: calc(50% - 350px - 5%);
    margin-top: 40px;
    width: 700px;
    margin-bottom: 60px;
    font-style: italic;
    font-size: 16px;
}
.noteHeader{
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 20px;
}
.noteText{
	line-height: 26px;
}

/*********************************************************************************/
/**************************      CITY SEARCH      ********************************/
/*********************************************************************************/

#searchContainer{
	width: 100%;
    display: inline-block;
    background: #696969;
    height: 102px;
    position: relative;
}
#searchContainer div.ui-widget{
	width: 682px;
    top: 19px;
    margin: 0 auto;
    position: relative;
}
#searchContainer .custom-combobox-input.ui-widget.ui-widget-content.ui-autocomplete-input{
	width: 682px;
    height: 60px;
    border: 1px solid #707070;
    border-radius: 0px;
    background: white;
}
#searchContainer .ui-button .ui-icon {
    background-image: url(../img/search-icon.png);
}
#searchContainer .ui-button.ui-widget.ui-button-icon-only.custom-combobox-toggle.ui-corner-right{
	width: 66px;
	height: 63px;
	position: absolute;
	top: 4px;
	right: -20px;
	background: none;
	border: none;
}
#searchContainer .ui-button-icon.ui-icon.ui-icon-triangle-1-s{
	width: 62px;
	height: 62px;
	background-size: 38px;
	top: 7px;
	left: 8px;
	background-position-x: 21px;
	background-position-y: 14px;
}
#searchContainer input.custom-combobox-input.ui-widget.ui-widget-content.ui-state-default.ui-corner-left.ui-autocomplete-input{
    font-family: Lato;
    font-size: 21px;
    padding-left: 23px	;
    font-weight: bold;
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front{
	width: 420px;
    padding-left: 20px	;
}
ul.ui-widget.ui-autocomplete li.ui-menu-item{
	font-family: Lato;
    width: 50%;
    text-align: left;
    float: left;
}

.ui-state-active{
    border: 1px solid #1696d2 !important;
    background: #1696d2 !important;
    cursor: pointer;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fdbf11 !important;
	background: #fdbf11 !important;
	color: #ffffff !important;
	font-family: Lato;
}


/*********************************************************************************/
/**************************      CITY DROPDOWN      ******************************/
/*********************************************************************************/

/*#dropdownContainer{
	width: 100%;
    display: inline-block;
    background: #696969;
    height: 102px;
    position: relative;
}*/
#dropdownContainer div.ui-widget{
	width: 382px;
    top: 19px;
    margin: 0 auto;
    position: relative;
}
#dropdownContainer .custom-combobox-input.ui-widget.ui-widget-content.ui-autocomplete-input{
	width: 382px;
    height: 43px;
    border: 1px solid #707070;
    border-radius: 0px;
    background: white;
}
#dropdownContainer .ui-button .ui-icon {
    background-image: url(../img/cityDropdownArrow.png);
}
#dropdownContainer .ui-button.ui-widget.ui-button-icon-only.custom-combobox-toggle.ui-corner-right{
	width: 66px;
	height: 63px;
	position: absolute;
	top: 4px;
	right: -20px;
	background: none;
	border: none;
}
#dropdownContainer .ui-button-icon.ui-icon.ui-icon-triangle-1-s{
    width: 62px;
    height: 62px;
    background-size: 32px;
    top: 8px;
    left: -12px;
	background-position-x: 21px;
	background-position-y: 14px;
}
#dropdownContainer input.custom-combobox-input.ui-widget.ui-widget-content.ui-state-default.ui-corner-left.ui-autocomplete-input{
    font-family: Lato;
    font-size: 21px;
    padding-left: 23px	;
}



/*********************************************************************************/
/**********************      INCLUSION DROPDOWN      *****************************/
/*********************************************************************************/
#smallMenuLabel{
	font-size: 12px;
    color: #656565;
    margin-left: 17px;
    top: 4px;
    position: relative;
    margin-top: 4px;
}
#menuContainer{
    position: relative;
    top: 0px;
    background: #ffffff;
    margin-left: -20px;
    width: 100%;
    height: 50px;
    z-index: 2;
    border-bottom: 6px solid #ffffff;
}
#menuContainer .ui-selectmenu-text{
	font-family: Lato;
    font-size: 16px;
    top: -6px;
    left: 0px;
}
#menuContainer .ui-selectmenu-button.ui-button.ui-widget{
	background: none;
    border: none;
}
#menuContainer .ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s{
	background-image: url("../img/down-arrow.png");
    background-size: 14px;
    width: 19px;
    height: 21px;
    background-position-x: 2px;
    background-position-y: 6px;
    left: -12px;
    top: -1px;
}

/*********************************************************************************/
/*******************      SMALL MULTIPLE LEGEND      *****************************/
/*********************************************************************************/
#smallLegend{
	display: inline-block;
	float: right;
	margin-top: -10px;
}
.smallLegendContainer{
	display: inline-block;
	float: left;
}
.smallLegendContainer.left{
	margin-right: 20px;
}
.smallLegendLabel{
	font-size: 14px;
	display: block;
	float: right;
	clear: both;
}
.legendSymbol{
	margin-left: 10px;
	display: inline-block;
	width: 13px;
	height: 13px;
}
.legendSymbol.series{
	border-radius: 100%;
}
.legendSymbol.series.inclusion{
	background: #12719E;
}
.legendSymbol.series.health{
	background: #fdbf11;
}
.legendSymbol.recovery.rose{
	background: rgb(228, 243, 226);
}
.legendSymbol.recovery.fell{
	background: rgb(255, 204, 204);
}







}



/*********************************************************************************/
/**************************       YEAR SELECT      *******************************/
/*********************************************************************************/
.yearSelect{
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 20px;
	cursor: pointer !important;
	font-size: 18px;
}
.yearSelect.active{
	color: #1696d2;
}
.yearSelect text, .yearSelect circle{
	cursor: pointer;
}
#yearContainer{
	margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 0px;
    /*width: 406px;*/
}

/*********************************************************************************/
/*********************       INCLUSION SELECT      *******************************/
/*********************************************************************************/
#inclusionContainer{
	position: relative;
    width: 100%;
}
.sizeQuestion #inclusionContainer, .healthQuestion #inclusionContainer{
	left: -14.2%;
}

.inclusionSelect{
    display: inline-block;
    margin-right: 0px;
    margin-bottom: 40px;
    cursor: pointer;
    font-size: 14px;
    width: calc(33% - 40px);
    border: 1px solid #95989A;
    border-right: none;
    padding: 10px 20px 10px 20px;
    text-align: center;
    color: #414141;
}
.inclusionSelect:nth-child(3) {
    border-right: 1px solid #95989A;
}
.inclusionSelect.active{
	color: #ffffff;
	font-weight: bold;
	background: #353535
}
.inclusionSelect:hover{
	color: #555555;
	font-weight: bold;
	background: #ECECEC

}

.infoContainer{
    position: absolute;
    border: 2px solid #12719E;
    border-radius: 100%;
 	top: 5px;
    right: -40px;
    cursor: pointer;
    width: 26px;
    height: 26px;
}
.infoContainer.changePage{
    left: 235px;
    top: 16px;
}
.infoContainer span{
    color: #12719E;
    font-size: 17px;
    position: absolute;
    top: 2px;
    left: 10px;
}
.infoPopup{
	position: absolute;
    top: -70px;
    left: 34px;
    -webkit-box-shadow: 0px 16px 31px -11px rgba(105,105,105,0.62);
    -moz-box-shadow: 0px 16px 31px -11px rgba(105,105,105,0.62);
    box-shadow: 0px 16px 31px -11px rgba(105,105,105,0.62);
    background: #eeeeee;
    padding: 10px;
}
.infoPopupTop{
	font-size: 16px;
    padding-bottom: 20px;
}
.infoPopupLink{
	float: right;
    font-size: 14px;
    color: #12719E;
    font-weight: bold;
}
/*********************************************************************************/
/**************************       SCALE SELECT      ******************************/
/*********************************************************************************/
#toggleContainer{
	width: 340px;
	margin: 0 auto;
	position: relative;
    margin-top: -34px;
    margin-bottom: -70px;
    z-index: 2;
}
#scaleLabel{
	color: #ec008b;
	font-weight: bold;
	font-size: 18px;
	display: inline-block;
	padding-right: 10px;
}
.scaleSelect{
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 20px;
	cursor: pointer;
	font-size: 18px;
}
.scaleSelect.active{
	color: #1696d2;
}
#sliderContainer{
	display: inline-block;
    width: 51px;
    border: 2px solid #707070;
    height: 28px;
    margin-right: 10px;
    border-radius: 100px;
    top: 11px;
    position: relative;
    cursor: pointer;
}
#sliderButton{
    display: inline-block;
    background: #ec008b;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    position: absolute;
    left: 194px;
    top: 15px;
    cursor: pointer;
}


/*********************************************************************************/
/*************************      PRINT PAGE      **********************************/
/*********************************************************************************/
.printLogo{
	display: none;
}
body.print .printLogo{
	display: block;
    width: 430px;
    float: right;
}
.print.cover{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
}
.print.page{
	height: 320mm;
	position: relative;
}
.print.container, body.print .mainContent, body.print #footerContainer, body.print #footerContent{
	width: 220mm;
	overflow: hidden;
	margin: 0px;
}

body.print .mainContent{
	padding-top: 0px;
    border: none;
}
body.print #titleContainer{
	border: none;
	padding-bottom: 0px;
}
body.print #datePublished{
	font-size: 14px;
    display: block;
    margin: 0px;
    margin-bottom: 20px;
    margin-top: -7px;
}
body.print #popupContainer{
	width: 230mm;
}
body.print #graphContainer{
	margin-left: 0px;
}
body.print #topContainer{
	height: 250px;
	border-bottom: 1px solid #959595;
}
body.print #title, body.print #subtitle{
	display: inline-block;
	font-size: 28px;
	width: auto;
	margin-bottom: 8px;
	margin-top: 12px;
}
body.print #menuBar, body.print #header-pinned,  body.print #searchContainer, body.print #titleNavContainer, body.print #dropdownContainer, body.print .questionMenu, body.print #more-head, body.print #more-navContainer {
	display: none;
}
body.print #questionTitle{
	display: none;
}
body.print #footerContainer{
	background: none;
}
body.print .footerButton{
	display: none !important;
}
body.print .introText{
    margin: 0;
    font-size: 16px;
    font-style: italic;
    line-height: 1.2;
    margin-bottom: 15px;
}
body.print .topDiv{
	position: relative;
    border-left: none;
    height: auto;
    margin-right: 0px;
}
body.print .topDiv.active{
	background-color: transparent;
}
body.print #moreContainer{
	background: none;
	margin-top: 30px;
	width: 100%;
}
body.print .moreDiv{
	margin-right: 2mm;
    margin-left: 1mm;
    margin-top: 5px;
    margin-bottom: 46px;
    width: 51mm;
    border: 1px solid #ffffff;
}
body.print .moreDiv .chartSubtitle {
    margin-bottom: 0px;
}
body.print .moreDiv.racialeducationgap{
	margin-top: -40px;
}
body.print #moreLegendContainer{
	right: -530px;
    top: 0px;
    position: relative;
}
body.print .moreLegend-symbol.city {
    border: 5px solid #12719E;
    background: none;
    width: 0px;
    height: 0px;
}
body.print .moreLegend-symbol.all {
    border: 5px solid #fdbf11;
    background: none;
    width: 0px;
    height: 0px;
}
body.print .moreChartContainer {
    width: 220mm;
    padding-bottom: 30px;
    margin: 0px;
    position: relative;
    display: block !important;
}
body.print .printContainerHeader{
 	font-size: 26px;
    font-weight: bold;
    position: relative;
    height: 32px;
    border-left: 10px solid #D9D9D9;
    padding-left: 7px;
}

body.print #consolidatedNoteContainer{
	margin: 0px;
    font-size: 14px;
    line-height: 0px;
    margin-top: -40px;
}
body.print .noteHeader{
	font-size: 16px;
    margin-bottom: 12px;
}
body.print .noteText{
	line-height: 18px;
}
body.print #homeCopy{
    width: 220mm;
    margin: 0px;
    margin-top: 60px;
    border-top: 1px solid #959595;
    padding-top: 32px;
}
body.print .copyP, body.print .footerAbout{
	font-size: 16px;
    line-height: 20px;
    margin-bottom: 22px;
}
body.print .copyHeader{
	margin-bottom: 9px;
}
body.print .copyOl li{
	padding-bottom: 19px;
	line-height: 20px;
}
body.print .copyUl li{
	line-height: 20px;
}
body.print .footerCredits{
	margin-bottom: 30px;
    line-height: 20px;
    font-size: 14px;
}
body.print .creditsNames{
	margin-bottom: 20px;
}
body.print #copyright{
	margin-bottom: 40px;
    display: block;
}
body.print #customPrintSpacer{
	margin-top: -31px;
}
#printCover{
	display: none;
	width: 0px;
	height: 0px;
}
body.print #printCover{
	position: fixed;
	display: block;
	background: transparent;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 999;
}
@media print{
  @page {
    size: 210mm 297mm; /* portrait
    /* you can also specify margins here: */
    margin: 15mm;
   /*margin-right: 45mm;  for compatibility with both A4 and Letter */
  }
   body.print a:after{
   	 content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;
   }
   body.print .buttonLink:after{
   	content: none !important;
   }
   body.print .page-break { height:0; page-break-after:always; margin:0; border-top:none; }
}