index.css

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;
}

.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;
}

.content-box {
	margin: 0 auto;
	width: 50%;
	min-width: 300px;
	max-width: 500px;
	background-color: rgba(255,255,255,0.9);
	padding: 10px;
	border-radius: 10px;
}

h2 {
	text-align: center
}

.credit {
	font-size: 0.8em;
	text-align: center;
}

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

#working {
	text-align: center;
}

#done {
	cursor: pointer;
}

#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: 171px;
  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: -145px;
}

#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/ */

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

.spinner > 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;
}

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

.spinner .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);
  }
}