diff --git a/doc-src/Rules b/doc-src/Rules
index 8b1f4651..bf03f217 100644
--- a/doc-src/Rules
+++ b/doc-src/Rules
@@ -47,7 +47,7 @@ end
 
 compile '*' do
   filter :haml, :ugly => true
-  layout 'default'
+  layout item[:layout] || 'main'
 end
 
 (0..5).each do |i|
diff --git a/doc-src/content/examples/compass/css3/gradient/markup.haml b/doc-src/content/examples/compass/css3/gradient/markup.haml
index 06d2f545..ab893e81 100644
--- a/doc-src/content/examples/compass/css3/gradient/markup.haml
+++ b/doc-src/content/examples/compass/css3/gradient/markup.haml
@@ -9,7 +9,7 @@
 #radial-gradient.gradient-example
 
 %p
-  This yields a linear gradient spanning from !start to !end coordinates  
+  This yields a linear gradient spanning from $start to $end coordinates  
 
 #linear-gradient.gradient-example
 
diff --git a/doc-src/content/stylesheets/_base.sass b/doc-src/content/stylesheets/_base.sass
index 78f8542f..d919d188 100644
--- a/doc-src/content/stylesheets/_base.sass
+++ b/doc-src/content/stylesheets/_base.sass
@@ -24,14 +24,14 @@ $side-gutter-width: 1em
 // OMEGA_FLOAT
 // By default, +omega elements are floated right.
 // You can override that globally here:
-// !omega_float = "right"
+// $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
+// $hacks = true
 
 // SUSY
 // Don't move this @import above the GRID and FONT-SIZE overrides.
diff --git a/doc-src/content/stylesheets/_reference.scss b/doc-src/content/stylesheets/_reference.scss
index e0407b6d..2e07cf5a 100644
--- a/doc-src/content/stylesheets/_reference.scss
+++ b/doc-src/content/stylesheets/_reference.scss
@@ -38,7 +38,15 @@ body.reference {
   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%; }
-  p code { border: 1px solid #ccc; padding: 2px; background-color: #e7e7e7;}
+}
+
+body.docs {
+  p code, pre {
+    @include code-text;
+    border: 1px solid #ccc;
+    padding: 2px;
+    background-color: #e7e7e7;
+  }
 }
 
 table.constants {
diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass
index ea1a9660..05c992e6 100644
--- a/doc-src/content/stylesheets/screen.sass
+++ b/doc-src/content/stylesheets/screen.sass
@@ -40,11 +40,13 @@ header[role="banner"]
     +border-bottom-right-radius(0.5em)
 
 =active-compass-nav($id, $url)
-  body#{$id} #compass-nav a[href="#{$url}"]
-    background: #cccccc
-    cursor: default
+  #{append-selector(body, $id)}
+    #compass-nav a[href="#{$url}"]
+      background: #cccccc
+      cursor: default
 
-+active-compass-nav(".docs", "/docs/")
++active-compass-nav("#home,.reference", "/docs/")
++active-compass-nav(".tutorial", "/docs/tutorials/")
 
 #docs-nav
   +pie-clearfix
@@ -142,6 +144,8 @@ footer[role="contentinfo"]
 
 article
   text-align: left
+
+aside[role="sidebar"] + article
   +prefix(3)
 
 article
@@ -224,13 +228,16 @@ article
   a.selected:after
     content: "«"
 
+=code-text
+  font-family: monospace
+
 #code
   +full(12)
   +pie-clearfix
   +adjust-font-size-to(12px)
   +h-borders(1px,1,12px)
+  +code-text
   border-color: #ccc
-  font-family: monospace
   nav
     background: #eee
     +trailer(1,12px)
diff --git a/doc-src/content/tutorials.haml b/doc-src/content/tutorials.haml
index a8772c29..c4c42a01 100644
--- a/doc-src/content/tutorials.haml
+++ b/doc-src/content/tutorials.haml
@@ -3,6 +3,7 @@ title: Compass Tutorials
 crumb: Tutorials
 classnames:
   - tutorial
+layout: tutorial
 ---
 %h1 Compass Tutorials
 
diff --git a/doc-src/content/tutorials/best_practices.haml b/doc-src/content/tutorials/best_practices.haml
index 34540ff8..0aa111ec 100644
--- a/doc-src/content/tutorials/best_practices.haml
+++ b/doc-src/content/tutorials/best_practices.haml
@@ -1,6 +1,7 @@
 ---
 title: Best practices
 crumb: Best practices
+layout: tutorial
 ---
 
 %h3
@@ -18,10 +19,10 @@ crumb: Best practices
 %h4
   _base.scss
 %pre
-  \!blueprint_grid_columns = 24
-  \!blueprint_grid_width   = 30px
-  \!blueprint_grid_margin  = 10px
-  \!font_color              = #333
+  \$blueprint_grid_columns = 24
+  \$blueprint_grid_width   = 30px
+  \$blueprint_grid_margin  = 10px
+  \$font_color              = #333
   \
   @import compass/reset.scss
   @import compass/utilities.scss
@@ -70,35 +71,22 @@ crumb: Best practices
   than the whole list of rules which define that appearance.
 %h4
   Mixin Example
-%pre
-  \// Mixin for the html element, so the footer stays at the bottom of the screen.
-  \// Relies on the following html structure, and a fixed-height #footer element:
-  \//
-  \//  %body
-  \//    #root
-  \//      #root_footer
-  \//    #footer
-  \
-  \=attach_footer( !footer_height )
-  \  :height 100%
-  \
-  body
-  \  :height 100%
-  \
-  \#root
-  \  :min-height 100%
-  \  :margin-bottom  = -!footer_height
-  \
-  \#root_footer
-  \  :clear both
-  \  :height = !footer_height
-  \
-  \#footer
-  \  :clear            both
-  \  :position         relative
-  \  :height         = !footer_height
+
+:markdown
+  Mixin for the html element, so the footer stays at the bottom of the screen.
+  Relies on the following html structure, and a fixed-height `#footer` element:
+  
+      <body>
+        <div id="root">
+          <div id="root_footer"></div>
+        </div>
+        <div id="footer">
+          Footer content goes here.
+        </div>
+      </body>
+
 %p
   A single line is all that’s needed to use the mixin, which moves the implementation details out of the way and replaces them with a clear and concise label:
 %pre
   \html
-  \  +attach_footer( 54px )
+  \  @include attach_footer( 54px )
diff --git a/doc-src/content/tutorials/blueprint.haml b/doc-src/content/tutorials/blueprint.haml
index 9cff0583..2b6b47fe 100644
--- a/doc-src/content/tutorials/blueprint.haml
+++ b/doc-src/content/tutorials/blueprint.haml
@@ -1,5 +1,6 @@
 ---
 title: Blueprint Framework
+layout: tutorial
 classnames:
   - tutorial
 ---
diff --git a/doc-src/content/tutorials/configurable-variables.haml b/doc-src/content/tutorials/configurable-variables.haml
index 616cb6f1..dacc08d7 100644
--- a/doc-src/content/tutorials/configurable-variables.haml
+++ b/doc-src/content/tutorials/configurable-variables.haml
@@ -1,5 +1,6 @@
 ---
 title: Working with Configurable Variables
+layout: tutorial
 classnames:
   - tutorial
 ---
@@ -11,20 +12,21 @@ classnames:
   There are two ways of defining a variable in Sass. The first, most common, approach is
   simple assignment. For example:
 
-      !my_constant = #fedcba
+      $my-constant : #fedcba
 
   The second approach is called guarded assignment. In this case, the constant is only
   set if it does not already have a value. For example:
-  
-      !my_constant ||= #fedcba
-  
+
+      $my-constant : #fedcba !default
+
   Many compass modules use guarded assignment to allow you to set defaults for that module.
   In order for these configurable variables to work correctly, you must set the variables
   *before* you import the module. For example:
-  
-      !blueprint_grid_columns = 12
-      @import blueprint/grid
-  
+
+      $blueprint-grid-columns = 12
+      @import "blueprint/grid"
+
   Because of this, it is common to have one or more partials
-  that set the constants first and get imported before any other imports in your stylesheet(s).
-  This is commonly referred to as the "base" stylesheet and is usually named `_base.scss`.
\ No newline at end of file
+  that set the constants first and get imported before any other
+  imports in your stylesheet(s). This is commonly referred to as
+  the "base" stylesheet and is usually named `_base.scss` or `_base.sass`.
\ No newline at end of file
diff --git a/doc-src/layouts/blueprint.haml b/doc-src/layouts/blueprint.haml
index 88c41921..ac0d38fb 100644
--- a/doc-src/layouts/blueprint.haml
+++ b/doc-src/layouts/blueprint.haml
@@ -1,3 +1,3 @@
 - render 'main' do
-  %aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss"
+  %aside(role="sidebar")= render 'partials/sidebar', :default_stylesheet => "_blueprint.scss", :omit_self => false, :heading_level => 2
   %article= yield
\ No newline at end of file
diff --git a/doc-src/layouts/main.haml b/doc-src/layouts/main.haml
index 6c4d24a0..ba33dad1 100644
--- a/doc-src/layouts/main.haml
+++ b/doc-src/layouts/main.haml
@@ -26,7 +26,7 @@
             %li
               %a{:href => "/", :rel => "home"} compass
             %li
-              %a{:href => "/docs/"} docs
+              %a{:href => "/docs/"} reference
             %li
               %a{:href => "/docs/tutorials/"} tutorials
     %nav#docs-nav{:role => "navigation"}
@@ -37,8 +37,9 @@
           %a{:href => "/docs/reference/compass/"} core
         %li
           %a{:href => "/docs/reference/blueprint/"} blueprint
-        %li
-          %a{:href => "/docs/plugins/"} plugins
+        /
+          %li
+            %a{:href => "/docs/plugins/"} plugins
       #search-docs
         %form
           %p
diff --git a/doc-src/layouts/partials/sidebar.haml b/doc-src/layouts/partials/sidebar.haml
index 7ab16f79..bebd3393 100644
--- a/doc-src/layouts/partials/sidebar.haml
+++ b/doc-src/layouts/partials/sidebar.haml
@@ -1,2 +1,2 @@
 %nav#local-nav
-  %ul= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => true)
+  %ul= item_tree(reference_item(:stylesheet => (@item[:nav_stylesheet] || @default_stylesheet)), :depth => 2, :omit_self => get_var(:omit_self){true}, :heading_level => get_var(:heading_level){1})
diff --git a/doc-src/layouts/tutorial.haml b/doc-src/layouts/tutorial.haml
new file mode 100644
index 00000000..d8ff82b3
--- /dev/null
+++ b/doc-src/layouts/tutorial.haml
@@ -0,0 +1,5 @@
+- render 'main' do
+  %aside(role="sidebar")
+    %nav#local-nav
+      %ul= item_tree(tutorial_item(:root), :depth => 2, :omit_self => false, :heading_level => 2)
+  %article= yield
\ No newline at end of file
diff --git a/doc-src/lib/default.rb b/doc-src/lib/default.rb
index 0e9c3c69..c69c20f4 100644
--- a/doc-src/lib/default.rb
+++ b/doc-src/lib/default.rb
@@ -55,6 +55,11 @@ def find(identifier)
   @items.find{|i| i.identifier == identifier}
 end
 
+def get_var(instance_var)
+  instance_variable_defined?("@#{instance_var}") ? instance_variable_get("@#{instance_var}") : yield
+end
+  
+
 def item_tree(item, options = {})
   crumb = item[:crumb] || item[:title]
   options[:heading_level] ||= 1 if options.fetch(:headings, true)
@@ -91,4 +96,10 @@ def item_tree(item, options = {})
   %Q{#{contents}#{child_html}}
 end
 
+def tutorial_item(path)
+  path = "" if path == :root
+  @items.detect do |i|
+    i.identifier == "/tutorials/#{path}"
+  end
+end
 
diff --git a/doc-src/lib/stylesheets.rb b/doc-src/lib/stylesheets.rb
index 1824c835..893ac12d 100644
--- a/doc-src/lib/stylesheets.rb
+++ b/doc-src/lib/stylesheets.rb
@@ -36,7 +36,6 @@ def reference_item(options)
       @items.detect do |i|
         i.identifier =~ /^\/reference/ &&
         i[:stylesheet] == path
-        
       end
     end
   end