/* Main element styling */
body {
    text-align: center;
    background-color: #ffffff;
}

/* Options styling */
.chg-option {
	padding-top: 3px;
	border-top: 1px solid #c3c3c3;
	margin-top: 3px;
}

/* Weekly table elements styling */
#weekly {
    display: block;
    width: 810px;
    margin: 0px auto;
}

.weekly-column {
    display: inline-block;
    width: 79px;
    background-color: #efefef;
    border-top: 2px solid #dfdfdf;
    border-bottom: 2px solid #f8ab07;
    margin-right: 2px;
    padding-bottom: 10px;
    vertical-align: top;
}

.weekly-column:hover {
    //cursor: pointer;
}

.weekly-column.active {
    background-color: #FFFFFF;
    border-top: 2px solid #f8ab07;
    border-bottom: 2px solid #FFFFFF;
    width: 79px;
}

.weekly-column .date {
    width: 79px;
    height:20px;
    padding: 4px 0px;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #c3c3c3;
    border-top: 2px solid #c3c3c3;
    background-color: #c3c3c3;
    line-height: 20px;
    font-size: 12px;
    cursor: pointer;
}

.weekly-column.active .date {
    width: 79px;
    height:20px;
    padding: 4px 0px;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #f8ab07;
    border-top: 2px solid #f8ab07;
    background-color: #f8ab07;
}

.weekly-column .weatherImg, .w1 .w2 .w3 .w4 .w5 .w6 .w7 .w8 .w9 .w10 .w11 .w12 .w13 .w14 .w15 .w16 .w17 .w18 .w19 .w20 .w21 .w22 .w23 .w24 .w25 .w26,
.weekly-column.active .weatherImg, .w1 .w2 .w3 .w4 .w5 .w6 .w7 .w8 .w9 .w10 .w11 .w12 .w13 .w14 .w15 .w16 .w17 .w18 .w19 .w20 .w21 .w22 .w23 .w24 .w25 .w26  {
    width: 40px;
    text-align:center;
    padding: 5px 20px;
}


.weekly-column .tempMax,
.weekly-column.active .tempMax,
.weekly-column .tempMin,
.weekly-column.active .tempMin {
    padding-left: 2px;
    padding-right: 2px;
    /*margin-right: 2px;*/
    width: 28px;
    text-align: center;
    display: inline-block;
}

.weekly-column .tempMax,
.weekly-column.active .tempMax {
//    margin-left: 5px;
//    margin-right: 2px;
    margin-left: 2px;
    margin-right: 5px;
}

.weekly-column .tempMin,
.weekly-column.active .tempMin {
//    margin-left: 2px;
//    margin-right: 5px;
    margin-left: 5px;
    margin-right: 2px;
}

/*.weekly-column.active .tempMax {
    padding-left: 2px;
    padding-right: 2px;
    margin-right: 2px;
    width: 28px;
    text-align: center;
    display: inline-block;
}

.weekly-column .tempMin {
    padding-left: 2px;
    padding-right: 2px;
    margin-left: 2px;
    width: 28px;
    text-align: center;
    display: inline-block;
}

.weekly-column.active .tempMin {
    padding-left: 2px;
    padding-right: 2px;
    margin-left: 2px;
    width: 28px;
    text-align: center;
    display: inline-block;
}*/

.weekly-column .windIntDaily {
    width: 80px;
}

.weekly-column.active .windIntDaily {
    width: 76px;
}

.weekly-column .prec,
.weekly-column .precProb,
.weekly-column .windDir {
	text-align: center;
}

.weekly-column .precImg,
.weekly-column.active .precImg {
    width: 30px;
    padding-right: 23px;
    padding-left: 23px;
    margin: 5px 0 0;
}

/*.weekly-column.active .precImg {
    width: 30px;
    padding-right: 23px;
    padding-left: 23px;
    margin: 5px 0px;
}*/

.weekly-column .iuvImg,
.weekly-column.active .iuvImg {
    width: 30px;
    height: 30px;
    padding-right: 23px;
    padding-left: 23px;
    margin: 10px 0 0;
}

.weekly-column .windImg, .d45 .d90 .d135 .d180 .d225 .d270 .d315,
.weekly-column.active .windImg, .d45 .d90 .d135 .d180 .d225 .d270 .d315  {
    width: 35px;
    padding-right: 23px;
    padding-left: 23px;
    margin: 5px 0 0;
}

.weekly-column .wrapper {
    height: 15px;
    margin-top: 5px;
}

.weekly-column .warning {
    margin: 5px 0px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #000;
    text-align: center;
}

.weekly-column .warning a {
    height: 18px;
    line-height: 18px;
    font-size: 9px;
    color: #000;
}

.weekly-column .iuv {
    height: 15px;
    margin-top: 10px;
}

.weekly-column .precProb { 
    margin: 10px 0;
    font-size: 10px;
}

.weekly-column .precProb i { 
    font-size: 14px;
    color: #1b82b1;
}

.weekly-column .precProb i.low { 
    color: #a8a8a8;
}


/* Daily table elements styling */
#daily {
    display: block;
    width: 810px;
    margin: 0px auto;
}

.dayWrapper {
    display: block;
    //width: 800px;
    padding: 0px;
    margin: 0px;
    float: left;
}

.dayWrapper .row {
    width: 100%;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

.dayWrapper .row * {
    width: 33.75px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

.dayWrapper .row .wrapper {
    text-align: center;
    float: left;
    padding: 2px 0px;
}

.dayWrapper .row .wrapper img {
    width: 33px;
    display: inline-block;
    padding: 0px;
    text-align: center;
    position: relative;
}

.dayWrapper .headerrow {
    position: relative;
    margin: 0px 0px;
    color: #23466b;
    background-color: #dfdfdf;
    font-weight: bold;
    //padding: 2px 0px;
    //border-bottom: 2px solid #c3c3c3;
    text-align: center;
}

.dayWrapper .day.headerrow {
    background-color: #ffffff;
}

.dayWrapper .day.headerrow .second-day {
    background-color: #efefef;
}

.dayWrapper .headerrow:not(.day) {
    margin: 0px 0px;
    padding: 4px 0px;
    cursor: pointer;
    border-top: 1px solid #c3c3c3;
}

.dayWrapper .datarow {
    margin: 0px 0px;
}

.dayWrapper .warningdata .warning {
    margin: 1px 0px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    /*font-size: 13px;*/
    width: 32px;
}

.dayWrapper .headerrow img {
    position: absolute;
    right: 8px;
    top: 2px;
    width: 16px;
}

.dayWrapper .headerrow span {
    position: absolute;
    right: 8px;
    top: 2px;
    width: 16px;
}

.dayWrapper .day .daycell {
    font-weight: bold;
    text-align: center;
    color: #23466b;
    padding: 5px 0px;
}

.dayWrapper .day .daycell-bg {
    width: 45px;
    font-weight: bold;
    font-size: 12px;  // ADD 23-08
    text-align: center;
    color: #23466b;
    padding: 10px 0px 5px 0px; // ADD 23-08
}

.dayWrapper .hour {
    border-bottom: 2px solid #c3c3c3;
}

.dayWrapper .hour .wrapper {
    //background-color: #efefef;
}

.dayWrapper .hour .wrapper div {
    margin: 0px 0px;
    color: #23466b;
    font-weight: bold;
}

.dayWrapper .temperature,
.dayWrapper .temperatureutci2,
.dayWrapper .seatemp {
    margin-bottom: 4px;
}

.dayWrapper .temperature .tempMed {
    background-attachment: scroll;
    background-color: #9f9f9f;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    color: white;
    display: block;
    font-size: 11px;
    font-weight: bold;
    margin: auto;
    padding: 1px 0;
    text-align: center;
    width: 30px;
}

.dayWrapper .seatemp .wrapper div {
    background-color: #1584c0;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    color: white;
    display: block;
    font-size: 11px;
    font-weight: bold;
    margin: auto;
    padding: 1px 0;
    text-align: center;
    width: 30px;
}

.dayWrapper .temperatureutci .wrapper div {
    background-color: #c6ccdf;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    color: white;
    display: block;
    font-size: 11px;
    font-weight: bold;
    margin: auto;
    padding: 1px 0;
    text-align: center;
    width: 30px;
}

.dayWrapper .temperatureutci-teste .wrapper .utci0,.utci1,.utci2,.utci3,.utci4,.utci5,.utci6,.utci7,.utci8,.utci9,.utci10 {
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    color: white;
    display: block;
    font-size: 11px;
    font-weight: bold;
    margin: auto;
    padding: 1px 0;
    text-align: center;
    width: 30px;
}
.utci0 { background-color:#4f639d}
.utci1 { background-color:#7f8db8}
.utci2 { background-color:#98a4c6}
.utci3 { background-color:#afb8d3}
.utci4 { background-color:#c6ccdf}
.utci5 { background-color:#ffcc5f}
.utci6 { background-color:#ff8f3b}
.utci7 { background-color:#f36233}
.utci8 { background-color:#e33a33}
.utci9 { background-color:#da2433}

.dayWrapper .datarow .wrapper img {
    width: 26px;
    display: inline-block;
    padding: 0px 2px;
    text-align: center;
    position: relative;
}

/* Override fontawesome .fa class */
.fa-angle-down,
.fa-angle-up {
    float: right;
    font-weight: bold;
}

.d45 { -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); }
.d90 { -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); }
.d135 { -moz-transform:rotate(135deg); -webkit-transform:rotate(135deg); -ms-transform:rotate(135deg); -o-transform:rotate(135deg); }
.d180 { -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); }
.d225 { -moz-transform:rotate(225deg); -webkit-transform:rotate(225deg); -ms-transform:rotate(225deg); -o-transform:rotate(225deg); }
.d270 { -moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg); -o-transform:rotate(270deg); }
.d315 { -moz-transform:rotate(315deg); -webkit-transform:rotate(315deg); -ms-transform:rotate(315deg); -o-transform:rotate(315deg); }

.w1 { background-position: 0px 0px; }
.w2 { background-position: -30px 0px; }
.w3 { background-position: -60px 0px; }
.w4 { background-position: -90px 0px; }
.w5 { background-position: -120px 0px; }
.w6 { background-position: -150px 0px; }
.w7 { background-position: -180px 0px; }
.w8 { background-position: -210px 0px; }
.w9 { background-position: -240px 0px; }
.w10 { background-position: -270px 0px; }
.w11 { background-position: -300px 0px; }
.w12 { background-position: -330px 0px; }
.w13 { background-position: -360px 0px; }
.w14 { background-position: -390px 0px; }
.w15 { background-position: -420px 0px; }
.w16 { background-position: -450px 0px; }
.w17 { background-position: -480px 0px; }
.w18 { background-position: -510px 0px; }
.w19 { background-position: -540px 0px; }
.w20 { background-position: -570px 0px; }
.w21 { background-position: -600px 0px; }
.w22 { background-position: -630px 0px; }
.w23 { background-position: -660px 0px; }
.w24 { background-position: -690px 0px; }
.w25 { background-position: -720px 0px; }
.w26 { background-position: -750px 0px; }

.wwico { width: 30px; height: 30px; }
.wico { width: 30px; height: 30px; background-image: url(/opencms/bin/images.site/otempo/weathericons30a_sprite.gif); background-repeat: no-repeat; }
.lico { width: 35px; height: 35px; background-image: url(/opencms/bin/images.site/otempo/weathericons35_sprite.gif); background-repeat: no-repeat; margin-top: -5px; }
.sico { width: 25px; height: 15px; }