/* 
    Stand      : 11.10.2020
    Author     : mw
*/

@font-face { 
    /*
    font-family: "Archivo"; 
    src: url("Archivo.ttf"); 
    */
    }

body { z-index: 10; }
    
.center { text-align:center;}
.right { text-align:right;}

.temp { font-size:3em;
    font-weight: bold;
}    
    
table {
    border-collapse: collapse;
    border: 2px solid;
    }

    th {
        font-family: Archivo, sans-serif;
        border: 1px solid black;
        border-bottom: 2px solid black;
        padding: 1px 2px;
        font-weight:normal;
    }

        tr > th:first-child { 
            text-align:right; }

        tr > th:nth-child(2) { 
            text-align:center; }
    

    td {
        font-family: Archivo, sans-serif;
        border: 1px solid black;
        padding: 1px 2px;
        }

    
    td.title { 
        background: #eee;
        font-weight: bold; 
        text-align:center; 
        }

    td.subtitle { 
        background: #eee;
        font-weight: normal; 
        font-size:small;
        text-align:right; 
        border-bottom:none !important;
        }


    td.graph { 
        padding:0;
        background: white;
        width:300px;
        height:100px;
        }
    
    td.data {
        text-align:center;
        }
    

        
div#overlay {
        font-family:Arial;
        display:none;
       
        position: fixed;
        top:32px;
        left:345px;

        width:100px;
        height:680px;
        
        border-right:1px solid red;
        
        background:none;
        z-index: 2;
        }       

div#overlay div {
    background: white !important;
    opacity: 0.8;
    }
    
    div#time {
        color:black;
        font-weight: bold;
        font-size: small;
        }        
        
    div#temp {
        position:absolute;
        top:65px;    
        width:100px;
        }
        div#temp::after { content: "°C"; }

    div#humidity {
        position:absolute;
        top:120px;    
        width:100px;
        }
        div#humidity::after { content: "%"; }

    div#baromin {
        position:absolute;
        top:220px;    
        width:100px;
        }
        div#baromin::after { content: "hPa"; }

    div#wind {
        position:absolute;
        top:330px;    
        width:100px;
        }
        div#wind::after { content: "m/s"; }

    div#sun {
        position:absolute;
        top:450px;    
        width:100%;
        }
        div#sun::after { content: "W/h"; }

    div#rain {
        position:absolute;
        top:550px;    
        width:100px;
        }
        div#rain::after { content: "mm"; }

    
/* UV Index */    
.niedrig { background: lightgreen; }
.mittel { background: #F8F040; }
.hoch { background: salmon; }
.sehrhoch { background: lightcoral; }
.extrem { background: lightpink; }


/* Temperatur */    
.frost { color: #4B85CD; }    /* < 0°   */
.kalt { color: #7FC3DD; }     /* < 10°  */
.kuehl { color: #DA7777; }    /* 10-15° */
.warm { color: #E59845; }     /* 15-20° */
.angenehm { color: #E46B46; } /* > 20°  */
.heiss { color: #C73360; }    /* > 30°  */