diff --git a/doc-src/.compass/config.rb b/doc-src/.compass/config.rb
index 676ed43f..f3f04ac1 100644
--- a/doc-src/.compass/config.rb
+++ b/doc-src/.compass/config.rb
@@ -1,5 +1,6 @@
 # Require any additional compass plugins here.
-# require 'susy'
+require 'susy'
+require 'css-slideshow'
 
 # Set this to the root of your project when deployed:
 http_path = "/docs"
diff --git a/doc-src/Rules b/doc-src/Rules
index d6b5c623..5fc90413 100644
--- a/doc-src/Rules
+++ b/doc-src/Rules
@@ -6,26 +6,38 @@ puts "Compass running from: #{Compass.lib_directory}"
 
 Compass.add_configuration "#{File.dirname(__FILE__)}/.compass/config.rb"
 
-SITE_ROOT = "/docs"
+SITE_ROOT = "/docs" 
 
 compile '/assets/*/' do
   nil
 end
 
-['/examples/*/markup/', '/examples/*/stylesheet/', '/examples/*/background/'].each do |ex_file|
-  compile ex_file do
+['markup', 'stylesheet', 'background'].each do |ex_file|
+  compile "/examples/*/#{ex_file}/" do
     nil
   end
 end
 
+compile '/' do
+  filter :haml, :ugly => true
+  layout 'main'
+end
+
 compile '/examples/*/' do
   filter :haml, :ugly => true
   filter :highlight if ENV['SYNTAX']
   layout 'example'
 end
 
-compile '/stylesheets/*/' do
-  filter :sass, Compass.sass_engine_options
+skip = Proc.new{nil}
+sass_options = Compass.sass_engine_options
+
+(0..5).each do |i|
+  compile("/stylesheets/#{'*/' * i}_*/") {nil}
+end
+
+compile '/stylesheets/*' do
+  filter :sass, sass_options.merge(:syntax => item[:extension].to_sym)
 end
 
 compile '/reference/*/' do
@@ -39,9 +51,8 @@ compile '*' do
   layout 'default'
 end
 
-route '/stylesheets/*/_*/' do
-  # don't output partials, so return nil
-  nil
+(0..5).each do |i|
+  route("/stylesheets/#{'*/' * i}_*/") {nil}
 end
 
 route '/assets/css/*/' do
diff --git a/doc-src/assets/javascripts/fixups.js b/doc-src/assets/javascripts/fixups.js
new file mode 100644
index 00000000..93916f58
--- /dev/null
+++ b/doc-src/assets/javascripts/fixups.js
@@ -0,0 +1,10 @@
+$(function(){
+  $('span.color').each(function(i,e){
+   e = $(e);
+   e.after('<span class="swatch" style="background-color:'+e.text()+';"></span>');
+  });
+  $('span.arg[data-default-value]').each(function(i,e){
+    e = $(e);
+    e.attr("title", "Defaults to: " + e.attr("data-default-value"))
+  })
+});
diff --git a/doc-src/config.yaml b/doc-src/config.yaml
index 02dacb5e..ba6f66a5 100644
--- a/doc-src/config.yaml
+++ b/doc-src/config.yaml
@@ -6,4 +6,5 @@ data_sources:
 - items_root: /assets
   layouts_root: /assets
   type: filesystem_assets
+text_extensions: [ 'css', 'erb', 'haml', 'htm', 'html', 'js', 'less', 'markdown', 'md', 'php', 'rb', 'sass', 'scss', 'txt' ]
 output_dir: ..
diff --git a/doc-src/content/index.haml b/doc-src/content/index.haml
index 4174ff4d..bf9e8240 100644
--- a/doc-src/content/index.haml
+++ b/doc-src/content/index.haml
@@ -19,7 +19,7 @@ body_id: home
   This screencast will walk you through getting set up,
   learning Sass, and then how to use Compass to style a webpage.
 
-<object width="660" height="371"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="660" height="371"></embed></object>
+<object width="660" height="371"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="660" height="371" /></object>
 
 %h2 Bugs Reports, Discussions, Support
 
diff --git a/doc-src/content/stylesheets/_base.sass b/doc-src/content/stylesheets/_base.sass
new file mode 100644
index 00000000..78f8542f
--- /dev/null
+++ b/doc-src/content/stylesheets/_base.sass
@@ -0,0 +1,64 @@
+//**
+//  Susy: Fixed-Elastic-Fluid grids without all the math
+//  By: Eric A. Meyer and OddBird Collective
+//  Site: www.oddbird.net/susy/
+//**
+
+// FONT-SIZE
+// Override these values as needed (defaults are 12/18)
+$base-font-size: 16px
+
+$base-line-height: 24px
+
+// GRID
+// Set these values as needed for your grid layout.
+//  - defaults are shown.
+$total-cols: 12
+
+$col-width: 3.5em
+
+$gutter-width: 2em
+
+$side-gutter-width: 1em
+
+// OMEGA_FLOAT
+// By default, +omega elements are floated right.
+// You can override that globally here:
+// !omega_float = "right"
+
+// HACKS
+// Are you using hacks or conditional comments? Susy makes both possible.
+// Leave this as 'true' to use hacks, set it as false for conditional comments.
+// Conditional comments will require overrides for +omega, +inline-block and
+// several other mixins.
+// !hacks = true
+
+// SUSY
+// Don't move this @import above the GRID and FONT-SIZE overrides.
+@import susy/susy
+
+// COLORS
+// Set any colors you will need later.
+$base: black
+
+$alt: #005498
+
+// FONTS
+// Give yourself some font stacks to work with.
+=sans-family
+  font-family: Helvetica, Arial, sans-serif
+
+=serif-family
+  font-family: Baskerville, Palatino, serif
+
+// OTHER MIXINS
+// Mixins set here will be available in defaults, screen, print and IE
+// Or anywhere you import either base.sass or defaults.sass
+=skip-links
+  a
+    +skip-link
+    width: 100%
+
+#skip-links
+  position: relative
+  +skip-links
diff --git a/doc-src/content/stylesheets/_defaults.sass b/doc-src/content/stylesheets/_defaults.sass
new file mode 100644
index 00000000..1675bf52
--- /dev/null
+++ b/doc-src/content/stylesheets/_defaults.sass
@@ -0,0 +1,136 @@
+//** DEFAULT STYLES **//
+// Don't forget to set your default styles.
+
+// Get all the details and mixins from base.sass
+@import base
+
+// Reset browser defaults, and prepare block-level HTML5 elements
+@import susy/reset
+
+/* @group defaults
+
+body
+  +sans-family
+  color: $base
+
+/* @group links
+
+\:focus
+  outline: 1px dotted $alt
+
+a
+  &:link, &:visited
+    color: $alt
+    text-decoration: none
+  &:focus, &:hover, &:active
+    color: $alt - #222222
+
+/* @end
+
+/* @group inline tags
+
+cite
+  font-style: italic
+
+em
+  font-style: italic
+
+strong
+  font-weight: bold
+
+ins
+  text-decoration: underline
+
+del
+  text-decoration: line-through
+
+q
+  font-style: italic
+  em
+    font-style: normal
+
+/* @end
+
+/* @group replaced tags
+
+img
+  vertical-align: bottom
+
+/* @end
+
+/* @group headers
+
+h1, h2, h3, h4, h5, h6
+  font-weight: bold
+
+/* @end
+
+/* @group block tags
+
+p
+  +leader
+  +trailer
+
+=list-default($ol: false)
+  +leader
+  +trailer
+  margin-left: 3em
+  @if $ol
+    list-style: decimal
+  @else
+    list-style: disc
+
+=no-style-list
+  +no-bullets
+  margin: 0
+  padding: 0
+
+ol
+  +list-default(ol)
+
+ul
+  +list-default
+
+blockquote
+  margin: $base-rhythm-unit
+  +serif-family
+
+/* @end
+
+/* @group tables
+
+/* tables still need 'cellspacing="0"' in the markup
+
+table
+  width: 100%
+
+th
+  font-weight: bold
+
+/* @end
+
+/* @group forms
+
+fieldset
+  +trailer
+
+legend
+  font-weight: bold
+  font-variant: small-caps
+
+label
+  display: block
+
+legend + label
+  margin-top: 0
+
+textarea, input:not([type="radio"])
+  +box-sizing(border-box)
+  width: 100%
+
+button
+  vertical-align: top
+
+/* @end
+
+/* @end
diff --git a/doc-src/content/stylesheets/_slideshow.sass b/doc-src/content/stylesheets/_slideshow.sass
new file mode 100644
index 00000000..db0c9f31
--- /dev/null
+++ b/doc-src/content/stylesheets/_slideshow.sass
@@ -0,0 +1,14 @@
+// CSS-only Lightboxes
+// Plugin by Eric Meyer - http://www.oddbird.net/
+// Based on the work of Jenna Smith - http://growldesign.co.uk/
+
+// Compatible with IE6+, Mozilla and Webkit browsers.
+// **Not compatible with Opera without Javascript help**
+
+// Override with the proper class names for your slide/slide-nav containers
+$slide-container: ".slides"
+
+$max-slides: 10
+
+// import slideshow
+@import css-slideshow
\ No newline at end of file
diff --git a/doc-src/content/stylesheets/example.sass b/doc-src/content/stylesheets/example.sass
deleted file mode 100644
index 3d6f25d6..00000000
--- a/doc-src/content/stylesheets/example.sass
+++ /dev/null
@@ -1,26 +0,0 @@
-body
-  font-family: "Lucida Grande", Arial, sans-serif
-
-#example
-  width: 100%
-  > tbody > tr > td
-    border: 2px solid black
-    vertical-align: top
-    width: 48%
-    min-width: 400px
-    pre
-      margin: 0
-      overflow: auto
-  td.line_numbers, td.linenos
-    padding: 6px 3px
-    border-right: 1px solid #333
-    background-color: #ccc
-  td.code
-    padding: 6px 3px
-    max-width: 400px
-    pre
-      margin: 0
-      overflow: auto
-
-@import partials/syntax
-  
\ No newline at end of file
diff --git a/doc-src/content/stylesheets/ie.sass b/doc-src/content/stylesheets/ie.sass
new file mode 100644
index 00000000..67edc67a
--- /dev/null
+++ b/doc-src/content/stylesheets/ie.sass
@@ -0,0 +1,7 @@
+/* Welcome to Susy. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]-->
+
+@import base
diff --git a/doc-src/content/stylesheets/legacy/example.scss b/doc-src/content/stylesheets/legacy/example.scss
new file mode 100644
index 00000000..1cd611c9
--- /dev/null
+++ b/doc-src/content/stylesheets/legacy/example.scss
@@ -0,0 +1,25 @@
+body {
+  font-family: "Lucida Grande", Arial, sans-serif; }
+
+#example {
+  width: 100%;
+  > tbody > tr > td {
+    border: 2px solid black;
+    vertical-align: top;
+    width: 48%;
+    min-width: 400px;
+    pre {
+      margin: 0;
+      overflow: auto; } }
+  td.line_numbers, td.linenos {
+    padding: 6px 3px;
+    border-right: 1px solid #333333;
+    background-color: #cccccc; }
+  td.code {
+    padding: 6px 3px;
+    max-width: 400px;
+    pre {
+      margin: 0;
+      overflow: auto; } } }
+
+@import "partials/syntax";
diff --git a/doc-src/content/stylesheets/legacy/main.scss b/doc-src/content/stylesheets/legacy/main.scss
new file mode 100644
index 00000000..ecc251fe
--- /dev/null
+++ b/doc-src/content/stylesheets/legacy/main.scss
@@ -0,0 +1,157 @@
+@import "compass/utilities";
+@import "compass/css3";
+@import "blueprint";
+
+body {
+  font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif;
+  line-height: 1.5;
+  font-size: 13px; }
+
+// Layout
+#container {
+  @include pie-clearfix; }
+
+#main {
+  @include column(16, true);
+  @include prepend(8); }
+
+#sidebar {
+  @include column(8);
+  @include pull(24, true);
+  background: #f5f5f5;
+  h2 {
+    font-size: 16px; }
+  ul, ol {
+    list-style-position: inside;
+    padding-left: 10px; }
+  .selected {
+    font-weight: bold; }
+  a {
+    @include hover-link; } }
+
+#footer {
+  @include column(24);
+  background: #f5f5f5;
+  border-top: 2px solid #dddddd;
+  margin: 1em 0;
+  .legalese {
+    @include column(12); }
+  hr {
+    @include colruler; }
+  .links {
+    @include column(12, true);
+    ul {
+      @include no-bullets;
+      a {
+        @include hover-link; } } } }
+
+// Typography
+
+blockquote {
+  font-style: italic; }
+
+hr {
+  background: none;
+  height: 0;
+  font-size: 0;
+  line-height: 0;
+  border: none;
+  border-top: 2px solid #cccccc; }
+
+// Regular data tables
+table.datagrid {
+  border-collapse: collapse;
+  th {
+    background: #eeeeee; }
+  td,
+  th {
+    border: 1px solid #cccccc;
+    text-align: left;
+    padding: 5px;
+    cell-spacing: 0; } }
+
+// Reference
+
+body.reference {
+  h3 {
+    &.mixin, &.constant {
+      font-family: Monaco, courier;
+      font-weight: 200;
+      @include text-shadow;
+      background-color: #eeeeee;
+      border: 1px solid #aaaaaa;
+      padding: 0.75em;
+      margin-bottom: 0;
+      a.permalink {
+        @include hover-link;
+        @include link-colors(inherit, inherit); } }
+    .arg[data-default-value] {
+      color: #666666;
+      &:before {
+        content: "["; }
+      &:after {
+        content: "]"; } } }
+  .source-documentation {
+    background-color: #eeeeee;
+    border: 1px solid #aaaaaa;
+    border-top-width: 0;
+    padding: 0.75em; }
+  dl.source-documentation {
+    margin-top: 0;
+    dt {
+      font-weight: bold;
+      float: left;
+      margin-right: 15px; }
+    dt:not(:first-child) {
+      margin-top: 1em; } }
+  a.view-source {
+    float: right;
+    margin: 1.25em; }
+  span.color + span.swatch {
+    margin: 0 3px 3px;
+    border: 1px solid #333333;
+    width: 1em;
+    height: 1em;
+    @include inline-block; }
+  .color-snippet {
+    width: 100px;
+    height: 20px;
+    @include border-radius(3px); }
+  a.help {
+    font-size: 75%; } }
+
+table.constants {
+  width: 100%;
+  @include alternating-rows-and-columns(#eeeeee, #bbbbbb, #191919);
+  @include outer-table-borders(1px);
+  @include inner-table-borders(1px);
+  td, th {
+    padding: 0.25em 0.5em; } }
+
+ol#breadcrumbs {
+  @include horizontal-list;
+  @include no-bullets;
+  li:after {
+    content: " > "; }
+  li.last:after {
+    content: ""; }
+  li.last {
+    visibility: hidden; } }
+
+body#home #logo {
+  @include replace-text(unquote("compass.png"), 0px);
+  height: 159px; }
+
+p code {
+  border: 1px solid #cccccc;
+  background-color: #f2f2f2;
+  padding: 2px; }
+
+body#reference-compass-css3 {
+  #border-radius {
+    padding: 2px 8px;
+    @include border-radius(0.75em); }
+  #text-shadow {
+    @include text-shadow(red); } }
+
+@import "partials/syntax";
diff --git a/doc-src/content/stylesheets/legacy/partials/_syntax.scss b/doc-src/content/stylesheets/legacy/partials/_syntax.scss
new file mode 100644
index 00000000..848cc852
--- /dev/null
+++ b/doc-src/content/stylesheets/legacy/partials/_syntax.scss
@@ -0,0 +1,2 @@
+@import "syntax/coderay";
+@import "syntax/pygments";
diff --git a/doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss b/doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss
new file mode 100644
index 00000000..9b91e48c
--- /dev/null
+++ b/doc-src/content/stylesheets/legacy/partials/syntax/_coderay.scss
@@ -0,0 +1,211 @@
+.CodeRay {
+  .debug {
+    color: white !important;
+    background: blue !important; }
+  .af {
+    color: #0000cc; }
+  .an {
+    color: #000077; }
+  .at {
+    color: #ff0088; }
+  .av {
+    color: #770000; }
+  .aw {
+    color: #cc0000; }
+  .bi {
+    color: #550099;
+    font-weight: bold; }
+  .c {
+    color: #888888; }
+  .ch {
+    color: #0044dd;
+    .k {
+      color: #0044dd; }
+    .dl {
+      color: #003399; } }
+  .cl {
+    color: #bb0066;
+    font-weight: bold; }
+  .cm {
+    color: #aa0088;
+    font-weight: bold; }
+  .co {
+    color: #003366;
+    font-weight: bold; }
+  .cr {
+    color: #00aa00; }
+  .cv {
+    color: #336699; }
+  .de {
+    color: #bb00bb; }
+  .df {
+    color: #009999;
+    font-weight: bold; }
+  .di {
+    color: #008888;
+    font-weight: bold; }
+  .dl {
+    color: black; }
+  .do {
+    color: #997700; }
+  .dt {
+    color: #3344bb; }
+  .ds {
+    color: #dd4422;
+    font-weight: bold; }
+  .e {
+    color: #666666;
+    font-weight: bold; }
+  .en {
+    color: #880000;
+    font-weight: bold; }
+  .er {
+    color: red;
+    background-color: #ffaaaa; }
+  .ex {
+    color: #cc0000;
+    font-weight: bold; }
+  .fl {
+    color: #6600ee;
+    font-weight: bold; }
+  .fu {
+    color: #0066bb;
+    font-weight: bold; }
+  .gv {
+    color: #dd7700;
+    font-weight: bold; }
+  .hx {
+    color: #005588;
+    font-weight: bold; }
+  .i {
+    color: #0000dd;
+    font-weight: bold; }
+  .ic {
+    color: #bb4444;
+    font-weight: bold; }
+  .il {
+    background: #dddddd;
+    color: black;
+    .il {
+      background: #cccccc;
+      .il {
+        background: #bbbbbb; } }
+    .idl {
+      background: #dddddd;
+      font-weight: bold;
+      color: #666666; } }
+  .idl {
+    background-color: #bbbbbb;
+    font-weight: bold;
+    color: #666666; }
+  .im {
+    color: red; }
+  .in {
+    color: #bb22bb;
+    font-weight: bold; }
+  .iv {
+    color: #3333bb; }
+  .la {
+    color: #997700;
+    font-weight: bold; }
+  .lv {
+    color: #996633; }
+  .oc {
+    color: #4400ee;
+    font-weight: bold; }
+  .of {
+    color: black;
+    font-weight: bold; }
+  .pc {
+    color: #003388;
+    font-weight: bold; }
+  .pd {
+    color: #336699;
+    font-weight: bold; }
+  .pp {
+    color: #557799; }
+  .ps {
+    color: #0000cc;
+    font-weight: bold; }
+  .pt {
+    color: #007744;
+    font-weight: bold; }
+  .r, .kw {
+    color: #008800;
+    font-weight: bold; }
+  .ke {
+    color: #880088;
+    .dl {
+      color: #660066; }
+    .ch {
+      color: #8800ff; } }
+  .vl {
+    color: #008888; }
+  .rx {
+    background-color: #fff0ff;
+    .k {
+      color: #880088; }
+    .dl {
+      color: #440044; }
+    .mod {
+      color: #cc22cc; }
+    .fu {
+      color: #440044;
+      font-weight: bold; } }
+  .s {
+    background-color: #fff0f0;
+    color: #dd2200;
+    .s {
+      background-color: #ffe0e0;
+      .s {
+        background-color: #ffd0d0; } }
+    .ch {
+      color: #bb00bb; }
+    .dl {
+      color: #771100; } }
+  .sh {
+    background-color: #f0fff0;
+    color: #22bb22;
+    .dl {
+      color: #116611; } }
+  .sy {
+    color: #aa6600;
+    .k {
+      color: #aa6600; }
+    .dl {
+      color: #663300; } }
+  .ta {
+    color: #007700; }
+  .tf {
+    color: #007700;
+    font-weight: bold; }
+  .ts {
+    color: #dd7700;
+    font-weight: bold; }
+  .ty {
+    color: #333399;
+    font-weight: bold; }
+  .v {
+    color: #003366; }
+  .xt {
+    color: #444444; }
+  .ins {
+    background: #aaffaa; }
+  .del {
+    background: #ffaaaa; }
+  .chg {
+    color: #aaaaff;
+    background: #000077; }
+  .head {
+    color: #ff88ff;
+    background: #550055; }
+  .ins .ins {
+    color: #008800;
+    font-weight: bold; }
+  .del .del {
+    color: #880000;
+    font-weight: bold; }
+  .chg .chg {
+    color: #6666ff; }
+  .head .head {
+    color: #ff44ff; } }
diff --git a/doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss b/doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss
new file mode 100644
index 00000000..8622ad5f
--- /dev/null
+++ b/doc-src/content/stylesheets/legacy/partials/syntax/_pygments.scss
@@ -0,0 +1,151 @@
+.highlight {
+  .hll {
+    background-color: #ffffcc; }
+  .c {
+    color: #606060;
+    font-style: italic; }
+  .err {
+    color: #f00000;
+    background-color: #f0a0a0; }
+  .k {
+    color: #208090;
+    font-weight: bold; }
+  .o {
+    color: #303030; }
+  .cm {
+    color: #606060;
+    font-style: italic; }
+  .cp {
+    color: #507090; }
+  .c1 {
+    color: #606060;
+    font-style: italic; }
+  .cs {
+    color: #c00000;
+    font-weight: bold;
+    font-style: italic; }
+  .gd {
+    color: #a00000; }
+  .ge {
+    font-style: italic; }
+  .gr {
+    color: red; }
+  .gh {
+    color: navy;
+    font-weight: bold; }
+  .gi {
+    color: #00a000; }
+  .go {
+    color: gray; }
+  .gp {
+    color: #c65d09;
+    font-weight: bold; }
+  .gs {
+    font-weight: bold; }
+  .gu {
+    color: purple;
+    font-weight: bold; }
+  .gt {
+    color: #0040d0; }
+  .kc, .kd, .kn {
+    color: #208090;
+    font-weight: bold; }
+  .kp {
+    color: #0080f0;
+    font-weight: bold; }
+  .kr {
+    color: #208090;
+    font-weight: bold; }
+  .kt {
+    color: #6060f0;
+    font-weight: bold; }
+  .m {
+    color: #6000e0;
+    font-weight: bold; }
+  .s {
+    background-color: #e0e0ff; }
+  .na {
+    color: #000070; }
+  .nb {
+    color: #007020; }
+  .nc {
+    color: #e090e0;
+    font-weight: bold; }
+  .no {
+    color: #50e0d0;
+    font-weight: bold; }
+  .nd {
+    color: #505050;
+    font-weight: bold; }
+  .ni {
+    color: maroon; }
+  .ne {
+    color: #f00000;
+    font-weight: bold; }
+  .nf {
+    color: #50e0d0;
+    font-weight: bold; }
+  .nl {
+    color: #907000;
+    font-weight: bold; }
+  .nn {
+    color: #0e84b5;
+    font-weight: bold; }
+  .nt {
+    color: #007000; }
+  .nv {
+    color: #003060; }
+  .ow {
+    color: black;
+    font-weight: bold; }
+  .w {
+    color: #bbbbbb; }
+  .mf {
+    color: #6000e0;
+    font-weight: bold; }
+  .mh {
+    color: #005080;
+    font-weight: bold; }
+  .mi {
+    color: #6060f0;
+    font-weight: bold; }
+  .mo {
+    color: #4000e0;
+    font-weight: bold; }
+  .sb {
+    background-color: #e0e0ff; }
+  .sc {
+    color: #8080f0; }
+  .sd {
+    color: #d04020; }
+  .s2 {
+    background-color: #e0e0ff; }
+  .se {
+    color: #606060;
+    font-weight: bold;
+    background-color: #e0e0ff; }
+  .sh {
+    background-color: #e0e0ff; }
+  .si {
+    background-color: #e0e0e0; }
+  .sx {
+    color: #f08080;
+    background-color: #e0e0ff; }
+  .sr {
+    color: black;
+    background-color: #e0e0ff; }
+  .s1 {
+    background-color: #e0e0ff; }
+  .ss {
+    color: #f0c080; }
+  .bp {
+    color: #007020; }
+  .vc {
+    color: #c0c0f0; }
+  .vg {
+    color: #f08040; }
+  .vi {
+    color: #a0a0f0; }
+  .il {
+    color: #6060f0;
+    font-weight: bold; } }
diff --git a/doc-src/content/stylesheets/legacy/screen.scss b/doc-src/content/stylesheets/legacy/screen.scss
new file mode 100644
index 00000000..f52702dd
--- /dev/null
+++ b/doc-src/content/stylesheets/legacy/screen.scss
@@ -0,0 +1,675 @@
+// XXX Placeholder
+#skip-links {
+  position: relative;
+  a {
+    position: absolute;
+    top: -9999em;
+    display: block;
+    width: 100%;
+    &:focus {
+      top: 0;
+      z-index: 999; } } }
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline; }
+
+*:focus {
+  outline: 0; }
+
+body {
+  line-height: 1;
+  color: black;
+  background: white; }
+
+ol, ul {
+  list-style: none; }
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle; }
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+q, blockquote {
+  quotes: "" ""; }
+
+q {
+  &:before, &:after {
+    content: ""; } }
+
+blockquote {
+  &:before, &:after {
+    content: ""; } }
+
+a img {
+  border: none; }
+
+section, article, aside, header, footer, nav, dialog, figure {
+  display: block; }
+
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  color: black; }
+
+:focus {
+  outline: 1px dotted #005498; }
+
+a {
+  &:link, &:visited {
+    color: #005498;
+    text-decoration: none; }
+  &:focus, &:hover, &:active {
+    color: #003276; } }
+
+cite, em {
+  font-style: italic; }
+
+strong {
+  font-weight: bold; }
+
+ins {
+  text-decoration: underline; }
+
+del {
+  text-decoration: line-through; }
+
+q {
+  font-style: italic;
+  em {
+    font-style: normal; } }
+
+img {
+  vertical-align: bottom; }
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold; }
+
+p {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em; }
+
+ol {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  margin-left: 3em;
+  list-style: decimal; }
+
+ul {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  margin-left: 3em;
+  list-style: disc; }
+
+blockquote {
+  margin: 1.5em;
+  font-family: Baskerville, Palatino, serif; }
+
+table {
+  width: 100%; }
+
+th {
+  font-weight: bold; }
+
+fieldset {
+  margin-bottom: 1.5em; }
+
+legend {
+  font-weight: bold;
+  font-variant: small-caps; }
+
+label {
+  display: block; }
+
+legend + label {
+  margin-top: 0; }
+
+textarea, input:not([type="radio"]) {
+  /* Mozilla (FireFox, Camino) */
+  -moz-box-sizing: border-box;
+  /* Webkit (Safari, Chrome) */
+  -webkit-box-sizing: border-box;
+  /* IE (8) */
+  -ms-box-sizing: border-box;
+  /* CSS3 */
+  box-sizing: border-box;
+  width: 100%; }
+
+button {
+  vertical-align: top; }
+
+body {
+  font-size: 100%;
+  line-height: 1.5em; }
+
+html > body {
+  font-size: 16px; }
+
+body {
+  text-align: center; }
+
+header[role="banner"] h1, #compass-nav {
+  display: inline;
+  float: left;
+  width: 46.97%;
+  margin-right: 3.03%; }
+
+header[role="banner"] {
+  background: #f9f9f9;
+  div {
+    overflow: hidden;
+    display: inline-block;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    width: 66em;
+    max-width: 100%;
+    display: block; }
+  h1 {
+    margin-left: 1.515%;
+    font-size: 1.125em;
+    line-height: 1.333em;
+    text-transform: uppercase;
+    a {
+      display: block;
+      padding-top: 2.667em;
+      padding-bottom: 2em; } } }
+
+#compass-nav {
+  display: inline;
+  float: right;
+  margin-right: 1.515%;
+  /* ugly hacks for IE6-7 */
+  #margin-left: -2em;
+  /* end ugly hacks */
+  text-align: right;
+  ul {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    overflow: hidden;
+    display: inline-block;
+    padding-top: 3em;
+    margin-bottom: 2.25em;
+    display: block;
+    li {
+      list-style-image: none;
+      list-style-type: none;
+      margin-left: 0px;
+      display: -moz-inline-box;
+      -moz-box-orient: vertical;
+      display: inline-block;
+      vertical-align: middle;
+      /* ugly hacks for IE6-7 */
+      #display: inline;
+      #vertical-align: auto;
+      /* end ugly hacks */
+      white-space: no-wrap;
+      padding-left: 0;
+      padding-right: 0; } }
+  a {
+    display: -moz-inline-box;
+    -moz-box-orient: vertical;
+    display: inline-block;
+    vertical-align: middle;
+    /* ugly hacks for IE6-7 */
+    #display: inline;
+    #vertical-align: auto;
+    /* end ugly hacks */
+    font-size: 0.875em;
+    line-height: 1.714em;
+    padding: 0 1em;
+    border-top-left-radius: 0.5em;
+    -moz-border-radius-topleft: 0.5em;
+    -webkit-border-top-left-radius: 0.5em;
+    border-bottom-right-radius: 0.5em;
+    -moz-border-radius-bottomright: 0.5em;
+    -webkit-border-bottom-right-radius: 0.5em; } }
+
+body[id="home"], body[id$="-docs"] {
+  #compass-nav a[href="/docs/"] {
+    background: #cccccc;
+    cursor: default; } }
+
+#docs-nav {
+  display: inline-block;
+  border-top-style: solid;
+  border-top-width: 0.063em;
+  padding-top: 0.313em;
+  border-bottom-style: solid;
+  border-bottom-width: 0.063em;
+  padding-bottom: 0.313em;
+  position: relative;
+  height: 1.5em;
+  border-color: #cccccc;
+  background-color: #eeeeee;
+  &:after {
+    content: " ";
+    display: block;
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden; }
+  display: block;
+  ul {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    overflow: hidden;
+    display: inline-block;
+    overflow: hidden;
+    display: inline-block;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    width: 66em;
+    max-width: 100%;
+    position: relative;
+    z-index: 2;
+    overflow: visible;
+    display: block;
+    li {
+      list-style-image: none;
+      list-style-type: none;
+      margin-left: 0px;
+      white-space: nowrap;
+      display: inline;
+      float: left;
+      padding-left: 4px;
+      padding-right: 4px;
+      &:first-child, &.first {
+        padding-left: 0px; }
+      &:last-child, &.last {
+        padding-right: 0px; }
+      top: -0.75em;
+      margin-bottom: -0.75em;
+      position: relative; }
+    display: block; }
+  a {
+    &:link, &:visited {
+      display: block;
+      padding: 0 1em;
+      border: 1px solid #eeeeee;
+      border-top-style: solid;
+      border-top-width: 0.063em;
+      padding-top: 0.688em;
+      border-bottom-style: solid;
+      border-bottom-width: 0.063em;
+      padding-bottom: 0.313em;
+      border-bottom: 0;
+      border-top-left-radius: 0.5em;
+      -moz-border-radius-topleft: 0.5em;
+      -webkit-border-top-left-radius: 0.5em;
+      border-top-right-radius: 0.5em;
+      -moz-border-radius-topright: 0.5em;
+      -webkit-border-top-right-radius: 0.5em;
+      background: #dddddd; }
+    &:hover, &:focus, &:active {
+      background-color: #eeeeee;
+      border-color: #dddddd; } } }
+
+.home #docs-nav a[href="index.php"] {
+  &:link, &:visited {
+    border-bottom-style: solid;
+    border-bottom-width: 0.063em;
+    padding-bottom: 0.313em;
+    cursor: default;
+    background: white;
+    border-color: #cccccc;
+    border-bottom-color: white; } }
+
+.core #docs-nav a[href="core.php"] {
+  &:link, &:visited {
+    border-bottom-style: solid;
+    border-bottom-width: 0.063em;
+    padding-bottom: 0.313em;
+    cursor: default;
+    background: white;
+    border-color: #cccccc;
+    border-bottom-color: white; } }
+
+/* line 83, ../src/screen.sass */
+
+.css3 #docs-nav a[href="core.php"] {
+  &:link, &:visited {
+    border-bottom-style: solid;
+    border-bottom-width: 0.063em;
+    padding-bottom: 0.313em;
+    cursor: default;
+    background: white;
+    border-color: #cccccc;
+    border-bottom-color: white; } }
+
+.utils #docs-nav a[href="core.php"] {
+  &:link, &:visited {
+    border-bottom-style: solid;
+    border-bottom-width: 0.063em;
+    padding-bottom: 0.313em;
+    cursor: default;
+    background: white;
+    border-color: #cccccc;
+    border-bottom-color: white; } }
+
+.gradient #docs-nav a[href="core.php"] {
+  &:link, &:visited {
+    border-bottom-style: solid;
+    border-bottom-width: 0.063em;
+    padding-bottom: 0.313em;
+    cursor: default;
+    background: white;
+    border-color: #cccccc;
+    border-bottom-color: white; } }
+
+.demo #docs-nav a[href="core.php"] {
+  &:link, &:visited {
+    border-bottom-style: solid;
+    border-bottom-width: 0.063em;
+    padding-bottom: 0.313em;
+    cursor: default;
+    background: white;
+    border-color: #cccccc;
+    border-bottom-color: white; } }
+
+#search-docs {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #999999;
+  form {
+    overflow: hidden;
+    display: inline-block;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    width: 66em;
+    max-width: 100%;
+    display: block; }
+  p {
+    display: inline;
+    float: left;
+    width: 21.97%;
+    margin-right: 3.03%;
+    display: inline;
+    float: right;
+    margin-right: 1.515%;
+    /* ugly hacks for IE6-7 */
+    #margin-left: -2em;
+    /* end ugly hacks */
+    margin-top: 0.375em;
+    margin-bottom: 0em;
+    label {
+      display: inline;
+      float: left;
+      width: 31.034%;
+      margin: 0;
+      text-align: right; }
+    input {
+      display: inline;
+      float: left;
+      width: 62.069%;
+      margin-right: 13.793%;
+      display: inline;
+      float: right;
+      margin-right: 1.515%;
+      /* ugly hacks for IE6-7 */
+      #margin-left: -2em; } } }
+
+#page {
+  overflow: hidden;
+  display: inline-block;
+  text-align: left;
+  margin-left: auto;
+  margin-right: auto;
+  width: 66em;
+  max-width: 100%;
+  margin-top: 4.5em;
+  display: block; }
+
+aside[role="sidebar"] {
+  display: inline;
+  float: left;
+  width: 21.97%;
+  margin-right: 3.03%;
+  margin-left: 1.515%;
+  font-size: 0.875em;
+  line-height: 1.714em;
+  margin-top: 3.429em;
+  color: #999999;
+  section, p {
+    margin-top: 1.714em;
+    margin-bottom: 1.714em; } }
+
+footer[role="contentinfo"] {
+  overflow: hidden;
+  display: inline-block;
+  text-align: left;
+  margin-left: auto;
+  margin-right: auto;
+  width: 66em;
+  max-width: 100%;
+  margin-top: 4.5em;
+  color: #999999;
+  display: block;
+  .license {
+    clear: both;
+    margin-right: 1.515%;
+    margin-left: 1.515%;
+    font-size: 0.875em;
+    line-height: 1.714em; } }
+
+article > nav {
+  border-top: 0.063em solid #cccccc;
+  margin-top: -0.063em;
+  color: #cccccc;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    li {
+      list-style-image: none;
+      list-style-type: none;
+      margin-left: 0px; } }
+  li {
+    display: inline;
+    float: left;
+    width: 48.438%;
+    margin-right: 3.125%;
+    &:last-child {
+      display: inline;
+      float: right;
+      margin-right: 0;
+      /* ugly hacks for IE6-7 */
+      #margin-left: -2em;
+      /* end ugly hacks */
+      text-align: right; } } }
+
+#content {
+  display: inline;
+  float: left;
+  width: 71.97%;
+  margin-right: 3.03%;
+  display: inline;
+  float: right;
+  margin-right: 1.515%;
+  /* ugly hacks for IE6-7 */
+  #margin-left: -2em;
+  /* end ugly hacks */
+  h1 {
+    font-size: 2.25em;
+    line-height: 1.333em;
+    margin-bottom: 0.667em; } }
+
+.demo #content {
+  float: none;
+  display: block;
+  margin: 0;
+  width: auto;
+  clear: both;
+  margin-right: 1.515%;
+  margin-left: 1.515%;
+  h1 {
+    text-align: center; } }
+
+#module-nav {
+  margin-top: 0.375em;
+  border-bottom-style: solid;
+  border-bottom-width: 0.063em;
+  padding-bottom: 0.313em;
+  margin-bottom: 0.75em;
+  border-color: #cccccc;
+  clear: both;
+  ul {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    display: inline-block;
+    text-align: left;
+    margin-left: auto;
+    margin-right: auto;
+    width: 66em;
+    max-width: 100%;
+    display: block;
+    li {
+      display: inline;
+      float: left;
+      margin-right: 1.5em;
+      &:first-child {
+        margin-left: 1.515%; } } }
+  + #page {
+    margin-top: 2.25em; } }
+
+#local-nav {
+  margin-top: 1.714em;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: right;
+    li {
+      list-style-image: none;
+      list-style-type: none;
+      margin-left: 0px; } }
+  h2 {
+    margin-top: 1.714em;
+    border-bottom: 1px solid #cccccc;
+    margin-bottom: 0.602em;
+    text-align: left; } }
+
+#code {
+  clear: both;
+  display: inline-block;
+  font-size: 0.75em;
+  line-height: 2em;
+  border-top-style: solid;
+  border-top-width: 0.083em;
+  padding-top: 1.917em;
+  border-bottom-style: solid;
+  border-bottom-width: 0.083em;
+  padding-bottom: 1.917em;
+  border-color: #cccccc;
+  font-family: monospace;
+  &:after {
+    content: " ";
+    display: block;
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden; }
+  display: block;
+  nav {
+    background: #eeeeee;
+    margin-bottom: 2em;
+    ul {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      overflow: hidden;
+      display: inline-block;
+      text-align: right;
+      display: block;
+      li {
+        list-style-image: none;
+        list-style-type: none;
+        margin-left: 0px;
+        display: -moz-inline-box;
+        -moz-box-orient: vertical;
+        display: inline-block;
+        vertical-align: middle;
+        /* ugly hacks for IE6-7 */
+        #display: inline;
+        #vertical-align: auto;
+        /* end ugly hacks */
+        white-space: no-wrap;
+        padding-left: 0.4em;
+        padding-right: 0.4em; } } }
+  section {
+    position: relative;
+    display: inline;
+    float: left;
+    width: 48.438%;
+    margin-right: 3.125%;
+    .slides {
+      width: 100%;
+      overflow: hidden;
+      > ul {
+        margin: 0;
+        padding: 0;
+        width: 1030%;
+        list-style: none;
+        overflow: hidden;
+        display: inline-block;
+        li {
+          list-style-image: none;
+          list-style-type: none;
+          margin-left: 0px; }
+        display: block;
+        > li {
+          display: inline;
+          float: left;
+          width: 9.709%;
+          margin-right: 0.049%; } } }
+    &#styles {
+      display: inline;
+      float: right;
+      margin-right: 0;
+      /* ugly hacks for IE6-7 */
+      #margin-left: -2em; } }
+  .slides li {
+    overflow: auto; }
+  table {
+    .lino {
+      color: #666666;
+      background: #dddddd;
+      padding: 0 0.4em; }
+    .source {
+      width: 100%;
+      padding: 0 0.4em; } } }
+
+#demo {
+  clear: both;
+  padding-top: 1.5em;
+  border-bottom-style: solid;
+  border-bottom-width: 0.063em;
+  padding-bottom: 1.438em;
+  border-color: #cccccc;
+  .gradient {
+    margin: 1.5em 0;
+    height: 6em;
+    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, white), color-stop(100%, #dddddd));
+    background-image: -moz-linear-gradient(left top, white 0%, #dddddd 100%); } }
diff --git a/doc-src/content/stylesheets/main.sass b/doc-src/content/stylesheets/main.sass
deleted file mode 100644
index ddf0863c..00000000
--- a/doc-src/content/stylesheets/main.sass
+++ /dev/null
@@ -1,157 +0,0 @@
-@import compass/utilities
-@import compass/css3
-@import blueprint
-
-body
-  font-family: "Lucida Sans", "Lucida Grande", Lucida, sans-serif
-  line-height: 1.5
-  font-size: 13px
-
-// Layout
-#container
-  +pie-clearfix
-
-#main
-  +column(16, true)
-  +prepend(8)
-
-#sidebar
-  +column(8)
-  +pull(24, true)
-  background: #F5F5F5
-  h2
-    font-size: 16px
-  ul, ol
-    list-style-position: inside
-    padding-left: 10px
-  .selected
-    font-weight: bold
-  a
-    +hover-link
-
-#footer
-  +column(24)
-  background: #F5F5F5
-  border-top: 2px solid #ddd
-  margin: 1em 0
-  .legalese
-    +column(12)
-  hr
-    +colruler
-  .links
-    +column(12, true)
-    ul
-      +no-bullets
-      a
-        +hover-link
-
-// Typography
-
-blockquote
-  :font-style italic
-
-hr
-  :background none
-  :height 0
-  :font-size 0
-  :line-height 0
-  :border none
-  :border-top 2px solid #CCC
-
-// Regular data tables
-table.datagrid
-  border-collapse: collapse
-  th
-    :background #EEE
-  td,
-  th
-    border: 1px solid #CCC
-    text-align: left
-    padding: 5px
-    cell-spacing: 0
-
-// Reference
-
-body.reference
-  h3
-    &.mixin, &.constant
-      font-family: Monaco, courier
-      font-weight: 200
-      +text-shadow
-      background-color: #eee
-      border: 1px solid #aaa
-      padding: 0.75em
-      margin-bottom: 0
-      a.permalink
-        +hover-link
-        +link-colors("inherit", "inherit")
-    .arg[data-default-value]
-      color: #666
-      &:before
-        content: "["
-      &:after
-        content: "]"
-  .source-documentation
-    background-color: #eee
-    border: 1px solid #aaa
-    border-top-width: 0
-    padding: 0.75em
-  dl.source-documentation
-    margin-top: 0
-    dt
-      font-weight: bold
-      float: left
-      margin-right: 15px
-    dt:not(:first-child)
-      margin-top: 1em
-  a.view-source
-    float: right
-    margin: 1.25em
-  span.color + span.swatch
-    margin: 0 3px 3px
-    border: 1px solid #333
-    width: 1em
-    height: 1em
-    +inline-block
-  .color-snippet
-    width: 100px
-    height: 20px
-    +border-radius(3px)
-  a.help
-    font-size: 75%
-
-table.constants
-  width: 100%
-  +alternating-rows-and-columns(#EEE, #bbb, #191919)
-  +outer-table-borders(1px)
-  +inner-table-borders(1px)
-  td, th
-    padding: 0.25em 0.5em
-
-ol#breadcrumbs
-  +horizontal-list
-  +no-bullets
-  li:after
-    content: " > "
-  li.last:after
-    content: ""
-  li.last
-    visibility: hidden
-
-body#home #logo
-  +replace-text("compass.png", 0px)
-  height: 159px
-
-p code
-  border: 1px solid #ccc
-  background-color: #f2f2f2
-  padding: 2px
-
-body#reference-compass-css3
-  #border-radius
-    padding: 2px 8px
-    +border-radius(0.75em)
-  #text-shadow
-    +text-shadow(red)
-  
-@import partials/syntax
\ No newline at end of file
diff --git a/doc-src/content/stylesheets/partials/_syntax.sass b/doc-src/content/stylesheets/partials/_syntax.sass
deleted file mode 100644
index 44b85c55..00000000
--- a/doc-src/content/stylesheets/partials/_syntax.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-@import partials/syntax/coderay
-@import partials/syntax/pygments
\ No newline at end of file
diff --git a/doc-src/content/stylesheets/partials/syntax/_coderay.sass b/doc-src/content/stylesheets/partials/syntax/_coderay.sass
deleted file mode 100644
index 919f8a06..00000000
--- a/doc-src/content/stylesheets/partials/syntax/_coderay.sass
+++ /dev/null
@@ -1,211 +0,0 @@
-.CodeRay
-  .debug
-    color: white !important
-    background: blue !important
-  .af
-    color: #00C 
-  .an
-    color: #007 
-  .at
-    color: #f08 
-  .av
-    color: #700 
-  .aw
-    color: #C00 
-  .bi
-    color: #509
-    font-weight: bold 
-  .c
-    color: #888
-  .ch
-    color: #04D 
-    .k
-      color: #04D 
-    .dl
-      color: #039 
-  .cl
-    color: #B06
-    font-weight: bold 
-  .cm
-    color: #A08
-    font-weight: bold 
-  .co
-    color: #036
-    font-weight: bold 
-  .cr
-    color: #0A0 
-  .cv
-    color: #369 
-  .de
-    color: #B0B
-  .df
-    color: #099
-    font-weight: bold 
-  .di
-    color: #088
-    font-weight: bold 
-  .dl
-    color: black 
-  .do
-    color: #970 
-  .dt
-    color: #34b 
-  .ds
-    color: #D42
-    font-weight: bold 
-  .e
-    color: #666
-    font-weight: bold 
-  .en
-    color: #800
-    font-weight: bold 
-  .er
-    color: #F00
-    background-color: #FAA 
-  .ex
-    color: #C00
-    font-weight: bold 
-  .fl
-    color: #60E
-    font-weight: bold 
-  .fu
-    color: #06B
-    font-weight: bold 
-  .gv
-    color: #d70
-    font-weight: bold 
-  .hx
-    color: #058
-    font-weight: bold 
-  .i
-    color: #00D
-    font-weight: bold 
-  .ic
-    color: #B44
-    font-weight: bold 
-  .il
-    background: #ddd
-    color: black 
-    .il
-      background: #ccc 
-      .il
-        background: #bbb 
-    .idl
-      background: #ddd
-      font-weight: bold
-      color: #666 
-  .idl
-    background-color: #bbb
-    font-weight: bold
-    color: #666
-  .im
-    color: #f00
-  .in
-    color: #B2B
-    font-weight: bold 
-  .iv
-    color: #33B 
-  .la
-    color: #970
-    font-weight: bold 
-  .lv
-    color: #963 
-  .oc
-    color: #40E
-    font-weight: bold 
-  .of
-    color: #000
-    font-weight: bold 
-  .pc
-    color: #038
-    font-weight: bold 
-  .pd
-    color: #369
-    font-weight: bold 
-  .pp
-    color: #579
-  .ps
-    color: #00C
-    font-weight: bold 
-  .pt
-    color: #074
-    font-weight: bold 
-  .r, .kw
-    color: #080
-    font-weight: bold 
-  .ke
-    color: #808
-    .dl
-      color: #606
-    .ch
-      color: #80f
-  .vl
-    color: #088
-  .rx
-    background-color: #fff0ff 
-    .k
-      color: #808 
-    .dl
-      color: #404 
-    .mod
-      color: #C2C 
-    .fu
-      color: #404
-      font-weight: bold 
-  .s
-    background-color: #fff0f0
-    color: #D20
-    .s
-      background-color: #ffe0e0 
-      .s
-        background-color: #ffd0d0 
-    .ch
-      color: #b0b
-    .dl
-      color: #710
-  .sh
-    background-color: #f0fff0
-    color: #2B2 
-    .dl
-      color: #161 
-  .sy
-    color: #A60 
-    .k
-      color: #A60 
-    .dl
-      color: #630 
-  .ta
-    color: #070 
-  .tf
-    color: #070
-    font-weight: bold 
-  .ts
-    color: #D70
-    font-weight: bold 
-  .ty
-    color: #339
-    font-weight: bold 
-  .v
-    color: #036 
-  .xt
-    color: #444 
-  .ins
-    background: #afa
-  .del
-    background: #faa
-  .chg
-    color: #aaf
-    background: #007
-  .head
-    color: #f8f
-    background: #505 
-  .ins .ins
-    color: #080
-    font-weight: bold 
-  .del .del
-    color: #800
-    font-weight: bold 
-  .chg .chg
-    color: #66f
-  .head .head
-    color: #f4f
diff --git a/doc-src/content/stylesheets/partials/syntax/_pygments.sass b/doc-src/content/stylesheets/partials/syntax/_pygments.sass
deleted file mode 100644
index f841225d..00000000
--- a/doc-src/content/stylesheets/partials/syntax/_pygments.sass
+++ /dev/null
@@ -1,209 +0,0 @@
-.highlight
-  .hll
-    background-color: #ffffcc 
-
-  .c
-    color: #606060
-    font-style: italic 
-
-  .err
-    color: #F00000
-    background-color: #F0A0A0 
-
-  .k
-    color: #208090
-    font-weight: bold 
-
-  .o
-    color: #303030 
-
-  .cm
-    color: #606060
-    font-style: italic 
-
-  .cp
-    color: #507090 
-
-  .c1
-    color: #606060
-    font-style: italic 
-
-  .cs
-    color: #c00000
-    font-weight: bold
-    font-style: italic 
-
-  .gd
-    color: #A00000 
-
-  .ge
-    font-style: italic 
-
-  .gr
-    color: #FF0000 
-
-  .gh
-    color: #000080
-    font-weight: bold 
-
-  .gi
-    color: #00A000 
-
-  .go
-    color: #808080 
-
-  .gp
-    color: #c65d09
-    font-weight: bold 
-
-  .gs
-    font-weight: bold 
-
-  .gu
-    color: #800080
-    font-weight: bold 
-
-  .gt
-    color: #0040D0 
-
-  .kc, .kd, .kn
-    color: #208090
-    font-weight: bold 
-
-  .kp
-    color: #0080f0
-    font-weight: bold 
-
-  .kr
-    color: #208090
-    font-weight: bold 
-
-  .kt
-    color: #6060f0
-    font-weight: bold 
-
-  .m
-    color: #6000E0
-    font-weight: bold 
-
-  .s
-    background-color: #e0e0ff 
-
-  .na
-    color: #000070 
-
-  .nb
-    color: #007020 
-
-  .nc
-    color: #e090e0
-    font-weight: bold 
-
-  .no
-    color: #50e0d0
-    font-weight: bold 
-
-  .nd
-    color: #505050
-    font-weight: bold 
-
-  .ni
-    color: #800000 
-
-  .ne
-    color: #F00000
-    font-weight: bold 
-
-  .nf
-    color: #50e0d0
-    font-weight: bold 
-
-  .nl
-    color: #907000
-    font-weight: bold 
-
-  .nn
-    color: #0e84b5
-    font-weight: bold 
-
-  .nt
-    color: #007000 
-
-  .nv
-    color: #003060 
-
-  .ow
-    color: #000000
-    font-weight: bold 
-
-  .w
-    color: #bbbbbb 
-
-  .mf
-    color: #6000E0
-    font-weight: bold 
-
-  .mh
-    color: #005080
-    font-weight: bold 
-
-  .mi
-    color: #6060f0
-    font-weight: bold 
-
-  .mo
-    color: #4000E0
-    font-weight: bold 
-
-  .sb
-    background-color: #e0e0ff 
-
-  .sc
-    color: #8080F0 
-
-  .sd
-    color: #D04020 
-
-  .s2
-    background-color: #e0e0ff 
-
-  .se
-    color: #606060
-    font-weight: bold
-    background-color: #e0e0ff 
-
-  .sh
-    background-color: #e0e0ff 
-
-  .si
-    background-color: #e0e0e0 
-
-  .sx
-    color: #f08080
-    background-color: #e0e0ff 
-
-  .sr
-    color: #000000
-    background-color: #e0e0ff 
-
-  .s1
-    background-color: #e0e0ff 
-
-  .ss
-    color: #f0c080 
-
-  .bp
-    color: #007020 
-
-  .vc
-    color: #c0c0f0 
-
-  .vg
-    color: #f08040 
-
-  .vi
-    color: #a0a0f0 
-
-  .il
-    color: #6060f0
-    font-weight: bold
diff --git a/doc-src/content/stylesheets/print.sass b/doc-src/content/stylesheets/print.sass
new file mode 100644
index 00000000..8d3f3ed7
--- /dev/null
+++ b/doc-src/content/stylesheets/print.sass
@@ -0,0 +1,20 @@
+/* Welcome to Susy. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
+
+@import defaults
+
+=print
+  nav
+    display: none
+  *
+    float: none !important
+  body
+    +serif-family
+    font-size: 12pt
+    background: white
+    color: black
+  a:link:after, a:visited:after
+    content: " (" attr(href) ") "
+
++print
diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass
new file mode 100644
index 00000000..fb584fd3
--- /dev/null
+++ b/doc-src/content/stylesheets/screen.sass
@@ -0,0 +1,263 @@
+/* Welcome to Susy. Use this file to define screen styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
+
+@import defaults
+@import slideshow
+
+/* @group STRUCTURE
+
++susy
+
+header[role="banner"] h1, #compass-nav
+  +columns(6)
+
+header[role="banner"]
+  background: #f9f9f9
+  div
+    +container
+  h1
+    +alpha
+    +adjust-font-size-to(18px)
+    text-transform: uppercase
+    a
+      display: block
+      +padding-leader(2, 18px)
+      +padding-trailer(1.5, 18px)
+
+#compass-nav
+  +omega
+  text-align: right
+  ul
+    +inline-block-list
+    +padding-leader(2)
+    +trailer(1.5)
+  a
+    +inline-block
+    +adjust-font-size-to(14px)
+    padding: 0 1em
+    +border-top-left-radius(0.5em)
+    +border-bottom-right-radius(0.5em)
+
+=active-compass-nav($id, $url)
+  body[id$="#{$id}"] #compass-nav a[href="#{$url}"]
+    background: #cccccc
+    cursor: default
+
++active-compass-nav(-docs, unquote("/docs/"))
+
+#docs-nav
+  +pie-clearfix
+  +leading-border(1px, 0.25)
+  +trailing-border(1px, 0.25)
+  position: relative
+  height: $base-rhythm-unit
+  border-color: #cccccc
+  background-color: #eeeeee
+  ul
+    +horizontal-list
+    +container
+    position: relative
+    z-index: 2
+    overflow: visible
+    li
+      top: -$base-rhythm-unit * 0.5
+      margin-bottom: -$base-rhythm-unit * 0.5
+      position: relative
+  a
+    &:link, &:visited
+      display: block
+      padding: 0 $side-gutter-width
+      border: 1px solid #eeeeee
+      +leading-border(1px, 0.5)
+      +trailing-border(1px, 0.25)
+      border-bottom: 0
+      +border-top-radius(0.5em)
+      background: #dddddd
+    &:hover, &:focus, &:active
+      background-color: #eeeeee
+      border-color: #dddddd
+
+=active-docs($class, $url)
+  .#{$class} #docs-nav a[href="#{$url}"]
+    &:link, &:visited
+      +trailing-border(1px, 0.25)
+      cursor: default
+      background: white
+      border-color: #cccccc
+      border-bottom-color: white
+
++active-docs(home, "index.php")
++active-docs(core, "core.php")
++active-docs(css3, "core.php")
++active-docs(utils, "core.php")
++active-docs(gradient, "core.php")
++active-docs(demo, "core.php")
+
+#search-docs
+  position: absolute
+  z-index: 1
+  top: 0
+  left: 0
+  width: 100%
+  color: #999
+  form
+    +container
+  p
+    +columns(3)
+    +omega
+    +leader(.25)
+    +trailer(0)
+    label
+      +float(left)
+      width: columns(1,3) + gutter(3)*.5
+      margin: 0
+      text-align: right
+    input
+      +columns(2,3)
+      +omega
+
+#page
+  +container
+  +leader(3)
+
+aside[role="sidebar"]
+  +columns(3)
+  +alpha
+  +adjust-font-size-to(14px)
+  +leader(2,14px)
+  color: #999999
+  section, p
+    +leader(1,14px)
+    +trailer(1,14px)
+
+footer[role="contentinfo"]
+  +container
+  +leader(3)
+  color: #999999
+  .license
+    +full
+    +adjust-font-size-to(14px)
+
+/* @end
+
+/* @group COMPONENTS by type
+
+article
+  > nav
+    border-top: $px2em*1px solid #ccc
+    margin-top: -$px2em*1px
+    color: #ccc
+    ul
+      +no-style-list
+    li
+      +columns(6,12)
+      &:last-child
+        +omega(12)
+        text-align: right
+
+/* @end
+
+/* @group OVERRIDES by content
+
+#content
+  +columns(9)
+  +omega
+  h1
+    +adjust-font-size-to(36px)
+    +trailer(1,36px)
+  .demo &
+    float: none
+    display: block
+    margin: 0
+    width: auto
+    +full
+    h1
+      text-align: center
+
+#module-nav
+  +leader(.25)
+  +trailing-border(1px,.25)
+  +trailer(.5)
+  border-color: #ccc
+  clear: both
+  ul
+    margin: 0
+    padding: 0
+    +container
+    li
+      +float(left)
+      margin-right: 1.5em
+      &:first-child
+        +alpha
+  + #page
+    +leader(1.5)
+
+#local-nav
+  +leader(1,14px)
+  ul
+    +no-style-list
+    text-align: right
+  h2
+    +leader(1,14px)
+    border-bottom: 1px solid #ccc
+    margin-bottom: ($base_rhythm_unit*.5 - $px2em*1px) * (14/16)
+    text-align: left
+
+#code
+  +full(12)
+  +pie-clearfix
+  +adjust-font-size-to(12px)
+  +h-borders(1px,1,12px)
+  border-color: #ccc
+  font-family: monospace
+  nav
+    background: #eee
+    +trailer(1,12px)
+    ul
+      +inline-block-list(.4em)
+      text-align: right
+  section
+    position: relative
+    +columns(6,12)
+    +slideshow
+    &#markup
+      +alpha(12)
+    &#styles
+      +omega(12)
+  .slides
+    li
+      overflow: auto
+  table
+    .lino
+      color: #666
+      background: #ddd
+      padding: 0 .4em
+    .source
+      width: 100%
+      padding: 0 .4em
+
+#demo
+  +full(12)
+  +padding-leader
+  +trailing-border(1px)
+  border-color: #ccc
+  .gradient
+    margin: 1.5em 0
+    height: 6em
+    +linear-gradient(color_stops(#fff, #ddd), "left top")
+    
+/* @end
+
+/* @group OVERRIDES by page
+
+
+/* @end
+
+/* @group DEBUG
+
+// Uncomment, adjust and use for debugging
+// #page
+//   +show-grid("grid.png")
+
+/* @end
diff --git a/doc-src/layouts/default.haml b/doc-src/layouts/default.haml
index 20bb7116..cbf310b2 100644
--- a/doc-src/layouts/default.haml
+++ b/doc-src/layouts/default.haml
@@ -7,7 +7,7 @@
     - if @item[:meta_description]
       %meta{:name => "description", :content => @item[:meta_description]}
     %link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png")
-    %link{ :href => "/docs/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
+    %link{ :href => "/docs/stylesheets/legacy/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
     %link{ :href => "/docs/stylesheets/ui-lightness/jquery-ui-1.7.2.custom.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
     %script{:src => "/docs/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"}
     %script{:src => "/docs/javascripts/jquery-ui-1.7.2.custom.min.js", :type => "text/javascript"}
@@ -18,15 +18,5 @@
       #sidebar
         = render "partials/sidebar"
       #footer= render "partials/footer"
-    :javascript
-      $(function(){
-        $('span.color').each(function(i,e){
-         e = $(e);
-         e.after('<span class="swatch" style="background-color:'+e.text()+';"></span>');
-        });
-        $('span.arg[data-default-value]').each(function(i,e){
-          e = $(e);
-          e.attr("title", "Defaults to: " + e.attr("data-default-value"))
-        })
-      });
+    %script(src="/docs/javascripts/fixups.js" deferred)
     = render "partials/analytics"
diff --git a/doc-src/layouts/example.haml b/doc-src/layouts/example.haml
index 4078fa1a..530905bb 100644
--- a/doc-src/layouts/example.haml
+++ b/doc-src/layouts/example.haml
@@ -7,7 +7,7 @@
     - if @item[:meta_description]
       %meta{:name => "description", :content => @item[:meta_description]}
     %link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png")
-    %link{ :href => "/docs/stylesheets/example.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
+    %link{ :href => "/docs/stylesheets/legacy/example.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
     %style{:type => "text/css"}= example_css
   %body{body_attributes(@item)}
     #container
diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml
new file mode 100644
index 00000000..c864523d
--- /dev/null
+++ b/doc-src/layouts/main.haml
@@ -0,0 +1,51 @@
+!!!5
+%html.no-js{:dir => "ltr", :lang => "en"}
+  %head
+    %meta{:charset => "utf-8"}/
+    %meta{:content => "chrome=1", "http-equiv" => "X-UA-Compatible"}
+    %link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png")
+    %title home | compass docs wireframe
+    <!--[if !IE 6]><!-->
+    %link{:charset => "utf-8", :href => "stylesheets/screen.css", :rel => "stylesheet", :type => "text/css"}
+    <!--<![endif]-->
+    /[if gte IE 7]
+      %link{:charset => "utf-8", :href => "stylesheets/ie.css", :rel => "stylesheet", :type => "text/css"}
+    /[if IE 6]
+      %link{:charset => "utf-8", :href => "http://universal-ie6-css.googlecode.com/files/ie6.0.3.css", :rel => "stylesheet", :type => "text/css"}
+      %link{ :href => "/docs/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
+      %link{ :href => "/docs/stylesheets/ui-lightness/jquery-ui-1.7.2.custom.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
+  %body{body_attributes(@item)}
+    %nav#skip-links
+      %a{:href => "#content"} skip to content
+    %header#banner{:role => "banner"}
+      %div
+        %h1.vcard
+          %a.fn.org.url.uid{:href => "/", :rel => "home"} Compass
+        %nav#compass-nav
+          %ul
+            %li
+              %a{:href => "/", :rel => "home"} compass
+            %li
+              %a{:href => "/docs/"} docs
+            %li
+              %a{:href => "/docs/tutorials/"} tutorials
+    %nav#docs-nav{:role => "navigation"}
+      %ul
+        %li
+          %a{:href => "/docs/"} introduction
+        %li
+          %a{:href => "/docs/compass/"} core
+        %li
+          %a{:href => "/docs/blueprint/"} blueprint
+        %li
+          %a{:href => "/docs/plugins/"} plugins
+      #search-docs
+        %form
+          %p
+            %label{:for => "search"} search
+            %input#search{:name => "search", :type => "text", :value => "", :placeholder => "Search"}
+    %article= yield
+    %script(src="/docs/javascripts/jquery-1.3.2.min.js")
+    %script(src="/docs/javascripts/jquery-ui-1.7.2.custom.min.js")
+    %script(src="/docs/javascripts/fixups.js" deferred)
+    = render "partials/analytics"