@font-face {
  font-family: 'franklin-book';
  src: url('../fonts/FRABK.woff2') format('woff2'), 
       url('../fonts/FRABK.woff') format('woff'), 
       url('../fonts/FRABK.ttf')  format('truetype'); 
}
@font-face {
  font-family: 'franklin-medium';
  src: url('../fonts/FRAMD.woff2') format('woff2'), 
       url('../fonts/FRAMD.woff') format('woff'), 
       url('../fonts/FRAMD.ttf')  format('truetype'); 
}
@font-face {
  font-family: 'franklin-medium-italic';
  src: url('../fonts/FRAMDIT.woff2') format('woff2'), 
       url('../fonts/FRAMDIT.woff') format('woff'), 
       url('../fonts/FRAMDIT.ttf')  format('truetype'); 
}

/* 
/* Base styles
*/

body {
    font-family: 'franklin-book', Arial, sans-serif;
}

/* 
/* utilities
*/
.left {float:left;}
.bold {font-family:'franklin-medium';}


/*
/* Header and logo
*/ 
div#header {
    height:80px;
    height:auto;
    padding: 10px 5px 15px;
    background-color:#fff;
    /*margin-bottom:.75em;*/
}

div#header h1 {
    color: #28558C;
}

div#header img {
    width:170px;
    background: #fff;
    float:right;
}


/* 
/* Select inputs in the top row
*/ 
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 55px;
    width: 100%;
    padding: 0 60px 0 15px;
    margin: 0 0 49px;
    font-size: 18px;
    white-space: nowrap;
    background: url(../images/submit_bg.jpg) center right no-repeat;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

div.row#selects-row div.select-title {
    text-transform: uppercase;
    font-size:14px;
}


/*
/* Decription row
*/ 
div#description-row div {
    font-size: 17px;
    margin-bottom:1em;
}


/*
/* Long text column
*/ 
div#long-text-wrapper {
    margin-top:1em;
}


/*
/* the map and legend
*/
#map {
    min-height:500px; 
}

div#map-legend {
    position: absolute;
    bottom:20px; right: 20px;
    text-align: center;
}

div#map-legend span {
    width:32px;
    height:12px;
    float:left;
    white-space: nowrap;
    overflow:visible;
    font-size:9px;
    line-height:4;
}


div#map-legend span.selected {
    border:2px solid #000;
    width: 34px; height: 14px;
    margin-top:-1px;
}

div#map-legend span.quintile0 {
    margin-right:10px;
}

div#map-legend-title {
    margin-bottom:4px;
}

/*base path styles, generally written over in drawMap()*/
path.states { stroke: #fff; stroke-width:1px; cursor: pointer; }


/*
/* State header
*/ 
table.state-header {
    background: #D6D6D6;
    width:100%;
    margin-top:1em;
    margin-bottom:10px;
}

table.state-header td#state-name span, table.state-header td#state-name a {
    text-decoration: none;
    vertical-align: middle;
    color: #333;
    font-family:'franklin-medium';
    font-size: 32px;
    cursor:pointer;
}
table.state-header td#state-name span:hover, table.state-header td#state-name a:hover {
    color: #111;
}


table.state-header td {
    vertical-align: middle;
    padding:0 15px 4px;
}

table.state-header td {
    padding-right:0;
    border-left: 3px solid #9e9e9e;
}

table.state-header td#state-name {
    width:100%;
}

div#state-long-text {
    color:#333;
    padding:1em;
    font-size:14pt;
}




/* 
/* TOOLTIPS
*/

/* styles that apply to all */
div.map-tooltip {
    position:absolute;
    z-index:100;
    width: auto;
    height: auto;
    display:none;
    text-align:center;
    font-size:9pt;
    color: #333;
    padding: 6px;
    background-color: white;
    border-radius:2px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    border-radius:2px;
}

div.map-tooltip:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

div.map-tooltip:after {
    left:90px;
}

div.map-tooltip {
    text-align:left;
    /*max-width:250px;*/
}

div.map-tooltip div.outer {
    margin:0.5em;
    font-size:10pt;
}

div.map-tooltip h1 {
    font-family:'franklin-medium';
    margin:3px 0 4px;
    font-size: 13pt;
}

div.map-tooltip span.fieldvalue {
    color: #073b5e;
    font-family:'franklin-medium';
}

div.map-tooltip div.map-tooltip-footer {
    margin-top: 3px;
    font-family:'franklin-medium';
    color: #073b5e;
}



/*styles that only apply below 400px*/
@media screen and (max-width: 400px) {

    #map { min-height:280px; }
    svg {margin:0 auto !important;};


}


/*
/* Media queries
*/



/*styles that only apply below 768px*/
@media screen and (max-width: 767px) {

    div#state-long-text {margin-bottom:1em; margin-top:0.5em;}

    div#state-long-text {padding:0;}
    select {margin-bottom:20px;}

    table.state-header td#state-name span, table.state-header td#state-name a {font-size:18px;}

    #map { min-height:350px; }
    svg {margin:0 auto 20px !important;};
}




/*styles that only apply below 415px*/
@media screen and (max-width: 414px) {
    div#map-legend span { height: 12px; line-height: 4}
    div#map-legend span.selected { height: 14px; }

    #map { min-height:280px; }
    svg {margin:0 auto !important;};

}