/* Forecast tiles styles */

.forecast-tiles {
    width: 100%; 
    table-layout: fixed; 
    border-collapse: separate;
    border-spacing: 10px 0px;
}

    .forecast-tiles tr:first-child td
    {
        /*border-top-left-radius: 10px;
        border-top-right-radius: 10px;*/
        min-height: 10px;
        border-color:#303030 !important;
        border-width: 2px !important;
        border-style: solid !important;
        border-bottom: none !important;
    }
    
    .forecast-tiles tr td {
        border-right: 2px solid #303030 !important;
        border-left: 2px solid #303030 !important;
    }

    .forecast-tiles tr:last-child td {
        border-color:#303030 !important;
        border-width: 2px !important;
        border-style: solid !important;
        border-top: none !important;
        /*border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;*/
        min-height: 10px;
    }

    .forecast-tiles tr:nth-child(1) td {
        text-align: center;
        vertical-align: top;
        background-color: #606060;
        padding: 13px 5px 8px 5px !important;
        color: white;
        border-width: 0px;
        border-style: solid;
        border-color: white;
        border-bottom: none;
    }

        .forecast-tiles tr:nth-child(1) td div:first-child {
            font-weight: bold;
            font-size: large;
        }

    .forecast-tiles tr:nth-child(2) td {
        text-align: center;
        vertical-align: top;
        background-color: #606060;
        color: white;
        border-width: 0px;
        border-style: solid;
        border-color: white;
        border-top: none;
        border-bottom: none;
        padding-bottom: 10px !important;
    }

        .forecast-tiles tr:nth-child(2) td img {
            margin: 0 !important;
            padding: 0 !important;
        }

    .forecast-tiles tr:nth-child(3) td {
        text-align: center;
        vertical-align: top;
        background-color: #606060;
        color: white;
        border-width: 0px;
        border-style: solid;
        border-color: white;
        border-top: none;
        border-bottom: none;
    }

        .forecast-tiles tr:nth-child(3) td div:first-child {
            font-size: x-large;
        }

        .forecast-tiles tr:nth-child(3) td div:nth-child(2) {
            font-size: large;
        }

        .forecast-tiles tr:nth-child(3) td div:nth-child(3) {
            margin-top: 5px !important;
        }

    .forecast-tiles tr:nth-child(4) td {
        text-align: center;
        vertical-align: top;
        background-color: #606060;
        color: white;
        border-width: 0px;
        border-style: solid;
        border-color: white;
        border-top: none;
        padding: 5px 5px 10px 5px !important;
    }

        .forecast-tiles tr:nth-child(4) td img {
            width: 16px;
            height: 16px;
            margin-right: 5px !important;
        }

/* End forecast tiles styles */

.totoweather-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    table-layout: fixed;
}
.totoweather-gauge {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
}

    .totoweather-table tr {
        border-collapse: collapse;
        border: solid 1px;
    }

    .totoweather-table td {
        border: solid 1px;
        vertical-align: top;
        border-collapse: collapse;
    }

    .totoweather-table th {
        border: solid 1px;
        border-collapse: collapse;
    }

.totoweather-portrait {
    display: none;
    visibility: collapse;
}

.totoweather-landscape {
    display: block;
    visibility: visible;
}

@media (max-width: 350px) {
    .totoweather-gauge {
        width: 100% !important;
        display: block;
        float: none;
    }
}
@media only screen and (orientation : portrait) /*(-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) */
{
        .totoweather-table tr {
            display: block;
            border: none;
        }

        .totoweather-table td {
            display: block;
            border: none;
        }

        .totoweather-table th {
            display: block;
            border: none;
        }

    .totoweather-left, .totoweather-right {
        float: none !important;
        display: block !important;
        width: 100% !important;
    }

    .totoweather-u-left {
        display: inline;
    }

    .totoweather-table td {
        text-align: left;
    }

    .totoweather-portrait {
        display: block;
        visibility: visible;
    }

    .totoweather-landscape {
        display: none;
        visibility: collapse;
    }
}

/*.totoweather-row {
    display: table-row;
}

.totoweather-cell {
    display: table-cell;
}*/



.totoweather-bulletin-list {
    text-align: center;
}


    .totoweather-bulletin-list span {
        display: inline-block;
        list-style-type: square;
        list-style-position: inside;
        margin: 1em;        
    }

.totoweather-container:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}

.totoweather-left {
    float: left;
}

.totoweather-right {
    float: right;
}


.totoweather-u-left {
    /*display: block;*/
    text-align: center;
    margin: 0 5px 0 0;
}


.totoweather-2-columns {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

.weathertooltip {
    display: none;
    background-color: #FFFFFF;
    font-size: 12px;
    height: 70px;
    width: 160px;
    padding: 10px;
    border: 5px solid red;
}

.totocccleantable {
    border: none !important;
    width: auto;
    height: auto;
    margin: auto!important;
    padding: 0!important;
}

.totoccweathercity {
    border: none !important;
    /*text-align:center;*/
    /*vertical-align:top;*/
    /*height:25%;*/
    margin: 0 auto;
}

.totocctemperature {
    border: none !important;
    font-size: 300%;
    line-height: 1.4;
    text-align: center;
    padding: 0!important;
}

.totoccconditions {
    /*border:none !important;*/
    /*text-align:center;*/
    margin: 0 auto;
}

.totoftable {
    text-align: right!important;
    width: auto!important;
    border: none !important;
    height: 100%;
    margin: auto!important;
    padding: 0!important;
}

.totodaytitle {
    /*background: #EEEEEE;*/
    border: solid 1px;
    font-weight: normal !important;
}

.totofday {
    line-height: 1.6;
}

.totofdayp, .totofday {
    text-align: center;
    border: none !important;
    font-size: 100%;
    height: 100%;
    padding: 0!important;
}

.totofimage {
    padding-bottom: .7em;
    border: none !important;
    vertical-align: middle;
}

.totofaimage {
    padding: 0 0 0 0 !important;
    margin: 0 6px 0 0px !important;
    vertical-align: middle;
}

.totoftemph {
    font-size: x-large;
    vertical-align: middle;
    text-align: right;
    border: none !important;
    line-height: 1.1;
    margin: 0!important;
    padding: 0!important;
}

.totoftemphm {
    text-align: right;
    border: none !important;
    font-size: 125%;
    line-height: 1.1;
    margin: 0!important;
    padding: 0!important;
}

.totoftemphlf {
    text-align: center;
    border: none !important;
    padding: 0!important;
}

.totoftempl {
    opacity: .75!important;
}

.totofhtable {
    font-size: 100%;
    width: auto!important;
    margin: auto!important;
    padding: 0!important;
}

.totofhday {
    font-size: 130%;
    border: none !important;
    padding: 0;
}

.totofhimage {
    border: none !important;
    vertical-align: middle;
    padding: 0 0 0 .5em;
}

.totofhtemph {
    font-size: 130%;
    border: none !important;
    margin-left: .2em;
    vertical-align: middle;
    width: auto;
    padding: 0 0 0 .3em;
}

.totofhtempl {
    font-size: 130%;
    border: none !important;
    opacity: 0.75;
    margin-left: .2em;
    vertical-align: middle;
    padding: 0 0 0 .3em;
}

.totofhimagea {
    margin-top: 0!important;
    margin-bottom: 0!important;
}

.weather1 {
    border: none !important;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    text-align: center;
    padding: 0;
}

.weather2 {
    font-size: 130%;
    border: none !important;
    margin: auto;
}

.weather3 {
    text-align: center;
    font-size: 75%;
}

.weather6 {
    /*display:none;*/
}

.weather7 {
    text-align: center;
}

.weather8 {
    text-align: center;
}

.weather9 {
    margin-left: 3px;
}

.weather13 {
    border: none !important;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    padding: 0;
}

.weather15 {
    font-size: 130%;
    vertical-align: middle;
    line-height: 1;
    margin: auto 0;
}

.weather19 {
    border: none !important;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0;
}

.weather33 {
    width: 100%;
    vertical-align: middle;
}

.weather36 {
    /*float:left;*/
    /*display: inline-block;*/
    width: 150px;
}

.weather37 {
    vertical-align: top;
    width: 100%;
    /*display: inline-block;*/
}

.weather42 {
    background: #006c99;
    color: white;
    margin: 0;
    padding: 5px 10px;
}

.weather43 {
    text-align: left;
    height: 480px;
    float: left;
    /*margin:10px 10px 20px 0;*/
    padding: 10px 5px 10px 5px;
}

.weather44 {
    clear: both;
}

.weather58 {
    height: 125px;
    vertical-align: top;
    border: 2px solid #111111;
    background: #DDDDDD;
}

.weather4, .weather25 {
    /*text-align:center;*/
    margin: 0 auto;
}

.weather5, .weather17, .weather20 {
    text-align: center;
    vertical-align: top;
    font-size: 100%;
    line-height: 1;
}

.weather26 {
    text-align: center;
}

.weather10 {
    text-align: center;
}

.weather11 {
    text-align: center;
}

.weather30, .weather29, .weather27, .weather31 {
    text-align: center;
}

.weather12, .weather14 {
    margin: auto;
}

.weather16, .weather21, .weather23 {
    border: none !important;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0;
}

.weather18 {
    border: none !important;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0;
}

.weather22, .weather24 {
    border: none !important;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0;
}

.weather28, .weather32 {
    text-align: center;
}

.weather34, .weather45, .weather51 {
    border: none !important;
    background: #00B4FF;
    color: white;
    margin: 0;
    padding: 0;
}

.weather35, .weather46, .weather52 {
    color: #FFFFFF;
    background: #006c99;
    margin: 0;
    padding: 5px 10px;
}

.weather38, .weather41, .weather48, .weather54 {
    clear: both;
    line-height: 0;
    margin: 0;
    padding: 0;
}

.weather40 {
}

.weather49 tr th {
    padding: 5px;
}

.weather49, .weather55 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: none !important;
    text-align: center;
    margin: 0;
    padding: 0;
    border-style: solid;
    border-width: 1px;
}

.weather50, .weather56, .weather57 {
    min-height: 125px;
    width: 160px;
    vertical-align: top;
    border: 1px solid;
    /*background:#EEEEEE;*/
}