/*  07062022 SC */

#chartjs-tooltip3 {
    display: block;
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, .6);
    color: white;
    padding: 5px 12px 3px 12px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .2s ease;
    pointer-events: none;
    line-height: 16px;
    text-align:center;
    left: 0px;
    top: 0px;
    z-index:255;
}

.chartjs-tooltip3-latlon {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    color: #fff;
}

.chartjs-tooltip3-6left {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    color: #fff;
    text-align: left;
    float: left;
}

.chartjs-tooltip3-6right {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    color: #fff;
    text-align: left;
    left: 170px;
    position: absolute;
}

/* ==========================================================================
   Base styles
   ========================================================================== */

html,
button,
input,
select,
textarea {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.4;
    color: #222;
}

html {
    box-sizing: border-box;
}

body {
    background: #fff;
    font-family: Arial, sans-serif;
    color: #555;
    font-size: 16px;
    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 images, 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;
}

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

/*
 * For Chart.js
 */

canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* ==========================================================================
   General styles
   ========================================================================== */
.pc {
    display: none;
}

.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;
}

/* ------------------- TEXT STYLES ----------------- */

h1 {
    font-family: Georgia, 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;
}

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

a {
    color: #7a885e;
    text-decoration: none;
}

    a:hover {
        color: #7a885e;
        text-decoration: underline;
    }

    a:focus {
        outline: none !important;
    }

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

.descriptor-text {
    font-size: 14px;
    line-height: 20px;
    font-family: Arial, sans-serif;
    color: #555;
}

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

.green-button {
    background: #7a885e;
    color: #fff !important;
    text-decoration: none;
    padding: 7px 18px;
    font-size: 12px;
    font-weight: normal;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

    .green-button:hover, .green-button.active {
        background: #617240;
        color: #fff;
        text-decoration: none;
    }

.full-width-park-green-button {
    background: #7a885e;
    color: #fff !important;
    text-decoration: none;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: normal;
    border-radius: 4px;
    display: none;
    cursor: pointer;
    text-align: center;
    margin: 10px auto 5px;
    width: 98%;
}

    .full-width-park-green-button:hover {
        background: #617240;
        color: #fff;
        text-decoration: none;
    }

.full-width-park-link-button {
    background: #a68a7c;
    color: #fff !important;
    text-decoration: none;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: normal;
    border-radius: 4px;
    display: none;
    cursor: pointer;
    text-align: center;
    margin: 0px 0px 0px;
    width: 100%;
}

    .full-width-park-link-button:hover {
        background: #917667;
        text-decoration: none;
    }

.light-grey-text {
    color: #aaa;
}

.centered-text {
    text-align: center;
}

a.green-link {
    color: #7a885e;
    text-decoration: none;
}

    a.green-link:hover {
        color: #555;
        text-decoration: underline;
    }

/* ==========================================================================
   Page-specific styles
   ========================================================================== */

/* HEADER AND FOOTER PLACEHOLDERS */

.header-placeholder {
    width: 100%;
    background: #000;
    margin: 0;
    padding: 10px 0 20px;
}

.header-placeholder-links-holder {
    width: 1200px;
    margin: 0 auto;
}

.header-background-image {
    width: 100%;
    background: url(../img/sky-background.jpg) center center no-repeat;
    background-size: cover;
    padding-top: 118px;
}

.header-transparent-bg {
    background: url(../img/transparent-grey-bg.png) top left repeat;
    width: 100%;
    padding: 30px 0;
    margin: 0;
}

.header-page-name {
    width: 1200px;
    margin: 0 auto;
}

    .header-page-name h2 {
        font-weight: bold;
        font-size: 28px;
        color: #fff;
        margin: 0;
        padding: 0;
    }

.header-links {
    width: 1200px;
    margin: 20px auto 0;
    font-weight: bold;
    font-size: 12px;
    color: #fff;
}

.footer-placeholder {
    width: 100%;
    background: #000;
    margin: 0;
    padding: 50px 0;
}

.footer-links {
    width: 1200px;
    margin: 20px auto 0;
    font-weight: bold;
    font-size: 12px;
    color: #fff;
}

.footer-links-left {
    max-width: 483px;
    height: auto;
    float: left;
    display: inline-block;
}

.footer-logo-right {
    max-width: 244px;
    height: auto;
    float: right;
    display: inline-block;
}

/* HOME */

.page-wrapper {
    width: 1200px;
    margin: 20px auto;
}

.breadcrumb-holder {
    margin: 40px 0 20px 0;
    font-style: italic;
    font-size: 12px;
    line-height: 16px;
    height: 20px;
}

    .breadcrumb-holder ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .breadcrumb-holder ul li {
            display: inline-block;
            margin: 0;
            padding: 0;
            list-style: none;
            font-style: italic;
            font-size: 12px;
            line-height: 16px;
            float: left;
        }

            .breadcrumb-holder ul li:after {
                content: "/";
                position: relative;
                margin: 0 8px;
                padding: 0;
                color: #555;
                right: 0;
            }

            .breadcrumb-holder ul li a {
            }

            .breadcrumb-holder ul li:last-child:after {
                content: "";
            }

.select-monitoring-station {
    margin-bottom: 60px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    select::-ms-expand { /* for IE 11 */
        display: none;
    }

.select-monitoring-station select, .recent-data-timeframe-dropdown select {
    color: #555;
    font-size: 12px;
    padding: 4px 30px 4px 8px;
    margin: 0;
    border: none;
    height: 30px;
    background: url(../img/dropdown-arrow.png) no-repeat;
    background-position: calc(100% - 14px) center;
    background-color: #eee;
    border-radius: 0;
    outline: none !important;
}

.recent-data-timeframe-dropdown select {
    min-width: 184px;
    background-position: calc(100% - 10px) center;
}

.select-monitoring-station button {
    background: #7a885e;
    border: none;
    color: #fff;
    font-size: 12px;
    line-height: 23px;
    height: 30px;
    padding: 4px 12px;
    letter-spacing: .03em;
    margin: 0 0 0 -7px;
}

    .select-monitoring-station button:hover {
        background: #617240;
        text-decoration: none;
    }

.page-headlines {
    display: block;
    margin: 20px 0;
}

.tab-area-holder {
}

.ui-state-default.ui-corner-top {
    background: #7a885e;
}

.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: 1px solid #ccc;
    border-bottom: 1px 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;
}



#jumpPMtab {
    background: #a68a7c;
}

#jumpPMtab:hover {
    background: #917667;
}



.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;
    }

.explore-by-map-holder {
}

.map-top-centered-text {
    text-align: center;
    color: #555;
    padding: 2em 0;
}

.map-holder {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 10px 0;
}

    .map-holder .img-responsive {
        width: 100%;
    }

.location-dot-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}



.location-dot {
    position: absolute;
    height: 20px;
    width: 20px;
    background: url(../img/map-dot-16x16-6-no-data.svg) no-repeat;
    background-size: 16px 16px;
    background-position: center;
    transition: .2s all ease-in-out;
    z-index: 50;
}

.location-dot-pm {
    position: absolute;
    height: 20px;
    width: 20px;
    background: url(../img/map-square-16x16-6-no-data.svg) no-repeat;
    background-size: 11px 11px;
    background-position: center;
    transition: .2s all ease-in-out;
    z-index: 50;
}

    .location-dot.brown-dot {
        background: url(../img/mapdotbrown.svg) no-repeat;
        background-size: 16px 16px;
        background-position: center;
    }

.location-dot-pm.brown-dot {
    background: url(../img/mapsquarebrown.svg) no-repeat;
    background-size: 11px 11px;
    background-position: center;
}

    .location-dot:hover, .location-dot.green-dot:hover, .location-dot.yellow-dot:hover, .location-dot.orange-dot:hover, .location-dot.red-dot:hover, .location-dot.purple-dot:hover, .location-dot.grey-dot:hover, .location-dot.Green:hover, .location-dot.Yellow:hover, .location-dot.Orange:hover, .location-dot.Red:hover, .location-dot.Purple:hover, .location-dot.Grey:hover {
        height: 20px;
        width: 20px;
        background-size: 20px 20px;
        background-position: center;
    }

.location-dot-pm:hover, .location-dot-pm.green-dot:hover, .location-dot-pm.yellow-dot:hover, .location-dot-pm.orange-dot:hover, .location-dot-pm.red-dot:hover, .location-dot-pm.purple-dot:hover, .location-dot-pm.maroon-dot:hover, .location-dot-pm.grey-dot:hover, .location-dot-pm.Green:hover, .location-dot-pm.Yellow:hover, .location-dot-pm.Orange:hover, .location-dot-pm.Red:hover, .location-dot-pm.Purple:hover, .location-dot-pm.maroon:hover, .location-dot-pm.Grey:hover {
    height: 20px;
    width: 20px;
    background-size: 15px 15px;
    background-position: center;
}

    .location-dot.green-dot, .location-dot.Green {
        background: url(../img/map-dot-16x16-1-good.svg) no-repeat;
        background-size: 16px 16px;
        background-position: center;
    }

.location-dot-pm.green-dot, .location-dot-pm.Green {
    background: url(../img/map-square-16x16-1-good.svg) no-repeat;
    background-size: 11px 11px;
    background-position: center;
}

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

.location-dot-pm.yellow-dot, .location-dot-pm.Yellow {
    background: url(../img/map-square-16x16-2-moderate.svg) no-repeat;
    background-size: 11px 11px;
    background-position: center;
}

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

.location-dot-pm.orange-dot, .location-dot-pm.Orange {
    background: url(../img/map-square-16x16-3-unhealthy-sensitive-grps.svg) no-repeat;
    background-size: 11px 11px;
    background-position: center;
}

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

.location-dot-pm.red-dot, .location-dot-pm.Red {
    background: url(../img/map-square-16x16-4-unhealthy.svg) no-repeat;
    background-size: 11px 11px;
    background-position: center;
}

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

.location-dot-pm.purple-dot, .location-dot-pm.Purple {
    background: url(../img/map-square-16x16-5-very-unhealthy.svg) no-repeat;
    background-size: 11px 11px;
    background-position: center;
}

.location-dot-pm.maroon-dot, .location-dot-pm.Maroon {
    background: url(../img/map-square-16x16-7-hazardous.svg) no-repeat;
    background-size: 11px 11px;
    background-position: center;
}

    .location-dot.grey-dot, .location-dot.Grey {
        background: url(../img/map-dot-16x16-6-no-data.svg) no-repeat;
        background-size: 16px 16px;
        background-position: center;
    }

.location-dot-pm.grey-dot, .location-dot-pm.Grey {
    background: url(../img/map-square-16x16-6-no-data.svg) no-repeat;
    background-size: 11px 11px;
    background-position: center;
}



#location-2-popup {
    top: 38%;
    left: 42%;
}

#location-3 {
    top: 60%;
    left: 46%;
}

#location-4 {
    top: 33%;
    left: 76%;
}

/* insert map dots  */

.air-quality-index-under-map-holder {
    margin: 50px;
    text-align: center;
}

.air-quality-index-under-map {
    margin: 0;
    width: auto;
    display: inline-block;
    text-align: left;
    font-weight: bold;
}

    .air-quality-index-under-map ul {
        list-style: none;
        padding: 0;
    }

        .air-quality-index-under-map ul li {
            font-weight: normal;
            font-size: 12px;
            color: #555;
            line-height: 22px;
            vertical-align: middle;
        }

    .air-quality-index-under-map img {
        margin-right: 10px;
        vertical-align: middle;
    }

.air-quality-index-popup {
    display: none;
}

/* ---------------- MAP POPUP -------------- */

.blocks {
    position: absolute;
    padding-left: 10px;
    z-index: 100;
    display: none;
}

.map-popup-holder {
}

.map-popup {
    position: absolute;
    background: #fff;
    padding: 0;
    box-shadow: 0px 0px 10px #333;
    width: 320px;
}

.map-popup-header {
    background: #444;
    padding: 15px 20px;
    color: #aaa;
    position: relative;
}

.map-popup-header-left-arrow {
    background: url(../img/popup-left-arrow-small.png) 0 0 no-repeat;
    content: "";
    position: absolute;
    top: 20px;
    left: -10px;
    width: 10px;
    height: 10px;
}


.map-popup-header-right-arrow {
    background: url(../img/popup-left-arrow-small-right.png) 0 0 no-repeat;
    content: "";
    position: absolute;
    top: 20px;
    left: 320px;
    width: 10px;
    height: 10px;
}



.map-popup-header h3 {
    color: #fff;
    padding: 0;
    margin: 0;
}

.popup-park-location, .popup-date-time {
    font-size: 12px;
    color: #aaa;
    padding: 0;
    margin: 0;
}

.popup-date-time {
    padding: 0;
}

.close-popup-holder {
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 20px;
}

    .close-popup-holder a {
        color: #aaa;
        text-decoration: none;
        font-size: 16px;
        font-weight: normal;
    }

        .close-popup-holder a:hover {
            color: #aaa;
            text-decoration: none;
        }

.map-popup-tabs-holder {
    background: #eee;
    padding: 15px;
}

    .map-popup-tabs-holder li {
        margin-right: 0 !important;
        border-radius: 0;
        min-width: 50px !important;
        padding: 0;
    }

        .map-popup-tabs-holder li:after {
            content: '|' !important;
            color: #555 !important;
            position: relative !important;
            margin: 0 5px !important;
            display: inline-block !important;
            background: none !important;
            height: auto !important;
            width: auto !important;
            bottom: auto !important;
            left: auto !important;
        }

        .map-popup-tabs-holder li:last-child:after {
            content: '' !important;
        }

.map-popup-locations-tabs {
    padding: 0;
    margin: 0;
}

    .map-popup-locations-tabs li.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab.ui-tabs-active.ui-state-active a {
        color: #555 !important;
        text-decoration: none !important;
        padding: 0;
        font-size: 12px !important;
        border-bottom: 1px solid #555 !important;
        font-weight: 700 !important;
    }

    .map-popup-locations-tabs li.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab a {
        padding: 0;
        font-size: 12px !important;
    }
    /*.map-popup-locations-tabs .ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active:after {
		content:"";
		background: none;
		bottom:-14px;
		left:45%;
		position: absolute;
		height: 14px;
		width: 20px;
		display: block;
	}*/

    .map-popup-locations-tabs ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .map-popup-locations-tabs ul li {
            float: left;
            display: inline-block;
            margin: 0 10px 0 0;
            background: none !important;
            color: #444 !important;
        }

            .map-popup-locations-tabs ul li a.ui-tabs-anchor {
                text-decoration: none;
                background: none !important;
                border-bottom: 1px solid #eee !important;
                color: #7a885e !important;
            }

            .map-popup-locations-tabs ul li a {
                border-bottom: 1px solid #eee !important;
            }

                .map-popup-locations-tabs ul li a:hover {
                    color: #444 !important;
                    text-decoration: none !important;
                    border-bottom: 1px solid #555 !important;
                }

.map-popup-lower-section-holder.ui-tabs-panel.ui-corner-bottom.ui-widget-content {
    border: none !important;
    padding: 5px 20px 10px 20px;
}

.map-popup-lower-section-holder {
    padding: 0 10px 10px 10px;
    display: block;
}

.map-popup-ozone-1-hour {
    padding: 5px 0;
    margin: 0;
    border-bottom: 1px solid #ccc;
}

    .map-popup-ozone-1-hour .technical-text, .map-popup-ozone-8-hour .technical-text {
        line-height: 30px;
    }

.map-popup-ppb {
    float: right;
    display: inline-block;
}

.map-popup-ozone-8-hour {
    padding: 5px 0;
    margin: 0;
}

.map-popup-air-quality {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    min-height: 40px;
}

    .map-popup-air-quality a.information-link {
        margin-top: 8px;
        display: inline-block;
        float: right;
    }

    .map-popup-air-quality .technical-text {
        line-height: 40px;
    }

.map-popup-air-quality-color-dot {
    width: 36px;
    height: 36px;
    float: left;
    display: inline-block;
    background: url(../img/map-dot-16x16-6-no-data.svg)center center no-repeat;
    background-size: 36px 36px;
    margin-right: 10px;
}

.map-popup-air-quality-color-dot-pm {
    width: 36px;
    height: 36px;
    float: left;
    display: inline-block;
    background: url(../img/map-square-16x16-6-no-data.svg)center center no-repeat;
    background-size: 36px 36px;
    margin-right: 10px;
}

    .green-dot, .map-popup-air-quality-color-dot.Green {
        background: url(../img/map-dot-16x16-1-good.svg)center center no-repeat;
    }

.green-dot-pm, .map-popup-air-quality-color-dot-pm.Green {
    background: url(../img/map-square-16x16-1-good.svg)center center no-repeat;
}

    .yellow-dot, .map-popup-air-quality-color-dot.Yellow {
        background: url(../img/map-dot-16x16-2-moderate.svg)center center no-repeat;
    }

.yellow-dot-pm, .map-popup-air-quality-color-dot-pm.Yellow {
    background: url(../img/map-square-16x16-2-moderate.svg)center center no-repeat;
}

    .orange-dot, .map-popup-air-quality-color-dot.Orange {
        background: url(../img/map-dot-16x16-3-unhealthy-sensitive-grps.svg)center center no-repeat;
    }

.orange-dot-pm, .map-popup-air-quality-color-dot-pm.Orange {
    background: url(../img/map-square-16x16-3-unhealthy-sensitive-grps.svg)center center no-repeat;
}

    .red-dot, .map-popup-air-quality-color-dot.Red {
        background: url(../img/map-dot-16x16-4-unhealthy.svg)center center no-repeat;
    }

.red-dot-pm, .map-popup-air-quality-color-dot-pm.Red {
    background: url(../img/map-square-16x16-4-unhealthy.svg)center center no-repeat;
}

    .purple-dot, .map-popup-air-quality-color-dot.Purple {
        background: url(../img/map-dot-16x16-5-very-unhealthy.svg)center center no-repeat;
    }

.purple-dot-pm, .map-popup-air-quality-color-dot-pm.Purple {
    background: url(../img/map-square-16x16-5-very-unhealthy.svg)center center no-repeat;
}

.maroon-dot-pm, .map-popup-air-quality-color-dot-pm.Maroon {
    background: url(../img/map-square-16x16-7-hazardous.svg)center center no-repeat;
}

    .grey-dot, .map-popup-air-quality-color-dot.Grey {
        background: url(../img/map-dot-16x16-6-no-data.svg)center center no-repeat;
    }

.grey-dot-pm, .map-popup-air-quality-color-dot.Grey {
    background: url(../img/map-square-16x16-6-no-data.svg)center center no-repeat;
}


.map-popup-temperature, .map-popup-precipitation {
    width: 50%;
    padding: 0 0 0 16px;
    margin: 0;
    line-height: 50px;
    height: 50px;
    vertical-align: middle;
    display: inline-block;
    float: left;
    border-bottom: 1px solid #ccc;
    -webkit-box-shadow: inset -1px 0px 0px 0px #ccc;
    -moz-box-shadow: inset -1px 0px 0px 0px #ccc;
    box-shadow: inset -1px 0px 0px 0px #ccc;
}

.map-popup-wind, .map-popup-humidity {
    width: 50%;
    padding: 0 0 0 16px;
    margin: 0;
    line-height: 50px;
    height: 50px;
    vertical-align: middle;
    display: inline-block;
    float: left;
    border-bottom: 1px solid #ccc;
}

    .map-popup-temperature span, .map-popup-precipitation span, .map-popup-wind span, .map-popup-humidity span {
        margin-top: 10px;
        float: left;
        display: inline-block;
    }

        .map-popup-temperature span.descriptor-text, .map-popup-precipitation span.descriptor-text, .map-popup-wind span.descriptor-text, .map-popup-humidity span.descriptor-text {
            margin: 18px 0 0 3px;
            float: left;
            display: inline-block;
        }

.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;
}

.map-popup-temperature img, .map-popup-precipitation img, .map-popup-wind img, .map-popup-humidity img {
    width: 30px;
    height: 30px;
    float: left;
    display: inline-block;
    margin: 10px 10px 0 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;
}


.map-popup-standard-metric-holder {
    text-align: center;
    padding: 20px 0;
    display: block;
}

.unit-standard-metric label {
    margin-right: 10px;
    vertical-align: middle;
    font-size: 12px;
}

.map-popup-more-locations-button-holder {
    text-align: center;
    padding: 0 0 10px 0;
    display: block;
}

/* ------------------ PM2.5 INDEX POPUP WINDOW -------------------  */
#particulates-dialog {
    display: none;
    width: 400px;
    height: auto;
    z-index: 600;
    padding: 20px;
}

#particulatesPA-dialog {
    display: none;
    width: 400px;
    height: auto;
    z-index: 600;
    padding: 20px;
}

.popup-particulates-index-item-holder {
    display: block;
    margin: 10px 0;
}

.popup-particulates-index-dot {
    float: left;
    display: inline-block;
    width: 6%;
}

.popup-particulates-index-text {
    display: inline-block;
    float: right;
    width: 94%;
}

    .popup-particulates-index-text .technical-text {
        display: block;
    }

/* ------------------ PM10 INDEX POPUP WINDOW -------------------  */
#particulatesPM10-dialog {
    display: none;
    width: 400px;
    height: auto;
    z-index: 600;
    padding: 20px;
}

.popup-particulatesPM10-index-item-holder {
    display: block;
    margin: 10px 0;
}

.popup-particulatesPM10-index-dot {
    float: left;
    display: inline-block;
    width: 6%;
}

.popup-particulatesPM10-index-text {
    display: inline-block;
    float: right;
    width: 94%;
}

    .popup-particulatesPM10-index-text .technical-text {
        display: block;
    }



/* ------------------ OZONE INDEX POPUP WINDOW -------------------  */
#ozone-dialog {
    display: none;
    width: 400px;
    height: auto;
    z-index: 600;
    padding: 20px;
}

.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;
}

.popup-ozone-index-item-holder {
    display: block;
    margin: 10px 0;
}

.popup-ozone-index-dot {
    float: left;
    display: inline-block;
    width: 6%;
}

.popup-ozone-index-text {
    display: inline-block;
    float: right;
    width: 94%;
}

    .popup-ozone-index-text .technical-text {
        display: block;
    }

/* ----------------  DATA DISCLAIMER POPUP WINDOW --------------  */

#data-disclaimer {
    display: none;
    width: 400px;
    height: auto;
    z-index: 600;
    padding: 20px;
}
/* ----------------  UNIT DEFINITIONS POPUP WINDOW --------------  */

#unit-definitions {
    display: none;
    width: 400px;
    height: auto;
    z-index: 600;
    padding: 20px;
}

/* ---------------- PARK LIST TAB -------------- */

.explore-by-location-holder {
    width: 100%;
    padding-bottom: 65px !important;
}

.sort-metric-holder {
    width: 100%;
    margin: 30px 0;
}

.sort-holder {
    width: 45%;
    display: inline-block;
}

    .sort-holder select {
        color: #555;
        font-size: 12px;
        padding: 4px 30px 4px 8px;
        margin: 0;
        border: none;
        height: 30px;
        background: url(../img/dropdown-arrow.png) no-repeat;
        background-position: calc(100% - 10px) center;
        background-color: #eee;
        min-width: 184px;
        border-radius: 0 !important;
        outline: none !important;
    }

.metric-standard-holder {
    width: 45%;
    display: inline-block;
    float: right;
    text-align: right;
}

form.unit-standard-metric label, form.unit-standard-metric input {
    vertical-align: middle;
}

.park-list-holder {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
}

.individual-park-list-format {
    display: block;
    width: 100%;
    background: #eee;
    padding-bottom: 0px;
    margin-bottom: 10px;
    margin-top: -4px;
   
}

.individual-park-list-format-recent-data {
    display: block;
    width: 100%;
    background: #eee;
    padding-bottom: 0;
    margin-bottom: 10px;
}

    .individual-park-list-format-recent-data .individual-park-data-section,
    .individual-park-list-format-recent-data .individual-park-peak-wind-solar-visibility-section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

.individual-park-header {
    width: 100%;
    background: #444;
    padding: 10px;
    color: #fff;
    margin-top: 40px;
    display: block;
    position: relative;
}

.individual-park-location {
    width: 100%;
    background: #eee;
    padding: 15px 20px;
}

.individual-park-location-name {
    margin-right: 10px;
    color: #000;
}

.individual-park-location .technical-text, h2 span.technical-text {
    color: #999;
}

.individual-park-location .green-button {
    margin-top: -5px;
}

.individual-park-ozone-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: 15px 0;
}

.individual-park-ozone-image {
    width: 10%;
    display: inline-block;
    border-right: 1px solid #aaa;
    margin: 0;
    padding: 0 0 0 20px;
    line-height: 40px;
    vertical-align: top;
    float: left;
    min-height: 40px;
}

.individual-park-1-hour-ozone {
    width: 15%;
    display: inline-block;
    line-height: 40px;
    border-right: 1px solid #aaa;
    vertical-align: top;
    margin: 0;
    float: left;
    min-height: 40px;
    padding: 0 0 0 10px;
}

.individual-park-1-hour-ozone-text {
    min-height: 14px;
    line-height: 14px;
    margin: 0;
    padding: 0;
}

.individual-park-1-hour-ozone-number {
    height: 20px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.individual-park-8-hour-ozone {
    width: 15%;
    display: inline-block;
    margin: 0;
    line-height: 40px;
    border-right: 1px solid #aaa;
    margin: 0;
    vertical-align: top;
    float: left;
    min-height: 40px;
    padding: 0 0 0 10px;
}

.individual-park-8-hour-ozone-text {
    min-height: 12px;
    line-height: 14px;
    margin: 0;
    padding: 0;
}

.individual-park-8-hour-ozone-number {
    height: 20px;
    line-height: 24px;
    margin: 0;
    padding: 0;
}

.individual-park-particulates-section, .individual-park-particulatesPA-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: 15px 0;
    margin-top: -4px;
}




.individual-park-particulatesPM10-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: 15px 0;
    margin-top: -4px;
}

  
.individual-park-particulates-image {
    width: 10%;
    display: inline-block;
    border-right: 1px solid #aaa;
    margin: 0;
    padding: 0 0 0 20px;
    line-height: 40px;
    vertical-align: top;
    float: left;
    min-height: 40px;
}

 
.individual-park-particulatesPA-image {
    width: 10%;
    display: inline-block;
    border-right: 1px solid #aaa;
    margin: 0;
    padding: 0 0 0 20px;
    line-height: 40px;
    vertical-align: top;
    float: left;
    min-height: 40px;
   
}

    .individual-park-particulatesPA-image p {
        font-size: 10px;
        margin: 0 0 -10px 0px;
        padding: 0 0 0 0;
        line-height: 12px;
        text-align: left;
    }

.individual-park-particulatesPM10-image {
    width: 10%;
    display: inline-block;
    border-right: 1px solid #aaa;
    margin: 0;
    padding: 0 0 0 20px;
    line-height: 40px;
    vertical-align: top;
    float: left;
    min-height: 40px;
}

.individual-park-1-hour-particulates {
    width: 15%;
    display: inline-block;
    line-height: 40px;
    border-right: 1px solid #aaa;
    vertical-align: top;
    margin: 0;
    float: left;
    min-height: 40px;
    padding: 0 0 0 10px;
}

.individual-park-1-hour-particulatesPM10 {
    width: 15%;
    display: inline-block;
    line-height: 40px;
    border-right: 1px solid #aaa;
    vertical-align: top;
    margin: 0;
    float: left;
    min-height: 40px;
    padding: 0 0 0 10px;
}

.individual-park-1-hour-particulates-text {
    min-height: 14px;
    line-height: 14px;
    margin: 0;
    padding: 0;
}

.individual-park-1-hour-particulatesPM10-text {
    min-height: 14px;
    line-height: 14px;
    margin: 0;
    padding: 0;
}

.individual-park-1-hour-particulates-number {
    height: 20px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.individual-park-1-hour-particulatesPM10-number {
    height: 20px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.individual-park-24-hour-particulates {
    width: 15%;
    display: inline-block;
    margin: 0;
    line-height: 40px;
    border-right: 1px solid #aaa;
    margin: 0;
    vertical-align: top;
    float: left;
    min-height: 40px;
    padding: 0 0 0 10px;
}

.individual-park-24-hour-particulatesPM10 {
    width: 15%;
    display: inline-block;
    margin: 0;
    line-height: 40px;
    border-right: 1px solid #aaa;
    margin: 0;
    vertical-align: top;
    float: left;
    min-height: 40px;
    padding: 0 0 0 10px;
}

.individual-park-24-hour-particulates-text {
    min-height: 12px;
    line-height: 14px;
    margin: 0;
    padding: 0;
}

.individual-park-24-hour-particulatesPM10-text {
    min-height: 12px;
    line-height: 14px;
    margin: 0;
    padding: 0;
}

.individual-park-24-hour-particulates-number {
    height: 20px;
    line-height: 24px;
    margin: 0;
    padding: 0;
}

.individual-park-24-hour-particulatesPM10-number {
    height: 20px;
    line-height: 24px;
    margin: 0;
    padding: 0;
}

.individual-park-air-quality-section {
    width: 60%;
    display: inline-block;
    margin: 0;
    line-height: 40px;
    vertical-align: top;
    float: left;
    min-height: 40px;
}

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

    .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-section-PA {
    width: 60%;
    display: inline-block;
    margin: 0;
    line-height: 40px;
    vertical-align: top;
    float: left;
    min-height: 40px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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



.individual-park-data-section {
    width: 100%;
    display: block;
    background: #fff;
    margin: 0px 0 0 0;
    border-bottom: 4px solid #eee;
    /*border-right:4px solid #eee;
				border-left: 4px solid #eee;*/
}

.individual-park-peak-wind-solar-visibility-section {
    width: 100%;
    display: block;
    background: #fff;
    margin: 0px 0 0 0;
  
    
}

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

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

}

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

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

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

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


.wind-icon-holder, .solar-radiation-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, .solar-radiation-data-holder {
    width: 75%;
    display: inline-block;
    float: left;
    padding: 0px 0px 0px 10px;
}


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

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

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


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

.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-peak-wind-section {
    width: 25%;
    display: inline-block;
    float: left;
    -webkit-box-shadow: inset -4px 0px 0px 0px #eee, inset 4px 0px 0px 0px #eee;
    -moz-box-shadow: inset -4px 0px 0px 0px #eee, inset 4px 0px 0px 0px #eee;
    box-shadow: inset -4px 0px 0px 0px #eee, inset 4px 0px 0px 0px #eee;
    background: url(../img/triangle-corner-bg.png) top left no-repeat;
    padding: 15px 0;
    border-bottom: 4px solid #eee;
    min-height: 88px;
}

.individual-park-solar-radiation-section {
    width: 25%;
    display: inline-block;
    float: left;
    -webkit-box-shadow: inset -4px 0px 0px 0px #eee;
    -moz-box-shadow: inset -4px 0px 0px 0px #eee;
    box-shadow: inset -4px 0px 0px 0px #eee;
    background: url(../img/triangle-corner-bg.png) top left no-repeat;
    padding: 15px 0;
    border-bottom: 4px solid #eee;
    min-height: 88px;
}

.individual-park-visibility-section {
    width: 50%;
    display: inline-block;
    float: left;
    background: url(../img/triangle-corner-bg.png) top left no-repeat;
    padding: 15px 0;
    -webkit-box-shadow: inset -4px 0px 0px 0px #eee;
    -moz-box-shadow: inset -4px 0px 0px 0px #eee;
    box-shadow: inset -4px 0px 0px 0px #eee;
    border-bottom: 4px solid #eee;
    min-height: 88px;
}

.visibility-data-holder {
    width: 87.5%;
    display: inline-block;
    float: left;
    padding-left: 10px;
}

.visibility-icon-holder {
    width: 12.5%;
    display: inline-block;
    float: left;
    margin-top: 7px;
}

.visibility-title, .precipitation-title, .precipitation-data, .humidity-title {
    line-height: 1em;
}





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

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

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


.pa-air-quality-links {
    margin: 10px 0;
}

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

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


/* ---------------------- RECENT DATA PAGE ----------------------- */

.monitoring-location-form {
    display: inline-block;
    margin-right: 10px;
}

.park-locations-button-holder .green-button {
    margin-right: 5px;
    display: inline-block;
}

    .park-locations-button-holder .green-button.active {
        background: #444;
        text-decoration: none;
    }

.individual-park-ozone-section.recent-data-page {
    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;
}

.individual-park-particulates-section.recent-data-page, .individual-park-particulatesPA-section.recent-data-page {
    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;
}

.individual-park-particulatesPM10-section.recent-data-page {
    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;
}

.individual-park-data-section.recent-data-page {
    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;
    margin: -4px 0 0 0;
}

.individual-park-peak-wind-solar-visibility-section.recent-data-page {
    width: 100%;
    display: block;
    background: #fff;
    background-image: url('../img/triangle-corner-bg.png');
    background-repeat: no-repeat;
    background-position: top left;
    margin: 0px 0 0 0;
}

 

.topborder {
    border-top: 4px solid #eee;
}

.disclaimer-definitions {
    font-size: 12px;
    margin: 0 0 4em 0;
}

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

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

.understanding-ozone {
    font-size: 12px;
    margin: 10px 0 0 0;
}

.recent-data-headline {
    margin: 0 0 30px;
}

.recent-data-timeframe-reset {
    margin: 0 0 0px 0;
}

.recent-data-timeframe-dropdown {
    display: inline-block;
}

.ozone-ozone-chart {
    width: 100%;
    text-align: center;
    margin: 30px auto 0;
    padding: 0;
}

.chart-related-links {
    width: 100%;
    margin: 30px 0;
    padding: 0;
    font-size: 12px;
    text-align: center;
}

    .chart-related-links a {
        margin: 0 5px;
        color: #7a885e;
    }

        .chart-related-links a:first-child {
            margin-right: 5px;
        }

        .chart-related-links a:last-child {
            margin-left: 5px;
        }

/* THE PORTLET AREA - ACCORDION/SORTABLE/DRAGGABLE */

.remove-item {
    color: #acacac;
    text-decoration: none;
    margin: 0 10px;
    display: inline-block;
    cursor: not-allowed;
    height: 26px;
    line-height: 22px;
    vertical-align: middle;
}

    .remove-item:hover {
        color: #444;
        text-decoration: none;
    }

/*.ui-state-default.ui-corner-top {
	background: #eee;
	color:#000;
} */

h3.ui-accordion-header.ui-corner-top.ui-state-default.ui-sortable-handle.ui-accordion-icons {
    padding-left: 60px;
}

.ui-accordion-header-icon {
    float: right;
    display: inline-block;
    margin: 3px 0 0 0;
}

.ui-icon.portlet-toggle.ui-icon-plusthick {
    background: url(../img/accordion-toggle-positive-24x14-expand-resting.svg) center center no-repeat;
    width: 24px;
    height: 14px;
}

    .ui-icon.portlet-toggle.ui-icon-plusthick:hover {
        background: url(../img/accordion-toggle-positive-24x14-expand-mouseover.svg) center center no-repeat;
    }


.ui-icon.portlet-toggle.ui-icon-minusthick {
    background: url(../img/accordion-toggle-positive-24x14-collapse-resting.svg) center center no-repeat;
    width: 24px;
    height: 14px;
}

    .ui-icon.portlet-toggle.ui-icon-minusthick:hover {
        background: url(../img/accordion-toggle-positive-24x14-collapse-mouseover.svg) center center no-repeat;
    }


.drag-icon {
    height: 22px;
    width: 22px;
    line-height: 22px;
    display: inline-block;
    margin: -2px 0 0 5px;
    padding: 0;
    vertical-align: middle;
    background: url(../img/drag-icon-20x20-off.svg) center center no-repeat;
}

    .drag-icon:hover {
        background: url(../img/drag-icon-20x20-on.svg) center center no-repeat;
    }

/* -------------- PORTLETS ------------------ */

.column {
    width: 100%;
    padding-bottom: 30px;
}

.portlet {
    margin: 0 0 5px 0;
    padding: 0;
}

.portlet-header {
    padding: 6px 6px 6px 6px;
    position: relative;
    background: #eee;
    cursor: move;
    border-radius: 0;
}

    .portlet-header:hover {
        background: #e5e5e5;
        border: #e5e5e5;
    }

.portlet-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    cursor: pointer;
    margin-top: -8px;
}

.portlet-content {
    padding: 20px;
    display: none;
}

.portlet-placeholder {
    border: 1px dotted black;
    background: #7a885e;
    opacity: .4;
    margin: 0 1em 1em 0;
    height: 50px;
    border-radius: 0;
}

.portlet.ui-widget.ui-widget-content {
    border: 4px solid #eee;
}

    .portlet.ui-widget.ui-widget-content:hover {
        border: 4px solid #e5e5e5;
    }

        .portlet.ui-widget.ui-widget-content:hover .portlet-header {
            background: #e5e5e5;
        }

.portlet.ui-corner-all {
    border-radius: 0;
}

.tabular-data-panel.ui-widget.ui-widget-content {
    border: 4px solid #444;
    border-radius: 3px;
    margin: 20px 0;
}

.portlet-header.tabular-data-header {
    background: #444;
    border-radius: 0;
    color: #fff;
    font-size: 14px;
    padding-top: 4px;
}

    .portlet-header.tabular-data-header:hover {
        background: #222;
    }

.portlet.tabular-data-panel.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
    border-radius: 4px;
}

    .portlet.tabular-data-panel.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all:hover {
        border-radius: 4px;
        border-color: #222;
    }

        .portlet.tabular-data-panel.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all:hover .portlet-header.tabular-data-header {
            background: #222;
        }

.tabular-data-icon {
    margin-right: 10px;
}

.tabular-data-top-content {
    display: block;
    margin: 0 0 20px 0;
}

img.closing-x {
    cursor: pointer;
    opacity: .7;
}

    img.closing-x:hover {
        cursor: pointer;
        opacity: 1;
    }

/* NEW PORTLET CANVAS WRAPPER */
.chart-axis-wrapper {
    position: relative;
}

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

.chart-wrapper {
    min-width: 900px;
    min-height: 400px;
    max-height: 400px;
}

.chart-wrapper-forecast {
    margin: 0px auto;
    position: relative;
    text-align: center;
    height: 513px;
    width: 700px;
}

#chart-forecast {
    height: 450px;
    width: 700px;
}

.two-weeks .chart-wrapper {
    min-width: 1800px;
}

.three-weeks .chart-wrapper {
    min-width: 2700px;
}

.one-month .chart-wrapper {
    min-width: 3600px;
}

.y-axis {
    position: absolute;
    top: 0;
    left: 0;
}

/* TABULAR DATA */
.tabular-data-top-content {
    min-height: 35px;
}

.tabular-data-header-text {
    margin: 0;
    float: left;
    display: inline-block;
    width: auto;
    max-width: 75%;
}

.tabular-data-export-button {
    margin: 0;
    float: right;
    display: inline-block;
    width: auto;
    max-width: 25%;
    text-align: right;
}

    .tabular-data-export-button a {
        min-width: 152px;
    }

#tabular-data {
}

    #tabular-data table {
        color: #555 !important;
        font-size: 12px;
        width: 100%;
    }

    #tabular-data thead {
        font-weight: bold;
        text-align: left;
    }

        #tabular-data thead tr.labels th {
            font-weight: normal !important;
            color: #999 !important;
        }

        #tabular-data thead tr th {
            padding: 9px;
            border: 1px solid #ccc;
            border-bottom: none;
        }

    #tabular-data tbody th.header {
        text-align: left;
        padding: 9px;
        background: url(../img/accordion-toggle-positive-24x14-expand-mouseover.svg) calc(100% - 20px) center no-repeat #eee;
        background-size: 14px 8px;
        border: 1px solid #eee;
        border-bottom: 1px solid #fff;
        font-weight: normal;
        cursor: pointer;
    }

        #tabular-data tbody th.header:hover {
            background: url(../img/accordion-toggle-positive-24x14-expand-mouseover.svg) calc(100% - 20px) center no-repeat #ddd;
            background-size: 14px 8px;
            border: 1px solid #ddd;
            border-bottom: 1px solid #fff;
            font-weight: normal;
            cursor: pointer;
        }

    #tabular-data tbody.active th.header {
        background: url(../img/accordion-toggle-positive-24x14-collapse-mouseover.svg) calc(100% - 20px) center no-repeat #ddd;
        background-size: 14px 8px;
    }

    #tabular-data tbody tr {
        display: none;
    }

    #tabular-data tbody.active tr {
        display: table-row;
    }

    #tabular-data td {
        padding: 9px;
        border: 1px solid #ccc;
    }

/* TAB data media queries */
@media only screen and (max-width: 820px) {
    .tabular-data-header-text, .tabular-data-export-button {
        width: 100%;
        max-width: 100%;
        margin: 0;
        float: none;
        display: block;
    }

    .tabular-data-export-button {
        text-align: left;
        margin-top: 20px;
    }

    table#tabular-data-table {
        width: 100%;
    }

    #tabular-data thead {
        display: none;
    }

    #tabular-data th.header {
        border-bottom: 1px solid #fff !important;
    }

    tbody.data-holder td {
        display: block;
    }

        tbody.data-holder td:before {
            content: attr(data-th) ": ";
            display: inline-block;
            width: 70%;
            font-weight: normal;
            padding-left: 10px;
        }

        tbody.data-holder td:after {
            content: " " attr(data-units);
        }

        tbody.data-holder td:first-child:before {
            font-weight: bold;
            padding-left: 0;
        }

    #tabular-data table tr td:first-child, #tabular-data table tr th:first-child {
        border: none !important;
        border-bottom: 1px solid #eeeeee !important;
        font-weight: bold;
        margin-top: 10px;
    }

    #tabular-data table tr td:last-child, #tabular-data table tr th:last-child {
        border-bottom: 1px solid #cccccc !important;
    }

    #tabular-data table tr td:last-child, #tabular-data table tr th:last-child {
        border-bottom: 1px solid #cccccc !important;
    }

    #tabular-data table tr:last-child td:last-child, #tabular-data table tr:last-child th:last-child {
        margin-bottom: 20px;
    }

    #tabular-data table td, #tabular-data table th {
        border: none !important;
        border-bottom: 1px solid #eeeeee !important;
        font-weight: normal;
    }
}

@media only screen and (max-width: 480px) {
    tbody.data-holder td:before {
        width: 50%;
    }
}

@media only screen and (max-width: 400px) {
    tbody.data-holder td:before {
        width: 50%;
    }
}


/* REMOVE OUTSIDE BORDERS */
#tabular-data table {
    border-collapse: collapse;
}

    #tabular-data table td, #tabular-data table th {
        border: 1px solid #ccc;
    }

    #tabular-data table tr:first-child th {
        border-top: 0;
    }

    #tabular-data table tr:last-child td {
        border-bottom: 0;
    }

    #tabular-data table tr td:first-child,
    #tabular-data table tr th:first-child {
        border-left: 0;
    }

    #tabular-data table tr td:last-child,
    #tabular-data table tr th:last-child {
        border-right: 0;
    }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 *  Responsive images
 */

.img-responsive {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
}

/*
 *  Image alignment
 */

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.clr {
    clear: both;
}

.right-align {
    text-align: right;
}

.left-align {
    text-align: left;
}

/*
 * 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: 1240px) {
    .page-wrapper, .header-placeholder-links-holder, .header-page-name, .header-links, .footer-links {
        width: 100%;
        padding: 0 20px;
    }
}

@media only screen and (max-width: 1200px) {
    .hidden-below-desktop {
        display: none;
    }
}

/*
@media only screen and (max-width: 1024px) {
    .drag-icon {
        display: none;
    }
}
*/

@media only screen and (max-width: 900px) {
    .page-wrapper, .header-placeholder-links-holder, .header-page-name, .header-links {
        width: 100%;
        padding: 0 20px;
    }

    .footer-logo-right {
        float: left;
        margin-top: 20px;
    }
}

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

    .header-links {
        display: none;
    }

    .header-placeholder-links-holder {
        height: 48px;
    }

    .mobile-image-size {
        width: 100px;
        height: auto;
        margin: 10px 0 0 0;
    }

    .header-placeholder {
        padding: 0;
    }

    .hidden-desktop {
        display: inline-block;
    }

    .page-wrapper, .header-placeholder-links-holder, .header-page-name, .header-links {
        width: 100%;
        padding: 0 20px;
    }

    .breadcrumb-holder {
        display: none;
    }

    .select-monitoring-station {
        margin-bottom: 40px;
    }

        .select-monitoring-station select {
            width: 90%;
            float: left;
            display: inline-block;
        }

        .select-monitoring-station button {
            width: 10%;
            float: left;
            display: inline-block;
        }

    .explore-by-location-holder {
        display: block !important;
    }

    .sort-metric-holder {
        margin: 0;
    }

    .explore-text, .explore-by-map-holder, .main-tab-buttons {
        display: none !important;
    }

    .ui-tabs .ui-tabs-panel {
        border-top: none;
    }

    .sort-holder, .sort-holder form select {
        width: 100%;
        display: block;
    }

    .metric-standard-holder {
        float: none;
        text-align: left;
        margin: 20px 0 10px;
        width: 100%;
    }

    .individual-park-header {
        padding: 10px 35px 10px 16px;
    }

    .park-toggle-container {
        display: none;
    }

    .park-mobile-accordion-button {
        height: 9px;
        width: 16px;
        background: url(../img/accordion-toggle-negative-16x9-expand-resting.svg) center center no-repeat;
        cursor: pointer;
        position: absolute;
        top: 16px;
        right: 16px;
    }

        .park-mobile-accordion-button.active {
            background: url(../img/accordion-toggle-negative-16x9-collapse-resting.svg) center center no-repeat;
        }

    .individual-park-list-format {
        margin: 0 0 5px;
    }

    .individual-park-header {
        margin-top: 5px;
    }

    .individual-park-ozone-image {
        width: 18%;
        padding: 0;
        text-align: center;
    }

    .individual-park-particulates-image {
        width: 18%;
        padding: 0;
        text-align: center;
    }

    .individual-park-particulatesPA-image {
        width: 18%;
        padding: 0;
        text-align: center;
    }

    .individual-park-particulatesPA-image p{
       text-align: center;
    }

    .individual-park-particulatesPM10-image {
        width: 18%;
        padding: 0;
        text-align: center;
    }

    .individual-park-1-hour-ozone {
        width: 35%;
    }

    .individual-park-8-hour-ozone {
        width: 35%;
        border-right: none;
    }

    .individual-park-1-hour-particulates {
        width: 35%;
    }

    .individual-park-1-hour-particulatesPM10 {
        width: 35%;
    }

    .individual-park-24-hour-particulates {
        width: 35%;
        border-right: none;
    }

    .individual-park-24-hour-particulatesPM10 {
        width: 35%;
        border-right: none;
    }

    .individual-park-air-quality-section {
        width: 77%;
        margin: 20px 0 0 18%;
        vertical-align: top;
        border-left: none;
    }

    .individual-park-air-quality-section-PA {
        width: 50%;
        margin: 0px 0 0 0;
        vertical-align: top;
        border-left: none;
    }

    .individual-park-air-quality-color {
        width: 20%;
        margin: 5px 0 0 0;
        text-align: center;
        display: inline-block;
        float: left;
    }

    .individual-park-air-quality-color-PA {
        width: 20%;
        margin: 5px 0 0 0;
        text-align: center;
        display: inline-block;
        float: left;
    }

    .individual-park-air-quality-index-link {
        margin: 5px 0 0 0;
    }

    .individual-park-air-quality-index-link-description {
        width: 80%;
        display: inline-block;
        float: left;
    }

    .individual-park-air-quality-description {
        font-size: 12px;
    }

    .individual-park-temperature-section, .individual-park-peak-wind-section {
        width: 50%;
        padding: 15px 0 15px 5%;
    }

    .individual-park-wind-section, .individual-park-solar-radiation-section {
        width: 50%;
        margin: 0;
        padding: 7px 0 23px 5%;
        -webkit-box-shadow: inset -4px 0px 0px 0px #eee;
        -moz-box-shadow: inset -4px 0px 0px 0px #eee;
        box-shadow: inset -4px 0px 0px 0px #eee;
    }

    .individual-park-precipitation-section {
        width: 50%;
        margin: 0;
        padding: 15px 0 15px 5%;
        border-top: 4px solid #eee;
        -webkit-box-shadow: inset -4px 0px 0px 0px #eee, inset 4px 0px 0px 0px #eee;
        -moz-box-shadow: inset -4px 0px 0px 0px #eee, inset 4px 0px 0px 0px #eee;
        box-shadow: inset -4px 0px 0px 0px #eee, inset 4px 0px 0px 0px #eee;
    }

    .individual-park-humidity-section {
        width: 50%;
        -webkit-box-shadow: inset -4px 0px 0px 0px #eee;
        -moz-box-shadow: inset -4px 0px 0px 0px #eee;
        box-shadow: inset -4px 0px 0px 0px #eee;
        padding: 15px 0 15px 5%;
        border-top: 4px solid #eee;
    }

    .individual-park-visibility-section {
        width: 50%;
        padding: 15px 0 15px 5%;
        border-top: none;
        -webkit-box-shadow: inset -4px 0px 0px 0px #eee, inset 4px 0px 0px 0px #eee;
        -moz-box-shadow: inset -4px 0px 0px 0px #eee, inset 4px 0px 0px 0px #eee;
        box-shadow: inset -4px 0px 0px 0px #eee, inset 4px 0px 0px 0px #eee;
    }

    .full-width-park-green-button {
        display: block;
    }

    .full-width-park-link-button {
        display: block;
    }

    .hidden-mobile {
        display: none;
    }

    .monitoring-location-form {
        width: 100%;
        margin: 0;
    }

    .individual-park-list-format a.full-width-park-green-button {
        padding-top: 10px;
        padding-bottom: 10px;
        width: 94%;
    }

    

    .park-locations-button-holder .green-button {
        margin-bottom: 10px;
    }

    .visibility-data-holder {
        width: 75%;
    }

    .visibility-icon-holder {
        width: 25%;
    }

    .map-popup-standard-metric-holder.right-align {
        text-align: left;
    }

    .ozone-left-column, .ozone-right-column {
        width: 100%;
    }

    .ozone-left-column {
        margin-bottom: 20px;
    }

    .particulates-left-column, .particulates-right-column {
        width: 100%;
    }

    .particulatesPM10-left-column, .particulatesPM10-right-column {
        width: 100%;
    }

    .particulates-left-column {
        margin-bottom: 20px;
    }

    .particulatesPM10-left-column {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 560px) {
    .page-wrapper, .header-placeholder-links-holder, .header-page-name, .header-links {
        width: 100%;
        padding: 0 20px;
    }

    .select-monitoring-station select {
        width: 80%;
        float: left;
        display: inline-block;
    }

    .select-monitoring-station button {
        width: 20%;
        float: left;
        display: inline-block;
    }
}

@media only screen and (max-width: 420px) {
    .page-wrapper, .header-placeholder-links-holder, .header-page-name, .header-links {
        width: 100%;
        padding: 0 20px;
    }

    .ui-dialog {
        width: 320px !important;
    }

    .popup-ozone-index-dot {
        width: 15%;
    }

    .popup-ozone-index-text {
        width: 85%;
    }

    .popup-particulates-index-dot {
        width: 15%;
    }

    .popup-particulatesPM10-index-dot {
        width: 15%;
    }

    .popup-particulates-index-text {
        width: 85%;
    }

    .popup-particulatesPM10-index-text {
        width: 85%;
    }
}

/* ==========================================================================
 Print styles.
 Inlined to avoid required HTTP connection: h5bp.com/r
 ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
   * Don't show links for images, or javascript/internal links
   */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}