table
{
   border-collapse: collapse;
}

th {
  border-bottom: 1px solid #ccc;
}

.list {
font-family: 'Sorts Mill Goudy', serif;
}

tr
{
   border-bottom: 1px solid #ccc;
}

td {
  padding: 10px;
}

input {
  border: solid 1px #ccc;
  border-radius: 5px;
  padding: 7px 14px;
  margin-bottom: 10px
}

input:focus {
  outline: none;
  border-color: #aaa;
}

.sort {
  padding: 8px 30px;
  border: none;
  display: inline-block;
  color: black;
  background-color: transparent;
  text-decoration: none;
  height: 30px;
  font-size: 0.9em;
  font-weight: bold;
}

.sort-dummy {
  text-transform: uppercase;
  padding: 8px 30px;
  border: none;
  display: inline-block;
  color: black;
  background-color: transparent;
  text-decoration: none;
  height: 30px;
  font-size: 0.9em;
  font-weight: bold;
}

.sort:hover {
  text-decoration: none;
}

.sort:focus {
  outline: none;
}

.sort:after {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content: "";
  position: relative;
  top: -10px;
  right: -5px;
}

.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content: "";
  position: relative;
  top: 4px;
  right: -5px;
}

.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content: "";
  position: relative;
  top: -4px;
  right: -5px;
}

/* Let's make a class that hides part of the bio, so the table looks tidy, but still allows us to search through the hidden text. In this hypothetical, we'd be using Wordpress to load both excerpts and the text of full posts, but we'd hid the full post text using the "bio-hidden" class. Each "Read more..." would link to a new page with the full bio. */

.bio-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Let's push the search field to the far right of the table header. */

input.search {
  float: right;
}

/* Portrait images: since we're eventually going to grab these from video, let's make them 1080p proportions (1920 x 1080), but thumbnail size. Let's also desaturate them so they're all black and white. */

.portrait img {
  width: 86px;
  height: 54px; 
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}