@font-face {
  font-family: 'mozTT';
  src: url('../fonts/moztt_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'mozTT';
  src: url('../fonts/moztt_light-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'mozTT';
  src: url('../fonts/moztt_medium-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font: normal 16px "mozTT", sans-serif;
  background: #fff;
}

body {
  position: relative;
  height: 100%;
}

header {
  z-index: 200;
  height: 72px;
  position: relative;
  border-bottom: 1px solid #999;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.85); 
  box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.85); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#dbdbdb), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#dbdbdb 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#dbdbdb 51%,#fefefe 100%); /* W3C */
}

header h1 {
  display: inline;
  position: absolute;
  top: 4px;
  left: 5px;
}

button {
  font-family: "mozTT", sans-serif;
}

#map {
  height: -webkit-calc(100% - 73px);
  height: calc(100% - 73px);
}

.leaflet-popup-content h2 {
  font-weight: bold
}

.leaflet-popup-content p {
  margin: 0;
}

#modus {
  position: absolute;
  top: 12px;
  left: 78px;
  width: -webkit-calc(100% - 70px - 50px);
  width: calc(100% - 70px - 50px);
}

#modus p {
  margin-bottom: 3px;
}

#modus label {
  display: inline;
}

#buttons {
  display: none;
}

#buttons.visible {
  display: block;
}

#locate {
  position: absolute;
  top: 25px;
  right: 5px;
  width: 95px;
}

#buttons.installed #locate {
  top: 12px;
}

#buttons.installed #refresh {
  top: 38px;
}

#refresh {
  position: absolute;
  top: 2px;
  right: 5px;
  width: 95px;
}

#install {
  position: absolute;
  top: 48px;
  right: 5px;
  width: 95px;
}

.leaflet-popup-content .description {
  font-size: 10px;
  color: #777;
}

.borrow .leaflet-popup-content .bikes,
.return .leaflet-popup-content .boxes {
  font-weight: bold;
}

.leaflet-popup-content .bikes {
  margin-top: 6px;
}

.leaflet-popup-content .boxes {
  margin-bottom: 6px;
}