#TitlesIndex, #TitlesCreate {

  & > section {

    h3 {
      margin: 1em 0 0 0;
    }

    form {
      @include display(flex);
      @include align-items(flex-start);
      width: 100%;
      max-width: 500px;
      margin: 5em auto 0 auto;
      div.fieldset {
        @include display(flex);
        width: 100%;
      }

      & ~ p {
        max-width: 500px;
        width: 100%;
        margin: 0.3em 0 3em 0;
        font-size: 0.8em;
      }

      div.fieldset {
        @include flex-direction(column);
        margin: 0 1em 0 0;
      }

      input {
        @include flex(1);
        border: 1px solid lighten($gray-blue, 25%);
        font-family: inherit;
        font-size: inherit;
      }

      button {
        @include transition(box-shadow 0.2s);
        @include flex(0 0 auto);
        margin: 2px 0 0 0;
        text-transform: uppercase;
        font-size: 0.8em;
        font-weight: bold;
        padding: 4px 8px;
        border-radius: 2px;
        color: lighten($green, 35%);
        text-shadow: 0 -1px darken($green, 10%);
        text-decoration: none;
        background-color: darken($green, 5%);
        box-shadow: inset 0 1px 1px 0 lighten($green, 15%);

        &:hover {
          box-shadow: inset 0 0 0 0 lighten($green, 15%), 0 1px 1px darken($green, 25%);
        }

        &:active {
          box-shadow: none;
        }

      }

    }
  }
}

#TitlesIndex > section > ul.titles, #TitlesCreate > section ul.titles {
  width: 100%;
  max-width: 500px;

  h3 {
    @include justify-content(center);
  }

}

#TitlesIndex > section > ul.titles li, #TitlesCreate > section ul.titles li {
  @include flex-direction(column);
  @include align-items(flex-start);
  padding: 0.5em 0;

  &:first-child {
    position: relative;

    &:before {
      content: "Current";
      position: absolute;
      text-transform: uppercase;
      right: calc(100% + 1em);
      top: 1em;
      font-size: 0.7em;
      font-weight: normal;
      color: lighten($gray-blue, 20%);
    }
  }

  p {
    margin: 0;
  }
  a {
    font-size: 0.7em;
    font-weight: lighter;
  }
}

#TitlesIndex > section div.fieldset.errors, #TitlesCreate > section div.fieldset.errors {
  input {
    border: 1px solid darken($red, 5%);
    border-radius: 2px 2px 0 0;
  }

  input + ul.errors {
    font-size: 0.8em;
    margin: 0;
    padding: 0 1em;
    background-color: $red;
    border-radius: 0px 0px 2px 2px;
    border-left: 1px solid darken($red, 5%);
    border-right: 1px solid darken($red, 5%);
    border-bottom: 1px solid darken($red, 5%);

    box-shadow: 0 1px 1px darken($red, 15%);

    color: darken($red, 50%);
    text-shadow: 0 1px lighten($red, 5%);

    li {
      @include justify-content(center);
    }
  }
}