section.course-index {
  @extend .sidebar;
  @extend .tran;

  div#accordion {

    h3 {
      @include box-shadow(inset 0 1px 0 0 #eee);
      border-top: 1px solid #d3d3d3;
      overflow: hidden;
      margin: 0;

      &:first-child {
        border: none;
      }

      &:hover {
        @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
      }

      &.ui-accordion-header {
        color: #000;

        a {
          font-size: $body-font-size;
          color: lighten($text-color, 10%);
        }

        &.ui-state-active {
          @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
          @extend .active;
          border-bottom: 1px solid #d3d3d3;
        }
      }
    }

    ul.ui-accordion-content {
      @include border-radius(0);
      @include box-shadow(inset -1px 0 0 #e6e6e6);
      background: #dadada;
      border: none;
      font-size: 12px;
      margin: 0;
      padding: 1em 1.5em;

      li {
        background: transparent;
        border: 1px solid transparent;
        @include border-radius(4px);
        margin-bottom: lh(.5);
        position: relative;
        padding: 5px 36px 5px 10px;

        a {
          text-decoration: none;
          display: block;
          color: #666;

          p {
            font-weight: bold;
            margin-bottom: 0;

            span.subtitle {
              color: #666;
              font-weight: normal;
              display: block;
            }
          }
        }

        &:after {
          background: transparent;
          border-top: 1px solid rgb(180,180,180);
          border-right: 1px solid rgb(180,180,180);
          content: "";
          display: block;
          height: 12px;
          margin-top: -6px;
          opacity: 0;
          position: absolute;
          top: 50%;
          right: 30px;
          @include transform(rotate(45deg));
          width: 12px;
        }

        &:hover {
          @include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4)));
          border-color: rgb(200,200,200);

          &:after {
            opacity: 1;
            right: 15px;
            @include transition(all, 0.2s, linear);
          }

          > a p {
            color: #333;
          }
        }

        &:active {
          @include box-shadow(inset 0 1px 14px 0 rgba(0,0,0, 0.1));
          top: 1px;

          &:after {
            opacity: 1;
            right: 15px;
          }
        }

        &.active {
          background: rgb(240,240,240);
          @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230)));
          border-color: rgb(200,200,200);
          font-weight: bold;

          > a p {
            color: #333;
          }

          span.subtitle {
            font-weight: normal;
          }

          &:after {
            opacity: 1;
            right: 15px;
          }
        }
      }
    }
  }
}
