body.api {

  @include font-smoothing(antialiased);

  #container #content {
    max-width: 1200px;

    a {
      color: $lightlinkcolor;
      text-decoration: none;
      &:hover {
        padding-bottom: 2px;
        border-bottom: 1px dotted $lightlinkcolor;
      }
    }

    p {
      opacity: 0.9;
      @include margin(5px, 0, 5px, 0);
    }

    section {

      aside {
        width: 180px;

        p {
          color: $medbordercolor;
          @include text-align(left);
        }
      }

    }

    h2 {
      line-height: 1.1;
      @include margin(20px, 0, 20px, 0);
    }

    h3 {
      font-size: 16px;
      margin-bottom: 10px;
      opacity: 0.8;
      color: $brightlinkcolor;
    }

    h4 {
      line-height: 1.3;
    }

    table {
      background-color: $l-darkbackground;
      color: #ccc;
      border: 1px solid $darkbordercolor;
      margin-bottom: 20px;

      input {
        @include padding(5px, 7px, 5px, 7px);
        background-color: $l2-darkbackground;
        color: white;
        border: 0;
      }

      code {
        color: white;

        @media all and (max-width: 480px) {
          font-size: 12px;
        }

      }
    }

    pre {
      @include padding(7px, 0, 7px, 0);
      margin-bottom: 7px;
    }

    code {
      background-color: $l2-darkbackground;
      color: white;
      display: inline-block;
      font-size: 14px;
      letter-spacing: 1px;
      margin-top: 0px;
      margin-bottom: 7px;
      @include padding(1px, 4px, 1px, 4px);
      white-space: nowrap;

      a {
        color: $l-brightlinkcolor;
        &:hover {
          opacity: 1;
          border-bottom: 1px dotted $l-brightlinkcolor !important;
        }
      }

    }

    td.code {
      // @include text-align(center);
      width: 120px;
    }
  }

}
