_course_about.scss

.course-info {
  .container {
    padding-bottom: 120px;
  }

  header.course-profile {
    background: $course-profile-bg;
    @include background-image(url($homepage-bg-image));
    background-size: cover;
    box-shadow: 0 1px 80px 0 rgba(0,0,0, 0.5);
    border-bottom: 1px solid $border-color-3;
    box-shadow: inset 0 1px 5px 0 rgba(0,0,0, 0.1);
    height: 280px;
    margin-top: $header_image_margin;
    padding-top: 150px;
    overflow: hidden;
    position: relative;
    width: 100%;

    .intro-inner-wrapper {
      background: $course-header-bg;
      border: 1px solid $border-color-3;
      box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
      @include box-sizing(border-box);
      @include clearfix;
      margin: 0 auto;
      max-width: 1200px;
      min-width: 760px;
      position: relative;
      z-index: 2;

      > div.table {
        display: table;
        width: 100%;
      }
      .intro {
        @include box-sizing(border-box);
        @include clearfix;
        display: table-cell;
        vertical-align: middle;
        padding: 20px 20px;
        position: relative;
        width: flex-grid(8) + flex-gutter();
        z-index: 2;

        > hgroup {
          border-bottom: 1px solid $border-color-2;
          box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
          margin-bottom: 20px;
          padding-bottom: 20px;
          width: 100%;

          h1 {
            color: $base-font-color;
            font-weight: normal;
            @include inline-block;
            margin: 0;
            letter-spacing: 0px;
            text-align: left;
            text-shadow: 0 1px rgba(255,255,255, 0.6);

            a {
              color: $lighter-base-font-color;
              font: italic 800 0.6em/1em $sans-serif;
              letter-spacing: 0px;
              margin-left: 15px;
              text-shadow: 0 1px rgba(255,255,255, 0.6);
              text-transform: none;

              &:hover {
                color: $link-color;
              }
            }
          }

          h2 {
            @include inline-block;
            margin: 0;

            a {
              color: $lighter-base-font-color;
              font: italic 800 1em/1em $sans-serif;
              letter-spacing: 0px;
              text-shadow: 0 1px rgba(255,255,255, 0.6);
              text-transform: none;

              &:hover {
                color: $link-color;
              }
            }
          }
        }

        .main-cta {
          @include clearfix;
          float: left;
          margin-right: flex-gutter();
          @include transition(all 0.15s linear 0s);
          width: flex-grid(12);

          > a.find-courses, a.register, a.add-to-cart {
            @include button(shiny, $button-color);
            @include box-sizing(border-box);
            border-radius: 3px;
            display: block;
            font: normal 1.2rem/1.6rem $sans-serif;
            letter-spacing: 1px;
            padding: 10px 0px;
            text-transform: uppercase;
            text-align: center;
            width: flex-grid(6);

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

          a {
            &:hover, &:visited {
              text-decoration: none;
            }
          }

          strong {
            @include button(shiny, $button-color);
            @include box-sizing(border-box);
            border-radius: 3px;
            display: block;
            float: left;
            font: normal 1.2rem/1.6rem $sans-serif;
            letter-spacing: 1px;
            padding: 10px 0px;
            text-transform: uppercase;
            text-align: center;
            width: flex-grid(3, 8);

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

          span.register, span.add-to-cart {
            background: $button-archive-color;
            border: 1px solid darken($button-archive-color, 50%);
            @include box-sizing(border-box);
            color: darken($button-archive-color, 50%);
            display: block;
            letter-spacing: 1px;
            padding: 10px 0px 8px;
            text-transform: uppercase;
            text-align: center;
            float: left;
            margin: 1px flex-gutter(8) 0 0;
            @include transition(none);
            width: flex-grid(5, 8);
          }

          #register_error {
            background: $error-red;
            border: 1px solid rgb(202, 17, 17);
            color: rgb(143, 14, 14);
            display: none;
            padding: 12px;
            margin-top: 5px;
          }
        }
      }

      .media {
        background: transparent;
        @include box-sizing(border-box);
        display: table-cell;
        padding: 20px;
        position: relative;
        width: flex-grid(4);
        z-index: 2;

        .hero {
          border: 1px solid $border-color-3;
          height: 100%;
          overflow: hidden;
          position: relative;

          .play-intro {
            @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
            border-radius: 4px;
            box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.4);
            border: 2px solid rgba(255,255,255, 0.8);
            height: 80px;
            left: 50%;
            margin-top: -40px;
            margin-left: -40px;
            position: absolute;
            top: 50%;
            width: 80px;

            &::after {
              color: rgba(255,255,255, 0.8);
              content: "\25B6";
              display: block;
              font: normal 2em/1em $sans-serif;
              left: 50%;
              margin-left: -11px;
              margin-top: -16px;
              position: absolute;
              text-shadow: 0 -1px rgba(0,0,0, 0.8);
              top: 50%;
            }
          }

          img {
            display: block;
            width: 100%;
          }
        }

        &:hover {
          text-decoration: none;

          .play-intro {
            @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
            box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5);
            border-color: rgba(255,255,255, 0.9);

            &::after {
              color: rgba(255,255,255, 1);
            }
          }
        }
      }
    }
  }

  .container {
    @include clearfix;

    nav {
      border-bottom: 1px solid $border-color-2;
      @include box-sizing(border-box);
      @include clearfix;
      margin: 40px 0;
      width: flex-grid(12);

      &::after {
        @extend %faded-hr-divider;
        content: "";
        display: none;
      }

      a {
        border-bottom: 3px solid transparent;
        color: $lighter-base-font-color;
        @include inline-block;
        letter-spacing: 1px;
        margin: 0 15px;
        padding: 0px 5px 15px;
        text-align: center;
        text-transform: lowercase;

        &:first-child {
          margin-left: 0px;
        }

        &:hover, &.active {
          border-color: $border-color-2;
          color: $base-font-color;
          text-decoration: none;
        }
      }
    }
  }

  .details {
    float: left;
    margin-right: flex-gutter();
    width: flex-grid(8);

    .inner-wrapper {
      > section {
        margin-bottom: 40px;
      }

      .course-staff {

        .teacher {
          @include clearfix;
          margin-bottom: 40px;

          h3 {
            color: $base-font-color;
            font-family: $sans-serif;
            font-weight: 700;
            margin-bottom: 15px;
            text-transform: none;
          }

          .teacher-image {
            background: rgb(255,255,255);
            border: 1px solid $border-color-2;
            height: 115px;
            float: left;
            margin: 0 15px 0px 0;
            overflow: hidden;
            padding: 1px;
            width: 115px;

            img {
              display: block;
              min-height: 100%;
              max-width: 100%;
            }
          }
        }
      }

      .prerequisites, .syllabus {
        ul {
          li {
            font: normal 1em/1.6em $serif;
          }
          ul {
            margin: 5px 0px 10px;
          }
        }
      }

      .faq {
        @include clearfix;

        .responses {
          float: left;
        }

        .response {
          margin-bottom: 40px;

          h3 {
            font-family: $sans-serif;
            font-weight: 700;
            margin-bottom: 15px;
          }
        }
      }
    }
  }

  .course-sidebar {
    @include box-sizing(border-box);
    float: left;
    width: flex-grid(4);

    > section {
      box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
      border: 1px solid $border-color-2;

      &.course-summary {
        padding: 16px 20px 30px;
        margin-bottom: 220px;
        border-top: none;
      }

      &.additional-resources {
        padding: 30px;

        .opencourseware {
          text-indent: -9999px;
          background: url('../images/opencourseware.png') 0 0 no-repeat;
          width: 266px;
          height: 31px;
          margin-bottom: 20px;
        }

        ul {
          padding-left: 0;
          margin-bottom: 0;
        }

        li {
          list-style: none;
          padding-left: 29px;
          background: url('../images/link-icon.png') left center no-repeat;
        }
      }
    }

    header {
      margin-bottom: 30px;
      padding-bottom: 16px;
      position: relative;
      text-align: center;

      &::after {
        @extend %faded-hr-divider;
        content: "";
        display: block;
        height: 1px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        z-index: 1;
      }

      a.university-name {
        border-right: 1px solid $border-color-2;
        color: $base-font-color;
        font-family: $sans-serif;
        font-style: italic;
        font-weight: 800;
        @include inline-block;
        letter-spacing: 0px;
        margin-right: 15px;
        padding-right: 15px;

        &:hover {
          color: $lighter-base-font-color;
        }
      }

      .social-sharing {
        @include box-sizing(border-box);
        float: left;
        height: 44px;
        position: relative;
        text-align: center;
        width: flex-grid(12);
        z-index: 2;

        float: none;

        &:hover {
          .sharing-message {
            opacity: 1.0;
            top: 56px;
          }
        }

        .sharing-message {
          @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
                                                            rgba(0,0,0, 0.7) 100%));
          border: 1px solid rgba(0,0,0, 0.5);
          border-radius: 4px;
          box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
          @include box-sizing(border-box);
          color: rgb(255,255,255);
          float: right;
          font-family: $serif;
          font-size: 0.9em;
          font-style: italic;
          left: 50%;
          margin-left: -110px;
          opacity: 0;
          padding: 6px 10px;
          position: absolute;
          text-align: center;
          @include transition(all 0.15s ease-out 0s);
          top: 65px;
          width: 220px;

          &:hover {
            opacity: 0;
          }
        }

        .share {
          height: 44px;
          @include inline-block;
          margin-right: 10px;
          opacity: 0.5;
          @include transition(all 0.15s linear 0s);
          width: 44px;

          &:hover {
            opacity: 1.0;
          }

          img {
            width: 100%;
          }

          &:last-child {
            margin-right: 0px;
          }
        }
      }

      h1 {
        font: 1em $serif;
        letter-spacing: 0;
        color: #999;
        margin-bottom: 0;
      }
    }

    .important-dates {
      list-style: none;
      margin: 0px;
      padding: 0px 10px;

      li {
        @include clearfix;
        border-bottom: 1px dotted $border-color-2;
        margin-bottom: 20px;
        padding-bottom: 10px;

        &.prerequisites {
          border: 1px solid $border-color-2;
          margin: 0 -10px 0;
          padding: 10px;

          p {
            margin-right: 10px;
          }
        }

        &:hover {
          .icon {
            opacity: 1.0;
          }
        }

        p {
          color: $lighter-base-font-color;
          float: left;
          font-family: $sans-serif;
        }

        .icon {
          background-size: cover;
          float: left;
          height: 19px;
          margin: 2px 10px 0 0;
          opacity: 0.6;
          @include transition(all 0.15s linear 0s);
          width: 19px;

          &.start {
            @include background-image(url('../images/portal-icons/calendar-icon.png'));
          }

          &.end {
            @include background-image(url('../images/portal-icons/calendar-icon.png'));
          }

          &.length {
            @include background-image(url('../images/portal-icons/chart-icon.png'));
          }

          &.course-number {
            @include background-image(url('../images/portal-icons/course-info-icon.png'));
          }

          &.effort {
            @include background-image(url('../images/portal-icons/pencil-icon.png'));
          }

          &.prereq {
            @include background-image(url('../images/portal-icons/prerec-icon.png'));
          }
        }

        span {
          float: right;
          font-weight: 700;
        }
      }
    }
  }
}