_layout.scss

body {
  @include clearfix();
  height: 100%;
  font: 14px $body-font-family;
  background-color: lighten($dark-blue, 62%);
  background-image: url('/static/img/noise.png');

  > section {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  > header {
    background: $dark-blue;
    @include background-image(url('/static/img/noise.png'), linear-gradient(lighten($dark-blue, 10%), $dark-blue));
    border-bottom: 1px solid darken($dark-blue, 15%);
    @include box-shadow(inset 0 -1px 0 lighten($dark-blue, 10%));
    @include box-sizing(border-box);
    color: #fff;
    display: block;
    float: none;
    padding: 0 20px;
    text-shadow: 0 -1px 0 darken($dark-blue, 15%);
    width: 100%;

    nav {
      @include clearfix;

      > a {
        @include hide-text;
        background: url('/static/img/menu.png') 0 center no-repeat;
        border-right: 1px solid darken($dark-blue, 10%);
        @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
        display: block;
        float: left;
        height: 19px;
        padding: 8px 10px 8px 0;
        width: 14px;

        &:hover, &:focus {
          opacity: .7;
        }
      }

      h2 {
        border-right: 1px solid darken($dark-blue, 10%);
        @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
        float: left;
        font-size: 14px;
        margin: 0;
        text-transform: uppercase;
        -webkit-font-smoothing: antialiased;

        a {
          color: #fff;
          padding: 8px 20px;
          display: block;

          &:hover {
            background-color: rgba(darken($dark-blue, 15%), .5);
            color: $yellow;
          }
        }
      }

      a {
        color: rgba(#fff, .8);

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

      ul {
        float: left;
        margin: 0;
        padding: 0;
        @include clearfix;

        &.user-nav {
          float: right;
          border-left: 1px solid darken($dark-blue, 10%);
        }

        li {
          border-right: 1px solid darken($dark-blue, 10%);
          float: left;
          @include box-shadow(1px 0 0 lighten($dark-blue, 10%));

          a {
            padding: 8px 20px;
            display: block;

            &:hover {
              background-color: rgba(darken($dark-blue, 15%), .5);
              color: $yellow;
            }

            &.new-module {
              &:before {
                @include inline-block;
                content: "+";
                font-weight: bold;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }

  &.content {
    section.main-content {
      border-left: 2px solid $dark-blue;
      @include box-sizing(border-box);
      width: flex-grid(9) + flex-gutter();
      float: left;
      @include box-shadow( -2px 0 0 lighten($dark-blue, 55%));
      @include transition();
      background: #FFF;
    }
  }
}