.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: 700 1.2em/1.2em $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(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: 20px;
            padding-bottom: 10px;

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

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

              span {
                font-weight: 700;
                margin-left: 12px;
              }
            }

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

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

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

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

  .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: 80px 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 {
      background: rgb(250,250,250);
      @include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(240,240,240)));
      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;
      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.3);
            @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));
          padding: 12px 0px;
          width: 100%;

          a.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-weight: 800;
            @include inline-block;
            margin-right: 10px;
            padding: 5px 10px;
            vertical-align: middle;

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

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

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

              &: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: 16px;
          padding: 5px;

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

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


          .course-work-icon {
            @include background-image(url('/static/images/portal-icons/pencil-icon.png'));
            background-size: cover;
            float: left;
            height: 22px;
            opacity: 0.7;
            width: 22px;
          }

          .complete {
            float: right;

            p {
              color: $lighter-base-font-color;
              font-style: italic;
              @include inline-block;
              text-align: right;
              text-shadow: 0 1px rgba(255,255,255, 0.6);

              .completeness {
                color: $base-font-color;
                font-weight: 700;
                margin-right: 5px;
              }
            }
          }

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

            .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: $blue;
                @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 {
        .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;
          }
        }
      }
    }
  }
}
