index.css

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
html, body, #main-grid {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html, body {
  font-family: 'Roboto','sans-serif';
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  line-height: 30px;
  padding-left: 10px;
}

#right-panel {
  line-height: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

#map {
  height:300px;
}

@media screen and (min-width:48em) {
  #map {
    height:100%;
  }
}


#times {
  width:100%;
  text-align: center;
  border-collapse: separate;
  border-spacing:2px;
}

#times .time_slot {
  width:9em;
  background-color:#ddd;
}

#times .used_time {
  width:5em;
  text-align:center;
  background-color:#eee;
}

#floating-panel, #floating-panel input, #floating-panel button {
  font-size:15px;
}

#floating-panel #title {
  font-size:18px;
  margin-bottom:1em;
  background:#eee;
  border-radius: 4px;
  padding:4px;
}

#noroute {
  color:red;
  display:none;
}

#floating-panel input {
  padding:4px;
  margin: 4px;
  width:20em;
}

#floating-panel {
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
  display: none;
}