_dashboard.scss

.dashboard {
  @include clearfix;
  padding: 60px 0px 120px;

  .dashboard-banner {
    background: $yellow;
    border: 1px solid rgb(200,200,200);
    @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
    padding: 10px;
    margin-bottom: 30px;

    &:empty {
      display: none;
      background-color: #FFF;
    }

    h2 {
      margin-bottom: 0;
    }

    p {
      margin-bottom: 0;
    }
  }

  .profile-sidebar {
    background: transparent;
    float: left;
    margin-right: flex-gutter();
    width: flex-grid(3);

    header.profile {
      @include background-image(linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)));
      border: 1px solid rgb(200,200,200);
      @include border-radius(4px);
      @include box-sizing(border-box);
      width: flex-grid(12);

      h1.user-name {
        color: $base-font-color;
        font: 700 1.2em/1.2em $sans-serif;
        margin: 0px;
        overflow: hidden;
        padding: 15px 10px 17px;
        text-wrap: nowrap;
        text-overflow: ellipsis;
        text-transform: none;
      }
    }

    .user-info {
      @include clearfix;
      padding: 0px 10px;

      > ul {
        background: rgb(252,252,252);
        border: 1px solid rgb(200,200,200);
        border-top: none;
        //@include border-bottom-radius(4px);
        @include box-sizing(border-box);
        @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
        @include clearfix;
        margin: 0px;
        padding: 20px 10px 10px;
        width: flex-grid(12);

        li {
          @include clearfix;
          border-bottom: 1px dotted rgb(220,220,220);
          list-style: none;
          margin-bottom: 15px;
          padding-bottom: 17px;

          &:hover {
            .title .icon {
              opacity: 1;
            }
          }

          span {
            display: block;
          }

          span.title {
            color: $lighter-base-font-color;
            font-family: $sans-serif;
            font-size: 13px;

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

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

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

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

          span.data {
            color: $lighter-base-font-color;
            font-weight: 700;
            margin-left: 26px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }

  .my-courses {
    float: left;
    margin: 0px;
    width: flex-grid(9);

    > header {
      border-bottom: 1px solid rgb(210,210,210);
      margin-bottom: 30px;
    }

    .empty-dashboard-message {
      padding: 60px 0px;
      text-align: center;

      p {
        color: $lighter-base-font-color;
        font-style: italic;
        margin-bottom: 20px;
        text-shadow: 0 1px rgba(255,255,255, 0.6);
      }

      a {
        background: rgb(240,240,240);
        @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
        border: 1px solid rgb(220,220,220);
        @include border-radius(4px);
        @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
        @include box-sizing(border-box);
        color: $base-font-color;
        font-family: $sans-serif;
        @include inline-block;
        letter-spacing: 1px;
        margin-left: 5px;
        padding: 5px 10px;
        text-shadow: 0 1px rgba(255,255,255, 0.6);

        &:hover {
          color: $blue;
          text-decoration: none;
        }
      }
    }

    .my-course {
      @include border-radius(3px);
      @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
      @include clearfix;
      height: 120px;
      margin-right: flex-gutter();
      margin-bottom: 10px;
      overflow: hidden;
      position: relative;
      width: flex-grid(12);
      z-index: 20;
      @include transition(all, 0.15s, linear);

      &:last-child {
        margin-bottom: none;
      }

      .cover {
        background: rgb(225,225,225);
        background-size: cover;
        background-position: center center;
        border: 1px solid rgb(120,120,120);
        @include border-left-radius(3px);
        @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.6), 1px 0 0 0 rgba(255,255,255, 0.8));
        @include box-sizing(border-box);
        float: left;
        height: 100%;
        max-height: 100%;
        margin: 0px;
        overflow: hidden;
        position: relative;
        @include transition(all, 0.15s, linear);
        width: 200px;

        .shade {
          @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
                                                            rgba(0,0,0, 0.3) 100%));
          bottom: 0px;
          content: "";
          display: block;
          left: 0px;
          position: absolute;
          z-index: 50;
          top: 0px;
          @include transition(all, 0.15s, linear);
          right: 0px;
        }

        .arrow {
          position: absolute;
          z-index: 100;
          width: 100%;
          font-size: 70px;
          line-height: 110px;
          text-align: center;
          text-decoration: none;
          color: rgba(0, 0, 0, .7);
          opacity: 0;
          @include transition(all, 0.15s, linear);
        }

        &:hover {
          .shade {
            background: rgba(255,255,255, 0.3);
            @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
                                                              rgba(0,0,0, 0.3) 100%));
          }
        }
      }

      .info {
        background: rgb(250,250,250);
        @include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(240,240,240)));
        @include box-sizing(border-box);
        border: 1px solid rgb(190,190,190);
        border-left: none;
        @include border-right-radius(3px);
        left: 201px;
        height: 100%;
        max-height: 100%;
        padding: 0px 10px;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 2;

        > hgroup {
          @include clearfix;
          border-bottom: 1px solid rgb(210,210,210);
          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
          padding: 12px 0px;
          width: 100%;

          .university {
            background: rgba(255,255,255, 1);
            border: 1px solid rgb(180,180,180);
            @include border-radius(3px);
            @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.2), 0 1px 0 0 rgba(255,255,255, 0.6));
            color: $lighter-base-font-color;
            display: block;
            font-style: italic;
            font-family: $sans-serif;
            font-size: 16px;
            font-weight: 800;
            @include inline-block;
            margin-right: 10px;
            margin-bottom: 0;
            padding: 5px 10px;
            float: left;
          }

          h3 {
            display: block;
            margin-bottom: 0px;
            overflow: hidden;
            padding-top: 2px;
            text-overflow: ellipsis;
            white-space: nowrap;

            a {
              color: $base-font-color;
              font-weight: 700;
              text-shadow: 0 1px rgba(255,255,255, 0.6);

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

        .course-status {
          background: $yellow;
          border: 1px solid rgb(200,200,200);
          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
          margin-top: 17px;
          margin-right: flex-gutter();
          padding: 5px;
          width: flex-grid(8);
          float: left;
          @include box-sizing(border-box);

          p {
            color: $lighter-base-font-color;
            font-style: italic;
            letter-spacing: 1px;
            text-align: center;
          }
        }

        .course-status-completed {
          background: #ccc;
          color: #fff;

          p {
            color: #222;
          
            span {
              font-weight: bold;
            }
          }
        }

        .enter-course {
          @include button(shiny, $blue);
          @include box-sizing(border-box);
          @include border-radius(3px);
          display: block;
          float: left;
          font: normal 1rem/1.6rem $sans-serif;
          letter-spacing: 1px;
          padding: 6px 0px;
          text-transform: uppercase;
          text-align: center;
          margin-top: 16px;
          width: flex-grid(4);
        }
      }

      > a:hover {
        .cover {
          .shade {
            background: rgba(255,255,255, 0.1);
            @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
            rgba(0,0,0, 0.3) 100%));
          }

          .arrow {
            opacity: 1;
          }
        }

        .info {
          background: darken(rgb(250,250,250), 5%);
          @include background-image(linear-gradient(-90deg, darken(rgb(253,253,253), 3%), darken(rgb(240,240,240), 5%)));
          border-color: darken(rgb(190,190,190), 10%);

          .course-status {
            background: darken($yellow, 3%);
            border-color: darken(rgb(200,200,200), 3%);
            @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
          }

          .course-status-completed {
            background: #888;
            color: #fff;
          }
        }
      }
    }

    .message-status {
      @include border-radius(3px);
      @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
      display: none;
      position: relative;
      top: -15px;
      z-index: 10;
      margin: 0 0 20px 0;
      padding: 15px 20px;
      font-family: "Open Sans", Verdana, Geneva, sans-serif;
      background: #fffcf0;
      border: 1px solid #ccc;
      
      .message-copy {
        margin: 0;

        .grade-value {
          font-size: 1.4rem;
          font-weight: bold;
        }
      }

      .actions {
         @include clearfix;
        list-style: none;
        margin: 15px 0 0 0;
        padding: 0;

        .action {
          float: left;
          margin:0 15px 10px 0;

          .btn, .cta {
            display: inline-block;
          }

          .btn {
            @include button(shiny, $blue);
            @include box-sizing(border-box);
            @include border-radius(3px);
            float: left;
            font: normal 0.8rem/1.2rem $sans-serif;
            letter-spacing: 1px;
            padding: 6px 12px;
            text-align: center;

            &.disabled {
              @include button(shiny, #eee);
              cursor: default !important;

              &:hover {
                background: #eee;
                background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
                background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
                background-image: -ms-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
                background-image: -o-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
                background-image: linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
              }
            }
          }

          .cta {
            @include button(shiny, #666);
            float: left;
            font: normal 0.8rem/1.2rem $sans-serif;
            letter-spacing: 1px;
            padding: 6px 12px;
            text-align: center;
          }
        }
      }

      &.is-shown {
        display: block;
      }

      &.course-status-processing {

      }

      &.course-status-certnotavailable {
        // background: #fee8d6;
      }

      &.course-status-certrendering {
        // background: #d9e7db;

        .cta {
          margin-top: 2px;
        }
      }

      &.course-status-certavailable {
        // background: #d9e7db;
      }
    }


    a.unenroll {
      float: right;
      font-style: italic;
      color: #a0a0a0;
      text-decoration: underline;
      font-size: .8em;
      @include inline-block;
      margin-bottom: 40px;

      &:hover {
        color: #333;
      }
    }

  }
}