body {
  background-color:    #e4e4ee;
  color:               #000000;
  background-position: top right;
  background-repeat:   no-repeat;
  font-family:         Arial, Helvetica, sans-serif;
  font-size:           14px;
  font-style:          normal;
  font-weight:         400;
  background-position: top left;
  background-image:    url('pictures/VALD3_bg-navigate.png');
  background-repeat: no-repeat;
  line-height:         1.5;
}
a {
  text-decoration: none;
  font-weight:     600;
  color:           #202090;
}
a:hover {
  text-decoration: underline;
  color:           #3030b0;
}
b {
  font-size:   14px;
  font-weight: 700;
}
b.heading {
  font-size:   16px;
  font-weight: 700;
}
table {
  table-layout: fixed;
  text-align:   left;
  font-family:  Arial, Helvetica, sans-serif;
  font-size:    14px;
  font-style:   normal;
  font-weight:  400;
}
td.navigate {
  height:              600px;
  width:               200px;
  text-align:          left;
  vertical-align:      top;
  background-position: top left;
  background-repeat:   repeat-y;
}
td.navigateitem {
  height:              28px;
  text-align:          left;
  vertical-align:      middle;
  background-image:    url('VALD3_td-navigate.png');
  background-position: center left;
  background-repeat:   no-repeat;
}
td.topframe {
  text-align:          left;
  vertical-align:      top;
  background-image:    url('VALD3_logo.png');
  background-position: top right;
  background-repeat:   no-repeat;
  padding-left:        10px;
}
td.version {
  color:               #202090;
  height:              150px;
  width:               200px;
  text-align:          left;
  vertical-align:      top;
  background-position: top left;
  background-repeat:   no-repeat;
}
td.content {
  text-align:          left;
  vertical-align:      top;
  padding-left:        10px;
}
th {
  text-align:          center;
  vertical-align:      top;
}
td.hspace   { width:  10px; }
td.vspace   { height: 10px; }
input {
  font-size:    14px;
  padding:      4px 8px;
}
select {
  font-size:    14px;
  padding:      4px 8px;
}
textarea {
  font-size:    14px;
  padding:      4px 8px;
  font-family:  Arial, Helvetica, sans-serif;
}
input[type="submit"], input[type="button"] {
  padding:      6px 12px;
  cursor:       pointer;
  border:       1px solid #202090;
  background:   #f0f0ff;
  color:        #202090;
  font-weight:  600;
  border-radius: 3px;
}
input[type="submit"]:hover, input[type="button"]:hover {
  background:   #e0e0ff;
}
.modified_data {
  background-color: #ff5555;
}
.new_data {
  background-color: #ff9955;
}
/* Which personal-configuration state the user is in. Deliberately prominent:
   a snapshot whose age is invisible is what made the old page misleading. */
.config-state {
  margin:           15px 0;
  padding:          10px 15px;
  border-left:      4px solid #8888cc;
  background-color: #f0f0f8;
}
.config-state-warning {
  border-left:      4px solid #ff9955;
  padding-left:     11px;
  background-color: #fff4e8;
}
.messages {
  margin: 15px 0;
  padding: 0;
  list-style: none;
}
.messages li {
  padding: 12px 15px;
  margin: 8px 0;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
}
.messages .success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.messages .error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.messages .warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}
.messages .info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* Labels sit next to their inputs rather than a column-width apart. The label
   column is sized by <colgroup> rather than by CSS: two cells in a full-width
   table split it in half, and every CSS way of collapsing one column (width:1%,
   or width:100% on its sibling) undershoots far enough that the nowrap label
   overflows and paints over the inputs. An explicit column width cannot. */
.requestform td:first-child:not([colspan]) {
  padding-right: 14px;
}

/* cols/size are counts of characters, so a wide input keeps its width whatever
   the window does - and table-layout: fixed above means the column will not grow
   to contain it, so on a narrow screen it overflows into the units column
   instead. These two track their cell; the numeric fields stay small. */
.requestform textarea,
.requestform input[name="subject"] {
  width: 100%;
  box-sizing: border-box;   /* or the border pushes it past the cell again */
}

/* Per-request unit selection: a collapsed one-line header above the form, opening
   into a row of the five groups. Boxed rather than ruled off, now that it is a
   block the form sits under rather than a column beside it. */
.unitpanel {
  font-size: 13px;
  border: 1px solid #b0b0c0;
  background-color: #e4e4ee;
  padding: 4px 8px;
  margin-bottom: 10px;
}
.unitpanel > summary {
  cursor: pointer;
}
/* The affordance: the disclosure triangle alone reads as decoration, and most
   users will never change these. */
.unitchange {
  color: #202090;
  text-decoration: underline;
  margin-left: 6px;
}
.unitsummary {
  font-style: italic;
}
.unitgrid {
  margin: 6px 0 2px 14px;
}
.unitgrid td {
  padding: 0 22px 0 0;
  vertical-align: top;
  white-space: nowrap;
}
.unitnote {
  margin-left: 14px;
  max-width: 46em;
}

/* The selected linelist configuration's description, with the link to its
   contents on the end of it. The same text is the option's hover title, which
   desktop users may never hover over. */
.pconfdesc {
  font-size: 12px;
  font-style: italic;
  color: #404050;
  max-width: 34em;
  margin-top: 2px;
}
/* Inherits the size and the italic, but not a:visited's weight - the link is an
   aside on the description, not a heading for it. */
.pconfdesc a {
  font-weight: 400;
}