#list-view {
  /* body already has padding-top:8em to clear the fixed header, so no top margin here */
  margin: 0 auto 3em;
  max-width: 62em;
  padding: 0 1em;
}

#surface-search {
  max-width: 24em;
}

/* expandable rows: a "+" that appears on hover, opening a full-width description row */
#surface-table td.expand {
  width: 1.5em;
  text-align: center;
  color: #888;
  user-select: none;
}
#surface-table td.expand[data-expandable] {
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s;
}
#surface-table tr:hover td.expand[data-expandable],
#surface-table tr.expanded td.expand[data-expandable] {
  opacity: 1;
}
#surface-table thead th:first-child {
  padding: 0;
}
#surface-table thead .expand-all {
  display: block;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  user-select: none;
  color: #666;
}
#surface-table tr.detail td {
  background: #f7f7f7;
  padding: 0.5em 1.2em;
}

#surface-table {
  width: 100%;
}

#surface-table th {
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid #ddd;
}

#surface-table th,
#surface-table td.num {
  text-align: center;
}

#surface-table th:first-child,
#surface-table td.name {
  text-align: left;
}

#surface-table td.num {
  white-space: nowrap;
}

/* colour the Kodaira-dimension cell like the geography graph */
#surface-table td:nth-child(2) { font-weight: bold; }
#surface-table tr.kodaira-infty td:nth-child(2) { color: #a94442; }
#surface-table tr.kodaira-0     td:nth-child(2) { color: #3c763d; }
#surface-table tr.kodaira-1     td:nth-child(2) { color: #31708f; }
#surface-table tr.kodaira-2     td:nth-child(2) { color: #666; }