:root {
    --chart_bg:rgb(200,200,200); 
    --statlist_bg: tan; 
    --station_bg: rgba(52, 67, 136, 0.61); --station-fg: white;
    --tab_bg: var(--statlist_bg); --tab_fg: white;
    --sidewidth:150px; 
    --barheight:60px;
    --shadow: #333;
}

body {
    background-color: var(--chart_bg); padding: 0; 
    font-family: arial; font-size:10pt
}
body>div, ul {position:absolute}
#stations {
    left:3px; top:50px; width:var(--sidewidth); z-index:2; margin:0;
    background-color: var(--statlist_bg); color:white;
    box-shadow: 3px 3px 3px var(--shadow);border:0;
    padding: 10px 10px 15px; text-align:right;
    transition: transform .35s ease, opacity .35s ease;
}
#stations.hidden {
    transform: translateX(calc(-1 * (var(--sidewidth) + 10px)));
    opacity: 0; pointer-events: none;
}
#stationstab {
    position:absolute; z-index:3; top:50px;
    left: calc(var(--sidewidth) + 24px);
    width:22px; height:50px; padding:0; cursor:pointer;
    background-color: var(--tab_bg); color: var(--tab_fg);
    border: 0; border-radius: 0 6px 6px 0;
    box-shadow: 3px 3px 3px var(--shadow);
    transition: left .35s ease;
}
#stationstab span {display:block; transition: transform .35s ease}
#stationstab.closed {left:0}
#stationstab.closed span {transform: rotate(180deg)}
#meteochart {
    left: 0; right:0;  top:0; bottom:0;
    background-color:var(--chart_bg);
}
#stations li {
    display:block; clear:both; float:right; width:100%; margin-top:5px;
    background-color: var(--station_bg); color: var(--station-fg);
    box-shadow: 3px 3px 3px var(--shadow);
    border: 1px solid rgba(137, 157, 248, 1); border-radius: 5px;
}
/*@media only screen and (max-width: 600px) {
    #stations {
        left:0; top:0; right:0; width:100%;
        padding: 5px;z-index:1;border-radius:0;
        display: flex; flex-wrap: wrap; justify-content: space-around;
    }
    #stations span {
        display:inline-block; clear:none; float:left; width:auto;
        border-color:rgba(237, 248, 174, 1);
    }
    #meteochart {left:0; top:calc(var(--barheight) + 3px)}
    body.stations-hidden #stations {transform: translateY(-100%)}
    #stationstab {
        left:auto; right:3px; top:calc(var(--barheight) + 3px);
        width:34px; height:22px; border-radius: 0 0 6px 6px;
        transition: top .35s ease;
    }
    body.stations-hidden #stationstab {left:auto; top:0}
    body.stations-hidden #stationstab span {transform: rotate(-90deg)}
    #stationstab span {transform: rotate(90deg)}
}*/
a {color:inherit; text-decoration:none}
a:hover {color: #ff7}