in progress field layout styling

cms/static/sass/_settings.scss

@@ -64,16 +64,16 @@
       }
 
       &:focus {
+        @include linear-gradient(tint($blue, 80%), tint($blue, 90%));
         border-color: $blue;
         outline: 0;
       }
     }
 
     .field {
-      background: #b6eab1;
       display: inline-block;
       vertical-align: top;
-      min-width: 400px;
+      max-width: 400px;
 
       input {
         display: block;
@@ -87,12 +87,7 @@
           @include clearfix();
 
           div {
-            float: left;
-            margin-right: 20px;
 
-            &:last-child {
-              margin-right: 0;
-            }
           }
 
           .delete-icon {
@@ -102,12 +97,27 @@
           }
         }
 
-        &.element-stacked {
+        .element-stacked {
+
+          div {
+            margin-bottom: 20px;
 
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
         }
 
-        &.element-multi {
+        .element-multi {
+
+          div {
+            float: left;
+            margin-right: 20px;
 
+            &:last-child {
+              margin-right: 0;
+            }
+          }
         }
       }
 
@@ -137,19 +147,29 @@
         }
 
         .row {
-          margin-bottom: 20px;
-          padding: 0;
-          border-bottom: none;
+          margin-bottom: 15px;
+          padding-bottom: 15px;
+          border-bottom: 1px solid $lightGrey;
 
           &:last-child {
             margin-bottom: 0;
+            padding-bottom: 0;
+            border-bottom: none;
           }
 
           .tip {
             color: $mediumGrey;
+            font-size: 13px;
+          }
+
+          .tip-inline {
             display: inline-block;
             margin-left: 10px;
-            font-size: 13px;
+          }
+
+          .tip-stacked {
+            display: block;
+            margin: 10px 0 0 200px;
           }
         }
 
@@ -158,10 +178,7 @@
         }
 
         > section {
-          padding-bottom: 60px;
-          margin-bottom: 40px;
-          border-radius: 3px;
-          border-bottom: 1px solid $lightGrey;
+          margin-bottom: 100px;
           @include clearfix;
 
           header {

cms/templates/settings.html

@@ -92,7 +92,7 @@
               <li><a href="#" class="is-shown" data-section="details">Course Details</a></li>
               <li><a href="#" data-section="staff">Staff</a></li>
               <li><a href="#" data-section="grading">Grading</a></li>
-              <li><a href="#" data-section="handouts">Handouts &amp; Guides</a></li>
+              <li><a href="#" data-section="handouts">Handouts</a></li>
               <li><a href="#" data-section="problems">Problems</a></li>
             </ul>
           </nav>
@@ -119,7 +119,7 @@
               <div class="row">
                 <label>Course Number:</label>
                 <input type="text" class="short course-number-input">
-                <span class="tip">e.g. 101x</span>
+                <span class="tip tip-inline">e.g. 101x</span>
               </div>
               <div class="row">
                 <label>Course Description:</label>
@@ -136,13 +136,13 @@
               <div class="row">
                 <label>Classes Start Date:</label>
                 <input type="text" class="date course-start-date-input">
-                <span class="tip">First day the class begins</span>
+                <span class="tip tip-inline">First day the class begins</span>
               </div>
 
               <div class="row">
                 <label>Classes End Date:</label>
                 <input type="text" class="date course-end-date-input">
-                <span class="tip">Last day of class activty</span>
+                <span class="tip tip-inline">Last day of class activty</span>
               </div> 
 
               <div class="row">
@@ -174,7 +174,7 @@
             <section class="settings-details-marketing">
               <header>
                 <h3>Introducing Your Course</h3>
-                <span class="detail">How your course will be shown to students considering taking it</span>
+                <span class="detail">Information for perspective students</span>
               </header>
 
               <div class="row">
@@ -185,7 +185,7 @@
               <div class="row">
                 <label>Course Statement:</label>
                 <textarea class="long course-shortdescription"></textarea>
-                <span class="tip">Used to introduce your class to perspective students</span>
+                <span class="tip tip-stacked">Used to introduce your class to perspective students</span>
               </div> 
 
               <div class="row">
@@ -243,7 +243,7 @@
                         <span class="label-micro">Textbook URL</span>
                       </div>
 
-                      <!-- <a href="#" class="delete-icon remove-textbook-data"></a> -->
+                      <a href="#" class="delete-icon remove-textbook-data"></a>
                     </li>
                   </ol>
 
@@ -261,11 +261,11 @@
               </header>
 
               <div class="row">
-                <label>Frequently Asked Questions:</label>
+                <label><abbr title="Frequently Asked Questions">FAQs</abbr></label>
 
                 <div class="field">
                   <ol class="input-list course-faq-list">
-                    <li class="element course-faq-list-element">
+                    <li class="element element-stacked course-faq-list-element">
                       <div class="course-faq-question">
                         <input type="text" class="long course-faq-question-input">
                         <span class="label-micro">Question</span>