body {
    padding: 0;
    margin: 0;
    /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    font-size: 14px;
}

html, body, #map {
    height: 100%;
    width: 100%;
}

body.working {
	cursor: progress;
}

a:hover {
  text-decoration: underline;
}

p {
  line-height: 22px;
}

.visualizer {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hidden {
	display: none !important;
}

#forkme img {
  z-index: 99999;
}

#map {
	z-index: 0;
}

.container {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 9999;
}

.map-active .container {
	/* so that clicks go through to the map! */
	pointer-events: none;
}

.content {
	display: table-cell;
	vertical-align: middle;
  padding: 10px 0;
}

.content-box {
	margin: 0 auto;
	width: 80%;
	min-width: 300px;
	max-width: 600px;
	background-color: rgba(255,255,255,0.9);
	padding: 10px;
	border-radius: 8px;
  max-height: 85vh;
  overflow-y: scroll;
}

h2 {
	text-align: center
}

.note {
  padding: 10px;
  text-align: center;
  background-color: #ffeb3b;
  border-radius: 8px;
}

.credit {
  padding-top: 4px;
  margin-top: 12px;
  border-top: 1px solid #ccc;
	font-size: 0.8em;
	text-align: center;
}

.whats-new {
  font-size: 0.9em;
  text-align: center;
}

#working {
	text-align: center;
}

#controls {
  z-index: 99999;
  position: absolute;
  overflow: hidden;
  bottom: -200px;
  /* We set a specific height here so that revealing only the top part of the
  div will always reveal the *correct* top part. When we expand it later (on hover),
  we set height back to auto, so that all the content is shown correctly. Slightly
  hacky, yes, but it appears to be working in all browsers. A Good Thing. */
  height: 133px;
  left: 0px;
  margin: 0px 10px;
  padding: 3px 16px 5px;
  background-color: rgba(255,255,255,0.7);
  transition: bottom 0.5s;
}

.map-active #controls {
  bottom: -106px;
}

#controls:hover {
  bottom: 0px;
  left: 0px;
  height: auto;
  background-color: rgba(255,255,255,0.9);
}

#controls:hover .title span {
  opacity: 0;
}

#controls .title {
  text-align: center;
  font-weight: bold;
  line-height: 1.4;
  font-size: 13px;
  padding-bottom: 3px;
}

#controls .title span {
  display: block;
  line-height: 0.9;
  font-weight: lighter;
  font-size: 11px;
  transition: all 0.5s ease-in-out;
}

#controls .control-block {
    clear: both;
}

#controls .control-block input {
  float: right;
  margin-left: 10px;
}

#controls .actions {
  text-align: center;
}

#controls .support {
  border-top: 1px dashed black;
  margin-top: 10px;
  padding-top: 10px;
  font-size: 0.8em;
  text-align: center;
}

#controls .support div {
  padding-bottom: 5px;
}

/* http://tobiasahlin.com/spinkit/ */

.loading {
  margin: 20px auto 0;
  width: 70px;
  text-align: center;
}

.loading > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.loading .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loading .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.launch-form {
  margin: 16px 0;
  text-align: center;
}

button#launch {
  font-family: PTSans, Helvetica, Arial, sans-serif;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: #1080f2;
  border-radius: 2px;
  color: white;
  font-family: PTSans;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.3s;
  outline: 0;
}

button#launch:active, button#launch:focus, button#launch:hover {
  background-color: #273140;
  color: #fff;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

div.disclaimer {
  color: #B7B7B7;
  font-size: 0.9em;
  margin-top: 8px;
  font-style: italic;
}