!!! Strict
%html
  %head
    %title
      #{@item[:title]} - Compass
    %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
    %link{ :href => "/stylesheets/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
    %link{ :href => "/stylesheets/ui-lightness/jquery-ui-1.7.2.custom.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
    %script{:src => "/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"}
    %script{:src => "/javascripts/jquery-ui-1.7.2.custom.min.js", :type => "text/javascript"}
    %script{:src => "/javascripts/jquery.tipsy.js", :type => "text/javascript"}
  %body{body_attributes(@item)}
    #container
      #main
        = yield
      #sidebar
        %h2
          Compass Documentation
        %ul
          %li= link_to "Blueprint Reference", reference_path(:stylesheet => "_blueprint.sass")
          %li= link_to "Compass Reference", reference_path(:stylesheet => "_compass.sass")
      #footer= @item[:content_for_footer]
    :javascript
      $(function(){
        $('span.color').tipsy({
          gravity: $.fn.tipsy.autoNS,
          html: 'html',
          opacity: 1,
          title: function() {
            return "<div style='background-color:"+$(this).html()+";' class='color-snippet'></div>";
          }
        });
      });