html, body, #map { height: 100%; } .info { padding: 6px 8px; font: 14px/16px "Helvetica Neue", Arial, Helvetica, sans-serif; box-shadow: 0px 0px 0px 3px rgba(70,130,180,0.2), 0 1px 5px rgba(0,0,0,0.4); background: rgba(255,255,255,0.9); border-radius: 5px; } .leaflet-control.elevation .background { box-shadow: 0px 0px 0px 3px rgba(70,130,180,0.2); } div.elevation { margin-bottom: -2px !important; } /* .info, div.elevation { display:table-row; } */ .hidden { display: none; } #message { position: absolute; left: 446px; /* 400 + 10 + 26 + 10 */ top: 0px; margin-top: 10px; z-index: 1000; box-shadow: 0 1px 5px rgba(0,0,0,0.4); } #header { width: 100%; margin: auto; text-align: center; } #header, .heading { color: #333; } .title { padding-top: 4px; } .title-name { font-size: larger; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); } .version { font-size: x-small; } .header-text { font-size: small; margin-top: 0.5em; line-height: 1.4em; } .hint { color: orangered; } .heading { font-weight: bold; } .heading, .content, .content > .label, .content > .value { float: left; } table { border-collapse: separate; border-spacing: 4px; /* spacing between cells only */ margin: -4px; } td { vertical-align: top; padding: 0; } #stats td:nth-child(2) { text-align: right; } .heading, tr > td:first-child, .label { /* 1/4 of net info control width (370), so that values start at 50% */ width: 92.5px; } .leaflet-container { cursor: auto; } /* left sidebar as additional control position */ .leaflet-left { left: 400px !important; } .leaflet-leftpane { left: 5px; top: 7px; bottom: 7px; /* height: 100%; display:table; */ position: absolute; z-index: 1000; pointer-events: none; } .leaflet-leftpane .leaflet-control { margin: 3px 5px; width: 370px; } /* TODO hack to maximize last div, further table-row tests, check out flex box */ .leaflet-leftpane .leaflet-control:last-child { position: absolute; top: 432px; bottom: 0px; }