﻿body {
    font-size: 16px;
    height: 100%;
    background-size: cover;
    transition: background 0.5s linear;
}

.sensor-container {
    position: absolute;
    bottom: 10px;
    width: 1170px
}

.sensor {
    border: 1px solid #c7c7c7;
    border-radius: 15px;
    box-shadow: 3px 3px 5px rgba(43, 43, 43, 0.48);
    margin: 10px 30px 0 0;
    background: rgb(226,226,226); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    width: 23%;
}

.sensor:last-child {
    margin: 10px 0 0 0;
}

    .sensor-values {
        font-size: 2vw;
    }
.icon-container {
    padding: 0;
    font-size: 5rem;
}

.text-container {
    padding-left: 40px;
}

#time {
    margin: 20px auto;
    font-size: 20vw;
    color: rgba(241, 241, 241, 0.6);
    text-align: center;
    line-height: 20vw;
}

.smallicon {
    font-size: 10px;
    position: absolute;
    top: 11px;
}

.temp-hot { color:#aa1616 }
.temp-cold { color: #257dbf }
.temp-above-normal { color: #d0670e }
.temphot-normal { color: #000; }


#panStage {
    width: 95%;
    margin: 0 auto;
}

.infoArea {
    padding: 15px 5px 5px 50px;
    font-size: 4vh;
    color: #fff;
    text-shadow: 1px 1px 0px #000;
}

/* Forecast */
.forecast {
   
    padding: 15px;
}
.forecast-container {
    border: 0;
    min-height: 160px;
    padding: 5px 15px;
    border-radius: 15px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
    background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.forecast-container h1 {
    text-align: right;
    margin: 0;
    color:rgba(195, 195, 195, 0.48);
}