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

  header {
    max-height: 47px;

    h2 {
      white-space: nowrap;
    }
  }

  div#accordion {

    h3 {
      @include border-radius(0);
      border-top: 1px solid #e3e3e3;
      margin: 0;
      overflow: hidden;

      &:first-child {
        border: none;
      }

      &:hover {
        background: #eee;
      }

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

        a {
          @include border-radius(0);
          @include box-shadow(none);
          color: lighten($text-color, 10%);
          font-size: $body-font-size;
        }

        &.ui-state-active {
          @extend .active;
          border-bottom: none;

          &:hover {
            background: none;
          }
        }
      }
    }

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

      li {
        @include border-radius(0);
        margin-bottom: lh(.5);

        a {
          border: 1px solid transparent;
          background: transparent;
          @include border-radius(4px);
          position: relative;
          padding: 5px 36px 5px 10px;
          text-decoration: none;
          display: block;
          color: #666;

          p {
            font-weight: bold;
            font-family: $sans-serif;
            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));

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

        &.active {
          font-weight: bold;

          > a {
            border-color: rgb(200,200,200);

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

            p {
              color: #333;
            }
          }

          span.subtitle {
            font-weight: normal;
          }

        }
      }
    }
  }
}
