body.projects-index {

  section.container {
    @extend .clearfix;
  }
  
  @media all and (max-width: $maximum-width) {
    section.container {
      margin-top: 0.5em !important;
    }
  }
  
}

.application__image-wrapper {
  margin-right: 5px;
  width: 10%;
  display: block;
  float: left;

  @media all and (max-width: $maximum-width) {
    width: 18%;
  }
}

.application__image-placeholder {
  opacity: 0.4;

  &:hover {
    opacity: 1;
  }
}

.admin-panel {
  border-right: 1px solid rgb(200,200,200);
  float: left;
  margin-right: 39px;
  padding: 0px 20px 20px 0px;
  width: 180px;

  @media all and (max-width: $maximum-width) {
    float: none;
    border-right: none;
    width: 100%;
    padding: 0px;
    margin-bottom: 15px;

    .hamburger {
      display: inline;
      margin-top: -10px;
      margin-right: 5px;
    }

    ol {
      display: none;
      clear: both;
      border-bottom: none;
    }
  }

  .user-profile-image {
    @extend .user-avatar;
    @media all and (max-width: $maximum-width) {
      padding: 0px;
      width: 40px;
      height: 40px;
      img {
        border-radius: 20px;
        max-width: 40px;
      }
      margin: none;
      margin-left: 15px;
      margin-top: -12px;
      float: left;
    }
  }

  h2 {
    border-bottom: 1px dotted rgb(200,200,200);
    font: 300 18px/20px $sans-serif;
    margin: 15px 0px;
    padding-bottom: 30px;
    text-align: center;
    @media all and (max-width: $maximum-width) {
      border-bottom: 1px solid rgb(200,200,200);
      margin-bottom: 0px;
      text-align: left;
      padding-left: 70px;
      padding-bottom: 23px;
    }
  }

  ol {
    margin: 0px;

    li {
      border-bottom: 1px dotted rgb(200,200,200);
      list-style: none;
      margin-bottom: 15px;
      padding: 0px 0px 15px 0px;

      @media all and (max-width: $maximum-width) {
        margin: 0px 0px;
        padding: 0px;
      }

      &:first-child {
        border-top: none;
      }

      &.section-title {
        padding: 15px 0px 5px 0px;
        @media all and (max-width: $maximum-width) {
          padding-left: 15px;
        }
      }

      h3 {
        color: $base-font-color;
        font: bold 14px/22px $sans-serif;
      }

      a {
        color: rgb(55,55,55);
        display: block;
        font: normal 12px/14px $sans-serif;
        padding: 5px 0px 5px 10px;
        text-decoration: none;
        @media all and (max-width: $maximum-width) {
          padding: 12px 20px;
        }

        &:hover {
          background: $pink;
          color: rgb(255,255,255);
        }
      }
    }
  }
}

.applications {
  float: left;
  max-width: grid-width(9);
  
  /* Ensure 'Back to Chapter' link on admin view of project page is the correct font size */
  > p:nth-child(2) {
    font-size: 0.8em;
  }

  @media all and (min-width: $maximum-width) {
    width: grid-width(9);
  }

  @media all and (max-width: $maximum-width) {
    max-width: 100%;
    float: none;
    margin-left: 1em;
    margin-right: 1em;
  }

  .exports {
    text-align: right;
    margin-bottom: 20px;
    font-size: 0.8em;
    @media all and (max-width: $maximum-width) {
      display: none;
    }
  }

  .application-filters {
    background: rgb(230,230,230);
    border: 1px solid rgb(200,200,200);
    border-radius: 4px;
    box-shadow: inset 0 -1px 0 0 rgba(255,255,255, 0.3), inset 0 1px 0 0 rgba(255,255,255, 0.8);
    @include linear-gradient(rgb(240,240,240), rgb(220,220,220));
    margin-bottom: 10px;
    position: relative;
    width: grid-width(9);
    @media all and (max-width: $maximum-width) {
      width: 100%;
      box-sizing: border-box;
    }

    nav {
      padding: 10px 10px 0px 10px;
      position: relative;

      a.chapter-selection {
        background: rgb(230,230,230);
        border: 1px solid rgb(190,190,190);
        border-radius: 3px;
        display: block;
        padding: 5px 40px 5px 10px;
        text-decoration: none;
        z-index: 2;

        &:hover {
          background: rgb(220,220,220);
        }

        span {
          color: rgb(55,55,55);
          font: normal 16px/18px $sans-serif;
          text-shadow: 0 1px rgba(255,255,255, 0.75);
        }

        span.arrow {
          border: {
            top: 7px solid rgb(150,150,150);
            right: 7px solid transparent;
            bottom: 7px solid transparent;
            left: 7px solid transparent;
          }
          position: absolute;
          top: 22px;
          right: 25px;
        }

        &.expanded {
          background: rgb(220,220,220);
          border: 1px solid rgb(150,150,150);
          border-radius: 3px 3px 0px 0px;
          cursor: pointer;
        }
      }

      ol.chapter-selector {
        background: rgb(255,255,255);
        border: 1px solid rgb(150,150,150);
        @include border-bottom-radius(4px);
        box-shadow: 0 3px 5px 0 rgba(0,0,0, 0.2);
        opacity: 0;
        overflow-y: auto;
        position: relative;
        display: none;
        z-index: 1;
        margin-top: -1px;
        margin-bottom: 0px;
        
        &.bounded {
          max-height: 428px;          
        }

        li {
          border-bottom: 1px solid rgb(200,200,200);
          list-style: none;
          margin: 0 5px;
          padding: 3px 0px;

          &:last-child {
            border: none;
          }

          a {
            color: rgb(55,55,55);
            display: block;
            padding: 5px 8px;
            text-decoration: none;

            &:hover {
              background: $pink;
              color: rgb(255,255,255);
            }
          }
        }

        &.expanded {
          opacity: 1;
          display: block;
        }
      }
    }

    form.filter {
      float: right;
      padding: 0px 10px 10px 10px;

      div.short-list-toggle, div.funded-toggle, div.toggle {
        float: left;
        margin-right: 10px;
        margin-top: 20px;
        position: relative;

        input[type="checkbox"] {
          left: 12px;
          position: absolute;
          top: 10px;
        }

        label {
          background: rgb(230,230,230);
          border: 1px solid rgb(190,190,190);
          border-radius: 3px;
          font: normal 12px $sans-serif;
          height: 21px;
          margin: 0px;
          text-shadow: 0 1px rgba(255,255,255, 0.8);
          padding: 8px 12px 0px 30px;

          &:hover {
            background: rgb(220,220,220);
            cursor: pointer;
          }
        }

        input[type="checkbox"]:checked + label {
          background: rgb(220,220,220);
          cursor: pointer;
        }
      }

      div.date-range, div.search {
        float: left;
        margin-right: 10px;
        margin-top: 20px;

        label {
          display: none;
        }

        input[type="text"] {
          color: rgb(180,180,180);
          height: 30px;
          width: 90px;

          &:focus {
            color: rgb(55,55,55);
          }
        }

        input#search {
          width: 100px;
        }
      }

      input[type="submit"], button[type="submit"] {
        @include button(rgb(230,230,230));
        margin: 0px;
        margin-top: 20px;
        width: auto;
        font-size: 11px;
      }
    }
  }

  h1 {
    color: $base-font-color;
    font: bold 18px/22px $sans-serif;
    text-transform: uppercase;
  }

  article.project {
    border: 1px solid rgb(200,200,200);
    background: rgb(255,255,255);
    border-radius: 4px;
    box-shadow: 0 1px 6px 0 rgba(0,0,0, 0.15);
    margin-top: 20px;
    margin-bottom: 20px;

    header {
      @include border-top-radius(4px);

      div.title {
        @extend .clearfix;
        border-bottom: 1px solid rgb(200,200,200);
        padding: 10px;

        a.title {
          color: $base-font-color;
          float: left;
          font: bold 24px $sans-serif;
          text-decoration: none;

          &:hover {
            color: $pink;
          }
        }

        .public-link {
          display: none;
          padding-top: .5em;
          font-size: 0.8em;
          clear: both;

          a {
            color: $base-font-color;
            text-decoration: none;

            &:hover {
              color: $pink;
            }
          }
        }

        .actions {
          font-size: 11px;
        }

        a.short-list,
        a.mark-as-winner,
        a.project-actions-toggle {
          @include button(rgb(240,240,240));
          float: right;
          margin-left: 10px;
          text-decoration: none;

          &.short-list:hover {
            @include button($pink);
          }

          &.mark-as-winner:hover {
            @include button(rgb(34,122,255));
          }
        }

        a.project-actions-toggle {
          font-size: 1.1em;
        }
      }

      .contact {
        padding: 10px;
        word-wrap: break-word;

        span {
          font: normal 12px/14px $sans-serif;
        }
      }

      .meta-data {
        border-bottom: 1px solid rgb(200,200,200);
        padding: 10px;
        font-size: 0.8em;

        a {
          color: $base-font-color;
          text-decoration: none;
        }

        .project-actions-toggle {
          margin-left: .25em;
          font-size: 1.2em;
          float: right;
        }

        .spam {
          float: right;
          margin: 0px;

          a {
            color: $base-font-color;
            text-decoration: none;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    section.project-actions {
      display: none;
      padding-top: 1.5em;
      margin-bottom: 0;
      font-size: 1.2em;

      .text-muted {
        color: $muted-color;
      }

      ul {
        margin-bottom: 0;

        li {
          padding-bottom: .5em;

          a {
            text-decoration: none;

            &:hover {
              color: $pink;
            }
          }

          &.non-winner-action {
            display: block;
          }
          &.winner-action {
            display: none;
          }
        }
      }
    }

    section.project-proposal-details {
      overflow: hidden;
      position: relative;

      p {
        color: $lighter-base-font-color;
        font: normal 14px/20px $serif;
        padding: 15px 20px 20px 20px;
        margin: 0px;
      }

      .project-pitch {
        font: normal 16px/20px $serif;
        padding: 10px;

        h3, p {
          margin: 0;
          padding: 0;
          font: normal 14px/20px $serif;
        }

        h3 {
          font-weight: bold;
        }

        p {
          margin-bottom: 10px;
        }

        .gallery {
          margin-bottom: 1em;

          img {
            width: 100%;
            margin: 0;
            border-radius: 4px;
            filter: grayscale(100%);

            &:hover {
              filter: none;
            }
          }
        }
      }

      .details-toggle {
      }

      .see-more {
        background: rgba(245, 245, 245, 1);
        border-top: 1px solid rgb(200,200,200);
        @include border-bottom-radius(4px);
        display: block;
        text-decoration: none;
        @include transition(all 0.2s ease-out);

        p {
          font: 300 12px/14px $sans-serif;
          padding: 5px 10px;
          text-align: right;
        }

        &:hover {
          background: rgba(230, 230, 230, 1);

          p {
            color: $pink;
          }
        }
      }
    }

    .filtering {
      border-top: 1px solid rgb(200,200,200);
      padding: 10px;
      font-size: 0.8em;

      .hiding-form, .unhiding-form {
        p {
          margin: 0;
        }
        &.hiding-form {
          display: none;
        }

        form {
          margin-bottom: 10px;
        }

        input.reason {
          width: 200px;
        }

        label {
          display: inline-block;
        }

        input.hide-action {
          @include button(rgb(230,230,230));
          width: 80px;
          position: relative;
          margin: 0;
        }
      }

      &.show-form {
        .consider-hiding {
          display: none;
        }

        .hiding-form {
          display: block;
        }
      }
    }
  }

  article.project.shortlisted {
    border: 1px solid $pink;
    box-shadow: 0 1px 6px 0 rgba($pink, 0.6);

    div.title {
      a.short-list {
        @include button($pink);
      }
      a.short-list[data-method="post"] {
        display: none;
      }
    }
  }

  article.project.winner {
    border: 1px solid $blue;
    box-shadow: 0 1px 6px 0 rgba($blue, 0.6);

    header {
      div.title {
        .public-link {
          display: block;
        }
      }
    }

    section.project-actions {
      a.mark-as-winner {
        color: $blue;
        font-weight: bolder;
      }
      li.winner-action {
        display: block;
      }
      li.non-winner-action {
        display: none;
      }
    }

    div.title {
      a.mark-as-winner {
        @include button($blue);
      }
    }
  }
}
