div.header-wrapper {
  background: $mit-red;
  border-bottom: 1px solid #fff;
  @include box-shadow(inset 0 -4px 6px darken($mit-red, 5%));

  @media print {
    display: none;
  }

  header {
    @extend .clearfix;
    @extend .wrapper;
    @include box-sizing(border-box);
    padding: 0 $body-line-height;

    hgroup {
      @extend .clearfix;
      float: left;
      min-width: flex-grid(3);
      padding-top: 13px;

      h1 {
        color: darken($mit-red, 25%);
        font-size: 18px;
        font-weight: 800;
        @include inline-block();
        line-height: lh();
        margin: 0;
        padding: 0 lh(.5) 0 0;
        text-shadow: 0 1px 0 lighten($mit-red, 10%);

        &:after {
          color: darken($mit-red, 10%);
          content: "•";
          display: inline-block;
          font-size: 10px;
          letter-spacing: -2px;
          padding-left: lh(.5);
          text-shadow: 0;
        }
      }

      h2 {
        font-size: 16px;
        @include inline-block();
        letter-spacing: 0;
        margin: 0;
        padding: 0 lh() 0px 0;
        text-shadow: 0 -1px 0 darken($mit-red, 10%);
        text-transform: none;
        -webkit-font-smoothing: antialiased;

        a {
          color: #fff;
          border: none;

          &:hover {
            color: rgba(#fff, .7);
          }
        }
      }


      @media screen and (max-width: 900px) {
        display: block;
        float: none;

        h1 {
          border: 0;
          float: left;
        }

        h2 {
          border: 0;
          float: left;
          margin-right: 0;
        }
      }
    }

    nav {
      background: #501016;
      border-bottom: 1px solid darken(#501016, 10%);
      @include border-radius(3px 3px 0 0);
      @include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%));
      display: block;
      float: left;
      margin: 5px 0 0;
      padding: 0;
      text-shadow: 0 -1px 0 darken($mit-red, 10%);
      -webkit-font-smoothing: antialiased;

      ul {
        @extend .clearfix;
        margin: 0;

        li {
          line-height: lh();
          margin-bottom: 0;
          float: left;

          a {
            border: none;
            color: #fff;
            display: block;
            font-style: normal;
            font-weight: bold;
            padding: 10px lh() 8px;

            @media screen and (max-width: 1020px) {
              padding: 10px lh(.7) 8px;
            }

            &:hover {
              color: rgba(#fff, .7);
              background-color: none;
            }
          }
        }
      }

      @media screen and (max-width: 900px) {
        width: 100%;
        float: none;

        ul {
          li {
            display: table-cell;
            padding: auto;
            text-align: center;
            width: 16.6666666667%;
          }
        }
      }

      .active {
        background: #F4F4F4;
        border: 1px solid darken(#501016, 10%);
        border-bottom: 0;
        @include border-radius(3px 3px 0 0);
        @include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff);
        color: #333;
        text-shadow: 0 1px 0 #fff;
      }

      &.courseware {
        li.courseware a {
          @extend .active;
        }
      }

      &.book {
        li.book a {
          @extend .active;
        }
      }

      &.info {
        li.info a {
          @extend .active;
        }
      }

      &.discussion {
        li.discussion a {
          @extend .active;
        }
      }

      &.wiki {
        li.wiki a {
          @extend .active;
        }
      }

      &.profile {
        li.profile a {
          @extend .active;
        }
      }
    }
  }
}