.starSystem {
  margin-top: 10px;
}

.graphicsContainer {
  background: black;
  height: 50px;
}

.star {
  float: left;
}

.beforeZone {
  float: left;
}

.goldilocksZone {
  float: left;
}

.afterZone {
  overflow: auto;
}

.tempContainer .beforeZone,
.distContainer .beforeZone {
  text-align: right;
  padding-right: 5px;
  border-right: 1px solid black;
}

.tempContainer .afterZone,
.distContainer .afterZone {
  padding-left: 5px;
  border-left: 1px solid black;
}

.tempContainer .goldilocksZone,
.distContainer .goldilocksZone {
  height: 1px;
}

.graphicsContainer .beforeZone,
.graphicsContainer .goldilocksZone,
.graphicsContainer .afterZone {
  height: 50px;
}

.graphicsContainer .beforeZone {
  background: -webkit-radial-gradient(#AB0000 10%, #700000 40%, black 80%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(#AB0000 10%, #700000 40%, black 80%); /* For Opera 11.6-12.0 */
  background: -moz-radial-gradient(#AB0000 10%, #700000 40%, black 80%); /* For Firefox 3.6-15 */
  background: radial-gradient(#AB0000 10%, #700000 40%, black 80%); /* Standard syntax */
}

.graphicsContainer .goldilocksZone {
  background: -webkit-radial-gradient(#00AB14 10%, #117000 40%, black 80%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(#00AB14 10%, #117000 40%, black 80%); /* For Opera 11.6-12.0 */
  background: -moz-radial-gradient(#00AB14 10%, #117000 40%, black 80%); /* For Firefox 3.6-15 */
  background: radial-gradient(#00AB14 10%, #117000 40%, black 80%); /* Standard syntax */
}

.graphicsContainer .afterZone {
  background: -webkit-radial-gradient(#0017AB 10%, #000F70 40%, black 80%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(#0017AB 10%, #000F70 40%, black 80%); /* For Opera 11.6-12.0 */
  background: -moz-radial-gradient(#0017AB 10%, #000F70 40%, black 80%); /* For Firefox 3.6-15 */
  background: radial-gradient(#0017AB 10%, #000F70 40%, black 80%); /* Standard syntax */
}