1. minor changes to CSS

2. arrows added to walkthrough navigation
3. added new files to the list of sources
4. extra div-s added to metasytnax for the sake of validity
5. hyperlink added to the reference index page
6. changed the note about fastcgi being the only supported inface
7. flushing added to calendar for a bit of performance analysis.

7 files changed, 131 insertions, 90 deletions

diff --git a/htdocs/ancestry/layout.chtml b/htdocs/ancestry/layout.chtml
index df34ad7..4551d04 100644
--- a/htdocs/ancestry/layout.chtml
+++ b/htdocs/ancestry/layout.chtml
@@ -13,28 +13,28 @@
 %%var std::string urlNext;
 %%var std::string descNext;
 %%var std::string titleNext;
 <%constructor>
  if(strstr(PACKAGE_STRING,"svn"))
   b_svn = true;
 </%constructor>
 <%method void prevnext() %>
 % if(urlPrev.empty() && urlNext.empty()) return;
 % if(descPrev.empty() && descNext.empty()) return;
  <div class="prevnext">
 % if(!(urlPrev.empty() || descPrev.empty())) {
-   <a class="prevnext-prev" href="<% urlPrev %>" title="<% sitecing::html_escape(titlePrev.empty()?descPrev:titlePrev) %>"><% sitecing::html_escape(descPrev) %></a>
+   <a class="prevnext-prev" href="<% urlPrev %>" title="<% sitecing::html_escape(titlePrev.empty()?descPrev:titlePrev) %>">&#9668;&nbsp;&nbsp;<% sitecing::html_escape(descPrev) %></a>
 % }
 % if(!(urlNext.empty() || descNext.empty())) {
-   <a class="prevnext-next" href="<% urlNext %>" title="<% sitecing::html_escape(titleNext.empty()?descNext:titleNext) %>"><% sitecing::html_escape(descNext) %></a>
+   <a class="prevnext-next" href="<% urlNext %>" title="<% sitecing::html_escape(titleNext.empty()?descNext:titleNext) %>"><% sitecing::html_escape(descNext) %>&nbsp;&nbsp;&#9658;</a>
 % }
  </div>
 </%method>
 <%method void body() %>
  <div id="content">
   <%code>
    if(!access(WEB_RUN_ROOT "/conf/banner_top",R_OK)) {
     pass_file_through(WEB_RUN_ROOT "/conf/banner_top");
    }
    prevnext();
    content();
    if(b_strict && !access(WEB_RUN_ROOT "/conf/banner_bottom",R_OK)) {
diff --git a/htdocs/ancestry/sources.chtml b/htdocs/ancestry/sources.chtml
index 35ced64..1d9fcc9 100644
--- a/htdocs/ancestry/sources.chtml
+++ b/htdocs/ancestry/sources.chtml
@@ -51,24 +51,28 @@
      { "htdocs/exceptions/development", "erroneous.h", "the file to include for more errors" },
      { "htdocs/exceptions/development", "compile.html", "compile-time exception handler output" },
     { 0,0,0 },
     { "htdocs/exceptions/production", 0, "production-mode exceptions samples" },
      { "htdocs/exceptions/production", ".htaccess", "apache access control file" },
      { "htdocs/exceptions/production", ".scrc", "site-C-ing local configuration" },
      { "htdocs/exceptions/production", "preprocess.chtml", "the file that can not be preprocessed" },
      { "htdocs/exceptions/production", "runtime.chtml", "exception thrown at runtime" },
      { "htdocs/exceptions/production", "compile.chtml", "the file that can not be compiled" },
      { "htdocs/exceptions/production", "erroneous.h", "the file to include for more errors" },
      { "htdocs/exceptions/production", "compile.html", "compile-time exception handler output" },
     { 0,0,0 },
+    { "htdocs/quickref", 0, "reference documentation" },
+     { "htdocs/quickref", "index.chtml", "the overview" },
+     { "htdocs/quickref", "metasyntax.chtml", "component meta syntax quick reference" },
+    { 0,0,0 },
    { 0,0,0 },
    { "htdocs/handlers", 0, "exception handlers" },
     { "htdocs/handlers", ".htaccess", "apache access-control file" },
     { "htdocs/handlers", "exception_dev", "development mode exception handler" },
     { "htdocs/handlers", "exception_prod", "production mode exception handler" },
    { 0,0,0 },
    { "htdocs/ancestry", 0, "base components to build the rest upon" },
     { "htdocs/ancestry", ".htaccess", "apache access control file" },
     { "htdocs/ancestry", "page.chtml", "the xhtml skeleton" },
     { "htdocs/ancestry", "layout.chtml", "the layout for the most pages" },
     { "htdocs/ancestry", "sources.chtml", "the list of files for source browser" },
    { 0,0,0 },
diff --git a/htdocs/examples/calendar.chtml b/htdocs/examples/calendar.chtml
index eea20cb..85aa7ba 100644
--- a/htdocs/examples/calendar.chtml
+++ b/htdocs/examples/calendar.chtml
@@ -1,18 +1,19 @@
 <%impl>
  /* vim:set ft=sitecing: */
  #include <time.h>
  #include <konforka/exception.h>
 </%impl>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+% __SCIF->flush();
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
   <title>really simple page</title>
   <style type="text/css">
    table.calendar {
     font-family: monospace;
    }
    table.calendar th.heading {
     border: double blue 3px;
    }
    table.calendar td {
     text-align: right;
diff --git a/htdocs/index.chtml b/htdocs/index.chtml
index e8cedda..20d34c2 100644
--- a/htdocs/index.chtml
+++ b/htdocs/index.chtml
@@ -24,26 +24,28 @@
   want to pass the <code>--with-vhostname</code> option to configure to name
   the apache virtual host.
  </p>
  <p>
   The configure script will generate the apache vhost configuration for you,
   which you can <code>Include</code> in the main apache configuration file.
  </p>
  <p class="note">
   Note, that the configuration is tailored for apache 2.x. It is no problem to
   get it working with apache 1.3.x, although I haven't tried and so I am not
   sure if it will run out of the box (your patches are <a
   href="mailto:sitecing-patches@klever.net">welcome</a>). Also note that you
-  will need <a href="http://fastcgi.com/">mod_fastcgi</a> apache module, which
-  is the only CGI-interface supported by the <em>site-C-ing</em> engine at the
-  moment.
+  may need <a href="http://fastcgi.com/">mod_fastcgi</a> apache module,
+  although now that fastcgi is not the only supported interface you may get the
+  thing running with 'plain' CGI with a bit of tweaking. Again, if you got it
+  working without breaking the fastcgi part your patches are <a
+  href="mailto:sitecing-patches@klever.net">welcome</a>.
  </p>
  <p>
   Once you get it all done you will want to restart your apache and start the
   <em>site-C-ing</em> fastcgi server by issuing the <code>make restart</code>
   command.
  </p>
  <p>
   Before you download it, you may wish to <a href="/sources" title="source
   browser">examine the sources</a> to learn more about how it is done.
  </p>
 </%method>
diff --git a/htdocs/quickref/index.chtml b/htdocs/quickref/index.chtml
index 20ef217..d139190 100644
--- a/htdocs/quickref/index.chtml
+++ b/htdocs/quickref/index.chtml
@@ -2,15 +2,16 @@
 %%derive layout = "/ancestry/layout.chtml";
 <%constructor>
  PN_PREV("/exceptions/runtime","runtime","runtime exceptions");
  PN_NEXT("/quickref/metasyntax","syntax","meta syntax");
 </%constructor>
 <%codemethod string title() %>
  return "quick reference";
 </%codemethod>
 <%method void content() %>
  <h1>site-C-ing quick reference</h1>
  <p>
   I am hoping to put together some quick reference documentation here. For now,
-  I am adding the component meta-syntax quick reference.
+  I am adding the <a href="/quickref/metasyntax">component meta-syntax quick
+  reference</a>.
  </p>
 </%method>
diff --git a/htdocs/quickref/metasyntax.chtml b/htdocs/quickref/metasyntax.chtml
index a63f596..4efc37c 100644
--- a/htdocs/quickref/metasyntax.chtml
+++ b/htdocs/quickref/metasyntax.chtml
@@ -34,311 +34,338 @@
 
 % /* % */
   <dt>
    <a id="qr__line" name="qr__line" title="line of code">
     <code>% <kbd>line of code</kbd></code>
    </a>
   </dt>
   <dd>
    <p>
     Break out into the code mode for just one line.
    </p>
    <blockquote class="qr_sample">
-    &nbsp;&lt;body&gt;<br/>
-    <em><a href="#qr__line" title="% description">%</a> for(int t=0;t&lt;10;t++) {<br/></em>
-    &nbsp;&nbsp;&nbsp;Here is the way we count.&lt;br/&gt;<br/>
-    &nbsp;&nbsp;&nbsp;Just saying out loud: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;br/&gt;<br/>
-    <em><a href="#qr__line" title="% description">%</a> }<br/></em>
-    &nbsp;&lt;/body&gt;
+    <div>
+     &nbsp;&lt;body&gt;<br/>
+     &nbsp;&nbsp;Here is the way we count.&lt;br/&gt;<br/>
+     <em><a href="#qr__line" title="% description">%</a> for(int t=0;t&lt;10;t++) {<br/></em>
+     &nbsp;&nbsp;&nbsp;Just saying out loud: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;br/&gt;<br/>
+     <em><a href="#qr__line" title="% description">%</a> }<br/></em>
+     &nbsp;&lt;/body&gt;
+    </div>
    </blockquote>
   </dd>
 
 % /* <% %> */
   <dt>
    <a id="qr__inline" name="qr__inline" title="output expression">
     <code>&lt;% <kbd>expression</kbd> %&gt;</code>
    </a>
   </dt>
   <dd>
    <p>
     &lt;&lt; <kbd>expression</kbd> into output stream (think c++).
    </p>
    <blockquote class="qr_sample">
-    <a href="#qr__line" title="% description">%</a> for(int t=0;t&lt;10;t++) {<br/>
-    &nbsp;&nbsp;&nbsp;Here is the way we count.&lt;br/&gt;<br/>
-    <em>&nbsp;&nbsp;&nbsp;Just saying out loud: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;br/&gt;<br/></em>
-    <a href="#qr__line" title="% description">%</a> }
+    <div>
+     &nbsp;&nbsp;Here is the way we count.&lt;br/&gt;<br/>
+     <a href="#qr__line" title="% description">%</a> for(int t=0;t&lt;10;t++) {<br/>
+     <em>&nbsp;&nbsp;&nbsp;Just saying out loud: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;br/&gt;<br/></em>
+     <a href="#qr__line" title="% description">%</a> }
+    </div>
    </blockquote>
   </dd>
 
 % /* %code */
   <dt>
    <a id="qr__code" name="qr__code" title="switching to code mode">
     <code>
      &lt;%code&gt; <kbd>...</kbd> &lt;/%code&gt;
     </code>
    </a>
   </dt>
   <dd>
-    Escape from the output mode to code mode. Opposite to <code><a href="#qr__output" title="&lt;%output&gt; description">&lt;%output&gt;</a></code>. Roughly the same as <code><a href="#qr__output" title="&lt;%output&gt; description">&lt;/%output&gt;</a> <kbd>...</kbd> <a href="#qr__output" title="&lt;%output&gt; description">&lt;%output&gt;</a></code> (note the reverse order), but more self-explanatory and applies to more cases.
+    <p>
+     Escape from the output mode to code mode. Opposite to <code><a href="#qr__output" title="&lt;%output&gt; description">&lt;%output&gt;</a></code>. Roughly the same as <code><a href="#qr__output" title="&lt;%output&gt; description">&lt;/%output&gt;</a> <kbd>...</kbd> <a href="#qr__output" title="&lt;%output&gt; description">&lt;%output&gt;</a></code> (note the reverse order), but more self-explanatory and applies to more cases.
    </p>
    <blockquote class="qr_sample">
-    &lt;body&gt;<br/>
-    <em>&nbsp;<a href="#qr__code" title="&lt;%code&gt; descrption">&lt;%code&gt;</a><br/></em>
-    &nbsp;&nbsp;for(int t=0;t&lt;10;t++) {<br/>
-    &nbsp;&nbsp;&nbsp;<a href="#qr__output" title="&lt;%output&gt; descrption">&lt;%output&gt;</a><br/>
-    &nbsp;&nbsp;&nbsp;&nbsp;Here is the way we count.&lt;br/&gt;<br/>
-    &nbsp;&nbsp;&nbsp;&nbsp;Just saying out loud: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;br/&gt;<br/>
-    &nbsp;&nbsp;&nbsp;<a href="#qr__output" title="&lt;%output&gt; descrption">&lt;/%output&gt;</a><br/>
-    <em>&nbsp;<a href="#qr__code" title="&lt;%code&gt; descrption">&lt;/%code&gt;</a><br/></em>
-    &lt;/body&gt;
+    <div>
+     &lt;body&gt;<br/>
+     <em>&nbsp;<a href="#qr__code" title="&lt;%code&gt; descrption">&lt;%code&gt;</a><br/></em>
+     &nbsp;&nbsp;for(int t=0;t&lt;10;t++) {<br/>
+     &nbsp;&nbsp;&nbsp;<a href="#qr__output" title="&lt;%output&gt; descrption">&lt;%output&gt;</a><br/>
+     &nbsp;&nbsp;&nbsp;&nbsp;Here is the way we count.&lt;br/&gt;<br/>
+     &nbsp;&nbsp;&nbsp;&nbsp;Just saying out loud: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;br/&gt;<br/>
+     &nbsp;&nbsp;&nbsp;<a href="#qr__output" title="&lt;%output&gt; descrption">&lt;/%output&gt;</a><br/>
+     <em>&nbsp;<a href="#qr__code" title="&lt;%code&gt; descrption">&lt;/%code&gt;</a><br/></em>
+     &lt;/body&gt;
+    </div>
    </blockquote>
   </dd>
 
 % /* %codemethod */
   <dt>
    <a id="qr__codemethod" name="qr__codemethod" title="member function definition">
     <code>
      &lt;%codemethod <kbd>return_type_t</kbd> <kbd>member_name</kbd>(<kbd>args,...</kbd>) %&gt;<br/>
      &nbsp;<kbd>code</kbd><br/>
      &lt;/%codemethod&gt;
     </code>
    </a>
   </dt>
   <dd>
    <p>
     Define the member function. Essentially equivalent to <code><a href="#qr__method" title="&lt;%method ... %&gt; description" class="internal">&lt;%method</a> <kbd>...</kbd> <a href="#qr__method" title="&lt;%method ... %&gt; description" class="internal">%&gt;</a><a href="#qr__code" title="&lt;%code&gt; description" class="internal">&lt;%code&gt;</a> <kbd>...</kbd> <a href="#qr__code" title="&lt;%code&gt; description" class="internal">&lt;/%code&gt;</a><a href="#qr__method" title="&lt;%method ... %&gt; description" class="internal">&lt;/%method&gt;</a></code>.
    </p>
    <blockquote class="qr_sample">
-    <em><a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">&lt;%codemethod</a> std::string ua() <a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">%&gt;</a><br/>
-    &nbsp;return __CGI-&gt;get_meta("USER_AGENT");<br/>
-    <a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">&lt;/%codemethod&gt;</a><br/></em>
-    The user agent is: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> ua() <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a><br/>
+    <div>
+     <em><a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">&lt;%codemethod</a> std::string ua() <a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">%&gt;</a><br/>
+     &nbsp;return __CGI-&gt;get_meta("USER_AGENT");<br/>
+     <a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">&lt;/%codemethod&gt;</a><br/></em>
+     The user agent is: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> ua() <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a><br/>
+    </div>
    </blockquote>
   </dd>
 
 % /* %constructor */
   <dt>
    <a id="qr__constructor" name="qr__constructor" title="constructor code">
     <code>
      &lt;%constructor&gt;<br/>
      &nbsp;<kbd>code</kbd><br/>
      &lt;/%constructor&gt;
     </code>
    </a>
   </dt>
   <dd>
    <p>
     Provide the code for constructor.
    </p>
    <blockquote class="qr_sample">
-    <a href="#qr___var" title="%%var description">%%var</a> bool is_msie;<br/>
-    <em><a href="#qr__constructor" title="&lt;%constructor&gt; description">&lt;%constructor&gt;</a><br/>
-    &nbsp;is_msie = (__CGI-&gt;get_meta("USER_AGENT").find("MSIE")!=string::npos);<br/>
-    <a href="#qr__constructor" title="&lt;%constructor&gt; description">&lt;/%constructor&gt;</a><br/></em>
+    <div>
+     <a href="#qr___var" title="%%var description">%%var</a> bool is_msie;<br/>
+     <em><a href="#qr__constructor" title="&lt;%constructor&gt; description">&lt;%constructor&gt;</a><br/>
+     &nbsp;is_msie = (__CGI-&gt;get_meta("USER_AGENT").find("MSIE")!=string::npos);<br/>
+     <a href="#qr__constructor" title="&lt;%constructor&gt; description">&lt;/%constructor&gt;</a><br/></em>
+    </div>
    </blockquote>
   </dd>
 
 % /* %decl / %%decl */
   <dt>
    <a id="qr___decl" name="qr___decl" title="verbatim declaration">
     <code>%%decl <kbd>line of code</kbd></code>
    </a>
   </dt>
   <dt>
    <a id="qr__decl" name="qr__decl" title="verbatim declaration">
     <code>
      &lt;%decl&gt;<br/>
      &nbsp;<kbd>lines of code</kbd><br/>
      &lt;/%decl&gt;
     </code>
    </a>
   </dt>
   <dd>
    <p>
     Put the line(s) of code into the resulting <em>.h</em> file before the
     class declaration.
    </p>
    <blockquote class="qr_sample">
-    <em><a href="#qr___decl" title="%%decl description">%%decl</a> #include &lt;string&gt;<br/></em>
-    <a href="#qr___var" title="%%var description">%%var</a> std::string str = "default"<br/>
-    <em><a href="#qr__decl" title="&lt;%decl&gt; description">&lt;%decl&gt;</a><br/>
-    &nbsp;typedef int integer_t;<br/>
-    <a href="#qr__decl" title="&lt;%decl&gt; description">&lt;/%decl&gt;</a><br/></em>
-    <a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;%method</a> void do_nothing(integer_t input) <a href="#qr__method" title="&lt;%method ... %&gt; description">%&gt;</a><br/>
-    &nbsp;nothing is done<br/>
-    <a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;/%method&gt;</a>
+    <div>
+     <em><a href="#qr___decl" title="%%decl description">%%decl</a> #include &lt;string&gt;<br/></em>
+     <a href="#qr___var" title="%%var description">%%var</a> std::string str = "default"<br/>
+     <em><a href="#qr__decl" title="&lt;%decl&gt; description">&lt;%decl&gt;</a><br/>
+     &nbsp;typedef int integer_t;<br/>
+     <a href="#qr__decl" title="&lt;%decl&gt; description">&lt;/%decl&gt;</a><br/></em>
+     <a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;%method</a> void do_nothing(integer_t input) <a href="#qr__method" title="&lt;%method ... %&gt; description">%&gt;</a><br/>
+     &nbsp;nothing is done<br/>
+     <a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;/%method&gt;</a>
+    </div>
    </blockquote>
   </dd>
 
 % /* %%derive */
   <dt>
    <a id="qr___derive" name="qr___derive" title="base class(es) specification">
     <code>%%derive <kbd>name</kbd> = "<kbd>base-component</kbd>";</code>
    </a>
   </dt>
   <dd>
    <p>
     Inherit what is there to be inherited from the base component specified.
    </p>
    <blockquote class="qr_sample">
-    <em><a href="#qr___derive" title="%%derive description">%%derive</a> pagelayout = "/ancestry/page_layout.chtml";<br/></em>
-    <a href="#qr__line" title="% description">%</a> pagelayout::member_function();
+    <div>
+     <em><a href="#qr___derive" title="%%derive description">%%derive</a> pagelayout = "/ancestry/page_layout.chtml";<br/></em>
+     <a href="#qr__line" title="% description">%</a> pagelayout::member_function();
+    </div>
    </blockquote>
   </dd>
 
 % /* %destructor */
   <dt>
    <a id="qr__destructor" name="qr__destructor" title="destructor code">
     <code>
      &lt;%destructor&gt;<br/>
      &nbsp;<kbd>code</kbd><br/>
      &lt;/%destructor&gt;
     </code>
    </a>
   </dt>
   <dd>
    <p>
     Provide the code for destructor.
    </p>
    <blockquote class="qr_sample">
-    <a href="#qr___var" title="%%var description">%%var</a> type_t *tmp = 0;<br/>
-    <a href="#qr__constructor" title="&lt;%constructor&gt; description">&lt;%constructor&gt;</a><br/>
-    &nbsp;tmp = new type_t(type_t::option_1);<br/>
-    <a href="#qr__constructor" title="&lt;%constructor&gt; description">&lt;/%constructor&gt;</a><br/>
-    <em><a href="#qr__destructor" title="&lt;%destructor&gt; description">&lt;%destructor&gt;</a><br/>
-    &nbsp;delete tmp;<br/>
-    <a href="#qr__destructor" title="&lt;%destructor&gt; description">&lt;/%destructor&gt;</a><br/></em>
+    <div>
+     <a href="#qr___var" title="%%var description">%%var</a> type_t *tmp = 0;<br/>
+     <a href="#qr__constructor" title="&lt;%constructor&gt; description">&lt;%constructor&gt;</a><br/>
+     &nbsp;tmp = new type_t(type_t::option_1);<br/>
+     <a href="#qr__constructor" title="&lt;%constructor&gt; description">&lt;/%constructor&gt;</a><br/>
+     <em><a href="#qr__destructor" title="&lt;%destructor&gt; description">&lt;%destructor&gt;</a><br/>
+     &nbsp;delete tmp;<br/>
+     <a href="#qr__destructor" title="&lt;%destructor&gt; description">&lt;/%destructor&gt;</a><br/></em>
+    </div>
    </blockquote>
   </dd>
 
 % /* %impl / %%impl */
   <dt>
    <a id="qr___impl" name="qr__impl" title="verbatim definition">
     <code>%%impl <kbd>line of code</kbd></code>
    </a>
   </dt>
   <dt>
    <a id="qr__impl" name="qr__impl" title="verbatim definition">
     <code>
      &lt;%impl&gt;<br/>
      &nbsp;<kbd>lines of code</kbd><br/>
      &lt;/%impl&gt;
     </code>
    </a>
   </dt>
   <dd>
    <p>
     Put the line(s) of code into the resulting <em>.cc</em> implementation file
     before any members definitions.
    </p>
    <blockquote class="qr_sample">
-    <em><a href"#qr___impl" title="%%impl description">%%impl</a> #include &lt;string.h&gt;<br/></em>
-    <a href="#qr__method" title="&lt;%method ... %gt; description">&lt;%method</a> void output_if_contains(const char *haystack,const char *needle) <a href="#qr__method" title="&lt;%method ... %gt; description">%&gt;</a><br/>
-    <a href="#qr__line" title="% description">%</a> if(strstr(haystack,needle)) {<br/>
-    &nbsp;&nbsp;&nbsp;<a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> haystack <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a><br/>
-    <a href="#qr__line" title="% description">%</a> }<br/>
-    <a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;/%method&gt;</a><br/>
-    <em><a href="#qr__impl" title="&lt;%impl&gt; description">&lt;%impl&gt;</a><br/>
-    &nbsp;#include &lt;konforka/exception.h&gt;
-    &nbsp;static const char *tokens[] = {<br/>
-    &nbsp;&nbsp;"token 1", "token 2", "token 3"<br/>
-    &nbsp;};<br/>
-    <a href="#qr__impl" title="&lt;%impl&gt; description">&lt;/%impl&gt;</a><br/></em>
-    <a href="#qr__method" title="&lt;%method ... %gt; description">&lt;%method</a> void output_token(int toknum) <a href="#qr__method" title="&lt;%method ... %gt; description">%&gt;</a><br/>
-    &nbsp;<a href="#qr__code" title="&lt;%code&gt; description">&lt;%code&gt;</a><br/>
-    &nbsp;&nbsp;if(toknum&lt;0 || toknum&gt;=(sizeof(tokens)/sizeof(*tokens)))<br/>
-    &nbsp;&nbsp;&nbsp;throw konforka::exception(CODEPOINT,"out of bounds");<br/>
-    &nbsp;<a href="#qr__code" title="&lt;%code&gt; description">&lt;/%code&gt;</a><br/>
-    &nbsp;<a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> tokens[toknum] <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a><br/>
-    <a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;/%method&gt;</a><br/>
+    <div>
+     <em><a href="#qr___impl" title="%%impl description">%%impl</a> #include &lt;string.h&gt;<br/></em>
+     <a href="#qr__method" title="&lt;%method ... %gt; description">&lt;%method</a> void output_if_contains(const char *haystack,const char *needle) <a href="#qr__method" title="&lt;%method ... %gt; description">%&gt;</a><br/>
+     <a href="#qr__line" title="% description">%</a> if(strstr(haystack,needle)) {<br/>
+     &nbsp;&nbsp;&nbsp;<a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> haystack <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a><br/>
+     <a href="#qr__line" title="% description">%</a> }<br/>
+     <a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;/%method&gt;</a><br/>
+     <em><a href="#qr__impl" title="&lt;%impl&gt; description">&lt;%impl&gt;</a><br/>
+     &nbsp;#include &lt;konforka/exception.h&gt;
+     &nbsp;static const char *tokens[] = {<br/>
+     &nbsp;&nbsp;"token 1", "token 2", "token 3"<br/>
+     &nbsp;};<br/>
+     <a href="#qr__impl" title="&lt;%impl&gt; description">&lt;/%impl&gt;</a><br/></em>
+     <a href="#qr__method" title="&lt;%method ... %gt; description">&lt;%method</a> void output_token(int toknum) <a href="#qr__method" title="&lt;%method ... %gt; description">%&gt;</a><br/>
+     &nbsp;<a href="#qr__code" title="&lt;%code&gt; description">&lt;%code&gt;</a><br/>
+     &nbsp;&nbsp;if(toknum&lt;0 || toknum&gt;=(sizeof(tokens)/sizeof(*tokens)))<br/>
+     &nbsp;&nbsp;&nbsp;throw konforka::exception(CODEPOINT,"out of bounds");<br/>
+     &nbsp;<a href="#qr__code" title="&lt;%code&gt; description">&lt;/%code&gt;</a><br/>
+     &nbsp;<a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> tokens[toknum] <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a><br/>
+     <a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;/%method&gt;</a><br/>
+    </div>
    </blockquote>
   </dd>
 
 % /* %method */
   <dt>
    <a id="qr__method" name="qr__method" title="member function definition">
     <code>
      &lt;%method <kbd>return_type_t</kbd> <kbd>member_name</kbd>(<kbd>args,...</kbd>) %&gt;<br/>
      &nbsp;<kbd>code</kbd><br/>
      &lt;/%method&gt;
     </code>
    </a>
   </dt>
   <dd>
    <p>
     Define the member function. Essentially equivalent to <code><a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description" class="internal">&lt;%codemethod</a> <kbd>...</kbd> <a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description" class="internal">%&gt;</a><a href="#qr__output" title="&lt;%output&gt; description" class="internal">&lt;%output&gt;</a> <kbd>...</kbd> <a href="#qr__output" title="&lt;%output&gt; description" class="internal">&lt;/%output&gt;</a><a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description" class="internal">&lt;/%codemethod&gt;</a></code>.
    </p>
    <blockquote class="qr_sample">
-    <em><a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;%method</a> void emphasized(const char *t) <a href="#qr__method" title="&lt;%method ... %&gt; description">%&gt;</a><br/>
-    &nbsp;&lt;em&gt;<a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;/em&gt;<br/>
-    <a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">&lt;/%method&gt;</a><br/></em>
-    <a href="#qr__line" title="% description">%</a> emphasized("emphasized text");
+    <div>
+     <em><a href="#qr__method" title="&lt;%method ... %&gt; description">&lt;%method</a> void emphasized(const char *t) <a href="#qr__method" title="&lt;%method ... %&gt; description">%&gt;</a><br/>
+     &nbsp;&lt;em&gt;<a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;/em&gt;<br/>
+     <a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">&lt;/%method&gt;</a><br/></em>
+     <a href="#qr__line" title="% description">%</a> emphasized("emphasized text");
+    </div>
    </blockquote>
   </dd>
 
 % /* %output */
   <dt>
    <a id="qr__output" name="qr__output" title="switching to output mode">
     <code>
      &lt;%output&gt; <kbd>...</kbd> &lt;/%output&gt;
     </code>
    </a>
   </dt>
   <dd>
    <p>
     Escape from the code mode to output mode. Opposite to <code><a href="#qr__code" title="&lt;%code&gt; description">&lt;%code&gt;</a></code>. Roughly the same as <code><a href="#qr__code" title="&lt;%code&gt; description">&lt;/%code&gt;</a> <kbd>...</kbd> <a href="#qr__code" title="&lt;%code&gt; description">&lt;%code&gt;</a></code> (note the reverse order), but more self-explanatory and applies to more cases.
    </p>
    <blockquote class="qr_sample">
-    <a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">&lt;%codemethod</a> void count() <a href="#qr__codemethod" title="&lt;%codemethod ... &gt; description">%&gt;</a><br/>
-    &nbsp;for(int t=0;t&lt;10;t++) {<br/>
-    <em>&nbsp;&nbsp;<a href="#qr__output" title="&lt;%output&gt; descrption">&lt;%output&gt;</a><br/>
-    &nbsp;&nbsp;&nbsp;Here is the way we count.&lt;br/&gt;<br/>
-    &nbsp;&nbsp;&nbsp;Just saying out loud: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;br/&gt;<br/>
-    &nbsp;&nbsp;<a href="#qr__output" title="&lt;%output&gt; descrption">&lt;/%output&gt;</a><br/></em>
-    <a href="#qr__codemethod" title="&lt;/%codemethod ... %&gt; description">&lt;/%codemethod&gt;</a><br/>
-    <a href="#qr__line" title="% description">%</a> count();
+    <div>
+     <a href="#qr__codemethod" title="&lt;%codemethod ... %&gt; description">&lt;%codemethod</a> void count() <a href="#qr__codemethod" title="&lt;%codemethod ... &gt; description">%&gt;</a><br/>
+     &nbsp;for(int t=0;t&lt;10;t++) {<br/>
+     <em>&nbsp;&nbsp;<a href="#qr__output" title="&lt;%output&gt; descrption">&lt;%output&gt;</a><br/>
+     &nbsp;&nbsp;&nbsp;Here is the way we count.&lt;br/&gt;<br/>
+     &nbsp;&nbsp;&nbsp;Just saying out loud: <a href="#qr__inline" title="&lt;% ... %&gt; description">&lt;%</a> t <a href="#qr__inline" title="&lt;% ... %&gt; description">%&gt;</a>&lt;br/&gt;<br/>
+     &nbsp;&nbsp;<a href="#qr__output" title="&lt;%output&gt; descrption">&lt;/%output&gt;</a><br/></em>
+     <a href="#qr__codemethod" title="&lt;/%codemethod ... %&gt; description">&lt;/%codemethod&gt;</a><br/>
+     <a href="#qr__line" title="% description">%</a> count();
+    </div>
    </blockquote>
   </dd>
 
 % /* %%pragma */
   <dt>
    <a id="qr___pragma" name="qr___pragma" title="pragma">
     <code>
      %%pragma <kbd>pragma_name</kbd><br/>
      %%pragma <kbd>pragma_name</kbd>=<kbd>pragma_value</kbd>
     </code>
    </a>
   </dt>
   <dd>
    <p>provide pseudo instructions to the preprocessor. At this time only pragma
    named <code>main</code> is defined, which instructs preprocessor to discard
    the 'main' member that would be generated for the component and call the
    <code>main</code> member of the named base class.</p>
    <blockquote class="qr_sample">
-    <a href="#qr___derive" title="%%derive description">%%derive</a> pagelayout = "/ancestry/page_layout.chtml";<br/>
-    <em><a href="#qr___pragma" title="%%pragma description">%%pragma</a> main=pagelayout</em>
+    <div>
+     <a href="#qr___derive" title="%%derive description">%%derive</a> pagelayout = "/ancestry/page_layout.chtml";<br/>
+     <em><a href="#qr___pragma" title="%%pragma description">%%pragma</a> main=pagelayout</em>
+    </div>
    </blockquote>
   </dd>
 
 % /* %%var */
   <dt>
    <a id="qr___var" name="qr___var" title="member variable declaration">
-    <code>%%var <kbd>type_t</kbd> <kbd>varname</kbd>;<br/>
-    <code>%%var <kbd>type_t</kbd> <kbd>varname</kbd> = <kbd>initalizer</kbd>;<br/>
+    <code>%%var <kbd>type_t</kbd> <kbd>varname</kbd>;</code><br/>
+    <code>%%var <kbd>type_t</kbd> <kbd>varname</kbd> = <kbd>initalizer</kbd>;</code><br/>
    </a>
   </dt>
   <dd>
    <p>
     Define the member variable with optional default value (suitable for
     putting into the <code>: <kbd>varname</kbd>(<kbd>initializer</kbd>)</code>
     part of the c++ constructor.
    </p>
    <blockquote class="qr_sample">
-    <em><a href="#qr___var" title="%%var description">%%var</a> std::string strval = "default value";<br/>
-    <a href="#qr___var" title="%%var description">%%var</a> int usecount = 0;<br/>
-    <a href="#qr___var" title="%%var description">%%var</a> int whatnot;</em>
+    <div>
+     <em><a href="#qr___var" title="%%var description">%%var</a> std::string strval = "default value";<br/>
+     <a href="#qr___var" title="%%var description">%%var</a> int usecount = 0;<br/>
+     <a href="#qr___var" title="%%var description">%%var</a> int whatnot;</em>
+    </div>
    </blockquote>
   </dd>
 
  </dl>
 </%method>
diff --git a/htdocs/style.css b/htdocs/style.css
index 96e4c59..28aa8df 100644
--- a/htdocs/style.css
+++ b/htdocs/style.css
@@ -205,52 +205,58 @@ div.prevnext a {
 div.prevnext a.prevnext-prev {
  float: left;
  text-align: left;
 }
 div.prevnext a.prevnext-next {
  float: right;
  text-align: right;
 }
 div.prevnext a:hover {
  background: gray;
  border: black 1px solid;
  color: white;
+ text-decoration: none;
 }
 
 ul.quickref.toc {
  margin: 1em 20%;
  font-size: 90%;
  border: solid 1px gray;
 }
 
 dl.quickref {
  margin: 1ex 1em;
+ overflow: hidden;
 }
 dl.quickref dt {
  margin: 0.4ex;
  padding: 2px 0.5ex;
  background: #e0e0e0;
  display: compact;
 }
 dl.quickref dd {
  margin: 0px 0.4ex 0.4ex 10%;
  padding: 0px;
- border: 1px solid grey;
+ border: 1px solid gray;
+ overflow: hidden;
 }
 dl.quickref code kbd {
  font-style: italic;
  color: #0000c0;
 }
 dl.quickref blockquote {
  background: #ffffc0;
  padding: 4px;
  border: dotted 1px gray;
  font-family: monospace;
+ font-size: 90%;
+ overflow: hidden;
 }
 dl.quickref blockquote em {
  display: block;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  background: #ffc0c0;
+ overflow: hidden;
 }