/* Necessary for sticky footer. */
html {
  position: relative;
  overflow-y: scroll;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

/* Footer position on mobile devices */
@media (max-width: 768px) {
  body {
    margin-bottom: 160px;
  }
  .footer {
    height: 160px; 
  }
}

/* Reduce maximum width. */
@media (min-width: 992px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 750px;
  }
}

/* Additional spacing. */
#details {
  margin-top: 1.5em;
}

/* Traffic light. */
#ampel {
  background: #333;
  border-radius: 10px;
  display: inline-block;
}
#ampel div {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 10px;
  color: white;
}
#ampel .red {
  background-color: #F00;
}
#ampel .yellow {
  background-color: #FE0;
}
#ampel .green {
  background-color: #1E1;
}
#ampel .disabled {
  background-color: #999;
}

.graph-container {
  /* scroll graph on mobile devices */
  overflow: auto;
  white-space: nowrap;
}

#radarmap { height: 450px; }

.map-city {
	top: -7px;
	position: relative;
	display: inline-block;
	white-space: nowrap;

	color: #000;
	text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;
}

quote {
	font-style: italic;
	color: #777777;
	font-size: 20px;
	line-height: 1;
}

span.author {
	text-align: right;
	display: block;
	margin-top: -0.5em
}

a.italic {
	color: inherit;
	text-decoration: inherit;
	font-style: italic;
}

.notice-mirror {
	unicode-bidi:bidi-override;
	direction: rtl;
	user-select: none;
}

.notice-hidden {
	display: none;
}