div.profile-wrapper {
  @extend .table-wrapper;
  color: #000;

  section.user-info {
    @extend .sidebar;
    @include border-radius(0px 4px 4px 0);
    border-left: 1px solid #d3d3d3;
    border-right: 0;

    header {
      padding: lh(.5) lh();
      margin: 0 ;
      @extend .bottom-border;

      h1 {
        font-size: 18px;
        margin: 0;
        padding-right: 30px;
      }

      a {
        position: absolute;
        top: 13px;
        right: lh(.5);
        text-transform: uppercase;
        font-size: 12px;
        color: #999;

        &:hover {
          color: #555;
        }
      }
    }

    ul {
      list-style: none;

      li {
        @include transition();
        color: lighten($text-color, 10%);
        display: block;
        text-decoration: none;
        @include box-shadow(0 1px 0 #eee);
        padding: 7px lh();
        border-bottom: 1px solid #d3d3d3;
        position: relative;

        div#location_sub, div#language_sub {
          font-weight: bold;
          @include inline-block();

          form {
            width: 100%;
          }

          input {

            &[type="text"] {
              margin: lh(.5) 0;
              width: 100%;
              @include box-sizing(border-box);
            }

            &[type="input"]{
            }
          }

          &:empty {
            padding: 0;
          }
        }

        div#description {
          font-size: 12px;
        }

        a#change_language,
        a#change_location,
        a.edit-email,
        a.name-edit,
        a.email-edit {
          position: absolute;
          top: 9px;
          right: lh(.5);
          text-transform: uppercase;
          font-size: 12px;
          color: #999;

          &:hover {
            color: #555;
          }
        }

        p {
          font-size: 12px;
          margin-bottom: 0;
          margin-top: 4px;
          color: #999;
        }

        a.deactivate {
          color: #aaa;
          font-style: italic;
        }

        input#pwd_reset_button {
          background: none;
          border: none;
          @include box-shadow(none);
          color: #999;
          font-size: 12px;
          font-weight: normal;
          margin: 0;
          padding: 0;
          position: absolute;
          right: lh(.5);
          text-transform: uppercase;
          top: 9px;

          &:hover {
            color: #555;
          }
        }
      }
    }

    div#change_password_pop {
      border-bottom: 1px solid #d3d3d3;
      @include box-shadow(0 1px 0 #eee);
      color: #4D4D4D;
      padding: 7px lh();

      h2 {
        margin-top: 0;
        font-weight: bold;
        text-transform: uppercase;
        font-size: $body-font-size;
      }
    }
  }

  section.course-info {
    @extend .content;

    header {
      @extend h1.top-header;
      @extend .clearfix;

      h1 {
        margin: 0;
        float: left;
      }
    }

    div#grade {
      @include clearfix;
      @extend .topbar;
      padding-left: lh();
      padding-right: lh();

      p {
        color: darken($cream, 80%);
        float: left;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;

        strong {
          font-size: 18px;
          position: relative;
          top: 1px;
        }
      }

      a {
        background-color: darken($cream, 10%);
        border: 1px solid darken($cream, 30%);
        @include border-radius(3px);
        @include box-shadow(inset 0 1px 0 lighten($cream, 5%));
        display: block;
        float: right;
        font-weight: bold;
        line-height: 1em;
        margin-left: 10px;
        margin-top: 9px;
        padding: 8px;
        text-shadow: 0 1px 0 lighten($cream, 5%);
      }
    }

    div#grade-detail-graph {
      width: 100%;
      min-height: 300px;
    }

    > ol {
      border-top: 1px solid #e3e3e3;
      list-style: none;
      margin-top: lh();

      > li {
        @extend .clearfix;
        border-bottom: 1px solid #e3e3e3;
        display: table;
        padding: lh() 0;
        width: 100%;

        &:last-child {
          border-bottom: 0px;
        }

        h2 {
          border-right: 1px dashed #ddd;
          @include box-sizing(border-box);
          display: table-cell;
          margin: 0;
          padding: 0;
          padding-right: flex-gutter(9);
          width: flex-grid(2, 9);
        }

        ol.sections {
          display: table-cell;
          list-style: none;
          padding-left: flex-gutter(9);
          width: flex-grid(7, 9);

          > li {
            padding:0 0 lh() 0;

            &:first-child {
              padding-top: 0;
            }

            &:last-child {
              border-bottom: 0;
            }

            h3 {
              color: #666;
            }

            ol {
              list-style: none;

              li {
                display: inline-block;
                padding-right: 1em;
              }
            }
          }
        }
      }
    }
  }
}
