/* 
general colors 
blue: 2876BC;
grey: 6e686a;

typology colors
ecc: FCE077; (yellow)
elem: 2BACC9; (teal)
k-8: 825C99; (purple)
middle: F3AF30; (orange)
high: E56E6E; (red)
spec: 12CC80; (green)

rating colors
excellent: 00AF53;
good: 97CD78;
fair: FECB67;
poor: F3AF33;
fail: E23234;
*/

html, body {
    font-weight: 400;
    font-family: 'nimbus-sans', sans-serif;
    background: #fff url('/img/bg.gif') repeat-x;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #6e686a;
    font-size: 1em;
}
a { 
    color: #2876BC;
}
a:hover { 
    text-decoration: none;
}
html, button, input, select, textarea, .pure-g [class *= "pure-u"], label, .selectize-control {
    /* Set your content font stack here: */
    color: #6e686a;
    font-size: 1em;
    line-height: 1.5em !important;
    font-family: 'nimbus-sans', sans-serif;
    text-align: left;
}
button{
    outline: 0;
    font-family: 'nimbus-sans-condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .11em;
    font-size: 1.1em;
    text-align: center;
}
button:active{
    opacity: 0.8;
}
strong{
    font-weight: 700;
}
li{
    list-style: none;
}
#wrapper{
    position: relative;
    min-width: 1280px;
    padding: 0 55px;
    text-align: left;
    margin: 0 auto;
    height: 100%;
    box-sizing: border-box;
}
#header{
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 207px; 
    box-sizing: border-box;
}
.header-top{
    height: 121px;
    width: 100%;
    box-sizing: border-box;
}
.header_logo{
    width: 500px;
    margin-top: 45px;
}
.landing_logo{
    width: 300px;
    margin-top: 40px;
}
.header-bottom{
    height: 84px;
    width: 100%;
    box-sizing: border-box;
}
.pure-g .header-text-nav, .pure-g .header-text-nav a{
    text-align: right;
    margin-top: 66px;
}
.header-text-nav a{
    color: #FECB66;
    text-transform: uppercase;
    text-decoration: none;
    margin-left: 35px;
    font-family: 'nimbus-sans-condensed' !important;
    font-size: 1.1em;
    letter-spacing: .11em;
}
.header-text-nav a:hover{
    color: #fff;
}
.header-tab-nav{
    height: 35px;
    margin-top: 35px;
}
.header-tab-nav div{
    background: url('../img/nav-tab.gif') no-repeat;
    color: #2876BC;
    width: 100px;
    height: 35px;
    display: inline-block;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    font-family: 'nimbus-sans';
    font-size: 1.1em;
    /*letter-spacing: .05em;*/
}

.header-tab-nav div.active{
    background: url('../img/nav-tab-active.gif') no-repeat;
    color: #2876BC;
}
.inactive{
    opacity: .1;
}
.header-school-search{
    text-align: right;
    margin-top: 20px;
}
.content-area{
    position: absolute;
    margin-top: 34px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 1170px;
}
.leaflet-container{
    font-family: 'nimbus-sans', sans-serif !important;
}

.page-title{
    color: #2876BC;
    font-family: 'nimbus-sans', sans-serif;  
    font-size: 2em;
    font-weight: 300;
    margin-bottom: 30px; 
}

/*controls and filters*/
.viz-control{
    position: absolute;
    background-color: #2176bc;
    background-color: rgba(33,118,188,.9);
    width: 194px;
    min-height: 26px;
    z-index: 1000;
    color: #fff;
    box-sizing: border-box;
    font-size: .8em;
    opacity: 0.9;
}

.key{
    background-color: #fff;
    background-color: rgba(255,255,255,.9);
    color: #6D6868;
    height: 127px;
    left: 20px;
    position: absolute;
    font-size: .9em;
    line-height: 1.8em;
    width: 150px;
    bottom: 20px;
    padding: 5px 0 0 0;
    border: solid 1px #ccc;
}
.key .title{
    font-family: 'nimbus-sans-condensed';
    letter-spacing: .11em;
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 5px;
}

.key.info_key{
    background-color: transparent;
    text-align: right;
}
.info_key img{
    cursor: pointer;
}

.map-index #typology_key, .map-index #typology_key_info{
    position: absolute;
    bottom:266px;
    left: 20px;
}
#viz #typology_key, #viz #typology_key_info{
    position: fixed;
    bottom: 225px;
    height: 127px;
    left: 70px;
}
#floodplain_key{
    position: absolute;
    width: 150px;
    bottom: 103px;
    height: 80px;
    padding: 10px;
}
#floodplain_key_info{
    bottom: 103px;
    height: 83px;
    border: none;
}
#efe_key{
    position: absolute;
    width: 150px;
    bottom: 20px;
    height: 80px;
    padding: 6px 10px;
    line-height: 1em;
}
#efe_key_info{
    bottom: 20px;
    height: 83px;
    border: none;
}
#expandable_key, #expandable_key_info{
    position: absolute;
    height: 70px;
    bottom: 20px;
}
#viz .key{
    font-size: .7em;
}
#viz #expandable_key{
    position: fixed;
    bottom: 400px;
    left: 210px;
}
#clover_key{
    padding: 10px 10px;
    height: 170px;
    font-size: .8em;
}
#clover_key_info{
    padding: 2px 2px;
    height: 170px;
    border: none;
}
#clover_key img{
    margin-left: -8px;
}
.map-index #clover_key_info{
    position: absolute;
    bottom: 93px;
}
#viz #clover_key{
    position: fixed;
    bottom: 50px;
    left: 70px;
}
#viz #clover_key_info{
    position: fixed;
    bottom: 50px;
    left: 70px;
}
#clover_key path {
    fill:#6D6868;
}
#clover_key text {
    font-size: 1em;
    fill:#FFF;
    /*text-transform: uppercase;*/
    text-anchor: middle;
    dominant-baseline: central;
}
.map-index #clover_key{
   	position: absolute;
	bottom: 92px;	
}
table{
    color: #fff;
    font-size: 1em;

}
.viz-control-bar{
    left: 20px;
    padding: 2px 15px;
    font-family: 'nimbus-sans-condensed';
    font-size: 1em;
    letter-spacing: .11em;
}
.viz-control-openclose{
    left: 222px;
    width: 26px;
    height: 28px;
    text-align: center;
    cursor: pointer;
    top: 55px;
    margin-left: auto;
    right: 217px;
}
.viz-control-openclose i{
    margin-top: 35%;
}
.viz-control-menu{
    padding: 3px 15px;
    display: none;
}
.viz-control-bar .clickable:last-of-type, .viz-control-menu .clickable:last-of-type{
    margin-bottom: 16px;
}
#rating-index{
	top: 20px;
    margin-left: auto;
    right: 20px;
	cursor: pointer;
}
#filters-bar{
    position: absolute;
    top: 55px;
    right: 20px;
    margin-left: auto;
}
#filters-bar div{
    font-family: 'nimbus-sans';
    font-size: .8em;
    line-height: .6em;
    letter-spacing: 0;
}
.filters-menu{
    top: 55px;
    width: 163px;
}
.filter-head{
    font-size: 1.2em;
    margin: 0px 0 10px 0px;
    font-weight: 700;
}
.filter-ctl{
    margin-right: 10px;
}

.filters-grades{margin-left: auto; right: 765px}
.filters-eras{margin-left: auto; right: 599px;}
.filters-typology{margin-left: auto; right: 958px}
.filters-neighborhoods{margin-left: auto; right: 246px;}

.viz-control-double-width{
    width: 350px;
}
.filters-grades{
    width: 190px;
}

.viz-control-radio {
    border: 2px solid #FFF;
    border-radius: 18px;
    height: 12px;
    width: 12px;
    margin: auto;
}
.viz-control-radio.active{
    background-color: #fff;
}
.viz-control-radio-large{
    height: 24px;
    width: 24px;
}

.clickable{
    cursor: pointer;
    height: 20px;
}
.clickable.active{
    color: #f6af31;
}
#filters-bar .clickable.active{
    color: #fff;
}

.viz-sorting-bar div{
	display: inline-block;
	width: 120px;
}
.viz-control-sorting{
	display: inline-block;
	width: 120px;
   	font-family: 'nimbus-sans-condensed';
    font-size: 1em;
    letter-spacing: .11em;
    padding:0px;
    color:#6e686a;
    width: auto;
    margin-left:10px;
    margin-right:10px;
    background-color:#FFF;
    border: 0;
    cursor: pointer;    
}

.viz-control-sorting.typology{
    margin-top: 40px;
    background-color: #fff;
    border: none;
}
.viz-control-sorting.hs{
    color: #E56E6E;
}
.viz-control-sorting.ms{
    color: #F3AF30;
}
.viz-control-sorting.k8{
    color: #825C99;
}
.viz-control-sorting.es{
    color: #2BACC9;
}
.viz-control-sorting.ecc{
    color: #FCE077;
}
.viz-control-sorting.sp{
    color: #12CC80;
}
.viz-control-sorting.active{
    background-color:#FFF;
    color:#2176bc;
    border-top: solid 3px #2176bc;
}

.viz-control-back{
	display: inline-block;
  	font-family: 'nimbus-sans-condensed';
    font-size: 1em;
    letter-spacing: .11em;
    width: 120px;
	color: #2176bc;
	margin-left:20px;
	cursor: pointer;
}

#compare-bar{
    margin-left: auto;
    right: 20px;
    top: 91px;
    background-color: #6D6868;
    background-color: rgba(109,104,104,.9);
    padding-bottom: 5px;
}
#compare-bar div{
    font-size: .9em;
    line-height: .6em;
    letter-spacing: 0;
}
#compare-bar div.button-container{
    width: 100%;
    text-align: right;
}
#compare-bar button{
    background-color: #fff;
    border: 0;
    margin-bottom: 5px;
    margin-top: 5px;
}
#compare-bar .clickable:first-of-type, #filters-bar .clickable:first-of-type{
    margin-top: 5px;
}

.map-marker{
    width: 12px;
    height: 12px;
    border-radius: 200px;
    border: 2px solid #fff;
}
.map-marker.ecc-marker{
    background-color: #FCE077;
}
.map-marker.es-marker{
    background-color: #2BACC9;
}
.map-marker.k8-marker{
    background-color: #825C99;
}
.map-marker.ms-marker{
    background-color: #F3AF30;
}
.map-marker.hs-marker{
    background-color: #E56E6E;
}
.map-marker.sp-marker{
    background-color: #12CC80;
}



.map-marker-score:first-of-type{
    margin-top: 10px;
}

#map{
    position: relative;
}


/* pop up */

.arrow_box {
    position: absolute;
    z-index: 2000;
    display:none;
    width: 250px;
    height: 185px;
    background: #FFFFFF;
    border: 2px solid #000000;
}
.arrow_box.small{
	width: 150px;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    /*border-color: rgba(255, 255, 255, 0);*/
    border-top-color: #FFFFFF;
    border-width: 20px;
    margin-left: -20px;
}

.arrow_box:before {
    /*border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;*/
    border-top-color: #FFFFFF;
    border-width: 23px;
    margin-left: -23px;
}
.arrow_box .school-name-container{
    height: 60px;
    width: 100%;
    display: inline-flex;
    /*box-sizing: border-box;*/
    margin-bottom: 0;
}
.arrow_box .school-name{
    display: block;
    margin: auto; 
    text-align: center;
    font-family: 'nimbus-sans';
    /*text-transform: uppercase;*/
    color: #FFFFFF;
    font-size: 1.1em;
    line-height: .9em;
}
.school-grades{
    font-size: .9em;
}
.arrow_box .school-deets{
    display: inline-block;
    width: 48.9%;
    height: 122px;
    box-sizing: border-box;
    overflow: hidden;
}
.arrow_box.small .school-deets{
	width: 100%;
}
.arrow_box .school-deets-score{
    border-right: 2px solid #FFFFFF;
}
.arrow_box .school-deets-buttons{
    padding-top: 30px;
    text-align: center;
    font-size: .9em;
}

.arrow_box.typology-es:before, .arrow_box.typology-es:after{ border-top-color: #2BACC9;}

.arrow_box.typology-ecc:before, .arrow_box.typology-ecc:after { border-top-color: #FCE077;}

.arrow_box.typology-hs:before, .arrow_box.typology-hs:after{ border-top-color: #E56E6E;}

.arrow_box.typology-k8:before, .arrow_box.typology-k8:after{ border-top-color: #825C99;}

.arrow_box.typology-ms:before, .arrow_box.typology-ms:after{ border-top-color: #F3AF30;}

.arrow_box.typology-sp:before, .arrow_box.typology-sp:after{ border-top-color:#12CC80;}

.school-deets button{
    background-color: #6e686a;
    border: 0;
    margin-bottom: 2px;
    color: #fff;
    width: 80%;
}

.popup_closer{
    position: absolute;
    top: 5px;
    right: 12px;
    cursor: pointer;
}
.popup_closer a{
    text-decoration: none;
    color: #fff !important;
}

/* pop up */

/* key pop up */


.key_arrow_box {
    position: absolute;
    z-index: 2000;
    display:none;
    width: 250px;
    background: #2876BC;
    border: 1px solid #000000;
    font-size: .8em;
    padding: 1px;
    box-sizing: border-box;
}

.key_arrow_box div {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    line-height: 1em;
}

.key_arrow_box .title{
    font-size: 1.1em;
    margin-bottom: 10px;
    font-weight: 700;
    color:#2876BC;
    height: 20px;
}

.key_arrow_box:after, .key_arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.key_arrow_box.offset:after, .key_arrow_box.offset:before {
    left: 20px;
}

.key_arrow_box:after {
    /*border-color: rgba(255, 255, 255, 0);*/
    border-top-color: #2876BC;
    border-width: 10px;
    margin-left: -10px;
}

.key_arrow_box:before {
    /*border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;*/
    border-top-color: #2876BC;
    border-width: 13px;
    margin-left: -13px;
}

.key_popup_closer{
    position: absolute;
    top: 5px;
    right: 5px;
    font-weight: 700;
    color: #2876BC;
    cursor: pointer;
}
.key_popup_closer a{
    text-decoration: none;
}

/* key pop up */

/* map markers */

.leaflet-overlay-pane circle{
    stroke: #FFF;
    stroke-width: 2;
    cursor: pointer;
}

g#map-item text{
    font-family: 'nimbus-sans-condensed';
    text-transform: uppercase;
    font-size: 1.3em;
}

/*end map markers */

/*clovers*/

g#item text{
    font-family: 'nimbus-sans-condensed';
    /*text-transform: uppercase;*/
    font-size: .9em;
}
g#item .petal text, g .petal text,g#map-item .petal text{
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'nimbus-sans', sans-serif;
    opacity:.6;
    text-anchor: middle;
    /*dominant-baseline: central;*/
}
.backPetal{
    fill:#DCDDDE;
}
.school-deets-score .backPetal{
    fill:#FFFFFF;
}

/* only color classes as they are used in several places */

.typology-es.petal, .dot-force.typology-es, .dot.typology-es, .bars.typology-es{ fill: #2BACC9; background-color: #2BACC9;}

.typology-ecc.petal, .dot-force.typology-ecc, .dot.typology-ecc, .bars.typology-ecc{ fill: #FCE077; background-color: #FCE077;}

.typology-hs.petal, .dot-force.typology-hs, .dot.typology-hs, .bars.typology-hs{ fill: #E56E6E; background-color: #E56E6E;}

.typology-k8.petal, .dot-force.typology-k8, .dot.typology-k8, .bars.typology-k8{ fill: #825C99; background-color: #825C99;}

.typology-ms.petal, .dot-force.typology-ms, .dot.typology-ms, .bars.typology-ms{ fill: #F3AF30; background-color: #F3AF30;}

.typology-sp.petal, .dot-force.typology-sp, .dot.typology-sp, .bars.typology-sp{ fill:#12CC80; background-color:#12CC80;}

.dot-force.no-color{  fill:#b2b6b9; background-color:#b2b6b9;}

/*.neutral { fill: #2876BC; background-color: #2876BC;} */
.neutral { fill: #999; background-color: #999;}
.shelter { fill: #2876BC; background-color: #2876BC;}

/*end clovers*/

.accordion{
    border-top: solid 2px #2876BC;
    margin: 18px 0;
}

.accordion:first-of-type{
    margin-top: 34px;
}

.pure-g .accordion-text{
    font-size: 1.5em;
    color: #2876BC;
    cursor: pointer;
}

.accordion-open div{
    width: 26px;
    height: 26px;
    float: right;
    text-align: center;
    color: #fff;
    background-color: #2876BC;
    cursor: pointer;
}

.accordion-hidden{
    display: none;
    margin-top: 8px;
}
.pure-g div.accordion-hidden-description{
    color: #6e686a;
}

.score-indicator{
    border-radius: 200px;
    margin: auto;
    margin-top: 5px;
    border: solid 2px #fff;
    display: inline-block;
    width: 20px;
    height: 20px;
}
.row-key .score-indicator{
    margin-right: 6px;
}

.score-5, .score-Excellent, .score-Minor, .score-Adequate{
    background-color: #00AF53;
    fill: #00AF53;
    /*width: 30px;
    height: 30px;*/
    /*margin-top: 10px;*/
}
.score-4, .score-Good, .score-Major{
    /*margin-top: 2px;*/
    background-color: #97CD78;
    /*width: 25px;
    height: 25px;*/
    /*margin-top: 12px;*/
}
.score-3, .score-Fair, .score-Moderate{
    /*margin-top: 5px;*/
    background-color: #FECB67;
    /*width: 20px;
    height: 20px;*/
    /*margin-top: 15px;*/
}
.score-2, .score-Poor, .score-Repair{
    /*margin-top: 7px;*/
    background-color: #F3AF33;
    /*width: 15px;
    height: 15px;*/
    /*margin-top: 18px;*/
}
.score-1, .score-Failing, .score-Replace, .score-Deficient{
    /*margin-top: 10px;*/
    background-color: #E23234;
    fill: #E23234;
    /*width: 10px;
    height: 10px;*/
    /*margin-top: 20px;*/
}
.score-NA, .score-, .score-NotPresent, .score-Not{
    margin-top: 10px;
    background-color: none;
    border: solid 1px #6e686a;
    width: 10px;
    height: 10px;
    margin-top: 20px;
}
.score-Not{
    margin-top: 10px;
}
.score-one-size{
    margin-top: 0;
    width: 9px;
    height: 9px;
    border: solid 1px #fff;
}
.score-NA.score-one-size{
    width: 6px;
    height: 6px;
    border: solid 1px #6e686a;
}
.score-large{
    width: 25px;
    height: 25px;
    background-color: #b2b6b9;
    fill: #b2b6b9;
}
.score-small{
    width: 12px;
    height: 12px;
    background-color: #b2b6b9;
    fill: #b2b6b9;
}

.pure-g .grid-label div{
    display: block;
    border-bottom: solid 1px #59585d;
    vertical-align: middle;
    background-color: #e8e8e8;
    height: 150px;
    color: #6e686a !important;
    /*text-transform: uppercase;*/
    font-size: 1.1em;
    padding: 50px 10px;
    /* text-align: center; */
    width: 100%;
    box-sizing: border-box;
}

.pure-g .grid-head div{
    position: relative;
    display: block;
    width: 100%;
    vertical-align: middle;
    height: 110px;
    box-sizing: border-box;
    color: #6e686a !important;
    /*text-transform: uppercase;*/
    text-align: center;
}

.grid-head{
    height: 100px;
    color: #fff !important;
    box-sizing: border-box;
    margin-top: 60px;
    background: url('../img/grid-head-line.png') repeat-x;
    background-position: 100px 50%;
}
.grid-title{
    text-align: left;
    padding-top: 50px;
    padding-left: 10px;
    background: none;
    font-weight: 700;
}
.grid-title div{
    text-align: left !important;
}
.grid-head-priority{
    text-transform: uppercase;
}
.grid-head-span{
    border-bottom: solid 1px #fff;
}
.grid-head-needs{
    position: absolute;
    left: 0px;
}
.grid-head-repeated{
    position: relative;
    top: -40px;
}
.grid-head-repeated div{
    top: 5px;
}
.grid-head-repeated div img{
    margin: auto;
}
.grid-head .grid-title{
    top: -20px;
}
.grid-head-span-repeated, .grid-head-span-repeated .pure-g{
    height: 110px;
    border-bottom: solid 1px #59585d;
}
.grid-head-span-repeated .grid-head-priority{
    top: -60px;
}

.grid-head-no-line{
    background-color: #f1f1f1;
}
.grid-head-box div{
    position: relative;
    top: 5px;
}