body {
  min-width: 300px;
  max-width: 500px;
  margin: 10px auto;
}

#tumbleweed {
  text-align: center;
  margin: 30px 0;
}

#versions {
  margin: 0 20px;
}

#versions table {
  width: 100%;
}

#versions thead th {
  padding-bottom: 7px;
}

#versions tbody th {
  text-align: center;
  padding-top: 10px;
}

#versions thead th, #versions td {
  text-align: right;
}

#versions td {
  color: white;
  padding: 2px 10px;
  font-weight: bold;
}

#versions thead th:first-child, #versions td:first-child {
  text-align: left;
  width: 100%;
}

.version-0 { background-color: #114800; }
.version-1 { background-color: #286C12; }
.version-2 { background-color: #70B45A; }
.version-3 { background-color: #A1D890; }

.version-0.changed { background: linear-gradient(to right, #114800 97%, white 100%); }
.version-1.changed { background: linear-gradient(to right, #286C12 90%, #114800 100%); }
.version-2.changed { background: linear-gradient(to right, #70B45A 90%, #286C12 100%); }
.version-3.changed { background: linear-gradient(to right, #A1D890 90%, #70B45A 100%); }

/* Modified from http://cssarrowplease.com/ */
.update-inbound td:first-child {
  position: relative;
}
.update-inbound td:first-child:after, .update-inbound td:first-child:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.update-inbound td:first-child:after {
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #88b7d5;
  border-width: 7px;
  margin-top: -7px;
}

#last-updated {
  margin-top: 20px;
  text-align: center;
  color: #999;
}