body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 0 2em 2em; }

#todo-list {
  max-width: 38em;
  float: left;
  padding-right: 2em; }

#work-area {
  max-width: 38em;
  float: left; }

#todo, #membersList > li {
  cursor: pointer;
  display: inline-block; }

h2 {
  margin-top: 0; }

h3 {
  text-decoration: underline; }

ol {
  margin: 0 0 1em 0; }

#membersList {
  max-width: 30em;
  padding: 0;
  margin: 0; }
  #membersList li {
    background-color: skyblue;
    display: block;
    margin: 0 0 .5em;
    padding: .25em; }
    #membersList li ul {
      padding: 0;
      margin: 0 0 0 .5em; }
      #membersList li ul li {
        padding: 0;
        margin: 0 0 .25em; }
  #membersList .toHalfHide, #membersList .toHalfHide li {
    background-color: grey; }

#teamSelector {
  margin: 0 0 1em 0;
  padding: 0.2em;
  font-size: 1.1em; }

form {
  margin: 0 0 1em; }

label {
  display: block; }

input, button {
  margin: 0 .5em 0 0; }

li.toHighlight {
  color: red;
  text-decoration: underline; }
  li.toHighlight li {
    color: black; }

/* Animations */
@keyframes hideList {
  0% {
    opacity: 1;
    transform: scaleY(1);
    max-height: 30em; }
  100% {
    opacity: 0;
    transform: scaleY(0);
    max-height: 0; } }

.toHide {
  animation-name: hideList;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier();
  opacity: 0;
  overflow: hidden;
  transform: scaleY(0);
  max-height: 0; }

@keyframes halfHideList {
  0% {
    opacity: 1; }
  100% {
    opacity: 0.5; } }

.toHalfHide {
  animation-name: halfHideList;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier();
  opacity: 0.5; }

@keyframes appearList {
  0% {
    opacity: 0;
    transform: scaleY(0);
    max-height: 0; }
  100% {
    opacity: 1;
    transform: scaleY(1);
    max-height: 30em; } }

.toAppear {
  animation-name: appearList;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier();
  opacity: 1;
  transform: scaleY(1);
  max-height: 30em; }