body { color: #fff; width: 100%; height: 100%; background: #000;} .wrap { position: absolute; bottom: 0px; width: 100%; } /* Alerts */ .centered.alert { text-align:center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Map and streetview */ #map, #pano {position:relative;} #pano {float:right;} img#panoImg { width:100%; height:100%; } #notset {display:none} /* Tracman logo */ .map-logo { margin-left: -75px; background: rgba(0,0,0,.7); padding: 0 10px 0 75px; font-size: 2em; } .map-logo a { color: #fbc93d; } /* Timestamp */ .tim { color: #000; font-size: 12px; padding-left: 5px; padding-right: 5px; background-color: rgba(255,255,255,.7); } /* Speed sign */ .spd { font-size: 32px; height: 40px;} .spd-sign { color: #000; text-align: center; padding: 5px; border: 2px solid #000; border-radius: 3px; margin: 10px; background-color: #FFF; } /* Altitude sign */ .alt-unit, .spd-unit { font-size:12px; } .alt-label, .spd-label { font-size:18px; height:18px;} .alt { font-size: 32px; height: 40px;} .alt-sign { color: #FFF; text-align: center; padding: 5px; border: 2px solid #FFF; border-radius: 3px; margin: 10px; background-color: #009800; } /* Control buttons */ #controls { width: 100vw; position: absolute; bottom: 50px; display: flex; justify-content: space-around; } #controls .btn { z-index: 50; background: #222; height: 10vh; padding: 2vh 0; } #controls .btn:hover { background: #333; } #controls .btn.set, #controls .btn.clear { width: 30vw; } #controls .btn.track { width: 35vw; }