New styles for grade bar

templates/profile.html

@@ -155,17 +155,18 @@ $(function() {
         <h1>Course Progress</h1>
       </header>
 
-      <div id="grade-detail-graph"></div>
-      
       <div id="grade">
         %if grade_sheet['grade']:
-          Final Grade <strong>${grade_sheet['grade']}</strong>
+          <p>Final Grade: <strong>${grade_sheet['grade']}</strong></p>
+
           <a rel="leanModal" class="cert_request" href="#cert_request">Request Certificate</a>
         %else:
-          No letter grade has been earned for this course
+          <p> No letter grade has been earned for this course </p>
         %endif
       </div>
 
+      <div id="grade-detail-graph"></div>
+
       <ol class="chapters">
         %for chapter in grade_sheet['courseware_summary']:
         %if not chapter['chapter'] == "hidden":

templates/sass/_profile.scss

@@ -153,6 +153,42 @@ div.profile-wrapper {
       }
     }
 
+    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);
+        display: block;
+        float: right;
+        font-weight: bold;
+        line-height: 1em;
+        margin-top: 9px;
+        @include box-shadow(inset 0 1px 0 lighten($cream, 5%));
+        padding: 8px;
+        text-shadow: 0 1px 0 lighten($cream, 5%);
+      }
+    }
+
     div#grade-detail-graph {
       width: 100%;
       min-height: 300px;