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

/* Imports
=====================================================================*/
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(../styles/reset.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
======================================================================*/
.action,
.filters,
#footer .social,
#hero h1,
.map-popup strong,
.score,
.score .mute {
    font-family: "futura-pt", Arial, sans-serif;
}

body,
.map text,
.mute,
#rankings .score,
.score .mute.tip {
    font-family: "source-sans-pro", Arial, sans-serif;
}

.state-thumb, .us { font-family: "StateFaceRegular", Arial, sans-serif; }

#footer,
h1, h2,
.map-popup,
.map-popup .mute,
.ranks,
.social,
#standards h3 {
    font-family: "pragmatica-web-condensed", Arial, sans-serif;
}


/* Basics
======================================================================*/
a { color: #f6982f; text-decoration: none; }
a:hover { text-decoration: underline; }
address { font-style: normal; }
blockquote, dl, ol, p, table, ul { margin-bottom: 1em; }
body { background: #1f273a; color: #464646; height: 100%; font-size: 18px; line-height: 1.3; padding: 6px 0 30px; }
cite, em { font-style: italic; }
dt { margin-top: 1.35em; }
dt:first-child { margin: 0; }
dt, h3, h4, h5, h6, strong { font-weight: bold; }
fieldset { border: 1px solid #ddd; margin-bottom: 2em; padding: 1em 1.5em; }
h1 { color: #272b33; font-size: 40px; font-weight: 300; line-height: 1.27; margin-bottom: 0.6em; }
h2 { color: #272b33; font-size: 35px; font-weight: 300; line-height: 1.23; margin-bottom: 0.3em; }
h3 { font-size: 30px; font-weight: 300; line-height: 1.35; margin-bottom: 0.5em; }
h4 { text-transform: uppercase; }
hr { background: #ddd; border: 0; clear: both; color: #ddd; height: 1px; margin: 40px 0; }
img { max-width: 100%; }
li { margin-bottom: 0.5em; }
ol { list-style: decimal; margin-left: 1.5em; }
ol ol { list-style: lower-alpha; }
select { padding: 0.1em 0.2em; }
sub { font-size: 10px; vertical-align: sub; }
sup { font-size: 10px; vertical-align: super; }
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; }
ul { list-style: disc; margin-left: 1.5em; }
ul ol li { background: none; padding: 0; }

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


/* Core layout
======================================================================*/
.clear { clear: both; }
#footer, #header-content { margin: 0 auto; max-width: 1000px; }

/* 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); box-sizing: border-box; margin: 0 auto; padding: 30px; max-width: 1040px; }
#content-wrapper { background: #fff url(../images/bg.jpg) 50% 0; }

    /* Category */
    #category #content-primary { float: right; width: 74.23%; }
    #category #content-secondary { float: left; width: 22.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; }
    
    /* State profile */
    #state #content-primary { float: right; width: 82.82%; }
    #state #content-secondary { float: left; width: 14.11%; }

/* Embeddable version */
.embed { background: #fff; box-sizing: border-box; padding: 20px; }
.embed #content { background: none; box-shadow: none; max-width: none; padding: 0; }
.embed #content-wrapper { background: none; }
.embed #footer, .embed #header, .embed #hero, .embed .noembed { display: none; }
.embed .map { height: auto !important; }
    

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

/* Accordion */
.accordion { list-style: none; margin: 0 0 30px 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; }

/* Actions */
.action {
    -webkit-appearance: none;
    background: #f7aa4a;
    background: -moz-linear-gradient(top, #f7aa4a 0%, #f18124 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7aa4a), color-stop(100%,#f18124));
    background: -webkit-linear-gradient(top, #f7aa4a 0%,#f18124 100%);
    background: -o-linear-gradient(top, #f7aa4a 0%,#f18124 100%);
    background: -ms-linear-gradient(top, #f7aa4a 0%,#f18124 100%);
    background: linear-gradient(to bottom, #f7aa4a 0%,#f18124 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7aa4a', endColorstr='#f18124',GradientType=0 );
    border: 0;
    border-radius: 60px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    padding: 0.5em 1.5em;
    text-transform: uppercase;
    vertical-align: middle;
}

.action:hover { box-shadow: 0 0 7px rgba(0, 0, 0, 0.6); text-decoration: none; }
.action .us { font-size: 30px; vertical-align: middle; }
.action-large { border-radius: 9px; font-weight: 300; padding: 1em 1.5em; text-align: center; }
.action-large strong { display: block; font-weight: 700; }
h1 .action { margin-right: 0.2em; padding: 0.3em 1.5em 0.1em; }

/* 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 1em 0.5em 0; }
.call-r { float: right; margin: 3px 0 0.5em 1em; }
.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; }

/* Core principles */
#core { overflow: hidden; margin-bottom: 30px; }
#core h3 { color: #272b33; font-size: 25px; font-weight: 300; line-height: 1.23; margin-bottom: 0.71em; }
#core li { margin-bottom: 1em; padding-left: 1.75em; text-indent: -0.8em; }
#core li .fa { margin-right: 0.2em; }
#core ul { list-style: none; margin: 0; }
#core-header { margin-bottom: 30px; text-align: center; }
#core-header h2 { font-size: 40px; font-weight: 300; line-height: 1.27; margin: 0; }

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

.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;
    margin: 0;
    right: 0;
    text-align: left;
    top: 31px;
    white-space: nowrap;
    z-index: 1000;
}

.dropdown .menu a { display: block; padding: 0.3em 1em; }
.dropdown .menu a:hover { background: #f0f0f0; text-decoration: none; }
.dropdown .menu li { display: block; margin: 0; }
.dropdown-toggle { border: 1px solid #ccc; border-radius: 4px; 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; }

/* Fees */
.fees { list-style: none; margin-left: 0; }
.fees > li { border-top: 1px solid #ddd; display: flex; justify-content: space-between; padding-top: 2em; }
.fees .fee-list { width: 74.18%; }
.fees .fee-list br { display: block; margin-bottom: 1em; }
.fees .fee-list li { margin-bottom: 1em; }
.fees .fee-list p { margin: 0; }
.fees .fee-list ul { list-style: none; margin: 0; }
.fees .fee-summary { width: 22.65%; }
.fees .fee-summary .fa { color: #f6982f; }

/* Filters */
.filters { font-size: 14px; font-weight: 700; letter-spacing: 0.07em; line-height: 1; margin-bottom: 20px; text-transform: uppercase; }
.filters * { vertical-align: middle; }
.filters a { background: #3b4250; border-radius: 50px; color: #fff; display: inline-block; padding: 0.8em 2em; }
.filters a:hover { opacity: 0.7; text-decoration: none; }
.filters .current a { background: #f6982f; }
.filters .fa { vertical-align: top; }
.filters li { display: inline-block; margin: 0 1px 0 0; }
.filters .us { font-size: 17px; vertical-align: middle; }
.filters ul { display: inline-block; list-style: none; margin: 0 10px 0 0; }

    /* Panels */
    .filter-panel { border: 1px solid #ccc; border-radius: 4px; margin-bottom: 20px; padding: 30px; position: relative; text-align: left; }
    .filter-panel .close { color: #000; font-size: 20px; opacity: 0.3; position: absolute; right: 30px; top: 25px; }
    .filter-panel .close:hover { opacity: 1; }
    .filter-panel input { margin-left: 0; }
    .filter-panel label:hover { cursor: pointer; opacity: 0.7; }
    .filter-panel label strong { display: block; font-size: 18px; }
    .filter-panel li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; margin-bottom: 0.7em; }
    
    .filter-panel ul {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        -moz-column-gap: 30px;
        -webkit-column-gap: 30px;
        column-gap: 30px;
        font-size: 16px;
        list-style: none;
        margin: 0;
    }

/* Footer */
#credit { float: right; }
#footer { font-size: 14px; font-weight: 400; padding: 20px; }
#footer, #footer a { color: #979595; }
#footer .social { display: inline; padding-left: 0; }
#footer .vcard { border-left: 1px solid #383b47; display: inline; padding-left: 10px; }
    
    /* Subfooter */
    #subfooter { border-top: 1px solid #ddd; margin-top: 40px; overflow: hidden; padding: 40px 0 50px; }
    #subfooter h2 { margin-bottom: 0.2em; }
    #subfooter img { border: 1px solid #ddd; float: left; margin-right: 20px; width: 138px; }
    #subfooter ul { list-style: none; margin: 0; }

/* Footnotes */
.footnotes { color: #777; font-size: 15px; margin-top: 2em; }

/* 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%; }

/* Header */
#header { background: #fff; box-shadow: -10px 0 10px #000; overflow: hidden; padding: 17px 20px 20px; position: relative; z-index: 1000; }
#header-primary { float: left; }
#header-secondary { float: right; padding-top: 14px; }
    
    /* Logo */
    #logo { display: inline-block; margin-right: 10px; max-width: 170px; }
    #logo, #logo img { vertical-align: middle; }
    
    /* Page tools */
    #page-tools { float: right; }

/* Hero */
#hero { background: #1f273a; border-bottom: 1px solid #ccc; text-align: center; }
#hero a { display: block; }
#hero a:hover { text-decoration: none; }
#hero h1 { font-size: 53px; font-weight: 700; margin: 0; text-transform: uppercase; }
#hero h1 a { color: #fff; }
#hero h2 { font-size: 32px; font-weight: 300; margin: 0; }
#hero h2 a { color: #f0b50f; }
#hero img { display: block; width: 100%; }
#hero-content { box-sizing: border-box; margin: 0 auto; max-width: 1040px; position: relative; }

#hero-overlay {
    background: -moz-linear-gradient(top, rgba(30,34,43,0) 0%, rgba(30,34,43,1) 100%);
    background: -webkit-linear-gradient(top, rgba(30,34,43,0) 0%,rgba(30,34,43,1) 100%);
    background: linear-gradient(to bottom, rgba(30,34,43,0) 0%,rgba(30,34,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e222b', endColorstr='#1e222b',GradientType=0 );
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    padding: 40px;
    position: absolute;
    width: 100%;
}

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

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

/* Instructions */
.instructions { font-size: 14px; padding-top: 10px; text-align: center; }
.instructions strong { background: #ffc; font-weight: normal; padding: 0.1em 0.5em; text-transform: uppercase; }

/* Intro */
.intro {font-size: 26px; margin-bottom: 30px; }
.intro h2 { font-size: 40px; margin-bottom: 0.2em; }
.intro .mute { font-size: 18px; }
.intro p { margin-bottom: 0.5em; }

/* US Map */
.map { display: block; margin: 0 auto; 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: 1px; }
.map text { fill: #fff; font-size: 15px; }
.map text.outside { fill: #000; }

    /* Legend */
    .legend li { border-right: 1px solid #fff; color: #fff; display: inline-block; padding: 0.3em 1.5em; }
    .legend .rank-inactive { background: #aaa; }
    .legend .rank-na { background: #ddd; }
    .legend ul { list-style: none; margin: 0; }
    
        /* Consequences map */
        #map-consequences .legend .rank1 { background: #949cc0; }
        #map-consequences .legend .rank2 { background: #848cae; }
        #map-consequences .legend .rank3 { background: #757d9c; }
        #map-consequences .legend .rank4 { background: #656d8b; }
        #map-consequences .legend .rank5 { background: #575e7a; }
        #map-consequences .legend .rank6 { background: #485069; }
        #map-consequences .legend .rank7 { background: #3a4259; }
        #map-consequences .legend .rank8 { background: #2c3449; }
        #map-consequences .legend .rank9 { background: #1f273a; }
        
        /* Fees map */
        #map-fees .legend .rank1 { background: #f1b510; }
        #map-fees .legend .rank2 { background: #eb9915; }
        #map-fees .legend .rank3 { background: #e07e16; }
        #map-fees .legend .rank4 { background: #d06715; }
        #map-fees .legend .rank5 { background: #bd5112; }
        #map-fees .legend .rank6 { background: #a83c0e; }
        #map-fees .legend .rank7 { background: #912909; }
        #map-fees .legend .rank8 { background: #410907; }


        /* Restitution map */
        #map-restitution .legend .rank1 { background: #949cc0; }
        #map-restitution .legend .rank2 { background: #757d9c; }
        #map-restitution .legend .rank3 { background: #575e7a; }
        #map-restitution .legend .rank4 { background: #3a4259; }
        #map-restitution .legend .rank5 { background: #1f273a; }
    
    /* SVG colors */
    .map .rank-inactive { fill: #aaa; }
    .map .rank-na { fill: #ddd; }
    
        /* Consequences map */
        #map-consequences .map .rank1 { fill: #949cc0; }
        #map-consequences .map .rank2 { fill: #848cae; }
        #map-consequences .map .rank3 { fill: #757d9c; }
        #map-consequences .map .rank4 { fill: #656d8b; }
        #map-consequences .map .rank5 { fill: #575e7a; }
        #map-consequences .map .rank6 { fill: #485069; }
        #map-consequences .map .rank7 { fill: #3a4259; }
        #map-consequences .map .rank8 { fill: #2c3449; }
        #map-consequences .map .rank9 { fill: #1f273a; }
        
        /* Fees map */
        #map-fees .map .rank1 { fill: #f1b510; }
        #map-fees .map .rank2 { fill: #eb9915; }
        #map-fees .map .rank3 { fill: #e07e16; }
        #map-fees .map .rank4 { fill: #d06715; }
        #map-fees .map .rank5 { fill: #bd5112; }
        #map-fees .map .rank6 { fill: #a83c0e; }
        #map-fees .map .rank7 { fill: #912909; }
        #map-fees .map .rank8 { fill: #410907; }

        /* Restitution map */
        #map-restitution .map .rank1 { fill: #949cc0; }
        #map-restitution .map .rank2 { fill: #757d9c; }
        #map-restitution .map .rank3 { fill: #575e7a; }
        #map-restitution .map .rank4 { fill: #3a4259; }
        #map-restitution .map .rank5 { fill: #1f273a; }

/* Muted text */
.mute { color: #777; font-size: 15px; }
h1 .mute, h2 .mute, h3 .mute, tfoot .mute { font-weight: normal; }

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

/* qTip */
.qtip { background: #fff; border-radius: 3px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25); font-size: 0.9em; line-height: 1.3; max-width: 300px; }
.qtip ul { margin-bottom: 0; }
.qtip-content { font-size: 1em; max-height: 200px; overflow-x: hidden; overflow-y: auto; padding: 20px; }

/* Report */
#full-report { display: flex; justify-content: space-between; }
#report-description { width: 65.71%; }
#report-thumb { width: 31.32%; }

/* 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-left: 1.25em; }
    .subcategories .all { white-space: nowrap; }
    .subcategories .fa-chevron-circle-right { float: left; margin: 0.1em 0 0 -1.25em; }
    .subcategories .score-set { padding-right: 43.47%; }
    .subcategories .score-values { width: 62.66%; }
    .subcategories .score .bar.score-state { height: 10px; }

/* Social */
.social { background: #1f273a; border-radius: 30px; color: #fff; font-size: 16px; padding: 0.1em 15px; width: 120px; }
.social a { background-position: 0 0; background-repeat: no-repeat; display: inline-block; height: 30px; margin: -7px 2px -5px; text-indent: -9999em; vertical-align: middle; width: 30px; }
.social img { display: inline-block; margin: -10px 0; vertical-align: middle; width: 30px; }
.social li, .social p, .social ul { display: inline; margin: 0; white-space: nowrap; }
    
    /* Icons */
    .social .facebook { background-image: url(../images/facebook.png); }
    .social .twitter { background-image: url(../images/twitter.png); }

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

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


/* Widths
=====================================================================*/
@media screen and (max-width: 900px) {
    .fees li { display: block; }
    .fees .fee-list, .fees .fee-summary { width: auto; }
}