/*--------------------------+
 | Site: National Scorecard |
 | Part: Master styles      |
 +--------------------------*/

/* Imports
=====================================================================*/
@import url(//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

@font-face {
    font-family: "StateFaceRegular";
    src: url("../fonts/stateface/stateface-regular-webfont.eot");
    src: url("../fonts/stateface/stateface-regular-webfont.eot?#iefix") format("embedded-opentype"),
         url("../fonts/stateface/stateface-regular-webfont.woff") format("woff"),
         url("../fonts/stateface/stateface-regular-webfont.ttf") format("truetype"),
         url("../fonts/stateface/stateface-regular-webfont.svg#StateFaceRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}


/* Fonts
======================================================================*/
.map text { font-family: Muli, Arial, sans-serif; }
.filters i, .state-thumb, .us { font-family: "StateFaceRegular", Arial, sans-serif; }


/* Basics
======================================================================*/
:root {
    --rank1: #ba2c00;
    --rank2: #ff6a10;
    --rank3: #f1b510;
    --rank4: #8fb400;
    --rank5: #488700;
}

dd { margin: 0 0 24.5px; }
dd, dt { font-size: 18px; line-height: 2.3; }
nav { font-weight: bold; }
table { border-collapse: collapse; width: 100%; }
table p { margin: 0; }
td, th { border: 1px solid #ddd; padding: 0.3em 0.5em; vertical-align: top; }
tfoot td { font-weight: bold; }
th { background: #f2f2f2; font-weight: normal; vertical-align: bottom; }

/* Stock classes */
.c { text-align: center; }
.flat { list-style: none; margin-left: 0; }
.l { float: left; }
.r { float: right; }


/* Core layout
======================================================================*/
.clear { clear: both; }
.content { max-width: 1178px; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m { float: left; }
.c2r, .c3r { float: right; }
.c3l { margin-right: 3%; }
.c3l, .c3m, .c3r { width: 31%; }
ul.c2l, ul.c2r { list-style: none; margin-left: 0; }
.col4 .col { float: left; margin-right: 1%; width: 24%; }

/* Content */
#content { background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); margin: 0 auto; padding: 30px; max-width: 980px; }
#content-wrapper { background: #fff url(../images/bg.jpg) 50% 0; }

    /* Category */
    #category #content-primary { float: right; width: 66.23%; }
    #category #content-secondary { float: left; width: 30.7%; }
    
    /* National */
    #national #content-primary { float: right; width: 65.78%; }
    #national #content-secondary { float: left; width: 31.29%; }
    #national #content-secondary hr { margin: 20px 0; }
    

/* Content
======================================================================*/

/* Accordion */
.accordion { list-style: none; margin: 0 0 30px 0; padding: 0; }
.accordion-content { background: #fff; border: 1px solid #3b4350; font-size: 16px; line-height: 1.3; padding: 10px 15px 5px; }
.accordion-header { background: #f2f2f2; border: 1px solid #ddd; color: #464646; display: block; margin-bottom: -1px; padding: 10px; }
.accordion-header:hover { background: #c4c6ca; text-decoration: none; }
.accordion-header .fa { float: right; margin: 0.3em 0 0 0.5em; }
.accordion .current .accordion-header { background: #3b4350; border-color: #3b4350; color: #fff; }
.accordion > li:first-child .accordion-header { border-radius: 5px 5px 0 0; }
.accordion > li:last-child .accordion-header { border-radius: 0 0 5px 5px; }
.accordion > li:last-child.current .accordion-content { border-radius: 0 0 5px 5px; }
.accordion > li:last-child.current .accordion-header { border-radius: 0; }

/* AngularJS clickable elements */
a[data-ng-click], text[data-ng-click] { cursor: pointer; }

/* Callouts */
div.call-l, img.call-l { clear: left; }
div.call-r, img.call-r { clear: right; }
dt img.call-l { margin-top: 0; }
.call-l { float: left; margin: 3px 30px 0.5em 0; }
.call-r { float: right; margin: 3px 0 0.5em 30px; }
.call, div.call-l, div.call-r { font-size: 0.75em; }
.call img, .call-l img, .call-r img { border: 1px solid #ddd; display: block; }
.call img.icon, .call-l img.icon, .call-r img.icon { display: inline; }
.call, .call-l p, .call-r p { margin-bottom: 0.5em; }
.credit { color: #7f8183; font-size: 0.75em; letter-spacing: 0.01em; margin-bottom: 0.5em; text-align: right; }

/* Content areas */
#content-secondary p { line-height: 1.3; }

/* Core principles */
#core { overflow: hidden; margin-bottom: 30px; }
#core li { margin-bottom: 1em; }
#core li .fa { margin-right: 0.2em; }
#core ul { list-style: none; margin: 0; padding: 0; }

/* Dropdown */
.state-switcher .dropdown { display: inline-block; position: relative; }
.state-switcher .dropdown > a { display: inline-block; }
.state-switcher .dropdown > a:hover { text-decoration: none; }

.state-switcher .dropdown .menu {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    max-height: 350px;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    list-style: none;
    left: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    top: 31px;
    white-space: nowrap;
    z-index: 1000;
}

.state-switcher .dropdown .menu a { display: block; padding: 0.3em 1em; }
.state-switcher .dropdown .menu a:hover { background: #f0f0f0; text-decoration: none; }
.state-switcher .dropdown .menu li { display: block; margin: 0; }

.state-switcher .dropdown-toggle {
    border: 1px solid #ccc;
    display: inline-block;
    font-size: 18px;
    font-weight: 300;
    padding: 0.4em 0.8em;
    position: relative;
}

/* Fact sheet */
.fact-sheet h2 { margin: 0; }
.fact-sheet img { border: 1px solid #ddd; }

/* Filters */
.filters { font-size: 12px; font-weight: 700; line-height: 1; margin-bottom: 20px; text-transform: uppercase; }
.filters * { vertical-align: middle; }
.filters a { background: #000A2C; color: #fff; display: inline-block; padding: 1em 1.5em 0.9em; }
.filters a:hover { color: #FF9F00; opacity: 0.7; text-decoration: none; }
.filters .fa { font-size: 17px; }
.filters li { display: inline-block; margin: 0; }
.filters li.current a { color: #FF9F00; }
.filters .us { font-size: 17px; vertical-align: middle; }
.filters ul { display: inline-block; list-style: none; margin: 0 10px 0 0; padding: 0; }
.filters .views a { padding: 0.8em 1.5em 0.7em; }

/* Footnotes */
.footnotes { color: #777; font-size: 15px; }
.footnotes p { line-height: 1.8; }

/* Formula */
.formula { margin: 30px auto; text-align: center; width: 65%; }
.formula .denominator { border-top: 1px solid #000; margin-top: 20px; padding-top: 20px; }
.formula .numerator * { display: inline-block; vertical-align: middle; }
.formula .numerator .value { width: 40%; }

/* Hidden */
.hidden { display: none; }

/* Icons */
.fa-check-circle { color: #488700; }
.us { font-style: normal; font-weight: normal; text-transform: lowercase; }

/* US Map */
.map { height: 450px; width: 100%; }
.map .hover { cursor: pointer; stroke: black; stroke-opacity: 1; stroke-width: 3; }
.map path { fill: #ddd; stroke: #fff; stroke-linejoin: round; stroke-width: 2px; }
.map text { fill: #fff; font-size: 15px; }
.map text.outside { fill: #000; }

/* Map popup */
.map-popup {
    background: #fff;
    border: 1px solid #888;
    border-radius: 6px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
    font-size: 25px;
    font-weight: 300;
    padding: 0.7em;
    position: absolute;
    vertical-align: middle;
    z-index: 99;
}

.map-popup .mute { font-size: 25px; }

/* Muted text */
.mute { color: #777; font-size: 15px; }

/* Notes */
.note { font-size: 16px; line-height: 1.3; }

/* Partners */
.partners a:hover { border: 0; opacity: 0.5; text-decoration: none; }

/* Points tables */
.points { margin: 0.5em 0 2em; }
.points .values { width: 17%; text-align: center; }

/* Publications */
.pubs { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; list-style: none; margin-left: 0; }
.pubs a:hover { opacity: 0.7; }
.pubs img { border: 1px solid #ddd; box-sizing: border-box; display: block; margin-bottom: 10px; width: 100%; }
.pubs li { width: 31.29%; }

/* Ranking charts */
#rankings .bar { float: right; height: 20px; width: 55%; }
#rankings .highlight { background: #f8f083; }
#rankings .inactive, #rankings .inactive a, #rankings .inactive .mute { color: #999; }
#rankings .label { float: left; width: 42%; }
#rankings .name { width: 24%; }
#rankings .national * { background: #3b4350; color: #fff; }
#rankings .national .mute { color: #fff; }
#rankings .national .bar span { border: 1px solid #fff; }
#rankings .notes { width: 26%; }
#rankings .score { width: 45%; }
#rankings .score .bar span { border-radius: 3px; }
#rankings td { border: 0; padding: 2px 0.3em; vertical-align: middle; }
#rankings td, #rankings th { font-size: 16px; }
#rankings th { background: 0; border-width: 0 0 1px 0; padding: 0 0 0.1em; }
#rankings tr { position: relative; }

    /* Annotations */
    #rankings .annotation { left: 0; position: relative; top: 0; width: 100%; }
    #rankings .annotation-content { background: #fff; border: 1px solid #ddd; padding: 10px 15px; position: absolute; right: -5px; top: 0; width: 90%; z-index: 1000; }
    
    /* National */
    #national #rankings .bar { width: 84%; }
    #national #rankings .label { width: 15%; }
    #national #rankings .score { width: 76%; }
    #national #rankings .notes { width: 1%; }

/* Ranks */
.rank { font-size: 27px; letter-spacing: 0.06em; white-space: nowrap; }
.rank .fa-star-o { color: #ddd; }
.ranks { list-style: none; margin-left: 0; padding-left: 0; }
.ranks span { font-size: 25px; font-weight: 300; }
.ranks span.mute { font-size: 15px; font-weight: normal; }
.ranks li { margin-bottom: 0.5em; }

    /* About */
    .about-ranks { margin-top: 2em; text-align: center; }
    .about-ranks li { display: inline-block; margin: 0 1em; }
    .about-ranks .mute { font-size: 13px; }
    .about-ranks .rank { display: block; }
    
    /* Colors */
    .rank.inactive .fa-star { color: #ccc; }
    .rank1 .fa-star { color: var(--rank1); }
    .rank2 .fa-star { color: var(--rank2); }
    .rank3 .fa-star { color: var(--rank3); }
    .rank4 .fa-star { color: var(--rank4); }
    .rank5 .fa-star { color: var(--rank5); }
    
    /* Ranking bar colors */
    .bar .rank1, .state-thumb.rank1 { background-color: var(--rank1); }
    .bar .rank2, .state-thumb.rank2 { background-color: var(--rank2); }
    .bar .rank3, .state-thumb.rank3 { background-color: var(--rank3); }
    .bar .rank4, .state-thumb.rank4 { background-color: var(--rank4); }
    .bar .rank5, .state-thumb.rank5 { background-color: var(--rank5); }
    
    /* SVG colors */
    .map .rank-inactive { fill: #ccc; }
    .map .rank1 { fill: var(--rank1); }
    .map .rank2 { fill: var(--rank2); }
    .map .rank3 { fill: var(--rank3); }
    .map .rank4 { fill: var(--rank4); }
    .map .rank5 { fill: var(--rank5); }
    
    /* Text */
    .score .rank1 { color: var(--rank1); }
    .score .rank2 { color: var(--rank2); }
    .score .rank3 { color: var(--rank3); }
    .score .rank4 { color: var(--rank4); }
    .score .rank5 { color: var(--rank5); }

/* Scores */
.score { line-height: 1; text-transform: uppercase; }
.score .mute { font-size: 12px; }
.score p { margin: 0; }
.score strong { color: #888; font-weight: 700; }
.score-set { margin-bottom: 35px; padding-right: 41.47%; }
.score-values { float: right; margin-right: -70.98%; width: 64.66%; }

    /* Bars */
    .score .bar { display: block; height: 10px; margin-bottom: 1px; min-width: 1px; }
    .score .bar span { border-radius: 0 3px 3px 0; display: block; min-width: 1px; height: 100%; }
    .score .bar.score-natl { background: #ccc; border-radius: 0 3px 3px 0; }
    .score .bar.score-state { height: 20px; }
    
    /* Subcategories */
    .subcategories { list-style: none; margin: 0; padding: 0; }
    .subcategories .all { white-space: nowrap; }
    .subcategories .score-set { padding-right: 43.47%; }
    .subcategories .score-values { width: 62.66%; }
    .subcategories .score .bar.score-state { height: 10px; }

/* State thumbnail */
.state-thumb { color: #fff; font-size: 85px; font-weight: normal; overflow: hidden; padding: 0.1em 10px; text-align: center; }

/* Tips */
.tip { line-height: 1.3; padding: 0.5em 0; text-transform: none; }


/* Widths
=====================================================================*/
@media (max-width: 770px) {
    /* Layout */
    #category #content-primary,
    #category #content-secondary,
    #national #content-primary,
    #national #content-secondary,
    #state #content-primary,
    #state #content-secondary {
        float: none;
        width: auto;
    }
    
    /* Content */
        /* Map */
        .map { height: 60vw; }
}