@charset "utf-8";

/**
 * History columns (i.e. nth-child):
 * 1 - Release
 * 2 - Estimate
 * 3 - Schedule
 * 4 - Actual
 * 5 - slip
 * 6 - comment
 */

table#history {
  /* Align the table in the center. */
  margin-left: auto;
  margin-right: auto;
}

table#history th {
  padding-right: 0.5em;
  vertical-align: middle;
}

/* For long comments that wrap, make sure the other columns are at the top.  */
table#history tr {
  vertical-align: top;
}

table#history td {
  /* Make sure dates don't run together.  */
  padding-right: 0.5em;
  white-space: nowrap;
}

table#history tr > td:nth-child(5) {
  text-align: center;
}

table#history tr > td:nth-child(6) {
  text-align: left;
  white-space: normal;
}

/* This is ~768px with 16pt font.  */
@media only screen and (max-width: 50em) {
  /* Allow the comment field to wrap onto a row by itself.  */
  table#history tr {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }

  table#history th,
  table#history td {
    flex: 1 1 15%;
    order: 1;
  }

  table#history tr > th:nth-child(6),
  table#history tr > td:nth-child(6) {
    flex: 5 1 100%;
    order: 5;
    padding-bottom: 1em;
    padding-left: 1em;
  }
}