settings - revised grading slider UI cosmetics

cms/static/sass/_settings.scss

@@ -588,6 +588,14 @@
       top: 1px;
       margin-right: 5px;
     }
+
+    .well {
+      padding: 20px;
+      background: $lightGrey;
+      border: 1px solid $mediumGrey;
+      @include border-radius(4px);
+      @include box-shadow(0 1px 1px rgba(0,0,0,0.05) inset)
+    }
   }
 
 
@@ -601,6 +609,7 @@
 
   .grade-controls {
     @include clearfix;
+    width: 642px;
   }
 
   .new-grade-button {
@@ -609,7 +618,7 @@
     display: block;
     width: 29px;
     height: 29px;
-    margin: 4px 10px 0 0;
+    margin: 10px 20px 0 0;
     border-radius: 20px;
     border: 1px solid $darkGrey;
     @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
@@ -627,9 +636,9 @@
   }
 
   .grade-slider {
-    float: right;
-    width: 95%;
-    height: 80px;
+    float: left;
+    width: 580px;
+    margin-bottom: 10px;
 
     .grade-bar {
       position: relative;
@@ -702,6 +711,7 @@
           top: 0;
           height: 50px;     
           text-align: right;
+          @include border-radius(2px);
 
           &:hover,
           &.is-dragging {

cms/templates/settings.html

@@ -399,7 +399,7 @@
 
               <div class="row">
                 
-                <div class="grade-controls course-grading-range">
+                <div class="grade-controls course-grading-range well">
                   <a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
                   <div class="grade-slider">
                     <div class="grade-bar">
@@ -419,24 +419,24 @@
                       <ol class="grades">
                         <li class="bar-a" style="width: 100%;">
                           <span class="letter-grade" contenteditable>A</span>
-                          <span class="range">81-100</span>
+                          <span class="range">90-100</span>
                           <a href="#" class="remove-button">remove</a>
                         </li>
                         <li class="bar-b" style="width: 80%;">
                           <span class="letter-grade" contenteditable>B</span>
-                          <span class="range">71-80</span>
+                          <span class="range">80-89</span>
                           <a href="#" class="drag-bar"></a>
                           <a href="#" class="remove-button">remove</a>
                         </li>
                         <li class="bar-c" style="width: 70%;">
                           <span class="letter-grade" contenteditable>C</span>
-                          <span class="range">0-70</span>
+                          <span class="range">70-79</span>
                           <a href="#" class="drag-bar"></a>
                           <a href="#" class="remove-button">remove</a>
                         </li>
                         <li class="bar-fail" style="width: 50%;">
                           <span class="letter-grade" contenteditable>F</span>
-                          <span class="range">0-50</span>
+                          <span class="range">0-69</span>
                           <a href="#" class="drag-bar"></a>
                           <a href="#" class="remove-button">remove</a>
                         </li>