style.css

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    position: relative;
}

body > header {
    width: 240px;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    box-shadow: 5px 5px 10px #666;
    z-index: 5;
    border-right: 2px solid #000;
    text-align: center;
    transition: all .5s;
}

header.hidden {
    left: -242px;
}

header p {
    margin: 0.5em;
}

header form {
    padding: .5em;
}

header input[type=text] {
    border: 2px solid #ccc;
    padding: 2%;
    background: #fff;
    color: #000;
    border-radius: 5px;
    -moz-border-radius: 5px;
}

header #toolbar {
    margin: .5em 0;
}

header #toolbar li {
    display: inline-block;
}

header input[type=button], header button, .btn {
    display: inline-block;
    background: #eee;
    border: 2px solid #ccc;
    border-radius: 7px;
    padding: 1% 2%;
    cursor: pointer;
}

header input[type=button]:hover, header button:hover, .btn:hover {
    text-decoration: underline;
    color: darkred;
    background: #ccc;
}

header .mapSource {
    margin: .5em;
}

header .mapSource select {
    padding: 2%;
    width: 96%;
}

header .mapCoords input[type=button] {
    width: 15%;
    margin-right: 2%;
    font-size: 1.5em;
    line-height: 1em;
    vertical-align: top;
}

header .mapCoords input[type=text] {
    width: 74%;
    text-align: center;
    color: #666;
    background: #ccc;
    border-color: #ccc;
}

.search input[type=text] {
    width: 94%;
}

.search {
    position: relative;
}

.search #f_autocomplete {
    display: none;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    margin-left: .4rem;
    margin-right: .4rem;
    position: absolute;
    background: #fff;
    box-shadow: 2px 2px 5px #000;
}

.search #f_autocomplete a {
    display: block;
    padding: .3rem;
    cursor: pointer;
    text-align: left;
}

.search #f_autocomplete a:hover {
    background: #ddd;
    color: darkred;
}

.search #f_autocomplete i {
    display: block;
    color: #666;
}

#sidebar .buttons h4 {
    margin: .5rem 0;
}

#sidebar .buttons button {
    margin: .3rem;
    padding: .2rem;
}

#bottom {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 0px;
    overflow: hidden;
    visibility: hidden;
    transition: all .5s;
    z-index: 5;
    border-top: 2px solid #000;
}

#mapContainer.bottomEnabled #bottom {
    height: 200px;
    visibility: visible;
}

#mapContainer {
    position: absolute;
    top: 0;
    left: 242px;
    right: 0;
    bottom: 0;
    z-index: 3;
    transition: all .5s;
}

#mapContainer.full {
    left: 0px;
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all .5s;
}

#mapContainer.bottomEnabled #map {
    bottom: 202px;
}

#map .sidebar a {
    background: #fff no-repeat center center;
    cursor: pointer;
    transition: background-color .2s;
    position: relative;
}

#map .sidebar a span {
    text-indent: -100em;
    overflow: hidden;
    display: inline-block;
}

#map .sidebar a:hover {
    background-color: #eee;
}

#map .sidebar a:hover span {
    position: absolute;
    text-indent: inherit;
    text-decoration: underline;
    white-space: pre;
    left: 30px;
    height: 30px;
    line-height: 30px;
    top: -2px;
    padding-left: .2em;
    padding-right: .5em;
    border-radius: 0 4px 4px 0;
    background: #eee;
    color: #669;
    border: 2px solid rgba(0,0,0,0.2);
    border-left: none;
}

#map .sidebar a.hide {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgVJREFUeNqkU01oE0EU/mZ2xnSRiBLITQ9CEE2F+lNEEbwJFRRRCB6CJ0E9Crl4kIKFehMPYn9A8FYRvChachQqtFAUjaUnPerBpk1Tkmz2J+t7L5ulHgRLH3y7s/O+ed/3ZmdUHMfYTZhSqXSY3mcI2R2u3SIsmSiKzlYqlfv5fL4YRSHCMCIECAIeh+j1euibdKCUERizB/V6fWV29vEjdWty7b97uHBwHiQoRRm3KUyr1cLDOzlENLE9HK3B+8NETePxmXWUy+W/ONVqVenNzYZY9TwvRRAEWPq6gadzPxFQjr+Zx8XYwcAFrVO60dhASBNMYrDq4pd1PJv7juXaL+pZyRzzeCGLMZKxNs1mE1GiYo3Bx0+/Mf3yBz6/HsOJ6/O4cW9B7J4ezqXq0qLj9At4Xlf6l0Ss8OTFKlbfXRXl5VcXk78QC7i9QfA3iWrT62khtds+Ar+Lm1cO4cjYG6y8vYTi5ffpgtHjOcyMj4hTDhbwfd8x1u5FpxOg0+7v9mgxB6MzGLn2AZybejDMdNydqInLQQHmUgFthob2w+/GRM5QVc0pUTPWxWKtTe6UqDFvsIlyhGm/xIHrHqBqFpmMTaxpeZ86lsXJo9m0f+ZxIWtt2gKdIWu8xreFiefnzv/7/Cl5uu4+FAqFye0ZcrTGWTe5SGaHl4l72VK7vc5/BBgARF0wTXDjeKkAAAAASUVORK5CYII=");
}

#map .sidebar a.show {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgVJREFUeNqkU0toE1EUPW/mTdvYVipi8LsRstGIiGLrZyEq6ELIQgm4F62IVjAqgkgxtoJI/awk4Ma1e8nKTQTF6Ealm4ogCFk0mkTG+c94700yqAil9MFh7tw359xz39ynkiTBSpYuFotb6TlOGF0m9yfhjY6iaF+pVLqRzWa3R1GIMIwIAYKA4xBxHKNr0oRSWqD1AJrN5qdKZe6uOjO7+N8eTmyrCZkKCP6NGedoadu2cXtyLSJKSB3DwK0nTRQKhSV7qFarymi3W2LVdV1BQDHn+lWuP1rAy7ff/3LQd0E8ZbRaPxBSIggCAYtxri9Qq3/DzccfUH3VECLvM3qxoTudjrwwmZdBLWxap7Dr5IvU6sNreVy+9w7li3kcO7BehE3T7Aq4rpfacp0AjUYbk6c208lv6dEVHMfHg6s7cL5cx9GJ4+KA54eKGjqODSSk6PwKYNshRkdGMPfsC+Y/t1MHlek9ODtdx8xUHr7viwOlFMemtqxhOC4fYkL/1+ImsPA1xPvnR4Q8fvo1LszM486lPA7vHYPneWmrJGDooaEx+F5CPQ1IkgdFclSJrU7s3EB9D+PQ7lUpWUZY666DTGaNkAYHdarczSnB/SsbJc9ilmWlArxHM2Rpt/WxVn66/+CfA5LJrEYul5tdapDo4BcVf9+7SHqZlynkC6VWep1/CzAAXTA39IJJ1YsAAAAASUVORK5CYII=");
}

#map .sidebar a.loadGPX {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAwFBMVEUAAADlqw7fz7CM1B3tx3WP1xwaHwg6PRGlfBFWaBQdKwaX3CXBcQeUqh7dkxTi5uI2OghtoBnCsBQ8RDAtJBL0yWwKDQLt7e3TyoCmrTDrqTaFyjJysCxvZloBAgDzxmbkrBTosyuZmoSCtjCAyDXsuDmd2z28vLzzyWfxyGDqtTLtu0Ht7e3W29/I0Njk5ujm0JTyx2PhxpLg4Ny/ydDT3OLyxWDXwIWU2hrvvk7uu0TsuDrqtTDpsiXlrBLnrxtObVvvAAAAKXRSTlMAi/n8+K4AABcAAOOg2u2LABFhAACrAPk5LIBbHwEAhHb0AUWprCch6fC0WdYAAACnSURBVBjTTcxpE0JgGIXhJ1u2whBly64XI6Ospf7/v4rB5Pp2nw8HYMFGjG2vQUm+H3EGu7ZocO2IM9W5VZMkyRbHuYBahoihRInEA1OdT+TYs2T2YDDKBPZWrN0FQYi982l0BZ3IsmqCIYTq+gbHUqvyPH9iqJuE4/BoyqJoUJqmfd/pwGNE//q7jEPyXiWuSwNPDBuhAvzw3XBUcD5btA30bsNh7B/8fB8VoXoEcwAAAABJRU5ErkJggg==");
}

#map .sidebar a.clear {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAwFBMVEUAAABzUAC0gSsiAAAAAAAAAACgcQIAAAAAAAAAAAAAAADdxkfMsCSPagwbFQDEoQPFlysAAACHOAbDoAAAAAB+LAHDpRrZwCoAAACseicAAAAAAAAAAAC9lzIAAADWvTfUuTGWYg0AAADEoADAfCWRaw65ZywAAADMtCfHpg5WRgCkbRLOsyjhzloAAADu1irbxCHv2DXeyj7cwxvjyR355E3p00jdxBnbwhnINTHawzXo0jixLBjZwCHpzyTt1l0oIb1TAAAAL3RSTlMAHP4DDBQBEAoCG+W9b0Eq9B2nDjhDe/0prgEGD+Iv+p5VQhj+m/4m60JQdNX2GSmWTawAAACoSURBVBjTVcxrE0JAGIbhFVlLUtGsQ6tITIhxpsL//1dNmtF6v73XPHMDwBgRD+hzyMpZALPzDIH6TRR5nqPQE/7mEYkGdVOP/mEBftf5F/Uvx7c/Vll8nYGN6rFKS2kus0qWZkPTP+5zBZdD2Rd4/IUsmMRN8erb/DxNhCTQ5CducR6HAfyCqLsuyXMiu/b+ZAKAuCSwt3KoaboI0dREFgfhGnLW9/0Agl4RXbxEvAcAAAAASUVORK5CYII=");
}

#map .sidebar a.save {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAABGdBTUEAAK/INwWK6QAAADBQTFRFQ3O8WYTF9vn9THq+c5vZ5+/6oL3oe6TjVIHG7vT7y9/avtHtM2WweZ7XfrRw+Pv+Fdjs1QAAAAJ0Uk5Tq/pmCLMYAAAAhUlEQVQI12Ng4Dlz5vAZA34G7v3/NSd9jWZg4M78OHX+1OgNDEeLPs78FLp9D8Pp0pAgzdCQHAbr0tBJU6PDcxhOlwg6OgqKAEXKy8try68ARYB0rYsLRMTdxeUOw+n6/0DwBcR4BwRzgYyiVUCgCGRcAokAGcc2KS1atEj3DgPDGTA4AABGPEdoDqSk6wAAAABJRU5ErkJggg==");
}

#map .sidebar a.export {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAAK/INwWK6QAAAMBQTFRF////a4/CUXGpibyYUXGpia7d9vn+s7Oz+fv+5ubm5eXl/P3+bpTKUcdNML9JSr6Mc9RQb5fMeqXbeMLzWJ2QbsD92NWM29WGY6nNZovAqsmW/m9rYb7rV3mv+Pr+PajqsbGxk9tmi9tbYoa8eaPa8s1VpNSRc5zRUnKpbL/7eaLY/v7/5+fn6Ojo+/z+/P3/WXuxdJzShMh0UnOqaY/FXoK3WshgYLXoaKbVWnyz6urqtbW1krnoe6fc////6+vr5IJnLAAAAAZ0Uk5TAP5r+an4AzOsfgAAAKVJREFUGNOFzMkOgkAQRdGnQRwASUscEBFliEI7AWKHtFD//1emcaNuPIta3LwU8Ks/aJo4y/L8wJjJ+sDg+akHNF9cYEafIiAmudo48zRdJMudChnJx9QWaerItaTqHSzLsm0RBJJqICe574RhOFThoH5tic7n03hCN4C1nLdGaxiXka63JWByIXiSXIvi4nldUAulu0dAu7tRVNX1zffL8qjhvxdPXiGao2s6cwAAAABJRU5ErkJggg==");
}

#map .sidebar a.elevation {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAnElEQVQ4jdXRIQoCURDG8Z+ywWAUDOoBBDEIFsFotxi8oMXoHTyEaHHxAhaLoOWFt4s8dxeLHwzMDPP/ZniPf9MUs6bwGs8Qk2/DW9xxQA/jUL9CbFLwHI9o+IpTVBcMshI8DFs7UW+U2taO8gw79FNAymCFZR24bNCtC1N8gxz7ilzeZNlHtaJ8gUFF7oZjuXlR/OtUnBuf/HO9ASboIv8PRbMKAAAAAElFTkSuQmCC");
}

#map .sidebar a.edit {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAfdJREFUeNpi/P//PwMlgImBQsBSXV0tyMTE5AxkCwPx23///u39+/fv+3v37jGAXAfCJhrXwRgEZm0KYfC4ds3S8dq1shcMDBOZXr9+7ebn55fS2Ng4A0SD+E+ePMFpI9BAlUu8vM6K9fUBrxkYGlkePHggoaGh4f7161cGEA3kb+fn50+Dqn8OxJsRmhnsv337ptuxf3+zu7Jyf+T//zuYgBrer127dt+nT58YQDSID2TPAnpl1u/fvyX//PkDdj5Y81eGsrVz9Cdra2vXnfnxY8FfBoZdLC9fvtyWk5PDDLRgFxC/YmZm3gb0BoOFhQXYViu9u3DN7v4VXvNmdOzXVmA/cugs+yVwIAID7A3QpvnI/pSSkmL48eMHg7TAx30WOndQNH/58r/t3z+G/fBYwBZQjeE3gOQNhn//GZi+fWVE17wHJRrRNbsY/mB4/xnC/vmbMTKv7IbXtC4NrJrhBoDiGhhoYIGNR/4CMTzcG64/0ljDL8AwSUCQ4TA21zKiC/Dw8IAx2AU/f0o56n99pir/m0FA8D/D3hMMDHtOEJE8+fj4GAQFBUE4DUQ7mLCSnsbZ2dkZODk5pdjY2PCqY0byCjsQcwMxLxDzA8OFEYiDgdF8DUhzI6n9jy0MQDQb1BAQzQoVAyY2hj9Q/BuK/yAbAhBgAMgf/HF88z40AAAAAElFTkSuQmCC");
}

#map .sidebar a.marker {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAatJREFUeNqkU71KA0EQ/vaiib+lWCiordidpSg+QHwDBSt7n8DGhwhYCPoEgqCCINomARuLVIqgYKFG5f6z68xOzrvzYuXA3P7MzLffN7unjDH4jw3xx91bQXuxU4woNDjUX7VgsFOIH3/BnHgC0J65AzwFjDpZgoG7vb7lMsPDq6MiuK+B+kjGwFpCUjwK1DIQ3/dl0ssVh5TTM0UJP8aBgBKGleSGIWyP0oKYRm3KPSgYJ0Q0EpEgCASA2WmWZQY3kazBmjP9UhBFEbTWAgA0f9W2yHeG+vrd+tqGy5r5xNTT9erSqpvfdxwHN7fXOQZ0QhzH1oWArLsfXXieJ/KTGEZLcbVaTVn9ALTOLk9L+mYX5lxd0Xh6eGyVgspK6APwI8n3x9hmNpORJOuBo5ah8GcTc7dAHmkhNpYQlpHr47Hq2NspA1yEwHkoO/MVYLMmWJNarjEUQBzQw7rPvardFC8tZuOEwwB4p9PHqXgCdm738sUDJPB8mnwKj7qCTtJ527+XyAs6tOf2Bb6SP0OeGxRTVMp2h9nweWMoKS20l3+QT/vwqfZbgAEAUCrnlLQ+w4QAAAAASUVORK5CYII=");
}


#map .sidebar a.measure {
    background-image: url("leaflet/images/rulers.png");
}

#bottom nav {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1em;
    z-index: 1000;
}

#bottom nav #closeBottomPanel {
    padding: .3em;
    cursor: pointer;
    background: #fff no-repeat .3em center;
    padding-left: 2em;
    border: 1px solid #999;
    border-radius: .3em;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIRJREFUOI2tkdEJgDAMBc/uoLihiLisSCkOo/5UCLE2Uczvy10SAj/WDHSOvh6YSvABrIakB2LuHWXQZbgmkfACtLqhJjHhmsQNlyQJ2N7AUpIyeOQNinB4EASVBaDxTpc3R7GJ9eIbfN3sefEjfJUp8byqKpkMWEt2YNDhaMBScoM/1wlpjDwdEcXwPQAAAABJRU5ErkJggg==");
    transition: all .2s;
}

#bottom nav #closeBottomPanel:hover {
    background-color: #eee;
    border-color: #000;
}

#bottom textarea {
    border: none;
    background: #eee;
    color: #666;
    padding: 2%;
    width: 96%;
    height: 96%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
}

#bottom .exportTiles {
    padding: .5em;
    text-align: center;
}

#bottom .exportTiles p {
    margin: .5rem 0;
    font-size: 1.5em;
}

#bottom .exportTiles label {
    padding: .3rem;
    margin: .3rem;
}

#bottom .exportTiles label input {
    margin-left: .3rem;
}

progress {
    display: block;
    width: 90%;
    margin: 1rem auto;
    height: 2rem;
}

.gpxTrace2, .gpxTrace3 {
    display: none;
}

figure.elevation {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

figure.elevation figcaption {
    text-align: center;
    font-size: .9em;
    color: #666;
    padding-top: 1em;
}

figure.elevation svg {
    margin: 2.5%;
    margin-top: 0;
    width: 95%;
    height: 95%;
}

figure.elevation svg path {
    fill: rgba(0, 0, 0, 0.1);
}

figure.elevation svg polyline {
    stroke-width: 2px;
    fill: none;
}

figure.elevation svg line.x-axis {
    stroke: #666;
    stroke-width: 1px;
}

figure.elevation svg line.y-axis {
    stroke: #bbb;
    stroke-width: 1px;
}

figure.elevation svg text {
    font-family: sans-serif;
    font-size: 8px;
    fill: #999;
    text-anchor: end;
}

figure.elevation svg text.x-axis {
    text-anchor: middle;
}

#map .label {
    white-space: pre;
    background: rgba(255, 255, 255, 0.7);
    padding: 1px 4px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px #666;
}

.markerForm {
    width: 25em;
    text-align: center;
}

.markerForm label, .markerForm input[type=text], .markerForm input[type=url], .markerForm textarea {
    width: 95%;
    margin: 1%;
    padding: 1%;
}

.markerForm textarea {
    height: 5em;
    font-family: sans-serif;
    font-size: .9em;
}

.markerForm input[type=submit], .markerForm input[type=reset] {
    margin: 1%;
    padding: 1%;
}

#loading {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1000000;
    top: 20px;
    right: 20px;
    transition: all .5s;
}

.loading #loading {
    visibility: visible;
    opacity: 1;
}

/** Loading spinner for geolocation */
@keyframes spinner {
    to {transform: rotate(360deg);}
}
 
@-webkit-keyframes spinner {
    to {-webkit-transform: rotate(360deg);}
}

.spinner {
    position: relative;
    float: right;
    text-align: center;
    color: #fff;
    width: 100px;
    height: 10px;
    padding: 45px 0 45px 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: block;
    font-size: 8px;
}

.spinner:before {
    top: -10px;
    left: 0px;
    position: absolute;
    width: 100px;
    height: 100px;
}
 
.spinner:before {
    content: '…';
}
 
 .spinner:not(:required):before {
    content: '';
    border-top: 10px solid #fff;
    border-bottom: 10px solid #000;
    box-shadow: 0px 0px 5px #000;
    border-radius: 50%;
    animation: spinner .7s linear infinite;
    -webkit-animation: spinner .7s linear infinite;
}