From 3176123c7c2d1a34798c07f6a3fd3d033c7c75dc Mon Sep 17 00:00:00 2001
From: Reda Lemeden <reda@thoughtbot.com>
Date: Mon, 13 Feb 2012 18:52:00 -0500
Subject: [PATCH 01/10] Started redesigning the question filtering and
 navigation

---
 sass/_askbot-original.scss      |  20 ++---
 sass/_discussion-questions.scss | 129 +++++++++++++++++++++++---------
 sass/_discussion.scss           |  88 +++-------------------
 sass/_question-view.scss        |   1 +
 4 files changed, 114 insertions(+), 124 deletions(-)

diff --git a/sass/_askbot-original.scss b/sass/_askbot-original.scss
index a1ff71cb0e..811be0496c 100644
--- a/sass/_askbot-original.scss
+++ b/sass/_askbot-original.scss
@@ -650,17 +650,17 @@ body.anon #searchBar {
 //   padding-top: 6px;
 //   font-family: 'Yanone Kaffeesatz',sans-serif; }
 
-#listSearchTags {
-  float: left;
-  margin-top: 3px;
-  color: #707070;
-  font-size: 16px;
-  font-family: 'Yanone Kaffeesatz',sans-serif; }
+// #listSearchTags {
+//   float: left;
+//   margin-top: 3px;
+//   color: #707070;
+//   font-size: 16px;
+//   font-family: 'Yanone Kaffeesatz',sans-serif; }
 
-ul#searchTags {
-  margin-left: 10px;
-  float: right;
-  padding-top: 2px; }
+// ul#searchTags {
+//   margin-left: 10px;
+//   float: right;
+//   padding-top: 2px; }
 
 // .search-tips {
 //   font-size: 16px;
diff --git a/sass/_discussion-questions.scss b/sass/_discussion-questions.scss
index a776c316d4..eb0d0aedf3 100644
--- a/sass/_discussion-questions.scss
+++ b/sass/_discussion-questions.scss
@@ -1,55 +1,112 @@
-div.question-controls {
+div.question-list-header {
   display: block;
-  margin-bottom: 30px;
+  margin-bottom: 15px;
   overflow: hidden;
   width: flex-grid(9,9);
 
-  div {
-    display: inline-block;
-  }
+  section.question-list-meta, section.question-sort-filter {
+    display: block;
+    overflow: hidden;
+    width: 100%;
 
-  div.question-count {
-    margin-right: flex-gutter();
-    width: flex-grid(4,9);
-
-    h1 {
-      margin-top: 0;
+    div {
+      display: inline;
+      float: left;
     }
   }
 
-  div.question-sort {
-    vertical-align: bottom;
-    width: flex-grid(5,9);
+  section.question-list-meta {
+    div.question-list-title {
+      margin-right: flex-gutter();
+      // width: flex-grid(3,9);
 
-    nav {
-      @include border-radius(35px);
-      background-color: lighten(#F6EFD4, 5%) ;
-      height: 30px;
-      float: right;
-      font-size: 16px;
-      margin: 3px 0;
-      padding:0px 20px 5px;
+      h1 {
+        margin-top: 0;
+      }
+    }
 
-      a {
-        color: darken(#F6EFD4, 50%);
+    div.question-list-tags {
+      // width: flex-grid(6,9);
+      padding-top:8px;
 
-        &.on span{
-          font-weight: bold;
-        }
+      ul.tags {
+        display: inline;
+        // float: left;
 
-        &:before {
-          content: '|';
-          color: darken(#F6EFD4, 10%);
-          font-size: 22px;
-        }
+        li {
+          span.delete-icon, div.delete-icon {
+            @include border-radius(0 4px 4px 0);
+            background: #555;
+            color: #eee;
+            cursor: pointer;
+            float: none;
+            left: 10px;
+            padding: 3px 6px;
+            position: relative;
+            top: 1px;
+            opacity: 0.5;
 
-        &:hover {
-          text-decoration: none;
-          color: darken(#F6EFD4, 70%);
+            &:hover {
+              opacity: 1;
+            }
+          }
         }
       }
     }
   }
+  section.question-sort-filter {
+    font-size: 16px;
+
+    span.label {
+      color: #555;
+    }
+
+    div.question-filter {
+      margin-right: flex-gutter(9);
+
+      ul.scope-filters {
+        @extend .action-link;
+
+        li {
+          display: inline;
+
+          a {
+            &.on {
+              font-weight: bold;
+            }
+
+            &:before {
+              content: '|';
+              color: darken(#F6EFD4, 10%);
+              font-size: 22px;
+            }
+          }
+        }
+      }
+    }
+
+    div.question-sort {
+      margin-left: flex-gutter();
+      float: right;
+
+      nav {
+        @extend .action-link;
+
+        a {
+          &.on span{
+            font-weight: bold;
+          }
+
+          &:before {
+            content: '|';
+            color: darken(#F6EFD4, 10%);
+            font-size: 22px;
+          }
+        }
+      }
+    }
+  }
+
 }
 
 ul.question-list {
@@ -75,7 +132,7 @@ ul.question-list {
 
         h2 {
           font-size: 16px;
-          font-weight: normal;
+          font-weight: bold;
           margin: 0px 0 15px 0;
           text-transform: none;
         }
diff --git a/sass/_discussion.scss b/sass/_discussion.scss
index 58250f9b73..111d23bff0 100644
--- a/sass/_discussion.scss
+++ b/sass/_discussion.scss
@@ -17,73 +17,19 @@
     text-decoration: none;
   }
 }
+.action-link {
+  a {
+    color: darken(#F6EFD4, 50%);
+
+    &:hover {
+      text-decoration: none;
+      color: darken(#F6EFD4, 70%);
+    }
+  }
+}
 
 // Layout
 body.askbot {
-  .secondary-nav {
-    margin: 0;
-
-    nav {
-      @extend .clearfix;
-      @extend .topbar;
-      @extend .wrapper;
-      @include box-sizing(border-box);
-      border: 1px solid darken(#F6EFD4, 10%);
-      border-top: 0;
-      margin: 0 auto;
-      padding: $body-line-height;
-
-      div {
-        float: left;
-
-        &.question-filter {
-          font-size:16px;
-          margin-top: 4px;
-          width: flex-grid(4);
-
-          ul {
-            @include border-radius(35px);
-            background: darken(#F6EFD4, 20%);
-            display: inline;
-            margin: 0 0 0 10px;
-            padding: $body-line-height/4 20px;
-
-            li {
-              display: inline-block;
-              list-style: none;
-              margin-right: 10px;
-
-              &:last-child {
-                margin-right: 0;
-              }
-
-              a {
-                text-transform: capitalize;
-                text-shadow: none;
-                font-size: 14px;
-
-                &.on {
-                  font-weight: bold;
-                }
-              }
-            }
-          }
-        }
-
-        &.search-box {
-          margin-left:2%;
-          text-align:right;
-          width: flex-grid(8);
-
-          input[type="text"] {
-            margin-right: 6px;
-            width: flex-grid(2,8);
-          }
-        }
-
-      }
-    }
-  }
 
   section.main-content {
     div.discussion-wrapper {
@@ -149,18 +95,4 @@ body.askbot {
     }
   }
 
-  // footer {
-  //   margin: 0 auto;
-  //   padding: 0;
-
-  //   div.footer-wrapper {
-  //     @extend .clearfix;
-  //     @extend .wrapper;
-  //     @include box-shadow(0 1px 0 #fff);
-  //     @include box-sizing(border-box);
-  //     background-color: #000;
-  //     border-top: 0;
-  //     padding: $gw-gutter/2;
-  //   }
-  // }
 }
diff --git a/sass/_question-view.scss b/sass/_question-view.scss
index 1fae85f023..090551b052 100644
--- a/sass/_question-view.scss
+++ b/sass/_question-view.scss
@@ -93,6 +93,7 @@ div.question-header {
         float: left;
         margin-right: flex-gutter(8);
         width: flex-grid(6.2,8);
+
       }
 
       div.post-update-container {

From 48650b131b97634ad621bbfb0deb9dc30f3e1383 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Tue, 14 Feb 2012 11:31:23 -0500
Subject: [PATCH 02/10] Changed amazon link

---
 index.html       | 2 +-
 sass/_index.scss | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/index.html b/index.html
index ff32f6a336..3cbb0bf84d 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
 
       <p>If you successfully complete the course, you will receive an electronic certificate of accomplishment from <em>MITx</em>. This certificate will indicate that you earned it from <em>MITx&rsquo;s</em> pilot course. In this prototype version, <em>MITx</em> will not require that you be tested in a testing center or otherwise have your identity certified in order to receive this certificate.</p>
 
-<p>The course uses the textbook Foundations of Analog and Digital Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Kaufmann Publishers, Elsevier, July 2005.  While recommended, the book is not required: relevant sections will be provided electronically as part of the online course for personal use in connection with this course only. The copyright for the book is owned by Elsevier. The book can be purchased on <a href="http://www.amazon.com/exec/obidos/ASIN/1558607358/ref=nosim" target="_blank">Amazon</a>.</p>
+<p>The course uses the textbook Foundations of Analog and Digital Electronic Circuits, by Anant Agarwal and Jeffrey H. Lang. Morgan Kaufmann Publishers, Elsevier, July 2005.  While recommended, the book is not required: relevant sections will be provided electronically as part of the online course for personal use in connection with this course only. The copyright for the book is owned by Elsevier. The book can be purchased on <a href="http://www.amazon.com/exec/obidos/ASIN/1558607358/ref=nosim/mitopencourse-20" target="_blank">Amazon</a>.</p>
     </section>
 
     <section class="requirements">
diff --git a/sass/_index.scss b/sass/_index.scss
index d579eb8ea6..163c46305e 100644
--- a/sass/_index.scss
+++ b/sass/_index.scss
@@ -57,9 +57,6 @@ header.announcement {
       background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
     }
 
-    // @media screen and (max-width: 1199px) {
-    // }
-
     div {
       padding: lh(10) lh() lh(3);
 

From 7e0d9b0d4349a148ff784a163ebbf62f5e8d0edc Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Tue, 14 Feb 2012 11:40:23 -0500
Subject: [PATCH 03/10] Update bourbon

--HG--
branch : kf-refactor-scss
---
 bourbon/_bourbon.scss                         |  29 ++
 bourbon/addons/_button.scss                   | 267 ++++++++++++++++++
 bourbon/addons/_font-family.scss              |   5 +
 bourbon/addons/_html5-input-types.scss        |  36 +++
 bourbon/addons/_position.scss                 |  30 ++
 bourbon/addons/_timing-functions.scss         |  32 +++
 bourbon/css3/_animation.scss                  | 171 +++++++++++
 bourbon/css3/_appearance.scss                 |   7 +
 bourbon/css3/_background-image.scss           |  71 +++++
 bourbon/css3/_background-size.scss            |  15 +
 bourbon/css3/_border-image.scss               |   7 +
 bourbon/css3/_border-radius.scss              |  59 ++++
 bourbon/css3/_box-shadow.scss                 |  16 ++
 bourbon/css3/_box-sizing.scss                 |   8 +
 bourbon/css3/_columns.scss                    |  67 +++++
 bourbon/css3/_flex-box.scss                   |  67 +++++
 bourbon/css3/_inline-block.scss               |  10 +
 bourbon/css3/_linear-gradient.scss            |  41 +++
 bourbon/css3/_radial-gradient.scss            |  22 ++
 bourbon/css3/_transform.scss                  |  19 ++
 bourbon/css3/_transition.scss                 | 104 +++++++
 .../_deprecated-webkit-gradient.scss          |  36 +++
 bourbon/functions/_grid-width.scss            |  13 +
 bourbon/functions/_linear-gradient.scss       |  23 ++
 bourbon/functions/_modular-scale.scss         |  40 +++
 bourbon/functions/_radial-gradient.scss       |  15 +
 bourbon/functions/_tint-shade.scss            |   9 +
 bourbon/lib/bourbon.rb                        |  19 ++
 bourbon/lib/bourbon/sass_extensions.rb        |   6 +
 .../lib/bourbon/sass_extensions/functions.rb  |  13 +
 .../sass_extensions/functions/compact.rb      |  13 +
 sass/application.scss                         |   1 -
 32 files changed, 1270 insertions(+), 1 deletion(-)
 create mode 100644 bourbon/_bourbon.scss
 create mode 100644 bourbon/addons/_button.scss
 create mode 100644 bourbon/addons/_font-family.scss
 create mode 100644 bourbon/addons/_html5-input-types.scss
 create mode 100644 bourbon/addons/_position.scss
 create mode 100644 bourbon/addons/_timing-functions.scss
 create mode 100644 bourbon/css3/_animation.scss
 create mode 100644 bourbon/css3/_appearance.scss
 create mode 100644 bourbon/css3/_background-image.scss
 create mode 100644 bourbon/css3/_background-size.scss
 create mode 100644 bourbon/css3/_border-image.scss
 create mode 100644 bourbon/css3/_border-radius.scss
 create mode 100644 bourbon/css3/_box-shadow.scss
 create mode 100644 bourbon/css3/_box-sizing.scss
 create mode 100644 bourbon/css3/_columns.scss
 create mode 100644 bourbon/css3/_flex-box.scss
 create mode 100644 bourbon/css3/_inline-block.scss
 create mode 100644 bourbon/css3/_linear-gradient.scss
 create mode 100644 bourbon/css3/_radial-gradient.scss
 create mode 100644 bourbon/css3/_transform.scss
 create mode 100644 bourbon/css3/_transition.scss
 create mode 100644 bourbon/functions/_deprecated-webkit-gradient.scss
 create mode 100644 bourbon/functions/_grid-width.scss
 create mode 100644 bourbon/functions/_linear-gradient.scss
 create mode 100644 bourbon/functions/_modular-scale.scss
 create mode 100644 bourbon/functions/_radial-gradient.scss
 create mode 100644 bourbon/functions/_tint-shade.scss
 create mode 100644 bourbon/lib/bourbon.rb
 create mode 100644 bourbon/lib/bourbon/sass_extensions.rb
 create mode 100644 bourbon/lib/bourbon/sass_extensions/functions.rb
 create mode 100644 bourbon/lib/bourbon/sass_extensions/functions/compact.rb

diff --git a/bourbon/_bourbon.scss b/bourbon/_bourbon.scss
new file mode 100644
index 0000000000..447167c5ab
--- /dev/null
+++ b/bourbon/_bourbon.scss
@@ -0,0 +1,29 @@
+// Custom Functions
+@import "functions/deprecated-webkit-gradient";
+@import "functions/grid-width";
+@import "functions/modular-scale";
+@import "functions/tint-shade";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/background-image";
+@import "css3/background-size";
+@import "css3/border-image";
+@import "css3/border-radius";
+@import "css3/box-shadow";
+@import "css3/box-sizing";
+@import "css3/columns";
+@import "css3/flex-box";
+@import "css3/inline-block";
+@import "css3/linear-gradient";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/font-family";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/timing-functions";
diff --git a/bourbon/addons/_button.scss b/bourbon/addons/_button.scss
new file mode 100644
index 0000000000..1d32125140
--- /dev/null
+++ b/bourbon/addons/_button.scss
@@ -0,0 +1,267 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+  @if type-of($style) == color {
+    $base-color: $style;
+    $style: simple;
+  }
+
+  // Grayscale button
+  @if $base-color == grayscale($base-color) {
+    @if $style == simple {
+      @include simple($base-color, $grayscale: true);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color, $grayscale: true);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color, $grayscale: true);
+    }
+  }
+
+  // Colored button
+  @else {
+    @if $style == simple {
+      @include simple($base-color);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color);
+    }
+  }
+}
+
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
+  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
+  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
+  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border;
+  @include border-radius (3px);
+  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font-size: 11px;
+  font-weight: bold;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+    }
+
+    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+  }
+
+  &:active {
+    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+    @if $grayscale == true {
+      $border-active:       grayscale($border-active);
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    border: 1px solid $border-active;
+    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+  }
+}
+
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+  $fourth-stop:   adjust-color($base-color, $red: -79,  $green: -70,  $blue: -46);
+  $inset-shadow:  adjust-color($base-color, $red:  37,  $green:  29,  $blue:  12);
+  $second-stop:   adjust-color($base-color, $red: -56,  $green: -50,  $blue: -33);
+  $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+  $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $border-bottom: grayscale($border-bottom);
+    $fourth-stop:   grayscale($fourth-stop);
+    $inset-shadow:  grayscale($inset-shadow);
+    $second-stop:   grayscale($second-stop);
+    $text-shadow:   grayscale($text-shadow);
+    $third-stop:    grayscale($third-stop);
+  }
+
+  border: 1px solid $border;
+  border-bottom: 1px solid $border-bottom;
+  @include border-radius(5px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font-size: 14px;
+  font-weight: bold;
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  padding: 7px 20px 8px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 1px $text-shadow;
+
+  &:hover {
+    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+    @if $grayscale == true {
+      $first-stop-hover:  grayscale($first-stop-hover);
+      $second-stop-hover: grayscale($second-stop-hover);
+      $third-stop-hover:  grayscale($third-stop-hover);
+      $fourth-stop-hover: grayscale($fourth-stop-hover);
+    }
+
+    cursor: pointer;
+    @include linear-gradient(top, $first-stop-hover  0%,
+                                  $second-stop-hover 50%,
+                                  $third-stop-hover  50%,
+                                  $fourth-stop-hover 100%);
+  }
+
+  &:active {
+    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+    @if $grayscale == true {
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
+    @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+  }
+}
+
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
+  $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
+  $border-top:    adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+  $inset-shadow:  adjust-color($base-color, $hue: -1, $saturation: -1%,  $lightness:  7%);
+  $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
+  $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
+
+  @if lightness($base-color) > 70% {
+    $color:       hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @if $grayscale == true {
+    $border-bottom: grayscale($border-bottom);
+    $border-sides:  grayscale($border-sides);
+    $border-top:    grayscale($border-top);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
+  border: 1px solid $border-top;
+  border-color: $border-top $border-sides $border-bottom;
+  @include border-radius(16px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+  color: $color;
+  display: inline;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 1;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 3px 16px 5px;
+  text-align: center;
+  text-shadow: 0 -1px 1px $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
+    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
+    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
+    $border-top:          adjust-color($base-color, $hue: -1, $saturation: -17%,   $lightness: -21%);
+    $inset-shadow-hover:  adjust-color($base-color,           $saturation: -1%,    $lightness:  3%);
+    $stop-gradient-hover: adjust-color($base-color, $hue:  8, $saturation: -4%,    $lightness: -15.5%);
+    $text-shadow-hover:   adjust-color($base-color, $hue:  5, $saturation: -5%,    $lightness: -22%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $border-bottom:       grayscale($border-bottom);
+      $border-sides:        grayscale($border-sides);
+      $border-top:          grayscale($border-top);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+      $text-shadow-hover:   grayscale($text-shadow-hover);
+    }
+
+    border: 1px solid $border-top;
+    border-color: $border-top $border-sides $border-bottom;
+    @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+    text-shadow: 0 -1px 1px $text-shadow-hover;
+    -webkit-background-clip: padding-box;
+  }
+
+  &:active {
+    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
+    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
+    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
+    $inset-shadow-active:  adjust-color($base-color, $hue: 9,  $saturation:  2%,   $lightness: -21.5%);
+    $text-shadow-active:   adjust-color($base-color, $hue: 5,  $saturation: -12%,  $lightness: -21.5%);
+
+    @if $grayscale == true {
+      $active-color:         grayscale($active-color);
+      $border-active:        grayscale($border-active);
+      $border-bottom-active: grayscale($border-bottom-active);
+      $inset-shadow-active:  grayscale($inset-shadow-active);
+      $text-shadow-active:   grayscale($text-shadow-active);
+    }
+
+    background: $active-color;
+    border: 1px solid $border-active;
+    border-bottom: 1px solid $border-bottom-active;
+    @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+    text-shadow: 0 -1px 1px $text-shadow-active;
+  }
+}
+
diff --git a/bourbon/addons/_font-family.scss b/bourbon/addons/_font-family.scss
new file mode 100644
index 0000000000..df8a80ddfc
--- /dev/null
+++ b/bourbon/addons/_font-family.scss
@@ -0,0 +1,5 @@
+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+$verdana: Verdana, Geneva, sans-serif;
diff --git a/bourbon/addons/_html5-input-types.scss b/bourbon/addons/_html5-input-types.scss
new file mode 100644
index 0000000000..9d86fbb4d4
--- /dev/null
+++ b/bourbon/addons/_html5-input-types.scss
@@ -0,0 +1,36 @@
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+              'input[type="number"]',
+              'input[type="password"]',
+              'input[type="search"]',
+              'input[type="tel"]',
+              'input[type="text"]',
+              'input[type="url"]',
+
+              // Webkit & Gecko may change the display of these in the future
+              'input[type="color"]',
+              'input[type="date"]',
+              'input[type="datetime"]',
+              'input[type="datetime-local"]',
+              'input[type="month"]',
+              'input[type="time"]',
+              'input[type="week"]';
+
+$unquoted-inputs-list: ();
+
+@each $input-type in $inputs-list {
+  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+//************************************************************************//
+//   #{$all-text-inputs}, textarea {
+//     border: 1px solid red;
+//   }
diff --git a/bourbon/addons/_position.scss b/bourbon/addons/_position.scss
new file mode 100644
index 0000000000..6ad330f1df
--- /dev/null
+++ b/bourbon/addons/_position.scss
@@ -0,0 +1,30 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $top: nth($coordinates, 1);
+  $right: nth($coordinates, 2);
+  $bottom: nth($coordinates, 3);
+  $left: nth($coordinates, 4);
+
+  position: $position;
+
+  @if not(unitless($top)) {
+    top: $top;
+  }
+
+  @if not(unitless($right)) {
+    right: $right;
+  }
+
+  @if not(unitless($bottom)) {
+    bottom: $bottom;
+  }
+
+  @if not(unitless($left)) {
+    left: $left;
+  }
+}
diff --git a/bourbon/addons/_timing-functions.scss b/bourbon/addons/_timing-functions.scss
new file mode 100644
index 0000000000..51b2410914
--- /dev/null
+++ b/bourbon/addons/_timing-functions.scss
@@ -0,0 +1,32 @@
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
diff --git a/bourbon/css3/_animation.scss b/bourbon/css3/_animation.scss
new file mode 100644
index 0000000000..f99e06eb6f
--- /dev/null
+++ b/bourbon/css3/_animation.scss
@@ -0,0 +1,171 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+// Official animation shorthand property.
+@mixin animation ($animation-1,
+  $animation-2: false, $animation-3: false,
+  $animation-4: false, $animation-5: false,
+  $animation-6: false, $animation-7: false,
+  $animation-8: false, $animation-9: false)
+  {
+    $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
+                   $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
+
+  -webkit-animation: $full;
+     -moz-animation: $full;
+          animation: $full;
+}
+
+// Individual Animation Properties
+@mixin animation-name ($name-1,
+  $name-2: false, $name-3: false,
+  $name-4: false, $name-5: false,
+  $name-6: false, $name-7: false,
+  $name-8: false, $name-9: false)
+  {
+    $full:  compact($name-1, $name-2, $name-3, $name-4,
+                    $name-5, $name-6, $name-7, $name-8, $name-9);
+
+  -webkit-animation-name: $full;
+     -moz-animation-name: $full;
+          animation-name: $full;
+}
+
+
+@mixin animation-duration ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-duration: $full;
+     -moz-animation-duration: $full;
+          animation-duration: $full;
+}
+
+
+@mixin animation-timing-function ($motion-1: ease,
+//  ease | linear | ease-in | ease-out | ease-in-out
+  $motion-2: false, $motion-3: false,
+  $motion-4: false, $motion-5: false,
+  $motion-6: false, $motion-7: false,
+  $motion-8: false, $motion-9: false)
+  {
+    $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
+                    $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+
+  -webkit-animation-timing-function: $full;
+     -moz-animation-timing-function: $full;
+          animation-timing-function: $full;
+}
+
+
+@mixin animation-iteration-count ($value-1: 1,
+//  infinite | <number>
+  $value-2: false, $value-3: false,
+  $value-4: false, $value-5: false,
+  $value-6: false, $value-7: false,
+  $value-8: false, $value-9: false)
+  {
+    $full:  compact($value-1, $value-2, $value-3, $value-4,
+                    $value-5, $value-6, $value-7, $value-8, $value-9);
+
+  -webkit-animation-iteration-count: $full;
+     -moz-animation-iteration-count: $full;
+          animation-iteration-count: $full;
+}
+
+
+@mixin animation-direction ($direction-1: normal,
+//  normal | alternate
+  $direction-2: false, $direction-3: false,
+  $direction-4: false, $direction-5: false,
+  $direction-6: false, $direction-7: false,
+  $direction-8: false, $direction-9: false)
+  {
+    $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
+                    $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+
+  -webkit-animation-direction: $full;
+     -moz-animation-direction: $full;
+          animation-direction: $full;
+}
+
+
+@mixin animation-play-state ($state-1: running,
+//  running | paused
+  $state-2: false, $state-3: false,
+  $state-4: false, $state-5: false,
+  $state-6: false, $state-7: false,
+  $state-8: false, $state-9: false)
+  {
+    $full:  compact($state-1, $state-2, $state-3, $state-4,
+                    $state-5, $state-6, $state-7, $state-8, $state-9);
+
+  -webkit-animation-play-state: $full;
+     -moz-animation-play-state: $full;
+          animation-play-state: $full;
+}
+
+
+@mixin animation-delay ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-delay: $full;
+     -moz-animation-delay: $full;
+          animation-delay: $full;
+}
+
+
+@mixin animation-fill-mode ($mode-1: none,
+//  http://goo.gl/l6ckm
+//  none | forwards | backwards | both
+  $mode-2: false, $mode-3: false,
+  $mode-4: false, $mode-5: false,
+  $mode-6: false, $mode-7: false,
+  $mode-8: false, $mode-9: false)
+  {
+    $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
+                    $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+
+  -webkit-animation-fill-mode: $full;
+     -moz-animation-fill-mode: $full;
+          animation-fill-mode: $full;
+}
+
+
+// Deprecated
+@mixin animation-basic ($name, $time: 0, $motion: ease) {
+    $length-of-name: length($name);
+    $length-of-time: length($time);
+  $length-of-motion: length($motion);
+
+  @if $length-of-name > 1 {
+    @include animation-name(zip($name));
+  } @else {
+    @include animation-name(    $name);
+  }
+
+  @if $length-of-time > 1 {
+    @include animation-duration(zip($time));
+  } @else {
+    @include animation-duration(    $time);
+  }
+
+  @if $length-of-motion > 1 {
+    @include animation-timing-function(zip($motion));
+  } @else {
+    @include animation-timing-function(    $motion);
+  }
+  @warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
+}
+
diff --git a/bourbon/css3/_appearance.scss b/bourbon/css3/_appearance.scss
new file mode 100644
index 0000000000..548767e166
--- /dev/null
+++ b/bourbon/css3/_appearance.scss
@@ -0,0 +1,7 @@
+@mixin appearance ($value) {
+  -webkit-appearance: $value;
+     -moz-appearance: $value;
+      -ms-appearance: $value;
+       -o-appearance: $value;
+          appearance: $value;
+}
diff --git a/bourbon/css3/_background-image.scss b/bourbon/css3/_background-image.scss
new file mode 100644
index 0000000000..b11ab3fd53
--- /dev/null
+++ b/bourbon/css3/_background-image.scss
@@ -0,0 +1,71 @@
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+@import "../functions/linear-gradient";
+@import "../functions/radial-gradient";
+
+@mixin background-image(
+  $image-1       , $image-2: false,
+  $image-3: false, $image-4: false,
+  $image-5: false, $image-6: false,
+  $image-7: false, $image-8: false,
+  $image-9: false, $image-10: false
+) {
+  $images: compact($image-1, $image-2,
+           $image-3, $image-4,
+           $image-5, $image-6,
+           $image-7, $image-8,
+           $image-9, $image-10);
+
+  background-image: add-prefix($images, webkit);
+  background-image: add-prefix($images, moz);
+  background-image: add-prefix($images, ms);
+  background-image: add-prefix($images, o);
+  background-image: add-prefix($images);
+}
+
+
+@function add-prefix($images, $vendor: false) {
+  $images-prefixed: ();
+
+  @for $i from 1 through length($images) {
+    $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+      $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+
+      $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+      $images-prefixed: append($images-prefixed, $gradient, comma);
+    }
+
+    // If variable is a string - Image
+    @else if $type == string {
+      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
+    }
+  }
+  @return $images-prefixed;
+}
+
+
+@function render-gradients($gradients, $gradient-type, $vendor: false) {
+  $vendor-gradients: false;
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
+  }
+
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}
+
+//Examples:
+  //@include background-image(linear-gradient(top, orange, red));
+  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
diff --git a/bourbon/css3/_background-size.scss b/bourbon/css3/_background-size.scss
new file mode 100644
index 0000000000..4bba11027d
--- /dev/null
+++ b/bourbon/css3/_background-size.scss
@@ -0,0 +1,15 @@
+@mixin background-size ($length-1,
+  $length-2: false, $length-3: false,
+  $length-4: false, $length-5: false,
+  $length-6: false, $length-7: false,
+  $length-8: false, $length-9: false)
+  {
+    $full: compact($length-1, $length-2, $length-3, $length-4,
+                   $length-5, $length-6, $length-7, $length-8, $length-9);
+
+  -webkit-background-size: $full;
+     -moz-background-size: $full;
+      -ms-background-size: $full;
+       -o-background-size: $full;
+          background-size: $full;
+}
diff --git a/bourbon/css3/_border-image.scss b/bourbon/css3/_border-image.scss
new file mode 100644
index 0000000000..0373980422
--- /dev/null
+++ b/bourbon/css3/_border-image.scss
@@ -0,0 +1,7 @@
+@mixin border-image ($image) {
+  -webkit-border-image: $image;
+     -moz-border-image: $image;
+      -ms-border-image: $image;
+       -o-border-image: $image;
+          border-image: $image;
+}
diff --git a/bourbon/css3/_border-radius.scss b/bourbon/css3/_border-radius.scss
new file mode 100644
index 0000000000..f950d4dd98
--- /dev/null
+++ b/bourbon/css3/_border-radius.scss
@@ -0,0 +1,59 @@
+@mixin border-radius ($radii) {
+  -webkit-border-radius: $radii;
+     -moz-border-radius: $radii;
+      -ms-border-radius: $radii;
+       -o-border-radius: $radii;
+          border-radius: $radii;
+}
+
+@mixin border-top-left-radius($radii) {
+  -webkit-border-top-left-radius: $radii;
+     -moz-border-top-left-radius: $radii;
+      -ms-border-top-left-radius: $radii;
+       -o-border-top-left-radius: $radii;
+          border-top-left-radius: $radii;
+}
+
+@mixin border-top-right-radius($radii) {
+  -webkit-border-top-right-radius: $radii;
+     -moz-border-top-right-radius: $radii;
+      -ms-border-top-right-radius: $radii;
+       -o-border-top-right-radius: $radii;
+          border-top-right-radius: $radii;
+}
+
+@mixin border-bottom-left-radius($radii) {
+  -webkit-border-bottom-left-radius: $radii;
+     -moz-border-bottom-left-radius: $radii;
+      -ms-border-bottom-left-radius: $radii;
+       -o-border-bottom-left-radius: $radii;
+          border-bottom-left-radius: $radii;
+}
+
+@mixin border-bottom-right-radius($radii) {
+  -webkit-border-bottom-right-radius: $radii;
+     -moz-border-bottom-right-radius: $radii;
+      -ms-border-bottom-right-radius: $radii;
+       -o-border-bottom-right-radius: $radii;
+          border-bottom-right-radius: $radii;
+}
+
+@mixin border-top-radius($radii) {
+  @include border-top-left-radius($radii);
+  @include border-top-right-radius($radii);
+}
+
+@mixin border-right-radius($radii) {
+  @include border-top-right-radius($radii);
+  @include border-bottom-right-radius($radii);
+}
+
+@mixin border-bottom-radius($radii) {
+  @include border-bottom-left-radius($radii);
+  @include border-bottom-right-radius($radii);
+}
+
+@mixin border-left-radius($radii) {
+  @include border-top-left-radius($radii);
+  @include border-bottom-left-radius($radii);
+}
diff --git a/bourbon/css3/_box-shadow.scss b/bourbon/css3/_box-shadow.scss
new file mode 100644
index 0000000000..ad5c24e7aa
--- /dev/null
+++ b/bourbon/css3/_box-shadow.scss
@@ -0,0 +1,16 @@
+// Box-Shadow Mixin Requires Sass v3.1.1+
+@mixin box-shadow ($shadow-1,
+  $shadow-2: false, $shadow-3: false,
+  $shadow-4: false, $shadow-5: false,
+  $shadow-6: false, $shadow-7: false,
+  $shadow-8: false, $shadow-9: false)
+  {
+    $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
+                   $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
+
+  -webkit-box-shadow: $full;
+     -moz-box-shadow: $full;
+      -ms-box-shadow: $full;
+       -o-box-shadow: $full;
+          box-shadow: $full;
+}
diff --git a/bourbon/css3/_box-sizing.scss b/bourbon/css3/_box-sizing.scss
new file mode 100644
index 0000000000..a9c6cdb43f
--- /dev/null
+++ b/bourbon/css3/_box-sizing.scss
@@ -0,0 +1,8 @@
+@mixin box-sizing ($box) {
+//  content-box | border-box | inherit
+  -webkit-box-sizing: $box;
+     -moz-box-sizing: $box;
+      -ms-box-sizing: $box;
+       -o-box-sizing: $box;
+          box-sizing: $box;
+}
diff --git a/bourbon/css3/_columns.scss b/bourbon/css3/_columns.scss
new file mode 100644
index 0000000000..2896c91d7f
--- /dev/null
+++ b/bourbon/css3/_columns.scss
@@ -0,0 +1,67 @@
+@mixin columns($arg: auto) {
+// <column-count> || <column-width>
+  -webkit-columns: $arg;
+     -moz-columns: $arg;
+          columns: $arg;
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+  -webkit-column-count: $int;
+     -moz-column-count: $int;
+          column-count: $int;
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+  -webkit-column-gap: $length;
+     -moz-column-gap: $length;
+          column-gap: $length;
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+  -webkit-columns-fill: $arg;
+     -moz-columns-fill: $arg;
+          columns-fill: $arg;
+}
+
+@mixin column-rule($arg) {
+// <border-width> || <border-style> || <color>
+  -webkit-column-rule: $arg;
+     -moz-column-rule: $arg;
+          column-rule: $arg;
+}
+
+@mixin column-rule-color($color) {
+  -webkit-column-rule-color: $color;
+     -moz-column-rule-color: $color;
+          column-rule-color: $color;
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+  -webkit-column-rule-style: $style;
+     -moz-column-rule-style: $style;
+          column-rule-style: $style;
+}
+
+@mixin column-rule-width ($width: none) {
+  -webkit-column-rule-width: $width;
+     -moz-column-rule-width: $width;
+          column-rule-width: $width;
+}
+
+@mixin column-span($arg: none) {
+// none || all
+  -webkit-column-span: $arg;
+     -moz-column-span: $arg;
+          column-span: $arg;
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+  -webkit-column-width: $length;
+     -moz-column-width: $length;
+          column-width: $length;
+}
diff --git a/bourbon/css3/_flex-box.scss b/bourbon/css3/_flex-box.scss
new file mode 100644
index 0000000000..44c1dfd789
--- /dev/null
+++ b/bourbon/css3/_flex-box.scss
@@ -0,0 +1,67 @@
+// CSS3 Flexible Box Model and property defaults
+
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+  @include display-box;
+  @include box-orient($orient);
+  @include box-pack($pack);
+  @include box-align($align);
+}
+
+@mixin display-box {
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+// horizontal|vertical|inline-axis|block-axis|inherit
+  -webkit-box-orient: $orient;
+     -moz-box-orient: $orient;
+          box-orient: $orient;
+}
+
+@mixin box-pack($pack: start) {
+// start|end|center|justify
+  -webkit-box-pack: $pack;
+     -moz-box-pack: $pack;
+          box-pack: $pack;
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+  -webkit-box-align: $align;
+     -moz-box-align: $align;
+          box-align: $align;
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+  -webkit-box-direction: $direction;
+     -moz-box-direction: $direction;
+          box-direction: $direction;
+}
+@mixin box-lines($lines: single) {
+// single|multiple
+  -webkit-box-lines: $lines;
+     -moz-box-lines: $lines;
+          box-lines: $lines;
+}
+
+@mixin box-ordinal-group($integer: 1) {
+  -webkit-box-ordinal-group: $integer;
+     -moz-box-ordinal-group: $integer;
+          box-ordinal-group: $integer;
+}
+
+@mixin box-flex($value: 0.0) {
+  -webkit-box-flex: $value;
+     -moz-box-flex: $value;
+          box-flex: $value;
+}
+
+@mixin box-flex-group($integer: 1) {
+  -webkit-box-flex-group: $integer;
+     -moz-box-flex-group: $integer;
+          box-flex-group: $integer;
+}
diff --git a/bourbon/css3/_inline-block.scss b/bourbon/css3/_inline-block.scss
new file mode 100644
index 0000000000..d79a13c851
--- /dev/null
+++ b/bourbon/css3/_inline-block.scss
@@ -0,0 +1,10 @@
+// Legacy support for inline-block in IE7 (maybe IE6)
+@mixin inline-block {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+}
diff --git a/bourbon/css3/_linear-gradient.scss b/bourbon/css3/_linear-gradient.scss
new file mode 100644
index 0000000000..0b68501719
--- /dev/null
+++ b/bourbon/css3/_linear-gradient.scss
@@ -0,0 +1,41 @@
+@mixin linear-gradient($pos, $G1, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $fallback: false) {
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+    $pos: top; // Default position
+  }
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if type-of($fallback) == color {
+    $fallback-color: $fallback;
+  }
+
+  background-color: $fallback-color;
+  background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
+  background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
+  background-image:     -moz-linear-gradient($pos, $full);
+  background-image:      -ms-linear-gradient($pos, $full);
+  background-image:       -o-linear-gradient($pos, $full);
+  background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+}
+
+
+// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
+// @include linear-gradient(#1e5799, #2989d8);
+// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
+// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
+// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
diff --git a/bourbon/css3/_radial-gradient.scss b/bourbon/css3/_radial-gradient.scss
new file mode 100644
index 0000000000..fbd0a8523c
--- /dev/null
+++ b/bourbon/css3/_radial-gradient.scss
@@ -0,0 +1,22 @@
+// Requires Sass 3.1+
+@mixin radial-gradient($pos, $shape-size,
+                       $G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false) {
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  background-color:  nth($G1, 1);
+  background-image:          deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
+  background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
+  background-image:     -moz-radial-gradient($pos, $shape-size, $full);
+  background-image:      -ms-radial-gradient($pos, $shape-size, $full);
+  background-image:       -o-radial-gradient($pos, $shape-size, $full);
+  background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
+}
+
+//  Usage: Gradient position and shape-size are required. Color stops are optional.
+//  @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
+//  @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
diff --git a/bourbon/css3/_transform.scss b/bourbon/css3/_transform.scss
new file mode 100644
index 0000000000..8d19e8b88d
--- /dev/null
+++ b/bourbon/css3/_transform.scss
@@ -0,0 +1,19 @@
+@mixin transform($property: none) {
+//  none | <transform-function>
+  -webkit-transform: $property;
+     -moz-transform: $property;
+      -ms-transform: $property;
+       -o-transform: $property;
+          transform: $property;
+}
+
+@mixin transform-origin($axes: 50%) {
+// x-axis - left | center | right  | length | %
+// y-axis - top  | center | bottom | length | %
+// z-axis -                          length
+  -webkit-transform-origin: $axes;
+     -moz-transform-origin: $axes;
+      -ms-transform-origin: $axes;
+       -o-transform-origin: $axes;
+          transform-origin: $axes;
+}
diff --git a/bourbon/css3/_transition.scss b/bourbon/css3/_transition.scss
new file mode 100644
index 0000000000..058dbe0e33
--- /dev/null
+++ b/bourbon/css3/_transition.scss
@@ -0,0 +1,104 @@
+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all, 2.0s, ease-in-out);
+//          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+//          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
+
+@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
+
+  // Detect # of args passed into each variable
+  $length-of-property:        length($property);
+  $length-of-duration:        length($duration);
+  $length-of-timing-function: length($timing-function);
+  $length-of-delay:           length($delay);
+
+  @if $length-of-property > 1 {
+    @include transition-property(zip($property)); }
+  @else {
+    @include transition-property(    $property);
+  }
+
+  @if $length-of-duration > 1 {
+    @include transition-duration(zip($duration)); }
+  @else {
+    @include transition-duration(    $duration);
+  }
+
+  @if $length-of-timing-function > 1 {
+    @include transition-timing-function(zip($timing-function)); }
+  @else {
+    @include transition-timing-function(    $timing-function);
+  }
+
+  @if $length-of-delay > 1 {
+    @include transition-delay(zip($delay)); }
+  @else {
+    @include transition-delay(    $delay);
+  }
+}
+
+
+@mixin transition-property ($prop-1: all,
+  $prop-2: false, $prop-3: false,
+  $prop-4: false, $prop-5: false,
+  $prop-6: false, $prop-7: false,
+  $prop-8: false, $prop-9: false)
+  {
+    $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
+                   $prop-6, $prop-7, $prop-8, $prop-9);
+
+  -webkit-transition-property: $full;
+     -moz-transition-property: $full;
+      -ms-transition-property: $full;
+       -o-transition-property: $full;
+          transition-property: $full;
+}
+
+@mixin transition-duration ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+                   $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-transition-duration: $full;
+     -moz-transition-duration: $full;
+      -ms-transition-duration: $full;
+       -o-transition-duration: $full;
+          transition-duration: $full;
+}
+
+@mixin transition-timing-function ($motion-1: ease,
+  $motion-2: false, $motion-3: false,
+  $motion-4: false, $motion-5: false,
+  $motion-6: false, $motion-7: false,
+  $motion-8: false, $motion-9: false)
+  {
+    $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
+                   $motion-6, $motion-7, $motion-8, $motion-9);
+
+// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
+  -webkit-transition-timing-function: $full;
+     -moz-transition-timing-function: $full;
+      -ms-transition-timing-function: $full;
+       -o-transition-timing-function: $full;
+          transition-timing-function: $full;
+}
+
+@mixin transition-delay ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
+                   $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-transition-delay: $full;
+     -moz-transition-delay: $full;
+      -ms-transition-delay: $full;
+       -o-transition-delay: $full;
+          transition-delay: $full;
+}
+
diff --git a/bourbon/functions/_deprecated-webkit-gradient.scss b/bourbon/functions/_deprecated-webkit-gradient.scss
new file mode 100644
index 0000000000..1322f6f60e
--- /dev/null
+++ b/bourbon/functions/_deprecated-webkit-gradient.scss
@@ -0,0 +1,36 @@
+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function deprecated-webkit-gradient($type, $full) {
+  $gradient-list: ();
+  $gradient: false;
+  $full-length: length($full);
+  $percentage: false;
+  $gradient-type: $type;
+
+  @for $i from 1 through $full-length {
+    $gradient: nth($full, $i);
+
+    @if length($gradient) == 2 {
+      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+    @else {
+      @if $i == $full-length {
+        $percentage: 100%;
+      }
+      @else {
+        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+      }
+      $color-stop: color-stop(unquote($percentage), $gradient);
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+  }
+
+  @if $type == radial {
+    $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
+  }
+  @else if $type == linear {
+    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
+  }
+  @return $gradient;
+}
diff --git a/bourbon/functions/_grid-width.scss b/bourbon/functions/_grid-width.scss
new file mode 100644
index 0000000000..8e63d83d60
--- /dev/null
+++ b/bourbon/functions/_grid-width.scss
@@ -0,0 +1,13 @@
+@function grid-width($n) {
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
+//
+//  $gw-column: 100px;         // Column Width
+//  $gw-gutter: 40px;          // Gutter Width
+//
+//  div {
+//    width: grid-width(4);    // returns 520px;
+//    margin-left: $gw-gutter; // returns 40px;
+//  }
diff --git a/bourbon/functions/_linear-gradient.scss b/bourbon/functions/_linear-gradient.scss
new file mode 100644
index 0000000000..3b10ca82a6
--- /dev/null
+++ b/bourbon/functions/_linear-gradient.scss
@@ -0,0 +1,23 @@
+@function linear-gradient($pos: top, $G1: false, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false) {
+
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+    $pos: top; // Default position
+  }
+
+  $type: linear;
+  $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+  $type-gradient: append($type, $gradient, comma);
+
+  @return $type-gradient;
+}
+
diff --git a/bourbon/functions/_modular-scale.scss b/bourbon/functions/_modular-scale.scss
new file mode 100644
index 0000000000..dddccb5224
--- /dev/null
+++ b/bourbon/functions/_modular-scale.scss
@@ -0,0 +1,40 @@
+@function modular-scale($value, $increment, $ratio) {
+  @if $increment > 0 {
+    @for $i from 1 through $increment {
+      $value: ($value * $ratio);
+    }
+  }
+
+  @if $increment < 0 {
+    $increment: abs($increment);
+    @for $i from 1 through $increment {
+      $value: ($value / $ratio);
+    }
+  }
+
+  @return $value;
+}
+
+//  div {
+//                     Increment Up GR with positive value
+//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
+//
+//                     Increment Down GR with negative value
+//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
+//
+//                     Can be used with ceil(round up) or floor(round down)
+//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
+//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
+//  }
+//
+// modularscale.com
+
+@function golden-ratio($value, $increment) {
+  @return modular-scale($value, $increment, 1.618)
+}
+
+//  div {
+//    font-size: golden-ratio(14px, 1); // returns: 22.652px
+//  }
+//
+// goldenratiocalculator.com
diff --git a/bourbon/functions/_radial-gradient.scss b/bourbon/functions/_radial-gradient.scss
new file mode 100644
index 0000000000..3d5461ad6e
--- /dev/null
+++ b/bourbon/functions/_radial-gradient.scss
@@ -0,0 +1,15 @@
+// This function is required and used by the background-image mixin.
+@function radial-gradient($pos, $shape-size,
+                       $G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false) {
+
+  $type: radial;
+  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+  $type-gradient: append($type, $gradient, comma);
+
+  @return $type-gradient;
+}
+
diff --git a/bourbon/functions/_tint-shade.scss b/bourbon/functions/_tint-shade.scss
new file mode 100644
index 0000000000..f7172004ac
--- /dev/null
+++ b/bourbon/functions/_tint-shade.scss
@@ -0,0 +1,9 @@
+// Add percentage of white to a color
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}
diff --git a/bourbon/lib/bourbon.rb b/bourbon/lib/bourbon.rb
new file mode 100644
index 0000000000..1635be836d
--- /dev/null
+++ b/bourbon/lib/bourbon.rb
@@ -0,0 +1,19 @@
+require "bourbon/generator"
+
+module Bourbon
+  if defined?(Rails)
+    class Engine < ::Rails::Engine
+      require 'bourbon/engine'
+    end
+
+    module Rails
+      class Railtie < ::Rails::Railtie
+        rake_tasks do
+          load "tasks/install.rake"
+        end
+      end
+    end
+  end
+end
+
+require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")
diff --git a/bourbon/lib/bourbon/sass_extensions.rb b/bourbon/lib/bourbon/sass_extensions.rb
new file mode 100644
index 0000000000..ad567200e3
--- /dev/null
+++ b/bourbon/lib/bourbon/sass_extensions.rb
@@ -0,0 +1,6 @@
+module Bourbon::SassExtensions
+end
+
+require "sass"
+
+require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
diff --git a/bourbon/lib/bourbon/sass_extensions/functions.rb b/bourbon/lib/bourbon/sass_extensions/functions.rb
new file mode 100644
index 0000000000..daa877650e
--- /dev/null
+++ b/bourbon/lib/bourbon/sass_extensions/functions.rb
@@ -0,0 +1,13 @@
+module Bourbon::SassExtensions::Functions
+end
+
+require File.join(File.dirname(__FILE__), "/functions/compact")
+
+module Sass::Script::Functions
+  include Bourbon::SassExtensions::Functions::Compact
+end
+
+# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
+class Sass::Script::Functions::EvaluationContext
+  include Sass::Script::Functions
+end
diff --git a/bourbon/lib/bourbon/sass_extensions/functions/compact.rb b/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
new file mode 100644
index 0000000000..5192e921e7
--- /dev/null
+++ b/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
@@ -0,0 +1,13 @@
+# Compact function pulled from compass
+module Bourbon::SassExtensions::Functions::Compact
+
+  def compact(*args)
+    sep = :comma
+    if args.size == 1 && args.first.is_a?(Sass::Script::List)
+      args = args.first.value
+      sep = args.first.separator
+    end
+    Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
+  end
+
+end
diff --git a/sass/application.scss b/sass/application.scss
index a32d8b3172..63b6ce1d20 100644
--- a/sass/application.scss
+++ b/sass/application.scss
@@ -13,7 +13,6 @@
 @import "info";
 @import "profile";
 @import "wiki-basic-html", "wiki-create", "wiki";
-@import "activation";
 @import "help";
 @import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar";
 

From d6b96ae1f1c777cca56949557ecbeb6f2293759b Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Tue, 14 Feb 2012 13:55:06 -0500
Subject: [PATCH 04/10] Major refactor of scss

--HG--
branch : kf-refactor-scss
---
 bourbon/_bourbon.scss                         |  29 -
 bourbon/addons/_button.scss                   | 267 --------
 bourbon/addons/_font-family.scss              |   5 -
 bourbon/addons/_html5-input-types.scss        |  36 --
 bourbon/addons/_position.scss                 |  30 -
 bourbon/addons/_timing-functions.scss         |  32 -
 bourbon/css3/_animation.scss                  | 171 ------
 bourbon/css3/_appearance.scss                 |   7 -
 bourbon/css3/_background-image.scss           |  71 ---
 bourbon/css3/_background-size.scss            |  15 -
 bourbon/css3/_border-image.scss               |   7 -
 bourbon/css3/_border-radius.scss              |  59 --
 bourbon/css3/_box-shadow.scss                 |  16 -
 bourbon/css3/_box-sizing.scss                 |   8 -
 bourbon/css3/_columns.scss                    |  67 ---
 bourbon/css3/_flex-box.scss                   |  67 ---
 bourbon/css3/_inline-block.scss               |  10 -
 bourbon/css3/_linear-gradient.scss            |  41 --
 bourbon/css3/_radial-gradient.scss            |  22 -
 bourbon/css3/_transform.scss                  |  19 -
 bourbon/css3/_transition.scss                 | 104 ----
 .../_deprecated-webkit-gradient.scss          |  36 --
 bourbon/functions/_grid-width.scss            |  13 -
 bourbon/functions/_linear-gradient.scss       |  23 -
 bourbon/functions/_radial-gradient.scss       |  15 -
 bourbon/functions/_tint-shade.scss            |   9 -
 bourbon/lib/bourbon.rb                        |  19 -
 bourbon/lib/bourbon/sass_extensions.rb        |   6 -
 .../lib/bourbon/sass_extensions/functions.rb  |  13 -
 .../sass_extensions/functions/compact.rb      |  13 -
 main.html                                     |   1 -
 sass/_activation.scss                         |  26 -
 sass/_base-variables.scss                     |  53 --
 sass/_index.scss                              | 478 ---------------
 sass/_jquery-ui-1.8.16.custom.scss            | 568 ++++++++++++++++++
 sass/_layout.scss                             | 191 ------
 sass/_local.scss                              |  36 --
 sass/_theme.scss                              | 190 ------
 sass/application.scss                         |  19 +-
 sass/{ => base}/_base.scss                    |   5 +
 .../_extends.scss}                            |   0
 sass/{ => base}/_font-face.scss               |   0
 .../_functions.scss}                          |  14 +-
 sass/{ => base}/_reset.scss                   |   0
 sass/base/_variables.scss                     |  31 +
 sass/bourbon/_bourbon.scss                    |   2 +-
 sass/bourbon/addons/_button.scss              | 207 +++++--
 sass/bourbon/addons/_font-family.scss         |   1 +
 sass/bourbon/css3/_animation.scss             |  26 +-
 sass/bourbon/css3/_linear-gradient.scss       |  14 +-
 sass/bourbon/functions/_golden-ratio.scss     |  31 -
 .../bourbon}/functions/_modular-scale.scss    |   0
 sass/bourbon/lib/bourbon.rb                   |   2 +
 sass/{ => courseware}/_courseware.scss        |  78 ---
 .../_sequence-nav.scss}                       |   0
 sass/courseware/_sidebar.scss                 |  77 +++
 .../_video.scss}                              |   0
 .../_answers.scss}                            |   0
 sass/{ => discussion}/_askbot-original.scss   |   0
 sass/{ => discussion}/_discussion.scss        |   0
 sass/{ => discussion}/_form-wmd-toolbar.scss  |   0
 .../_forms.scss}                              |   0
 sass/{ => discussion}/_question-view.scss     |   0
 .../_questions.scss}                          |   0
 .../_tags.scss}                               |   0
 sass/index/_base.scss                         |  44 ++
 .../_extends.scss}                            |   0
 sass/index/_footer.scss                       |  47 ++
 sass/index/_header.scss                       | 144 +++++
 sass/index/_index.scss                        | 233 +++++++
 .../_variables.scss}                          |  10 +-
 sass/layout/_footer.scss                      |  45 ++
 sass/layout/_header.scss                      | 103 ++++
 sass/layout/_layout.scss                      |  28 +
 sass/{ => layout}/_leanmodal.scss             |   0
 sass/marketing.scss                           |   7 +-
 sass/print.scss                               |   6 +
 .../_basic-html.scss}                         |   0
 sass/{_wiki-create.scss => wiki/_create.scss} |   0
 sass/wiki/_sidebar.scss                       |  69 +++
 sass/{ => wiki}/_wiki.scss                    |  70 ---
 81 files changed, 1610 insertions(+), 2476 deletions(-)
 delete mode 100644 bourbon/_bourbon.scss
 delete mode 100644 bourbon/addons/_button.scss
 delete mode 100644 bourbon/addons/_font-family.scss
 delete mode 100644 bourbon/addons/_html5-input-types.scss
 delete mode 100644 bourbon/addons/_position.scss
 delete mode 100644 bourbon/addons/_timing-functions.scss
 delete mode 100644 bourbon/css3/_animation.scss
 delete mode 100644 bourbon/css3/_appearance.scss
 delete mode 100644 bourbon/css3/_background-image.scss
 delete mode 100644 bourbon/css3/_background-size.scss
 delete mode 100644 bourbon/css3/_border-image.scss
 delete mode 100644 bourbon/css3/_border-radius.scss
 delete mode 100644 bourbon/css3/_box-shadow.scss
 delete mode 100644 bourbon/css3/_box-sizing.scss
 delete mode 100644 bourbon/css3/_columns.scss
 delete mode 100644 bourbon/css3/_flex-box.scss
 delete mode 100644 bourbon/css3/_inline-block.scss
 delete mode 100644 bourbon/css3/_linear-gradient.scss
 delete mode 100644 bourbon/css3/_radial-gradient.scss
 delete mode 100644 bourbon/css3/_transform.scss
 delete mode 100644 bourbon/css3/_transition.scss
 delete mode 100644 bourbon/functions/_deprecated-webkit-gradient.scss
 delete mode 100644 bourbon/functions/_grid-width.scss
 delete mode 100644 bourbon/functions/_linear-gradient.scss
 delete mode 100644 bourbon/functions/_radial-gradient.scss
 delete mode 100644 bourbon/functions/_tint-shade.scss
 delete mode 100644 bourbon/lib/bourbon.rb
 delete mode 100644 bourbon/lib/bourbon/sass_extensions.rb
 delete mode 100644 bourbon/lib/bourbon/sass_extensions/functions.rb
 delete mode 100644 bourbon/lib/bourbon/sass_extensions/functions/compact.rb
 delete mode 100644 sass/_activation.scss
 delete mode 100644 sass/_base-variables.scss
 delete mode 100644 sass/_index.scss
 create mode 100644 sass/_jquery-ui-1.8.16.custom.scss
 delete mode 100644 sass/_layout.scss
 delete mode 100644 sass/_local.scss
 delete mode 100644 sass/_theme.scss
 rename sass/{ => base}/_base.scss (95%)
 rename sass/{_base-extends.scss => base/_extends.scss} (100%)
 rename sass/{ => base}/_font-face.scss (100%)
 rename sass/{_index-functions.scss => base/_functions.scss} (76%)
 rename sass/{ => base}/_reset.scss (100%)
 create mode 100644 sass/base/_variables.scss
 delete mode 100644 sass/bourbon/functions/_golden-ratio.scss
 rename {bourbon => sass/bourbon}/functions/_modular-scale.scss (100%)
 rename sass/{ => courseware}/_courseware.scss (67%)
 rename sass/{_courseware-sequence-nav.scss => courseware/_sequence-nav.scss} (100%)
 create mode 100644 sass/courseware/_sidebar.scss
 rename sass/{_courseware-video.scss => courseware/_video.scss} (100%)
 rename sass/{_discussion-answers.scss => discussion/_answers.scss} (100%)
 rename sass/{ => discussion}/_askbot-original.scss (100%)
 rename sass/{ => discussion}/_discussion.scss (100%)
 rename sass/{ => discussion}/_form-wmd-toolbar.scss (100%)
 rename sass/{_discussion-forms.scss => discussion/_forms.scss} (100%)
 rename sass/{ => discussion}/_question-view.scss (100%)
 rename sass/{_discussion-questions.scss => discussion/_questions.scss} (100%)
 rename sass/{_discussion-tags.scss => discussion/_tags.scss} (100%)
 create mode 100644 sass/index/_base.scss
 rename sass/{_index-extends.scss => index/_extends.scss} (100%)
 create mode 100644 sass/index/_footer.scss
 create mode 100644 sass/index/_header.scss
 create mode 100644 sass/index/_index.scss
 rename sass/{_index-variables.scss => index/_variables.scss} (69%)
 create mode 100644 sass/layout/_footer.scss
 create mode 100644 sass/layout/_header.scss
 create mode 100644 sass/layout/_layout.scss
 rename sass/{ => layout}/_leanmodal.scss (100%)
 create mode 100644 sass/print.scss
 rename sass/{_wiki-basic-html.scss => wiki/_basic-html.scss} (100%)
 rename sass/{_wiki-create.scss => wiki/_create.scss} (100%)
 create mode 100644 sass/wiki/_sidebar.scss
 rename sass/{ => wiki}/_wiki.scss (53%)

diff --git a/bourbon/_bourbon.scss b/bourbon/_bourbon.scss
deleted file mode 100644
index 447167c5ab..0000000000
--- a/bourbon/_bourbon.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-// Custom Functions
-@import "functions/deprecated-webkit-gradient";
-@import "functions/grid-width";
-@import "functions/modular-scale";
-@import "functions/tint-shade";
-
-// CSS3 Mixins
-@import "css3/animation";
-@import "css3/appearance";
-@import "css3/background-image";
-@import "css3/background-size";
-@import "css3/border-image";
-@import "css3/border-radius";
-@import "css3/box-shadow";
-@import "css3/box-sizing";
-@import "css3/columns";
-@import "css3/flex-box";
-@import "css3/inline-block";
-@import "css3/linear-gradient";
-@import "css3/radial-gradient";
-@import "css3/transform";
-@import "css3/transition";
-
-// Addons & other mixins
-@import "addons/button";
-@import "addons/font-family";
-@import "addons/html5-input-types";
-@import "addons/position";
-@import "addons/timing-functions";
diff --git a/bourbon/addons/_button.scss b/bourbon/addons/_button.scss
deleted file mode 100644
index 1d32125140..0000000000
--- a/bourbon/addons/_button.scss
+++ /dev/null
@@ -1,267 +0,0 @@
-@mixin button ($style: simple, $base-color: #4294f0) {
-
-  @if type-of($style) == color {
-    $base-color: $style;
-    $style: simple;
-  }
-
-  // Grayscale button
-  @if $base-color == grayscale($base-color) {
-    @if $style == simple {
-      @include simple($base-color, $grayscale: true);
-    }
-
-    @else if $style == shiny {
-      @include shiny($base-color, $grayscale: true);
-    }
-
-    @else if $style == pill {
-      @include pill($base-color, $grayscale: true);
-    }
-  }
-
-  // Colored button
-  @else {
-    @if $style == simple {
-      @include simple($base-color);
-    }
-
-    @else if $style == shiny {
-      @include shiny($base-color);
-    }
-
-    @else if $style == pill {
-      @include pill($base-color);
-    }
-  }
-}
-
-
-// Simple Button
-//************************************************************************//
-@mixin simple($base-color, $grayscale: false) {
-  $color:         hsl(0, 0, 100%);
-  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
-  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
-  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
-  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
-
-  @if lightness($base-color) > 70% {
-    $color:       hsl(0, 0, 20%);
-    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
-  }
-
-  @if $grayscale == true {
-    $border:        grayscale($border);
-    $inset-shadow:  grayscale($inset-shadow);
-    $stop-gradient: grayscale($stop-gradient);
-    $text-shadow:   grayscale($text-shadow);
-  }
-
-  border: 1px solid $border;
-  @include border-radius (3px);
-  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
-  color: $color;
-  display: inline;
-  font-size: 11px;
-  font-weight: bold;
-  @include linear-gradient ($base-color, $stop-gradient);
-  padding: 6px 18px 7px;
-  text-shadow: 0 1px 0 $text-shadow;
-  -webkit-background-clip: padding-box;
-
-  &:hover {
-    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
-    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
-    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
-
-    @if $grayscale == true {
-      $base-color-hover:    grayscale($base-color-hover);
-      $inset-shadow-hover:  grayscale($inset-shadow-hover);
-      $stop-gradient-hover: grayscale($stop-gradient-hover);
-    }
-
-    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
-    cursor: pointer;
-    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
-  }
-
-  &:active {
-    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
-    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
-
-    @if $grayscale == true {
-      $border-active:       grayscale($border-active);
-      $inset-shadow-active: grayscale($inset-shadow-active);
-    }
-
-    border: 1px solid $border-active;
-    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
-  }
-}
-
-
-// Shiny Button
-//************************************************************************//
-@mixin shiny($base-color, $grayscale: false) {
-  $color:         hsl(0, 0, 100%);
-  $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
-  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
-  $fourth-stop:   adjust-color($base-color, $red: -79,  $green: -70,  $blue: -46);
-  $inset-shadow:  adjust-color($base-color, $red:  37,  $green:  29,  $blue:  12);
-  $second-stop:   adjust-color($base-color, $red: -56,  $green: -50,  $blue: -33);
-  $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
-  $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
-
-  @if lightness($base-color) > 70% {
-    $color:       hsl(0, 0, 20%);
-    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
-  }
-
-  @if $grayscale == true {
-    $border:        grayscale($border);
-    $border-bottom: grayscale($border-bottom);
-    $fourth-stop:   grayscale($fourth-stop);
-    $inset-shadow:  grayscale($inset-shadow);
-    $second-stop:   grayscale($second-stop);
-    $text-shadow:   grayscale($text-shadow);
-    $third-stop:    grayscale($third-stop);
-  }
-
-  border: 1px solid $border;
-  border-bottom: 1px solid $border-bottom;
-  @include border-radius(5px);
-  @include box-shadow(inset 0 1px 0 0 $inset-shadow);
-  color: $color;
-  display: inline;
-  font-size: 14px;
-  font-weight: bold;
-  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
-  padding: 7px 20px 8px;
-  text-align: center;
-  text-decoration: none;
-  text-shadow: 0 -1px 1px $text-shadow;
-
-  &:hover {
-    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
-    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
-    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
-    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
-
-    @if $grayscale == true {
-      $first-stop-hover:  grayscale($first-stop-hover);
-      $second-stop-hover: grayscale($second-stop-hover);
-      $third-stop-hover:  grayscale($third-stop-hover);
-      $fourth-stop-hover: grayscale($fourth-stop-hover);
-    }
-
-    cursor: pointer;
-    @include linear-gradient(top, $first-stop-hover  0%,
-                                  $second-stop-hover 50%,
-                                  $third-stop-hover  50%,
-                                  $fourth-stop-hover 100%);
-  }
-
-  &:active {
-    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
-
-    @if $grayscale == true {
-      $inset-shadow-active: grayscale($inset-shadow-active);
-    }
-
-    @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
-  }
-}
-
-
-// Pill Button
-//************************************************************************//
-@mixin pill($base-color, $grayscale: false) {
-  $color:         hsl(0, 0, 100%);
-  $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
-  $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
-  $border-top:    adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
-  $inset-shadow:  adjust-color($base-color, $hue: -1, $saturation: -1%,  $lightness:  7%);
-  $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
-  $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
-
-  @if lightness($base-color) > 70% {
-    $color:       hsl(0, 0, 20%);
-    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
-  }
-
-  @if $grayscale == true {
-    $border-bottom: grayscale($border-bottom);
-    $border-sides:  grayscale($border-sides);
-    $border-top:    grayscale($border-top);
-    $inset-shadow:  grayscale($inset-shadow);
-    $stop-gradient: grayscale($stop-gradient);
-    $text-shadow:   grayscale($text-shadow);
-  }
-
-  border: 1px solid $border-top;
-  border-color: $border-top $border-sides $border-bottom;
-  @include border-radius(16px);
-  @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
-  color: $color;
-  display: inline;
-  font-size: 11px;
-  font-weight: normal;
-  line-height: 1;
-  @include linear-gradient ($base-color, $stop-gradient);
-  padding: 3px 16px 5px;
-  text-align: center;
-  text-shadow: 0 -1px 1px $text-shadow;
-  -webkit-background-clip: padding-box;
-
-  &:hover {
-    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
-    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
-    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
-    $border-top:          adjust-color($base-color, $hue: -1, $saturation: -17%,   $lightness: -21%);
-    $inset-shadow-hover:  adjust-color($base-color,           $saturation: -1%,    $lightness:  3%);
-    $stop-gradient-hover: adjust-color($base-color, $hue:  8, $saturation: -4%,    $lightness: -15.5%);
-    $text-shadow-hover:   adjust-color($base-color, $hue:  5, $saturation: -5%,    $lightness: -22%);
-
-    @if $grayscale == true {
-      $base-color-hover:    grayscale($base-color-hover);
-      $border-bottom:       grayscale($border-bottom);
-      $border-sides:        grayscale($border-sides);
-      $border-top:          grayscale($border-top);
-      $inset-shadow-hover:  grayscale($inset-shadow-hover);
-      $stop-gradient-hover: grayscale($stop-gradient-hover);
-      $text-shadow-hover:   grayscale($text-shadow-hover);
-    }
-
-    border: 1px solid $border-top;
-    border-color: $border-top $border-sides $border-bottom;
-    @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
-    cursor: pointer;
-    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
-    text-shadow: 0 -1px 1px $text-shadow-hover;
-    -webkit-background-clip: padding-box;
-  }
-
-  &:active {
-    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
-    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
-    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
-    $inset-shadow-active:  adjust-color($base-color, $hue: 9,  $saturation:  2%,   $lightness: -21.5%);
-    $text-shadow-active:   adjust-color($base-color, $hue: 5,  $saturation: -12%,  $lightness: -21.5%);
-
-    @if $grayscale == true {
-      $active-color:         grayscale($active-color);
-      $border-active:        grayscale($border-active);
-      $border-bottom-active: grayscale($border-bottom-active);
-      $inset-shadow-active:  grayscale($inset-shadow-active);
-      $text-shadow-active:   grayscale($text-shadow-active);
-    }
-
-    background: $active-color;
-    border: 1px solid $border-active;
-    border-bottom: 1px solid $border-bottom-active;
-    @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
-    text-shadow: 0 -1px 1px $text-shadow-active;
-  }
-}
-
diff --git a/bourbon/addons/_font-family.scss b/bourbon/addons/_font-family.scss
deleted file mode 100644
index df8a80ddfc..0000000000
--- a/bourbon/addons/_font-family.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
-$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
-$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
-$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
-$verdana: Verdana, Geneva, sans-serif;
diff --git a/bourbon/addons/_html5-input-types.scss b/bourbon/addons/_html5-input-types.scss
deleted file mode 100644
index 9d86fbb4d4..0000000000
--- a/bourbon/addons/_html5-input-types.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-//************************************************************************//
-// Generate a variable ($all-text-inputs) with a list of all html5
-// input types that have a text-based input, excluding textarea.
-// http://diveintohtml5.org/forms.html
-//************************************************************************//
-$inputs-list: 'input[type="email"]',
-              'input[type="number"]',
-              'input[type="password"]',
-              'input[type="search"]',
-              'input[type="tel"]',
-              'input[type="text"]',
-              'input[type="url"]',
-
-              // Webkit & Gecko may change the display of these in the future
-              'input[type="color"]',
-              'input[type="date"]',
-              'input[type="datetime"]',
-              'input[type="datetime-local"]',
-              'input[type="month"]',
-              'input[type="time"]',
-              'input[type="week"]';
-
-$unquoted-inputs-list: ();
-
-@each $input-type in $inputs-list {
-  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
-}
-
-$all-text-inputs: $unquoted-inputs-list;
-
-// You must use interpolation on the variable:
-// #{$all-text-inputs}
-//************************************************************************//
-//   #{$all-text-inputs}, textarea {
-//     border: 1px solid red;
-//   }
diff --git a/bourbon/addons/_position.scss b/bourbon/addons/_position.scss
deleted file mode 100644
index 6ad330f1df..0000000000
--- a/bourbon/addons/_position.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@mixin position ($position: relative, $coordinates: 0 0 0 0) {
-
-  @if type-of($position) == list {
-    $coordinates: $position;
-    $position: relative;
-  }
-
-  $top: nth($coordinates, 1);
-  $right: nth($coordinates, 2);
-  $bottom: nth($coordinates, 3);
-  $left: nth($coordinates, 4);
-
-  position: $position;
-
-  @if not(unitless($top)) {
-    top: $top;
-  }
-
-  @if not(unitless($right)) {
-    right: $right;
-  }
-
-  @if not(unitless($bottom)) {
-    bottom: $bottom;
-  }
-
-  @if not(unitless($left)) {
-    left: $left;
-  }
-}
diff --git a/bourbon/addons/_timing-functions.scss b/bourbon/addons/_timing-functions.scss
deleted file mode 100644
index 51b2410914..0000000000
--- a/bourbon/addons/_timing-functions.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
-// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
-
-// EASE IN
-$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
-$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
-$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
-$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
-$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
-$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
-$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
-$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
-
-// EASE OUT
-$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
-$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
-$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
-$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
-$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
-$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
-$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
-$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
-
-// EASE IN OUT
-$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
-$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
-$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
-$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
-$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
-$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
-$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
-$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
diff --git a/bourbon/css3/_animation.scss b/bourbon/css3/_animation.scss
deleted file mode 100644
index f99e06eb6f..0000000000
--- a/bourbon/css3/_animation.scss
+++ /dev/null
@@ -1,171 +0,0 @@
-// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
-// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
-
-// Official animation shorthand property.
-@mixin animation ($animation-1,
-  $animation-2: false, $animation-3: false,
-  $animation-4: false, $animation-5: false,
-  $animation-6: false, $animation-7: false,
-  $animation-8: false, $animation-9: false)
-  {
-    $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
-                   $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
-
-  -webkit-animation: $full;
-     -moz-animation: $full;
-          animation: $full;
-}
-
-// Individual Animation Properties
-@mixin animation-name ($name-1,
-  $name-2: false, $name-3: false,
-  $name-4: false, $name-5: false,
-  $name-6: false, $name-7: false,
-  $name-8: false, $name-9: false)
-  {
-    $full:  compact($name-1, $name-2, $name-3, $name-4,
-                    $name-5, $name-6, $name-7, $name-8, $name-9);
-
-  -webkit-animation-name: $full;
-     -moz-animation-name: $full;
-          animation-name: $full;
-}
-
-
-@mixin animation-duration ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full:  compact($time-1, $time-2, $time-3, $time-4,
-                    $time-5, $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-animation-duration: $full;
-     -moz-animation-duration: $full;
-          animation-duration: $full;
-}
-
-
-@mixin animation-timing-function ($motion-1: ease,
-//  ease | linear | ease-in | ease-out | ease-in-out
-  $motion-2: false, $motion-3: false,
-  $motion-4: false, $motion-5: false,
-  $motion-6: false, $motion-7: false,
-  $motion-8: false, $motion-9: false)
-  {
-    $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
-                    $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
-
-  -webkit-animation-timing-function: $full;
-     -moz-animation-timing-function: $full;
-          animation-timing-function: $full;
-}
-
-
-@mixin animation-iteration-count ($value-1: 1,
-//  infinite | <number>
-  $value-2: false, $value-3: false,
-  $value-4: false, $value-5: false,
-  $value-6: false, $value-7: false,
-  $value-8: false, $value-9: false)
-  {
-    $full:  compact($value-1, $value-2, $value-3, $value-4,
-                    $value-5, $value-6, $value-7, $value-8, $value-9);
-
-  -webkit-animation-iteration-count: $full;
-     -moz-animation-iteration-count: $full;
-          animation-iteration-count: $full;
-}
-
-
-@mixin animation-direction ($direction-1: normal,
-//  normal | alternate
-  $direction-2: false, $direction-3: false,
-  $direction-4: false, $direction-5: false,
-  $direction-6: false, $direction-7: false,
-  $direction-8: false, $direction-9: false)
-  {
-    $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
-                    $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
-
-  -webkit-animation-direction: $full;
-     -moz-animation-direction: $full;
-          animation-direction: $full;
-}
-
-
-@mixin animation-play-state ($state-1: running,
-//  running | paused
-  $state-2: false, $state-3: false,
-  $state-4: false, $state-5: false,
-  $state-6: false, $state-7: false,
-  $state-8: false, $state-9: false)
-  {
-    $full:  compact($state-1, $state-2, $state-3, $state-4,
-                    $state-5, $state-6, $state-7, $state-8, $state-9);
-
-  -webkit-animation-play-state: $full;
-     -moz-animation-play-state: $full;
-          animation-play-state: $full;
-}
-
-
-@mixin animation-delay ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full:  compact($time-1, $time-2, $time-3, $time-4,
-                    $time-5, $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-animation-delay: $full;
-     -moz-animation-delay: $full;
-          animation-delay: $full;
-}
-
-
-@mixin animation-fill-mode ($mode-1: none,
-//  http://goo.gl/l6ckm
-//  none | forwards | backwards | both
-  $mode-2: false, $mode-3: false,
-  $mode-4: false, $mode-5: false,
-  $mode-6: false, $mode-7: false,
-  $mode-8: false, $mode-9: false)
-  {
-    $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
-                    $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
-
-  -webkit-animation-fill-mode: $full;
-     -moz-animation-fill-mode: $full;
-          animation-fill-mode: $full;
-}
-
-
-// Deprecated
-@mixin animation-basic ($name, $time: 0, $motion: ease) {
-    $length-of-name: length($name);
-    $length-of-time: length($time);
-  $length-of-motion: length($motion);
-
-  @if $length-of-name > 1 {
-    @include animation-name(zip($name));
-  } @else {
-    @include animation-name(    $name);
-  }
-
-  @if $length-of-time > 1 {
-    @include animation-duration(zip($time));
-  } @else {
-    @include animation-duration(    $time);
-  }
-
-  @if $length-of-motion > 1 {
-    @include animation-timing-function(zip($motion));
-  } @else {
-    @include animation-timing-function(    $motion);
-  }
-  @warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
-}
-
diff --git a/bourbon/css3/_appearance.scss b/bourbon/css3/_appearance.scss
deleted file mode 100644
index 548767e166..0000000000
--- a/bourbon/css3/_appearance.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@mixin appearance ($value) {
-  -webkit-appearance: $value;
-     -moz-appearance: $value;
-      -ms-appearance: $value;
-       -o-appearance: $value;
-          appearance: $value;
-}
diff --git a/bourbon/css3/_background-image.scss b/bourbon/css3/_background-image.scss
deleted file mode 100644
index b11ab3fd53..0000000000
--- a/bourbon/css3/_background-image.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-//************************************************************************//
-// Background-image property for adding multiple background images with
-// gradients, or for stringing multiple gradients together.
-//************************************************************************//
-@import "../functions/linear-gradient";
-@import "../functions/radial-gradient";
-
-@mixin background-image(
-  $image-1       , $image-2: false,
-  $image-3: false, $image-4: false,
-  $image-5: false, $image-6: false,
-  $image-7: false, $image-8: false,
-  $image-9: false, $image-10: false
-) {
-  $images: compact($image-1, $image-2,
-           $image-3, $image-4,
-           $image-5, $image-6,
-           $image-7, $image-8,
-           $image-9, $image-10);
-
-  background-image: add-prefix($images, webkit);
-  background-image: add-prefix($images, moz);
-  background-image: add-prefix($images, ms);
-  background-image: add-prefix($images, o);
-  background-image: add-prefix($images);
-}
-
-
-@function add-prefix($images, $vendor: false) {
-  $images-prefixed: ();
-
-  @for $i from 1 through length($images) {
-    $type: type-of(nth($images, $i)); // Get type of variable - List or String
-
-    // If variable is a list - Gradient
-    @if $type == list {
-      $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
-      $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
-
-      $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
-      $images-prefixed: append($images-prefixed, $gradient, comma);
-    }
-
-    // If variable is a string - Image
-    @else if $type == string {
-      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
-    }
-  }
-  @return $images-prefixed;
-}
-
-
-@function render-gradients($gradients, $gradient-type, $vendor: false) {
-  $vendor-gradients: false;
-  @if $vendor {
-    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
-  }
-
-  @else if $vendor == false {
-    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
-    $vendor-gradients: unquote($vendor-gradients);
-  }
-  @return $vendor-gradients;
-}
-
-//Examples:
-  //@include background-image(linear-gradient(top, orange, red));
-  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
-  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
-  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
-  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
diff --git a/bourbon/css3/_background-size.scss b/bourbon/css3/_background-size.scss
deleted file mode 100644
index 4bba11027d..0000000000
--- a/bourbon/css3/_background-size.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@mixin background-size ($length-1,
-  $length-2: false, $length-3: false,
-  $length-4: false, $length-5: false,
-  $length-6: false, $length-7: false,
-  $length-8: false, $length-9: false)
-  {
-    $full: compact($length-1, $length-2, $length-3, $length-4,
-                   $length-5, $length-6, $length-7, $length-8, $length-9);
-
-  -webkit-background-size: $full;
-     -moz-background-size: $full;
-      -ms-background-size: $full;
-       -o-background-size: $full;
-          background-size: $full;
-}
diff --git a/bourbon/css3/_border-image.scss b/bourbon/css3/_border-image.scss
deleted file mode 100644
index 0373980422..0000000000
--- a/bourbon/css3/_border-image.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@mixin border-image ($image) {
-  -webkit-border-image: $image;
-     -moz-border-image: $image;
-      -ms-border-image: $image;
-       -o-border-image: $image;
-          border-image: $image;
-}
diff --git a/bourbon/css3/_border-radius.scss b/bourbon/css3/_border-radius.scss
deleted file mode 100644
index f950d4dd98..0000000000
--- a/bourbon/css3/_border-radius.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@mixin border-radius ($radii) {
-  -webkit-border-radius: $radii;
-     -moz-border-radius: $radii;
-      -ms-border-radius: $radii;
-       -o-border-radius: $radii;
-          border-radius: $radii;
-}
-
-@mixin border-top-left-radius($radii) {
-  -webkit-border-top-left-radius: $radii;
-     -moz-border-top-left-radius: $radii;
-      -ms-border-top-left-radius: $radii;
-       -o-border-top-left-radius: $radii;
-          border-top-left-radius: $radii;
-}
-
-@mixin border-top-right-radius($radii) {
-  -webkit-border-top-right-radius: $radii;
-     -moz-border-top-right-radius: $radii;
-      -ms-border-top-right-radius: $radii;
-       -o-border-top-right-radius: $radii;
-          border-top-right-radius: $radii;
-}
-
-@mixin border-bottom-left-radius($radii) {
-  -webkit-border-bottom-left-radius: $radii;
-     -moz-border-bottom-left-radius: $radii;
-      -ms-border-bottom-left-radius: $radii;
-       -o-border-bottom-left-radius: $radii;
-          border-bottom-left-radius: $radii;
-}
-
-@mixin border-bottom-right-radius($radii) {
-  -webkit-border-bottom-right-radius: $radii;
-     -moz-border-bottom-right-radius: $radii;
-      -ms-border-bottom-right-radius: $radii;
-       -o-border-bottom-right-radius: $radii;
-          border-bottom-right-radius: $radii;
-}
-
-@mixin border-top-radius($radii) {
-  @include border-top-left-radius($radii);
-  @include border-top-right-radius($radii);
-}
-
-@mixin border-right-radius($radii) {
-  @include border-top-right-radius($radii);
-  @include border-bottom-right-radius($radii);
-}
-
-@mixin border-bottom-radius($radii) {
-  @include border-bottom-left-radius($radii);
-  @include border-bottom-right-radius($radii);
-}
-
-@mixin border-left-radius($radii) {
-  @include border-top-left-radius($radii);
-  @include border-bottom-left-radius($radii);
-}
diff --git a/bourbon/css3/_box-shadow.scss b/bourbon/css3/_box-shadow.scss
deleted file mode 100644
index ad5c24e7aa..0000000000
--- a/bourbon/css3/_box-shadow.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Box-Shadow Mixin Requires Sass v3.1.1+
-@mixin box-shadow ($shadow-1,
-  $shadow-2: false, $shadow-3: false,
-  $shadow-4: false, $shadow-5: false,
-  $shadow-6: false, $shadow-7: false,
-  $shadow-8: false, $shadow-9: false)
-  {
-    $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
-                   $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
-
-  -webkit-box-shadow: $full;
-     -moz-box-shadow: $full;
-      -ms-box-shadow: $full;
-       -o-box-shadow: $full;
-          box-shadow: $full;
-}
diff --git a/bourbon/css3/_box-sizing.scss b/bourbon/css3/_box-sizing.scss
deleted file mode 100644
index a9c6cdb43f..0000000000
--- a/bourbon/css3/_box-sizing.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@mixin box-sizing ($box) {
-//  content-box | border-box | inherit
-  -webkit-box-sizing: $box;
-     -moz-box-sizing: $box;
-      -ms-box-sizing: $box;
-       -o-box-sizing: $box;
-          box-sizing: $box;
-}
diff --git a/bourbon/css3/_columns.scss b/bourbon/css3/_columns.scss
deleted file mode 100644
index 2896c91d7f..0000000000
--- a/bourbon/css3/_columns.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@mixin columns($arg: auto) {
-// <column-count> || <column-width>
-  -webkit-columns: $arg;
-     -moz-columns: $arg;
-          columns: $arg;
-}
-
-@mixin column-count($int: auto) {
-// auto || integer
-  -webkit-column-count: $int;
-     -moz-column-count: $int;
-          column-count: $int;
-}
-
-@mixin column-gap($length: normal) {
-// normal || length
-  -webkit-column-gap: $length;
-     -moz-column-gap: $length;
-          column-gap: $length;
-}
-
-@mixin column-fill($arg: auto) {
-// auto || length
-  -webkit-columns-fill: $arg;
-     -moz-columns-fill: $arg;
-          columns-fill: $arg;
-}
-
-@mixin column-rule($arg) {
-// <border-width> || <border-style> || <color>
-  -webkit-column-rule: $arg;
-     -moz-column-rule: $arg;
-          column-rule: $arg;
-}
-
-@mixin column-rule-color($color) {
-  -webkit-column-rule-color: $color;
-     -moz-column-rule-color: $color;
-          column-rule-color: $color;
-}
-
-@mixin column-rule-style($style: none) {
-// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
-  -webkit-column-rule-style: $style;
-     -moz-column-rule-style: $style;
-          column-rule-style: $style;
-}
-
-@mixin column-rule-width ($width: none) {
-  -webkit-column-rule-width: $width;
-     -moz-column-rule-width: $width;
-          column-rule-width: $width;
-}
-
-@mixin column-span($arg: none) {
-// none || all
-  -webkit-column-span: $arg;
-     -moz-column-span: $arg;
-          column-span: $arg;
-}
-
-@mixin column-width($length: auto) {
-// auto || length
-  -webkit-column-width: $length;
-     -moz-column-width: $length;
-          column-width: $length;
-}
diff --git a/bourbon/css3/_flex-box.scss b/bourbon/css3/_flex-box.scss
deleted file mode 100644
index 44c1dfd789..0000000000
--- a/bourbon/css3/_flex-box.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-// CSS3 Flexible Box Model and property defaults
-
-// Custom shorthand notation for flexbox
-@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
-  @include display-box;
-  @include box-orient($orient);
-  @include box-pack($pack);
-  @include box-align($align);
-}
-
-@mixin display-box {
-  display: -webkit-box;
-  display: -moz-box;
-  display: box;
-}
-
-@mixin box-orient($orient: inline-axis) {
-// horizontal|vertical|inline-axis|block-axis|inherit
-  -webkit-box-orient: $orient;
-     -moz-box-orient: $orient;
-          box-orient: $orient;
-}
-
-@mixin box-pack($pack: start) {
-// start|end|center|justify
-  -webkit-box-pack: $pack;
-     -moz-box-pack: $pack;
-          box-pack: $pack;
-}
-
-@mixin box-align($align: stretch) {
-// start|end|center|baseline|stretch
-  -webkit-box-align: $align;
-     -moz-box-align: $align;
-          box-align: $align;
-}
-
-@mixin box-direction($direction: normal) {
-// normal|reverse|inherit
-  -webkit-box-direction: $direction;
-     -moz-box-direction: $direction;
-          box-direction: $direction;
-}
-@mixin box-lines($lines: single) {
-// single|multiple
-  -webkit-box-lines: $lines;
-     -moz-box-lines: $lines;
-          box-lines: $lines;
-}
-
-@mixin box-ordinal-group($integer: 1) {
-  -webkit-box-ordinal-group: $integer;
-     -moz-box-ordinal-group: $integer;
-          box-ordinal-group: $integer;
-}
-
-@mixin box-flex($value: 0.0) {
-  -webkit-box-flex: $value;
-     -moz-box-flex: $value;
-          box-flex: $value;
-}
-
-@mixin box-flex-group($integer: 1) {
-  -webkit-box-flex-group: $integer;
-     -moz-box-flex-group: $integer;
-          box-flex-group: $integer;
-}
diff --git a/bourbon/css3/_inline-block.scss b/bourbon/css3/_inline-block.scss
deleted file mode 100644
index d79a13c851..0000000000
--- a/bourbon/css3/_inline-block.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Legacy support for inline-block in IE7 (maybe IE6)
-@mixin inline-block {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: baseline;
-  zoom: 1;
-  *display: inline;
-  *vertical-align: auto;
-}
diff --git a/bourbon/css3/_linear-gradient.scss b/bourbon/css3/_linear-gradient.scss
deleted file mode 100644
index 0b68501719..0000000000
--- a/bourbon/css3/_linear-gradient.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@mixin linear-gradient($pos, $G1, $G2: false,
-                       $G3: false, $G4: false,
-                       $G5: false, $G6: false,
-                       $G7: false, $G8: false,
-                       $G9: false, $G10: false,
-                       $fallback: false) {
-  // Detect what type of value exists in $pos
-  $pos-type: type-of(nth($pos, 1));
-
-  // If $pos is missing from mixin, reassign vars and add default position
-  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
-    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
-     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
-    $pos: top; // Default position
-  }
-
-  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-
-  // Set $G1 as the default fallback color
-  $fallback-color: nth($G1, 1);
-
-  // If $fallback is a color use that color as the fallback color
-  @if type-of($fallback) == color {
-    $fallback-color: $fallback;
-  }
-
-  background-color: $fallback-color;
-  background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
-  background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
-  background-image:     -moz-linear-gradient($pos, $full);
-  background-image:      -ms-linear-gradient($pos, $full);
-  background-image:       -o-linear-gradient($pos, $full);
-  background-image: unquote("linear-gradient(#{$pos}, #{$full})");
-}
-
-
-// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
-// @include linear-gradient(#1e5799, #2989d8);
-// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
-// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
-// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
diff --git a/bourbon/css3/_radial-gradient.scss b/bourbon/css3/_radial-gradient.scss
deleted file mode 100644
index fbd0a8523c..0000000000
--- a/bourbon/css3/_radial-gradient.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// Requires Sass 3.1+
-@mixin radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
-                       $G3: false, $G4: false,
-                       $G5: false, $G6: false,
-                       $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
-
-  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-
-  background-color:  nth($G1, 1);
-  background-image:          deprecated-webkit-gradient(radial, $full); // Safari <= 5.0
-  background-image:  -webkit-radial-gradient($pos, $shape-size, $full);
-  background-image:     -moz-radial-gradient($pos, $shape-size, $full);
-  background-image:      -ms-radial-gradient($pos, $shape-size, $full);
-  background-image:       -o-radial-gradient($pos, $shape-size, $full);
-  background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})");
-}
-
-//  Usage: Gradient position and shape-size are required. Color stops are optional.
-//  @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
-//  @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
diff --git a/bourbon/css3/_transform.scss b/bourbon/css3/_transform.scss
deleted file mode 100644
index 8d19e8b88d..0000000000
--- a/bourbon/css3/_transform.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@mixin transform($property: none) {
-//  none | <transform-function>
-  -webkit-transform: $property;
-     -moz-transform: $property;
-      -ms-transform: $property;
-       -o-transform: $property;
-          transform: $property;
-}
-
-@mixin transform-origin($axes: 50%) {
-// x-axis - left | center | right  | length | %
-// y-axis - top  | center | bottom | length | %
-// z-axis -                          length
-  -webkit-transform-origin: $axes;
-     -moz-transform-origin: $axes;
-      -ms-transform-origin: $axes;
-       -o-transform-origin: $axes;
-          transform-origin: $axes;
-}
diff --git a/bourbon/css3/_transition.scss b/bourbon/css3/_transition.scss
deleted file mode 100644
index 058dbe0e33..0000000000
--- a/bourbon/css3/_transition.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
-// Example: @include transition (all, 2.0s, ease-in-out);
-//          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
-//          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
-
-@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) {
-
-  // Detect # of args passed into each variable
-  $length-of-property:        length($property);
-  $length-of-duration:        length($duration);
-  $length-of-timing-function: length($timing-function);
-  $length-of-delay:           length($delay);
-
-  @if $length-of-property > 1 {
-    @include transition-property(zip($property)); }
-  @else {
-    @include transition-property(    $property);
-  }
-
-  @if $length-of-duration > 1 {
-    @include transition-duration(zip($duration)); }
-  @else {
-    @include transition-duration(    $duration);
-  }
-
-  @if $length-of-timing-function > 1 {
-    @include transition-timing-function(zip($timing-function)); }
-  @else {
-    @include transition-timing-function(    $timing-function);
-  }
-
-  @if $length-of-delay > 1 {
-    @include transition-delay(zip($delay)); }
-  @else {
-    @include transition-delay(    $delay);
-  }
-}
-
-
-@mixin transition-property ($prop-1: all,
-  $prop-2: false, $prop-3: false,
-  $prop-4: false, $prop-5: false,
-  $prop-6: false, $prop-7: false,
-  $prop-8: false, $prop-9: false)
-  {
-    $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5,
-                   $prop-6, $prop-7, $prop-8, $prop-9);
-
-  -webkit-transition-property: $full;
-     -moz-transition-property: $full;
-      -ms-transition-property: $full;
-       -o-transition-property: $full;
-          transition-property: $full;
-}
-
-@mixin transition-duration ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
-                   $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-transition-duration: $full;
-     -moz-transition-duration: $full;
-      -ms-transition-duration: $full;
-       -o-transition-duration: $full;
-          transition-duration: $full;
-}
-
-@mixin transition-timing-function ($motion-1: ease,
-  $motion-2: false, $motion-3: false,
-  $motion-4: false, $motion-5: false,
-  $motion-6: false, $motion-7: false,
-  $motion-8: false, $motion-9: false)
-  {
-    $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5,
-                   $motion-6, $motion-7, $motion-8, $motion-9);
-
-// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
-  -webkit-transition-timing-function: $full;
-     -moz-transition-timing-function: $full;
-      -ms-transition-timing-function: $full;
-       -o-transition-timing-function: $full;
-          transition-timing-function: $full;
-}
-
-@mixin transition-delay ($time-1: 0,
-  $time-2: false, $time-3: false,
-  $time-4: false, $time-5: false,
-  $time-6: false, $time-7: false,
-  $time-8: false, $time-9: false)
-  {
-    $full: compact($time-1, $time-2, $time-3, $time-4, $time-5,
-                   $time-6, $time-7, $time-8, $time-9);
-
-  -webkit-transition-delay: $full;
-     -moz-transition-delay: $full;
-      -ms-transition-delay: $full;
-       -o-transition-delay: $full;
-          transition-delay: $full;
-}
-
diff --git a/bourbon/functions/_deprecated-webkit-gradient.scss b/bourbon/functions/_deprecated-webkit-gradient.scss
deleted file mode 100644
index 1322f6f60e..0000000000
--- a/bourbon/functions/_deprecated-webkit-gradient.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// Render Deprecated Webkit Gradient - Linear || Radial
-//************************************************************************//
-@function deprecated-webkit-gradient($type, $full) {
-  $gradient-list: ();
-  $gradient: false;
-  $full-length: length($full);
-  $percentage: false;
-  $gradient-type: $type;
-
-  @for $i from 1 through $full-length {
-    $gradient: nth($full, $i);
-
-    @if length($gradient) == 2 {
-      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
-      $gradient-list: join($gradient-list, $color-stop, comma);
-    }
-    @else {
-      @if $i == $full-length {
-        $percentage: 100%;
-      }
-      @else {
-        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
-      }
-      $color-stop: color-stop(unquote($percentage), $gradient);
-      $gradient-list: join($gradient-list, $color-stop, comma);
-    }
-  }
-
-  @if $type == radial {
-    $gradient: -webkit-gradient(radial, center center, 0, center center, 460, $gradient-list);
-  }
-  @else if $type == linear {
-    $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list);
-  }
-  @return $gradient;
-}
diff --git a/bourbon/functions/_grid-width.scss b/bourbon/functions/_grid-width.scss
deleted file mode 100644
index 8e63d83d60..0000000000
--- a/bourbon/functions/_grid-width.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@function grid-width($n) {
-  @return $n * $gw-column + ($n - 1) * $gw-gutter;
-}
-
-// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
-//
-//  $gw-column: 100px;         // Column Width
-//  $gw-gutter: 40px;          // Gutter Width
-//
-//  div {
-//    width: grid-width(4);    // returns 520px;
-//    margin-left: $gw-gutter; // returns 40px;
-//  }
diff --git a/bourbon/functions/_linear-gradient.scss b/bourbon/functions/_linear-gradient.scss
deleted file mode 100644
index 3b10ca82a6..0000000000
--- a/bourbon/functions/_linear-gradient.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@function linear-gradient($pos: top, $G1: false, $G2: false,
-                       $G3: false, $G4: false,
-                       $G5: false, $G6: false,
-                       $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
-
-  // Detect what type of value exists in $pos
-  $pos-type: type-of(nth($pos, 1));
-
-  // If $pos is missing from mixin, reassign vars and add default position
-  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
-    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
-     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
-    $pos: top; // Default position
-  }
-
-  $type: linear;
-  $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-  $type-gradient: append($type, $gradient, comma);
-
-  @return $type-gradient;
-}
-
diff --git a/bourbon/functions/_radial-gradient.scss b/bourbon/functions/_radial-gradient.scss
deleted file mode 100644
index 3d5461ad6e..0000000000
--- a/bourbon/functions/_radial-gradient.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// This function is required and used by the background-image mixin.
-@function radial-gradient($pos, $shape-size,
-                       $G1,        $G2,
-                       $G3: false, $G4: false,
-                       $G5: false, $G6: false,
-                       $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
-
-  $type: radial;
-  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-  $type-gradient: append($type, $gradient, comma);
-
-  @return $type-gradient;
-}
-
diff --git a/bourbon/functions/_tint-shade.scss b/bourbon/functions/_tint-shade.scss
deleted file mode 100644
index f7172004ac..0000000000
--- a/bourbon/functions/_tint-shade.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Add percentage of white to a color
-@function tint($color, $percent){
-  @return mix(white, $color, $percent);
-}
-
-// Add percentage of black to a color
-@function shade($color, $percent){
-  @return mix(black, $color, $percent);
-}
diff --git a/bourbon/lib/bourbon.rb b/bourbon/lib/bourbon.rb
deleted file mode 100644
index 1635be836d..0000000000
--- a/bourbon/lib/bourbon.rb
+++ /dev/null
@@ -1,19 +0,0 @@
-require "bourbon/generator"
-
-module Bourbon
-  if defined?(Rails)
-    class Engine < ::Rails::Engine
-      require 'bourbon/engine'
-    end
-
-    module Rails
-      class Railtie < ::Rails::Railtie
-        rake_tasks do
-          load "tasks/install.rake"
-        end
-      end
-    end
-  end
-end
-
-require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions")
diff --git a/bourbon/lib/bourbon/sass_extensions.rb b/bourbon/lib/bourbon/sass_extensions.rb
deleted file mode 100644
index ad567200e3..0000000000
--- a/bourbon/lib/bourbon/sass_extensions.rb
+++ /dev/null
@@ -1,6 +0,0 @@
-module Bourbon::SassExtensions
-end
-
-require "sass"
-
-require File.join(File.dirname(__FILE__), "/sass_extensions/functions")
diff --git a/bourbon/lib/bourbon/sass_extensions/functions.rb b/bourbon/lib/bourbon/sass_extensions/functions.rb
deleted file mode 100644
index daa877650e..0000000000
--- a/bourbon/lib/bourbon/sass_extensions/functions.rb
+++ /dev/null
@@ -1,13 +0,0 @@
-module Bourbon::SassExtensions::Functions
-end
-
-require File.join(File.dirname(__FILE__), "/functions/compact")
-
-module Sass::Script::Functions
-  include Bourbon::SassExtensions::Functions::Compact
-end
-
-# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
-class Sass::Script::Functions::EvaluationContext
-  include Sass::Script::Functions
-end
diff --git a/bourbon/lib/bourbon/sass_extensions/functions/compact.rb b/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
deleted file mode 100644
index 5192e921e7..0000000000
--- a/bourbon/lib/bourbon/sass_extensions/functions/compact.rb
+++ /dev/null
@@ -1,13 +0,0 @@
-# Compact function pulled from compass
-module Bourbon::SassExtensions::Functions::Compact
-
-  def compact(*args)
-    sep = :comma
-    if args.size == 1 && args.first.is_a?(Sass::Script::List)
-      args = args.first.value
-      sep = args.first.separator
-    end
-    Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
-  end
-
-end
diff --git a/main.html b/main.html
index 96f2a32cd4..567f41b1db 100644
--- a/main.html
+++ b/main.html
@@ -5,7 +5,6 @@
 
   <link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" />
   <link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" />
-  <link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
   <link href="/static/css/print.css" rel="stylesheet" type="text/css" media="print"/>
 
   <script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
diff --git a/sass/_activation.scss b/sass/_activation.scss
deleted file mode 100644
index 8ae293200e..0000000000
--- a/sass/_activation.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-body.activation {
-  footer {
-  max-width: 600px;
-  text-align: center;
-
-  p {
-    float: none;
-  }
-
-    ul {
-      display: none;
-    }
-  }
-}
-
-section.activation {
-  @extend .wrapper;
-  @include box-shadow(0 1px 0 #fff);
-  @include box-sizing(border-box);
-  background: #fff;
-  border-top: 0;
-  border: 1px solid #ccc;
-  max-width: 600px;
-  padding: lh();
-  margin-top: lh();
-}
diff --git a/sass/_base-variables.scss b/sass/_base-variables.scss
deleted file mode 100644
index c89d62b3f2..0000000000
--- a/sass/_base-variables.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// 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;
-}
-
-// Variables
-// ---------------------------------------- //
-
-// fonts
-$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;
-$fg-max-width: 1400px;
-$fg-min-width: 810px;
-
-// color
-$light-gray: #ddd;
-$dark-gray: #333;
-$mit-red: #993333;
-
-$text-color: $dark-gray;
-$border-color: $light-gray;
diff --git a/sass/_index.scss b/sass/_index.scss
deleted file mode 100644
index 163c46305e..0000000000
--- a/sass/_index.scss
+++ /dev/null
@@ -1,478 +0,0 @@
-body {
-  background-color: #fff;
-  color: #444;
-  font: $body-font-size $body-font-family;
-
-  :focus {
-    outline-color: #ccc;
-  }
-
-  h1 {
-    font: 800 24px $header-font-family;
-  }
-
-  li {
-    margin-bottom: lh();
-  }
-
-  em {
-    font-style: italic;
-  }
-
-  a {
-    color: $mit-red;
-    font-style: italic;
-    text-decoration: none;
-
-    &:hover, &:focus {
-      color: darken($mit-red, 10%);
-    }
-  }
-
-  #{$all-text-inputs}, textarea {
-    @include box-shadow(0 -1px 0 #fff);
-    @include linear-gradient(#eee, #fff);
-    border: 1px solid #999;
-    font: $body-font-size $body-font-family;
-    padding: 4px;
-    width: 100%;
-
-    &:focus {
-      border-color: $mit-red;
-    }
-  }
-}
-
-header.announcement {
-  @include background-size(cover);
-  background: #333;
-  border-bottom: 1px solid #000;
-  color: #fff;
-  -webkit-font-smoothing: antialiased;
-
-  &.home {
-    background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");
-
-    @media screen and (min-width: 1200px) {
-      background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
-    }
-
-    div {
-      padding: lh(10) lh() lh(3);
-
-      //hide login link for homepage
-      nav {
-        h1 {
-          margin-right: 0;
-        }
-
-        a.login {
-          display: none;
-        }
-      }
-    }
-  }
-
-  &.course {
-    background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
-
-    @media screen and (min-width: 1200px) {
-      background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
-    }
-
-    @media screen and (max-width: 1199px) and (min-width: 700px) {
-      background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
-    }
-
-    div {
-      padding: lh(4) lh() lh(2);
-    }
-  }
-
-  div {
-    @extend .wrapper;
-    position: relative;
-
-    nav {
-      position: absolute;
-      top: 0;
-      right: lh();
-      @include border-radius(0 0 3px 3px);
-      background: #333;
-      background: rgba(#000, .7);
-      padding: lh(.5) lh();
-
-      h1 {
-        @include inline-block();
-        margin-right: lh(.5);
-
-        a {
-          font: italic 800 18px $header-font-family;
-          color: #fff;
-          text-decoration: none;
-
-          &:hover, &:focus {
-            color: #999;
-          }
-        }
-      }
-
-      a.login {
-        text-decoration: none;
-        color: #fff;
-        font-size: 12px;
-        font-style: normal;
-        font-family: $header-font-family;
-
-        &:hover, &:focus {
-          color: #999;
-        }
-      }
-    }
-
-    section {
-      @extend .clearfix;
-      @include inline-block();
-      background: $mit-red;
-      margin-left: flex-grid(4) + flex-gutter();
-      padding: lh() lh(1.5);
-
-      h1 {
-        @include inline-block();
-        font-family: "Open Sans";
-        font-size: 30px;
-        font-weight: 800;
-        line-height: 1.2em;
-        margin: 0 lh() 0 0;
-      }
-
-      h2 {
-        @include inline-block();
-        font-family: "Open Sans";
-        font-size: 24px;
-        font-weight: 400;
-        line-height: 1.2em;
-      }
-
-      &.course {
-        section {
-          width: flex-grid(4, 8);
-          margin-right: flex-gutter(8);
-          float: left;
-          margin-left: 0;
-          padding: 0;
-
-          a {
-            @extend .button;
-            @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
-            background-color: darken($mit-red, 20%);
-            display: block;
-            padding: lh(.5) lh();
-            border-color: darken($mit-red, 30%);
-            text-align: center;
-
-            &:hover {
-              background-color: darken($mit-red, 10%);
-              border-color: darken($mit-red, 20%);
-            }
-          }
-        }
-
-        p {
-          width: flex-grid(4, 8);
-          line-height: lh();
-          float: left;
-        }
-      }
-    }
-  }
-}
-
-section.index-content {
-  @extend .wrapper;
-  @extend .clearfix;
-
-  section {
-    @extend .clearfix;
-    float: left;
-
-    h1 {
-      font-size: 24px;
-      font-weight: 800;
-      font-family: "Open Sans";
-      margin-bottom: lh();
-    }
-
-    p {
-      line-height: lh();
-      margin-bottom: lh();
-    }
-
-    ul {
-      margin: 0;
-      // list-style: disc outside none;
-
-      // li {
-      //   list-style: disc outside none;
-      // }
-    }
-
-    &.about {
-      @include box-sizing(border-box);
-      border-right: 1px solid #e5e5e5;
-      margin-right: flex-gutter();
-      padding-right: flex-gutter() / 2;
-      width: flex-grid(8);
-
-      section {
-        @extend .clearfix;
-        margin-bottom: lh();
-
-        p {
-          width: flex-grid(4, 8);
-          float: left;
-
-          &:nth-child(odd) {
-            margin-right: flex-gutter(8);
-          }
-        }
-
-        &.intro {
-          section {
-            margin-bottom: 0;
-
-            &.intro-text {
-              margin-right: flex-gutter(8);
-              width: flex-grid(4, 8);
-
-              p {
-                margin-right: 0;
-                width: auto;
-                float: none;
-              }
-            }
-
-            &.intro-video {
-              width: flex-grid(4, 8);
-
-              a {
-                display: block;
-                width: 100%;
-
-                img {
-                  width: 100%;
-                }
-
-                span {
-                  display: none;
-                }
-              }
-            }
-          }
-        }
-
-        &.features {
-          border-top: 1px solid #E5E5E5;
-          padding-top: lh();
-          margin-bottom: 0;
-
-          h2 {
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            color: #666;
-            margin-bottom: lh();
-
-            span {
-              text-transform: none;
-            }
-          }
-
-          p {
-            width: auto;
-            clear: both;
-
-            strong {
-              font-family: "Open sans";
-              font-weight: 800;
-            }
-
-            a {
-              color: $mit-red;
-              text-decoration: none;
-              @include transition();
-
-              &:hover, &:focus {
-                color: darken($mit-red, 15%);
-              }
-            }
-          }
-
-          ul {
-            margin-bottom: 0;
-
-            li {
-              line-height: lh();
-              width: flex-grid(4, 8);
-              float: left;
-              margin-bottom: lh(.5);
-
-              &:nth-child(odd) {
-                margin-right: flex-gutter(8);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &.course, &.staff {
-      width: flex-grid(4);
-
-      h1 {
-        font: normal $body-font-size $body-font-family;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        color: #666;
-        margin-bottom: lh();
-      }
-
-      h2 {
-        font: 800 24px $header-font-family;
-      }
-
-      h3 {
-        font: 400 18px $header-font-family;
-      }
-
-      a {
-        @extend .button;
-      }
-
-      ul {
-        list-style: none;
-
-        li {
-          img {
-            float: left;
-            margin-right: lh(.5);
-          }
-        }
-      }
-    }
-
-    &.course {
-      h2 {
-        padding-top: lh(5);
-        background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
-        @include background-size(contain);
-
-        @media screen and (max-width: 998px) {
-          background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
-        }
-      }
-    }
-
-
-    // index
-    //---------------------------------------- //
-    &.about-course {
-      @include box-sizing(border-box);
-      border-right: 1px solid #e5e5e5;
-      margin-right: flex-gutter();
-      padding-right: flex-gutter() / 2;
-      width: flex-grid(8);
-
-      section {
-        width: flex-grid(4, 8);
-
-
-        &.about-info {
-          margin-right: flex-gutter(8);
-        }
-
-        &.requirements {
-          clear: both;
-          width: 100%;
-          border-top: 1px solid #E5E5E5;
-          padding-top: lh();
-          margin-bottom: 0;
-
-          p {
-            float: left;
-            width: flex-grid(4, 8);
-            margin-right: flex-gutter(8);
-
-            &:nth-child(odd) {
-              margin-right: 0;
-            }
-          }
-        }
-
-        &.cta {
-          width: 100%;
-          text-align: center;
-
-          a.enroll {
-            @extend .button;
-            padding: lh(.5) lh(2);
-            @include inline-block();
-            text-align: center;
-            font: 800 18px $header-font-family;
-          }
-        }
-      }
-    }
-  }
-}
-
-section.copyright, section.tos, section.privacy-policy, section.honor-code {
-  @extend .subpage;
-}
-
-footer {
-  @extend .wrapper;
-  @extend .clearfix;
-  padding-top: 0;
-
-  div.footer-wrapper {
-    border-top: 1px solid #e5e5e5;
-    padding: lh() 0;
-    background: url('/static/images/marketing/mit-logo.png') right center no-repeat;
-
-    a {
-      color: #888;
-      text-decoration: none;
-      @include transition();
-
-      &:hover, &:focus {
-        color: #666;
-      }
-    }
-
-    p {
-      @include inline-block();
-      margin-right: lh();
-    }
-
-    ul {
-      @include inline-block();
-
-      li {
-        @include inline-block();
-
-        &:after {
-          content: ' |';
-          display: inline;
-          color: #ccc;
-        }
-
-        &:last-child {
-          &:after {
-            content: none;
-          }
-        }
-
-      }
-    }
-  }
-}
diff --git a/sass/_jquery-ui-1.8.16.custom.scss b/sass/_jquery-ui-1.8.16.custom.scss
new file mode 100644
index 0000000000..d03e1ca7a2
--- /dev/null
+++ b/sass/_jquery-ui-1.8.16.custom.scss
@@ -0,0 +1,568 @@
+/*
+ * jQuery UI CSS Framework 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+
+/*
+ * jQuery UI CSS Framework 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ *
+ * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Helvetica,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=2px&bgColorHeader=7fbcfd&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=50&borderColorHeader=dae5c9&fcHeader=031634&iconColorHeader=031634&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=dae5c9&fcContent=031634&iconColorContent=adcc80&bgColorDefault=7fbcdf&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=100&borderColorDefault=dae5c9&fcDefault=7a994c&iconColorDefault=adcc80&bgColorHover=bddeff&bgTextureHover=03_highlight_soft.png&bgImgOpacityHover=25&borderColorHover=7fbcdf&fcHover=7a994c&iconColorHover=adcc80&bgColorActive=023063&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=dae5c9&fcActive=dae5c9&iconColorActive=454545&bgColorHighlight=ffffff&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=cccccc&fcHighlight=444444&iconColorHighlight=adcc80&bgColorError=ffffff&bgTextureError=01_flat.png&bgImgOpacityError=55&borderColorError=fa720a&fcError=222222&iconColorError=fa720a&bgColorOverlay=eeeeee&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=-4px&offsetLeftShadow=-4px&cornerRadiusShadow=0px
+ */
+
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Helvetica, Arial, sans-serif; font-size: 1.1em; }
+.ui-widget .ui-widget { font-size: 1em; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Helvetica, Arial, sans-serif; font-size: 1em; }
+.ui-widget-content { border: 1px solid #dae5c9; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #031634; }
+.ui-widget-content a { color: #031634; }
+.ui-widget-header { border: 1px solid #dae5c9; background: #7fbcfd url(images/ui-bg_highlight-soft_50_7fbcfd_1x100.png) 50% 50% repeat-x; color: #031634; font-weight: bold; }
+.ui-widget-header a { color: #031634; }
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #dae5c9; background: #7fbcdf url(images/ui-bg_highlight-soft_100_7fbcdf_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #7a994c; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #7a994c; text-decoration: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #7fbcdf; background: #bddeff url(images/ui-bg_highlight-soft_25_bddeff_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #7a994c; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #7a994c; text-decoration: none; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #dae5c9; background: #023063 url(images/ui-bg_glass_65_023063_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #dae5c9; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #dae5c9; text-decoration: none; }
+.ui-widget :active { outline: none; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #cccccc; background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x; color: #444444; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #444444; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #fa720a; background: #ffffff url(images/ui-bg_flat_55_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
+.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #222222; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #222222; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_adcc80_256x240.png); }
+.ui-widget-content .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_031634_256x240.png); }
+.ui-state-default .ui-icon { background-image: url(images/ui-icons_adcc80_256x240.png); }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); }
+.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
+.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_adcc80_256x240.png); }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_fa720a_256x240.png); }
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-off { background-position: -96px -144px; }
+.ui-icon-radio-on { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; }
+.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }
+
+/* Overlays */
+.ui-widget-overlay { background: #eeeeee url(images/ui-bg_flat_0_eeeeee_40x100.png) 50% 50% repeat-x; opacity: .80;filter:Alpha(Opacity=80); }
+.ui-widget-shadow { margin: -4px 0 0 -4px; padding: 4px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .60;filter:Alpha(Opacity=60); -moz-border-radius: 0px; -khtml-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }/*
+ * jQuery UI Resizable 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Resizable#theming
+ */
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*
+ * jQuery UI Selectable 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Selectable#theming
+ */
+.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
+/*
+ * jQuery UI Accordion 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Accordion#theming
+ */
+/* IE/Win - Fix animation bug - #4615 */
+.ui-accordion { width: 100%; }
+.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
+.ui-accordion .ui-accordion-li-fix { display: inline; }
+.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
+.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
+.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
+.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
+.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
+.ui-accordion .ui-accordion-content-active { display: block; }
+/*
+ * jQuery UI Autocomplete 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Autocomplete#theming
+ */
+.ui-autocomplete { position: absolute; cursor: default; }	
+
+/* workarounds */
+* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+
+/*
+ * jQuery UI Menu 1.8.16
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Menu#theming
+ */
+.ui-menu {
+	list-style:none;
+	padding: 2px;
+	margin: 0;
+	display:block;
+	float: left;
+}
+.ui-menu .ui-menu {
+	margin-top: -3px;
+}
+.ui-menu .ui-menu-item {
+	margin:0;
+	padding: 0;
+	zoom: 1;
+	float: left;
+	clear: left;
+	width: 100%;
+}
+.ui-menu .ui-menu-item a {
+	text-decoration:none;
+	display:block;
+	padding:.2em .4em;
+	line-height:1.5;
+	zoom:1;
+}
+.ui-menu .ui-menu-item a.ui-state-hover,
+.ui-menu .ui-menu-item a.ui-state-active {
+	font-weight: normal;
+	margin: -1px;
+}
+/*
+ * jQuery UI Button 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Button#theming
+ */
+.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
+.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
+button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
+.ui-button-icons-only { width: 3.4em; } 
+button.ui-button-icons-only { width: 3.7em; } 
+
+/*button text element */
+.ui-button .ui-button-text { display: block; line-height: 1.4;  }
+.ui-button-text-only .ui-button-text { padding: .4em 1em; }
+.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
+.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
+.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
+.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
+/* no icon support for input elements, provide padding by default */
+input.ui-button { padding: .4em 1em; }
+
+/*button icon element(s) */
+.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
+.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
+.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
+.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
+.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
+
+/*button sets*/
+.ui-buttonset { margin-right: 7px; }
+.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
+
+/* workarounds */
+button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
+/*
+ * jQuery UI Dialog 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Dialog#theming
+ */
+.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
+.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
+.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
+.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
+.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
+.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
+.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
+.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
+.ui-draggable .ui-dialog-titlebar { cursor: move; }
+/*
+ * jQuery UI Slider 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Slider#theming
+ */
+.ui-slider { position: relative; text-align: left; }
+.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
+.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
+
+.ui-slider-horizontal { height: .8em; }
+.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
+.ui-slider-horizontal .ui-slider-range-min { left: 0; }
+.ui-slider-horizontal .ui-slider-range-max { right: 0; }
+
+.ui-slider-vertical { width: .8em; height: 100px; }
+.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
+.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
+.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
+.ui-slider-vertical .ui-slider-range-max { top: 0; }/*
+ * jQuery UI Tabs 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Tabs#theming
+ */
+.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
+.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
+.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
+.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
+.ui-tabs .ui-tabs-hide { display: none !important; }
+/*
+ * jQuery UI Datepicker 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Datepicker#theming
+ */
+.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
+.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
+.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
+.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
+.ui-datepicker .ui-datepicker-prev { left:2px; }
+.ui-datepicker .ui-datepicker-next { right:2px; }
+.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
+.ui-datepicker .ui-datepicker-next-hover { right:1px; }
+.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
+.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
+.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
+.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
+.ui-datepicker select.ui-datepicker-month, 
+.ui-datepicker select.ui-datepicker-year { width: 49%;}
+.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
+.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
+.ui-datepicker td { border: 0; padding: 1px; }
+.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
+.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
+.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi { width:auto; }
+.ui-datepicker-multi .ui-datepicker-group { float:left; }
+.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
+.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
+.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
+.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
+.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
+
+/* RTL support */
+.ui-datepicker-rtl { direction: rtl; }
+.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+
+/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
+.ui-datepicker-cover {
+    display: none; /*sorry for IE5*/
+    display/**/: block; /*sorry for IE5*/
+    position: absolute; /*must have*/
+    z-index: -1; /*must have*/
+    filter: mask(); /*must have*/
+    top: -4px; /*must have*/
+    left: -4px; /*must have*/
+    width: 200px; /*must have*/
+    height: 200px; /*must have*/
+}/*
+ * jQuery UI Progressbar 1.8.16
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Progressbar#theming
+ */
+.ui-progressbar { height:2em; text-align: left; }
+.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
\ No newline at end of file
diff --git a/sass/_layout.scss b/sass/_layout.scss
deleted file mode 100644
index e124f0f62f..0000000000
--- a/sass/_layout.scss
+++ /dev/null
@@ -1,191 +0,0 @@
-html {
-  margin-top: 0;
-
-  body {
-    color: $dark-gray;
-    font: $body-font-size $body-font-family;
-    text-align: center;
-    margin: 0;
-    background: #f4f4f4; //#f3f1e5
-
-    div.header-wrapper {
-      // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
-      @include box-shadow(inset 0 -1px 2px darken($mit-red, 10%));
-      background: $mit-red;
-      border-bottom: 1px solid #fff;
-
-      header {
-        @extend .clearfix;
-        @extend .wrapper;
-        @include box-sizing(border-box);
-        padding: 0 $body-line-height;
-
-        hgroup {
-          @extend .clearfix;
-          float: left;
-
-          h1 {
-            border-right: 1px solid darken($mit-red, 5%);
-            color: darken($mit-red, 25%);
-            font-size: 20px;
-            font-weight: 800;
-            margin: 0 lh() 0 0;
-            padding: 17px lh() 14px 0;
-            text-shadow: 0 1px 0 lighten($mit-red, 10%);
-            line-height: lh();
-            @include inline-block();
-          }
-
-          h2 {
-            @include inline-block();
-            margin: 0 lh() 0 0;
-            padding: 19px lh() 9px 0;
-            line-height: lh();
-            border-right: 1px solid darken($mit-red, 5%);
-            -webkit-font-smoothing: antialiased;
-
-            a {
-              color: #fff;
-              text-decoration: none;
-
-              &:hover {
-                color: rgba(#fff, .7);
-              }
-            }
-          }
-
-          @media screen and (max-width: 920px) {
-            border-bottom: 1px solid darken($mit-red, 5%);
-            display: block;
-            float: none;
-
-            h1 {
-              float: right;
-              border: 0;
-              margin-right: 0;
-              padding-right: 0;
-            }
-
-            h2 {
-              float: left;
-              border: 0;
-              margin-right: 0;
-              padding-right: 0;
-            }
-          }
-        }
-
-        nav {
-          float: left;
-          display: block;
-          margin: 0;
-          padding: 0;
-          text-shadow: 0 -1px 0 darken($mit-red, 10%);
-          -webkit-font-smoothing: antialiased;
-
-
-          ul {
-            @extend .clearfix;
-            display: inline-block;
-            padding: 19px 0 9px;
-            margin: 0;
-
-            li {
-              margin-right: lh();
-              display: inline-block;
-              margin-bottom: 0;
-              line-height: lh();
-
-              a {
-                color: #fff;
-                text-decoration: none;
-
-                &:hover {
-                  color: rgba(#fff, .7);
-                  background-color: none;
-                  text-decoration: none;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    section.main-content {
-      @extend .clearfix;
-      @extend .wrapper;
-      @include box-sizing(border-box);
-      @include border-radius(4px);
-      overflow: hidden;
-      background: #fff;
-      border-bottom: 1px solid #bbb;
-
-      @media screen and (min-width: 1400px) {
-        // @include border-radius(3px);
-        @include box-shadow(0 0 4px #dfdfdf);
-        border: 1px solid #bbb;
-        margin-top: lh(.5);
-      }
-    }
-
-    img {
-      max-width: 100%;
-      height: auto;
-    }
-
-    footer {
-      @extend .clearfix;
-      @extend .wrapper;
-      @include box-sizing(border-box);
-      color: #777;
-      margin-top: $body-line-height;
-      padding: 0 $body-line-height;
-
-      p {
-        float: left;
-
-        a {
-          color: #444;
-
-          &:link, &:visited {
-            color: #444;
-          }
-
-          &:hover, &:focus {
-            color: #000;
-          }
-        }
-      }
-
-      ul {
-        float: right;
-
-        li {
-          display: inline-block;
-          margin-right: 20px;
-
-          a {
-            color: #444;
-
-            &:link, &:visited {
-              color: #444;
-            }
-
-            &:hover, &:focus {
-              color: #000;
-            }
-          }
-        }
-      }
-    }
-
-    &.activation {
-      footer {
-        ul {
-          display: none;
-        }
-      }
-    }
-  }
-}
diff --git a/sass/_local.scss b/sass/_local.scss
deleted file mode 100644
index bd866e3bb5..0000000000
--- a/sass/_local.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-#hide_acc {
-    min-height:600;
-}
-
-#mainblock {
-    border: 0; 
-    padding: 0; 
-    margin: 0;
-    width: 200;
-    min-height:600px;
-    margin-left: 276px;
-    margin-right: 0px;
-}
-
-.bordered { border: 1px solid #AAAAAA; border-style : dotted; } 
-
-.seq_problem_visited    {     background-color: #ccccaa;}
-.seq_video_visited      {     background-color: #ccaacc;}
-.seq_html_visited       {     background-color: #caaccc;}
-.seq_tab_visited        {     background-color: #aacccc;}
-.seq_vertical_visited   {     background-color: #acaccc;}
-.seq_sequential_visited {     background-color: #cacacc;}
-.seq_problem_visited    {     background-color: #ccacac;}
-.seq_schematic_visited  {     background-color: #cccaca;}
-
-.seq_problem_inactive    {     background-color: #aaaa99;}
-.seq_video_inactive      {     background-color: #aa99aa;}
-.seq_video_inactive      {     background-color: #aaa99a;}
-.seq_html_inactive       {     background-color: #a99aaa;}
-.seq_tab_inactive        {     background-color: #99aaaa;}
-.seq_vertical_inactive   {     background-color: #9a9aab;}
-.seq_sequential_inactive {     background-color: #a9a9aa;}
-.seq_problem_inactive    {     background-color: #aa9a9a;}
-.seq_schematic_inactive  {     background-color: #aaa9a9;}
-
-.seq_active { background-color: red;}
diff --git a/sass/_theme.scss b/sass/_theme.scss
deleted file mode 100644
index 31e45ae734..0000000000
--- a/sass/_theme.scss
+++ /dev/null
@@ -1,190 +0,0 @@
-/*
-----------------------------------------------------------------------------------------
-
-Copyright 2010 - Thierry Ruiz - www.dotemplate.com - All rights reserved.
-
-THIS TEMPLATE IS FREE AS LONG AS YOU KEEP THE LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER
-TO REMOVE THE LINK, PLEASE MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate
-
-pmitros donated $10
-
-Colors: 
-Light blue: bddeff
-      Blue: 7fbcfd
-Very dark blue: #031634
-
-Dark blue: #023063;
-Dark Greenish: #7a994c;
-Greenish: #adcc80;
-Very light greenish: #dae5c9;
-Bright orange: #fa720a;
-
-----------------------------------------------------------------------------------------
-*/
-
-
-h1 {
-  clear:both;
-}
-
-h2 {
-  clear:both;
-}
-
-h3 {
-  font-size:1em;
-  margin:20px 0 5px 0;
-  clear:both;
-}
-
-#wrapper {
-	background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
-	margin:0 auto ;
-	width:100%;
-}
-
-// marketing pages
-#topWrapper {
-  width:100%;
-  height:100px;
-  background-image:url(images/css/topWrapper-bg.jpg);
-  background-position:center top ;
-  background-repeat:repeat-x;
-}
-
-#topBanner {
-  width:800px;
-  margin:0 auto;
-  height:100px;
-  background-image:url(images/css/topBanner.jpg);
-  background-repeat:no-repeat;
-}
-
-#topnav {
-  background:transparent url('images/css/hmenu.jpg') repeat-x top left;
-  height:20px;
-  margin:0 auto ;
-  text-align:center;
-  width:800px;
-
-  ul {
-    display:table;
-    margin:0 auto;
-    padding:0;
-    list-style-type:none;
-    position:relative;
-    height:20px;
-    text-transform:uppercase;
-    font-size:0.9em;
-    font-family:Arial,sans-serif;
-
-    li {
-      display:block;
-      float:left;
-      margin:0;
-      padding:0;
-      background:transparent url('images/css/hmenu.jpg') repeat-x top left;
-
-      a {
-        display:block;
-        float:left;
-        color:#031634;
-        text-decoration:none;
-        padding:0px 50px ;
-        line-height:20px;
-        font-weight:bold;
-      }
-    }
-  }
-}
-
-#topnav ul li a:hover, #topnav li#current a {
-  color:#7a994c;
-  background:transparent url('images/css/hmenu-sel.jpg') repeat-x top left;
-}
-
-#bg {
-  margin:0 auto;
-  padding:0;
-  background:transparent ;
-  background-image:url(images/css/hat.jpg);
-  background-repeat:no-repeat;	
-  background-position: center top ;
-}
-
-#header {
-  margin: 0 auto;
-  min-height:0px;
-  height: 0px;
-  width: 800px;
-}
-
-
-#page {
-  background: transparent url( images/css/page-bg.jpg ) no-repeat center top;
-}
-
-#container {
-  margin:0 auto;
-  width:800px;
-}
-
-
-#content {
-  width:780px;
-  margin:0 auto ;
-  text-align:left;
-  min-height:800px;
-}
-
-
-#content p {
-  text-align:justify;
-}
-
-
-
-
-
-#footerWrapper {
-  margin:0 auto;
-  height:10px;
-  padding:0;
-  background:transparent url( images/css/footerWrapper-bg.jpg ) no-repeat scroll center top;
-}
-
-
-#footer {
-  margin:0 auto;
-  padding:0;
-  width:800px;
-  height:10px;
-}
-
-#sidebar ul.vmenu {
-  list-style: none;
-  text-align: left;
-  margin: 7px 0px 8px 0px;
-  padding: 0;
-  text-decoration: none;	
-  border-top: 1px solid #eeeeee;
-}
-
-#sidebar ul.vmenu li {
-  list-style: none;
-  padding: 4px 0 4px 0px;
-  margin: 0 2px;	
-  border-bottom: 1px solid #eeeeee;
-}
-
-#sidebar ul.vmenu li a {
-  text-decoration: none;
-  color:#023063;
-}
-
-#sidebar ul.vmenu li a:hover {
-  color:#adcc80;
-}
-
-#sidebar ul.vmenu ul { margin: 0 0 0 5px; padding: 0; }
-#sidebar ul.vmenu ul li { border: none; }
diff --git a/sass/application.scss b/sass/application.scss
index 63b6ce1d20..e26dc21221 100644
--- a/sass/application.scss
+++ b/sass/application.scss
@@ -1,21 +1,16 @@
 @import "bourbon/bourbon";
-@import "reset";
-@import "font-face";
 
 // Base layout
-@import "base-variables", "base-extends", "base";
-@import "layout";
-@import "leanmodal";
+@import "base/reset", "base/font-face";
+@import "base/variables", "base/functions", "base/extends", "base/base";
+@import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal";
+@import "jquery-ui-1.8.16.custom";
 
 // pages
-@import "courseware", "courseware-video", "courseware-sequence-nav";
+@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav";
 @import "textbook";
 @import "info";
 @import "profile";
-@import "wiki-basic-html", "wiki-create", "wiki";
+@import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki";
 @import "help";
-@import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" , "discussion-answers", "discussion-forms", "form-wmd-toolbar";
-
-// left over
-// @import "theme";
-// @import "local";
+@import "discussion/askbot-original", "discussion/discussion", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar";
diff --git a/sass/_base.scss b/sass/base/_base.scss
similarity index 95%
rename from sass/_base.scss
rename to sass/base/_base.scss
index 8ea0957ac3..fd3f7774f7 100644
--- a/sass/_base.scss
+++ b/sass/base/_base.scss
@@ -29,6 +29,11 @@ em {
   font-style: italic;
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+}
+
 #{$all-text-inputs}, textarea {
   @include box-shadow(0 -1px 0 #fff);
   @include linear-gradient(#eee, #fff);
diff --git a/sass/_base-extends.scss b/sass/base/_extends.scss
similarity index 100%
rename from sass/_base-extends.scss
rename to sass/base/_extends.scss
diff --git a/sass/_font-face.scss b/sass/base/_font-face.scss
similarity index 100%
rename from sass/_font-face.scss
rename to sass/base/_font-face.scss
diff --git a/sass/_index-functions.scss b/sass/base/_functions.scss
similarity index 76%
rename from sass/_index-functions.scss
rename to sass/base/_functions.scss
index d0777bd813..429c202226 100644
--- a/sass/_index-functions.scss
+++ b/sass/base/_functions.scss
@@ -1,6 +1,3 @@
-// Functions
-//---------------------------------------- //
-
 // Flexible grid
 @function flex-grid($columns, $container-columns: $fg-max-columns) {
   $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
@@ -14,8 +11,13 @@
   @return percentage($gutter / $container-width);
 }
 
-// Line-height
-@function lh($amount: 1) {
-  @return $lh * $amount;
+// 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;
 }
 
diff --git a/sass/_reset.scss b/sass/base/_reset.scss
similarity index 100%
rename from sass/_reset.scss
rename to sass/base/_reset.scss
diff --git a/sass/base/_variables.scss b/sass/base/_variables.scss
new file mode 100644
index 0000000000..249f92dc96
--- /dev/null
+++ b/sass/base/_variables.scss
@@ -0,0 +1,31 @@
+// Variables
+// ---------------------------------------- //
+
+// fonts
+$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;
+$fg-max-width: 1400px;
+$fg-min-width: 810px;
+
+// color
+$light-gray: #ddd;
+$dark-gray: #333;
+$mit-red: #993333;
+
+$text-color: $dark-gray;
+$border-color: $light-gray;
diff --git a/sass/bourbon/_bourbon.scss b/sass/bourbon/_bourbon.scss
index 5c1bc8a4a9..447167c5ab 100644
--- a/sass/bourbon/_bourbon.scss
+++ b/sass/bourbon/_bourbon.scss
@@ -1,7 +1,7 @@
 // Custom Functions
 @import "functions/deprecated-webkit-gradient";
-@import "functions/golden-ratio";
 @import "functions/grid-width";
+@import "functions/modular-scale";
 @import "functions/tint-shade";
 
 // CSS3 Mixins
diff --git a/sass/bourbon/addons/_button.scss b/sass/bourbon/addons/_button.scss
index d2f98ab0c3..1d32125140 100644
--- a/sass/bourbon/addons/_button.scss
+++ b/sass/bourbon/addons/_button.scss
@@ -5,31 +5,59 @@
     $style: simple;
   }
 
-  @if $style == simple {
-    @include simple($base-color);
+  // Grayscale button
+  @if $base-color == grayscale($base-color) {
+    @if $style == simple {
+      @include simple($base-color, $grayscale: true);
+    }
+
+    @else if $style == shiny {
+      @include shiny($base-color, $grayscale: true);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color, $grayscale: true);
+    }
   }
 
-  @else if $style == shiny {
-    @include shiny($base-color);
-  }
+  // Colored button
+  @else {
+    @if $style == simple {
+      @include simple($base-color);
+    }
 
-  @else if $style == pill {
-    @include pill($base-color);
+    @else if $style == shiny {
+      @include shiny($base-color);
+    }
+
+    @else if $style == pill {
+      @include pill($base-color);
+    }
   }
 }
 
-@mixin simple ($base-color) {
-  $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
-  $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
-  $color: hsl(0, 0, 100%);
-  $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
-  $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+// Simple Button
+//************************************************************************//
+@mixin simple($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
+  $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
+  $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
+  $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
 
   @if lightness($base-color) > 70% {
-    $color: hsl(0, 0, 20%);
+    $color:       hsl(0, 0, 20%);
     $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
   }
 
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
   border: 1px solid $border;
   @include border-radius (3px);
   @include box-shadow (inset 0 1px 0 0 $inset-shadow);
@@ -43,9 +71,15 @@
   -webkit-background-clip: padding-box;
 
   &:hover {
-    $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
-    $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
-    $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+    $base-color-hover:    adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $inset-shadow-hover:  adjust-color($base-color, $saturation: -7%, $lightness:  5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation:  8%, $lightness: -14%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+    }
 
     @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
     cursor: pointer;
@@ -53,30 +87,47 @@
   }
 
   &:active {
-    $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
     $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
 
+    @if $grayscale == true {
+      $border-active:       grayscale($border-active);
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
     border: 1px solid $border-active;
     @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
   }
 }
 
-@mixin shiny($base-color) {
-  $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
-  $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
-  $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
-  $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+
+// Shiny Button
+//************************************************************************//
+@mixin shiny($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
   $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
-  $color: hsl(0, 0, 100%);
-  $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
-  $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+  $fourth-stop:   adjust-color($base-color, $red: -79,  $green: -70,  $blue: -46);
+  $inset-shadow:  adjust-color($base-color, $red:  37,  $green:  29,  $blue:  12);
+  $second-stop:   adjust-color($base-color, $red: -56,  $green: -50,  $blue: -33);
+  $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+  $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
 
   @if lightness($base-color) > 70% {
-    $color: hsl(0, 0, 20%);
+    $color:       hsl(0, 0, 20%);
     $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
   }
 
-  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  @if $grayscale == true {
+    $border:        grayscale($border);
+    $border-bottom: grayscale($border-bottom);
+    $fourth-stop:   grayscale($fourth-stop);
+    $inset-shadow:  grayscale($inset-shadow);
+    $second-stop:   grayscale($second-stop);
+    $text-shadow:   grayscale($text-shadow);
+    $third-stop:    grayscale($third-stop);
+  }
+
   border: 1px solid $border;
   border-bottom: 1px solid $border-bottom;
   @include border-radius(5px);
@@ -85,43 +136,69 @@
   display: inline;
   font-size: 14px;
   font-weight: bold;
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
   padding: 7px 20px 8px;
-  text-decoration: none;
   text-align: center;
+  text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
 
   &:hover {
-    $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+    $first-stop-hover:  adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
     $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
-    $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+    $third-stop-hover:  adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
     $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
 
-    @include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
+    @if $grayscale == true {
+      $first-stop-hover:  grayscale($first-stop-hover);
+      $second-stop-hover: grayscale($second-stop-hover);
+      $third-stop-hover:  grayscale($third-stop-hover);
+      $fourth-stop-hover: grayscale($fourth-stop-hover);
+    }
+
     cursor: pointer;
+    @include linear-gradient(top, $first-stop-hover  0%,
+                                  $second-stop-hover 50%,
+                                  $third-stop-hover  50%,
+                                  $fourth-stop-hover 100%);
   }
 
   &:active {
     $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
 
+    @if $grayscale == true {
+      $inset-shadow-active: grayscale($inset-shadow-active);
+    }
+
     @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
   }
 }
 
-@mixin pill($base-color) {
-  $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
-  $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
-  $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
-  $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
-  $color: hsl(0, 0, 100%);
-  $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
-  $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+// Pill Button
+//************************************************************************//
+@mixin pill($base-color, $grayscale: false) {
+  $color:         hsl(0, 0, 100%);
+  $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
+  $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
+  $border-top:    adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+  $inset-shadow:  adjust-color($base-color, $hue: -1, $saturation: -1%,  $lightness:  7%);
+  $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
+  $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
 
   @if lightness($base-color) > 70% {
-    $color: hsl(0, 0, 20%);
+    $color:       hsl(0, 0, 20%);
     $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
   }
 
-  @include linear-gradient ($base-color, $stop-gradient);
+  @if $grayscale == true {
+    $border-bottom: grayscale($border-bottom);
+    $border-sides:  grayscale($border-sides);
+    $border-top:    grayscale($border-top);
+    $inset-shadow:  grayscale($inset-shadow);
+    $stop-gradient: grayscale($stop-gradient);
+    $text-shadow:   grayscale($text-shadow);
+  }
+
   border: 1px solid $border-top;
   border-color: $border-top $border-sides $border-bottom;
   @include border-radius(16px);
@@ -131,35 +208,54 @@
   font-size: 11px;
   font-weight: normal;
   line-height: 1;
+  @include linear-gradient ($base-color, $stop-gradient);
   padding: 3px 16px 5px;
   text-align: center;
   text-shadow: 0 -1px 1px $text-shadow;
   -webkit-background-clip: padding-box;
 
   &:hover {
-    $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
-    $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
-    $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
-    $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
-    $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
-    $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
-    $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+    $base-color-hover:    adjust-color($base-color,                                $lightness: -4.5%);
+    $border-bottom:       adjust-color($base-color, $hue:  8, $saturation:  13.5%, $lightness: -32%);
+    $border-sides:        adjust-color($base-color, $hue:  4, $saturation: -2%,    $lightness: -27%);
+    $border-top:          adjust-color($base-color, $hue: -1, $saturation: -17%,   $lightness: -21%);
+    $inset-shadow-hover:  adjust-color($base-color,           $saturation: -1%,    $lightness:  3%);
+    $stop-gradient-hover: adjust-color($base-color, $hue:  8, $saturation: -4%,    $lightness: -15.5%);
+    $text-shadow-hover:   adjust-color($base-color, $hue:  5, $saturation: -5%,    $lightness: -22%);
+
+    @if $grayscale == true {
+      $base-color-hover:    grayscale($base-color-hover);
+      $border-bottom:       grayscale($border-bottom);
+      $border-sides:        grayscale($border-sides);
+      $border-top:          grayscale($border-top);
+      $inset-shadow-hover:  grayscale($inset-shadow-hover);
+      $stop-gradient-hover: grayscale($stop-gradient-hover);
+      $text-shadow-hover:   grayscale($text-shadow-hover);
+    }
 
-    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
     border: 1px solid $border-top;
     border-color: $border-top $border-sides $border-bottom;
     @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
     cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
     text-shadow: 0 -1px 1px $text-shadow-hover;
     -webkit-background-clip: padding-box;
   }
 
   &:active {
-    $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
-    $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
-    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
-    $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
-    $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+    $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
+    $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
+    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
+    $inset-shadow-active:  adjust-color($base-color, $hue: 9,  $saturation:  2%,   $lightness: -21.5%);
+    $text-shadow-active:   adjust-color($base-color, $hue: 5,  $saturation: -12%,  $lightness: -21.5%);
+
+    @if $grayscale == true {
+      $active-color:         grayscale($active-color);
+      $border-active:        grayscale($border-active);
+      $border-bottom-active: grayscale($border-bottom-active);
+      $inset-shadow-active:  grayscale($inset-shadow-active);
+      $text-shadow-active:   grayscale($text-shadow-active);
+    }
 
     background: $active-color;
     border: 1px solid $border-active;
@@ -168,3 +264,4 @@
     text-shadow: 0 -1px 1px $text-shadow-active;
   }
 }
+
diff --git a/sass/bourbon/addons/_font-family.scss b/sass/bourbon/addons/_font-family.scss
index 9e3bc6ee20..df8a80ddfc 100644
--- a/sass/bourbon/addons/_font-family.scss
+++ b/sass/bourbon/addons/_font-family.scss
@@ -1,4 +1,5 @@
 $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
 $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
 $verdana: Verdana, Geneva, sans-serif;
diff --git a/sass/bourbon/css3/_animation.scss b/sass/bourbon/css3/_animation.scss
index 08f3b13e61..f99e06eb6f 100644
--- a/sass/bourbon/css3/_animation.scss
+++ b/sass/bourbon/css3/_animation.scss
@@ -1,6 +1,22 @@
 // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
 // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
 
+// Official animation shorthand property.
+@mixin animation ($animation-1,
+  $animation-2: false, $animation-3: false,
+  $animation-4: false, $animation-5: false,
+  $animation-6: false, $animation-7: false,
+  $animation-8: false, $animation-9: false)
+  {
+    $full: compact($animation-1, $animation-2, $animation-3, $animation-4,
+                   $animation-5, $animation-6, $animation-7, $animation-8, $animation-9);
+
+  -webkit-animation: $full;
+     -moz-animation: $full;
+          animation: $full;
+}
+
+// Individual Animation Properties
 @mixin animation-name ($name-1,
   $name-2: false, $name-3: false,
   $name-4: false, $name-5: false,
@@ -127,8 +143,7 @@
 }
 
 
-// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
-// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
+// Deprecated
 @mixin animation-basic ($name, $time: 0, $motion: ease) {
     $length-of-name: length($name);
     $length-of-time: length($time);
@@ -151,11 +166,6 @@
   } @else {
     @include animation-timing-function(    $motion);
   }
+  @warn "The animation-basic mixin is deprecated. Use the animation mixin instead.";
 }
 
-// Official animation shorthand property. Needs more work to actually be useful.
-@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
-  -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
-     -moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
-          animation: $name $duration $timing-function $delay $iteration-count $direction;
-}
diff --git a/sass/bourbon/css3/_linear-gradient.scss b/sass/bourbon/css3/_linear-gradient.scss
index 585921f30b..0b68501719 100644
--- a/sass/bourbon/css3/_linear-gradient.scss
+++ b/sass/bourbon/css3/_linear-gradient.scss
@@ -2,7 +2,8 @@
                        $G3: false, $G4: false,
                        $G5: false, $G6: false,
                        $G7: false, $G8: false,
-                       $G9: false, $G10: false) {
+                       $G9: false, $G10: false,
+                       $fallback: false) {
   // Detect what type of value exists in $pos
   $pos-type: type-of(nth($pos, 1));
 
@@ -15,7 +16,15 @@
 
   $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
 
-  background-color:  nth($G1, 1);
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if type-of($fallback) == color {
+    $fallback-color: $fallback;
+  }
+
+  background-color: $fallback-color;
   background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
   background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
   background-image:     -moz-linear-gradient($pos, $full);
@@ -27,5 +36,6 @@
 
 // Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
 // @include linear-gradient(#1e5799, #2989d8);
+// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
 // @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
 // @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
diff --git a/sass/bourbon/functions/_golden-ratio.scss b/sass/bourbon/functions/_golden-ratio.scss
deleted file mode 100644
index 8f825addf3..0000000000
--- a/sass/bourbon/functions/_golden-ratio.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@function golden-ratio($value, $increment) {
-  @if $increment > 0 {
-    @for $i from 1 through $increment {
-      $value: ($value * 1.618);
-    }
-  }
-
-  @if $increment < 0 {
-    $increment: abs($increment);
-    @for $i from 1 through $increment {
-      $value: ($value / 1.618);
-    }
-  }
-
-  @return $value;
-}
-
-//  div {
-//                      Increment Up GR with positive value
-//    font-size:        golden-ratio(14px,  1);    // returns: 22.652px
-//
-//                      Increment Down GR with negative value
-//    font-size:        golden-ratio(14px, -1);    // returns: 8.653px
-//
-//                     Can be used with ceil(round up) or floor(round down)
-//    font-size: floor( golden-ratio(14px,  1) );  // returns: 22px
-//    font-size:  ceil( golden-ratio(14px,  1) );  // returns: 23px
-//  }
-//
-// modularscale.com
-// goldenratiocalculator.com
diff --git a/bourbon/functions/_modular-scale.scss b/sass/bourbon/functions/_modular-scale.scss
similarity index 100%
rename from bourbon/functions/_modular-scale.scss
rename to sass/bourbon/functions/_modular-scale.scss
diff --git a/sass/bourbon/lib/bourbon.rb b/sass/bourbon/lib/bourbon.rb
index ca440eefbc..1635be836d 100644
--- a/sass/bourbon/lib/bourbon.rb
+++ b/sass/bourbon/lib/bourbon.rb
@@ -1,3 +1,5 @@
+require "bourbon/generator"
+
 module Bourbon
   if defined?(Rails)
     class Engine < ::Rails::Engine
diff --git a/sass/_courseware.scss b/sass/courseware/_courseware.scss
similarity index 67%
rename from sass/_courseware.scss
rename to sass/courseware/_courseware.scss
index 489657459f..65c71fc183 100644
--- a/sass/_courseware.scss
+++ b/sass/courseware/_courseware.scss
@@ -5,84 +5,6 @@ div.course-wrapper {
     list-style: none;
   }
 
-  div#accordion {
-    @extend .sidebar;
-
-    div#open_close_accordion {
-      position: absolute;
-      right: 0px;
-      width: 20px;
-      height: 20px;
-      background: #ccc;
-      border: 1px solid black;
-      right: -22px;
-      top: 5px;
-    }
-		
-    h3 {
-      overflow: hidden;
-      margin: 0;
-
-      &:last-child {
-        @include box-shadow(none);
-      }
-
-      &.ui-accordion-header {
-        color: #000;
-
-        a {
-          font-size: $body-font-size;
-          color: lighten($text-color, 10%);
-        }
-
-        &.ui-state-hover {
-          border: none;
-          border-bottom: 1px solid #d3d3d3;
-        }
-
-        &.ui-state-active {
-          @extend .active;
-        }
-      }
-    }
-
-    ul.ui-accordion-content {
-      @include border-radius(0);
-      @include box-shadow( inset -1px 0 0 #e6e6e6);
-      background: #d6d6d6;
-      border: none;
-      border-bottom: 1px solid #c3c3c3;
-      font-size: 12px;
-      margin: 0;
-      overflow: hidden;
-
-      li {
-        &.active {
-          font-weight: bold;
-        }
-
-        a {
-          text-decoration: none;
-          margin-bottom: lh(.5);
-          display: block;
-          color: #000;
-
-          &:hover {
-            color: #666;
-          }
-
-          p {
-            margin-bottom: 0;
-
-            &.subtitle {
-              color: #666;
-            }
-          }
-        }
-      }
-    }
-  }
-
   section.course-content {
     @extend .content;
 
diff --git a/sass/_courseware-sequence-nav.scss b/sass/courseware/_sequence-nav.scss
similarity index 100%
rename from sass/_courseware-sequence-nav.scss
rename to sass/courseware/_sequence-nav.scss
diff --git a/sass/courseware/_sidebar.scss b/sass/courseware/_sidebar.scss
new file mode 100644
index 0000000000..401a2f5c3c
--- /dev/null
+++ b/sass/courseware/_sidebar.scss
@@ -0,0 +1,77 @@
+div#accordion {
+  @extend .sidebar;
+
+  div#open_close_accordion {
+    position: absolute;
+    right: 0px;
+    width: 20px;
+    height: 20px;
+    background: #ccc;
+    border: 1px solid black;
+    right: -22px;
+    top: 5px;
+  }
+
+  h3 {
+    overflow: hidden;
+    margin: 0;
+
+    &:last-child {
+      @include box-shadow(none);
+    }
+
+    &.ui-accordion-header {
+      color: #000;
+
+      a {
+        font-size: $body-font-size;
+        color: lighten($text-color, 10%);
+      }
+
+      &.ui-state-hover {
+        border: none;
+        border-bottom: 1px solid #d3d3d3;
+      }
+
+      &.ui-state-active {
+        @extend .active;
+      }
+    }
+  }
+
+  ul.ui-accordion-content {
+    @include border-radius(0);
+    @include box-shadow( inset -1px 0 0 #e6e6e6);
+    background: #d6d6d6;
+    border: none;
+    border-bottom: 1px solid #c3c3c3;
+    font-size: 12px;
+    margin: 0;
+    overflow: hidden;
+
+    li {
+      &.active {
+        font-weight: bold;
+      }
+
+      a {
+        text-decoration: none;
+        margin-bottom: lh(.5);
+        display: block;
+        color: #000;
+
+        &:hover {
+          color: #666;
+        }
+
+        p {
+          margin-bottom: 0;
+
+          &.subtitle {
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/sass/_courseware-video.scss b/sass/courseware/_video.scss
similarity index 100%
rename from sass/_courseware-video.scss
rename to sass/courseware/_video.scss
diff --git a/sass/_discussion-answers.scss b/sass/discussion/_answers.scss
similarity index 100%
rename from sass/_discussion-answers.scss
rename to sass/discussion/_answers.scss
diff --git a/sass/_askbot-original.scss b/sass/discussion/_askbot-original.scss
similarity index 100%
rename from sass/_askbot-original.scss
rename to sass/discussion/_askbot-original.scss
diff --git a/sass/_discussion.scss b/sass/discussion/_discussion.scss
similarity index 100%
rename from sass/_discussion.scss
rename to sass/discussion/_discussion.scss
diff --git a/sass/_form-wmd-toolbar.scss b/sass/discussion/_form-wmd-toolbar.scss
similarity index 100%
rename from sass/_form-wmd-toolbar.scss
rename to sass/discussion/_form-wmd-toolbar.scss
diff --git a/sass/_discussion-forms.scss b/sass/discussion/_forms.scss
similarity index 100%
rename from sass/_discussion-forms.scss
rename to sass/discussion/_forms.scss
diff --git a/sass/_question-view.scss b/sass/discussion/_question-view.scss
similarity index 100%
rename from sass/_question-view.scss
rename to sass/discussion/_question-view.scss
diff --git a/sass/_discussion-questions.scss b/sass/discussion/_questions.scss
similarity index 100%
rename from sass/_discussion-questions.scss
rename to sass/discussion/_questions.scss
diff --git a/sass/_discussion-tags.scss b/sass/discussion/_tags.scss
similarity index 100%
rename from sass/_discussion-tags.scss
rename to sass/discussion/_tags.scss
diff --git a/sass/index/_base.scss b/sass/index/_base.scss
new file mode 100644
index 0000000000..c2a5b9dcc2
--- /dev/null
+++ b/sass/index/_base.scss
@@ -0,0 +1,44 @@
+body {
+  background-color: #fff;
+  color: #444;
+  font: $body-font-size $body-font-family;
+
+  :focus {
+    outline-color: #ccc;
+  }
+
+  h1 {
+    font: 800 24px $header-font-family;
+  }
+
+  li {
+    margin-bottom: lh();
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  a {
+    color: $mit-red;
+    font-style: italic;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      color: darken($mit-red, 10%);
+    }
+  }
+
+  #{$all-text-inputs}, textarea {
+    @include box-shadow(0 -1px 0 #fff);
+    @include linear-gradient(#eee, #fff);
+    border: 1px solid #999;
+    font: $body-font-size $body-font-family;
+    padding: 4px;
+    width: 100%;
+
+    &:focus {
+      border-color: $mit-red;
+    }
+  }
+}
diff --git a/sass/_index-extends.scss b/sass/index/_extends.scss
similarity index 100%
rename from sass/_index-extends.scss
rename to sass/index/_extends.scss
diff --git a/sass/index/_footer.scss b/sass/index/_footer.scss
new file mode 100644
index 0000000000..ee62b69426
--- /dev/null
+++ b/sass/index/_footer.scss
@@ -0,0 +1,47 @@
+footer {
+  @extend .wrapper;
+  @extend .clearfix;
+  padding-top: 0;
+
+  div.footer-wrapper {
+    border-top: 1px solid #e5e5e5;
+    padding: lh() 0;
+    background: url('/static/images/marketing/mit-logo.png') right center no-repeat;
+
+    a {
+      color: #888;
+      text-decoration: none;
+      @include transition();
+
+      &:hover, &:focus {
+        color: #666;
+      }
+    }
+
+    p {
+      @include inline-block();
+      margin-right: lh();
+    }
+
+    ul {
+      @include inline-block();
+
+      li {
+        @include inline-block();
+
+        &:after {
+          content: ' |';
+          display: inline;
+          color: #ccc;
+        }
+
+        &:last-child {
+          &:after {
+            content: none;
+          }
+        }
+
+      }
+    }
+  }
+}
diff --git a/sass/index/_header.scss b/sass/index/_header.scss
new file mode 100644
index 0000000000..e5e8a12cdd
--- /dev/null
+++ b/sass/index/_header.scss
@@ -0,0 +1,144 @@
+header.announcement {
+  @include background-size(cover);
+  background: #333;
+  border-bottom: 1px solid #000;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
+
+  &.home {
+    background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");
+
+    @media screen and (min-width: 1200px) {
+      background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
+    }
+
+    div {
+      padding: lh(10) lh() lh(3);
+
+      //hide login link for homepage
+      nav {
+        h1 {
+          margin-right: 0;
+        }
+
+        a.login {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.course {
+    background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
+
+    @media screen and (min-width: 1200px) {
+      background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
+    }
+
+    @media screen and (max-width: 1199px) and (min-width: 700px) {
+      background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
+    }
+
+    div {
+      padding: lh(4) lh() lh(2);
+    }
+  }
+
+  div {
+    @extend .wrapper;
+    position: relative;
+
+    nav {
+      position: absolute;
+      top: 0;
+      right: lh();
+      @include border-radius(0 0 3px 3px);
+      background: #333;
+      background: rgba(#000, .7);
+      padding: lh(.5) lh();
+
+      h1 {
+        @include inline-block();
+        margin-right: lh(.5);
+
+        a {
+          font: italic 800 18px $header-font-family;
+          color: #fff;
+          text-decoration: none;
+
+          &:hover, &:focus {
+            color: #999;
+          }
+        }
+      }
+
+      a.login {
+        text-decoration: none;
+        color: #fff;
+        font-size: 12px;
+        font-style: normal;
+        font-family: $header-font-family;
+
+        &:hover, &:focus {
+          color: #999;
+        }
+      }
+    }
+
+    section {
+      @extend .clearfix;
+      @include inline-block();
+      background: $mit-red;
+      margin-left: flex-grid(4) + flex-gutter();
+      padding: lh() lh(1.5);
+
+      h1 {
+        @include inline-block();
+        font-family: "Open Sans";
+        font-size: 30px;
+        font-weight: 800;
+        line-height: 1.2em;
+        margin: 0 lh() 0 0;
+      }
+
+      h2 {
+        @include inline-block();
+        font-family: "Open Sans";
+        font-size: 24px;
+        font-weight: 400;
+        line-height: 1.2em;
+      }
+
+      &.course {
+        section {
+          width: flex-grid(4, 8);
+          margin-right: flex-gutter(8);
+          float: left;
+          margin-left: 0;
+          padding: 0;
+
+          a {
+            @extend .button;
+            @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
+            background-color: darken($mit-red, 20%);
+            display: block;
+            padding: lh(.5) lh();
+            border-color: darken($mit-red, 30%);
+            text-align: center;
+
+            &:hover {
+              background-color: darken($mit-red, 10%);
+              border-color: darken($mit-red, 20%);
+            }
+          }
+        }
+
+        p {
+          width: flex-grid(4, 8);
+          line-height: lh();
+          float: left;
+        }
+      }
+    }
+  }
+}
diff --git a/sass/index/_index.scss b/sass/index/_index.scss
new file mode 100644
index 0000000000..b24eee663e
--- /dev/null
+++ b/sass/index/_index.scss
@@ -0,0 +1,233 @@
+section.index-content {
+  @extend .wrapper;
+  @extend .clearfix;
+
+  section {
+    @extend .clearfix;
+    float: left;
+
+    h1 {
+      font-size: 800 24px "Open Sans";
+      margin-bottom: lh();
+    }
+
+    p {
+      line-height: lh();
+      margin-bottom: lh();
+    }
+
+    ul {
+      margin: 0;
+    }
+
+    &.about {
+      @include box-sizing(border-box);
+      border-right: 1px solid #e5e5e5;
+      margin-right: flex-gutter();
+      padding-right: flex-gutter() / 2;
+      width: flex-grid(8);
+
+      section {
+        @extend .clearfix;
+        margin-bottom: lh();
+
+        p {
+          width: flex-grid(4, 8);
+          float: left;
+
+          &:nth-child(odd) {
+            margin-right: flex-gutter(8);
+          }
+        }
+
+        &.intro {
+          section {
+            margin-bottom: 0;
+
+            &.intro-text {
+              margin-right: flex-gutter(8);
+              width: flex-grid(4, 8);
+
+              p {
+                margin-right: 0;
+                width: auto;
+                float: none;
+              }
+            }
+
+            &.intro-video {
+              width: flex-grid(4, 8);
+
+              a {
+                display: block;
+                width: 100%;
+
+                img {
+                  width: 100%;
+                }
+
+                span {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+
+        &.features {
+          border-top: 1px solid #E5E5E5;
+          padding-top: lh();
+          margin-bottom: 0;
+
+          h2 {
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: #666;
+            margin-bottom: lh();
+
+            span {
+              text-transform: none;
+            }
+          }
+
+          p {
+            width: auto;
+            clear: both;
+
+            strong {
+              font-family: "Open sans";
+              font-weight: 800;
+            }
+
+            a {
+              color: $mit-red;
+              text-decoration: none;
+              @include transition();
+
+              &:hover, &:focus {
+                color: darken($mit-red, 15%);
+              }
+            }
+          }
+
+          ul {
+            margin-bottom: 0;
+
+            li {
+              line-height: lh();
+              width: flex-grid(4, 8);
+              float: left;
+              margin-bottom: lh(.5);
+
+              &:nth-child(odd) {
+                margin-right: flex-gutter(8);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.course, &.staff {
+      width: flex-grid(4);
+
+      h1 {
+        font: normal $body-font-size $body-font-family;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        color: #666;
+        margin-bottom: lh();
+      }
+
+      h2 {
+        font: 800 24px $header-font-family;
+      }
+
+      h3 {
+        font: 400 18px $header-font-family;
+      }
+
+      a {
+        @extend .button;
+      }
+
+      ul {
+        list-style: none;
+
+        li {
+          img {
+            float: left;
+            margin-right: lh(.5);
+          }
+        }
+      }
+    }
+
+    &.course {
+      h2 {
+        padding-top: lh(5);
+        background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
+        @include background-size(contain);
+
+        @media screen and (max-width: 998px) {
+          background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
+        }
+      }
+    }
+
+
+    // index
+    //---------------------------------------- //
+    &.about-course {
+      @include box-sizing(border-box);
+      border-right: 1px solid #e5e5e5;
+      margin-right: flex-gutter();
+      padding-right: flex-gutter() / 2;
+      width: flex-grid(8);
+
+      section {
+        width: flex-grid(4, 8);
+
+
+        &.about-info {
+          margin-right: flex-gutter(8);
+        }
+
+        &.requirements {
+          clear: both;
+          width: 100%;
+          border-top: 1px solid #E5E5E5;
+          padding-top: lh();
+          margin-bottom: 0;
+
+          p {
+            float: left;
+            width: flex-grid(4, 8);
+            margin-right: flex-gutter(8);
+
+            &:nth-child(odd) {
+              margin-right: 0;
+            }
+          }
+        }
+
+        &.cta {
+          width: 100%;
+          text-align: center;
+
+          a.enroll {
+            @extend .button;
+            padding: lh(.5) lh(2);
+            @include inline-block();
+            text-align: center;
+            font: 800 18px $header-font-family;
+          }
+        }
+      }
+    }
+  }
+}
+
+section.copyright, section.tos, section.privacy-policy, section.honor-code {
+  @extend .subpage;
+}
diff --git a/sass/_index-variables.scss b/sass/index/_variables.scss
similarity index 69%
rename from sass/_index-variables.scss
rename to sass/index/_variables.scss
index 47eb6b9179..7f3deac55e 100644
--- a/sass/_index-variables.scss
+++ b/sass/index/_variables.scss
@@ -13,15 +13,17 @@ $gw-gutter: 25px;
 $body-font-family: Georgia, serif;
 $header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
 
-// @media screen and (min-width: 940px) {
-  $body-font-size: 16px;
+$body-font-size: 16px;
+
+// @media screen and (min-width:1200px) {
+//   $body-font-size: 18px;
 // }
 
-
-// @media screen and (max-width: 939px) {
+// @media screen and (max-width:890px) {
 //   $body-font-size: 14px;
 // }
 
+$body-line-height: golden-ratio($body-font-size, 1);
 $lh: golden-ratio($body-font-size, 1);
 
 // Colors
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
new file mode 100644
index 0000000000..97c28d5fd8
--- /dev/null
+++ b/sass/layout/_footer.scss
@@ -0,0 +1,45 @@
+footer {
+  @extend .clearfix;
+  @extend .wrapper;
+  @include box-sizing(border-box);
+  color: #777;
+  margin-top: $body-line-height;
+  padding: 0 $body-line-height;
+
+  p {
+    float: left;
+
+    a {
+      color: #444;
+
+      &:link, &:visited {
+        color: #444;
+      }
+
+      &:hover, &:focus {
+        color: #000;
+      }
+    }
+  }
+
+  ul {
+    float: right;
+
+    li {
+      display: inline-block;
+      margin-right: 20px;
+
+      a {
+        color: #444;
+
+        &:link, &:visited {
+          color: #444;
+        }
+
+        &:hover, &:focus {
+          color: #000;
+        }
+      }
+    }
+  }
+}
diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss
new file mode 100644
index 0000000000..5d3cf5a048
--- /dev/null
+++ b/sass/layout/_header.scss
@@ -0,0 +1,103 @@
+div.header-wrapper {
+  // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
+  @include box-shadow(inset 0 -1px 2px darken($mit-red, 10%));
+  background: $mit-red;
+  border-bottom: 1px solid #fff;
+
+  header {
+    @extend .clearfix;
+    @extend .wrapper;
+    @include box-sizing(border-box);
+    padding: 0 $body-line-height;
+
+    hgroup {
+      @extend .clearfix;
+      float: left;
+
+      h1 {
+        border-right: 1px solid darken($mit-red, 5%);
+        color: darken($mit-red, 25%);
+        font-size: 20px;
+        font-weight: 800;
+        margin: 0 lh() 0 0;
+        padding: 17px lh() 14px 0;
+        text-shadow: 0 1px 0 lighten($mit-red, 10%);
+        line-height: lh();
+        @include inline-block();
+      }
+
+      h2 {
+        @include inline-block();
+        margin: 0 lh() 0 0;
+        padding: 19px lh() 9px 0;
+        line-height: lh();
+        border-right: 1px solid darken($mit-red, 5%);
+        -webkit-font-smoothing: antialiased;
+
+        a {
+          color: #fff;
+          text-decoration: none;
+
+          &:hover {
+            color: rgba(#fff, .7);
+          }
+        }
+      }
+
+      @media screen and (max-width: 920px) {
+        border-bottom: 1px solid darken($mit-red, 5%);
+        display: block;
+        float: none;
+
+        h1 {
+          float: right;
+          border: 0;
+          margin-right: 0;
+          padding-right: 0;
+        }
+
+        h2 {
+          float: left;
+          border: 0;
+          margin-right: 0;
+          padding-right: 0;
+        }
+      }
+    }
+
+    nav {
+      float: left;
+      display: block;
+      margin: 0;
+      padding: 0;
+      text-shadow: 0 -1px 0 darken($mit-red, 10%);
+      -webkit-font-smoothing: antialiased;
+
+
+      ul {
+        @extend .clearfix;
+        display: inline-block;
+        padding: 19px 0 9px;
+        margin: 0;
+
+        li {
+          margin-right: lh();
+          display: inline-block;
+          margin-bottom: 0;
+          line-height: lh();
+
+          a {
+            color: #fff;
+            text-decoration: none;
+
+            &:hover {
+              color: rgba(#fff, .7);
+              background-color: none;
+              text-decoration: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/sass/layout/_layout.scss b/sass/layout/_layout.scss
new file mode 100644
index 0000000000..c0f52ad268
--- /dev/null
+++ b/sass/layout/_layout.scss
@@ -0,0 +1,28 @@
+html {
+  margin-top: 0;
+
+  body {
+    color: $dark-gray;
+    font: $body-font-size $body-font-family;
+    text-align: center;
+    margin: 0;
+    background: #f4f4f4; //#f3f1e5
+
+    section.main-content {
+      @extend .clearfix;
+      @extend .wrapper;
+      @include box-sizing(border-box);
+      @include border-radius(4px);
+      overflow: hidden;
+      background: #fff;
+      border-bottom: 1px solid #bbb;
+
+      @media screen and (min-width: 1400px) {
+        // @include border-radius(3px);
+        @include box-shadow(0 0 4px #dfdfdf);
+        border: 1px solid #bbb;
+        margin-top: lh(.5);
+      }
+    }
+  }
+}
diff --git a/sass/_leanmodal.scss b/sass/layout/_leanmodal.scss
similarity index 100%
rename from sass/_leanmodal.scss
rename to sass/layout/_leanmodal.scss
diff --git a/sass/marketing.scss b/sass/marketing.scss
index 61dff2d197..7b93c36a3b 100644
--- a/sass/marketing.scss
+++ b/sass/marketing.scss
@@ -1,7 +1,6 @@
 @import "bourbon/bourbon";
-@import "reset";
-@import "font-face";
+@import "base/reset", "base/font-face", "base/functions";
 
 // pages
-@import "index-functions", "index-variables", "index-extends", "index";
-@import "leanmodal";
+@import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index";
+@import "layout/leanmodal";
diff --git a/sass/print.scss b/sass/print.scss
new file mode 100644
index 0000000000..12436ba683
--- /dev/null
+++ b/sass/print.scss
@@ -0,0 +1,6 @@
+.header-wrapper  {display:none;}
+#accordion  {display:none;}
+.ui-accordion  {display:none;
+visibility:hidden;
+width:0%;
+}
diff --git a/sass/_wiki-basic-html.scss b/sass/wiki/_basic-html.scss
similarity index 100%
rename from sass/_wiki-basic-html.scss
rename to sass/wiki/_basic-html.scss
diff --git a/sass/_wiki-create.scss b/sass/wiki/_create.scss
similarity index 100%
rename from sass/_wiki-create.scss
rename to sass/wiki/_create.scss
diff --git a/sass/wiki/_sidebar.scss b/sass/wiki/_sidebar.scss
new file mode 100644
index 0000000000..513b3c2556
--- /dev/null
+++ b/sass/wiki/_sidebar.scss
@@ -0,0 +1,69 @@
+div#wiki_panel {
+  @extend .sidebar;
+  overflow: auto;
+
+  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;
+    width: 100%;
+
+    &:hover {
+      @include box-shadow(0 1px 0 #fff);
+      background: #efefef;
+    }
+  }
+
+  ul {
+    li {
+      &.search {
+        @include box-shadow(0 1px 0 #eee);
+        border-bottom: 1px solid #d3d3d3;
+        padding: 7px lh();
+
+        label {
+          display: none;
+        }
+      }
+
+      &.create-article {
+        h3 {
+          a {
+            padding: 7px lh();
+          }
+        }
+      }
+    }
+  }
+
+  div#wiki_create_form {
+    @extend .clearfix;
+    padding: 15px;
+    background: #d6d6d6;
+    border-bottom: 1px solid #bbb;
+
+    input[type="text"] {
+      margin-bottom: 6px;
+      display: block;
+      width: 100%;
+      @include box-sizing(border-box);
+    }
+
+    ul {
+      list-style: none;
+
+      li {
+        float: left;
+
+        &#cancel {
+          float: right;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}
diff --git a/sass/_wiki.scss b/sass/wiki/_wiki.scss
similarity index 53%
rename from sass/_wiki.scss
rename to sass/wiki/_wiki.scss
index 86b90c43d6..8078273514 100644
--- a/sass/_wiki.scss
+++ b/sass/wiki/_wiki.scss
@@ -2,76 +2,6 @@ div.wiki-wrapper {
   display: table;
   width: 100%;
 
-  div#wiki_panel {
-    @extend .sidebar;
-    overflow: auto;
-
-    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;
-      width: 100%;
-
-      &:hover {
-        @include box-shadow(0 1px 0 #fff);
-        background: #efefef;
-      }
-    }
-
-    ul {
-      li {
-        &.search {
-          @include box-shadow(0 1px 0 #eee);
-          border-bottom: 1px solid #d3d3d3;
-          padding: 7px lh();
-
-          label {
-            display: none;
-          }
-        }
-
-        &.create-article {
-          h3 {
-            a {
-              padding: 7px lh();
-            }
-          }
-        }
-      }
-    }
-
-    div#wiki_create_form {
-      @extend .clearfix;
-      padding: 15px;
-      background: #d6d6d6;
-      border-bottom: 1px solid #bbb;
-
-      input[type="text"] {
-        margin-bottom: 6px;
-        display: block;
-        width: 100%;
-        @include box-sizing(border-box);
-      }
-
-      ul {
-        list-style: none;
-
-        li {
-          float: left;
-
-          &#cancel {
-            float: right;
-            margin-top: 10px;
-          }
-        }
-      }
-    }
-  }
-
   section.wiki-body {
     @extend .content;
 

From 92f2927fe53c4ab1ef7a8b60cbea1acb178cad69 Mon Sep 17 00:00:00 2001
From: Reda Lemeden <reda@thoughtbot.com>
Date: Tue, 14 Feb 2012 13:57:16 -0500
Subject: [PATCH 05/10] Redesigned the question tag filtering & navigation

---
 sass/_discussion-questions.scss | 125 ++++++++++++++------------------
 1 file changed, 55 insertions(+), 70 deletions(-)

diff --git a/sass/_discussion-questions.scss b/sass/_discussion-questions.scss
index eb0d0aedf3..d508ba6161 100644
--- a/sass/_discussion-questions.scss
+++ b/sass/_discussion-questions.scss
@@ -4,93 +4,45 @@ div.question-list-header {
   overflow: hidden;
   width: flex-grid(9,9);
 
-  section.question-list-meta, section.question-sort-filter {
+  section.question-list-meta  {
     display: block;
     overflow: hidden;
     width: 100%;
 
     div {
-      display: inline;
+      display: inline-block;
       float: left;
     }
-  }
 
-  section.question-list-meta {
+    span.label {
+      color: #555;
+    }
+
     div.question-list-title {
       margin-right: flex-gutter();
-      // width: flex-grid(3,9);
 
       h1 {
         margin-top: 0;
       }
     }
 
-    div.question-list-tags {
-      // width: flex-grid(6,9);
-      padding-top:8px;
-
-      ul.tags {
-        display: inline;
-        // float: left;
-
-        li {
-          span.delete-icon, div.delete-icon {
-            @include border-radius(0 4px 4px 0);
-            background: #555;
-            color: #eee;
-            cursor: pointer;
-            float: none;
-            left: 10px;
-            padding: 3px 6px;
-            position: relative;
-            top: 1px;
-            opacity: 0.5;
-
-            &:hover {
-              opacity: 1;
-            }
-          }
-        }
-      }
-    }
-  }
-  section.question-sort-filter {
-    font-size: 16px;
-
-    span.label {
-      color: #555;
-    }
-
-    div.question-filter {
-      margin-right: flex-gutter(9);
-
-      ul.scope-filters {
-        @extend .action-link;
-
-        li {
-          display: inline;
-
-          a {
-            &.on {
-              font-weight: bold;
-            }
-
-            &:before {
-              content: '|';
-              color: darken(#F6EFD4, 10%);
-              font-size: 22px;
-            }
-          }
-        }
-      }
-    }
 
     div.question-sort {
-      margin-left: flex-gutter();
       float: right;
+      margin-left: flex-gutter();
+      // width: flex-grid(3,9);
+
+      // @media screen and (max-width: 1300px) {
+      //   width: 100%;
+      // }
 
       nav {
         @extend .action-link;
+        float: right;
+
+        // @media screen and (max-width: 1300px) {
+        //   float: left;
+        // }
 
         a {
           &.on span{
@@ -107,9 +59,46 @@ div.question-list-header {
     }
   }
 
+  section.question-tags-list {
+    display: block;
+    min-height: 40px;
+    overflow: hidden;
+    width: 100%;
+
+    div.tags-list {
+      padding-top:8px;
+      display: inline-block;
+      float: left;
+
+      ul.tags {
+        display: inline;
+
+        li {
+          span.delete-icon, div.delete-icon {
+            @include border-radius(0 4px 4px 0);
+            background: #555;
+            color: #eee;
+            cursor: pointer;
+            float: none;
+            display: inline;
+            clear: none;
+            left: 10px;
+            padding: 3px 6px;
+            position: relative;
+            top: 1px;
+            opacity: 0.5;
+
+            &:hover {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
-ul.question-list {
+ul.question-list, div#question-list {
   width: flex-grid(9,9);
 
   li.single-question {
@@ -208,9 +197,5 @@ ul.question-list {
   }
 }
 
-div.search-tips {
-  display: block;
-}
-
 .search-result-summary {
 }

From 3a25e96a2c8c6212976937841265c762bf5f21bd Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Tue, 14 Feb 2012 14:35:49 -0500
Subject: [PATCH 06/10] Fixed padding on discussions

---
 sass/discussion/_discussion.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/sass/discussion/_discussion.scss b/sass/discussion/_discussion.scss
index 111d23bff0..14602f897d 100644
--- a/sass/discussion/_discussion.scss
+++ b/sass/discussion/_discussion.scss
@@ -38,9 +38,9 @@ body.askbot {
       div.discussion-content {
         @include box-sizing(border-box);
         display: table-cell;
-        padding: $gw-gutter;
+        padding: lh();
         vertical-align: top;
-        width: flex-grid(9);
+        width: flex-grid(9) + flex-gutter();
 
         p.tabula-rasa {
           @include border-radius(5px);
@@ -72,7 +72,7 @@ body.askbot {
         @include border-radius(0 4px 4px 0);
         border-left: 1px solid #d3d3d3;
         border-right: 1px solid #f6f6f6;
-        padding: $gw-gutter;
+        padding: lh();
         width: flex-grid(3);
 
         h2 {

From f1fc649eee0e8a5eb2c1f9e5d8c0114018faa2c1 Mon Sep 17 00:00:00 2001
From: kaishin <reda@thoughtbot.com>
Date: Tue, 14 Feb 2012 15:24:31 -0500
Subject: [PATCH 07/10] Fixed the tag div properties

---
 sass/discussion/_questions.scss | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/sass/discussion/_questions.scss b/sass/discussion/_questions.scss
index d508ba6161..5a2780853c 100644
--- a/sass/discussion/_questions.scss
+++ b/sass/discussion/_questions.scss
@@ -30,20 +30,11 @@ div.question-list-header {
     div.question-sort {
       float: right;
       margin-left: flex-gutter();
-      // width: flex-grid(3,9);
-
-      // @media screen and (max-width: 1300px) {
-      //   width: 100%;
-      // }
 
       nav {
         @extend .action-link;
         float: right;
 
-        // @media screen and (max-width: 1300px) {
-        //   float: left;
-        // }
-
         a {
           &.on span{
             font-weight: bold;
@@ -61,14 +52,25 @@ div.question-list-header {
 
   section.question-tags-list {
     display: block;
-    min-height: 40px;
+    min-height: 26px;
     overflow: hidden;
+    padding-top:5px;
     width: 100%;
 
-    div.tags-list {
-      padding-top:8px;
+    div {
       display: inline-block;
       float: left;
+    }
+
+    div.back {
+      margin-right: 10px;
+
+      a {
+        color: #555;
+      }
+    }
+
+    div.tags-list {
 
       ul.tags {
         display: inline;

From de3fd877e50bd010ccdf0a4bc264c3928a22ce3d Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Wed, 15 Feb 2012 09:32:23 -0500
Subject: [PATCH 08/10] Fixed header bug and calculator bug in firefox

---
 sass/layout/_header.scss    | 1 +
 sass/layout/_leanmodal.scss | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss
index 5d3cf5a048..144194e397 100644
--- a/sass/layout/_header.scss
+++ b/sass/layout/_header.scss
@@ -71,6 +71,7 @@ div.header-wrapper {
       margin: 0;
       padding: 0;
       text-shadow: 0 -1px 0 darken($mit-red, 10%);
+      max-height: 52px; //fix for firefox
       -webkit-font-smoothing: antialiased;
 
 
diff --git a/sass/layout/_leanmodal.scss b/sass/layout/_leanmodal.scss
index 9e754377e2..730ea7b764 100644
--- a/sass/layout/_leanmodal.scss
+++ b/sass/layout/_leanmodal.scss
@@ -221,7 +221,6 @@ div#feedback_div{
 div#calculator_div {
   max-width: 500px;
 
-
   form {
     padding-bottom: lh();
     margin-bottom: lh();
@@ -246,11 +245,12 @@ div#calculator_div {
 
     input#calculator_output {
       border: 0;
-      background: 0;
+      background: none;
       padding: lh(.35);
       width: 60px;
       font-size: 24px;
       font-weight: bold;
+      margin-top: 4px;
     }
   }
 

From d287a110f88af53bc3a27c05a9faff6ca059ffce Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Wed, 15 Feb 2012 10:08:14 -0500
Subject: [PATCH 09/10] Made calc answer input whole width

---
 sass/layout/_leanmodal.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sass/layout/_leanmodal.scss b/sass/layout/_leanmodal.scss
index 730ea7b764..fb3e2d5a8f 100644
--- a/sass/layout/_leanmodal.scss
+++ b/sass/layout/_leanmodal.scss
@@ -247,8 +247,8 @@ div#calculator_div {
       border: 0;
       background: none;
       padding: lh(.35);
-      width: 60px;
       font-size: 24px;
+      width: 378px;
       font-weight: bold;
       margin-top: 4px;
     }

From 1e4951dc889b78df7bc0386027029edd877df386 Mon Sep 17 00:00:00 2001
From: kaishin <reda@thoughtbot.com>
Date: Wed, 15 Feb 2012 10:37:05 -0500
Subject: [PATCH 10/10] Started restyling the sidebar

---
 sass/application.scss                  |  2 +-
 sass/discussion/_discussion.scss       | 27 -------------
 sass/discussion/_form-wmd-toolbar.scss |  2 +-
 sass/discussion/_sidebar.scss          | 55 ++++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 29 deletions(-)
 create mode 100644 sass/discussion/_sidebar.scss

diff --git a/sass/application.scss b/sass/application.scss
index e26dc21221..81e2af18c9 100644
--- a/sass/application.scss
+++ b/sass/application.scss
@@ -13,4 +13,4 @@
 @import "profile";
 @import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki";
 @import "help";
-@import "discussion/askbot-original", "discussion/discussion", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar";
+@import "discussion/askbot-original", "discussion/discussion","discussion/sidebar", "discussion/questions", "discussion/tags", "discussion/question-view" , "discussion/answers", "discussion/forms", "discussion/form-wmd-toolbar";
diff --git a/sass/discussion/_discussion.scss b/sass/discussion/_discussion.scss
index 14602f897d..0a4395e27c 100644
--- a/sass/discussion/_discussion.scss
+++ b/sass/discussion/_discussion.scss
@@ -65,33 +65,6 @@ body.askbot {
           }
         }
       }
-
-      aside {
-        @extend .sidebar;
-        @include box-shadow(inset 1px 0 0 #f6f6f6);
-        @include border-radius(0 4px 4px 0);
-        border-left: 1px solid #d3d3d3;
-        border-right: 1px solid #f6f6f6;
-        padding: lh();
-        width: flex-grid(3);
-
-        h2 {
-          font-size: 16px;
-        }
-
-        h3 {
-          border-bottom: 0;
-          box-shadow: none;
-        }
-
-        input[type="text"] {
-          width: 76%;
-        }
-
-        #displayTagFilterControl {
-          margin-top: 10px;
-        }
-      }
     }
   }
 
diff --git a/sass/discussion/_form-wmd-toolbar.scss b/sass/discussion/_form-wmd-toolbar.scss
index 050f4bf354..be5bdaa24a 100644
--- a/sass/discussion/_form-wmd-toolbar.scss
+++ b/sass/discussion/_form-wmd-toolbar.scss
@@ -3,7 +3,7 @@
 }
 
 #wmd-button-bar {
-  background: url(static/images/askbot/editor-toolbar-background.png) repeat-x bottom;
+  background: url(/static/images/askbot/editor-toolbar-background.png) repeat-x bottom;
   border: 1px solid #ddd;
   height:36px;
   float:left;
diff --git a/sass/discussion/_sidebar.scss b/sass/discussion/_sidebar.scss
new file mode 100644
index 0000000000..faa30d71a0
--- /dev/null
+++ b/sass/discussion/_sidebar.scss
@@ -0,0 +1,55 @@
+div.discussion-wrapper aside {
+  @extend .sidebar;
+  @include box-shadow(inset 1px 0 0 #f6f6f6);
+  @include border-radius(0 4px 4px 0);
+  border-left: 1px solid #d3d3d3;
+  border-right: 1px solid #f6f6f6;
+  padding: lh();
+  width: flex-grid(3);
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3 {
+    border-bottom: 0;
+    box-shadow: none;
+  }
+
+  input[type="text"] {
+    width: 76%;
+  }
+
+  #displayTagFilterControl {
+    margin-top: 10px;
+  }
+
+  div.search-box {
+    input {
+      display: inline;
+    }
+    input[type='submit'] {
+      @include box-shadow(none);
+      opacity: 0.5;
+      background: url(/static/images/askbot/search-icon.png) no-repeat center;
+      border: 0;
+      margin-left: 3px;
+      position: absolute;
+      text-indent: -9999px;
+      width: 24px;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      &:focus {
+        opacity: 1;
+      }
+    }
+
+    input#keywords {
+      padding-left: 30px;
+    }
+  }
+}
+