body {
  background: #f1f0e9;
  color: #4D3636;
  padding: 3em;
  margin: 0;
  font-family: Georgia;
}

a {
  text-decoration: none;
  color: #8B4B4B;
}

h1 {
  font-size: 4em;
}

#instructions {
  font-size: 1.3em;
}

#search {
  position: absolute;
  top: 1em;
  right: 1em;
  font-size: 1.4em;
  padding: 10px;
  z-index: 99;
  display: none; /* TODO */
}

#tree {
  margin-top: 3em;
}

.person {
  position: relative;
  min-height: 48px;
  padding-left: 60px;
}

.name-and-bio {
  min-height: 48px;
}

.person .name {
  margin: 0;
}

.bio {
  margin-top: 6px;
  line-height: 1.4em;
}

.child {
  display: none;
}

#tree > .person > .child {
  display: block;
}

.person img {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 3px;
  filter: grayscale(100%);;
  cursor: pointer;
}

.expand {
  color: white;
  font-weight: bold;
  position: absolute;
  top: 26px;
  left: 23px;
  cursor: pointer;
  text-shadow: 1px 1px rgba(0,0,0,.5);
}

#tree > .person > .expand {
  display: none;
}