body {
  position: relative;
  &.index {
    .comments {
      display: none;
    }

    .page-content .post {
      @include column(12);

      h2 {
        border-bottom: none;
      }
    }
  }

  // Make main navigation items active if current
  @each $section in guides, debates, events, about {
    &.#{$section} .page-nav .nav-link-item.#{$section} {
      a {
        color: #000;
      }
    }
  }
}


pre {
  @include border-radius(4px);
  @include box-shadow(#A89A7a 0px 1px 1px inset, white 0px 1px 0px);
  background: #f8f8f8;
  padding: .5em 1em;
  margin: 1.5em 0;
  overflow: auto;

  code {
    background: #f8f8f8;
  }
}

.page-header {
  @include outerRow();
  @include mobileRow();

  margin-bottom: 60px;
  margin-top: 40px;

  .brand {
    @include column(4);
    @include mobileColumn(4);
  }
}

.page-nav {
  @include column(8);
  @include mobileColumn(4);

  .nav-links {
    @include pie-clearfix;

    float: right;
    margin-top: 10px;

    @include respondTo(smallScreen) {
      float: none;
    }

    a {
      font-size: ms(2);
      font-weight: bold;
    }
  }
}

.page-content {
  @include outerRow();
  @include mobileRow();

  .post {
    @include column(9);
    @include mobileColumn(4);

    img {
      border: 3px solid #ccc;
    }

    h1, 
    h2, 
    h3, 
    h4, 
    h5, 
    h6 {
      a {
        color: $color-black;
        &:hover {
          $background-spacing: 35px;

          background: url("/images/iconic/raster/gray_dark/link_24x24.png") no-repeat 0px center;
          padding-left: $background-spacing;
          margin-left: -$background-spacing;
        }
      }
    }

    h2 {
      border-bottom: 1px solid #ccc;
      padding-bottom: 7px;
    }

    .alert-box {
      a {
        color: #333;
        text-shadow: none;
      }
    }

    .highlight {
      background: none;
      border: none;
    }
  }

  .sidebar {
    @include column(3);
    @include mobileColumn(4);

    background: $color-red;
    color: #fff;
    padding-bottom: 10px;
    padding-top: 10px;

    a {
      color: #fff;
      font-weight: bold;
    }

    h1 {
      background-color: $color-black;
      font-size: ms(3);
      margin-left: -$columnGutter / 2;
      margin-right: -$columnGutter / 2;
      padding: 5px 0px;
      padding-left: $columnGutter / 2;
      padding-right: $columnGutter / 2;
    }

    h2 {
      font-size: ms(2);
    }

    li {
      list-style: none;
      margin-bottom: 5px;
    }

    .create-issue,
    .github-repo {
      display: block;
      font-weight: bold;
      margin: 10px 0px;
    }
  }

  .comments {
    @include column(12);
    @include mobileColumn(4);

    margin: 50px 0px;
  }
}

.page-footer {
  background: #232323;
  color: #fff;
  width: 100%;
  &.sticky {
    bottom: 0px;
    position: fixed;
  }

  .footer-content {
    @include outerRow();
    @include mobileRow();
  }

  .events {
    @include column(3);
    @include mobileColumn(4);

    float: right;

    @include respondTo(smallScreen) {
      float: none;
    }

    .events-title {
      font-size: ms(3);
    }

    .events-past-title {
      font-size: ms(2);
    }

    .event {
      @include mobileColumn(4);
    }

    .event-date {
      background-color: $color-red;
      color: #fff;
      float: left;
      margin-right: 10px;
      padding: 5px;
      text-align: center;
    }

    .event-date-day {
      font-size: ms(3);
      font-weight: bold;
    }

    .event-date-month {
      font-size: ms(1);
    }

    .event-details {
      float: left;
    }

    .event-location {
      font-size: ms(1);
      margin-top: 0px;
    }

    .event-title {
      font-size: ms(2);
      margin-bottom: 3px;
      margin-top: 0px;
    }
  }

  .buzz {
    @include column(4);
    @include mobileColumn(4);

    .twtr-hd,
    .twtr-ft {
      display: none;
    }
  }

  .buzz-title {
    font-size: ms(3);
  }

  .followus {
    @include column(4);
    @include mobileColumn(4);
  }

  .followus-title {
    font-size: ms(3);
  }

  .tweet-title {
    font-size: ms(1);
  }

  .tweet-text {
    font-size: ms(0);
  }
}

.tout {
  background: url("/images/tout-shadow.png") no-repeat center 170px;
  margin: 0px auto 60px;
  padding-bottom: 30px;
  text-align: center;
  width: 650px;

  @include respondTo(smallScreen) {
    width: auto;
  }

  .tout-title {
  }

  .tout-subtitle {
    color: $color-red;
    font-weight: normal;
  }
}

.social-links {
  margin: 0px auto 60px;
  width: 217px;

  .social-twitter,
  .social-github {
    float: left;
  }
}

.read-guide {
  margin: 0px auto 50px;
  width: 425px;

  @include respondTo(smallScreen) {
    width: auto;
  }

  .read-more {
    display: inline;

    @include respondTo(smallScreen) {
      display: none;
    }
  }

  .read-more-link {
    color: #888;
  }

  .read-more-mobile {
    display: none;
    margin-top: 5px;
    .read-more-link {
      @extend .button;
      @extend .round;
      @extend .large;
      @extend .secondary;
    }
    @include respondTo(smallScreen) {
      display: block;
    }
  }

  .read-guide-link {
    @extend .button;
    @extend .round;
    @extend .large;
  }
}

.highlight {
  background: none;
}
