/************************
        Weather Widget, for the responsive pages, with svg weather
************************/
#weather{
    margin-top: 4px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* svg set to visible for padding overflow hack?, but some overflows that not wanted */
}
.weather_alert {
    background-color: #ff5656;
    padding: 3px;
    text-align: center;
    font-weight: bold;
}
.weather_alert div.detail {
    display: none;
}
@media screen and (max-width: 450px) {
    #weather {
        width: 100%;
        max-width: 100%;
        display: none;
    }
}
#weather_widget_mobile {
    margin-top: 4px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    text-align: center;
}
@media screen and (min-width: 450px) {
    #weather_widget_mobile {
        margin-top: 0px;
        display: none;
    }
}
/***********************/

/************************
        Weather Widget, for the responsive pages
************************ /
#weather{
    margin-bottom: 20px;
    margin-top: 4px;
    text-align: center;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

#weather-container,
#weather-sponsor-container{
    /*background-color: #C0C0EE;* /
    width: 100%;
}

#weather-sponsor-content{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    
}

#weather-data1{
    width: 100%;
    max-width: 180px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background-color: #B0E0FA;
    border-radius: 7px;
}

#weather-data2{
    width: 100%;
    height: 200px;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
}

#weather-data3{
    width: 200%;
    height: 180px;
}

#weather-tabs{
    /*background-color: #C0C0EE;* /
}

#weather-tabs div{
    height: 20px;
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}

.weather-tab-label-selected{
    background-color: #B0E0FA;
}

.weather-tab{
    width: 50%;
    height: 180px;
    float: left;
}

.weather-col{
    width: 33.3%;
    float: left;
}

.weather-tile-day,
.weather-tile-night{
    height: 90px;
}


.weather-timeLabel,
.weather-weather{
    font-size: 10px;
    position: relative;
}

.weather-timeLabel div{
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.weather-timeLabel{
    height: 22px;
}

.weather-precip,
.weather-maxTemp,
.weather-minTemp{
    height: 12px;
    font-size: 11px;
}

.weather-icon {
    position: relative;
}

.weather-precip {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.weather-icon > img{
    height: 40px;
    width: 40px;
    margin-right: auto;
    margin-left: auto;
}

#right_wrapper #weather-container img {
    width: auto;
}

@media screen and (max-width: 450px) {
    #weather {
        width: 100%;
        max-width: 100%;
        display: none;
    }
    
    #weather-data1 {
        height: 110px;
        max-width: 100%;
        border-radius: 0;
    }
    
    #weather-data2 {
        height: 100%;
    }
    
    #weather-data3 {
        height: auto;
        min-width: 2000px;
    }
    
    .weather-tab {
        width: auto;
        height: auto;
        display: inline-block;
    }
    
    .weather-col {
        width: auto;
    }
    
    .weather-tile-day,
    .weather-tile-night {
        min-width: 60px;
        display: inline-block;
        height: 100%;
    }
    
    .weather-tile-night {
        background-color: #deedff;
    }
    
    .weather-timeLabel {
        font-size: 14px;
        height: 36px;
        margin-left: 2px;
        margin-right: 2px;
    }
    
    .weather-timeLabel div {
        position: relative;
    }
    
    #weather-tabs {
        display: none;
    }
    
    #weather-container{
        width: 59.5%;
        float: right;
    }
    #weather-sponsor-container{
        width: 40%;
        float: left;
    }
    div.float_clear {
        clear: both; /* adding later didn't want on vertical display to cause more problems * /
    }
    
}
/***********************/

/************************
        These were style in the page header to rearrange the older style into a more asthetic one
************************ /
$css = <<< CSS
#weather {
    max-width: 300px;/*200* /
}
#weather-data1{
    width: 100%;
    max-width: 300px;/*180* /
    height: 90px;/*180px;* /
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background-color: lightgray;/*#B0E0FA* /
    border-radius: 0px;/*7px;* /
}
#weather-data2{
    height: 110px; /*200px;* /
}
#weather-data3{
    height: 90px; /*180px;* /
}
.weather-tab{
    height: 90px; /*180px;* /
}
.weather-tile-day,
.weather-tile-night{
    height: 90px;
    width: 50%;
    float: left;
    display: inline-block;
}
.weather-tile-night{
    background-color: darkgray;
}
.weather-tab-label-selected{
    background-color: lightgray;/*#B0E0FA* /
}


CSS;
/***********************/