Cleaned up unused functions now in bourbon and unused variables

static/css/marketing.css

@@ -735,14 +735,14 @@ section.index-content section.staff h1 {
   margin-top: 25.888px; }
 
 #lean_overlay {
+  background: #000;
+  display: none;
+  height: 100%;
+  left: 0px;
   position: fixed;
-  z-index: 100;
   top: 0px;
-  left: 0px;
-  height: 100%;
   width: 100%;
-  background: #000;
-  display: none; }
+  z-index: 100; }
 
 div.leanModal_box {
   background: #fff;
@@ -772,8 +772,8 @@ div.leanModal_box a.modal_close {
   width: 14px;
   z-index: 2; }
 div.leanModal_box a.modal_close:hover {
-  text-decoration: none;
-  color: #993333; }
+  color: #993333;
+  text-decoration: none; }
 div.leanModal_box h1 {
   border-bottom: 1px solid #eee;
   font-size: 24px;
@@ -786,8 +786,8 @@ div.leanModal_box#enroll {
 div.leanModal_box#enroll ol {
   padding-top: 25.888px; }
 div.leanModal_box#enroll ol li.terms, div.leanModal_box#enroll ol li.honor-code {
-  width: auto;
-  float: none; }
+  float: none;
+  width: auto; }
 div.leanModal_box#enroll ol li div.tip {
   display: none; }
 div.leanModal_box#enroll ol li:hover div.tip {
@@ -828,16 +828,16 @@ div.leanModal_box form ol li.terms, div.leanModal_box form ol li.remember {
   padding-top: 25.888px;
   width: auto; }
 div.leanModal_box form ol li.honor-code {
-  width: auto;
-  float: none; }
+  float: none;
+  width: auto; }
 div.leanModal_box form ol li label {
   display: block;
   font-weight: bold; }
 div.leanModal_box form ol li input[type="email"], div.leanModal_box form ol li input[type="number"], div.leanModal_box form ol li input[type="password"], div.leanModal_box form ol li input[type="search"], div.leanModal_box form ol li input[type="tel"], div.leanModal_box form ol li input[type="text"], div.leanModal_box form ol li input[type="url"], div.leanModal_box form ol li input[type="color"], div.leanModal_box form ol li input[type="date"], div.leanModal_box form ol li input[type="datetime"], div.leanModal_box form ol li input[type="datetime-local"], div.leanModal_box form ol li input[type="month"], div.leanModal_box form ol li input[type="time"], div.leanModal_box form ol li input[type="week"], div.leanModal_box form ol li textarea {
-  width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  width: 100%; }
 div.leanModal_box form ol li input[type="checkbox"] {
   margin-right: 10px; }
 div.leanModal_box form ol li ul {
@@ -904,12 +904,12 @@ div#login header h1 {
   padding-bottom: 0;
   margin-bottom: 6.472px; }
 div#login ol li {
-  width: auto;
-  float: none; }
+  float: none;
+  width: auto; }
 
 div.lost-password {
-  text-align: left;
-  margin-top: 25.888px; }
+  margin-top: 25.888px;
+  text-align: left; }
 div.lost-password a {
   color: #999; }
 div.lost-password a:hover {
@@ -927,11 +927,11 @@ div#apply_name_change ul, div#change_email ul, div#unenroll ul, div#deactivate-a
 div#apply_name_change ul li, div#change_email ul li, div#unenroll ul li, div#deactivate-account ul li {
   margin-bottom: 12.944px; }
 div#apply_name_change ul li textarea, div#apply_name_change ul li input[type="email"], div#apply_name_change ul li input[type="number"], div#apply_name_change ul li input[type="password"], div#apply_name_change ul li input[type="search"], div#apply_name_change ul li input[type="tel"], div#apply_name_change ul li input[type="text"], div#apply_name_change ul li input[type="url"], div#apply_name_change ul li input[type="color"], div#apply_name_change ul li input[type="date"], div#apply_name_change ul li input[type="datetime"], div#apply_name_change ul li input[type="datetime-local"], div#apply_name_change ul li input[type="month"], div#apply_name_change ul li input[type="time"], div#apply_name_change ul li input[type="week"], div#change_email ul li textarea, div#change_email ul li input[type="email"], div#change_email ul li input[type="number"], div#change_email ul li input[type="password"], div#change_email ul li input[type="search"], div#change_email ul li input[type="tel"], div#change_email ul li input[type="text"], div#change_email ul li input[type="url"], div#change_email ul li input[type="color"], div#change_email ul li input[type="date"], div#change_email ul li input[type="datetime"], div#change_email ul li input[type="datetime-local"], div#change_email ul li input[type="month"], div#change_email ul li input[type="time"], div#change_email ul li input[type="week"], div#unenroll ul li textarea, div#unenroll ul li input[type="email"], div#unenroll ul li input[type="number"], div#unenroll ul li input[type="password"], div#unenroll ul li input[type="search"], div#unenroll ul li input[type="tel"], div#unenroll ul li input[type="text"], div#unenroll ul li input[type="url"], div#unenroll ul li input[type="color"], div#unenroll ul li input[type="date"], div#unenroll ul li input[type="datetime"], div#unenroll ul li input[type="datetime-local"], div#unenroll ul li input[type="month"], div#unenroll ul li input[type="time"], div#unenroll ul li input[type="week"], div#deactivate-account ul li textarea, div#deactivate-account ul li input[type="email"], div#deactivate-account ul li input[type="number"], div#deactivate-account ul li input[type="password"], div#deactivate-account ul li input[type="search"], div#deactivate-account ul li input[type="tel"], div#deactivate-account ul li input[type="text"], div#deactivate-account ul li input[type="url"], div#deactivate-account ul li input[type="color"], div#deactivate-account ul li input[type="date"], div#deactivate-account ul li input[type="datetime"], div#deactivate-account ul li input[type="datetime-local"], div#deactivate-account ul li input[type="month"], div#deactivate-account ul li input[type="time"], div#deactivate-account ul li input[type="week"] {
-  display: block;
-  width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  display: block;
+  width: 100%; }
 div#apply_name_change ul li textarea, div#change_email ul li textarea, div#unenroll ul li textarea, div#deactivate-account ul li textarea {
   height: 60px; }
 div#apply_name_change ul li input[type="submit"], div#change_email ul li input[type="submit"], div#unenroll ul li input[type="submit"], div#deactivate-account ul li input[type="submit"] {

templates/sass/base/_base.scss

@@ -35,10 +35,10 @@ img {
 }
 
 #{$all-text-inputs}, textarea {
-  @include box-shadow(0 -1px 0 #fff);
-  @include linear-gradient(#eee, #fff);
   border: 1px solid #999;
+  @include box-shadow(0 -1px 0 #fff);
   font: $body-font-size $body-font-family;
+  @include linear-gradient(#eee, #fff);
   padding: 4px;
 
   &:focus {

templates/sass/base/_extends.scss

 .clearfix:after {
+  clear: both;
   content: ".";
   display: block;
   height: 0;
-  clear: both;
   visibility: hidden;
 }
 
@@ -40,27 +40,27 @@ h1.top-header {
   -webkit-font-smoothing: antialiased;
 
   &:hover, &:focus {
+    border: 1px solid darken(#888, 20%);
     @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
     @include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
-    border: 1px solid darken(#888, 20%);
   }
 }
 
 .light-button, a.light-button {
-  @include box-shadow(inset 0 1px 0 #fff);
-  @include linear-gradient(#fff, lighten(#888, 40%));
-  @include border-radius(3px);
   border: 1px solid #ccc;
-  padding: 4px 8px;
+  @include border-radius(3px);
+  @include box-shadow(inset 0 1px 0 #fff);
   color: #666;
+  cursor: pointer;
   font: normal $body-font-size $body-font-family;
+  @include linear-gradient(#fff, lighten(#888, 40%));
+  padding: 4px 8px;
   text-decoration: none;
-  cursor: pointer;
   -webkit-font-smoothing: antialiased;
 
   &:hover, &:focus {
-    @include linear-gradient(#fff, lighten(#888, 37%));
     border: 1px solid #ccc;
+    @include linear-gradient(#fff, lighten(#888, 37%));
     text-decoration: none;
   }
 }
@@ -70,8 +70,8 @@ h1.top-header {
     color: $mit-red;
 
     &:hover {
-      text-decoration: none;
       color: darken($mit-red, 20%);
+      text-decoration: none;
     }
   }
 }
@@ -110,13 +110,13 @@ h1.top-header {
   }
 
   a {
-    font-style: normal;
     border: none;
+    font-style: normal;
   }
 
   .bottom-border {
-    @include box-shadow(0 1px 0 #eee);
     border-bottom: 1px solid #d3d3d3;
+    @include box-shadow(0 1px 0 #eee);
   }
 
   @media print {
@@ -124,10 +124,10 @@ h1.top-header {
   }
 
   h3 {
-    border: none;
-    border-bottom: 1px solid #d3d3d3;
     @extend .bottom-border;
     background: none;
+    border: none;
+    border-bottom: 1px solid #d3d3d3;
     color: #000;
     font-weight: normal;
     margin: 0;
@@ -172,8 +172,8 @@ h1.top-header {
     position: relative;
 
     h2 {
-      padding-right: 20px;
       margin: 0;
+      padding-right: 20px;
     }
 
     a {
@@ -205,10 +205,10 @@ h1.top-header {
   border-bottom: 1px solid darken($cream, 10%);
   @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
   font-size: 12px;
+  height:46px;
+  line-height: 46px;
   margin: (-$body-line-height) (-$body-line-height) $body-line-height;
   text-shadow: 0 1px 0 #fff;
-  line-height: 46px;
-  height:46px;
 
   @media print {
     display: none;
@@ -242,10 +242,10 @@ h1.top-header {
 }
 
 p.ie-warning {
+  background: yellow;
   display: block !important;
   line-height: 1.3em;
-  background: yellow;
+  margin-bottom: 0;
   padding: lh();
   text-align: left;
-  margin-bottom: 0;
 }

templates/sass/base/_functions.scss

-// Flexible grid
-@function flex-grid($columns, $container-columns: $fg-max-columns) {
-  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
-  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
-  @return percentage($width / $container-width);
-}
-
-// Flexible grid gutter
-@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
-  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
-  @return percentage($gutter / $container-width);
-}
-
-// Percentage of container calculator
-@function perc($width, $container-width: $max-width) {
-  @return percentage($width / $container-width);
-}
-
 // Line-height
 @function lh($amount: 1) {
   @return $body-line-height * $amount;

templates/sass/base/_variables.scss

 // Variables
 // ---------------------------------------- //
 
-// fonts
+// Type
 $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
 $body-font-size: 14px;
-
-// grid
-$columns: 12;
-$column-width: 80px;
-$gutter-width: 25px;
-$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
-
-$gw-column: perc($column-width);
-$gw-gutter: perc($gutter-width);
 $body-line-height: golden-ratio($body-font-size, 1);
 
-//Flexible grid
-$fg-column: $column-width;
-$fg-gutter: $gutter-width;
-$fg-max-columns: $columns;
+// Grid
+$fg-column: 80px;
+$fg-gutter: 25px;
+$fg-max-columns: 12;
 $fg-max-width: 1400px;
 $fg-min-width: 810px;
 
-// color
+// Color
 $light-gray: #ddd;
 $dark-gray: #333;
 $mit-red: #993333;
 $cream: #F6EFD4;
-
 $text-color: $dark-gray;
 $border-color: $light-gray;

templates/sass/courseware/_amplifier.scss

 // JM MOSFET AMPLIFIER
 section.tool-wrapper {
+  @extend .clearfix;
   background: #073642;
-  border-top: 1px solid darken(#002b36, 10%);
   border-bottom: 1px solid darken(#002b36, 10%);
+  border-top: 1px solid darken(#002b36, 10%);
   @include box-shadow(inset 0 0 0 4px darken(#094959, 2%));
-  margin: lh() (-(lh())) 0;
   color: #839496;
-  @extend .clearfix;
   display: table;
+  margin: lh() (-(lh())) 0;
 
   div#graph-container {
     background: none;
@@ -29,24 +29,24 @@ section.tool-wrapper {
 
     ul.ui-tabs-nav {
       background: darken(#073642, 2%);
+      border-bottom: 1px solid darken(#073642, 8%);
+      @include border-radius(0);
       margin: (-(lh())) (-(lh())) 0;
       padding: 0;
       position: relative;
       width: 110%;
-      @include border-radius(0);
-      border-bottom: 1px solid darken(#073642, 8%);
 
       li {
-        margin-bottom: 0;
         background: none;
-        color: #fff;
         border: none;
         @include border-radius(0);
+        color: #fff;
+        margin-bottom: 0;
 
         &.ui-tabs-selected {
-          border-right: 1px solid darken(#073642, 8%);
-          border-left: 1px solid darken(#073642, 8%);
           background-color: #073642;
+          border-left: 1px solid darken(#073642, 8%);
+          border-right: 1px solid darken(#073642, 8%);
 
           &:first-child {
             border-left: none;
@@ -59,10 +59,10 @@ section.tool-wrapper {
 
         a {
           border: none;
+          color: #839496;
           font: bold 12px $body-font-family;
-          text-transform: uppercase;
           letter-spacing: 1px;
-          color: #839496;
+          text-transform: uppercase;
 
           &:hover {
             color: #eee8d5;
@@ -86,18 +86,18 @@ section.tool-wrapper {
     div.graph-controls {
 
       div.music-wrapper {
-        padding: 0 0 lh();
-        margin-bottom: lh();
+        @extend .clearfix;
         border-bottom: 1px solid darken(#073642, 10%);
         @include box-shadow(0 1px 0 lighten(#073642, 2%));
-        @extend .clearfix;
+        margin-bottom: lh();
+        padding: 0 0 lh();
 
         input#playButton {
-          display: block;
-          @include button(simple, lighten( #586e75, 5% ));
-          font: bold 14px $body-font-family;
           border-color: darken(#002b36, 6%);
+          @include button(simple, lighten( #586e75, 5% ));
+          display: block;
           float: right;
+          font: bold 14px $body-font-family;
 
           &:active {
             @include box-shadow(none);
@@ -115,21 +115,21 @@ section.tool-wrapper {
       }
 
       div.inputs-wrapper {
+        @extend .clearfix;
+        border-bottom: 1px solid darken(#073642, 10%);
+        @include box-shadow(0 1px 0 lighten(#073642, 2%));
         @include clearfix;
         margin-bottom: lh();
-        padding: 0 0 lh();
         margin-bottom: lh();
-        border-bottom: 1px solid darken(#073642, 10%);
-        @include box-shadow(0 1px 0 lighten(#073642, 2%));
-        @extend .clearfix;
+        padding: 0 0 lh();
       }
 
       p {
+        font-weight: bold;
         @include inline-block();
         margin: 0;
-        -webkit-font-smoothing: antialiased;
-        font-weight: bold;
         text-shadow: 0 -1px 0 darken(#073642, 10%);
+        -webkit-font-smoothing: antialiased;
       }
 
       ul {
@@ -147,19 +147,19 @@ section.tool-wrapper {
       }
 
       div#graph-listen {
-        margin-top: 8px;
-        margin-right: 20px;
         display: block;
-        text-align: right;
         float: left;
         margin-bottom: 0;
+        margin-right: 20px;
+        margin-top: 8px;
+        text-align: right;
       }
     }
 
     label {
       @include border-radius(2px);
-      font-weight: bold;
       color: #fff;
+      font-weight: bold;
       padding: 3px;
       -webkit-font-smoothing: antialiased;
     }
@@ -188,33 +188,31 @@ section.tool-wrapper {
     }
 
     div.schematic-sliders {
-
       div.top-sliders {
-        padding: 0 0 lh();
-        margin-bottom: lh();
+        @extend .clearfix;
         border-bottom: 1px solid darken(#073642, 10%);
         @include box-shadow(0 1px 0 lighten(#073642, 2%));
-        @extend .clearfix;
-
-      select#musicTypeSelect {
-        @include inline-block();
-        font: 16px $body-font-family;
-        margin-bottom: 0;
-      }
+        margin-bottom: lh();
+        padding: 0 0 lh();
 
-      p {
-        @include inline-block();
-        -webkit-font-smoothing: antialiased;
-        text-shadow: 0 -1px 0 darken(#073642, 10%);
-        margin: 0 lh(.5) lh() 0;
-        font-weight: bold;
-      }
+        select#musicTypeSelect {
+          font: 16px $body-font-family;
+          @include inline-block();
+          margin-bottom: 0;
+        }
 
+        p {
+          font-weight: bold;
+          @include inline-block();
+          margin: 0 lh(.5) lh() 0;
+          text-shadow: 0 -1px 0 darken(#073642, 10%);
+          -webkit-font-smoothing: antialiased;
+        }
       }
 
       div.slider-label {
-        margin-bottom: lh(0.5);
         font-weight: bold;
+        margin-bottom: lh(0.5);
         text-shadow: 0 -1px 0 darken(#073642, 10%);
         -webkit-font-smoothing: antialiased;
       }
@@ -223,10 +221,10 @@ section.tool-wrapper {
         margin-bottom: lh(1);
 
         &.ui-slider-horizontal {
-          height: 0.4em;
           background: darken(#002b36, 2%);
           border: 1px solid darken(#002b36, 8%);
           @include box-shadow(none);
+          height: 0.4em;
         }
 
         .ui-slider-handle {
@@ -243,5 +241,3 @@ section.tool-wrapper {
     }
   }
 }
-
-

templates/sass/courseware/_video.scss

@@ -14,56 +14,53 @@ section.course-content {
     }
   }
 
-  div.video {
-  }
-
   div.video-subtitles {
-    @include clearfix();
-    padding: 6px lh();
-    margin: 0 (-(lh()));
-    border-top: 1px solid #e1e1e1;
-    border-bottom: 1px solid #e1e1e1;
     background: #f3f3f3;
+    border-bottom: 1px solid #e1e1e1;
+    border-top: 1px solid #e1e1e1;
+    @include clearfix();
     display: block;
+    margin: 0 (-(lh()));
+    padding: 6px lh();
 
     div.video-wrapper {
       float: left;
-      width: flex-grid(6, 9);
       margin-right: flex-gutter(9);
+      width: flex-grid(6, 9);
 
       div.video-player {
-        position: relative;
-        padding-bottom: 56.25%;
-        padding-top: 30px;
         height: 0;
         overflow: hidden;
+        padding-bottom: 56.25%;
+        padding-top: 30px;
+        position: relative;
 
         object {
+          height: 100%;
+          left: 0;
           position: absolute;
           top: 0;
-          left: 0;
           width: 100%;
-          height: 100%;
         }
 
         iframe#html5_player {
           border: none;
           display: none;
+          height: 100%;
+          left: 0;
           position: absolute;
           top: 0;
-          left: 0;
           width: 100%;
-          height: 100%;
         }
       }
 
       section.video-controls {
         @extend .clearfix;
         background: #333;
-        position: relative;
         border: 1px solid #000;
         border-top: 0;
         color: #ccc;
+        position: relative;
 
         &:hover {
           ul, div {
@@ -73,12 +70,12 @@ section.course-content {
 
         div#slider {
           @extend .clearfix;
-          @include border-radius(0);
-          @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
           background: #c2c2c2;
           border: none;
-          border-top: 1px solid #000;
           border-bottom: 1px solid #000;
+          @include border-radius(0);
+          border-top: 1px solid #000;
+          @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
           height: 7px;
           @include transition(height 2.0s ease-in-out);
 
@@ -96,54 +93,53 @@ section.course-content {
             font: bold 12px $body-font-family;
             margin-bottom: 6px;
             margin-right: 0;
+            overflow: visible;
             padding: 4px;
             text-align: center;
-            -webkit-font-smoothing: antialiased;
             text-shadow: 0 -1px 0 darken($mit-red, 10%);
-            overflow: visible;
+            -webkit-font-smoothing: antialiased;
 
             &::after {
+              background: $mit-red;
+              border-bottom: 1px solid darken($mit-red, 20%);
+              border-right: 1px solid darken($mit-red, 20%);
+              bottom: -5px;
               content: " ";
-              width: 7px;
-              height: 7px;
               display: block;
-              position: absolute;
-              bottom: -5px;
+              height: 7px;
               left: 50%;
               margin-left: -3px;
+              position: absolute;
               @include transform(rotate(45deg));
-              background: $mit-red;
-              border-right: 1px solid darken($mit-red, 20%);
-              border-bottom: 1px solid darken($mit-red, 20%);
+              width: 7px;
             }
           }
 
           a.ui-slider-handle {
-            @include border-radius(15px);
-            @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
             background: $mit-red url(/static/images/slider-handle.png) center center no-repeat;
+            @include background-size(50%);
             border: 1px solid darken($mit-red, 20%);
+            @include border-radius(15px);
+            @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
             cursor: pointer;
             height: 15px;
             margin-left: -7px;
             top: -4px;
-            width: 15px;
             @include transition(height 2.0s ease-in-out, width 2.0s ease-in-out);
-            @include background-size(50%);
+            width: 15px;
 
             &:focus, &:hover {
               background-color: lighten($mit-red, 10%);
               outline: none;
             }
           }
-
         }
 
         ul.vcr {
-          float: left;
-          margin-right: lh();
           @extend .dullify;
+          float: left;
           list-style: none;
+          margin-right: lh();
           padding: 0;
 
           li {
@@ -151,17 +147,16 @@ section.course-content {
             margin-bottom: 0;
 
             a {
-              @include box-shadow(1px 0 0 #555);
               border-bottom: none;
               border-right: 1px solid #000;
-              display: block;
+              @include box-shadow(1px 0 0 #555);
               cursor: pointer;
-              // height: 14px;
+              display: block;
               line-height: 46px;
               padding: 0 lh(.75);
               text-indent: -9999px;
-              width: 14px;
               @include transition();
+              width: 14px;
 
               &.play {
                 background: url('/static/images/play-icon.png') center center no-repeat;
@@ -178,21 +173,20 @@ section.course-content {
                   background-color: #444;
                 }
               }
-
             }
 
             div#vidtime {
-              padding-left: lh(.75);
               font-weight: bold;
               line-height: 46px; //height of play pause buttons
+              padding-left: lh(.75);
               -webkit-font-smoothing: antialiased;
             }
           }
         }
 
         div.secondary-controls {
-          float: right;
           @extend .dullify;
+          float: right;
 
           div.speeds {
             float: left;
@@ -201,10 +195,11 @@ section.course-content {
               background: url('/static/images/closed-arrow.png') 10px center no-repeat;
               border-left: 1px solid #000;
               border-right: 1px solid #000;
-              display: block;
               @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
               @include clearfix();
+              color: #fff;
               cursor: pointer;
+              display: block;
               line-height: 46px; //height of play pause buttons
               margin-right: 0;
               padding-left: 15px;
@@ -212,30 +207,29 @@ section.course-content {
               @include transition();
               -webkit-font-smoothing: antialiased;
               width: 110px;
-              color: #fff;
 
               &.open {
                 background: url('/static/images/open-arrow.png') 10px center no-repeat;
 
                 ol#video_speeds {
-                  opacity: 1;
                   display: block;
+                  opacity: 1;
                 }
               }
 
               h3 {
                 color: #999;
+                float: left;
                 font-size: 12px;
                 font-weight: normal;
-                float: left;
                 letter-spacing: 1px;
                 padding: 0 lh(.25) 0 lh(.5);
                 text-transform: uppercase;
               }
 
               p.active {
-                font-weight: bold;
                 float: left;
+                font-weight: bold;
                 margin-bottom: 0;
                 padding: 0 lh(.5) 0 0;
               }
@@ -245,14 +239,14 @@ section.course-content {
                 background-color: #444;
                 border: 1px solid #000;
                 @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
-                left: -1px;
                 display: none;
+                left: -1px;
+                opacity: 0;
                 position: absolute;
                 top:0;
+                @include transition();
                 width: 100%;
                 z-index: 10;
-                @include transition();
-                opacity: 0;
 
                 li {
                   border-bottom: 1px solid #000;
@@ -267,20 +261,20 @@ section.course-content {
 
                   &:last-child {
                     border-bottom: 0;
-                    margin-top: 0;
                     @include box-shadow(none);
+                    margin-top: 0;
                   }
 
                   &:hover {
-                    color: #aaa;
                     background-color: #666;
+                    color: #aaa;
                   }
                 }
               }
 
               &:hover {
-                opacity: 1;
                 background-color: #444;
+                opacity: 1;
               }
             }
           }
@@ -299,34 +293,33 @@ section.course-content {
             @include transition();
             width: 30px;
 
-
             &:hover {
+              background-color: #444;
               color: #fff;
               text-decoration: none;
-              background-color: #444;
             }
           }
 
           a.hide-subtitles {
-            float: left;
-            display: block;
-            padding: 0 lh(.5);
-            margin-left: 0;
+            background: url('/static/images/cc.png') center no-repeat;
             color: #797979;
-            line-height: 46px; //height of play pause buttons
-            width: 30px;
-            text-indent: -9999px;
+            display: block;
+            float: left;
             font-weight: 800;
-            background: url('/static/images/cc.png') center no-repeat;
-            -webkit-font-smoothing: antialiased;
-            @include transition();
+            line-height: 46px; //height of play pause buttons
+            margin-left: 0;
             opacity: 1;
+            padding: 0 lh(.5);
             position: relative;
+            text-indent: -9999px;
+            @include transition();
+            -webkit-font-smoothing: antialiased;
+            width: 30px;
 
             &:hover {
+              background-color: #444;
               color: #fff;
               text-decoration: none;
-              background-color: #444;
             }
 
             &.off {
@@ -358,10 +351,10 @@ section.course-content {
 
     ol.subtitles {
       float: left;
-      width: flex-grid(3, 9);
-      padding-top: 10px;
       max-height: 460px;
       overflow: hidden;
+      padding-top: 10px;
+      width: flex-grid(3, 9);
 
       li {
         border: 0;
@@ -398,43 +391,43 @@ section.course-content {
       }
 
       ol.subtitles {
-        width: 0px;
         height: 0;
+        width: 0px;
       }
     }
 
     &.fullscreen {
       background: rgba(#000, .95);
       border: 0;
-      margin: 0;
       bottom: 0;
       height: 100%;
       left: 0;
+      margin: 0;
       max-height: 100%;
+      overflow: hidden;
       padding: 0;
       position: fixed;
       top: 0;
       width: 100%;
       z-index: 999;
-      overflow: hidden;
 
       &.closed {
         ol.subtitles {
-          width: auto;
           height: auto;
           right: -(flex-grid(4));
+          width: auto;
         }
       }
 
       a.exit {
-        position: absolute;
-        top: 20px;
-        left: 20px;
         color: #aaa;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        font-style: 12px;
         display: none;
+        font-style: 12px;
+        left: 20px;
+        letter-spacing: 1px;
+        position: absolute;
+        text-transform: uppercase;
+        top: 20px;
 
         &::after {
           content: "✖";
@@ -453,33 +446,33 @@ section.course-content {
         }
 
         object#myytplayer, iframe {
-          height: 100%;
-          position: fixed;
-          top: 0;
           bottom: 0;
+          height: 100%;
           left: 0;
           overflow: hidden;
+          position: fixed;
+          top: 0;
         }
 
         section.video-controls {
-          position: absolute;
           bottom: 0;
           left: 0;
+          position: absolute;
           width: 100%;
           z-index: 9999;
         }
       }
 
       ol.subtitles {
-        position: fixed;
-        top: 0;
-        right: 0;
+        background: rgba(#000, .8);
         bottom: 0;
         height: 100%;
-        background: rgba(#000, .8);
-        padding: lh();
-        max-width: flex-grid(3);
         max-height: 100%;
+        max-width: flex-grid(3);
+        padding: lh();
+        position: fixed;
+        right: 0;
+        top: 0;
         @include transition();
 
         li {

templates/sass/layout/_calculator.scss

@@ -2,10 +2,10 @@ li.calc-main {
   bottom: -126px;
   left: 0;
   position: fixed;
-  width: 100%;
   @include transition(bottom);
-  z-index: 99;
   -webkit-appearance: none;
+  width: 100%;
+  z-index: 99;
 
   &.open {
     bottom: -36px;
@@ -16,19 +16,19 @@ li.calc-main {
   }
 
   a.calc {
-    @include hide-text;
     background: url("/static/images/calc-icon.png") rgba(#111, .9) no-repeat center;
     border-bottom: 0;
+    @include border-radius(3px 3px 0 0);
     color: #fff;
     float: right;
-    margin-right: 10px;
-    @include border-radius(3px 3px 0 0);
+    height: 20px;
+    @include hide-text;
     @include inline-block;
+    margin-right: 10px;
     padding: 8px 12px;
-    width: 16px;
-    height: 20px;
     position: relative;
     top: -36px;
+    width: 16px;
 
     &:hover {
       opacity: .8;
@@ -41,15 +41,15 @@ li.calc-main {
 
   div#calculator_wrapper {
     background: rgba(#111, .9);
-    position: relative;
-    top: -36px;
     clear: both;
     max-height: 90px;
+    position: relative;
+    top: -36px;
 
     form {
-      padding: lh();
       @extend .clearfix;
       @include box-sizing(border-box);
+      padding: lh();
 
       input#calculator_button {
         background: #111;
@@ -94,20 +94,20 @@ li.calc-main {
         position: relative;
         width: flex-grid(7.5);
 
-      input#calculator_input {
-        border: none;
-        @include box-shadow(none);
-        @include box-sizing(border-box);
-        font-size: 16px;
-        padding: 10px;
-        -webkit-appearance: none;
-        width: 100%;
-
-        &:focus {
-          outline: none;
+        input#calculator_input {
           border: none;
+          @include box-shadow(none);
+          @include box-sizing(border-box);
+          font-size: 16px;
+          padding: 10px;
+          -webkit-appearance: none;
+          width: 100%;
+
+          &:focus {
+            outline: none;
+            border: none;
+          }
         }
-      }
 
         div.help-wrapper {
           position: absolute;
@@ -115,10 +115,10 @@ li.calc-main {
           top: 15px;
 
           a {
+            background: url("/static/images/info-icon.png") center center no-repeat;
+            height: 17px;
             @include hide-text;
             width: 17px;
-            height: 17px;
-            background: url("/static/images/info-icon.png") center center no-repeat;
           }
 
           dl {
@@ -126,14 +126,14 @@ li.calc-main {
             @include border-radius(3px);
             @include box-shadow(0 0 3px #999);
             color: #333;
+            display: none;
             opacity: 0;
             padding: 10px;
             position: absolute;
             right: -40px;
             top: -110px;
-            width: 500px;
-             display: none;
             @include transition();
+            width: 500px;
 
             &.shown {
               opacity: 1;

templates/sass/layout/_footer.scss

@@ -68,11 +68,11 @@ footer {
           }
 
           a {
+            border-bottom: 0;
             display: block;
             height: 29px;
-            width: 28px;
             text-indent: -9999px;
-            border-bottom: 0;
+            width: 28px;
 
             &:hover {
               opacity: .8;

templates/sass/layout/_header.scss

@@ -100,12 +100,12 @@ div.header-wrapper {
           float: left;
 
           a {
+            border: none;
             color: #fff;
             display: block;
+            font-style: normal;
             font-weight: bold;
             padding: 10px lh() 8px;
-            border: none;
-            font-style: normal;
 
             @media screen and (max-width: 1020px) {
               padding: 10px lh(.7) 8px;
@@ -125,10 +125,10 @@ div.header-wrapper {
 
         ul {
           li {
-            padding: auto;
             display: table-cell;
-            width: 16.6666666667%;
+            padding: auto;
             text-align: center;
+            width: 16.6666666667%;
           }
         }
       }

templates/sass/layout/_layout.scss

@@ -2,11 +2,11 @@ html {
   margin-top: 0;
 
   body {
+    background: #f4f4f4; //#f3f1e5
     color: $dark-gray;
     font: $body-font-size $body-font-family;
-    text-align: center;
     margin: 0;
-    background: #f4f4f4; //#f3f1e5
+    text-align: center;
 
     section.main-content {
       @extend .clearfix;
@@ -17,7 +17,6 @@ html {
       @include box-shadow(0 0 4px #dfdfdf);
       @include box-sizing(border-box);
       margin-top: 3px;
-      // overflow: hidden;
 
       @media print {
         border-bottom: 0;
@@ -32,12 +31,12 @@ html {
 
     div.qtip {
      div.ui-tooltip-content {
-       border: none;
        background: rgba(#000, .8);
+       border: none;
        color: #fff;
        font: 12px $body-font-family;
-       margin-top: -30px;
        margin-right: -20px;
+       margin-top: -30px;
       }
     }
 

templates/sass/layout/_leanmodal.scss

 #lean_overlay {
+  background: #000;
+  display: none;
+  height:100%;
+  left: 0px;
   position: fixed;
-  z-index:100;
   top: 0px;
-  left: 0px;
-  height:100%;
   width:100%;
-  background: #000;
-  display: none;
+  z-index:100;
 }
 
 div.leanModal_box {
@@ -31,8 +31,8 @@ div.leanModal_box {
     z-index: 2;
 
     &:hover{
-      text-decoration: none;
       color: $mit-red;
+      text-decoration: none;
     }
   }
 
@@ -55,8 +55,8 @@ div.leanModal_box {
       li {
 
         &.terms, &.honor-code {
-          width: auto;
           float: none;
+          width: auto;
         }
 
         div.tip {
@@ -118,8 +118,8 @@ div.leanModal_box {
         }
 
         &.honor-code {
-          width: auto;
           float: none;
+          width: auto;
         }
 
         label {
@@ -128,8 +128,8 @@ div.leanModal_box {
         }
 
         #{$all-text-inputs}, textarea {
-          width: 100%;
           @include box-sizing(border-box);
+          width: 100%;
         }
 
         input[type="checkbox"] {
@@ -176,15 +176,15 @@ div#login {
 
   ol {
     li {
-      width: auto;
       float: none;
+      width: auto;
     }
   }
 }
 
 div.lost-password {
-  text-align: left;
   margin-top: lh();
+  text-align: left;
 
   a {
     color: #999;
@@ -218,9 +218,9 @@ div#deactivate-account {
       margin-bottom: lh(.5);
 
       textarea, #{$all-text-inputs} {
+        @include box-sizing(border-box);
         display: block;
         width: 100%;
-        @include box-sizing(border-box);
       }
 
       textarea {

templates/sass/wiki/_create.scss

 form#wiki_revision {
   float: left;
-  width: flex-grid(6, 9);
   margin-right: flex-gutter(9);
-	
+  width: flex-grid(6, 9);
+
   label {
     display: block;
     margin-bottom: 7px ;
   }
-  
+
   .CodeMirror-scroll {
     min-height: 550px;
     width: 100%;
   }
+
   .CodeMirror {
     @extend textarea;
     @include box-sizing(border-box);
     font-family: monospace;
     margin-bottom: 20px;
   }
-  
+
   textarea {
     @include box-sizing(border-box);
     margin-bottom: 20px;
@@ -32,25 +33,25 @@ form#wiki_revision {
   }
 
   #submit_delete {
-    @include box-shadow(none);
     background: none;
     border: none;
+    @include box-shadow(none);
     color: #999;
     float: right;
-    text-decoration: underline;
     font-weight: normal;
+    text-decoration: underline;
   }
-  
+
   input[type="submit"] {
     margin-top: 20px;
   }
 }
 
 #wiki_edit_instructions {
+  color: #666;
   float: left;
-  width: flex-grid(3, 9);
   margin-top: lh();
-  color: #666;
+  width: flex-grid(3, 9);
 
   &:hover {
     color: #333;
@@ -58,16 +59,14 @@ form#wiki_revision {
 
   .markdown-example {
     background-color: #e3e3e3;
-    text-shadow: 0 1px 0 #fff;
-
+    line-height: 1.0;
+    margin: 5px 0 7px;
     padding: {
       top: 5px;
       right: 2px;
       bottom: 5px;
       left: 5px;
     }
-
-    margin: 5px 0 7px;
-    line-height: 1.0;
+    text-shadow: 0 1px 0 #fff;
   }
 }

templates/sass/wiki/_sidebar.scss

@@ -3,20 +3,20 @@ div#wiki_panel {
   overflow: auto;
 
   h2 {
-    padding: lh(.5) lh();
+    @extend .bottom-border;
     font-size: 18px;
     margin: 0 ;
-    @extend .bottom-border;
+    padding: lh(.5) lh();
   }
 
   input[type="button"] {
     @extend h3;
-    @include transition();
     color: lighten($text-color, 10%);
     font-size: $body-font-size;
     margin: 0  !important;
     padding: 7px lh();
     text-align: left;
+    @include transition();
     width: 100%;
 
     &:hover {
@@ -28,8 +28,8 @@ div#wiki_panel {
   ul {
     li {
       &.search {
-        @include box-shadow(0 1px 0 #eee);
         border-bottom: 1px solid #d3d3d3;
+        @include box-shadow(0 1px 0 #eee);
         padding: 7px lh();
 
         label {
@@ -49,15 +49,15 @@ div#wiki_panel {
 
   div#wiki_create_form {
     @extend .clearfix;
-    padding: 15px;
     background: #d6d6d6;
     border-bottom: 1px solid #bbb;
+    padding: 15px;
 
     input[type="text"] {
-      margin-bottom: 6px;
+      @include box-sizing(border-box);
       display: block;
+      margin-bottom: 6px;
       width: 100%;
-      @include box-sizing(border-box);
     }
 
     ul {

templates/sass/wiki/_wiki.scss

@@ -7,15 +7,14 @@ div.wiki-wrapper {
     @extend .content;
     position: relative;
 
-
     header {
       @extend .topbar;
-      height:46px;
       @include box-shadow(inset 0 1px 0 white);
+      height:46px;
 
       &:empty {
-        display: none !important;
         border-bottom: 0;
+        display: none !important;
       }
 
       a {
@@ -23,10 +22,10 @@ div.wiki-wrapper {
       }
 
       p {
-        float: left;
-        margin-bottom: 0;
         color: darken($cream, 55%);
+        float: left;
         line-height: 46px;
+        margin-bottom: 0;
         padding-left: lh();
       }
 
@@ -48,8 +47,8 @@ div.wiki-wrapper {
             @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
             color: darken($cream, 80%);
             display: block;
-            font-weight: normal;
             font-size: 12px;
+            font-weight: normal;
             letter-spacing: 1px;
             line-height: 46px;
             margin: 0;
@@ -89,15 +88,15 @@ div.wiki-wrapper {
         width: flex-grid(2.5, 9);
 
         @media screen and (max-width:900px) {
+          border-right: 0;
           display: block;
           width: auto;
-          border-right: 0;
         }
 
         @media print {
+          border-right: 0;
           display: block;
           width: auto;
-          border-right: 0;
         }
       }
 
@@ -106,9 +105,9 @@ div.wiki-wrapper {
     }
 
     section.results {
+      border-left: 1px dashed #ddd;
       @include box-sizing(border-box);
       display: inline-block;
-      border-left: 1px dashed #ddd;
       float: left;
       padding-left: 10px;
       width: flex-grid(6.5, 9);
@@ -123,8 +122,8 @@ div.wiki-wrapper {
 
       @media print {
         display: block;
-        width: auto;
         padding: 0;
+        width: auto;
 
         canvas, img {
           page-break-inside: avoid;
@@ -140,14 +139,15 @@ div.wiki-wrapper {
         }
 
         li {
+          border-bottom: 1px solid #eee;
           list-style: none;
           margin: 0;
           padding: 10px 0;
-          border-bottom: 1px solid #eee;
 
           &:last-child {
             border-bottom: 0;
           }
+
           h3 {
             font-size: 18px;
             font-weight: normal;
@@ -155,6 +155,5 @@ div.wiki-wrapper {
         }
       }
     }
-
   }
 }