body {
  background-color: black;
  color: #babdb6;

  margin-top: 3em;
}

dd {
  margin-bottom: 0.5em;
}


/* hidden by default (shown with JS) */
.hasjs {
  display: none;
}

/* simple CSS grammar sugar */
.until {
  display: none;
}
.hasjs.until {
  display: block;
}


.topbox {
  position: absolute;
  display:  block;

  top:   0px;
  left:  0px;
  right: 0px;

  padding: 0.25em;

  line-height: 2em;
}

.statusbar-area {
  position: absolute;

  bottom: 0px;
  left:   0px;
  right:  0px;

  height:  1.5em;
  padding: 0.15em;
}
.statusbar {
  display:  none;
  position: absolute;

  background-color: #2e3436;

  bottom: 0px;
  left:   0px;
  right:  0px;

  padding: 0.15em;

  line-height: 1.5em;

  font-size: 0.9em;
}
.statusbar-area:hover .statusbar {
  display: block;
}

.notice {
  background-color: #fce94f;
  border-bottom: 2px solid #f4d030;

  color: black;
}


#interval,
#blank,
#samples,
#delay {
  width: 3em;
}


.render {
  position: absolute;
  left:  0px;
  right: 0px;
  top:   5em;
  text-align: center;
}


/*** color test ***/
.render .color-display {
  display: block;

  margin: 0px auto;
  border-radius: 2em;

  width: 300px;
  height: 300px;
}


/** after everything else to ensure it takes precidence **/
.pending .while-idle,
.testing .while-idle {
  display: none;
}
.while-pending,
.while-testing {
  display: none;
}
.pending .while-pending,
.testing .while-testing {
  display: block;
}
.testing .until-testing {
  display: none;
}