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/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 {
         }
       }
     }
-
   }
 }