body {
    font-size: 12px;
    background: #e2e2e2;
    margin: 0;
    padding: 0 0 25px 0;
    font-family: 'Open Sans', sans-serif;
}

.body-ws {
    font-size: 12px;
    margin: 0;
    padding: 0;
}

.clearfloats {
    clear: both;
}

#obsAllWeatherContainer {
    padding: 0;
}

#weather-maps-stations-camera {
    padding: 10px;
}

#maps-stations-camera-tabs {
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#maps-stations-camera-tabsui {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-style: solid solid none solid;
}

    #maps-stations-camera-tabsui.hide {
        display: none;
    }

#radarMapContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    min-height: 289px;
    margin: 0;
}

.modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 35px;
}

.modal-content, .modal-body {
    height: 100%;
}

.mapsCompact {
    padding: 0px;
    position: relative !important;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.mapsFullScreen {
    height: 100% !important;
    padding: 20px;
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10000;
    background-color: black;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}

#radarMapEnlargedContainer {
    margin: 0px;
    text-align: center;
    height: 480px;
    width: 100%;
    position: relative;
}

#radarMapLoading {
    display: none;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    position: absolute;
    text-align: center;
    background-color: black;
    opacity: 0.75;
    z-index: 160;
    color: #CCCCCC;
    background: url(../images/ajaxloaderLgBlk.gif) repeat-x center;
    background-repeat: no-repeat;
    background-position: center;
    line-height: 350px;
}

#radarMap {
    border: 1px solid #C0C0C0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

#radarMapEnlarged {
    border: 1px solid #C0C0C0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.leaflet-map {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
}

#radarMap .leaflet-control-container .leaflet-control-layers,
#radarMapEnlarged .leaflet-control-container .leaflet-control-layers {
    visibility: hidden !important;
}
/*#radarMapContainer .leaflet-control-layers .leaflet-control-layers-list,
#radarMapEnlargedContainer .leaflet-control-layers .leaflet-control-layers-list {
    display: block;
}*/
#radarMapContainer .leaflet-control,
#radarMapEnlargedContainer .leaflet-control {
    cursor: auto;
    position: relative;
    z-index: 7;
    pointer-events: auto;
    float: right;
    clear: both;
    margin-top: 10px;
    margin-right: 10px;
}

#radarMapContainer .leaflet-control-layers,
#radarMapEnlargedContainer .leaflet-control-layers {
    background-color: #fff;
    border: 1px solid #999;
    border-color: rgba(0,0,0,.4);
    border-radius: 3px;
    box-shadow: none;
}

#radarMapContainer .leaflet-control-layers-list,
#radarMapEnlargedContainer .leaflet-control-layers-list {
    background: #fff;
    padding: 6px 10px 6px 6px;
    color: #404040;
    color: rgba(0,0,0,.75);
}

.map-controls-right-top {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    right: 0;
    top: 0;
}

.controls-box, .modal-body .controls-box {
    background-color: #fff;
    border: 1px solid #999;
    border-color: rgba(0,0,0,.4);
    border-radius: 3px;
    box-shadow: none;
    cursor: pointer;
    position: relative;
    z-index: 12;
    pointer-events: auto;
    clear: both;
    margin: 10px;
    width: 26px;
    height: 26px;
}

.control-enlarge-icon {
    z-index: 13;
    background-image: url(../images/fullscreenBtn.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-right: 2px;
    cursor: pointer;
    float: right;
}

.modal-body .controls-box .control-enlarge-icon {
    /*background-image: url(../images/fullscreenBtnClose.png);*/
}

.modal-body #radarMapContainer .map-controls-right-top .controls-box {
    display: none;
}

.modal-body .map-controls-right-top {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    right: 15px;
    top: 15px;
}

.control-shrink-icon {
    background-image: url(../images/fullscreenBtnClose.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-right: 2px;
    cursor: pointer;
    float: right;
}

.map-controls-left-bottom {
    position: absolute;
    z-index: 11;
    pointer-events: none;
    left: 10px;
    bottom: 5px;
}

.controls-box-large {
    background-color: rgba(255, 255, 255, 1);
    border-color: rgba(0,0,0,.4);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    z-index: 12;
    pointer-events: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

    .controls-box-large.is-visible {
        display: none;
    }

    .controls-box-large:first-child .control-box {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

    .controls-box-large:last-child .control-box {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }

.control-box {
    position: relative;
    width: 40px;
    height: 37px;
    cursor: pointer;
    color: #666;
    background-color: #fff;
    transition: background-color .15s ease-in-out;
    display: inline-block;
    vertical-align: middle;
    border-right: 1px solid #d8d8d8;
}

    .control-box .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        fill: #666;
        stroke: #666;
        transition: fill .15s ease-in-out,stroke .15s ease-in-out;
    }

.layers-svg svg, #layers-svg {
    width: 22px;
    height: 22px;
    padding-top: 2px;
}

.info-svg svg, #info-svg {
    width: 20px;
    height: 20px;
    padding-top: 1px;
}

.animate-svg svg, #play-svg, #pause-svg {
    width: 18px;
    height: 18px;
    padding-top: 1px;
}

#close-svg svg {
    width: 37px;
    height: 35px;
    padding: 4px 10px 4px 10px;
}

.control-box.is-disabled, .control-box.is-disabled svg path {
    cursor: not-allowed;
}

    .control-box.is-disabled .icon, .control-box.is-disabled svg path {
        opacity: .35;
    }

#stationMapCont svg:hover path {
    fill: rgba(0,0,0,0);
}

#stationMapCont path {
    fill: rgba(0,0,0,0);
}

#station-graph-chart svg:hover path {
    fill: rgba(0,0,0,0);
}

#station-graph-chart path {
    fill: rgba(0,0,0,0);
}


.map-layers-left-bottom {
    position: absolute;
    z-index: 11;
    left: 0;
    bottom: 0;
    display: flex;
    margin: 0 0 47px 10px;
}

.layers-list-box {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid #999;
    border-color: rgba(0,0,0,.4);
    border-radius: 3px;
    width: 245px;
    height: 90px;
    padding: 7px;
}

#stationMapCont {
    position: relative;
    width: 100%;
    height: 289px;
    z-index: 1;
}

#stationMapLoading {
    display: none;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    position: absolute;
    text-align: center;
    background-color: black;
    opacity: 0.75;
    z-index: 150;
    color: #CCCCCC;
    background: url(../images/ajaxloaderLgBlk.gif) repeat-x center;
    background-repeat: no-repeat;
    background-position: center;
    line-height: 350px;
}

#stationMap {
    border: 1px solid #ccc;
    /*width: 387px;*/
    width: 100%;
    height: 289px;
    position: absolute;
    z-index: 0;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

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

h1, h2, h3 {
    margin: 0 0 1em 0;
}

* html h1,
* html h2,
* html h3 {
    height: 1%;
}

h1 {
    font-size: 18px;
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
}

/*a { color:#77120a;}*/

#container-outer-sw {
    width: 760px; /* 750px - left & right padding */
}

#tabs-camera {
    /*margin: 3px;*/
    margin-top: 3px;
    height: 330px;
}

#container-outer {
    padding: 2px;
    margin: 8px auto 0 auto;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    /*-moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 3px 3px 5px 6px #ccc;*/
    background-color: #0050c4;
}

#container-inner {
    background-color: #FFF;
}

#contents {
    padding: 1px;
}

#logos {
    padding: 3px 9px;
    height: 80px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #C0C0C0;
}

#tabs-maps {
    padding: 4px !important;
}

#mapsDropDownType {
    float: left;
    margin-top: 11px;
    margin-left: 3px;
}

#mapsDropDownAnimEnlarge {
    float: right;
    margin-right: 7px;
}

.infobox {
    position: relative;
    background-color: white;
    border: 1px solid rgb(136, 136, 136);
    left: 0px;
    top: -0px;
    width: 190px;
    min-width: 190px;
    z-index: 100000;
}

.infobox_close {
    cursor: pointer;
    position: absolute;
    right: 7px;
    top: 8px;
    border: none;
}

.infobox_image {
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color: rgb(136, 136, 136);
    text-align: center;
}

.infobox_getstat {
    border: 1px solid #bfbfbf;
    background-color: #ebedf5;
    display: inline-block;
    margin: 8px;
    padding: 6px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}

.infobox_divider {
    height: 1px;
    color: #C0C0C0;
    margin: 0px;
    padding: 0px;
}

.infobox_image, .infobox_image img {
    background-color: black;
    height: 107px;
}

#stationLegend {
    font-size: 11px;
}

.infobox_title {
    padding: 8px;
    padding-right: 30px;
    font-size: 12px;
    background-color: #ebedf5;
    font-weight: bolder;
}

.infobox_image img {
    width: 100%;
    height: 107px;
}

.infobox_content {
    white-space: normal;
}

.MapPushpinBase img {
    cursor: pointer;
}

.infobox_pointer {
    width: 33px;
    height: 38px;
    overflow: hidden;
    position: relative;
    left: 20px;
    top: -14px;
    z-index: 1000;
}
/*#cameraFieldset
{
    border: 1px solid #999999;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    height: 226px;
}
#cameraStationName
{
    padding-left: 7px;
    padding-right: 7px;
}*/
#tabs-maps img, .mapsImageCont {
    /*width: 387px;*/
    width: 100%;
    height: 290px;
    line-height: 290px;
    text-align: center;
}

#owc-header {
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    padding-bottom: 3px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.mga-wxbug-link {
    display: none;
}

#logos-mga {
    display: none;
}

/*
#logos img { float:left; }
*/
#logos a img {
    border: none;
}

#customer-logo {
    /*margin: 15px 10px 0px 0px;*/
    margin: 5px 5px 0px 0px;
    height: 50px;
    float: left;
    /*width: 40%;*/
}

    #customer-logo img {
        height: 50px;
        width: auto;
        margin-left: 10px;
    }


    #customer-logo h2 {
        display: none;
    }

#logos h1,
#logos h2 {
    margin: 0;
    padding: 0;
    line-height: 35px;
}

#customer-logo h1 {
    color: #063;
    font-size: 16px;
}

#wxbug-logo {
    /*margin: 10px auto 0 auto;*/
    margin: 5px;
    float: right;
    text-align: left;
    width: 50%;
}

    #wxbug-logo a img {
        height: 60px;
        width: auto;
        margin-right: 10px;
    }

    #wxbug-logo .consumer {
        display: none;
    }

    #wxbug-logo .consumer, #wxbug-logo .professional {
        float: right;
    }

    #wxbug-logo h2 {
        font-size: 14px;
        padding-right: 10px;
        float: right;
        line-height: 70px;
        color: #666666;
    }

/*#ad-wrap { display:none; }*/
#weather-wrapper {
    padding-top: 5px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #C0C0C0;
}

#weather-wrapper,
#alerts-wrapper {
    padding: 0 7px 7px 7px;
}

#weather-wrapper-ws {
    padding: 0;
}

#flash {
    float: left;
    width: 412px;
    height: 296px;
    border: 1px #000 solid;
    display: block;
    overflow: hidden;
}

#flash-col-right {
    width: 145px;
    float: right;
}

#flash-col-left {
    width: 260px;
    display: block;
    float: left;
}

#flash-today {
    border: 2px #999 solid;
    background: #eee;
    margin: 0px 0px 5px 15px;
    width: 220px;
    padding: 3px 3px 5px 12px;
}

    #flash-today table {
        width: 200px;
        text-align: center;
        padding: 0px;
        border-bottom-width: 0px;
    }

    #flash-today table {
        font-size: 11px;
    }

    #flash-today .ralign {
        text-align: right;
    }

    #flash-today .lalign {
        text-align: left;
        width: 100px;
    }

        #flash-today .lalign.val {
            text-align: left;
            width: 50px;
            padding-left: 3px;
        }

.sofar {
    border-bottom: solid 1px #999;
    line-height: 1px;
}

#flash-links a {
    text-decoration: none;
    color: #666666;
    margin-right: 15px;
}

#flash-links {
    border-top: 1px solid #C0C0C0;
    margin-left: 20px;
    width: 92%;
}

    #flash-links a:hover {
        text-decoration: underline;
        cursor: pointer;
        cursor: hand;
    }

#flash-details {
    border: 2px #999 solid;
    background: #eee;
    margin: 8px 5px 8px 5px;
    line-height: 21px;
    padding: 8px 0px 8px 5px;
}

#flash-container {
    padding: 7px 0px 5px 0px
}

#flash img {
    border: none;
}

/*#upanTabs { overflow:hidden; }*/

#maps-and-camera {
    float: left;
    width: 358px;
    height: 297px; /* no top border so add 1px to height */
    border-right: 1px #000 solid;
    border-bottom: 1px #000 solid;
    overflow: hidden;
    margin-right: -3px; /* fixes IE6 bug - http://www.positioniseverything.net/explorer/dup-characters.html */
}

.tabs {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .tabs li {
        display: block;
        /*width:120px;*/
        float: left;
        background: url(../images/bg-tab.jpg) repeat-x center;
        border: 1px #000 solid;
        border-bottom: 0;
        margin-right: 6px;
        text-align: center;
    }

.statPin {
    overflow: visible !important;
    position: absolute;
    z-index: 0;
}

    .statPin img {
        margin-top: -6px;
    }

#tabs-three li {
    width: 97px;
}

#tabs-two li {
    width: 149px;
}

    #tabs-two li.last {
        width: 150px;
    }

.tabs li.selected {
    background-image: none;
}

.tabs li.first {
    border-left: none;
}

.tabs li.last {
    padding-right: 1px;
    margin: 0;
    border-right: none;
}

.tabs li a {
    display: block;
    height: 18px;
    line-height: 18px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 0 1em;
}

.tabs li.selected a {
    color: #77120a;
    position: relative;
    top: 1px;
    background: #FFF;
}

#maps .enlandanim {
    float: right;
    position: relative;
    top: -23px;
}

#maps,
#camera,
#stations {
    padding: 4px;
    border-top: 1px #000 solid;
}

    #maps img,
    #camera img {
        border: 1px #000 solid;
        display: block;
        width: 298px;
        height: 224px;
        margin-bottom: 5px;
        margin: 0 auto;
    }

#select-map {
    float: left;
}

#enlarge-animate {
    float: right;
}

#seven-day-forecast {
    border: 1px #000 solid;
    border-top: none;
    /*margin:0 auto;*/
    margin: 0px;
    margin-left: 4px;
}

.boxhead {
    background: url(../images/bg-boxhead.jpg) repeat-x center;
    height: 20px;
    border-bottom: 1px #999 solid;
}

    .boxhead h3 {
        font-size: 14px;
        line-height: 20px;
        margin: 0;
        padding: 0 1em;
    }

/* Start seven day forecast */
#forecast {
}

.forecast-day {
    border-top: 1px #C1C2C7 solid;
}

.forecast-day,
.forecast-night {
    width: 105px; /* width 101 - left & right padding */
    padding: 3px;
    border-right: 1px #c1c2c7 solid;
    vertical-align: top;
}

    .forecast-day.last,
    .forecast-night.last {
        border-right: none;
    }

    .forecast-day h4,
    .forecast-night h5 {
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        margin: 0px;
        padding: 0px;
    }

    .forecast-night h5 {
        font-size: 12px;
    }

    .forecast-day img,
    .forecast-night img {
        float: left;
        width: 50px;
        height: 42px;
    }

p.day-temp,
p.night-temp {
    float: left;
    line-height: 32px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 50px;
}

p.day-temp-intl,
p.night-temp-intl {
    line-height: 18px;
    font-weight: bold;
    text-align: left;
    margin: 0;
    padding: 0 0 0 3px;
    width: 50px;
}


p.day-temp-intl {
    color: #d65100;
}

p.night-temp-intl {
    color: #003cb7;
}

p.day-temp {
    color: #d65100;
}

p.night-temp {
    color: #003cb7;
}

p.forecast-desc {
    margin: .5em 0;
}

a.more {
    float: right;
    text-decoration: none;
}

#detailed-forecast {
    width: 100%;
}

    #detailed-forecast tr {
        display: none;
    }

    #detailed-forecast th,
    #detailed-forecast td {
        vertical-align: middle;
        padding: 5px;
        border-top: 1px #c1c2c7 solid;
    }

    #detailed-forecast th {
        width: 100px;
    }

    /*#detailed-forecast td.details { width:500px }*/

    #detailed-forecast td.details p {
        margin: 0;
        padding: 0;
        width: 500px;
    }

    #detailed-forecast .endday td {
        border-top: none;
    }

.close-forecast, .day, .night, .date {
    text-align: center;
    line-height: 20px;
}



/* End seven day forecast */

#footer-langs {
    padding: 10px;
    text-align: center;
    margin: 0 auto;
}

    #footer-langs img {
        border: none;
        vertical-align: bottom;
    }

.langs-link {
    font-size: 9px;
    color: #000000;
}

/* POPUP STUFF */

body.popup {
    /*background:url(../images/popuptopbg-pro.gif) repeat-x top;*/
    height: auto;
    margin: 0 7px 7px 7px;
    background: none;
    background-color: rgb(231, 233, 254);
}


/*
body.popup { background-image:none; }
*/
#popup-header {
    margin-bottom: 10px;
    height: 26px;
}

    #popup-header h1 {
        background: rgb(16, 35, 140);
        background-image: none;
        border: none;
        color: #fff;
        font-size: 18px;
        line-height: 30px;
        text-align: center;
    }

#print, #close, #dl {
    float: right;
    background: url(../images/arrow-closed.gif) no-repeat left;
    padding-left: 10px;
    margin: 0;
    margin-left: 10px;
    /*color:#fff;*/
    line-height: 20px;
}

.popup.maps #container-outer {
    width: 980px;
}

.popup.obs #container-outer {
    width: 760px;
}

.popup #contents {
    padding: 5px;
}

#popup-maps {
    float: left;
    width: 100%;
}

.box#map-control-wrapper,
.box#camera-control-wrapper {
    float: right;
    width: 320px;
}

    .box#map-control-wrapper .boxbody,
    .box#camera-control-wrapper .boxbody {
        padding: 25px 5px;
        height: 411px;
        text-align: center;
    }

.popup .boxhead {
    border: 1px #999 solid;
}

    .popup .boxhead h3 {
        text-align: center;
    }

.popup .boxbody {
    border: 1px #999 solid;
    border-top: none;
    position: relative;
}

.controlboxouterwrap {
    border: 1px #a2a2a2 solid;
    margin-bottom: 15px;
}

* html .controlboxouterwrap {
    height: 1%
}

.controlboxinnerwrap {
    padding: 10px 2px;
    border: 1px #cdcdcd solid;
    border-top: 1px #fff solid;
    border-left: 1px #fff solid;
    background-color: #dedede;
}

* html .controlboxinnerwrap {
    height: 1%;
}

.popup #animate {
    display: block;
    margin: 12px;
}

#map-select ul {
    list-style-type: none;
    margin: 0 0 15px;
    padding: 0;
}

    #map-select ul li {
        padding: 0;
    }

        #map-select ul li.selected {
            background-color: #dfdfe1
        }

.zoom-console {
    height: 26px;
    width: 277px;
    background: url(../images/zoom-bar.gif) no-repeat center top;
    margin: 0 auto;
}

    .zoom-console img {
        margin: 0px;
        padding: 0px;
        border: none;
    }

    .zoom-console a {
        border: none;
        display: block;
    }

.zoom-neg-disabled, .zoom-pos-ready, .zoom-pos-disabled, .zoom-neg-ready, .zoom-needle div {
    background-color: #999999;
}

.zoom-pos-ready {
    float: left;
    width: 18px;
    height: 18px;
    margin: 4px 2px 0px;
    background-image: url(../images/zoom-pos-ready.gif);
    background-position: no-repeat right bottom;
}

.zoom-neg-ready {
    float: right;
    width: 18px;
    height: 18px;
    margin: 4px 2px 0px;
    background-image: url(../images/zoom-neg-ready.gif);
    background-position: no-repeat left bottom;
}

.zoom-pos-ready:hover {
    background-image: url(../images/zoom-pos-hover.gif);
    background-position: no-repeat right bottom;
}

.zoom-neg-ready:hover {
    background-image: url(../images/zoom-neg-hover.gif);
    background-position: no-repeat left bottom;
}

a[class="zoom-pos-ready"], a[class="zoom-neg-ready"], a[class="zoom-pos-disabled"], a[class="zoom-neg-disabled"] {
    margin: 4px 4px 0px;
}
/* standards compliant browser margins */
.zoom-pos-disabled {
    float: left;
    width: 18px;
    height: 18px;
    margin: 4px 2px 0px;
    background-image: url(../images/zoom-pos-disabled.gif);
    background-position: no-repeat right bottom;
}

.zoom-neg-disabled {
    float: right;
    width: 18px;
    height: 18px;
    margin: 4px 2px 0px;
    background-image: url(../images/zoom-neg-disabled.gif);
    background-position: no-repeat left bottom;
}

.zoom-needle div {
    float: left;
    width: 11px;
    height: 20px;
    margin-top: 3px;
    background-image: url(../images/zoom-needle.gif);
    background-position: no-repeat top right;
}

.zoom-n100 {
    position: relative;
    left: 0px;
}

.zoom-n90 {
    position: relative;
    left: 21px;
}

.zoom-n80 {
    position: relative;
    left: 42px;
}

.zoom-n75 {
    position: relative;
    left: 47px;
}

.zoom-n70 {
    position: relative;
    left: 63px;
}

.zoom-n67 {
    position: relative;
    left: 69px;
}

.zoom-n60 {
    position: relative;
    left: 84px;
}

.zoom-n50 {
    position: relative;
    left: 105px;
}

.zoom-n40 {
    position: relative;
    left: 126px;
}

.zoom-n33 {
    position: relative;
    left: 129px;
}

.zoom-n30 {
    position: relative;
    left: 147px;
}

.zoom-n25 {
    position: relative;
    left: 152px;
}

.zoom-n20 {
    position: relative;
    left: 168px;
}

.zoom-n10 {
    position: relative;
    left: 189px;
}

.zoom-n0 {
    position: relative;
    left: 215px;
}

.zoom-title-pos {
    float: left;
    display: block;
    color: #000;
    padding-left: 5px;
}

.zoom-title-neg {
    float: right;
    display: block;
    color: #000;
    padding-right: 5px;
}

.compass {
    clear: both;
    width: 52px;
    height: 52px;
    margin: 0px auto;
    padding: 0px;
}

.compass-top, .compass-middle, .compass-bottom {
    background-color: #999999;
}

.compass-top {
    margin: 0px;
    padding: 0px;
    line-height: 0px;
    height: 16px;
}

.compass-middle {
    margin: 0px;
    padding: 0px;
    line-height: 0px;
    height: 20px;
}

.compass-bottom {
    margin: 0px;
    padding: 0px;
    line-height: 0px;
    height: 16px;
}

.compass a {
    margin: 0px;
    padding: 0px;
    float: left;
    display: block;
}

.compass img {
    margin: 0px;
    padding: 0px;
    border: none;
}

.compass-01-ready img, .compass-01-disabled img {
    width: 16px;
    height: 16px;
    float: left;
}

.compass-02-ready img, .compass-02-disabled img {
    width: 20px;
    height: 16px;
    float: left;
}

.compass-03-ready img, .compass-03-disabled img {
    width: 16px;
    height: 16px;
    float: left;
}

.compass-04-ready img, .compass-04-disabled img {
    width: 16px;
    height: 20px;
    float: left;
}

.compass-05-ready img, .compass-05-disabled img {
    width: 20px;
    height: 20px;
    float: left;
}

.compass-06-ready img, .compass-06-disabled img {
    width: 16px;
    height: 20px;
    float: left;
}

.compass-07-ready img, .compass-07-disabled img {
    width: 16px;
    height: 16px;
    float: left;
}

.compass-08-ready img, .compass-08-disabled img {
    width: 20px;
    height: 16px;
    float: left;
}

.compass-09-ready img, .compass-09-disabled img {
    width: 16px;
    height: 16px;
    float: left;
}

.compass-01-ready {
    background: url(../images/compass-01-ready.gif) no-repeat left top;
}

.compass-02-ready {
    background: url(../images/compass-02-ready.gif) no-repeat left top;
}

.compass-03-ready {
    background: url(../images/compass-03-ready.gif) no-repeat left top;
}

.compass-04-ready {
    background: url(../images/compass-04-ready.gif) no-repeat left top;
}

.compass-05-ready {
    background: url(../images/compass-05-ready.gif) no-repeat left top;
}

.compass-06-ready {
    background: url(../images/compass-06-ready.gif) no-repeat left top;
}

.compass-07-ready {
    background: url(../images/compass-07-ready.gif) no-repeat left top;
}

.compass-08-ready {
    background: url(../images/compass-08-ready.gif) no-repeat left top;
}

.compass-09-ready {
    background: url(../images/compass-09-ready.gif) no-repeat left top;
}

.compass-01-ready:hover, .compass-01-ready:active {
    background: url(../images/compass-01-hover.gif) no-repeat left top;
}

.compass-02-ready:hover, .compass-02-ready:active {
    background: url(../images/compass-02-hover.gif) no-repeat left top;
}

.compass-03-ready:hover, .compass-03-ready:active {
    background: url(../images/compass-03-hover.gif) no-repeat left top;
}

.compass-04-ready:hover, .compass-04-ready:active {
    background: url(../images/compass-04-hover.gif) no-repeat left top;
}

.compass-06-ready:hover, .compass-06-ready:active {
    background: url(../images/compass-06-hover.gif) no-repeat left top;
}

.compass-07-ready:hover, .compass-07-ready:active {
    background: url(../images/compass-07-hover.gif) no-repeat left top;
}

.compass-08-ready:hover, .compass-08-ready:active {
    background: url(../images/compass-08-hover.gif) no-repeat left top;
}

.compass-09-ready:hover, .compass-09-ready:active {
    background: url(../images/compass-09-hover.gif) no-repeat left top;
}

.compass-01-disabled {
    background: url(../images/compass-01-disabled.gif) no-repeat left top;
}

.compass-02-disabled {
    background: url(../images/compass-02-disabled.gif) no-repeat left top;
}

.compass-03-disabled {
    background: url(../images/compass-03-disabled.gif) no-repeat left top;
}

.compass-04-disabled {
    background: url(../images/compass-04-disabled.gif) no-repeat left top;
}

.compass-05-disabled {
    background: url(../images/compass-05-disabled.gif) no-repeat left top;
}

.compass-06-disabled {
    background: url(../images/compass-06-disabled.gif) no-repeat left top;
}

.compass-07-disabled {
    background: url(../images/compass-07-disabled.gif) no-repeat left top;
}

.compass-08-disabled {
    background: url(../images/compass-08-disabled.gif) no-repeat left top;
}

.compass-09-disabled {
    background: url(../images/compass-09-disabled.gif) no-repeat left top;
}

.camera-ctrl-anim {
    width: 150px;
    padding: 0 0 20px 0;
    margin: 0 auto;
}

.camera-ctrl-anim-title {
    font-weight: bold;
    clear: right;
    float: right;
    width: 146px;
    height: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.camera-ctrl-anim-controls {
    padding-left: 2px;
    text-align: center;
    width: 200px;
}

    .camera-ctrl-anim-controls div {
        float: left;
        height: 20px;
        overflow: hidden;
    }

.camera-ctrl-rev {
    background: url(../images/btn-cam-animate-rev.gif) no-repeat top left #999999;
    border: 0px;
    width: 36px;
}

.camera-ctrl-stop {
    background: url(../images/btn-cam-animate-stop.gif) no-repeat top left #999999;
    border: 0px;
    width: 37px;
}

.camera-ctrl-play {
    background: url(../images/btn-cam-animate-play.gif) no-repeat top left #999999;
    border: 0px;
    width: 37px;
}

.camera-ctrl-fwd {
    background: url(../images/btn-cam-animate-fwd.gif) no-repeat top left #999999;
    border: 0px;
    width: 35px;
}

.camera-ctrl-rev img {
    width: 36px;
    height: 20px;
    border: 0px;
}

.camera-ctrl-stop img {
    width: 37px;
    height: 20px;
    border: 0px;
}

.camera-ctrl-play img {
    width: 37px;
    height: 20px;
    border: 0px;
}

.camera-ctrl-fwd img {
    width: 35px;
    height: 20px;
    border: 0px;
}

.camera-ctrl-anim-nav {
    clear: both;
    text-align: center;
    width: 150px;
    padding: 2px auto 0px auto;
}

.camera-ctrl-rev-disabled {
    background: url(../images/btn-cam-animate-rev-disabled.gif) no-repeat top left #999999;
    border: 0px;
}

.camera-ctrl-stop-disabled {
    background: url(../images/btn-cam-animate-stop-disabled.gif) no-repeat top left #999999;
    border: 0px;
}

.camera-ctrl-pause {
    background: url(../images/btn-cam-animate-pause.gif) no-repeat top left #999999;
    border: 0px;
}

.camera-ctrl-fwd-disabled {
    background: url(../images/btn-cam-animate-fwd-disabled.gif) no-repeat top left #999999;
    border: 0px;
}

.camera-ctrl-rev-disabled img {
    width: 36px;
    height: 20px;
    border: 0px;
}

.camera-ctrl-stop-disabled img {
    width: 37px;
    height: 20px;
    border: 0px;
}

.camera-ctrl-pause img {
    width: 37px;
    height: 20px;
    border: 0px;
}

.camera-ctrl-fwd-disabled img {
    width: 35px;
    height: 20px;
    border: 0px;
}

#fromstation {
    float: left;
    text-align: left;
}

#datepicker {
    float: right;
}

hr {
    clear: both;
    border: 0;
    color: #c1c2c7;
    background-color: #c1c2c7;
    height: 2px;
    margin: 10px 0;
}

#labels {
    font-weight: bold;
    text-align: left;
}

#labels, #inputs {
    clear: both;
}

#monthlabel, #month, #daylabel, #day, #yearlabel, #year {
    float: left;
    margin-right: 5px;
}

#monthlabel, #month {
    width: 100%;
}

#daylabel, #day {
    width: 100%;
}

#yearlabel, #year {
    width: 100%;
}

#datepicker p {
    color: Red;
    margin: 5px 0 0 0;
}

#datepicker #submit {
    margin: 0;
}



table tr.odd {
    background-color: #ececec;
}

table tr.even {
    background-color: #FFF;
}

#dateSticky {
    position: sticky;
    top: 30px;
}

.sticky {
    position: sticky;
    top: 0px;
}

table.obs {
    width: 100%;
    border-collapse: separate !important;
}

    table.obs th {
        background-image: none !important;
        background-color: #dcdcdc !important;
        border: 1px #000 solid !important;
        padding: 2px 5px !important;
        line-height: 1em !important;
        font-weight: bold !important;
        text-align: center !important;
        background-clip: padding-box;
    }

    table.obs td {
        text-align: center;
        border: 1px #ddd solid;
    }

    table.obs tr.secondaryheader th {
        background-color: #c7c7c7;
        text-align: left;
    }

p#changeunits {
    float: right;
}

.graph-wrapper #logo {
    float: left;
}

#graph {
    display: block;
    margin: 0 auto;
}

#lastgraphs {
    margin: 0 0 12px 0;
    text-align: center;
}

    #lastgraphs a {
        margin-right: 25px;
    }

        #lastgraphs a.last {
            margin-right: 0;
        }

#left-axis-wrapper {
    float: left;
}

#right-axis-wrapper {
    float: right;
}

#graph-control {
    margin: 0 0 15px 0;
    text-align: center;
    vertical-align: bottom;
}

    #graph-control label {
        display: block;
        margin: 0 auto;
        color: #999;
    }

.button, .button a {
    border: 1px #7e7e7e solid;
    margin: 7px 0;
    padding: 0;
    font-size: 10px;
    font-size: 12px;
    height: 18px;
    padding: 0 2px;
}

.mapimage {
    float: left;
    margin: 0px;
    text-align: center;
    height: 480px;
    width: 640px;
    position: relative;
    border: 2px #999 solid;
}

    .mapimage img {
        height: 480px;
        width: 640px;
    }

    .mapimage .leaflet-control-container {
        visibility: hidden !important;
    }

/* End popup stuff */

/* local alerts | BEGIN */
#wXlocal-alerts {
    float: left;
    width: 100%;
    background: #ddd;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #000;
    color: #000000;
    padding-bottom: 10px;
}

.wXlocal-alert {
    color: #000000;
    border-top: 11px solid #FF0000;
}

.wXlocal-alert-ALERT {
    color: #FF0000;
    font-weight: bold;
    font-size: 16px;
    float: left;
    padding: 20px 30px 0;
}

.wXlocal-alert-message {
    float: left;
    width: 480px;
    display: block;
    padding: 5px 0 10px;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
}

    .wXlocal-alert-message h1 {
        color: #FF0000;
        padding: 0;
        font-size: 13px;
    }

    .wXlocal-alert-message p {
        padding: 0;
    }

#wXlocal-alerts a, #wXlocal-alerts a:link, #wXlocal-alerts a:visited, #wXlocal-alerts a:hover, #wXlocal-alerts a:active {
    color: #ff0000;
}
/* local alerts | END */


#alerts {
    margin-top: 27px;
    /* margin top here is equal to margin-top + height of tabbox tabs  so alert box lines up with tabbox body */
}

    #alerts.details {
        margin-top: 7px;
        background-color: rgb(243, 244, 249);
    }

    #alerts h2 {
        color: #ff0500;
    }

    #alerts h3 {
        background-color: rgb(206, 211, 231);
        color: #ff0000;
        border: 1px #fff solid;
        text-align: left;
    }

    #alerts p {
        margin-bottom: 1em;
    }

    #alerts .alert {
        margin: 0 0 25px 5px;
    }

    #alerts .alertsummarylink {
        cursor: pointer;
        color: #999;
    }

.alertheader {
    font-weight: bold;
    font-size: 11pt;
}

.wXradar-animation /*, .wXradar-animation-wait */ {
    display: none;
}

.wXradar-animation-wait {
    display: block;
}


.error {
    color: Red;
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
}


/*      hourly forecast | BEGIN      */

.wXforecast-hourly-console {
    clear: both;
    width: 100%;
    background: #ECEDF1;
    border-top: 1px solid #C1C2C7;
}

.wXforecast-hourly {
    color: #000000;
    font-size: 12px;
}

.wXfore-hourly-table {
    width: 100%;
    clear: both;
    border: 1px solid #C1C2C7; /*border-collapse:collapse;*/
}

.wXfore-hrly-meta {
    background: #FFFFFF;
    height: 35px;
}

.wXfore-hrly-headings {
    background: #DADADC;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

    .wXfore-hrly-headings th {
        padding: 2px 0px 0px;
    }

.wXfore-hrly-observation {
    background: #f3f3f3;
    text-align: center;
    vertical-align: middle;
}

.wXfore-hrly-observation-on {
    background-image: url('');
}

.wXfore-hrly-meta {
    display: block;
    width: 100%
}

.wXfore-hrly-date {
    float: left;
    font-weight: bold;
    padding: 15px 0px 0px 4px;
}

.wXfore-hrly-logo {
    float: right;
}

.wXhourly-c1 {
    width: 65px;
    padding: 5px 1px 5px 1px;
    border-right: 1px #C1C2C7 solid;
    border-top: 1px solid #C1C2C7;
}

.wXhourly-c2, .wXhourly-c3, .wXhourly-c4, .wXhourly-c5, .wXhourly-c6, .wXhourly-c7 {
    padding: 5px 1px 5px 1px;
    border-left: 1px solid #FFFFFF;
    border-right: 1px #C1C2C7 solid;
    border-top: 1px solid #C1C2C7;
}

.wXhourly-c2 {
    width: 94px;
}

.wXhourly-c3 {
    width: 72px;
}

.wXhourly-c4 {
    width: 86px;
}

.wXhourly-c5 {
    width: 87px;
}

.wXhourly-c6 {
    width: 120px;
}

.wXhourly-c7 {
    width: 65px;
}

.wXhourly-c8 {
    width: 82px;
    padding: 5px 1px 5px 1px;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #C1C2C7;
}

.wXhourly-conditions img {
    border: 1px solid #000000;
}

.wXhourly-temp {
    display: block;
    float: right;
    padding: 0px 5px 0px 0px;
    font-weight: bold;
}

.wXhourly-day-begin {
    background: #FEF1AB;
    font-weight: bold;
    border-top: 1px solid #C1C2C7;
    border-bottom: 1px solid #C1C2C7;
    padding-bottom: 2px;
}

.wXhourly-date {
    float: left;
    padding: 3px 0px 0px 5px;
}

.wXtemp-hi {
    float: right;
    padding: 3px 5px 0px;
    color: #D65100;
}

.wXtemp-lo {
    float: right;
    padding: 3px 0px 0px;
    color: #003CB7;
}

.wXhourly-day-end {
    background: #FEF1AB;
    font-weight: bold;
    border-top: 1px solid #C1C2C7;
    border-bottom: 1px solid #C1C2C7;
}

.wXfore-hrly-observation {
}

.wXhourly-sunset {
    float: left;
    padding: 3px 5px 0px;
}

.wXfore-moonphase {
    float: right;
    padding: 3px 5px 0px;
}

.wXhourly-more {
    clear: both;
    height: 18px;
    padding: 4px 0px 0px 6px;
    margin: 0px;
    border-bottom: 1px solid #C1C2C7;
    text-align: left;
    background: #FFFFFF;
}

    .wXhourly-more a {
        padding-right: 10px;
    }

/*      hourly forecast | END      */

/* BEGIN StationWeather Style mods */

#flash-details-sw {
    border: 2px #999 solid;
    background: #ddd;
    margin: 5px 5px 5px 5px;
    line-height: 19px;
    padding: 5px 0px 5px 5px;
    font-size: 11px;
}

#flash-today-sw {
    border: 2px #999 solid;
    background: #ddd;
    margin: 0px 0px 3px 15px;
    width: 220px;
    padding: 3px 3px 3px 12px;
}


    #flash-today-sw table {
        width: 200px;
        text-align: center;
        padding: 0px;
        border-bottom-width: 0px;
    }

    #flash-today-sw table {
        font-size: 10px;
    }

    #flash-today-sw .ralign {
        text-align: right;
    }

    #flash-today-sw .lalign {
        text-align: left;
        width: 100px;
    }

        #flash-today-sw .lalign.val {
            text-align: left;
            width: 50px;
            padding-left: 3px;
        }

#flash-sw {
    float: left;
    width: 50%;
    height: auto;
    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-bottom: 7px;
    margin-left: 10px;
    margin-top: 10px;
}

#maps-and-camera-sw {
    float: left;
    width: 328px;
    height: 275px; /* no top border so add 1px to height */
    border-right: 1px #000 solid;
    border-bottom: 1px #000 solid;
    overflow: hidden;
    margin-right: -3px; /* fixes IE6 bug - http://www.positioniseverything.net/explorer/dup-characters.html */
}

#flash-container-sw {
    padding: 3px 0px 2px 0px
}


/* END StationWeather Style mods */


/* End seven day forecast */


#stationunavailable {
    width: 100%;
    text-align: center;
    padding-top: 115px;
    line-height: 30px;
    font-size: 24px;
    font-weight: bold;
}

@media (max-width: 767px) {
    #wxbug-logo {
        width: 100%;
    }

    #customer-logo {
        width: 100%;
    }

    #wxbug-logo a img {
        margin-right: 0px;
    }

    #customer-logo img {
        margin-left: 0px;
    }
}

@media (min-width: 767px) {
    #wxbug-logo {
        width: 49%;
    }

    #customer-logo {
        width: 49%;
    }
     
    #wxbug-logo a img {
        margin-right: 5px;
    }

    #customer-logo img {
        margin-left: 5px;
    }
}
@media print {
    @page {
        size: landscape
    }
}