erbook 7.0.0 → 7.1.0

data/doc/intro.erb

@@ -1,6 +1,6 @@
 %#--
-%# Copyright 2007 Suraj N. Kurapati
-%# See the LICENSE file for details.
+%# Copyright protects this work.
+%# See LICENSE file for details.
 %#++
 
 % eruby_url = "http://en.wikipedia.org/wiki/ERuby"
@@ -8,18 +8,25 @@
 % repo_url = 'http://github.com/sunaku/' + $program
 % repo_scm = '[Git](http://git-scm.com)'
 
+
 %|chapter "Introduction"
+
+
   %|project
-    <%= $project %> is an extensible document processor that emits <%= xref "HelloWorld", "any document you can imagine" %> from [eRuby templates](<%= eruby_url %>) that allow scripting and dynamic content generation.
+
+    <%= $project %> is an extensible document processor that emits <%= xref "HelloWorld", "any document you can imagine" %> from [eRuby templates](<%= eruby_url %>) which allow scripting and dynamic content generation.
 
     A working <%= xref "xhtml", "XHTML (web page)" %> format is provided, while <%= xref "latex", "LaTeX (PDF)" %>, <%= xref "man", "UNIX manual page" %>, and <%= xref "text", "plain text" %> formats are planned... <%= xref "License", "patches are welcome" %>!
 
+
+  %|section "Features"
+
     <%= $project %> is exciting because:
     * Its documents are scriptable [eRuby templates](<%= eruby_url %>).
     * It lets you <%= xref "HelloWorld", "define your own document formats" %>.
-    * Its core contains less than 300 lines of code.
+    * Its core contains less than 400 lines of code.
 
-    These features distinguish <%= $project %> from the competition, which offers neither scriptable documents nor definable document formats:
+    These features distinguish <%= $project %> from the competition, who offer neither scriptable documents nor definable document formats:
     * [DocBook](http://www.docbook.org)
     * [Deplate](http://deplate.sourceforge.net)
     * [SiSU](http://www.jus.uio.no/sisu/SiSU/)
@@ -27,16 +34,20 @@
     * [txt2tags](http://txt2tags.sourceforge.net)
     * [Grutatxt](http://www.triptico.com/software/grutatxt.html)
 
-    %|section "Logistics"
-      * <%= xref "History", "Release notes" %> --- history of project releases.
-      * [Source code](<%= repo_url %>) --- obtain via <%= repo_scm %> or browse online.
-      * [API reference](<%= api_url %>) --- documentation for source code.
-      * [Project home](<%= $website %>) --- the <%= $project %> project home page.
+
+  %|section "Logistics"
+
+    * <%= xref "History", "What's new?" %> --- history of project releases.
+    * [Source code](<%= repo_url %>) --- obtain via <%= repo_scm %> or browse online.
+    * [API reference](<%= api_url %>) --- documentation for source code.
+    * [Project home](<%= $website %>) --- the <%= $project %> project home page.
 
     To get help or provide feedback, simply
     <%= xref "License", "contact the authors" %>.
 
+
     %|paragraph "Version numbers"
+
       <%= $project %> releases are numbered in *major.minor.patch*
       form according to the [RubyGems rational versioning
       policy](http://www.rubygems.org/read/chapter/7), which
@@ -76,22 +87,27 @@
         </tbody>
       </table>
 
+
   %|section "License"
+
     %< "../LICENSE"
 
+
   %|section "Credits" |n|
+
     %= $logo = n.xref_link("![#{$project} logo](#{$program}.png)".to_inline_xhtml)
+
     %< "README"
 
     <%= $project %> is made possible by
     <%= xref "History", "contributions" %>
     from users like you:
 
-    * Jens Vierbuchen
-    * Maunika Gosike
-    * [Zhang Chiyuan](http://lifegoo.pluskid.org)
+    %< "../CREDITS"
+
 
   %|section "Reviews"
+
     Tom Cloyd in [ruby-talk](http://blade.nagaokaut.ac.jp/cgi-bin/scat.rb/ruby/ruby-talk/327499):
 
     > This documentation is simply gorgeous!

data/doc/setup.erb

@@ -1,10 +1,13 @@
 %#--
-%# Copyright 2007 Suraj N. Kurapati
-%# See the LICENSE file for details.
+%# Copyright protects this work.
+%# See LICENSE file for details.
 %#++
 
 %|chapter "Setup"
+
+
   %|section "Requirements"
+
     Your system needs the following software to run <%= $project %>.
 
     | Software                        | Description               | Notes                               |
@@ -12,7 +15,9 @@
     | [Ruby](http://ruby-lang.org)    | Ruby language interpreter | Version 1.8.7 or newer is required. |
     | [RubyGems](http://rubygems.org) | Ruby packaging system     | Version 1.0.0 or newer is required. |
 
+
   %|section "Installation"
+
     You can install <%= $project %> by running this command:
 
         gem install <%= $program %>
@@ -27,7 +32,9 @@
 
     Otherwise, you can <%= xref "License", "contact the author" %> for help.
 
+
   %|section "Manifest"
+
     You will see the following items inside <%= $project %>'s installation directory, whose path you can determine by running this command:
 
         <%= $program %> -v

data/doc/theory.erb

@@ -1,9 +1,10 @@
 %#--
-%# Copyright 2007 Suraj N. Kurapati
-%# See the LICENSE file for details.
+%# Copyright protects this work.
+%# See LICENSE file for details.
 %#++
 
-%|chapter "Theory of operation"
+%|chapter "Theory"
+
   When you run <%= $project %>, it does the following:
 
   1.  Loads the <%= xref "SpecFile", "format specification file" %>.
@@ -24,7 +25,9 @@
 
   Although there is only one document being processed here, we refer to it using three distinct terms: *input*, *processed*, and *output*; because the content of the document changes radically with every transformation.
 
+
   %|section "Nodes"
+
     A node is a block of text that appears like this:
 
         <%% node_type node_argument1, node_argument2, ... do |node_object| %>
@@ -68,7 +71,9 @@
 
     A <%= xref "SpecFile", "format specification file" %> defines what types of nodes an input document may use.
 
+
     %|section "The `ERBook::Document::Node` class", "Node.class"
+
       When <%= $project %> builds a document tree from the nodes in an input document, it stores information about these nodes into `ERBook::Document::Node` objects.  A `ERBook::Document::Node` object has the following properties (methods):
 
       | Property | Type                                | Description                                                                                                                                                |
@@ -87,7 +92,9 @@
 
       Furthermore, the `ERBook::Document::Node` class is derived from [Ruby's `OpenStruct` class](http://www.ruby-doc.org/stdlib/libdoc/ostruct/rdoc/classes/OpenStruct.html), so you can define new properties for `ERBook::Document::Node` objects dynamically.
 
+
   %|section "Format specification file", "SpecFile"
+
     A format specification file is a plain-text file marked up in [YAML syntax](http://yaml4r.sourceforge.net/cookbook/). Through the following parameters, it defines (1) what types of nodes an input document may contain, (2) how the content of those nodes is transformed into output, and (3) how the processed document is transformed into the output document.
 
     | Parameter | Type     | Description                                                                                                                                                                                                                                        |
@@ -104,7 +111,9 @@
       common_template_vars = nil
     %>
 
+
     %|section "Node definition", "SpecFile.nodes"
+
       A node definition is a mapping from a name (the "node type") to the following set of parameters:
 
       | Parameter | Type     | Description                                                                               |
@@ -118,7 +127,9 @@
 
       You may define additional parameters in a node definition if you want.
 
+
       %|section "Node output template", "SpecFile.nodes.output"
+
         A node output template (the **output** parameter in a node definition) is an eRuby template that transforms a node's content into output.  During the processing stage, <%= $project %> replaces all nodes in the input document with the result of this template _unless_ the **silent** parameter is enabled in this node's definition.
 
         The following variables are available for use in this template:
@@ -141,7 +152,9 @@
         }.lstrip.gsub(/^ +/, '')
         %>
 
+
     %|section "Document output template", "SpecFile.output"
+
       A document output template (the **output** parameter in a format specification file) is an eRuby template that transforms a processed document into the final output document.
 
       The following variables are available for use in this template:
@@ -151,7 +164,9 @@
       | `@content` | `String` | Content of the processed document. |
       <%= common_template_vars %>
 
+
     %|section "Creating your own document format", "HelloWorld"
+
       Here is a working example to help you digest all that you've learned so far about format specification files. A few things to notice in this example are:
 
       * We define a `generate_name()` method in <%= xref "HelloWorld.spec" %> and make use of it in the <%= xref "HelloWorld.input" %>. This shows how to provide format-specific functionality to an input document.
@@ -170,11 +185,17 @@
 
       4.  Examine the <tt>HelloWorld.output</tt> file to your satisfaction!
 
+
       %|example "HelloWorld format specification file", "HelloWorld.spec"
+
         <code lang="rhtml"><%= verbatim File.read('doc/HelloWorld.spec') %></code>
 
+
       %|example "Input document for HelloWorld format", "HelloWorld.input"
+
         <code lang="rhtml"><%= verbatim File.read('doc/HelloWorld.input') %></code>
 
+
       %|example "Output of HelloWorld format", "HelloWorld.output"
+
         %= `ruby bin/#{PROGRAM} -u doc/HelloWorld.spec doc/HelloWorld.input`

data/doc/usage.erb

@@ -1,29 +1,38 @@
 %#--
-%# Copyright 2007 Suraj N. Kurapati
-%# See the LICENSE file for details.
+%# Copyright protects this work.
+%# See LICENSE file for details.
 %#++
 
 %|chapter "Usage"
+
+
   %|section "Command-line interface"
+
     <pre><%= `ruby bin/#{$program} -h` %></pre>
 
     The first command-line argument to <%= $project %> is either the name of a predefined format (FormatName) or the path to a <%= xref "SpecFile", "format specification file" %> (FormatFile).
 
     Predefined formats are simply short-hand names of format specification files located in the <tt>fmt/</tt> subdirectory of the <%= $project %> installation directory (see <%= xref "Manifest" %>).
 
+
     %|section "Saving the output to a file"
+
       Simply redirect the standard ouput stream (STDOUT) to a file like this:
 
           <%= $program %> > YOUR_PATH_HERE
 
       In the above example, *YOUR\_PATH\_HERE* is the path of the file in which the output should be saved.
 
+
       %|important "Save XHTML output as <tt>.xhtml</tt>"
+
         When you use the XHTML format, ensure that the file extension of your saved output document is either <tt>.xhtml</tt> or <tt>.xml</tt>. Alternatively, ensure that your saved output document is served to web browsers under the <tt>application/xhtml+xml</tt> mime type.
 
         Otherwise, most web browsers _will not display_ the icons and graphics embedded in the saved XHTML output document because they will treat it as HTML instead of as XML.  See [this QuirksMode.org bug report](http://www.quirksmode.org/bugreports/archives/2005/02/custom_dtds_int_1.html) for details.
 
+
   %|section "Unindenting nodes hierarchically"
+
     When writing <%= $project %> documents, I prefer to indent the content of nodes according to their depth because my [text editor of choice](http://jedit.org) automatically folds blocks of text based on indentation.
 
     If you also prefer to write documents in this way, be sure to pass the <tt>--unindent</tt> option to <%= $project %> so that the indentation will not affect the resulting output.

data/fmt/xhtml.yaml

@@ -1,13 +1,13 @@
 #--
-# Copyright 2007 Suraj N. Kurapati
-# See the LICENSE file for details.
+# Copyright protects this work.
+# See LICENSE file for details.
 #++
 
 desc: web page for the Internet
 
 code: |
-  ICONS_DIR   = File.join(ERBook::FORMATS_DIR, 'xhtml.icons')
-  SCRIPTS_DIR = File.join(ERBook::FORMATS_DIR, 'xhtml.scripts')
+  ICONS_DIR  = File.join(ERBook::FORMATS_DIR, 'xhtml', 'icons')
+  JQUERY_DIR = File.join(ERBook::FORMATS_DIR, 'xhtml', 'jquery')
 
   # load the String#to_xhtml and String#to_inline_xhtml methods
   require 'erbook/to_xhtml'
@@ -33,8 +33,12 @@ code: |
 
       # The remaining characters must be letters, digits, hyphens (-),
       # underscores (_), colons (:), or periods (.) or Unicode characters
+      #
+      # However, colons (:) and periods (.) are special characters
+      # in jQuery CSS selector syntax, so we sanitize them as well.
+      #
       buf.unpack('U*').map! do |code|
-        if code > 0xFF or code.chr =~ /[[:alnum:]\-_:\.]/
+        if code > 0xFF or code.chr =~ /[[:alnum:]\-_]/
           code
         else
           32 # ASCII character code for a single space
@@ -62,11 +66,27 @@ code: |
       [input].pack('m')
     end
 
+    ##
+    # Encodes the contents of the given file in base64 format.
+    #
+    def ERBook.base_64_encode_file path #:nodoc:
+      base_64_encode open(path, 'rb') {|f| f.read }
+    end
+
     ##
     # Returns a string denoting embedded, base64 encoded data.
     #
-    def ERBook.base_64_embed data, format #:nodoc:
-      "data:#{format.to_s.downcase};base64,#{data.tr("\n", '')}"
+    def ERBook.base_64_embed data, mime #:nodoc:
+      "data:#{mime.to_s.downcase};base64,#{data.tr("\n", '')}"
+    end
+
+    def ERBook.base_64_embed_file path # :nodoc:
+      data = base_64_encode_file(path)
+
+      require 'mime/types'
+      mime = MIME::Types.of(path)
+
+      base_64_embed data, mime
     end
 
     ##
@@ -133,7 +153,7 @@ code: |
         origin = path[/^\w+/]
 
         path = File.join(ICONS_DIR, path) # make the path absolute
-        data = base_64_encode File.open(path, 'rb') {|f| f.read }
+        data = base_64_encode_file(path)
 
         ICON_BY_NAME[name] = Icon.new(origin, path, name, format, data)
       end
@@ -208,6 +228,10 @@ code: |
 
       # utility methods
 
+        def type_frag #:nodoc:
+          "__#{type}__"
+        end
+
         def type_label #:nodoc:
           ERBook::PHRASES[type.to_s.capitalize]
         end
@@ -272,7 +296,7 @@ code: |
         end
 
         ##
-        # Returns a navigation menu relative to this node.
+        # Returns a navigation menu for this node.
         #
         def navigation
           self.class.navigation(
@@ -283,14 +307,40 @@ code: |
           )
         end
 
+        def parent_tabs_begin #:nodoc:
+          if p = parent and pc = p.toc_children and self == pc.first
+            %{<div class="tabs"><ul>} +
+
+            pc.map do |c|
+              %{<li><a href="##{c.here_frag}">#{c.title.to_s.to_inline_xhtml}</a></li>}
+            end.join +
+
+            %{</ul>}
+          end
+        end
+
+        def parent_tabs_end #:nodoc:
+          if p = parent and self == p.toc_children.last
+            '</div>'
+          end
+        end
+
+        ##
+        # Returns all children of this node which are
+        # configured to appear in the table of contents.
+        #
+        def toc_children
+          children.select {|c| c.defn['toc'] }
+        end
+
         HERE_TEXT = ERBook::PHRASES['Focus this segment']
         PREV_TEXT = ERBook::PHRASES['Focus previous segment']
         NEXT_TEXT = ERBook::PHRASES['Focus next segment']
         LIST_TEXT = ERBook::PHRASES['Return to listing']
 
         HERE_SIGN = ICON_BY_NAME['nav_here'].to_xhtml(:alt => '&lowast;')
-        PREV_SIGN = ICON_BY_NAME['nav_prev'].to_xhtml(:alt => '&uarr;')
-        NEXT_SIGN = ICON_BY_NAME['nav_next'].to_xhtml(:alt => '&darr;')
+        PREV_SIGN = ICON_BY_NAME['nav_prev'].to_xhtml(:alt => '&larr;')
+        NEXT_SIGN = ICON_BY_NAME['nav_next'].to_xhtml(:alt => '&rarr;')
         LIST_SIGN = ICON_BY_NAME['nav_list'].to_xhtml(:alt => '&equiv;')
 
         ##
@@ -303,7 +353,7 @@ code: |
           next_link = %{<a title="#{NEXT_TEXT}" href="##{next_frag}">#{NEXT_SIGN}</a>} if next_frag
           list_link = %{<a title="#{LIST_TEXT}" href="##{list_frag}">#{LIST_SIGN}</a>} if list_frag
 
-          %{<a name="#{here_frag}"/><div class="nav" id="#{here_frag}">#{here_link} #{prev_link} #{next_link} #{list_link}</div>}
+          %{<a name="#{here_frag}"/><div class="nav">#{here_link} #{prev_link} #{next_link} #{list_link}</div>}
         end
 
         ##
@@ -344,7 +394,7 @@ code: |
 
             # make it unique
             while @@frags.include? frag
-              frag << '-' << (index || number || salt).to_s
+              frag = "#{frag} #{index || number || salt}".to_uri_fragment
             end
 
             @@frags << frag
@@ -359,7 +409,7 @@ code: |
         # of contents / list of figures that points this node.
         #
         def list_frag #:nodoc:
-          @list_frag ||= "rev:#{here_frag}"
+          @list_frag ||= "__toc__#{here_frag}".to_uri_fragment
         end
     end
   end
@@ -397,7 +447,10 @@ nodes:
       number: false
       silent: true
       inline: true
-      output: <div class="<%= @node.type %>"><%= @node.content_xhtml %></div>
+      output: |
+        <%= @node.parent_tabs_begin %>
+        <div class="<%= @node.type %>" id="<%= @node.here_frag %>"><%= @node.content_xhtml %></div>
+        <%= @node.parent_tabs_end %>
 
     header_inside_above:  *header_insert
     header_inside_below:  *header_insert
@@ -416,8 +469,9 @@ nodes:
       index: false
       number: false
       silent: true
+      bypass: true
       output: |
-        <div id="<%= @node.type_label %>">
+        <div id="<%= @node.type_frag %>">
           <%= @node.navigation %>
           <h1 class="title"><%= @node.type_label %></h1>
           <%= @node.content_xhtml_div %>
@@ -432,7 +486,8 @@ nodes:
       number: true
       silent: false
       output: |
-        <div class="<%= @node.type %>">
+        <%= @node.parent_tabs_begin %>
+        <div class="<%= @node.type %>" id="<%= @node.here_frag %>">
           <%= @node.navigation %>
           <h1 class="title">
             <%= @node.type_label %>&nbsp;<%= @node.index_link %>
@@ -441,6 +496,7 @@ nodes:
           </h1>
           <%= @node.content_xhtml_div %>
         </div>
+        <%= @node.parent_tabs_end %>
 
     chapter: *latex
 
@@ -453,13 +509,15 @@ nodes:
       silent: false
       output: |
         <% depth = [6, @node.depth + 1].min %>
-        <div class="<%= @node.type %>">
+        <%= @node.parent_tabs_begin %>
+        <div class="<%= @node.type %>" id="<%= @node.here_frag %>">
           <%= @node.navigation %>
           <h<%= depth %> class="title">
             <%= @node.index_and_title_link %>
           </h<%= depth %>>
           <%= @node.content_xhtml_div %>
         </div>
+        <%= @node.parent_tabs_end %>
 
     paragraph:
       toc: true
@@ -469,11 +527,13 @@ nodes:
       number: false
       silent: false
       output: |
-        <div class="<%= @node.type %>">
+        <%= @node.parent_tabs_begin %>
+        <div class="<%= @node.type %>" id="<%= @node.here_frag %>">
           <%= @node.navigation %>
           <p class="title"><%= @node.title_link %></p>
           <%= @node.content_xhtml_div %>
         </div>
+        <%= @node.parent_tabs_end %>
 
   # Admonitions
     tip: &admonition
@@ -484,7 +544,8 @@ nodes:
       number: true
       silent: false
       output: |
-        <div class="<%= @node.type %>">
+        <%= @node.parent_tabs_begin %>
+        <div class="<%= @node.type %>" id="<%= @node.here_frag %>">
           <%= @node.navigation %>
           <p class="title"><%= @node.number_and_title_link %></p>
           <div class="content">
@@ -492,6 +553,7 @@ nodes:
             <%= @node.content_xhtml %>
           </div>
         </div>
+        <%= @node.parent_tabs_end %>
 
     note: *admonition
     caution: *admonition
@@ -508,11 +570,13 @@ nodes:
       number: true
       silent: false
       output: |
-        <div class="<%= @node.type %>">
+        <%= @node.parent_tabs_begin %>
+        <div class="<%= @node.type %>" id="<%= @node.here_frag %>">
           <%= @node.navigation %>
           <p class="title"><%= @node.number_and_title_link %></p>
           <%= @node.content_xhtml_div %>
         </div>
+        <%= @node.parent_tabs_end %>
 
     table: *formal
     example: *formal
@@ -551,6 +615,7 @@ nodes:
       index: false
       number: true
       silent: true
+      bypass: true
 
     cite:
       toc: false
@@ -620,7 +685,7 @@ output: |
         end
       end
 
-      lof_sections = []
+      lof_sections_frag_and_label = []
 
       lof = lof_enums.sort.map do |type, nodes|
         nested = nodes.map do |n|
@@ -628,9 +693,10 @@ output: |
         end
 
         label = ERBook::PHRASES[type.capitalize << 's']
-        lof_sections << label
+        frag = nodes.first.type_frag
+        lof_sections_frag_and_label << [frag, label]
 
-        %{#{ERBook::Document::Node.navigation label, "rev:#{label}", nil, nil}<h2 class="title">#{label}</h2> <ol>#{nested}</ol>}
+        %{<div id="#{frag}"><h2 class="title">#{label}</h2> <ol>#{nested}</ol></div>}
       end
   %><?xml version="1.0" encoding="utf-8"?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
@@ -643,8 +709,12 @@ output: |
       <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/>
       <meta name="generator" content="<%= ERBook::DISPLAY %>"/>
 
-      % if $title
-        <title><%= $title.to_s.to_inline_xhtml %></title>
+      % if $title || $subtitle
+        <title><%=
+          [$title, $subtitle].compact.map do |t|
+            t.to_s.to_inline_xhtml
+          end.join(' &mdash; ')
+        %></title>
 
       % if $authors
         <meta name="author" content="<%= $authors.keys.join(', ') %>"/>
@@ -656,15 +726,32 @@ output: |
         % $feeds.each_pair do |url, fmt|
           <link rel="alternate" type="application/<%= fmt %>+xml" href="<%= url %>"/>
 
-      % require 'rainpress'
-      % @format['styles'].each do |style|
-        % style.each_pair do |media, code|
-          <style type="text/css" media="<%= media %>">
-          /*<![CDATA[*/<%~ Rainpress.compress(code) %>/*]]>*/
-          </style>
-
       <style type="text/css" media="screen">
       /*<![CDATA[*/
+        <%=
+          css = File.read(File.join(JQUERY_DIR, 'jquery-ui-1.7.2.custom.css'))
+
+          # embed images used by jQuery UI as data URIs
+          css.gsub! %r{\bimages/.*?\.png\b} do |path|
+            # XXX: using inspect to put quotes around the value
+            #      because jQuery did not put them in their CSS
+            ERBook.base_64_embed_file(File.join(JQUERY_DIR, path)).inspect
+          end
+
+          css
+        %>
+
+        .ui-widget
+        {
+            /* prevent nested widgets from having larger fonts */
+            font-size: 1em;
+        }
+
+        .ui-tabs .ui-tabs-nav li.ui-tabs-selected a
+        {
+            cursor: pointer;
+        }
+
         /* decorate external hyperlinks with a visual indicator */
         a[href]:not([href^="#"])
         {
@@ -686,199 +773,467 @@ output: |
       /*]]>*/
       </style>
 
+      % require 'rainpress'
+      % @format['styles'].each do |style|
+        % style.each_pair do |media, sass|
+          <style type="text/css" media="<%= media %>">
+          /*<![CDATA[*/<%=
+
+            # expand eRuby directives in SASS templates
+            sass = ::Ember::Template.new(sass).render(binding)
+
+            # compile SASS into CSS
+            require 'sass'
+            css = ::Sass::Engine.new(sass).render
+
+            # minify the CSS
+            css = Rainpress.compress(css)
+
+          %>/*]]>*/
+          </style>
+
       <script type="text/javascript">
       //<![CDATA[
-        %< File.join(SCRIPTS_DIR, 'jquery-1.3.2.min.js')
-        %< File.join(SCRIPTS_DIR, 'jquery.scrollTo-1.4.1-min.js')
-        %< File.join(SCRIPTS_DIR, 'jquery.localscroll-1.2.7-min.js')
-
-        $(document).ready(
-          function(){
-            $.localScroll({
-              // the default 1000 is too slow, and 500 is too fast
-              duration: 700,
-
-              // allow the CSS ':target' pseudo-selector to work properly
-              hash: true, onAfter: function(){ location = location; }
-            });
+        %< File.join(JQUERY_DIR, 'jquery-1.3.2.min.js')
+        %< File.join(JQUERY_DIR, 'jquery-ui-1.7.2.custom.min.js')
+
+        $(function() {
+          //
+          // respond to changes in window location
+          //
+          var $last_hash = null;
+
+          function on_hash_change() {
+            var curr_hash = window.location.hash;
+
+            if (curr_hash && curr_hash != $last_hash) {
+              $last_hash = curr_hash;
+              reveal_hash(curr_hash);
+            }
+
+            setTimeout(on_hash_change, 300);
+          }
+
+          //
+          // Sets the location bar hash to the given value.
+          //
+          // [prevent_jump]
+          //  If true, prevents the browser from jumping to
+          //  the element corresponding to the given hash.
+          //
+          function set_hash(hash, prevent_jump) {
+            var set_the_hash = function() {
+              //
+              // XXX: bypass on_hash_change() by setting $last_hash
+              //
+              window.location.hash = $last_hash = hash;
+            }
+
+            if (prevent_jump) {
+              var target = $(hash);
+
+              if (target.length) {
+                //
+                // This particular approach to solving the browser
+                // jumping problem comes from the jQuery.LocalScroll
+                // plugin, which is dual licensed under MIT and GPL:
+                //
+                //   Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
+                //
+                //   Permission is hereby granted, free of charge, to any person obtaining a copy
+                //   of this software and associated documentation files (the "Software"), to deal
+                //   in the Software without restriction, including without limitation the rights
+                //   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+                //   copies of the Software, and to permit persons to whom the Software is
+                //   furnished to do so, subject to the following conditions:
+                //
+                //   The above copyright notice and this permission notice shall be included in
+                //   all copies or substantial portions of the Software.
+                //
+                //   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+                //   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+                //   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+                //   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+                //   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+                //   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+                //   THE SOFTWARE.
+                //
+                // This plugin is documented at:
+                //
+                //   http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
+                //
+                // And its source is available at:
+                //
+                //   http://flesler-plugins.googlecode.com/svn/trunk/jquery.localScroll/jquery.localScroll.js
+                //
+                var target_id = target.attr('id');
+
+                //
+                // temporarily place a dummy element at the current
+                // screen position and give it the ID of the target
+                //
+                var dummy = $('<span/>').attr('id', target_id).css({
+                  position: 'absolute',
+                  top:      $(window).scrollTop()
+                });
+
+                target.removeAttr('id').before(dummy);
+
+                //
+                // when we set the hash, the browser will jump to the
+                // dummy, which is where the browser screen currently
+                // is, and therefore the jump will not be visualized!
+                //
+                set_the_hash();
+
+                //
+                // undo the temporary changes
+                //
+                dummy.remove();
+                target.attr('id', target_id);
+
+                return;
+              }
+            }
+
+            set_the_hash();
+          }
+
+          //
+          // Returns the tab corresponding to the
+          // given panel in the given tabs widget.
+          //
+          function tab_by_panel(panel, tabs_widget) {
+            if (!tabs_widget) {
+              tabs_widget = panel.parent('.ui-tabs');
+            }
+
+            return tabs_widget.find(
+              '.ui-tabs-nav > li > a[href=#'+ panel.attr('id') +']'
+            ).parent('li');
+          }
+
+          //
+          // Reveals the element at the given hash by (1) activating all
+          // tabs that contain it, (2) smoothly scrolling to it, and (3)
+          // updating the hash in the browser's location bar accordingly.
+          //
+          function reveal_hash(hash) {
+            var target = $(hash);
+
+            if (target.length) {
+              var target_is_panel = target.is('div') &&
+                target.parent('.ui-tabs').length;
+
+              var target_initially_hidden = target.is(':hidden');
+
+              //
+              // reveal all tabs which contain the target
+              //
+              if (target_initially_hidden) {
+                var panels = target.parents('.ui-tabs > div:hidden').get().reverse();
+
+                if (target_is_panel) {
+                  panels.push(target);
+                }
+
+                for (var i in panels) {
+                  var panel = $(panels[i]);
+                  var tabs_widget = panel.parent('.ui-tabs');
+                  var selected_index = tabs_widget.tabs('option', 'selected');
+
+                  //
+                  // map the panel to its tab because tabs do not
+                  // have to be in the same order as their panels
+                  //
+                  var tab = tab_by_panel(panel, tabs_widget);
+                  var wanted_index = tab.prevAll('li').length;
+
+                  if (wanted_index != selected_index) {
+                    tabs_widget.tabs('select', wanted_index);
+                  }
+                }
+              }
+
+              function scroll_to_target_and_set_hash() {
+                if (target.is(':hidden')) {
+                  //
+                  // wait before scrolling because the
+                  // tabs.select() calls above may not
+                  // have fully taken effect yet and
+                  // so the target may still be hidden
+                  //
+                  setTimeout(scroll_to_target_and_set_hash, 0);
+                }
+                else {
+                  //
+                  // scroll to the tab bar instead of the target
+                  // because it contains the title for the target
+                  //
+                  var scroll_target = target_is_panel ?
+                    target.parent('.ui-tabs') : target;
+
+                  var screen_before_scroll = $(window).scrollTop();
+
+                  $('html').animate({
+                    scrollTop: Math.floor(scroll_target.offset().top)
+                  }, 'slow', 'swing', function() {
+                    set_hash(hash, target_is_panel);
+
+                    if (
+                      !target_initially_hidden &&
+                      $(window).scrollTop() == screen_before_scroll
+                    ) {
+                      //
+                      // nothing changed on the screen.
+                      // the target was already visible.
+                      // highlight it to notify the user.
+                      //
+                      target.effect('highlight', 'slow');
+                    }
+                  });
+                }
+              }
+
+              scroll_to_target_and_set_hash();
+            }
           }
-        );
+
+          //
+          // create jQuery UI tabs
+          //
+          $('.tabs').tabs();
+
+          //
+          // make internal hyperlinks reveal their targets when clicked
+          //
+          $('a[href^=#]').click(function() {
+            var link = $(this);
+            var hash = link.attr('href');
+
+            if (link.parent('li').parent('.ui-tabs-nav').length) {
+              // tab clicks should not cause the screen to scroll
+              set_hash(hash, true);
+            }
+            else {
+              reveal_hash(hash);
+            }
+
+            return false;
+          });
+
+          //
+          // checkbox for printer friendly stylesheet
+          //
+          $('#__header__ > .authors_and_date').append(
+            $('<span/>').append(
+              $('<input/>').attr('type', 'checkbox').click(function() {
+                if ($(this).is(':checked')) {
+                  $('style[media=screen]').attr('media', 'neercs');
+                  $('style[media=print]').attr('media', 'screen');
+                }
+                else {
+                  $('style[media=screen]').attr('media', 'print');
+                  $('style[media=neercs]').attr('media', 'screen');
+                }
+                return true;
+              })
+            ).append(" <%= ERBook::PHRASES['Printer friendly'] %>")
+          );
+
+          //
+          // ready for action!
+          //
+          $('#__loading__').append("<%= ERBook::PHRASES['Ready!'] %>").
+          fadeOut('slow', function() {
+            $('#__body__').show();
+            on_hash_change();
+          });
+        });
       //]]>
       </script>
     </head>
     <body>
-    <div id="body">
       <%
-        # menu of links to link sections
-        nav = [
-          (ERBook::PHRASES['Abstract'] if abstract),
-          ERBook::PHRASES['Contents'],
-          lof_sections,
-          (ERBook::PHRASES['References'] if references)
-        ].flatten.compact
+        text_only_browser_divider = %{
+          <div style="display: none"><br/><hr/><br/></div>
+        }.strip
       %>
-      % if nav.length > 1
-        <div id="nav"><%=
-          nav.map do |section|
-            %{<a id="rev:#{ section }" href="##{ section }">#{ section }</a>}
-          end.join(' &middot; ')
-        %></div>
-
-      <br style="display: none"/>
-      <hr style="display: none"/>
-      <br style="display: none"/>
-
-
-      %= node = @nodes_by_type['header_outside_above'].first and node.output
-
-      <div id="header">
-        %= node = @nodes_by_type['header_inside_above'].first and node.output
-
-        % if header = @nodes_by_type['header'].first
-          <%= header.output %>
-        % else
-          % if $logo
-            <div class="logo"><%= $logo %></div>
-
-          % if $title
-            <h1 class="title"><%= $title.to_s.to_inline_xhtml %></h1>
-
-          % if $subtitle
-            <h2 class="subtitle"><%= $subtitle.to_s.to_inline_xhtml %></h2>
-
-          % if $authors
-            <h3 class="authors"><%=
-              $authors.map do |name, url|
-                if url
-                  %{<a href="#{url}">#{name}</a>}
-                else
-                  name
-                end
-              end.join(', ')
-            %></h3>
-
-          % if $date
-            <h3 class="date"><%= $date %></h3>
-
-        %= node = @nodes_by_type['header_inside_below'].first and node.output
-      </div>
 
-      %= node = @nodes_by_type['header_outside_below'].first and node.output
+      <div id="__loading__">
+        <%= ERBook::PHRASES['Loading...'] %> <noscript><%= ERBook::PHRASES['Failed!'] %>
+          <p><%= ERBook::PHRASES['Please enable JavaScript in your Web browser.'] %></p>
 
+          %= text_only_browser_divider
+        </noscript>
+      </div>
 
-      %= abstract.output if abstract
+      <div id="__body__">
+        %= node.output if node = @nodes_by_type['header_outside_above'].first
+
+        <div id="__header__">
+          %= node.output if node = @nodes_by_type['header_inside_above'].first
+
+          % if header = @nodes_by_type['header'].first
+            <%= header.output %>
+          % else
+            % if $logo
+              <div class="logo"><%= $logo %></div>
+
+            <div class="title_and_subtitle">
+              % if $title
+                <h1 class="title"><%= $title.to_s.to_inline_xhtml %></h1>
+
+              % if $subtitle
+                <h2 class="subtitle"><%= $subtitle.to_s.to_inline_xhtml %></h2>
+            </div>
+
+            <div class="authors_and_date">
+              % if $authors
+                <h3 class="authors"><%=
+                  $authors.map do |name, url|
+                    if url
+                      %{<a href="#{url}">#{name}</a>}
+                    else
+                      name
+                    end
+                  end.join(', ')
+                %></h3>
+
+              % if $date
+                <h3 class="date"><%= $date %></h3>
+            </div>
+
+          %= node.output if node = @nodes_by_type['header_inside_below'].first
+        </div>
 
-      <br style="display: none"/>
-      <hr style="display: none"/>
-      <br style="display: none"/>
+        %= node.output if node = @nodes_by_type['header_outside_below'].first
 
+        <div class="tabs">
+          <ul>
+            % if abstract
+              <li><a href="#__abstract__"><%= ERBook::PHRASES['Abstract'] %></a></li>
 
-      % unless toc.empty?
-        <div id="toc">
-          <%= ERBook::Document::Node.navigation \
-            'Contents', 'rev:Contents', nil, nil %>
-          <h1 class="title"><%= ERBook::PHRASES['Contents'] %></h1>
-          <ul><%= toc %></ul>
-        </div>
+            <li><a href="#__doc__"><%= ERBook::PHRASES['Document'] %></a></li>
 
-      % unless lof.empty?
-        <div id="lof"><%= lof %></div>
+            % unless toc.empty?
+              <li><a href="#__toc__"><%= ERBook::PHRASES['Contents'] %></a></li>
 
-      <br style="display: none"/>
-      <hr style="display: none"/>
-      <br style="display: none"/>
+            % if references
+              <li><a href="#__bib__"><%= ERBook::PHRASES['References'] %></a></li>
 
+            <li><a href="#__nfo__"><%= ERBook::PHRASES['About'] %></a></li>
+          </ul>
 
-      <div id="content"><%= @content %></div>
+          %= abstract.output if abstract
 
-      % if references
-        <div id="bib">
-          <%= ERBook::Document::Node.navigation \
-              'References', 'rev:References', nil, nil %>
-          <h1 class="title"><%= ERBook::PHRASES['References'] %></h1>
-          <ol>
-          % references.each do |n|
-            <li id="<%= n.here_frag %>"><%= n.content_xhtml %></li>
-          </ol>
-        </div>
+          % unless toc.empty?
+            <div id="__toc__">
+              <h1 class="title"><%= ERBook::PHRASES['Contents'] %></h1>
+              <ul><%= toc %></ul>
 
-      <br style="display: none"/>
-      <hr style="display: none"/>
-      <br style="display: none"/>
-
-
-      %= node = @nodes_by_type['footer_outside_above'].first and node.output
-
-      <div id="footer">
-        %= node = @nodes_by_type['footer_inside_above'].first and node.output
-        % if footer = @nodes_by_type['footer'].first
-          %= footer.content.to_s.to_xhtml
-        % else
-          <%=
-            ERBook::PHRASES[
-              'Generated by %s on %s.',
-              %{<a href="#{ERBook::WEBSITE}">#{ERBook::DISPLAY}</a>},
-              Time.now
-            ]
-          %>
-
-        <div id="footer-credits">
-          <%
-            icon_credits = 'The icons shown above are part of %s, which is copyright %s and is distributed under %s.'
-          %>
-          <p>
-            % ICONS.select {|i| i.origin == 'tango' }.each do |icon|
-              %= icon.to_xhtml
+              % unless lof.empty?
+                <div id="__lof__"><%= lof %></div>
+            </div>
 
-            <br/>
+          <div id="__doc__" class="tabs">
+            <h1 style="display: none"><%= ERBook::PHRASES['Document'] %></h1>
+            <ul>
+              % @roots.select {|n| n.defn['toc'] }.each do |n|
+                <li><a href="#<%= n.here_frag %>"><%= n.title.to_s.to_inline_xhtml %></a></li>
+            </ul>
 
-            <%=
-              ERBook::PHRASES[
-                icon_credits,
+            %= @content
+          </div>
 
-                '<a href="http://tango.freedesktop.org/Tango_Icon_Library">Tango Icon Theme</a>',
+          % if references
+            <div id="__bib__">
+              <h1 class="title"><%= ERBook::PHRASES['References'] %></h1>
+              <ol>
+              % references.each do |n|
+                <li id="<%= n.here_frag %>"><%= n.content_xhtml %></li>
+              </ol>
+            </div>
 
-                '&copy; 2005 <a href="http://tango.freedesktop.org">Tango Desktop Project</a>',
+          %= text_only_browser_divider
 
-                '<a href="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike 2.5 License Agreement</a>'
+          <div id="__nfo__">
+            <p><%=
+              ERBook::PHRASES[
+                'This document was generated by %s on %s using the following resources.',
+                %{<a href="#{ERBook::WEBSITE}">#{ERBook::DISPLAY}</a>},
+                %{<b>#{Time.now}</b>}
               ]
-            %>
-          </p>
-
-          <p>
-            % ICONS.select {|i| i.origin == 'mediawiki' }.each do |icon|
-              %= icon.to_xhtml
+            %></p>
+
+            <table border="1">
+              <thead>
+                <tr>
+                  <th><%= ERBook::PHRASES['Resource'] %></th>
+                  <th><%= ERBook::PHRASES['Origin'] %></th>
+                  <th><%= ERBook::PHRASES['License'] %></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    % ICONS.select {|i| i.origin == 'tango' }.each do |icon|
+                      %= icon.to_xhtml
+                  </td>
+                  <td>
+                    <a href="http://tango.freedesktop.org/Tango_Icon_Library">Tango Icon Theme</a>
+
+                    <p>&copy; 2005 <a href="http://tango.freedesktop.org">Tango Desktop Project</a></p>
+                  </td>
+                  <td>
+                    <a href="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike 2.5 License Agreement</a>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td>
+                    % ICONS.select {|i| i.origin == 'mediawiki' }.each do |icon|
+                      %= icon.to_xhtml
+                  </td>
+                  <td>
+                    <a href="http://www.mediawiki.org/skins-1.5/monobook/external.png">MediaWiki Monobook Skin</a>
+
+                    <p>&copy; 2007 <a href="https://www.ohloh.net/projects/mediawiki/contributors">MediaWiki contributors</a></p>
+                  </td>
+                  <td>
+                    <a href="http://www.gnu.org/licenses/old-licenses/gpl-2.0.html">GNU General Public License, version 2</a>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <p class="validations">
+              <a href="http://validator.w3.org/check?uri=referer"><img
+                  src="http://www.w3.org/Icons/valid-xhtml10-blue"
+                  alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
+
+              <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"><img
+                src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
+                alt="Valid CSS!" height="31" width="88" /></a>
+            </p>
+          </div>
+        </div>
 
-            <br/>
 
-            <%=
-              ERBook::PHRASES[
-                icon_credits,
+        %= node.output if node = @nodes_by_type['footer_outside_above'].first
 
-                '<a href="http://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a>',
+        <div id="__footer__">
+          %= node.output if node = @nodes_by_type['footer_inside_above'].first
 
-                '&copy; 2007 <a href="https://www.ohloh.net/projects/mediawiki/contributors">MediaWiki contributors</a>',
+          % if footer = @nodes_by_type['footer'].first
+            %= footer.content.to_s.to_xhtml
 
-                '<a href="http://www.gnu.org/licenses/old-licenses/gpl-2.0.html">GNU General Public License, version 2</a>'
-              ]
-            %>
-          </p>
-
-          <p style="margin-top: 3em">
-            <a href="http://validator.w3.org/check?uri=referer"><img
-                src="http://www.w3.org/Icons/valid-xhtml10-blue"
-                alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
-
-            <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"><img
-              src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
-              alt="Valid CSS!" height="31" width="88" /></a>
-          </p>
+          %= node.output if node = @nodes_by_type['footer_inside_below'].first
         </div>
-        %= node = @nodes_by_type['footer_inside_below'].first and node.output
-      </div>
 
-      %= node = @nodes_by_type['footer_outside_below'].first and node.output
-    </div>
+        %= node.output if node = @nodes_by_type['footer_outside_below'].first
+
+      </div>
     </body>
   </html>
 
@@ -888,524 +1243,375 @@ fonts:
   sans-serif: Calibri, Verdana, sans-serif
   monospace:  Monaco, Consolas, "Lucida Console", monospace
 
-styles:
+styles: # these are SASS templates
 - all: |
-    /* general */
-      body
-      {
-          color             : #000000;
-          background-color  : #FFFFFF;
-          line-height       : 1.5em;
-          font-family       : <%= @format['fonts']['sans-serif'] %>;
-      }
-
-    /* emphasis */
-      blockquote
-      {
-          color             : #333;
-          font-style        : italic;
-      }
-
-      em,
-      strong,
-      dt
-      {
-          font-family       : <%= @format['fonts']['serif'] %>;
-      }
-
-      hr
-      {
-          height            : 0;
-          border            : 0;
-          border-top        : thin dashed #000000;
-      }
-
-    /* source code */
-      tt,
-      code,
-      pre
-      {
-          font-family       : <%= @format['fonts']['monospace'] %>;
-          font-size         : 100%; /* appears like "size: small" otherwise */
-      }
-
-      /* output of the syntax coloring library */
-      code.para
-      {
-          white-space       : pre;
-      }
-
-    /* hyperlinks */
-      a > img
-      {
-          border            : none;
-      }
-
-    /* lists */
-      dt
-      {
-          margin-top        : 1.5em;
-          font-weight       : bolder;
-      }
-
-    /* headings */
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
+    body
+      color: #000000
+      background-color: #FFFFFF
+      line-height: 1.5em
+      font-family: <%= @format['fonts']['sans-serif'] %>
+
+
+    blockquote
+      color: #333
+      font-style: italic
+
+
+    em, strong, dt
+      font-family: <%= @format['fonts']['serif'] %>
+
+
+    hr
+      height: 0
+      border: 0
+      border-top: thin dashed #000000
+
+
+    tt, code, pre
+      font-family: <%= @format['fonts']['monospace'] %>
+      // appears like "size: small" otherwise
+      font-size: 100%
+
+
+    // output of the syntax coloring library
+    code.para
+      white-space: pre
+
+
+    a > img
+      border: none
+
+
+    dt
+      margin-top: 1.5em
+      font-weight: bolder
+
+
+    h1, h2, h3, h4, h5, h6, .title
+      font-weight: lighter
+      font-family: <%= @format['fonts']['serif'] %>
+
+
+    #__lof__
+      h1, h2, h3, h4, h5, h6
+        margin-top: 1.25em
+
+
+    #__doc__
+      h1, h2, h3, h4, h5, h6
+        margin-top: 2.5em
+        line-height: 1.25em
+
+      h1
+        font-size: 2.0em
+
+      h2
+        font-size: 1.8em
+
+      h3
+        font-size: 1.6em
+
+      h4
+        font-size: 1.4em
+
+      h5
+        font-size: 1.2em
+
+      h6
+        font-size: 1.0em
+
+
+    table
+      border: none
+      // no spacing between cell borders
+      border-collapse: collapse
+      margin: auto
+      margin-top: 1em
+      margin-bottom: 1em
+
+
+    th, td
+      padding: 1em
+      border: 1px solid #bbb
+      vertical-align: top
+      background-color: #FFFFFF
+
+
+    th
+      background-color: #F5F5F5
+
+
+    #__header__ > .title
+      font-size: 2.25em
+
+
+    #__abstract__
+      margin-bottom: 5em
+
+
+    #__toc__
+      ul > li
+        list-style-type: none
+
+      li ul
+        padding-bottom: 1em
+        border-left: thick solid #F5F5F5
+
+        &:hover
+          border-color: #DCDCDC
+
+      > ul
+        padding-left: 1em
+
+
+    #__footer__
+      padding-top: 1em
+      text-align: center
+      margin: auto
+
+
+    .part > .title, .chapter > .title
+      padding-bottom: 0.5em
+
+
+    .part > .title > big, .chapter > .title > big
+      display: block
+      margin-top: 0.25em
+
+
+    .paragraph > .title, .tip > .title, .note > .title, .caution > .title, .warning > .title, .important > .title, .figure > .title, .table > .title, .example > .title, .equation > .title, .procedure > .title
+      font-size: large
+      margin-top: 2em
+
+
+    .tip, .note, .caution, .warning, .important, .figure, .table, .example, .equation, .procedure
+      margin: 3em
+
+
+    .tip .nav, .note .nav, .caution .nav, .warning .nav, .important .nav, .figure .nav, .table .nav, .example .nav, .equation .nav, .procedure .nav
+      margin-right: -3em
+
+
+    .tip > .content, .note > .content, .caution > .content, .warning > .content, .important > .content, .figure > .content, .table > .content, .example > .content, .equation > .content, .procedure > .content
+      // height of icon
+      min-height: 48px
+
+
+    .tip > .content > .icon, .note > .content > .icon, .caution > .content > .icon, .warning > .content > .icon, .important > .content > .icon
+      float: left
+      margin:
+        top: 0
+        right: 1em
+        bottom: 1em
+        left: 0
+
+
+    .figure >
       .title
-      {
-          font-weight       : lighter;
-          font-family       : <%= @format['fonts']['serif'] %>;
-      }
-
-      #lof h1,
-      #lof h2,
-      #lof h3,
-      #lof h4,
-      #lof h5,
-      #lof h6
-      {
-          margin-top        : 1.25em;
-      }
-
-      #content h1,
-      #content h2,
-      #content h3,
-      #content h4,
-      #content h5,
-      #content h6
-      {
-          margin-top        : 2.5em;
-          line-height       : 1.25em;
-      }
-
-      #content h1
-      {
-          font-size         : 2.0em;
-      }
-
-      #content h2
-      {
-          font-size         : 1.8em;
-      }
-
-      #content h3
-      {
-          font-size         : 1.6em;
-      }
-
-      #content h4
-      {
-          font-size         : 1.4em;
-      }
-
-      #content h5
-      {
-          font-size         : 1.2em;
-      }
-
-      #content h6
-      {
-          font-size         : 1.0em;
-      }
-
-    /* tables */
-      table
-      {
-          border-collapse   : collapse; /* no spacing between cell borders */
-          margin            : auto; /* center horizontally */
-          margin-top        : 1em;
-      }
-
-      th,
-      td
-      {
-          padding           : 1em;
-          border            : 1px solid #bbb;
-          vertical-align    : top;
-          background-color  : #FFFFFF;
-      }
-
-      th
-      {
-          background-color  : #F5F5F5;
-      }
-
-    /* document structure */
-      #header
-      {
-          text-align        : center;
-      }
-
-      #header > .title
-      {
-          font-size         : 2.25em;
-      }
-
-      #header > .subtitle
-      {
-      }
-
-      #header > .authors
-      {
-          margin-top        : 1.625em;
-          margin-bottom     : -0.25em;
-      }
-
-      #header > .date
-      {
-      }
-
-      .logo,
-      .header_outside_above,
-      #header,
-      .header_outside_below
-      {
-          margin-bottom     : 5em;
-      }
-
-      .footer_outside_above,
-      #footer,
-      .footer_outside_below
-      {
-          margin-top        : 5em;
-      }
-
-      #header .header_inside_above,
-      #footer .footer_inside_above
-      {
-          margin-bottom     : 4em;
-      }
-
-      #header .header_inside_below,
-      #footer .footer_inside_below
-      {
-          margin-top        : 4em;
-      }
-
-      #Abstract
-      {
-          margin-bottom     : 5em;
-      }
-
-      #toc li
-      {
-          list-style-type   : none;
-      }
-
-      #toc li ul
-      {
-          padding-bottom    : 1em;
-          border-left       : thick solid #F5F5F5;
-      }
-
-      #toc li ul:hover
-      {
-          border-color      : #DCDCDC;
-      }
-
-      #toc > ul
-      {
-          padding-left      : 1em;
-      }
-
-      #bib
-      {
-          margin-top        : 5em;
-      }
-
-      #footer
-      {
-          border-top        : thick dotted #DCDCDC;
-          padding-top       : 1em;
-          text-align        : center;
-      }
-
-      #footer-credits
-      {
-          margin-top        : 2em;
-          margin-bottom     : 2em;
-      }
-
-    /* document nodes */
-      .part    > .title,
-      .chapter > .title
-      {
-          padding-bottom    : 0.5em;
-      }
-
-      .part    > .title > big,
-      .chapter > .title > big
-      {
-          display           : block;
-          margin-top        : 0.25em;
-      }
-
-      .paragraph > .title,
-      .tip       > .title,
-      .note      > .title,
-      .caution   > .title,
-      .warning   > .title,
-      .important > .title,
-      .figure    > .title,
-      .table     > .title,
-      .example   > .title,
-      .equation  > .title,
-      .procedure > .title
-      {
-          font-size         : large;
-          margin-top        : 2em;
-      }
-
-      .tip      ,
-      .note     ,
-      .caution  ,
-      .warning  ,
-      .important,
-      .figure   ,
-      .table    ,
-      .example  ,
-      .equation ,
-      .procedure
-      {
-          margin            : 3em;
-      }
-
-      .tip       .nav,
-      .note      .nav,
-      .caution   .nav,
-      .warning   .nav,
-      .important .nav,
-      .figure    .nav,
-      .table     .nav,
-      .example   .nav,
-      .equation  .nav,
-      .procedure .nav
-      {
-          margin-right      : -3em;
-      }
-
-      .tip       > .content,
-      .note      > .content,
-      .caution   > .content,
-      .warning   > .content,
-      .important > .content,
-      .figure    > .content,
-      .table     > .content,
-      .example   > .content,
-      .equation  > .content,
-      .procedure > .content
-      {
-          min-height        : 48px; /* 48px is height of icon */
-      }
-
-      .tip       > .content > .icon,
-      .note      > .content > .icon,
-      .caution   > .content > .icon,
-      .warning   > .content > .icon,
-      .important > .content > .icon
-      {
-          float             : left;
-          margin            : 0 1em 1em 0; /* top right bottom left */
-      }
-
-      .figure > .title
-      {
-          text-align        : center;
-      }
-
-      .figure > .content img
-      {
-          display           : block;
-          margin            : auto;
-      }
+        text-align: center
+
+      .content img
+        display: block
+        margin: auto
+
 
 - screen: |
-    /* general */
-      body
-      {
-          margin            : 0;
-          padding           : 0.5em;
-          background-color  : #FFFFFF;
-      }
-
-      /* the actual content of the <body> element */
-      #body
-      {
-          margin            : auto;
-          max-width         : 38em;
-      }
-
-    /* source code */
-      tt
-      {
-          background-color  : #F0F8FF;
-      }
-
-      pre,
-      code.para
-      {
-          cursor            : text;
-          line-height       : normal;
-          border            : 1px solid #b1d827;
-          background-color  : #F5FFDF;
-          padding           : 1em;
-
-          /* fit container to content; no overflow! */
-          display           : inline-block;
-          margin            : 0;
-          min-width         : 92.5%;
-      }
-
-      /* output of the syntax coloring library */
-      code.para,
-      pre.para
-      {
-          background-color  : #FFFFE8;
-          border-color      : #EEDD88;
-      }
-
-    /* hyperlinks */
-      a
-      {
-          text-decoration   : none;
-      }
-
-      a:hover
-      {
-          text-decoration   : underline;
-      }
-
-      a:link
-      {
-          color             : #0038E1; /* maximum saturation of RoyalBlue */
-      }
-
-      a:visited
-      {
-          color             : #800080;
-      }
-
-      #toc a:target,
-      #lof a:target,
-      #nav a:target
-      {
-          background          : <%= ICON_BY_NAME['here_frag'].data_css %>;
-          background-position : center right;
-          background-repeat   : no-repeat;
-          padding-right       : 20px;
-      }
-
-    /* document structure */
-      /* mini navigation menu beside every block node */
-      .nav
-      {
-          float             : right;
-          margin-top        : -0.25em;
-      }
-
-      .nav > a > img
-      {
-          border-top        : thick solid #FFFFFF;
-      }
-
-      .nav > a > img:hover
-      {
-          border-top        : thick solid #FA8072;
-      }
-
-      /* global navigation menu at the top of the page */
-      #nav
-      {
-          margin-bottom     : 4em;
-          text-align        : center;
-      }
+    body
+      margin: 0
+      padding: 0.5em
+      background-color: #FFFFFF
+
+
+    #__body__, #__abstract__ > .title, #__toc__ > .title, .part > .title, .chapter > .title, .section > .title, .paragraph > .title, #__bib__ > .title
+      display: none
+
+
+    .tabs
+      // otherwise .nav becomes obscured by the tabs
+      clear: both
+
+
+    tt
+      background-color: #F0F8FF
+
+
+    pre
+      cursor: text
+      line-height: normal
+      border: 1px solid #b1d827
+      background-color: #F5FFDF
+      padding: 1em
+
+      // fit container to content; no overflow!
+      display: inline-block
+      margin: 0
+      min-width: 92.5%
+
+
+    // output of the syntax coloring library
+    code.para
+      cursor: text
+      line-height: normal
+      border: 1px solid #b1d827
+      background-color: #F5FFDF
+      padding: 1em
+      display: inline-block
+      margin: 0
+      min-width: 92.5%
+      background-color: #FFFFE8
+      border-color: #EEDD88
+
+
+    pre.para
+      background-color: #FFFFE8
+      border-color: #EEDD88
+
+
+    a
+      text-decoration: none
+
+      &:hover
+        text-decoration: underline
+
+      &:link
+        // maximum saturation of RoyalBlue
+        color: #0038E1
+
+      &:visited
+        color: #800080
+
+
+    #__toc__ a:target, #__lof__ a:target
+      background: <%= ICON_BY_NAME['here_frag'].data_css %>
+      background-position: center right
+      background-repeat: no-repeat
+      padding-right: 20px
+
+
+    #__header__ >
+      .logo
+        float: left
+        margin-right: 1em
+        margin-top: 0.25em
+
+        img
+          max-height: 4em
+          max-width: 4em
+
+      .title_and_subtitle
+        float: left
+        margin-right: 1.5em
+
+        .title
+          margin-top: 0.25em
+
+      .authors_and_date
+        text-align: right
+
+        .authors, .date
+          margin-top: 0
+          margin-bottom: 0.25em
+
+        .date
+          font-weight: lighter
+
+
+    .nav
+      float: right
+
+      > a > img
+        border-top: thick solid #FFFFFF
+
+        &:hover
+          border-top: thick solid #FA8072
+
+
+    #__nfo__ > table td:first-child, #__nfo__ > .validations
+      text-align: center
+
 
 - print: |
-    /* source code */
-      tt
-      {
-          font-weight       : normal;
-      }
-
-      pre
-      {
-          border            : none;
-      }
-
-    /* headings */
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6
-      {
-          font-weight       : normal;
-          clear             : both;
-      }
-
-    /* hyperlinks */
-      /* blend all hyperlinks with normal text */
-      a:link,
-      a:visited
-      {
-          color             : #000000;
-          text-decoration   : none;
-      }
-
-      /* emphasize external and cross-reference hyperlinks */
-      a[href]:not([href^="#"]):link,
-      a[href]:not([href^="#"]):visited,
-      a.xref[title]:link,
-      a.xref[title]:visited
-      {
-          color             : #0000FF;
-          text-decoration   : underline;
-          font-weight       : bolder;
-      }
-
-      /* show URL of destination for external hyperlinks */
-      a[href]:not([href^="#"]):after
-      {
-          content           : " " attr(href);
-          font-family       : <%= @format['fonts']['monospace'] %>;
-      }
-
-      /* show name of destination for cross-references */
-      a.xref[title]:after
-      {
-          content           : " " attr(title);
-      }
-
-      a:after
-      {
-          font-weight       : normal;
-          font-size         : smaller;
-      }
-
-    /* document structure */
-      #nav,
-      .nav,
-      #lof
-      {
-          display           : none;
-      }
-
-      #toc,
-      .part,
-      .chapter,
-      #bib
-      {
-          page-break-before : always;
-      }
-
-    /* document nodes */
-      .part    > .title > big,
-      .chapter > .title > big
-      {
-          padding-bottom    : 0.5em;
-      }
+    tt
+      font-weight: normal
+
+
+    pre
+      border: none
+
+
+    h1, h2, h3, h4, h5, h6
+      font-weight: normal
+      clear: both
+
+
+    =emphasize_hyperlinks
+      color: #0000FF
+      text-decoration: underline
+      font-weight: bolder
+
+    a
+      // blend all hyperlinks with normal text
+      &:link, &:visited
+        color: #000000
+        text-decoration: none
+
+      // emphasize external hyperlinks
+      &[href]:not([href^="#"])
+        &:link, &:visited
+          +emphasize_hyperlinks
+
+      // emphasize cross-reference hyperlinks
+      &.xref[title]
+        &:link, &:visited
+          +emphasize_hyperlinks
+
+      // show URL of destination for external hyperlinks
+      &[href]:not([href^="#"]):after
+        content: " " attr(href)
+        font-family: <%= @format['fonts']['monospace'] %>
+
+      // show name of destination for cross-references
+      &.xref[title]:after
+        content: " " attr(title)
+
+      &:after
+        font-weight: normal
+        font-size: smaller
+
+
+    .tabs > ul, .nav, #__lof__, #__nfo__ > .validations
+      display: none
+
+
+    #__toc__, .part, .chapter, #__bib__
+      page-break-before: always
+
+
+    #__header__, #__footer__
+      text-align: center
+
+
+    #__header__ > .authors
+      margin-top: 1.625em
+      margin-bottom: -0.25em
+
+
+    .header_outside_above, #__header__, .header_outside_below, .logo
+      margin-bottom: 5em
+
+
+    .footer_outside_above, #__footer__, .footer_outside_below, #__bib__, #__nfo__
+      margin-top: 5em
+
+
+    #__header__ .header_inside_above, #__footer__ .footer_inside_above
+      margin-bottom: 4em
+
+
+    #__header__ .header_inside_below, #__footer__ .footer_inside_below
+      margin-top: 4em
+
+
+    .part > .title > big, .chapter > .title > big
+      padding-bottom: 0.5em
+