body {
  box-sizing: border-box;
  font-family: arial;
}

#map {
  position: relative;
}

#background {
  display: inline-block;
  max-width: 600px;
}

#background > img{
  width: 100%;
}

#overlay-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  max-width: 600px;
  opacity: .2;
}

.row {
  height: 3.33%;
  width: 100%;
}

.grid-cell {
  width: 3.42%;
  height: 100%;
  display: inline-block;
  margin: 0;
  margin-right: -5px;
}

.aq-reading {
  display: none;
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

#time {
  display: inline-block;
  width: 250px;
  font-size: 1.3em;
  font-family: Arial;
  margin-bottom: 10px;
}

.ex {
  width: 30px;
  padding: 5px;
}

#high-ex {
  background-color: #F5A9A9;
}

#mid-ex {
  background-color: #F5DA81;
}

#low-ex {
  background-color: #96e0a1;
}

#legend-holder {
  max-width: 150px;
  margin-left: 10px;
}

#main {
  top: 50px;
  max-width: 900px;
}

.desc {
  margin-bottom: 10px;
}

.controller {
  font-size: 1em;
  display: inline-block;
  margin: 5px;
  cursor: pointer;
}

#map-holder, #legend-holder {
  float: left;
}

.sources {
  max-width: 600px;
  font-size: .6em;
}

#legend-holder {
  width: 150px;
}

.controller-holder {
  display: inline-block;
  width: 350px;
}

@media (min-width: 600px) {
  .controller-holder {
    font-size: 1.5em;
  }
  .sources {
    font-size: .8em;
  }
  #legend-holder {
    padding-top: 10px;
  }
}

#minimap {
  margin-left: -10px;
  margin-top: 5px;
}

#legend {
  margin-bottom: 20px;
}