table {
  width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  border-left: 5px solid black;
  border-right: 5px solid black;
}

td, th {
  padding: 5px;
  border-right: 1px solid black;
}

td.sprite {
  text-align: center;
}

th.sortable {
  cursor: pointer;
}

tr:nth-child(odd) {
  background-color: #ccc;
}

div.titlebox {
  margin-top: 20px;
}

div#title {
  text-align: center;
  font-size: 22pt;
}

div#subtitle {
  text-align: center;
  font-size: small;
}

div#container {
  width: 820px;
  margin: 0 auto;
  margin-top: 20px;
}

div#images div:hover span {
  text-decoration: underline;
}

div#images div {
  float: left;
  width: 10%;
  margin: 2%;
  border: 1px solid black;
  padding: 5px;
  text-align: center;
  cursor: pointer;
}

img {
  object-fit: cover;
  object-position: 0 0;
}

div#images div img.category-icon {
  width: 99%;
}

span.category-caption {
  font-size: 75%;
  font-weight: bold;
}

img.list-icon {
  width: 32px;
  height: 32px;
}