html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
  background: $navyd;

  // page blue border style
  .page-wrapper {
    border: 8px solid $navy;
    border-bottom: none;
    position: relative;
    background: white;

    &:before,
    &:after {
      position: fixed;
      z-index: 1200;
      content: " ";
      display: block;
      top: 0;
      left: 0;
      right: 0;
      height: 8px;
      width: 100%;
      background: $navy;
    }
    &:before {
      top: 0;
    }
    &:after {
      bottom: 0;
      top: auto;
    }
  }
}

.main {
  min-height: 760px;
}

.content-wrapper {
  padding: 7rem 0 5rem;
  max-width: 66.67vw;
  margin-left: auto;
  margin-right: auto;
}

// docs layout
$sidebarWidth: 18.5rem;

.page-docs,
.page-blog {

  .navbar-top {
    padding-top: 3.5rem;
    background: url('/img/topography.png') left top repeat;
    background-attachment: fixed;

    &:after {
      height: 1px;
      position: absolute;
      bottom: 0;
      display: block;
      content: " ";
      background-color: lighten($blue1, 40%);
      left: $sidebarWidth;
      right: 0;
    }
  }

  .navbar-brand {
    width: 15rem;
    position: relative;

    a {
      display: block;
      position: absolute;
      top: 0rem;
      left: -1.25rem;
      padding: 0.725rem 1.75rem 0.667rem 1.75rem;
      width: $sidebarWidth;
      @include transition;
      
      svg {
        width: 3rem;
        fill: white;
        @include transition;
      }

      &:after {
        display: inline-block;
        content: "Docs";
        @include klinicBold;
        position: absolute;
        top: 1.75rem;
        left: 6rem;
      }

      &:hover {
        @include opacity(rgba($salmon, 0.5), white);

        img, svg {
          transform: rotate(180deg);
        }
      }
    }
  }

  .navbar-top-fixed {
    .navbar-brand a {
      padding: 0.725rem 1.75rem 0.4rem 1.75rem
    }
  }

  .navbar-menu {
    position: absolute;
    // margin: 0 0 0 -12.5rem !important;
    left: 50%;
    margin: 0 0 0 ( -$sidebarWidth );
  }

  .content-docs {
    padding-top: 5.5rem;
    padding-left: $sidebarWidth;
  }

  .page-wrapper {
    max-width: 75vw;
    min-height: 920px;

    .sidebar {
      width: 25%;
      width: 300px;
      min-height: 100%;
    }
  }
}

.page-blog .navbar-brand a {
  border-bottom: 1px solid $light1;
  
  &:after {
    content: "Blog";
  }
}