diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock
index ef77142c..3f2bb537 100644
--- a/doc-src/Gemfile.lock
+++ b/doc-src/Gemfile.lock
@@ -12,9 +12,9 @@ GIT
     sass (3.1.0.alpha.50)
 
 PATH
-  remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
+  remote: ..
   specs:
-    compass (0.11.alpha.3.4ab7a6c)
+    compass (0.11.alpha.3.7f7b3c5)
       chunky_png (~> 0.10.3)
       sass (>= 3.1.0.alpha.50)
 
diff --git a/doc-src/assets/javascripts/site.js b/doc-src/assets/javascripts/site.js
index 3f3d3d7a..b273aee4 100644
--- a/doc-src/assets/javascripts/site.js
+++ b/doc-src/assets/javascripts/site.js
@@ -1,4 +1,4 @@
-function changeTheme(theme) {
+function changeTheme(theme, setCookie) {
   el = $('html');
 
   if (!theme) theme = el.hasClass('dark') ? 'light': 'dark';
@@ -10,18 +10,25 @@ function changeTheme(theme) {
   setThemePreference(theme);
 }
 
-function changeSyntax(syntax) {
+function changeSyntax(style, setCookie){
   el = $('html');
+  el.removeClass('scss'); el.removeClass('sass');
+  el.addClass(style);
+  setStyleSyntaxPreference(style);
+}
 
-  if (!syntax) {
-    syntax = el.hasClass('scss') ? 'sass': 'scss';
-  } else if (el.hasClass(syntax)) {
-    return;
-  }
-  el.removeClass('scss');
-  el.removeClass('sass');
-  el.addClass(syntax);
-  setSyntaxPreference(syntax);
+function changeExampleStyleSyntax(style, setCookie){
+  el = $('html');
+  el.removeClass('scss'); el.removeClass('sass'); el.removeClass('css');
+  el.addClass(style);
+  setExampleStyleSyntaxPreference(style);
+}
+
+function changeExampleMarkupSyntax(markup){
+  el = $('html');
+  el.removeClass('haml'); el.removeClass('html');
+  el.addClass(markup);
+  setExampleMarkupSyntaxPreference(markup);
 }
 
 function setThemePreference(theme) {
@@ -31,46 +38,81 @@ function setThemePreference(theme) {
     path: '/'
   });
 }
+
 function getThemePreference(defaultTheme) {
   theme = $.cookie("compass-theme");
   if (theme) {
-    changeTheme(theme);
+    changeTheme(theme, false);
   } else {
-    changeTheme(defaultTheme);
+    changeTheme(defaultTheme, true);
   }
 }
-function setSyntaxPreference(syntax) {
+
+function setStyleSyntaxPreference (mainSyntax) {
   $.cookie("compass-syntax", null);
-  $.cookie("compass-syntax", syntax, {
-    expires: 60 * 60 * 24 * 365 * 10,
-    path: '/'
-  });
+  $.cookie("compass-syntax", mainSyntax, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
 }
-function getSyntaxPreference(defaultSyntax) {
-  syntax = $.cookie("compass-syntax");
-  if (syntax){
-    changeSyntax(syntax);
-  } else {
-    changeSyntax(defaultSyntax);
+
+function setExampleStyleSyntaxPreference (exampleStyle) {
+  $.cookie("compass-example-style", null);
+  $.cookie("compass-example-style", exampleStyle, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
+}
+
+function setExampleMarkupSyntaxPreference (exampleMarkup) {
+  $.cookie("compass-example-markup", null);
+  $.cookie("compass-example-markup", exampleMarkup, { expires: 60 * 60 * 24 * 365 * 10, path: '/' });
+}
+
+function getSyntaxPreference(defaultSyntax, defaultMarkup) {
+  mainSyntaxCookie = $.cookie("compass-syntax");
+  mainSyntax = (mainSyntaxCookie) ? mainSyntaxCookie : defaultSyntax;
+  changeSyntax(mainSyntax);
+
+  // add example styling preferences
+  if ($('body').hasClass('demo')){
+    markupCookie = $.cookie("compass-example-markup");
+    styleCookie = $.cookie("compass-example-style");
+
+    markup = (markupCookie) ? markupCookie : defaultMarkup;
+    style = (styleCookie) ? styleCookie : defaultSyntax;
+
+    changeExampleStyleSyntax(style)
+    changeExampleMarkupSyntax(markup);
   }
 }
 
 
 getThemePreference('dark');
-getSyntaxPreference('scss');
 
 $('document').ready(function(){
+  getSyntaxPreference('scss', 'html');
+
   $('#page').click(function(event){
     var target = $(event.target);
+
+    // Set Main Syntax Preference
     if (target.parent().is('#syntax_pref')) {
-      changeSyntax(target.attr("rel"));
+      changeSyntax(target.attr("rel"), true);
       event.preventDefault();
+
+    // Set Demo page syntax preferences
+    } else if (target.parent().is('.syntax_pref')) {
+      event.preventDefault();
+      if (target.parent().parent().is('#markup')) {
+        changeExampleMarkupSyntax(target.attr("rel"), true);
+      } else {
+        changeExampleStyleSyntax(target.attr("rel"), true);
+      }
+
+    // Set Theme preference
     } else if (target.is('#theme_pref') || target.parent().is('#theme_pref')) {
       changeTheme();
       event.preventDefault();
+
+    // View source for mixins
     } else if (target.attr("rel") == "view source") {
       $(target.attr("href")).toggle();
       event.preventDefault();
     }
   });
-});
\ No newline at end of file
+});
diff --git a/doc-src/content/stylesheets/partials/_theme.scss b/doc-src/content/stylesheets/partials/_theme.scss
index 9b6ebab1..fe2c0ed9 100644
--- a/doc-src/content/stylesheets/partials/_theme.scss
+++ b/doc-src/content/stylesheets/partials/_theme.scss
@@ -168,9 +168,13 @@
   background-color: rgba(#000, .04); }
 
 .horizontal-rule-light {
-  @include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
+  @include box-shadow(#fff 0 1px 0);
   border-bottom: 1px solid #bbb; }
 
+.horizontal-rule-top-light {
+  @include box-shadow(#fff 0 1px 0 inset);
+  border-top: 1px solid #bbb; }
+
 .vertical-rule-light {
   @include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
   border-right: 1px solid #bbb; }
@@ -214,17 +218,17 @@
 @mixin light-theme($docs: false) {
   $page-bg: #ececec; // image-url('bg-light.jpg');
 
-  $text: #222 ;
-  $heading: #444;
+  $text: #111;
+  $heading: #222;
   $strong-text: #000;
 
   $search: #666;
 
   $link: #307eb6;
-  $nav-link: #555;
+  $nav-link: #444;
   $code: #222;
 
-  $main-nav: #555;
+  $main-nav: #000;
   $main-nav-selected: darken(#fb292d, 15);
   $docs-nav-selected: $strong-text;
   $module-nav-selected: $link;
diff --git a/doc-src/layouts/example.haml b/doc-src/layouts/example.haml
index 2cc2dcd4..2209b1bd 100644
--- a/doc-src/layouts/example.haml
+++ b/doc-src/layouts/example.haml
@@ -1,4 +1,21 @@
-- render 'main' do
+- render 'basic' do
   - content_for(:additional_css) do
     = example_css
-  %article= yield
+  #wrap
+    = render "partials/main-navigation"
+    #page
+      #docs_panel
+        #theme_pref
+          %a{:href => "#", :rel => "theme", :title => "switch theme" } Q
+        #syntax_pref
+          %a{:href => "#", :rel => "scss" } scss
+          %a{:href => "#", :rel => "sass" } sass
+        #version
+          Version:
+          %a.number(href="/CHANGELOG/")= compass_version
+      %article= yield
+      -#comments= render "partials/disqus_comments"
+    %footer(role="contentinfo")= render "partials/footer"
+  = @item[:content_for_javascripts]
+  = render "partials/analytics"
+  <script type="text/javascript">SyntaxHighlighter.all();</script>
diff --git a/doc-src/layouts/partials/example.haml b/doc-src/layouts/partials/example.haml
index 4ad66b25..e6d3fc78 100644
--- a/doc-src/layouts/partials/example.haml
+++ b/doc-src/layouts/partials/example.haml
@@ -5,12 +5,10 @@
 
 #how
   %section#markup
-    %nav
-      %ul
-        %li
-          %a{:href => "#html"} html
-        %li
-          %a{:href => "#haml"} haml
+    .syntax_pref
+      %a{:href => "#", :rel => "html" } html
+      %a{:href => "#", :rel => "haml" } haml
+
     .code
       %ul
         %li#html
@@ -18,14 +16,10 @@
         %li#haml
           %pre= h(example_haml)
   %section#styles
-    %nav
-      %ul
-        %li
-          %a{:href => "#scss"} scss
-        %li
-          %a{:href => "#sass"} sass
-        %li
-          %a{:href => "#css"} css
+    .syntax_pref
+      %a{:href => "#", :rel => "scss" } scss
+      %a{:href => "#", :rel => "sass" } sass
+      %a{:href => "#", :rel => "css" } css
     .code
       %ul
         %li#scss