Continued style on profile page

profile.html

 <%inherit file="main.html" />
 
+
+<%include file="navigation.html" />
+
+<section class="main-content">
+  <div class="profile-wrapper">
+
+    <section class="course-info">
+      <h1>Course Progress</h1>
+
+      <ol>
+        % for hw in homeworks:
+        <li>
+          <h2>${ hw['chapter'] }</h2>
+
+          <div class="scores">
+            <h3>${ hw['section'] }</h3>
+
+            <ul>
+              % for score in hw['scores']:
+              <li>${ score[0] }/${ score[1] }</li>
+              % endfor
+            </ul>
+          </div>
+        </li>
+        % endfor
+      </ol>
+    </section>
+
+    <section class="user-info">
+
+      <h1>${name}</h1>
+
+      <ul>
+        <li>Forum name: <strong>${username}</strong></li>
+        <li>E-mail: <strong>${email}</strong></li>
+        <li>
+          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Change</a>
+        </li>
+        <li>
+          Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Change</a>
+        </li>
+      </ul>
+
+      <!-- <div><a class="modal" href="#change_password_pop">Reset password</a></div> -->
+
+      <div id="change_password_pop">
+        <h2>Password change</h2>
+        <p>We'll e-mail you a password reset link at ${email}. Follow
+        the link in the confirmation email to change your
+        password.</p>
+
+        <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
+        <input type="submit" id="pwd_reset_button" value="Reset Password" />
+      </div>
+
+    </section>
+  </div>
+</section>
+
 <script>
 var loc=true; // Activate on clicks? Not if already clicked.
 var lang=true;
 $(function() {
       $("#change_location").click(function() {
          log_event("profile", {"type":"location_show", "old":$("#location_sub").text()});
+         $("#change-location").hide();
 
          if(loc) {
            $("#description").html('<div>'+
@@ -18,6 +78,7 @@ $(function() {
            $("#location_sub").html('<input id="id_loc_text" type="text" name="loc_text" />'+
                                    '<input type="button" id="change_loc_button" value="Change" />');
            $("#change_loc_button").click(function() {
+             $("#change-location").show();
               postJSON('/change_setting', {'location':$("#id_loc_text").attr("value")}, function(json) {
                 $("#location_sub").text(json.location);
                 loc=true;
@@ -61,59 +122,3 @@ $(function() {
 });
 
 </script>
-
-<%include file="navigation.html" />
-
-<section class="main-content">
-  <div class="profile-wrapper">
-    <section class="user-info">
-
-      <h1>${name}</h1>
-
-      <ul>
-        <li>Forum name: ${username}</li>
-        <li>E-mail: ${email}</li>
-        <li>
-          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Change</a>
-        </li>
-        <li>
-          Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Change</a>
-        </li>
-      </ul>
-
-      <!-- <div><a class="modal" href="#change_password_pop">Reset password</a></div> -->
-
-      <div id="change_password_pop">
-        <h2>Password change</h2>
-        <p>We'll e-mail you a password reset link at ${email}. Follow
-        the link in the confirmation email to change your
-        password.</p>
-
-        <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
-        <input type="submit" id="pwd_reset_button" value="Reset Password" />
-      </div>
-
-    </section>
-
-    <section class="course-info">
-      <h1>Course Progress</h1>
-
-      <!-- <div id="description"></div> -->
-
-      <ol>
-        % for hw in homeworks:
-        <li>
-          <h2>${ hw['chapter'] }</h2>
-          <h3>${ hw['section'] }</h3>
-
-          <ul>
-            % for score in hw['scores']:
-            <li>${ score[0] }/${ score[1] }</li>
-            % endfor
-          </ul>
-        </li>
-        % endfor
-      </ol>
-    </section>
-  </div>
-</section>

sass/_profile.scss

 div.profile-wrapper {
   @extend .table-wrapper;
+  color: #000;
 
   section.user-info {
     @extend .sidebar;
-    padding: lh();
+    @include border-radius(0px 4px 0px 4px);
+    border-left: 1px solid #d3d3d3;
+    border-right: 0;
+
+    h1 {
+      padding: lh();
+    }
 
     ul {
       list-style: none;
 
       li {
-        margin-bottom: lh(.5);
+        @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;
       }
     }
 
-    div #change_password_pop {
-      border-top: 1px;
+    div#change_password_pop {
+      padding: 7px lh();
     }
   }
 
@@ -23,15 +36,39 @@ div.profile-wrapper {
 
     ol {
       list-style: none;
-    }
 
-    ul {
-      list-style: none;
+      > li {
+        border-bottom: 1px solid #e3e3e3;
+        padding: lh() 0;
+        @extend .clearfix;
 
-      li {
-        display: inline-block;
-        padding-right: 1em;
+        h2 {
+          float: left;
+          padding: 0;
+          margin: 0;
+          width: flex-grid(2, 9);
+          margin-right: flex-gutter(9);
+        }
+
+        div.scores {
+          float: left;
+          width: flex-grid(7, 9);
+
+          h3 {
+            color: #666;
+          }
+
+          ul {
+            list-style: none;
+
+            li {
+              display: inline-block;
+              padding-right: 1em;
+            }
+          }
+        }
       }
     }
+
   }
 }