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

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

    header.profile {
      h1.user-name {
        border: 1px solid rgb(200,200,200);
        @include border-radius(4px);
        @include box-sizing(border-box);
        color: $base-font-color;
        font: bold 1.4rem/1.6rem $sans-serif;
        margin: 0px;
        overflow: hidden;
        padding: 15px 10px 17px;
        text-wrap: nowrap;
        text-overflow: ellipsis;
        text-transform: none;
        width: flex-grid(12);
      }

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

        > ul {
          background: rgb(250,250,250);
          border: 1px solid rgb(220,220,220);
          border-top: none;
          @include border-bottom-radius(4px);
          @include box-sizing(border-box);
          @include clearfix;
          margin: 0px;
          padding: 0px 10px 20px;
          width: flex-grid(12);

          li {
            list-style: none;

            p {
              color: $lighter-base-font-color;
              font: 300 1.2rem/1.6rem $sans-serif;
              text-shadow: 0 1px rgba(255,255,255, 0.8);

              span {
                font-weight: 700;
                margin-left: 5px;
                text-transform: none;
              }
            }
          }
        }
      }
    }
  }

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

    .empty-dashboard-message {
      border-top: 1px solid rgb(210,210,210);
      padding: 80px 0px;
      text-align: center;

      p {
        color: $lighter-base-font-color;
        font-style: italic;
        text-shadow: 0 1px rgba(255,255,255, 0.6);
        -webkit-font-smoothing: antialiased;

        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: 300 1.2rem/1.6rem $sans-serif;
          @include inline-block;
          margin-left: 5px;
          padding: 5px 10px;
          text-shadow: 0 1px rgba(255,255,255, 0.6);
        }
      }
    }

    .my-course {
      background: rgb(250,250,250);
      @include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(243,243,243)));
      border: 1px solid rgb(190,190,190);
      @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 box-sizing(border-box);
      @include clearfix;
      font-size: 0em;
      margin-right: flex-gutter();
      margin-bottom: 25px;
      overflow: hidden;
      position: relative;
      width: flex-grid(12);
      @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-right: 1px solid rgb(150,150,150);
        @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));
        float: left;
        height: 120px;
        margin: 0px;
        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%));
          @include border-radius(4px);
          bottom: 0px;
          content: "";
          display: block;
          left: 0px;
          position: absolute;
          top: 0px;
          @include transition(all, 0.15s, linear);
          right: 0px;
        }

        .arrow {
          border-top: 8px solid;
          border-left: 8px solid;
          border-color: rgba(0,0,0, 0.7);
          @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.8), -1px 0 1px 0 rgba(255,255,255, 0.8));
          content: "";
          display: block;
          height: 55px;
          left: 50%;
          margin-left: -10px;
          margin-top: -30px;
          opacity: 0;
          position: absolute;
          top: 50%;
          @include transform(rotate(-45deg));
          @include transition(all, 0.15s, linear);
          width: 55px;
        }

        &:hover {
          .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%));
          }
        }
      }

      .info {
        left: 201px;
        padding: 0px 10px;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 2;

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

          h2 {
            @include inline-block;
            margin-bottom: 0px;
            vertical-align: middle;

            a {
              color: $base-font-color;
              font: 800 1.6rem/2rem $sans-serif;
              text-shadow: 0 1px rgba(255,255,255, 0.6);
              text-overflow: ellipsis;
              white-space: nowrap;

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

          h3 {
            @include inline-block;
            margin-right: 10px;
            vertical-align: middle;

            a {
              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: italic 800 1.2rem/1.6rem $sans-serif;
              padding: 5px 10px;

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

        .meta {
          @include clearfix;
          position: relative;
          @include transition(opacity, 0.15s, linear);
          width: 100%;

          .course-work-icon {
            background: rgb(200,200,200);
            float: left;
            font: 300 1.2rem/1.6rem $sans-serif;
            height: 22px;
            width: 22px;
          }

          .complete {
            float: right;
            padding-top: 2px;

            p {
              color: $lighter-base-font-color;
              font: italic 1.2rem/1.4rem $serif;
              @include inline-block;
              text-align: right;
              text-shadow: 0 1px rgba(255,255,255, 0.6);
              -webkit-font-smoothing: antialiased;

              .completeness {
                color: $base-font-color;
                font: 700 1.2rem/1.4rem $sans-serif;
                margin-right: 5px;
              }
            }
          }

          .progress {
            @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
            left: 40px;
            position: absolute;
            right: 110px;

            .meter {
              background: rgb(245,245,245);
              border: 1px solid rgb(160,160,160);
              @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
              @include box-sizing(border-box);
              @include border-radius(4px);
              height: 22px;
              margin: 0 auto;
              padding: 2px;
              width: 100%;

              .meter-fill {
                background: rgb(120,120,120);
                @include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
                                                                  transparent 25%,
                                                                  transparent 50%,
                                                                  rgba(255,255,255, 0.15) 50%,
                                                                  rgba(255,255,255, 0.15) 75%,
                                                                  transparent 75%));
                background-size: 40px 40px;
                background-repeat: repeat-x;
                border: 1px solid rgb(115,115,115);
                @include border-radius(4px);
                @include box-sizing(border-box);
                content: "";
                display: block;
                height: 100%;
                width: 60%;
              }
            }
          }
        }
      }

      &:hover {

        .edit {
          background: rgb(220,220,220);
          border-color: rgb(190,190,190);
        }

        .cover {
          opacity: 1;

          .shade, .arrow {
            opacity: 1;
          }
        }

        .meta {
          opacity: 0.9;
        }
      }
    }
  }
}
