@import "_base.scss";

// grid variables -----------------------------------------------------
$total-columns: 12;             // a 12-column grid

.page {
  // main content spans 6 of those 9 columns.
  .main {
    @include span-columns(9 omega,12);
    
    h2 {
      @include adjust-font-size-to(32px);

      @include trailer(1, 32px);
      border-left: 8px solid $purple;
      padding-left: 8px;
      margin-left: -16px;
    }

    h3 {
      @include adjust-font-size-to(24px, 1);
      @include leader(1, 24px);
      @include trailer(1, 24px);
      border-left: 4px solid $dark-teal;
      padding-left: 8px;
      margin-left: -12px;
    }

    h4 {
      font-weight:bold;
      @include leader;
      border-left: 2px solid $dark-teal;
      padding-left: 8px;
      margin-left: -10px;
    }
  }
  .secondary{
    width: 14em;
    li a {
      display: block;
      @include adjust-font-size-to(14px);
      padding-left: .3em;
    }
    li ol a{
      padding-left:1em;
    }
    
    .active > a, a:hover {
      background: $light-purple-bg;
      text-decoration:none;
    }
  }

  .toc-fixed {
    position: fixed;
    width: 14em;
    top: 40px;
  }
}
