make overlay area go more into the corner on small screens

[lantea.git] / style / lantea.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

body {
  font-family: sans-serif;
  margin: 0;
}

h1 {
  display: none;
}

#overlayArea {
  position: absolute;
  /* width: 30em; */
  left: 1%;
  top: 1em;
  z-index: 5;
}

#overlayArea:-moz-system-metric(touch-enabled) {
  font-size: 3mozmm;
}

#overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
#overlayArea select:-moz-system-metric(touch-enabled) {
  font-size: 2.5mozmm;
}

#zoomLevel {
  background-color: rgba(255, 255, 255, .8);
  border-radius: 3px;
  padding: 0 3px;
}


#settingsArea,
#trackArea {
  display: none;
  background-color: rgba(255, 255, 255, .8);
  border: 0;
  border-radius: 5px;
}

#settingsArea > legend,
#trackArea > legend {
  display: none;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 3px;
}

#map {
  border: 0;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  z-index: 1;
}

#debug {
  position: absolute;
  bottom: 5px;
  left: .5em;
  margin: 0;
  z-index: 3;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 3px;
  padding: 0 3px;
}

.debugHide {
  display: none;
}

#copyright {
  position: absolute;
  bottom: 5px;
  right: .5em;
  margin: 0;
  font-size: small;
  opacity: .66;
  z-index: 2;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3px;
  padding: 0 3px;
}


@media screen and (max-width: 500px) {
  body {
    font-size: 10px;
  }
  #overlayArea {
    top: 2px;
    left: 2px;
  }
  #copyright {
    bottom: 1px;
    right: 1px;
    font-size: 8px;
  }
}