/* Stage Select */
ssbu-stage-select .classification,
ssbu-stage-select .note,
ssbu-stage-select .shortcuts {
  padding-top: 1rem;
}

ssbu-stage-select .note p {
  margin-bottom: 0;
  font-style: italic;
}

ssbu-stage-select .classification {
  border-bottom: 1px solid hsl(196, 12%, 60%);
}

ssbu-stage-select form > .form-group {
  margin-bottom: 1.5rem;
}



/* Comparator Controls */

.control-container {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid hsl(196, 12%, 60%);
}



/* Figures - Table */

.ssbu-table .header {
  color: white;
  font-weight: 700;
  background-color: hsl(218, 75%, 50%);
}

.ssbu-table .stats {
  background-color: hsl(196, 12%, 80%);
}

.ssbu-table .entry:nth-of-type(2n) {
  background-color: hsl(196, 12%, 90%);
}

.ssbu-table .stats {
  font-style: italic;
}

.ssbu-table .content-wrapper {
  display: inline-table;
  height: 100%;
}

.ssbu-table .content {
  display: table-cell;
  vertical-align: middle;
  padding: 1rem 0;
}

.ssbu-table .highlight {
  font-weight: 700;
  font-style: italic;
}



/* Figures - Graph */

.legend {
  margin-bottom: 1rem;
}

.legend .legend-bin,
.legend label {
  margin-right: 1rem;
  margin-bottom: 1rem;
  vertical-align: middle;
}

.legend .legend-bin {
  width: 1.3rem;
  height: 1rem;
}

.graph {
  margin-bottom: 2rem;
}

.graph-header {
  padding: 1rem;
  color: white;
  font-weight: 700;
  background-color: hsl(218, 75%, 50%);
}

.graph-row .name-bg {
  padding: 0;
  border-left: 1px solid hsl(196,12%, 60%);
  background-color: hsl(196, 12%, 80%);
}

.graph-row .name-container {
  padding: .5rem 1rem;
  line-height: 1;
}

.graph-row .bar-bg {
  border-left: 1px solid hsl(196,12%, 60%);
  background-image: url('../media/img/bg-graph-20.png');
}

.graph-row .bar-container {
  max-width: 215px;
  height: 3.5rem;
  padding: .5rem 0 2rem 0;
}

.graph-row .bar {
  float: left;
  height: 1rem;
}

.graph-row .bar.bin-1,
.legend .bin-1 {
  border-style: none;
  background-image: url('../media/img/bin-1.gif');
}

.graph-row .bar.bin-2,
.legend .bin-2 {
  background-image: url('../media/img/bin-2.gif');
  border-style: none;
}

.graph-row .bar,
.graph-row .bar.bin-3,
.legend .bin-3 {
  background-color: hsl(188, 55%, 30%);
}

.graph-row .bar.bin-4,
.legend .bin-4 {
  border-style: none;
  background-image: url('../media/img/bin-4.gif');
}

.graph-row .bar.bin-5,
.legend .bin-5 {
  border-style: none;
  background-image: url('../media/img/bin-5.gif');
}

@media (min-width: 576px) {
  .graph-row .name-container,
  .graph-row .bar-container {
    width: 430px;
    max-width: none;
  }

  .graph-row .bar-bg {
    background-image: url('../media/img/bg-graph-20.png');
  }
}

@media (min-width: 768px) {
  .graph-row .name-container,
  .graph-row .bar-container {
    width: 645px;
  }

  .graph-row .bar-bg {
    background-image: url('../media/img/bg-graph-30.png');
  }
}

@media (min-width: 992px) {
  .graph-row .name-container,
  .graph-row .bar-container {
    width: 860px;
  }

  .graph-row .bar-bg {
    background-image: url('../media/img/bg-graph-40.png');
  }
}

@media (min-width: 1200px) {
  .graph-row .name-container,
  .graph-row .bar-container {
    width: 1075px;
  }

  .graph-row .bar-bg {
    background-image: url('../media/img/bg-graph-50.png');
  }
}