/* 12112025 SC */
html {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #555;
    margin: 0;
    padding: 0;
    letter-spacing: .03em;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}



/*
 * Remove the gap between img, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   General styles
   ========================================================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px;
}

hr {
    height: 1px;
    width: 100%;
    background: #ccc;
    margin: 10px 0;
    border: none;
    display: block;
    letter-spacing: 0;
}

h1 {
    font-family: Arial, serif;
    font-size: 35px;
    color: #000;
    line-height: 40px;
    font-weight: normal;
}

h2 {
    font-family: Arial, sans-serif;
    font-size: 22px;
    color: #000;
    line-height: 26px;
    font-weight: normal;
}

    h2 .subtitle {
        font-weight: 600;
        color: #c7c7c7;
        font-size: 18px;
        margin: 0;
        padding: 0;
    }

h3 {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 22px;
    font-weight: normal;
}

h4 {
    font-weight: 700;
    font-size: 16px;
    color: #464646;
    line-height: 18px;
}

.group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}



a, a:hover, a:active, a:visited {
    cursor: pointer !important;
}

a {
    color: #657643;
    text-decoration: underline;
}

    a:hover {
        color: #657643;
        /*text-decoration: underline;*/
        font-weight:bold;
    }

    a:focus {
        outline: dotted 1px black;
        /*outline: none !important; */
        /*text-decoration: underline; */
        font-weight: bold;
    }

#tabs li:focus {
    outline: dotted 2px black;
    /* outline: none !important; */
}

#tabs ul li a:focus {
    outline: none !important;
}

.clr {
    clear: both;
}

.hide {
    display: none;
}

.display-date-p {
    float: left;
    height: 20px;
    width: 700px;
    color: black;
    margin-top: 20px;
}

.additional_information {
    margin-top: -20px;
    padding: 0 10px 0 10px;
    clear: left;
    max-width: 700px;
}

    .additional_information .lower-air-quality-links {
        margin: 20px 0;
    }

        .additional_information .lower-air-quality-links ul {
            list-style: none;
            padding: 0;
            margin: 10px 0 0 0;
        }

            .additional_information .lower-air-quality-links ul li {
                font-size: 16px;
                line-height: 30px;
            }

    .additional_information .light-grey-text {
        color: #666;
    }

.blocks {
    position: absolute;
    padding-left: 10px;
    background: url(../img/pop-arrow.png) no-repeat left 9px;
    z-index: 1;
    display: none;
}

.blocks_right {
    padding-left: 0;
    padding-right: 10px;
    /*
    background: url(../img/pop-arrow-right.png) no-repeat right 9px;
*/
    z-index: 1;
}

.block {
    background: #fff;
    border-bottom: 1px solid #e7e5e1;
    padding: 5px 10px;
    color: #464646;
    font-weight: 400;
    font-size: 12px;
}

    .block strong {
        font-weight: 600;
    }

.block_wrap {
    padding: 15px 20px;
}


#data-disclaimer {
    font-size: 12px;
    margin: 0 0 4em 0;
    display: none;
    width: 400px;
    height: auto;
    z-index: 600;
    padding: 20px;
}


.spacer {
    background: transparent;
    clear: left;
    max-width: 700px;
    height: 25px;
}

#health {
    z-index: 10;
    max-width: 950px;
    border: 2px solid black;
    display: none;
    height: auto;
}



.AHpop {
    cursor: pointer;
    outline: dotted 1px black;
}


.AHhighlight {
    /*background-color: lightgray; */
    border: 3px solid gray !important;
}

/*---------------------------------------------------
    UI Dialog Popups
-------------------------------------------------- */
.ui-state-default.ui-corner-top {
    background: #657643;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #fff;
    font-weight: normal;
}

.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active:after {
    content: "";
    background: url(../img/tab-down-arrow.png) center center no-repeat;
    bottom: -14px;
    left: 45%;
    position: absolute;
    height: 14px;
    width: 20px;
    display: block;
}

.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
    background: #444;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #fff;
    font-weight: normal;
    border: none;
}

.ui-tabs .ui-tabs-panel {
    background: #fff;
    border-top: 0 solid #ccc;
    border-bottom: 0 solid #ccc;
    border-radius: 0;
}

.ui-widget-header {
    border: none;
    background: none;
    color: inherit;
    font-weight: normal;
}

    .ui-widget.ui-widget-content, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
        border: none;
    }

.ui-tabs-nav li:hover {
    background: #617240;
}

.ui-tabs .ui-tabs-panel {
    padding: 0;
}

.ui-tabs .ui-tabs-nav {
    padding: 0;
}

    .ui-tabs .ui-tabs-nav li {
        font-size: 14px;
        margin-right: 5px;
        text-align: center;
        min-width: 170px;
    }

    .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        float: none;
        display: inline-block;
        padding: .8em 1.5em;
    }

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-resizable {
    padding: 0;
    border-radius: 0;
    box-shadow: 0 0 10px #777;
}

.ui-dialog .ui-dialog-titlebar {
    background: #eee;
    border-radius: 0;
}

.ui-widget-overlay {
    background: #333;
    opacity: .5;
    filter: Alpha(Opacity=.5);
}

.ui-button:focus {
    outline: none;
}

button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {
    background-color: #eee;
}

.ui-button-icon.ui-icon.ui-icon-closethick {
    background: url(../img/pop-up-x-12x12.svg) center center no-repeat;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 20px;
}

.ui-dialog .ui-dialog-titlebar-close {
    right: 20px;
}


/*---------------------------------------------------
    Map
-------------------------------------------------- */
.map_instructions {
    background: #fff;
    float: left;
    margin-top: 0;
    position: relative;
    clear: both;
    width: 100%;
    max-width: 700px;
    border: 0;
}

.map {
    position: relative;
    clear: both;
    width: 100%;
    float: left;
    background: url(../img/map-desktop-without-inset-new.jpg) no-repeat left top;
    background-size: 100%;
    height: auto;
    overflow: hidden;
    max-width: 700px;
    margin-top: 0;
}


.map_scaler {
    position: relative;
}

.map_scaler_image {
    width: 100%;
}

#map {
    width: 100%;
    max-width: 100%;
    float: left;
}


.map_column_wrap {
    padding: 0;
    width: 100%;
    background: #fff;
    line-height: 1.5;
}

#explore-by-map {
    max-width: 700px;
}

#explore-by-chart {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    border: 0;
    margin-left: -10px;
}

.small {
    font-size: 0.75em;
    color: #747474;
    line-height: 1.5;
}


.map_key_havo {
    position: relative;
    background: #fff;
    left: 0;
    bottom: auto;
    width: 100%;
    max-width: 700px;
    padding: 20px 0 0 20px;
    clear: both;
    height: 120px;
}

    .map_key_havo h4 {
        width: 30%;
        float: left;
        font-size: 14px;
    }

    .map_key_havo ul {
        margin: 0;
        padding: 0;
    }

    .map_key_havo li {
        margin: 0 0 5px 0;
        padding: 0 0 0 25px;
        list-style: none;
        font-weight: 400;
        font-size: 13px;
        color: #464646;
    }

    .map_key_havo .levels {
        width: 100%;
        float: left;
        line-height: 1.5em;
    }

    .map_key_havo .levelsshort {
        width: 30%;
        float: left;
        font-size: 0.8em;
        line-height: 1.5em;
    }

    .map_key_havo .levelslong {
        width: 39%;
        float: left;
        font-size: 0.8em;
        line-height: 1.5em;
    }

    .map_key_havo a {
        color: #657643;
        /* text-decoration: none; */
    }

.map_switch {
    position: absolute;
    right: 20px;
    top: 470px;
    z-index: 1;
}

    .map_switch select {
        width: 120px;
    }


.disclaimer_div {
    position: relative;
    background: #fff;
    left: 0;
    bottom: auto;
    margin-top: -30px;
    width: 100%;
    padding: 0px 0 20px 20px;
    clear: both;
    color: #657643 !important;
}

    .disclaimer_div p a {
        color: #657643 !important;
    }

.disclaimer_chart_div {
    position: relative;
    background: #fff;
    left: 0;
    bottom: auto;
    margin-top: -30px;
    width: 100%;
    padding: 0px 0 0 20px;
    clear: both;
    color: #657643 !important;
}

    .disclaimer_chart_div p a {
        color: #657643 !important;
    }


.disclaimer .disclaimer:focus, .disclaimer_chart .disclaimer_chart:focus {
    outline: dotted 1px black;
    text-decoration:underline;
}

.disclaimer a:first-child, .disclaimer_chart a:first-child {
    margin-right: 5px;
}

.disclaimer a:last-child, .disclaimer_chart a:last-child {
    margin-left: 5px;
}


/*---------------------------------------------------
    Dots
-------------------------------------------------- */

.level_1, .Green {
    background: url(../img/map-dot-16x16-1-good.svg) no-repeat center left;
    width:15px;
    height:15px;
    background-size: 15px 15px;
  
}

.level_2, .Yellow {
    background: url(../img/map-dot-16x16-2-moderate.svg) no-repeat center left;
    background-size: 15px 15px;
}

.level_3, .Orange {
    background: url(../img/map-dot-16x16-3-unhealthy-sensitive-grps.svg) no-repeat center left;
    background-size: 15px 15px;
}

.level_4, .Red {
    background: url(../img/map-dot-16x16-4-unhealthy.svg) no-repeat center left;
    background-size: 15px 15px;
}

.level_5, .Purple {
    background: url(../img/map-dot-16x16-5-very-unhealthy.svg) no-repeat center left;
    background-size: 15px 15px;
}

.level_6, .Magenta {
    background: url(../img/map-dot-16x16-6-hazardous.svg) no-repeat center left;
    background-size: 15px 15px;
}

.level_construction, .Black {
    background: url(../img/map-dot-16x16-construction.svg) no-repeat center left;
    background-size: 15px 15px;
}

.level_maintenance, .White {
    background: url(../img/map-dot-16x16-no-data.svg) no-repeat center left;
    background-size: 15px 15px;
}



.dot {
    border-radius: 10px;
    display: inline-block;
    height: 15px;
    width: 15px;
    vertical-align: sub;
    margin-right: 5px;
}

.dot_wrap {
    margin: 5px 0 15px;
}

#dot_steamvents, #dot_campground, #dot_jaggar, #dot_trailer, #dot_visitorcenter, #dot_parkinglot, #dot_thurston, #dot_devastation, #dot_kealakomo, #dot_chain, #dot_p1, #dot_p2, #dot_puho, #dot_kaho {
    position: absolute;
    display: block;
    border: 0px solid #c0c0c0;
    border-radius: 15px;
    height: 15px;
    width: 15px;
}

.pop_dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
}

.popup {
    z-index: 1;
}

#dot_steamvents {
    top: 22.5%;
    left: 35%;
}

#dot_campground {
    top: 24.8%;
    left: 26.2%;
}

#dot_jaggar {
    top: 27%;
    left: 30.5%;
}

#dot_trailer {
    top: 34.5%;
    left: 38%;
}

#dot_visitorcenter {
    top: 22.8%;
    left: 38%;
}

#dot_parkinglot {
    top: 23.6%;
    left: 40.6%;
}

#dot_thurston {
    top: 31.5%;
    left: 45.3%;
}

#dot_devastation {
    top: 33.5%;
    left: 41%;
}

#dot_kealakomo {
    top: 74%;
    left: 71.5%;
}

#dot_chain {
    top: 81%;
    left: 88%;
}

#dot_trailer_pop {
    top: 33.5%;
    left: 40%;
}

#dot_visitorcenter_pop {
    top: 21.5%;
    left: 40.7%;
}

#dot_parkinglot_pop {
    top: 22.2%;
    left: 43%;
}

#dot_devastation_pop {
    top: 32%;
    left: 43.6%;
}

#dot_kealakomo_pop {
    bottom: 10%;
    right: 27.5%;
}

#dot_chain_pop {
    bottom: 2%;
    right: 11.5%;
}

#dot_jaggar_pop {
    top: 25.5%;
    left: 33%;
}

#dot_steamvents_pop {
    top: 21%;
    left: 37.5%;
}

#dot_campground_pop {
    top: 23.3%;
    left: 29%;
}

#dot_thurston_pop {
    top: 30.5%;
    left: 47.7%;
}

/* ==========================================================================
   Labels
   ========================================================================== */
#label_volcano1, #label_volcano2, #label_inset_volcano1, #label_inset_volcano2, #label_steamvents, #label_campground, #label_jaggar, #label_trailer, #label_visitorcenter, #label_parkinglot, #label_thurston, #label_devastation, #label_kealakomo, #label_chain, #label_p1, #label_p2, #label_puho, #label_kaho {
    position: absolute;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 200;
}

#label_steamvents {
    top: 8%;
    left: 24%;
    line-height: 1.5em;
}

#label_visitorcenter {
    top: 14.5%;
    left: 38.5%;
}

#label_parkinglot {
    top: 19.5%;
    left: 42.5%;
}

#label_thurston {
    top: 23.3%;
    left: 48%;
}

#label_devastation {
    top: 26%;
    left: 44%;
}

#label_jaggar {
    top: 21.8%;
    left: 30%;
}

#label_trailer {
    top: 29%;
    left: 39%;
}

#label_campground {
    top: 17.5%;
    left: 10%;
    line-height: 1.2em;
}

#label_chain {
    top: 61.5%;
    right: 12.5%;
    text-align: right;
}

#label_kealakomo {
    top: 56%;
    right: 29%;
    text-align: right;
}

#label_volcano1 {
    top: 25%;
    left: 14%;
    text-align: center;
    font-weight: bold;
}

#label_volcano2 {
    top: 31%;
    left: 78%;
    font-weight: bold;
}

#line_steamvents {
    position: absolute;
    border-bottom: 1px solid;
    width: 4%;
    height: 4%;
    left: 35%;
    top: 11.8%;
    transform: rotate(45deg);
    transform-origin: top left;
    border-bottom-color: black;
}

.label_map {
    color: black;
}


/* ==========================================================================
   Plumes 
   ========================================================================== */
.volcano {
    background: url(../img/volcano.png) no-repeat right top;
    position: absolute;
    width: 20px;
    height: 20px;
}

#volcano1 {
    top: 32.3%;
    left: 31.7%;
}

#volcano2 {
    top: 36.0%;
    left: 81.4%;
}

.plume {
    background: url(../img/plume.png) no-repeat right top;
    position: absolute;
    width: 617px;
    height: 618px;
}


#plume1 {
    top: 34.5%;
    left: 33%;
    opacity: 0.5;
}

#plume2 {
    top: 38%;
    left: 83%;
    opacity: 0.5;
}

    #plume1.blob, #plume2.blob {
        background: url(../img/blob10.png) no-repeat right top;
        position: absolute;
        height: 35%;
        width: 35%;
        max-width: 35%;
        background-size: contain;
    }

#plume1.blob {
    top: 18.5%;
    left: 11.5%;
    opacity: 0.5;
}

#plume2.blob {
    top: 20.5%;
    left: 61.5%;
    opacity: 0.5;
}

.mobile_pad {
    padding: 0 25px;
}




/* ==========================================================================
   P1 and P2 
   ========================================================================== */
#dot_puho {
    top: 10%;
    left: 2%;
    height: 16px;
    width: 16px;
}

#dot_kaho {
    top: 40%;
    left: 26%;
    height: 16px;
    width: 16px;
}

#dot_p1 {
    top: 66%;
    left: 28%;
    height: 16px;
    width: 16px;
}

#dot_p2 {
    top: 58.0%;
    left: 26%;
    height: 16px;
    width: 16px;
}

.blocks_p1p2 {
    padding-left: 10px;
    padding-right: 10px;
    background: none;
    z-index: 1;
}

#dot_puho_pop {
    bottom: 2%;
    left: 40%;
}

#dot_kaho_pop {
    top: 1%;
    left: 23.5%;
}

#dot_p1_pop {
    bottom: 2%;
    left: 40%;
}

#dot_p2_pop {
    bottom: 2%;
    left: 40%;
}

.div_inset {
    background: url(../img/map-desktop-inset3.jpg) center;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100%;
    overflow: hidden;
    z-index: 1;
}

.div_inset_kaho {
    background: url(../img/map-desktop-inset-kaho.jpg) center;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100%;
    overflow: hidden;
    z-index: 1;
}

.div_inset_bigisland {
    
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    z-index: 1;
}

.volcanoinset {
    background: url(../img/volcanoinset.png) no-repeat right top;
    position: absolute;
    width: 12px;
    height: 12px;
}

#volcano1inset {
    top: 8%;
    left: 78%;
    width: 12px;
    height: 12px;
}

#volcano2inset {
    top: 9%;
    left: 94%;
    width: 12px;
    height: 12px;
}

.plumeinset {
    background: url(../img/plumeinset.png) no-repeat right top;
    position: absolute;
    width: 300px;
    height: 255px;
    top: 0;
    left: 0;
    background-size: 100%;
}

#plume1inset {
    top: 12%;
    left: 80.5%;
    opacity: 0.5;
}

#plume2inset {
    top: 12.5%;
    left: 97%;
    opacity: 0.5;
}

    #plume1inset.blob, #plume2inset.blob {
        background: url(../img/blob10.png) no-repeat right top;
        position: absolute;
        height: 15%;
        width: 15%;
        max-width: 15%;
        background-size: contain;
    }

#plume1inset.blob {
    top: 5.0%;
    left: 71.2%;
    opacity: 0.5;
}

#plume2inset.blob {
    top: 5.0%;
    left: 87.5%;
    opacity: 0.5;
}

#label_inset_volcano1 {
    top: 24%;
    left: 35%;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

#line_inset_volcano1 {
    color: black;
    position: absolute;
    border-bottom: 1px solid black;
    width: 11%;
    height: 11%;
    left: 65%;
    top: 18%;
    transform: rotate(-47deg);
    transform-origin: top left;
}

#label_inset_volcano2 {
    top: 17%;
    left: 77%;
    font-weight: bold;
    font-size: 14px;
}

#label_puho {
    top: 5%;
    left: 8%;
    font-size: 14px;
}

#label_kaho {
    top: 5%;
    left: 1%;
    font-size: 14px;
}

#label_p1 {
    top: 73%;
    left: 16%;
    font-size: 14px;
}

#label_p2 {
    top: 49.0%;
    left: 5%;
    font-size: 14px;
}

/* ==========================================================================
 CANVAS WRAPPER 
========================================================================== */
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.chart-axis-wrapper {
    position: relative;
    float: left;
    margin-left: 11px;
    margin-bottom: 10px;
    border: 1px dotted black;
}

.chart-overflow-wrapper {
    overflow-x: auto;
}

.chart-wrapper {
    width: 365px;
    height: 120px;
}

/* ==========================================================================
 DATA BLOCK 
========================================================================== */

.technical-text {
    font-size: 12px;
    line-height: 16px;
    color: #555;
    display: inline-block;
}

.big-bold-text, .bold-data-text {
    font-size: 22px;
    line-height: 30px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #555;
}

.individual-park-list-format {
    max-width: 700px;
    display: block;
    width: 100%;
    background: #eee;
    padding-bottom: 0;
    margin: -25px 0 0 0;
}

.individual-park-so2-section {
    width: 100%;
    border-right: 4px solid #eee;
    border-left: 4px solid #eee;
    border-top: 4px solid #eee;
    border-bottom: 4px solid #eee;
    background: #fff;
    background-image: url('../img/triangle-corner-bg.png');
    background-repeat: no-repeat;
    background-position: top left;
    padding: 7px 0 5px 0;
}

.so2-icon-holder {
    width: 50px;
    display: inline-block;
    border-right: 1px solid #aaa;
    margin: 0;
    padding: 0 0 0 5px;
    line-height: 40px;
    vertical-align: top;
    /*float: left;*/
    min-height: 40px;
}

.individual-park-particulates-section {
    width: 100%;
    border-right: 4px solid #eee;
    border-left: 4px solid #eee;
    border-top: 4px solid #eee;
    border-bottom: 4px solid #eee;
    background: #fff;
    background-image: url('../img/triangle-corner-bg.png');
    background-repeat: no-repeat;
    background-position: top left;
    margin-top: -4px;
    padding: 7px 0 5px 0;
}

.particulates-icon-holder {
    width: 50px;
    display: inline-block;
    border-right: 1px solid #aaa;
    margin: 0;
    padding: 0 0 0 5px;
    line-height: 40px;
    vertical-align: top;
    /*float: left;*/
    min-height: 40px;
}


.individual-park-air-quality-section {
    max-width: 630px;
    display: inline-block;
    margin: 0;
    padding: 5px 0 0 0;
    line-height: 40px;
    /*float: left;*/
    min-height: 40px;
}

.individual-park-air-quality-color {
    width: 10%;
    /*display: inline-block;*/
    line-height: 40px;
    margin: 0;
    float: left;
    text-align: center;
    min-height: 40px;
    background-size: 36px 36px;
    background-position: center center;
}

.individual-park-air-quality-index-link-description {
    width: 90%;
    display: inline-block;
    vertical-align: middle;
    /*float: left;*/
    padding: 0 0 0 10px;
}

.individual-park-air-quality-index-link {
    line-height: 14px;
}

.individual-park-air-quality-description {
    line-height: 18px;
    font-size: 16px;
    font-weight: normal;
    color: #555;
}

.information-background-image {
    margin-left: 10px;
    cursor: pointer;
}



.individual-park-air-quality-color .Green {
    width: 36px;
    height: 36px;
    background: url(../img/map-dot-16x16-1-good.svg) center center no-repeat;
    background-size: 36px 36px;
    margin: 0 auto;
}

.individual-park-air-quality-color .Yellow {
    width: 36px;
    height: 36px;
    background: url(../img/map-dot-16x16-2-moderate.svg) center center no-repeat;
    background-size: 36px 36px;
    margin: 0 auto;
}

.individual-park-air-quality-color .Orange {
    width: 36px;
    height: 36px;
    background: url(../img/map-dot-16x16-3-unhealthy-sensitive-grps.svg) center center no-repeat;
    background-size: 36px 36px;
    margin: 0 auto;
}

.individual-park-air-quality-color .Red {
    width: 36px;
    height: 36px;
    background: url(../img/map-dot-16x16-4-unhealthy.svg) center center no-repeat;
    background-size: 36px 36px;
    margin: 0 auto;
}

.individual-park-air-quality-color .Purple {
    width: 36px;
    height: 36px;
    background: url(../img/map-dot-16x16-5-very-unhealthy.svg) center center no-repeat;
    background-size: 36px 36px;
    margin: 0 auto;
}

.individual-park-air-quality-color .Maroon {
    width: 36px;
    height: 36px;
    background: url(../img/map-dot-16x16-7-hazardous.svg) center center no-repeat;
    background-size: 36px 36px;
    margin: 0 auto;
}

.individual-park-air-quality-color .Grey {
    width: 36px;
    height: 36px;
    background: url(../img/map-dot-16x16-6-no-data.svg) center center no-repeat;
    background-size: 36px 36px;
    margin: 0 auto;
}

.individual-park-air-quality-color .White {
    width: 36px;
    height: 36px;
    background: url(../img/map-dot-16x16-6-no-data.svg) center center no-repeat;
    background-size: 36px 36px;
    margin: 0 auto;
}


.individual-park-data-section {
    width: 100%;
    border-top: 4px solid #eee;
    border-bottom: 4px solid #eee;
    background: #fff;
    background-image: url('../img/triangle-corner-bg.png');
    background-repeat: no-repeat;
    background-position: top left;
    padding: 0 0 0 0;
    margin: -4px 0 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.individual-park-temperature-section {
    width: 32%;
    display: inline-block;
    /*float: left;*/
    -webkit-box-shadow: inset -4px 0 0 0 #eee, inset 4px 0 0 0 #eee;
    -moz-box-shadow: inset -4px 0 0 0 #eee, inset 4px 0 0 0 #eee;
    box-shadow: inset -4px 0 0 0 #eee, inset 4px 0 0 0 #eee;
    background: url(../img/triangle-corner-bg.png) top left no-repeat;
    padding: 10px 0 10px 0;
}

/*
.temperature-data .park-temperature:after {
    content: "\00b0"; 
}
*/

.park-temperature-deg {
    margin-left: -5px;
}

.temperature-icon-holder {
    width: 25%;
    /*display: inline-block;*/
    float: left;
    margin-top: 7px;
}

.temperature-data-holder {
    width: 75%;
    display: inline-block;
    /*float: left;*/
    padding-left: 10px;
}


.individual-park-humidity-section {
    width: 28%;
    display: inline-block;
    /*float: left;*/
    background: url(../img/triangle-corner-bg.png) top left no-repeat;
    -webkit-box-shadow: inset -4px 0 0 0 #eee;
    -moz-box-shadow: inset -4px 0 0 0 #eee;
    box-shadow: inset -4px 0 0 0 #eee;
    padding: 10px 0 0 0;
}

.humidity-icon-holder {
    width: 25%;
    /*display: inline-block;*/
    float: left;
    margin-top: 7px;
}

.humidity-data-holder {
    width: 75%;
    display: inline-block;
    /*float: left;*/
    padding-left: 10px;
}


.individual-park-wind-section {
    width: 40%;
    display: inline-block;
    /*float: left;*/
    -webkit-box-shadow: inset -4px 0 0 0 #eee;
    -moz-box-shadow: inset -4px 0 0 0 #eee;
    box-shadow: inset -4px 0 0 0 #eee;
    background: url(../img/triangle-corner-bg.png) top left no-repeat;
    padding: 10px 0 10px 0;
}

.wind-icon-holder {
    width: 25%;
    /*display: inline-block;*/
    float: left;
    margin-top: 14px;
    min-height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
}

.wind-data-holder {
    width: 75%;
    display: inline-block;
    /*float: left;*/
    padding: 0 0 0 10px;
}

.wind-direction-holder .N, .wind-direction-holder .NNE, .wind-direction-holder .NE, .wind-direction-holder .ENE, .wind-direction-holder .E, .wind-direction-holder .ESE, .wind-direction-holder .SE, .wind-direction-holder .SSE, .wind-direction-holder .S, .wind-direction-holder .SSW, .wind-direction-holder .SW, .wind-direction-holder .WSW, .wind-direction-holder .W, .wind-direction-holder .WNW, .wind-direction-holder .NW, .wind-direction-holder .NNW {
    width: 30px;
    height: 30px;
    margin: 5px auto 0;
}

.wind-direction-holder {
    display: inline-block;
    margin: 5px 10px 0 0;
    width: 30px;
    height: 30px;
    /*float: left;*/
}

/* WIND DIRECTIONS */
.wind-blank {
    background-image: url(../img/weather-icons-40x40-wind.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-north, .N {
    background-image: url(../img/weather-icons-40x40-wind-N.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-north-north-east, .NNE {
    background-image: url(../img/weather-icons-40x40-wind-NNE.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-north-east, .NE {
    background-image: url(../img/weather-icons-40x40-wind-NE.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-east-north-east, .ENE {
    background-image: url(../img/weather-icons-40x40-wind-ENE.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-east, .E {
    background-image: url(../img/weather-icons-40x40-wind-E.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-east-south-east, .ESE {
    background-image: url(../img/weather-icons-40x40-wind-ESE.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-south-east, .SE {
    background-image: url(../img/weather-icons-40x40-wind-SE.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-south-south-east, .SSE {
    background-image: url(../img/weather-icons-40x40-wind-SSE.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-south, .S {
    background-image: url(../img/weather-icons-40x40-wind-S.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-south-south-west, .SSW {
    background-image: url(../img/weather-icons-40x40-wind-SSW.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-south-west, .SW {
    background-image: url(../img/weather-icons-40x40-wind-SW.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-west-south-west, .WSW {
    background-image: url(../img/weather-icons-40x40-wind-WSW.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-west, .W {
    background-image: url(../img/weather-icons-40x40-wind-W.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-west-north-west, .WNW {
    background-image: url(../img/weather-icons-40x40-wind-WNW.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-north-west, .NW {
    background-image: url(../img/weather-icons-40x40-wind-NW.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}

.wind-north-north-west, .NNW {
    background-image: url(../img/weather-icons-40x40-wind-NNW.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
}



/* ==========================================================================
   Screen readers
   ========================================================================== */

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

 /*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.listvisible {
    display: inherit;
}

.listhidden {
    display: none;
}


.invisible {
    visibility: hidden;
}

.hidden-desktop {
    display: none;
}




/* ==========================================================================
   Media Queries
   ========================================================================== */


@media only screen and (max-width: 650px) {


    #dot_puho {
        top: 11%;
        left: 3%;
        height: 9px;
        width: 9px;
    }

    #dot_kaho {
        top: 40%;
        left: 26%;
        height: 9px;
        width: 9px;
    }

    #dot_p1 {
        top: 65%;
        left: 28%;
        height: 8px;
        width: 9px;
    }

    #dot_p2 {
        top: 60.0%;
        left: 25%;
        height: 8px;
        width: 9px;
    }

    #plume1 {
        top: 33%;
        left: 34.0%;
    }

    #plume2 {
        top: 36%;
        left: 83.3%;
    }

    #plume1inset {
        top: 14%;
        left: 81.5%;
    }

        #plume1inset.blob {
            top: 4.5%;
            left: 71.20%;
            height: 15%;
            width: 15%;
            max-width: 20%;
        }

    #dot_puho, #dot_kaho, #dot_steamvents, #dot_jaggar, #dot_campground, #dot_trailer, #dot_visitorcenter, #dot_parkinglot, #dot_thurston, #dot_devastation, #dot_kealakomo, #dot_chain, #dot_p1, #dot_p2 {
        border: 1px solid #c0c0c0;
        height: 9px;
        width: 9px;
    }

    #label_volcano1, #label_volcano2, #label_inset_volcano1, #label_inset_volcano2, #label_steamvents, #label_jaggar, #label_campground, #label_trailer, #label_visitorcenter, #label_parkinglot, #label_thurston, #label_devastation, #label_kealakomo, #label_chain, #label_p1, #label_p2, #label_puho, #label_kaho {
        font-size: 12px;
    }

    #label_steamvents {
        top: 8%;
        left: 24%;
    }

    #label_visitorcenter {
        top: 14.5%;
        left: 38.5%;
    }

    #label_parkinglot {
        top: 18.5%;
        left: 42%;
    }

    #label_thurston {
        top: 22.5%;
        left: 47%;
    }

    #label_devastation {
        top: 25.5%;
        left: 42%;
    }

    #label_jaggar {
        top: 20%;
        left: 32%;
    }

    #label_trailer {
        top: 27.5%;
        left: 38%;
    }


    #label_campground {
        top: 17%;
        left: 10.5%;
       
    }

    #label_chain {
        top: 60%;
        right: 13%;
    }

    #label_kealakomo {
        top: 54.5%;
        right: 29%;
    }

    #label_volcano1 {
        top: 24%;
        left: 17%;
        text-align: center;
        font-weight: bold;
    }

    #label_volcano2 {
        top: 30.5%;
        left: 80%;
        font-weight: bold;
    }

    #line_steamvents {
        color: black;
        left: 35%;
        top: 11.5%;
    }

    .big-bold-text, .bold-data-text {
        font-size: 16px;
        line-height: 20px;
    }
}

@media only screen and (max-width: 600px) {

    #dot_puho {
        top: 11%;
        left: 2%;
        height: 9px;
        width: 9px;
    }

    #dot_kaho {
        top: 40%;
        left: 26%;
        height: 9px;
        width: 9px;
    }

    #dot_p1 {
        top: 65%;
        left: 28%;
        height: 9px;
        width: 9px;
    }

    #dot_p2 {
        top: 60.0%;
        left: 25%;
        height: 9px;
        width: 9px;
    }

    #volcano1 {
        top: 30%;
        left: 32%;
    }

    #volcano2 {
        top: 33.0%;
        left: 81.5%;
    }

    #volcano1inset {
        top: 8%;
        left: 76%;
        width: 12px;
        height: 12px;
    }

    #plume1inset {
        top: 14%;
        left: 79.5%;
    }

    #plume2inset {
        top: 17.5%;
        left: 98%;
    }

    #plume1inset.blob {
        top: 4.0%;
        left: 68.5%;
        height: 20%;
        width: 20%;
        max-width: 20%;
    }

    #plume2inset.blob {
        top: 4%;
        left: 85.0%;
        height: 20%;
        width: 20%;
        max-width: 20%;
    }

    #label_devastation {
        top: 20.5%;
        left: 43%;
    }

    #label_parkinglot {
        top: 16.5%;
        left: 42.5%;
    }

    #label_thurston {
        top: 20%;
        left: 48%;
    }

    #label_jaggar {
        top:19%;
        left: 30.5%;
    }

    #label_visitorcenter {
        top: 13%;
        left: 38%;
    }

    #label_trailer {
        top: 24%;
        left: 38%;
    }

    #label_campground {
        top: 16%;
        left: 9%;
        line-height:10px;
    }

    #label_kealakomo {
        top: 52%;
        right: 29%;
    }

    #label_chain {
        top: 57%;
        right: 13%;
    }

    #line_steamvents {
        width: 3.25%;
        height: 3.25%;
        left: 35%;
        top: 12%;
    }

    #label_volcano1 {
        top: 21.5%;
        left: 16.5%;
    }

    #label_volcano2 {
        top: 28%;
        left: 79%;
    }

    #label_inset_volcano1, #label_inset_volcano2, #line_inset_volcano1 {
        display: none !important;
        visibility: hidden;
    }

    .big-bold-text, .bold-data-text {
        font-size: 13px;
        line-height: 20px;
    }
}

@media only screen and (max-width: 500px) {

   
    #dot_p1 {
        top: 66%;
        left: 28%;
        height: 9px;
        width: 9px;
    }

    #dot_p2 {
        top: 59%;
        left: 25%;
        height: 9px;
        width: 9px;
    }

    #plume1 {
        top: 35%;
        left: 35%;
    }

        #plume1.blob {
            top: 18%;
            left: 12.25%;
        }

    #plume2 {
        top: 37%;
        left: 85%;
    }

    #plume1inset {
        top: 17%;
        left: 79.5%;
    }

    #plume2inset {
        top: 17.5%;
        left: 98%;
    }

    #plume1inset.blob {
        top: 4%;
        left: 69.0%;
        height: 20%;
        width: 20%;
        max-width: 20%;
    }

    #plume2inset.blob {
        top: 7%;
        left: 86.0%;
        height: 20%;
        width: 20%;
        max-width: 20%;
    }

    #label_volcano1, #label_volcano2, #label_steamvents, #label_jaggar, #label_campground, #label_trailer, #label_visitorcenter, #label_parkinglot, #label_thurston, #label_devastation, #label_kealakomo, #label_chain, #label_p1, #label_p2, #label_puho, #label_kaho {
        font-size: 11px;
    }

    #label_steamvents {
        top: 8%;
        left: 24%;
    }

    #label_visitorcenter {
        top: 13.5%;
        left: 38.5%;
    }

    #label_parkinglot {
        top: 17%;
        left: 42.5%;
    }

    #label_thurston {
        top: 22%;
        left: 48%;
    }

    #label_devastation {
        top: 24%;
        left: 43%;
    }

    #label_jaggar {
        top: 18.5%;
        left: 32.5%;
    }

    #label_trailer {
        top: 26%;
        left: 38%;
    }

    #label_campground {
        top: 16%;
        left: 4%;
        line-height:10px;
    }

    #label_chain {
        top: 57%;
        right: 13%;
    }

    #label_kealakomo {
        top: 52%;
        right: 29%;
    }

    #label_campground {
        top: 16%;
        left: 10%;
    }

    #line_steamvents {
        width: 3%;
        height: 3%;
        left: 35%;
        top: 12.5%;
    }

    #label_volcano1 {
        top: 21.5%;
        left: 15%;
    }

    .individual-park-air-quality-color .Green {
        width: 20px;
        height: 20px;
        background: url(../img/map-dot-16x16-1-good.svg) center center no-repeat;
        background-size: 20px 20px;
        margin: 0 auto;
    }

    .individual-park-air-quality-color .Yellow {
        width: 20px;
        height: 20px;
        background: url(../img/map-dot-16x16-2-moderate.svg) center center no-repeat;
        background-size: 36px 36px;
        margin: 0 auto;
    }

    .individual-park-air-quality-color .Orange {
        width: 20px;
        height: 20px;
        background: url(../img/map-dot-16x16-3-unhealthy-sensitive-grps.svg) center center no-repeat;
        background-size: 20px 20px;
        margin: 0 auto;
    }

    .individual-park-air-quality-color .Red {
        width: 20px;
        height: 20px;
        background: url(../img/map-dot-16x16-4-unhealthy.svg) center center no-repeat;
        background-size: 20px 20px;
        margin: 0 auto;
    }

    .individual-park-air-quality-color .Purple {
        width: 20px;
        height: 20px;
        background: url(../img/map-dot-16x16-5-very-unhealthy.svg) center center no-repeat;
        background-size: 20px 20px;
        margin: 0 auto;
    }

    .individual-park-air-quality-color .Maroon {
        width: 20px;
        height: 20px;
        background: url(../img/map-dot-16x16-7-hazardous.svg) center center no-repeat;
        background-size: 20px 20px;
        margin: 0 auto;
    }

    .individual-park-air-quality-color .Grey {
        width: 20px;
        height: 20px;
        background: url(../img/map-dot-16x16-6-no-data.svg) center center no-repeat;
        background-size: 20px 20px;
        margin: 0 auto;
    }

    .big-bold-text, .bold-data-text {
        font-size: 15px;
        line-height: 20px;
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #555;
    }

    .map_switch {
        font-size: 11px;
    }

    #explore-by-map {
        font-size: 12px;
    }

    .map_key_havo .levelsshort {
        font-size: 0.8em;
        line-height: 1.6em;
    }

    .map_key_havo .levelslong {
        font-size: 0.8em;
        line-height: 1.6em;
    }
}

@media only screen and (max-width: 450px) {
    #label_volcano1, #label_volcano2, #label_steamvents, #label_jaggar, #label_campground, #label_trailer, #label_visitorcenter, #label_parkinglot, #label_thurston, #label_devastation, #label_kealakomo, #label_chain, #label_p1, #label_p2, #label_puho, #label_kaho {
        font-size: 11px;
    }

    #label_steamvents {
        top: 7.0%;
        left: 24%;
    }

    #label_visitorcenter {
        top: 13.0%;
        left: 38.5%;
    }

    #label_parkinglot {
        top: 15.7%;
        left: 43%;
    }

    #label_thurston {
        top: 21.2%;
        left: 48%;
    }

    #label_devastation {
        top: 24%;
        left: 43%;
    }

    #label_jaggar {
        top: 21.8%;
        left: 30%;
    }

    #label_trailer {
        top: 26%;
        left: 38%;
    }

    #label_campground {
        top: 16%;
        left: 7%;
        line-height:10px;
    }

    #label_chain {
        bottom: 40.5%;
        right: 13%;
    }

    #label_kealakomo {
        top: 45.5%;
        right: 29%;
    }

    #label_volcano1 {
        top: 22%;
        left: 12%;
    }

    #label_volcano2 {
        top: 28%;
        left: 79%;
        font-weight: bold;
    }

    #label_puho {
        left: 9%;
        top: 15%;
    }

    #label_kaho {
        left: 36%;
        top: 1%;
        font-size: 9px;
    }

    #label_p1 {
        left: 5%;
        top: 70%;
    }

    #label_p2 {
        left: 5%;
        top: 45.5%;
    }

    #line_steamvents {
        width: 4.5%;
        height: 4.5%;
        left: 36%;
        top: 9.5%;
        transform: rotate(50deg);
    }

    


    .individual-park-air-quality-index-link-description .technical-text {
        font-size: 9px;
    }
}

@media only screen and (max-width: 398px) {

    #plume1inset {
        top: 17%;
        left: 79.5%;
    }

    .big-bold-text, .bold-data-text {
        font-size: 12px;
        line-height: 20px;
    }
}