Added example Slidy slideshow for testing
authorDaniel Davis <ddavis@w3.org>
Tue, 03 Sep 2013 18:25:44 +0900
changeset 13 8447574a799f
parent 9 906e4980b912
child 14 6f60e0c41a8d
Added example Slidy slideshow for testing
example_slidy/graphics/bullet-fold-dim.gif
example_slidy/graphics/bullet-fold.gif
example_slidy/graphics/bullet-nofold-dim.gif
example_slidy/graphics/bullet-unfold-dim.gif
example_slidy/graphics/bullet-unfold.gif
example_slidy/graphics/bullet.png
example_slidy/graphics/fold-dim.gif
example_slidy/graphics/fold.gif
example_slidy/graphics/icon-blue.png
example_slidy/graphics/keys2.jpg
example_slidy/graphics/nofold-dim.gif
example_slidy/graphics/unfold-dim.gif
example_slidy/graphics/unfold.gif
example_slidy/graphics/w3c-logo-slanted.jpg
example_slidy/graphics/w3c-logo-white.gif
example_slidy/graphics/w3c-logo-white.svg
example_slidy/index.html
example_slidy/scripts/slidy.js
example_slidy/scripts/w3c_talks.js
example_slidy/styles/slidy.css
example_slidy/styles/w3c-blue.css
Binary file example_slidy/graphics/bullet-fold-dim.gif has changed
Binary file example_slidy/graphics/bullet-fold.gif has changed
Binary file example_slidy/graphics/bullet-nofold-dim.gif has changed
Binary file example_slidy/graphics/bullet-unfold-dim.gif has changed
Binary file example_slidy/graphics/bullet-unfold.gif has changed
Binary file example_slidy/graphics/bullet.png has changed
Binary file example_slidy/graphics/fold-dim.gif has changed
Binary file example_slidy/graphics/fold.gif has changed
Binary file example_slidy/graphics/icon-blue.png has changed
Binary file example_slidy/graphics/keys2.jpg has changed
Binary file example_slidy/graphics/nofold-dim.gif has changed
Binary file example_slidy/graphics/unfold-dim.gif has changed
Binary file example_slidy/graphics/unfold.gif has changed
Binary file example_slidy/graphics/w3c-logo-slanted.jpg has changed
Binary file example_slidy/graphics/w3c-logo-white.gif has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example_slidy/graphics/w3c-logo-white.svg	Tue Sep 03 18:25:44 2013 +0900
@@ -0,0 +1,14 @@
+<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93 45" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <a xlink:href="http://www.w3.org">
+      <desc>W3C logo</desc>
+          <rect width="103" height="65" fill="#728ec2" x="-10"  y="-10"/>
+        	<g transform="translate(2,2)">
+        		<path fill="#FFFFFF" d="M74.5,.2l0.8,5.1l-3,5.6c0,0-1.13-2.39-3-3.7 c-1.6-1.1-2.6-1.4-4.2-1 c-2.1,0.4-4.4,2.9-5.4,5.9 c-1.2,3.6-1.2,5.4-1.3,7c-0.07,2.6,0.3,4.14,0.3,4.1 s-1.8-3.3-1.8-8.1c0.01-3.5,0.6-6.6,2.2-9.7 c1.41-2.7,3.5-4.4,5.4-4.5 c1.9-0.2,3.4,0.7,4.6,1.7 c1.2,1,2.5,3.3,2.5,3.4z"/>
+        		<path fill="#FFFFFF" d="M74.9,28.8c0,0-1.3,2.3-2.1,3.2c-.8.9-2.3,2.5-4.1,3.3 c-1.8.8-2.7.9-4.5,0.8 c-1.8-.2-3.4-1.2-4-1.6s-2-1.7-2.9-2.9 c-.8-1.2-2.1-3.5-2.1-3.5 s.7,2.4,1.2,3.3c.3.6,1.1,2.3,2.2,3.9c1.1,1.4,3.1,3.9,6.3,4.4 c3.1,.6,5.3-.9,5.8-1.2c.5-.3,1.7-1.3,2.4-2.1 c.7-.8,1.4-1.8,1.8-2.4c.3-.4,0.7-1.3.7-1.3z"/>
+        		<path fill="#FFFFFF" d="M20.7,0.43l7.1,24.1l7.1-24.1 h5.1l-11.7,39.6h-.5l-7.35-24.5l-7.35,24.5h-.5l-11.7-39.6h5.1l7.1,24.1l4.8-16.2l-2.3-7.9z"/>
+        		<path fill="#FFFFFF" d="M54.6,27.3c0,3.6-1,6.6-2.9,9 c-1.9,2.4-4.4,3.7-7.4,3.7 c-2.3,0-4.3-0.7-5.9-2.2 c-1.7-1.4-2.9-3.4-3.8-5.9l4-1.7c.6,1.5,1.4,2.7,2.3,3.5 c1,.9,2.1,1.3,3.4,1.3c1.4,0,2.5-.8,3.5-2.3 c.9-1.5,1.4-3.4,1.4-5.5 c0-2.4-.5-4.2-1.5-5.5 c-1.2-1.5-3-2.3-5.5-2.3h-2v-2.3l6.8-11.8h-8.2l-2.3,3.9 h-1.5v-8.7h19.1v2.4l-7.2,12.5c2.5.8,4.5,2.3,5.8,4.4 c1.3,2.1,2,4.7,1.9,7.5z"/>
+        		<text x="78" y="10" font-size="13" font-family="sans-serif">&#174;</text>
+        	</g>
+     </a>
+</svg>
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example_slidy/index.html	Tue Sep 03 18:25:44 2013 +0900
@@ -0,0 +1,916 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta name="generator" content=
+"HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org" />
+<title>HTML Slidy</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="copyright" content=
+"Copyright &#169; 2005-2013 W3C <sup>&#xAE;</sup> (MIT, ERCIM, Keio, Beihang)" />
+<meta name="duration" content="5" />
+<meta name="hashtag" content="#testevent">
+<meta name="author" content="Bob Smith">
+<meta name="font-size-adjustment" content="-2" />
+<link rel="stylesheet" href="styles/slidy.css" type="text/css" />
+<link rel="stylesheet" href="styles/w3c-blue.css" type="text/css" />
+<script src="scripts/slidy.js" charset="utf-8" type="text/javascript">
+</script>
+</head>
+<body>
+<div class="background"><img alt="" id="head-icon"
+src="graphics/icon-blue.png" /><object id="head-logo"
+data="graphics/w3c-logo-white.svg" type="image/svg+xml"
+title="W3C logo"><a href="http://www.w3.org/"><img
+alt="W3C logo" id="head-logo-fallback"
+src="graphics/w3c-logo-white.gif" /></a></object></div>
+
+<div class="background slanty">
+<img src="graphics/w3c-logo-slanted.jpg" alt="slanted W3C logo" />
+</div>
+<div class="slide cover title">
+  <!-- hidden style graphics to ensure they are saved with other content -->
+  <img class="hidden" src="graphics/bullet.png" alt="" />
+  <img class="hidden" src="graphics/fold.gif" alt="" />
+  <img class="hidden" src="graphics/unfold.gif" alt="" />
+  <img class="hidden" src="graphics/fold-dim.gif" alt="" />
+  <img class="hidden" src="graphics/nofold-dim.gif" alt="" />
+  <img class="hidden" src="graphics/unfold-dim.gif" alt="" />
+  <img class="hidden" src="graphics/bullet-fold.gif" alt="" />
+  <img class="hidden" src="graphics/bullet-unfold.gif" alt="" />
+  <img class="hidden" src="graphics/bullet-fold-dim.gif" alt="" />
+  <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt="" />
+  <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt="" />
+
+<img src="graphics/keys2.jpg" alt="Cover page images (keys)"
+ class="cover" /><br clear="all" />
+<h1>HTML Slidy: Slide Shows in HTML and XHTML</h1>
+
+<p><a href="http://www.w3.org/People/Raggett/">Dave Raggett</a>,
+&lt;<a href="mailto:[email protected]">[email protected]</a>&gt;<br />
+<br />
+<br />
+<br />
+<br /><em>Hit the space bar or swipe left for next slide</em></p>
+</div>
+
+<div class="slide" data-note="Slidy lets you create accessible slide shows with ease">
+<h1>Slide Shows in HTML and XHTML</h1>
+
+<ul>
+<li>You can now create accessible slide shows with ease</li>
+
+<li>Works across browsers and is operated like PowerPoint
+
+<ul>
+<li>Advance to next slide with mouse click, space bar or swipe left</li>
+
+<li>Move forward/backward between slides with Cursor Left,
+Cursor Right, <strong>Pg Up</strong> and <strong>Pg Dn</strong>
+keys, or swipe left or right</li>
+
+<li><strong>Home</strong> key for first slide, <strong>End</strong>
+ key for last slide</li>
+
+<li>The "<strong>C</strong>" key for an automatically generated
+table of contents, or click on "contents" on the toolbar or
+swipe up or down</li>
+
+<li>Function <strong>F11</strong> to go full screen and back</li>
+
+<li>The "<strong>F</strong>" key toggles the display of the footer</li>
+
+<li>The "<strong>A</strong>" key toggles display of current vs all
+slides
+
+<ul>
+<li>Try it now to see how to include notes for handouts (this is
+explained in the notes following this slide)</li>
+</ul>
+</li>
+
+<li>Font sizes automatically adapt to browser window size
+
+<ul>
+<li>use <strong>S</strong> and <strong>B</strong> keys for
+manual control (or &lt; and &gt;, or the <strong>-</strong> and
+<strong>+</strong> keys on the number pad</li>
+<li>Use CSS to set a relative font size on a given slide to make
+the content bigger or smaller than on other slides</li>
+</ul>
+</li>
+
+<li>Switching off JavaScript reveals all slides</li>
+</ul>
+</li>
+
+<li><em>Now move to next slide to see how it works</em></li>
+</ul>
+
+<p class="copyright"><a rel="Copyright" href=
+"http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" shape=
+"rect">Copyright</a> &copy; 2005-2010 <a href="/"><acronym title=
+"World Wide Web Consortium">W3C</acronym></a> <sup>&reg;</sup>
+(<a href="http://www.csail.mit.edu/"><acronym title=
+"Massachusetts Institute of Technology">MIT</acronym></a>, <a href=
+"http://www.ercim.org/"><acronym title=
+"European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
+<a href="http://www.keio.ac.jp/">Keio</a>), All Rights
+Reserved.</p>
+</div>
+
+<div class="handout">
+<p>For handouts, its often useful to include extra notes using a
+div element with class="handout" following each slide, as in:</p>
+
+<pre>
+&lt;div class="slide"&gt; 
+ <em>... your slide content ...</em>
+&lt;/div&gt;
+
+&lt;div class="handout"&gt;
+ <em>... stuff that only appears in the handouts ...</em>
+&lt;/div&gt;
+</pre>
+</div>
+
+<div class="slide" data-note="Each presentation is a single XHTML file">
+<h1>What you need to do</h1>
+
+<ul>
+<li>Each presentation is a single XHTML file</li>
+
+<li>Each slide is enclosed in <em>&lt;div class="slide"&gt; ...
+&lt;/div&gt;</em>
+
+<ul>
+<li>The div element will be created automatically for h1
+elements that are direct children of the body element.</li>
+</ul>
+
+</li>
+
+<li>Use regular markup within each slide</li>
+
+<li>The document head includes two links:
+<ul>
+<li>The slide show style sheet:
+<a href=
+"http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css">http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css</a></li>
+
+<li>The slide show script: <a href=
+"http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js">http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js</a></li>
+
+<li>Or you can link to the compressed version of the script which is about
+one seventh the size, see <a href=
+"http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js.gz">http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js.gz</a></li>
+<li>If you are using XHTML, remember to use &lt;/script&gt; and
+&lt;/style&gt; as per <a
+href="http://www.w3.org/TR/xhtml1/#C_3">Appendix C.3</a></li>
+</ul>
+</li>
+</ul>
+
+<pre>
+&lt;?xml version="1.0" encoding="utf-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt; 
+&lt;head&gt; 
+  &lt;title&gt;Slide Shows in XHTML&lt;/title&gt; 
+  &lt;meta name="copyright" 
+   content="Copyright &amp;#169; 2005 your copyright notice" /&gt; 
+  &lt;link rel="stylesheet" type="text/css" media="screen, projection, print" 
+   href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" /&gt; 
+  &lt;script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js" 
+   charset="utf-8" type="text/javascript"&gt;&lt;/script&gt; 
+  &lt;style type="text/css"&gt; 
+    &lt;!-- your custom style rules --&gt; 
+  &lt;/style&gt; 
+&lt;/head&gt;
+&lt;body&gt;
+   ... your slides marked up in XHTML ...
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<div class="slide" data-note="">
+<h1>To get the W3C Blue Style</h1>
+
+<p>The head element should include the following link to the style
+sheet:</p>
+
+<pre>
+&lt;link rel="stylesheet" type="text/css" media="screen, projection, print"
+ href="http://www.w3.org/Talks/Tools/Slidy2/styles/w3c-blue.css" /&gt; 
+</pre>
+
+<p>The body element's content should start with the following
+markup:</p>
+
+<pre>
+&lt;div class="background"&gt; 
+  &lt;img id="head-icon" alt="graphic with four colored squares"
+    src="http://www.w3.org/Talks/Tools/Slidy2/graphics/icon-blue.png" /&gt; 
+  &lt;object id="head-logo" title="W3C logo" type="image/svg+xml"
+    data="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.svg"&gt;&lt;img
+   src="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.gif" 
+   alt="W3C logo" id="head-logo-fallback" /&gt;&lt;/object&gt;
+&lt;/div&gt; 
+</pre>
+
+<p>This adds the logos on the top left and right corners of the
+slide.</p>
+
+<p>You are of course welcome to create your own slide designs.
+You can provide different styles and backgrounds for
+different slides (more details later).</p>
+
+<p>Use the <em>meta element</em> with <em>name="copyright"</em>
+for use in the slide show footer:</p>
+
+<pre>
+&lt;meta name="copyright" 
+content="Copyright &amp;#169; 2005-2009 W3C (MIT, ERCIM, Keio)" /&gt; 
+</pre>
+</div>
+
+<div class="slide">
+<h1>Upgrading from previous versions of Slidy</h1>
+
+<ul>
+<li>This uses a new version of the HTML Slidy script</li>
+<li>It is designed to work better with other scripts,
+e.g. for UI controls within your slides
+<ul>
+<li>Only adds one global name "w3c_slidy"</li>
+<li>Doesn't interfere with other scripts that set event handers
+such as onload on body element</li>
+</ul>
+</li>
+<li>Works for slides delivered as text/html  and application/xhtml+xml</li>
+<li>New presentation timer feature</li>
+<li>Initial prompt on first slide to help newcomers to Slidy</li>
+<li>Better support for styling slides and printing them</li>
+<li>Requires additional style rules, so new script won't work
+with old presentations without changes to their style sheets
+<ul>
+<li>See <a href="styles/slidy.css">slidy.css</a>, and
+<a href="styles/w3c-blue.css">w3c-blue.css</a></li>
+</ul>
+</li>
+<li>But old presentations will work unchanged as they refer to
+the old script!</li>
+</ul>
+</div>
+
+<div class="slide" data-note="Also possible to use it offline">
+<h1>To use it off-line</h1>
+
+<ul>
+<li>You can download <a href="slidy.zip">slidy.zip</a> and unzip
+it to create a Slidy directory on your machine</li>
+
+<li>If you have cvs access to the W3C site you can check out the Slidy
+directory</li>
+
+<li>Remember to periodically check for updates</li>
+
+<li>You then have two choices:
+
+<ol>
+<li>Use relative URIs depending on your local setup to access the
+appropriate files. Use the same directory structure as on the W3C
+server, ie, ".../2005/Talks/...".</li>
+
+<li>Run a Web server on your machine so that the directory above
+can be accessed via <code>http://localhost/Talks/Tools/Slidy2</code>
+and use the URIs of the form "/Talks/Tools/Slidy2/styles/slidy.css",
+"/Talks/Tools/Slidy2/scripts/slidy.js".</li>
+</ol></li>
+
+<li>In both cases you can then publish your files on the W3C server
+unchanged.</li>
+
+<li><strong>NOTE</strong> Internet Explorer on Windows XP now disables
+scripting for web pages loaded directly from the local file system,
+a work around is to use another browser, e.g. Firefox or Opera</li>
+
+<li>Please feel free to create your own designs, and help us to build
+a gallery of Slidy styles.</li>
+
+<li>My <a href="/2006/02/woa/">Google TechTalk</a> (1st Feb 2006)
+uses a notebook themed style</li>
+</ul>
+</div>
+
+<div class="slide" data-note="Slidy has a neat timer/countdown function">
+<h1>Timing Your Presentation</h1>
+
+<ul>
+<li>Sometimes it is handy to know just how much time you have to
+left to finish your presentation</li>
+<li>To get this feature, add the following markup to the
+content of the head element, replacing 5 by the duration
+of your presentation in minutes
+<pre>&lt;meta name="duration" content="5" /&gt;</pre>
+</li>
+<li>The time left in minutes and seconds is shown in the footer
+next to the slide number</li>
+<li>The clock starts to run when you move away from the first slide</li>
+<li>Moving back to the first slide pauses the clock</li>
+</ul>
+
+
+</div>
+
+<div class="slide slanty">
+<h1>Generate a Title Page</h1>
+
+<p>If you want a separate title page with the W3C blue style, the
+first slide should be as follows:</p>
+
+<pre>
+&lt;div class="slide cover"&gt; 
+ &lt;img src="http://www.w3.org/Talks/Tools/Slidy2/graphics/keys.jpg" 
+  alt="Cover page images (keys)" class="cover" /&gt; 
+ &lt;br clear="all" /&gt;            
+ &lt;h1&gt;HTML Slidy: Slide Shows in XHTML&lt;/h1&gt; 
+ &lt;p&gt;&lt;a href="http://www.w3.org/People/Raggett/"&gt;Dave Raggett,&lt;/a&gt; 
+ &lt;a href="mailto:[email protected]"&gt;[email protected]&lt;/a&gt;&lt;/p&gt; 
+&lt;/div&gt; 
+</pre>
+
+<p>The <a 
+href="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-blue.css">w3c-blue.css</a> 
+style sheet looks for the classes "slide" and "cover" on div
+and img elements using the CSS selector <em>div.slide.cover</em></p>
+
+<p>This technique can be used to assign your slides to different
+classes with a different appearence for each such class.</p>
+
+<p>Slidy also allows you to use different background markup for
+different slides, based upon shared class names, as in "foo" below.
+Backgrounds without additional class names are always shown except
+when the slide isn't transparent. You may need to tweak your
+custom style sheet.</p>
+
+<pre>
+&lt;div class="background foo"&gt;
+   ... background content ...
+&lt;div&gt;
+
+...
+
+&lt;div class="slide foo"&gt;
+   ... slide content ...
+&lt;div&gt;
+</pre>
+</div>
+
+<div class="slide">
+<h1>Incremental display of slide contents</h1>
+
+<p>For incremental display, use class="incremental", for
+instance:</p>
+
+<ul class="incremental">
+<li>First bullet point</li>
+
+<li>Second bullet point</li>
+
+<li>Third bullet point</li>
+</ul>
+
+<p class="incremental">which is marked up as follows:</p>
+
+<pre class="incremental">
+&lt;ul class="incremental"&gt; 
+  &lt;li&gt;First bullet point&lt;/li&gt; 
+  &lt;li&gt;Second bullet point&lt;/li&gt; 
+  &lt;li&gt;Third bullet point&lt;/li&gt; 
+&lt;/ul&gt; 
+ 
+&lt;p class="incremental"&gt;which is marked up as follows:&lt;/p&gt; 
+ 
+&lt;pre class="incremental"&gt; 
+ ... 
+&lt;/pre&gt; 
+</pre>
+
+<div class="footnote">
+<p>An element is incrementally revealed if its parent element has
+class="incremental" or if itself has that attribute. Text nodes are
+not elements and are revealed when their parent element is revealed.
+You can use class="incremental" on any element except for &lt;br /&gt;.
+Use class="non-incremental" to override the effect of setting the
+parent element's class to incremental.</p>
+
+<p>Note: you will see a red asterisk on the left of the toolbar
+when there is still something more to reveal.</p>
+</div>
+</div>
+
+<div class="slide">
+<h1>Create outline lists with hidden content</h1>
+
+<p>You can make your bullet points or numbered list items
+into outlines that you can expand or collapse</p>
+
+<ul class="outline">
+<li>Just add <em>class="outline"</em> to the ul or ol
+element. Click on this list item for more details.
+
+<ul>
+<li>The Slidy script will then treat the list
+as an outline list.</li>
+<li>Clicking on outline list items will expand/collapse
+block-level elements within that list item.</li>
+<li>Click on the above to make this list item
+collapse again.</li>
+</ul>
+</li>
+<li>Users will then see expand/collapse icons as appropriate
+and may click anywhere on the list item to change its state.
+This particular list item can't be expanded or collapsed.</li>
+<li class="expand">Add class="expand" to any li elements that
+you want to start in an expanded state.
+
+<ul>
+<li>By default Slidy hides all the block level elements within the
+outline list items unless you have specified class="expand".</li>
+<li>Such pre-expanded items can be collapsed by clicking on them.</li>
+</ul>
+</li>
+<li>Note expand/collapse icon highlighting requires browser
+support for :hover which isn't supported by IE6.
+
+<ul>
+<li>Microsoft says it will be supported by IE7 along with 
+many fixes for other CSS woes in IE6.</li>
+</ul>
+</li>
+</ul>
+
+<pre>
+&lt;ol class='outline'&gt;
+  &lt;!-- topic 1 starts collapsed --&gt;
+  &lt;li&gt;Topic 1
+    &lt;ol&gt;
+        &lt;li&gt;subtopic a&lt;/li&gt;
+        &lt;li&gt;subtopic b&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;!-- topic 2 starts expanded --&gt;
+  &lt;li class="expand"&gt;Topic 2
+    &lt;ol&gt;
+        &lt;li&gt;subtopic c&lt;/li&gt;
+        &lt;li&gt;subtopic d&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+</div>
+
+<!-- useful info at http://www.howtocreate.co.uk/wrongWithIE/ -->
+<div class="slide">
+<h1>Make your images scale with the browser window size</h1>
+
+<p>For adaptive layout, use percentage widths on images, together
+with CSS positioning:</p>
+
+<ul>
+<li>CSS positioning is simpler and more reliable than using
+tables</li>
+</ul>
+
+<pre>
+&lt;div class="slide"&gt; 
+  &lt;h1&gt;Analysts - "Open standards programming will become 
+  mainstream, focused around VoiceXML"&lt;/h1&gt; 
+  &lt;!-- use CSS positioning and scaling for adaptive layout --&gt; 
+  &lt;img src="trends.png" width="50%" style="float:left" 
+   alt="projected growth of VoiceXML" /&gt; 
+
+  &lt;blockquote style="float:right;width: 35%"&gt; 
+    VoiceXML will dominate the voice environment, due to its 
+    flexibility and eventual multimodal capabilities 
+  &lt;/blockquote&gt;&lt;br clear="all" /&gt; 
+ 
+  &lt;p style="text-align:center"&gt;Source Data Monitor, March 
+  2004&lt;/p&gt; 
+&lt;/div&gt; 
+</pre>
+
+<p>To work around a CSS rendering bug in IE relating
+to margins, you can set display:inline on floated elements.</p>
+</div>
+
+<div class="slide">
+<h1>Incremental display of layered images</h1>
+
+<p>These can be marked up using CSS relative positioning, e.g.</p>
+
+<pre>
+&lt;div class="incremental" 
+ style="margin-left: 4em; position: relative"&gt; 
+  &lt;img src="graphics/face1.gif" alt="face" 
+   style="position: static; vertical-align: bottom"/&gt; 
+  &lt;img src="graphics/face2.gif" alt="eyes" 
+    style="position: absolute; left: 0; top: 0" /&gt; 
+  &lt;img src="graphics/face3.gif" alt="nose" 
+    style="position: absolute; left: 0; top: 0" /&gt; 
+  &lt;img src="graphics/face4.gif" alt="mouth" 
+    style="position: absolute; left: 0; top: 0" /&gt; 
+&lt;/div&gt; 
+</pre>
+
+<p style="font-size: smaller;">You should also use transparent GIF
+images to avoid the IE/Win bug for alpha channel in PNG. A fix is
+expected in IE 7. A <a href=
+"http://www.skyzyx.com/scripts/sleight.php">work around</a> is
+available on skyzyx.com. My thanks to <a href=
+"http://www.webstandards.org/act/acid2/">ACID2</a> for the
+graphics.</p>
+
+<div class="incremental" style=
+"margin-left: 4em; position: relative;"><img src="graphics/face1.gif" alt=
+"face" style="position: static; vertical-align: bottom;" />
+<img src="graphics/face2.gif" alt="eyes" style=
+"position: absolute; left: 0pt; top: 0pt;" /> <img src="graphics/face3.gif"
+alt="nose" style="position: absolute; left: 0pt; top: 0pt;" />
+<img src="graphics/face4.gif" alt="mouth" style=
+"position: absolute; left: 0pt; top: 0pt;" /></div>
+</div>
+
+<div class="slide">
+<h1>How to center content vertically and horizontally</h1>
+<div class="vbox"></div>
+<div class="hbox">
+<p>Within the div element for your slide:</p>
+<pre>
+&lt;div class="vbox"&gt;&lt;/div&gt;
+&lt;div class="hbox"&gt;
+Place the content here
+&lt;/div&gt;
+</pre>
+<p>and style it with the following:</p>
+<pre>
+div.vbox {
+  float: left;
+  height: 40%; width: 50%;
+  margin-top: -220px;
+}
+div.hbox {
+  width:60%;  margin-top: 0;
+  margin-left:auto; margin-right:auto;
+  height: 60%;
+  border:1px solid silver;
+  background:#F0F0F0;
+  overflow:auto;
+  text-align:left;
+  clear:both;
+}
+</pre>
+
+<p>The above styling is included in <a href="styles/w3c-blue.css">w3c-blue.css</a>,
+which is designed to be used with <a href="styles/slidy.css">slidy.css</a>, but you
+are encouraged to develop your own style sheet with your own look and feel.</p>
+</div>
+</div>
+
+<div class="slide">
+<h1>Include SVG Content</h1>
+
+<p>Inclusion of SVG content can be done using the object element,
+for example:</p>
+
+<div style="text-align: center;"><object data="graphics/example.svg" type=
+"image/svg+xml" title="Indian Office logo" height="10%" width=
+"50%"><img src="graphics/example.png" alt="Indian Office logo" width=
+"50%" /></object></div>
+
+<p>has been achieved by:</p>
+
+<pre>
+&lt;object data="graphics/example.svg" type="image/svg+xml" 
+  width="50%" height="10%" title="Indian Office logo"&gt; 
+    &lt;img src="graphics/example.png" width="50%" 
+          alt="Indian Office logo" /&gt; 
+&lt;/object&gt; 
+</pre>
+
+<p>This ensures that the enclosed png is displayed when the browser
+has no plugin installed or can't display SVG directly. Providing
+such a fall back is very important! Don't forget the alt text for
+people who can't see the image.</p>
+
+<p>However, there are caveats, see the next slide!</p>
+</div>
+
+<div class="slide">
+<h1>Caveats with SVG+object</h1>
+
+<p>Adobe has recently withdrawn support for its SVG Viewer, so you are
+recommended to consider <a
+href="http://wiki.svg.org/Viewer_Implementations">alternatives</a>.
+If you still using the Adobe SVG viewer you should be aware of bugs
+when using the it with IE, Namely:</p>
+
+<ul>
+<li>Most modern browsers generally support SVG SVG Tiny 1.1 or better
+natively without the need for a plugin</li>
+
+<li>If you need to use Internet Explorer you are advised to upgrade
+to IE9 which includes native support for SVG.</li>
+
+<li>Patches to Internet Explorer mean that the Adobe SVG Viewer
+version 3.03 no longer works with IE6. You are therefore recommended
+to uninstall version 3.03 and instead install <a
+href="http://www.adobe.com/svg/viewer/install/beta.html">Adobe SVG Viewer
+6.0 preview</a> if this is available to to you.</li>
+
+<li>IE6 makes a <em>copy</em> of the SVG file on the local disc
+when displaying it; but doesn't pass the original URI to the plugin</li>
+
+<li>As a result relative references from within the SVG to external
+resources (scripts, CSS, images, other SVG) will break.</li>
+
+<li>The work around is to use absolute references within your SVG.</li>
+
+<li>On Windows, the Adobe SVG plugin doesn't respect the CSS z-index
+property, and if used on backgrounds will always show through other
+content</li>
+</ul>
+</div>
+
+<div class="slide">
+<h1>Additional Remarks</h1>
+
+<ul>
+<li>Slides are auto-numbered on the slide show footer</li>
+
+<li>You can link into the <a href="#(2)">middle</a> of a slide
+show:
+
+<ul>
+<li>It works out which slide you want and hides the rest</li>
+
+<li>You can even link between slides in the same slide show</li>
+
+<li>Individual sides can be addressed with the syntax #(<em>slide
+number</em>),<br />
+e.g. slide 3 of this presentation is: <a href=
+"#(3)">http://www.w3.org/Talks/Tools/Slidy#(3)</a>
+<ul>
+<li>Previous versions of Slidy used square brackets, which will
+also work.</li>
+</ul></li>
+<li>Note that the browser's back/forward buttons may not work as
+you might expect due to browser problems.</li>
+</ul>
+</li>
+
+<li>Adding "title" to the list of classes for div elements that serve
+as title pages will render the corresponding entry in the table of
+contents in bold italic text (press "C" now for an example)</li>
+
+<li>If your slides have more content than normal, use a <em>meta
+element</em> to request a smaller font
+
+<ul>
+<li>the following requests fonts to be one step smaller than
+the Slidy default for the current window width, and positive
+integers will make the fonts correspondingly larger</li>
+</ul>
+
+<pre>
+&lt;meta name="font-size-adjustment" content="-1" /&gt; 
+</pre>
+
+<ul>
+<li>Slidy uses JavaScript to dynamically set the font size on the
+body element, but it is okay to specify relative font changes on
+other elements within your own style sheet, e.g.</li>
+</ul>
+<pre>div.slide.large { font-size: 200% }</pre>
+</li>
+
+<li>You are encouraged to ensure your markup is valid. <a href=
+"http://www.w3.org/People/Raggett/tidy/">HTML Tidy</a> can be used
+to find and correct common markup problems</li>
+
+<li>The slide show script and style sheet can be used freely under
+W3C's <a href=
+"http://www.w3.org/Consortium/Legal/copyright-software">software
+licensing</a> and <a href=
+"http://www.w3.org/Consortium/Legal/copyright-documents">document
+use</a> policies</li>
+<li>At <a href="http://xtech06.usefulinc.com/">XTech2006</a>
+I gave this <a href="http://www.w3.org/2006/05/Slidy-XTech/">presentation</a>
+on Slidy
+(<a href="http://www.w3.org/2006/05/Slidy-XTech/slidy-xtech06-dsr.pdf">Paper</a>).</li>
+</ul>
+</div>
+
+<div class="slide">
+<h1>Localization and automatic translation</h1>
+
+<p>Slidy now includes support for localization</p>
+
+    "es":this.strings_es,
+    "ca":this.strings_ca,
+    "cs":this.strings_cs,
+    "nl":this.strings_nl,
+    "de":this.strings_de,
+    "pl":this.strings_pl,
+    "fr":this.strings_fr,
+    "hu":this.strings_hu,
+    "it":this.strings_it,
+    "el":this.strings_el,
+    "jp":this.strings_ja,
+    "zh":this.strings_zh,
+    "ru":this.strings_ru,
+    "sv":this.strings_sv
+
+<ul>
+<li>The tool bar is localized according to the language of the presentation</li>
+<li>This is taken from the xml:lang or lang attributes on the html element</li>
+<li>The <a href="http://www.w3.org/Talks/Tools/Slidy2/help/help.html">help file</a> is
+selected based upon your browser's language preferences</li>
+<li>As of 29th July 2010, the languages supported are: English,
+Spanish, Catalonian, Czech, Dutch, German, Polish, French,
+Hungarian, Italian, Greek, Japanese, Chinese, Russian and
+Swedish</li>
+<li>If you would like to contribute localizations for other languages,
+please get in touch with Dave Raggett &lt;[email protected]&gt;</li>
+<li>The following illustrates what was used for Spanish</li>
+</ul>
+<pre>
+// for each language there is an associative array
+  strings_es: {
+    "slide":"pág.",
+    "help?":"Ayuda",
+    "contents?":"Índice",
+    "table of contents":"tabla de contenidos",
+    "Table of Contents":"Tabla de Contenidos",
+    "restart presentation":"Reiniciar presentación",
+    "restart?":"Inicio"
+  },
+  help_es:
+    "Utilice el ratón, barra espaciadora, teclas Izda/Dcha, " +
+    "o Re pág y Av pág. Use S y B para cambiar el tamaño de fuente.",
+</pre>
+
+<p><strong>Note:</strong> Slidy now works with <a 
+href="http://translate.google.com/translate?js=n&amp;prev=_t&amp;hl=en&amp;ie=UTF-8&amp;u=http%3A%2F%2Fwww.w3.org%2FTalks%2FTools%2FSlidy2%2F&amp;sl=en&amp;tl=fr&amp;history_state0=">current slides translated into French</a>. Use
+right mouse button to open frame without Google header. To disable
+automatic translation of the content of particular elements add
+<code>class="notranslate"</code>, see <a href="http://googlewebmastercentral.blogspot.com/2008/10/helping-you-break-language-barrier.html">breaking the language barrier</a>.</p>
+</div>
+
+<div class="slide">
+<h1>Future Plans</h1>
+
+<p>Recent additions have included a table of contents, and a way to
+hide and reveal content in the spirit of outline lists. The
+script has been rewritten to make it easier to combine with other
+scripts, e.g. for UI controls, and support swipes for navigation on
+touch screen devices. Further work is anticipated on the
+following:</p>
+
+<ul>
+<li>Collecting a gallery of good looking slide themes
+<ul>
+<li>Opportunities for graphics designers!</li>
+</ul>
+</li>
+<li>Bob Ferris has worked on <a
+href="https://github.com/zazi/slidy_tud/blob/master/README.md">a
+number of UI extensions</a> which could be incorporated into the
+W3C slidy script.</li>
+<li>Getting SVG Tiny to work on IE without need for SVG plugin
+<ul>
+<li>Using scripts to dynamically convert SVG Tiny to VML</li>
+<li>Note that IE9 introduces native SVG support, so it may
+no longer be worth working on SVG to VML for rendering of SVG</li>
+</ul>
+</li>
+<li>Pre-alpha version of wysiwyg slide editor (see <a
+href="editor/editor-screenshot1.png">screenshot</a>)
+<ul>
+<li>Using contentEditable when available, otherwise
+falling back to textarea and plain text conventions</li>
+<li>Using XMLHttpRequest to dynamically reflect changes to server</li>
+</ul>
+</li>
+<li>Mechanism for remotely driving Slidy as part of distributed meetings
+<ul>
+<li>Using XMLHttpRequest to listen for navigation commands</li>
+<li>Using VoIP for accompanying audio and teleconferencing</li>
+<li>Synchronizing recorded spoken presentation with currently viewed slide</li>
+</ul>
+</li>
+<li>Filters from PowerPoint and Open Office
+<ul>
+<li>and export to PDF via <a href="http://www.princexml.com/">PrinceXML</a></li>
+</ul>
+</li>
+</ul>
+
+<p>If you have comments, suggestions for improvements, or would
+like to volunteer your help with further work on Slidy,
+please contact <a href=
+"http://www.w3.org/People/Raggett/">Dave Raggett</a> &lt;<a href=
+"mailto:[email protected]">[email protected]</a>&gt;</p>
+</div>
+
+<div class="slide">
+<h1>Acknowledgements</h1>
+
+<ul>
+<li>My thanks to everyone who sent in bug reports and feature
+requests</li>
+<li>Opera Software for implementing CSS @media projection and
+promoting the idea of using the Web for presentations with
+<a href="http://www.opera.com/support/tutorials/operashow/">Opera
+Show</a></li>
+<li><a href="http://tantek.com/">Tantek &Ccedil;elik</a> for his
+pioneering work on applying JavaScript for slide presentations on
+other browsers</li>
+<li>Eric Meyer for taking this further with the excellent <a
+href="http://www.meyerweb.com/eric/tools/s5/s5-intro.html">S5</a></li>
+<li>W3C's <a href="http://dev.w3.org/cvsweb/slidemaker/">slidemaker
+tool</a>, which uses a perl script to split an html file up into
+one file per slide with navigation buttons</li>
+<li>Early versions of <a href="http://www.w3.org/People/Raggett/tidy/">HTML
+Tidy</a> which supported a means to create presentations via splitting
+html files on h2 elements</li>
+<li>Many sites with advice on JavaScript work arounds for browser
+variations</li>
+<li>Microsoft for pioneering contentEditable and XMLHTTP which
+both provide tremendous opportunities for Web applications</li>
+<li>Microsoft Office which provided the impetus for creating
+Slidy as a Web-based alternative to the ubiquitous use of PowerPoint</li>
+</ul>
+
+<p class="smaller"><strong>Note</strong> that while Slidy and
+S5 were developed independently, both support the use of the
+class values "slide" and "handout" for div elements. Slidy doesn't
+support the "layout" class featured in S5 and Opera Show, but
+instead provides a more flexible alternative with the "background"
+class, which enables different backgrounds on different slides.</p>
+</div>
+
+<div class="slide">
+<h1>Acknowledgements</h1>
+
+<p>The following people have contributed localizations:</p>
+
+<ul>
+<li>Emmanuelle Gutiérrez y Restrepo, Spanish</li>
+<li>Joan V. Baz, Catalan</li>
+<li>Jakub Vrána, Czech</li>
+<li>Ruud Steltenpool, Dutch</li>
+<li>Beat Vontobel, German</li>
+<li>Krzysztof Kotowicz, Polish</li>
+<li>Tamas Horvath, Hungarian</li>
+<li>Creso Moraes, Brazilian Portuguese</li>
+<li>Giuseppe Scollo, Italian</li>
+<li>Konstantinos Koukopoulos, Greek</li>
+<li>Yoshikazu Sawa (澤 義和), Japanese</li>
+<li>Shelley Shyan, Chinese</li>
+<li>Andrew Pantyukhin, Russian</li>
+<li>Saasha Metsärantala, Swedish</li>
+</ul>
+
+<p>The following people have contributed bug reports:</p>
+
+<ul>
+<li>Steve Robertson</li> 
+<li>Ivan Herman</li>
+<li>Steve Bratt</li>
+<li>Peter Patel-Schneider</li>
+<li>Matthew Coller</li>
+<li>Rune Heggtveit</li>
+<li>Gopal Venkatesan</li>
+<li>Cay Horstmann</li>
+<li>Schuyler Duveen</li>
+<li>Matteo Nannini</li>
+<li>Ralph Swick</li>
+<li>Jakub Vrána</li>
+<li>Philip Bolt</li>
+<li>Jon Frost</li>
+<li>Jonathan Chetwynd</li>
+<li>Nicolas Frisby</li>
+</ul>
+
+<p>Douglas Crockford for <a 
+href="http://www.crockford.com/javascript/jsmin.html">jsmin</a>
+which was used to minify the script before compressing it with gzip.</p>
+</div>
+
+<script src="../js/w3c_talks.js"></script>
+</body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example_slidy/scripts/slidy.js	Tue Sep 03 18:25:44 2013 +0900
@@ -0,0 +1,3016 @@
+/* slidy.js
+
+   Copyright (c) 2005-2011 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   W3C liability, trademark, document use and software licensing
+   rules apply, see:
+
+   http://www.w3.org/Consortium/Legal/copyright-documents
+   http://www.w3.org/Consortium/Legal/copyright-software
+
+   Defines single name "w3c_slidy" in global namespace
+   Adds event handlers without trampling on any others
+*/
+
+// the slidy object implementation
+var w3c_slidy = {
+  // classify which kind of browser we're running under
+  ns_pos: (typeof window.pageYOffset!='undefined'),
+  khtml: ((navigator.userAgent).indexOf("KHTML") >= 0 ? true : false),
+  opera: ((navigator.userAgent).indexOf("Opera") >= 0 ? true : false),
+  ipad: ((navigator.userAgent).indexOf("iPad") >= 0 ? true : false),
+  iphone: ((navigator.userAgent).indexOf("iPhone") >= 0 ? true : false),
+  android: ((navigator.userAgent).indexOf("Android") >= 0 ? true : false),
+  ie: (typeof document.all != "undefined" && !this.opera),
+  ie6: (!this.ns_pos && navigator.userAgent.indexOf("MSIE 6") != -1),
+  ie7: (!this.ns_pos && navigator.userAgent.indexOf("MSIE 7") != -1),
+  ie8: (!this.ns_pos && navigator.userAgent.indexOf("MSIE 8") != -1),
+  ie9: (!this.ns_pos && navigator.userAgent.indexOf("MSIE 9") != -1),
+
+  // data for swipe and double tap detection on touch screens
+  last_tap: 0,
+  prev_tap: 0,
+  start_x: 0,
+  start_y: 0,
+  delta_x: 0,
+  delta_y: 0,
+
+  // are we running as XHTML? (doesn't work on Opera)
+  is_xhtml: /xml/.test(document.contentType),
+
+  slide_number: 0, // integer slide count: 0, 1, 2, ...
+  slide_number_element: null, // element containing slide number
+  slides: [], // set to array of slide div's
+  notes: [], // set to array of handout div's
+  backgrounds: [], // set to array of background div's
+  toolbar: null, // element containing toolbar
+  title: null, // document title
+  last_shown: null, // last incrementally shown item
+  eos: null,  // span element for end of slide indicator
+  toc: null, // table of contents
+  outline: null, // outline element with the focus
+  selected_text_len: 0, // length of drag selection on document
+  view_all: 0,  // 1 to view all slides + handouts
+  want_toolbar: true,  // user preference to show/hide toolbar
+  mouse_click_enabled: true, // enables left click for next slide
+  scroll_hack: 0, // IE work around for position: fixed
+  disable_slide_click: false,  // used by clicked anchors
+
+  lang: "en", // updated to language specified by html file
+
+  help_anchor: null, // used for keyboard focus hack in showToolbar()
+  help_page: "http://www.w3.org/Talks/Tools/Slidy2/help/help.html",
+  help_text: "Navigate with mouse click, space bar, Cursor Left/Right, " +
+             "or Pg Up and Pg Dn. Use S and B to change font size.",
+
+  size_index: 0,
+  size_adjustment: 0,
+  sizes:  new Array("10pt", "12pt", "14pt", "16pt", "18pt", "20pt",
+                    "22pt", "24pt", "26pt", "28pt", "30pt", "32pt"),
+
+  // needed for efficient resizing
+  last_width: 0,
+  last_height: 0,
+
+
+  // Needed for cross browser support for relative width/height on
+  // object elements. The work around is to save width/height attributes
+  // and then to recompute absolute width/height dimensions on resizing
+   objects: [],
+
+  // attach initialiation event handlers
+  set_up: function () {
+    var init = function() { w3c_slidy.init(); };
+    if (typeof window.addEventListener != "undefined")
+      window.addEventListener("load", init, false);
+    else
+      window.attachEvent("onload", init);
+  },
+
+  hide_slides: function () {
+    if (document.body && !w3c_slidy.initialized)
+      document.body.style.visibility = "hidden";
+    else
+      setTimeout(w3c_slidy.hide_slides, 50);
+  },
+
+  // hack to persuade IE to compute correct document height
+  // as needed for simulating fixed positioning of toolbar
+  ie_hack: function () {
+    window.resizeBy(0,-1);
+    window.resizeBy(0, 1);
+  },
+
+  init: function () {
+    //alert("slidy starting test 10");
+    document.body.style.visibility = "visible";
+    this.init_localization();
+    this.add_toolbar();
+    this.wrap_implicit_slides();
+    this.collect_slides();
+    this.collect_notes();
+    this.collect_backgrounds();
+    this.objects = document.body.getElementsByTagName("object");
+    this.patch_anchors();
+    this.slide_number = this.find_slide_number(location.href);
+    window.offscreenbuffering = true;
+    this.size_adjustment = this.find_size_adjust();
+    this.time_left = this.find_duration();
+    this.hide_image_toolbar();  // suppress IE image toolbar popup
+    this.init_outliner();  // activate fold/unfold support
+    this.title = document.title;
+    this.keyboardless = (this.ipad||this.iphone||this.android);
+
+    if (this.keyboardless)
+    {
+      w3c_slidy.remove_class(w3c_slidy.toolbar, "hidden")
+      this.want_toolbar = 0;
+    }
+
+    // work around for opera bug
+    this.is_xhtml = (document.body.tagName == "BODY" ? false : true);
+
+    if (this.slides.length > 0)
+    {
+      var slide = this.slides[this.slide_number];
+   
+      if (this.slide_number > 0)
+      {
+        this.set_visibility_all_incremental("visible");
+        this.last_shown = this.previous_incremental_item(null);
+        this.set_eos_status(true);
+      }
+      else
+      {
+        this.last_shown = null;
+        this.set_visibility_all_incremental("hidden");
+        this.set_eos_status(!this.next_incremental_item(this.last_shown));
+      }
+
+      this.set_location();
+      this.add_class(this.slides[0], "first-slide");
+      w3c_slidy.show_slide(slide);
+    }
+
+    this.toc = this.table_of_contents();
+
+    this.add_initial_prompt();
+
+    // bind event handlers without interfering with custom page scripts
+    // Tap events behave too weirdly to support clicks reliably on
+    // iPhone and iPad, so exclude these from click handler
+
+    if (!this.keyboardless)
+    {
+      this.add_listener(document.body, "click", this.mouse_button_click);
+      this.add_listener(document.body, "mousedown", this.mouse_button_down);
+    }
+
+    this.add_listener(document, "keydown", this.key_down);
+    this.add_listener(document, "keypress", this.key_press);
+    this.add_listener(window, "resize", this.resized);
+    this.add_listener(window, "scroll", this.scrolled);
+    this.add_listener(window, "unload", this.unloaded);
+
+    //this.add_listener(document.body, "touchstart", this.touchstart);
+    //this.add_listener(document.body, "touchmove", this.touchmove);
+    //this.add_listener(document.body, "touchend", this.touchend);
+
+    this.add_listener(document, "gesturechange", function ()
+    {
+      return false;
+    });
+
+    this.attach_touch_handers(this.slides);
+
+    // this seems to be a debugging hack
+    //if (!document.body.onclick)
+    //  document.body.onclick = function () { };
+
+    this.single_slide_view();
+
+    //this.set_location();
+
+    this.resized();
+
+    if (this.ie7)
+      setTimeout(w3c_slidy.ie_hack, 100);
+
+    this.show_toolbar();
+
+    // for back button detection
+    setInterval(function () { w3c_slidy.check_location(); }, 200);
+    w3c_slidy.initialized = true;
+  },
+
+  // create div element with links to each slide
+  table_of_contents: function () {
+    var toc = this.create_element("div");
+    this.add_class(toc, "slidy_toc hidden");
+    //toc.setAttribute("tabindex", "0");
+
+    var heading = this.create_element("div");
+    this.add_class(heading, "toc-heading");
+    heading.innerHTML = this.localize("Table of Contents");
+
+    toc.appendChild(heading);
+    var previous = null;
+
+    for (var i = 0; i < this.slides.length; ++i)
+    {
+      var title = this.has_class(this.slides[i], "title");
+      var num = document.createTextNode((i + 1) + ". ");
+
+      toc.appendChild(num);
+
+      var a = this.create_element("a");
+      a.setAttribute("href", "#(" + (i+1) + ")");
+
+      if (title)
+        this.add_class(a, "titleslide");
+
+      var name = document.createTextNode(this.slide_name(i));
+      a.appendChild(name);
+      a.onclick = w3c_slidy.toc_click;
+      a.onkeydown = w3c_slidy.toc_key_down;
+      a.previous = previous;
+
+      if (previous)
+        previous.next = a;
+
+      toc.appendChild(a);
+
+      if (i == 0)
+        toc.first = a;
+
+      if (i < this.slides.length - 1)
+      {
+        var br = this.create_element("br");
+        toc.appendChild(br);
+      }
+
+      previous = a;
+    }
+
+    toc.focus = function () {
+      if (this.first)
+        this.first.focus();
+    }
+
+    toc.onmouseup = w3c_slidy.mouse_button_up;
+
+    toc.onclick = function (e) {
+      e||(e=window.event);
+
+      if (w3c_slidy.selected_text_len <= 0)
+         w3c_slidy.hide_table_of_contents(true);
+
+      w3c_slidy.stop_propagation(e);
+    
+      if (e.cancel != undefined)
+        e.cancel = true;
+      
+      if (e.returnValue != undefined)
+        e.returnValue = false;
+      
+      return false;
+    };
+
+    document.body.insertBefore(toc, document.body.firstChild);
+    return toc;
+  },
+
+  is_shown_toc: function () {
+    return !w3c_slidy.has_class(w3c_slidy.toc, "hidden");
+  },
+
+  show_table_of_contents: function () {
+    w3c_slidy.remove_class(w3c_slidy.toc, "hidden");
+    var toc = w3c_slidy.toc;
+    toc.focus();
+
+    if (w3c_slidy.ie7 && w3c_slidy.slide_number == 0)
+      setTimeout(w3c_slidy.ie_hack, 100);
+  },
+
+  hide_table_of_contents: function (focus) {
+    w3c_slidy.add_class(w3c_slidy.toc, "hidden");
+
+    if (focus && !w3c_slidy.opera &&
+        !w3c_slidy.has_class(w3c_slidy.toc, "hidden"))
+      w3c_slidy.help_anchor.focus();
+  },
+
+  toggle_table_of_contents: function () {
+    if (w3c_slidy.is_shown_toc())
+      w3c_slidy.hide_table_of_contents(true);
+    else
+      w3c_slidy.show_table_of_contents();
+  },
+
+  // called on clicking toc entry
+  toc_click: function (e) {
+    if (!e)
+      e = window.event;
+
+    var target = w3c_slidy.get_target(e);
+
+    if (target && target.nodeType == 1)
+    {
+      var uri = target.getAttribute("href");
+
+      if (uri)
+      {
+        //alert("going to " + uri);
+        var slide = w3c_slidy.slides[w3c_slidy.slide_number];
+        w3c_slidy.hide_slide(slide);
+        w3c_slidy.slide_number = w3c_slidy.find_slide_number(uri);
+        slide = w3c_slidy.slides[w3c_slidy.slide_number];
+        w3c_slidy.last_shown = null;
+        w3c_slidy.set_location();
+        w3c_slidy.set_visibility_all_incremental("hidden");
+        w3c_slidy.set_eos_status(!w3c_slidy.next_incremental_item(w3c_slidy.last_shown));
+        w3c_slidy.show_slide(slide);
+        //target.focus();
+
+        try
+        {
+          if (!w3c_slidy.opera)
+            w3c_slidy.help_anchor.focus();
+        }
+        catch (e)
+        {
+        }
+      }
+    }
+
+    w3c_slidy.hide_table_of_contents(true);
+    if (w3c_slidy.ie7) w3c_slidy.ie_hack();
+    w3c_slidy.stop_propagation(e);
+    return w3c_slidy.cancel(e);
+  },
+
+  // called onkeydown for toc entry
+  toc_key_down: function (event) {
+    var key;
+
+    if (!event)
+      var event = window.event;
+
+    // kludge around NS/IE differences 
+    if (window.event)
+      key = window.event.keyCode;
+    else if (event.which)
+      key = event.which;
+    else
+      return true; // Yikes! unknown browser
+
+    // ignore event if key value is zero
+    // as for alt on Opera and Konqueror
+    if (!key)
+      return true;
+
+    // check for concurrent control/command/alt key
+    // but are these only present on mouse events?
+
+    if (event.ctrlKey || event.altKey)
+      return true;
+
+    if (key == 13)
+    {
+      var uri = this.getAttribute("href");
+
+      if (uri)
+      {
+        //alert("going to " + uri);
+       var slide = w3c_slidy.slides[w3c_slidy.slide_number];
+        w3c_slidy.hide_slide(slide);
+        w3c_slidy.slide_number = w3c_slidy.find_slide_number(uri);
+        slide = w3c_slidy.slides[w3c_slidy.slide_number];
+        w3c_slidy.last_shown = null;
+        w3c_slidy.set_location();
+        w3c_slidy.set_visibility_all_incremental("hidden");
+        w3c_slidy.set_eos_status(!w3c_slidy.next_incremental_item(w3c_slidy.last_shown));
+        w3c_slidy.show_slide(slide);
+        //target.focus();
+
+        try
+        {
+          if (!w3c_slidy.opera)
+            w3c_slidy.help_anchor.focus();
+        }
+        catch (e)
+        {
+        }
+      }
+
+      w3c_slidy.hide_table_of_contents(true);
+
+      if (self.ie7)
+       w3c_slidy.ie_hack();
+
+      return w3c_slidy.cancel(event);
+    }
+
+    if (key == 40 && this.next)
+    {
+      this.next.focus();
+      return w3c_slidy.cancel(event);
+    }
+
+    if (key == 38 && this.previous)
+    {
+      this.previous.focus();
+      return w3c_slidy.cancel(event);
+    }
+
+    return true;
+  },
+
+  touchstart: function (e)
+  {
+    //e.preventDefault();
+    this.prev_tap = this.last_tap;
+    this.last_tap = (new Date).getTime();
+
+    var tap_delay = this.last_tap - this.prev_tap;
+
+    if (tap_delay <= 200)
+    {
+      // double tap
+    }
+
+    var touch = e.touches[0];
+
+    this.start_x = touch.pageX;
+    this.start_y = touch.pageY;
+    this.delta_x = this.delta_y = 0;
+  },
+
+  touchmove: function (e)
+  {
+    //e.preventDefault();
+    var touch = e.touches[0];
+    this.delta_x = touch.pageX - this.start_x;
+    this.delta_y = touch.pageY - this.start_y;
+  },
+
+  touchend: function (e)
+  {
+    //e.preventDefault();
+    var delay = (new Date).getTime() - this.last_tap;
+    var dx = this.delta_x;
+    var dy = this.delta_y;
+    var abs_dx = Math.abs(dx);
+    var abs_dy = Math.abs(dy);
+
+    if (delay < 500 && (abs_dx > 100 || abs_dy > 100))
+    {
+      if (abs_dx > 0.5 * abs_dy)
+      {
+        if (dx < 0)
+          w3c_slidy.next_slide(true);
+        else
+          w3c_slidy.previous_slide(true);
+      }
+      else if (abs_dy > 2 * abs_dx)
+      {
+        w3c_slidy.toggle_table_of_contents();
+      }
+    }
+  },
+
+  // ### OBSOLETE ###
+  before_print: function () {
+    this.show_all_slides();
+    this.hide_toolbar();
+    alert("before print");
+  },
+
+  // ### OBSOLETE ###
+  after_print: function () {
+    if (!this.view_all)
+    {
+      this.single_slide_view();
+      this.show_toolbar();
+    }
+    alert("after print");
+  },
+
+  // ### OBSOLETE ###
+  print_slides: function () {
+    this.before_print();
+    window.print();
+    this.after_print();
+  },
+
+  // ### OBSOLETE ?? ###
+  toggle_view: function () {
+    if (this.view_all)
+    {
+      this.single_slide_view();
+      this.show_toolbar();
+      this.view_all = 0;
+    }
+    else
+    {
+      this.show_all_slides();
+      this.hide_toolbar();
+      this.view_all = 1;
+    }
+  },
+
+  // prepare for printing  ### OBSOLETE ###
+  show_all_slides: function () {
+    this.remove_class(document.body, "single_slide");
+    this.set_visibility_all_incremental("visible");
+  },
+
+  // restore after printing  ### OBSOLETE ###
+  single_slide_view: function () {
+    this.add_class(document.body, "single_slide");
+    this.set_visibility_all_incremental("visible");
+    this.last_shown = this.previous_incremental_item(null);
+  },
+
+  // suppress IE's image toolbar pop up
+  hide_image_toolbar: function () {
+    if (!this.ns_pos)
+    {
+      var images = document.getElementsByTagName("IMG");
+
+      for (var i = 0; i < images.length; ++i)
+        images[i].setAttribute("galleryimg", "no");
+    }
+  },
+
+  unloaded: function (e) {
+    //alert("unloaded");
+  },
+
+  // Safari and Konqueror don't yet support getComputedStyle()
+  // and they always reload page when location.href is updated
+  is_KHTML: function () {
+    var agent = navigator.userAgent;
+    return (agent.indexOf("KHTML") >= 0 ? true : false);
+  },
+
+  // find slide name from first h1 element
+  // default to document title + slide number
+  slide_name: function (index) {
+    var name = null;
+    var slide = this.slides[index];
+
+    var heading = this.find_heading(slide);
+
+    if (heading)
+      name = this.extract_text(heading);
+
+    if (!name)
+      name = this.title + "(" + (index + 1) + ")";
+
+    name.replace(/\&/g, "&amp;");
+    name.replace(/\</g, "&lt;");
+    name.replace(/\>/g, "&gt;");
+
+    return name;
+  },
+
+  // find first h1 element in DOM tree
+  find_heading: function (node) {
+    if (!node || node.nodeType != 1)
+      return null;
+
+    if (node.nodeName == "H1" || node.nodeName == "h1")
+      return node;
+
+    var child = node.firstChild;
+
+    while (child)
+    {
+      node = this.find_heading(child);
+
+      if (node)
+        return node;
+
+      child = child.nextSibling;
+    }
+
+    return null;
+  },
+
+  // recursively extract text from DOM tree
+  extract_text: function (node) {
+    if (!node)
+      return "";
+
+    // text nodes
+    if (node.nodeType == 3)
+      return node.nodeValue;
+
+    // elements
+    if (node.nodeType == 1)
+    {
+      node = node.firstChild;
+      var text = "";
+
+      while (node)
+      {
+        text = text + this.extract_text(node);
+        node = node.nextSibling;
+      }
+
+      return text;
+    }
+
+    return "";
+  },
+
+  // find copyright text from meta element
+  find_copyright: function () {
+    var name, content;
+    var meta = document.getElementsByTagName("meta");
+
+    for (var i = 0; i < meta.length; ++i)
+    {
+      name = meta[i].getAttribute("name");
+      content = meta[i].getAttribute("content");
+
+      if (name == "copyright")
+        return content;
+    }
+
+    return null;
+  },
+
+  find_size_adjust: function () {
+    var name, content, offset;
+    var meta = document.getElementsByTagName("meta");
+
+    for (var i = 0; i < meta.length; ++i)
+    {
+      name = meta[i].getAttribute("name");
+      content = meta[i].getAttribute("content");
+
+      if (name == "font-size-adjustment")
+        return 1 * content;
+    }
+
+    return 1;
+  },
+
+  // <meta name="duration" content="20" />  for 20 minutes
+  find_duration: function () {
+    var name, content, offset;
+    var meta = document.getElementsByTagName("meta");
+
+    for (var i = 0; i < meta.length; ++i)
+    {
+      name = meta[i].getAttribute("name");
+      content = meta[i].getAttribute("content");
+
+      if (name == "duration")
+        return 60000 * content;
+    }
+
+    return null;
+  },
+
+  replace_by_non_breaking_space: function (str) {
+    for (var i = 0; i < str.length; ++i)
+      str[i] = 160;
+  },
+
+  // ### CHECK ME ### is use of "li" okay for text/html?
+  // for XHTML do we also need to specify namespace?
+  init_outliner: function () {
+    var items = document.getElementsByTagName("li");
+
+    for (var i = 0; i < items.length; ++i)
+    {
+      var target = items[i];
+
+      if (!this.has_class(target.parentNode, "outline"))
+        continue;
+
+      target.onclick = this.outline_click;
+/* ### more work needed for IE6
+      if (!this.ns_pos)
+      {
+        target.onmouseover = this.hover_outline;
+        target.onmouseout = this.unhover_outline;
+      }
+*/
+      if (this.foldable(target))
+      {
+        target.foldable = true;
+        target.onfocus = function () {w3c_slidy.outline = this;};
+        target.onblur = function () {w3c_slidy.outline = null;};
+
+        if (!target.getAttribute("tabindex"))
+          target.setAttribute("tabindex", "0");
+
+        if (this.has_class(target, "expand"))
+          this.unfold(target);
+        else
+          this.fold(target);
+      }
+      else
+      {
+        this.add_class(target, "nofold");
+        target.visible = true;
+        target.foldable = false;
+      }
+    }
+  },
+
+  foldable: function (item) {
+    if (!item || item.nodeType != 1)
+      return false;
+
+    var node = item.firstChild;
+
+    while (node)
+    {
+      if (node.nodeType == 1 && this.is_block(node))
+        return true;
+
+      node = node.nextSibling;
+    }
+
+    return false;
+  },
+
+  // ### CHECK ME ### switch to add/remove "hidden" class
+  fold: function (item) {
+    if (item)
+    {
+      this.remove_class(item, "unfolded");
+      this.add_class(item, "folded");
+    }
+
+    var node = item ? item.firstChild : null;
+
+    while (node)
+    {
+      if (node.nodeType == 1 && this.is_block(node)) // element
+      {
+         w3c_slidy.add_class(node, "hidden");
+      }
+
+      node = node.nextSibling;
+    }
+
+    item.visible = false;
+  },
+
+  // ### CHECK ME ### switch to add/remove "hidden" class
+  unfold: function (item) {
+    if (item)
+    {
+      this.add_class(item, "unfolded");
+      this.remove_class(item, "folded");
+    }
+
+    var node = item ? item.firstChild : null;
+
+    while (node)
+    {
+      if (node.nodeType == 1 && this.is_block(node)) // element
+      {
+        w3c_slidy.remove_class(node, "hidden");
+      }
+
+      node = node.nextSibling;
+    }
+
+    item.visible = true;
+  },
+
+  outline_click: function (e) {
+    if (!e)
+      e = window.event;
+
+    var rightclick = false;
+    var target = w3c_slidy.get_target(e);
+
+    while (target && target.visible == undefined)
+      target = target.parentNode;
+
+    if (!target)
+      return true;
+
+    if (e.which)
+      rightclick = (e.which == 3);
+    else if (e.button)
+      rightclick = (e.button == 2);
+
+    if (!rightclick && target.visible != undefined)
+    {
+      if (target.foldable)
+      {
+        if (target.visible)
+          w3c_slidy.fold(target);
+        else
+          w3c_slidy.unfold(target);
+      }
+
+      w3c_slidy.stop_propagation(e);
+      e.cancel = true;
+      e.returnValue = false;
+    }
+
+    return false;
+  },
+
+  add_initial_prompt: function () {
+    var prompt = this.create_element("div");
+    prompt.setAttribute("class", "initial_prompt");
+
+    var p1 = this.create_element("p");
+    prompt.appendChild(p1);
+    p1.setAttribute("class", "help");
+
+    if (this.keyboardless)
+      p1.innerHTML = "swipe left to move to next slide";
+    else
+      p1.innerHTML = "Space, Right Arrow or swipe left to move to " +
+                     "next slide, click help below for more details";
+
+    this.add_listener(prompt, "click", function (e) {
+      document.body.removeChild(prompt);
+      w3c_slidy.stop_propagation(e);
+    
+      if (e.cancel != undefined)
+        e.cancel = true;
+      
+      if (e.returnValue != undefined)
+        e.returnValue = false;
+      
+      return false;
+    });
+
+    document.body.appendChild(prompt);
+    this.initial_prompt = prompt;
+    setTimeout(function() {document.body.removeChild(prompt);}, 5000);
+  },
+
+  add_toolbar: function () {
+    var counter, page;
+
+     this.toolbar = this.create_element("div");
+     this.toolbar.setAttribute("class", "toolbar");
+
+     // a reasonably behaved browser
+     if (this.ns_pos || !this.ie6)
+     {
+       var right = this.create_element("div");
+       right.setAttribute("style", "float: right; text-align: right");
+
+       counter = this.create_element("span")
+       counter.innerHTML = this.localize("slide") + " n/m";
+       right.appendChild(counter);
+       this.toolbar.appendChild(right);
+
+       var left = this.create_element("div");
+       left.setAttribute("style", "text-align: left");
+
+       // global end of slide indicator
+       this.eos = this.create_element("span");
+       this.eos.innerHTML = "* ";
+       left.appendChild(this.eos);
+
+       var help = this.create_element("a");
+       help.setAttribute("href", this.help_page);
+       help.setAttribute("title", this.localize(this.help_text));
+       help.innerHTML = this.localize("help?");
+       left.appendChild(help);
+       this.help_anchor = help;  // save for focus hack
+
+       var gap1 = document.createTextNode(" ");
+       left.appendChild(gap1);
+
+       var contents = this.create_element("a");
+       contents.setAttribute("href", "javascript:w3c_slidy.toggle_table_of_contents()");
+       contents.setAttribute("title", this.localize("table of contents"));
+       contents.innerHTML = this.localize("contents?");
+       left.appendChild(contents);
+
+       var gap2 = document.createTextNode(" ");
+       left.appendChild(gap2);
+
+       var copyright = this.find_copyright();
+
+       if (copyright)
+       {
+         var span = this.create_element("span");
+         span.className = "copyright";
+         span.innerHTML = copyright;
+         left.appendChild(span);
+       }
+
+       this.toolbar.setAttribute("tabindex", "0");
+       this.toolbar.appendChild(left);
+     }
+     else // IE6 so need to work around its poor CSS support
+     {
+       this.toolbar.style.position = (this.ie7 ? "fixed" : "absolute");
+       this.toolbar.style.zIndex = "200";
+       this.toolbar.style.width = "99.9%";
+       this.toolbar.style.height = "1.2em";
+       this.toolbar.style.top = "auto";
+       this.toolbar.style.bottom = "0";
+       this.toolbar.style.left = "0";
+       this.toolbar.style.right = "0";
+       this.toolbar.style.textAlign = "left";
+       this.toolbar.style.fontSize = "60%";
+       this.toolbar.style.color = "red";
+       this.toolbar.borderWidth = 0;
+       this.toolbar.className = "toolbar";
+       this.toolbar.style.background = "rgb(240,240,240)";
+
+       // would like to have help text left aligned
+       // and page counter right aligned, floating
+       // div's don't work, so instead use nested
+       // absolutely positioned div's.
+
+       var sp = this.create_element("span");
+       sp.innerHTML = "&nbsp;&nbsp;*&nbsp;";
+       this.toolbar.appendChild(sp);
+       this.eos = sp;  // end of slide indicator
+
+       var help = this.create_element("a");
+       help.setAttribute("href", this.help_page);
+       help.setAttribute("title", this.localize(this.help_text));
+       help.innerHTML = this.localize("help?");
+       this.toolbar.appendChild(help);
+       this.help_anchor = help;  // save for focus hack
+
+       var gap1 = document.createTextNode(" ");
+       this.toolbar.appendChild(gap1);
+
+       var contents = this.create_element("a");
+       contents.setAttribute("href", "javascript:toggleTableOfContents()");
+       contents.setAttribute("title", this.localize("table of contents".localize));
+       contents.innerHTML = this.localize("contents?");
+       this.toolbar.appendChild(contents);
+
+       var gap2 = document.createTextNode(" ");
+       this.toolbar.appendChild(gap2);
+
+       var copyright = this.find_copyright();
+
+       if (copyright)
+       {
+         var span = this.create_element("span");
+         span.innerHTML = copyright;
+         span.style.color = "black";
+         span.style.marginLeft = "0.5em";
+         this.toolbar.appendChild(span);
+       }
+
+       counter = this.create_element("div")
+       counter.style.position = "absolute";
+       counter.style.width = "auto"; //"20%";
+       counter.style.height = "1.2em";
+       counter.style.top = "auto";
+       counter.style.bottom = 0;
+       counter.style.right = "0";
+       counter.style.textAlign = "right";
+       counter.style.color = "red";
+       counter.style.background = "rgb(240,240,240)";
+
+       counter.innerHTML = this.localize("slide") + " n/m";
+       this.toolbar.appendChild(counter);
+     }
+
+     // ensure that click isn't passed through to the page
+     this.toolbar.onclick =
+         function (e) {
+           if (!e)
+             e = window.event;
+
+           var target = e.target;
+
+           if (!target && e.srcElement)
+             target = e.srcElement;
+
+           // work around Safari bug
+           if (target && target.nodeType == 3)
+             target = target.parentNode;
+
+           w3c_slidy.stop_propagation(e);
+
+           if (target && target.nodeName.toLowerCase() != "a")
+             w3c_slidy.mouse_button_click(e);
+         };
+
+     this.slide_number_element = counter;
+     this.set_eos_status(false);
+     document.body.appendChild(this.toolbar);
+  },
+
+  // wysiwyg editors make it hard to use div elements
+  // e.g. amaya loses the div when you copy and paste
+  // this function wraps div elements around implicit
+  // slides which start with an h1 element and continue
+  // up to the next heading or div element
+  wrap_implicit_slides: function () {
+    var i, heading, node, next, div;
+    var headings = document.getElementsByTagName("h1");
+
+    if (!headings)
+      return;
+
+    for (i = 0; i < headings.length; ++i)
+    {
+      heading = headings[i];
+
+      if (heading.parentNode != document.body)
+        continue;
+
+      node = heading.nextSibling;
+
+      div = document.createElement("div");
+      this.add_class(div, "slide");
+      document.body.replaceChild(div, heading);
+      div.appendChild(heading);
+
+      while (node)
+      {
+        if (node.nodeType == 1) // an element
+        {
+           if (node.nodeName == "H1" || node.nodeName == "h1")
+             break;
+
+           if (node.nodeName == "DIV" || node.nodeName == "div")
+           {
+             if (this.has_class(node, "slide"))
+               break;
+
+             if (this.has_class(node, "handout"))
+               break;
+           }
+        }
+
+        next = node.nextSibling;
+        node = document.body.removeChild(node);
+        div.appendChild(node);
+        node = next;
+      } 
+    }
+  },
+
+  attach_touch_handers: function(slides)
+  {
+    var i, slide;
+
+    for (i = 0; i < slides.length; ++i)
+    {
+      slide = slides[i];
+      this.add_listener(slide, "touchstart", this.touchstart);
+      this.add_listener(slide, "touchmove", this.touchmove);
+      this.add_listener(slide, "touchend", this.touchend);
+    }
+  },
+
+// return new array of all slides
+  collect_slides: function () {
+    var slides = new Array();
+    var divs = document.body.getElementsByTagName("div");
+
+    for (var i = 0; i < divs.length; ++i)
+    {
+      div = divs.item(i);
+
+      if (this.has_class(div, "slide"))
+      {
+        // add slide to collection
+        slides[slides.length] = div;
+
+        // hide each slide as it is found
+        this.add_class(div, "hidden");
+
+        // add dummy <br/> at end for scrolling hack
+        var node1 = document.createElement("br");
+        div.appendChild(node1);
+        var node2 = document.createElement("br");
+        div.appendChild(node2);
+      }
+      else if (this.has_class(div, "background"))
+      {  // work around for Firefox SVG reload bug
+        // which otherwise replaces 1st SVG graphic with 2nd
+        div.style.display = "block";
+      }
+    }
+
+    this.slides = slides;
+  },
+
+  // return new array of all <div class="handout">
+  collect_notes: function () {
+    var notes = new Array();
+    var divs = document.body.getElementsByTagName("div");
+
+    for (var i = 0; i < divs.length; ++i)
+    {
+      div = divs.item(i);
+
+      if (this.has_class(div, "handout"))
+      {
+        // add note to collection
+        notes[notes.length] = div;
+
+        // and hide it
+        this.add_class(div, "hidden");
+      }
+    }
+
+    this.notes = notes;
+  },
+
+  // return new array of all <div class="background">
+  // including named backgrounds e.g. class="background titlepage"
+  collect_backgrounds: function () {
+    var backgrounds = new Array();
+    var divs = document.body.getElementsByTagName("div");
+
+    for (var i = 0; i < divs.length; ++i)
+    {
+      div = divs.item(i);
+
+      if (this.has_class(div, "background"))
+      {
+        // add background to collection
+        backgrounds[backgrounds.length] = div;
+
+        // and hide it
+        this.add_class(div, "hidden");
+      }
+    }
+
+    this.backgrounds = backgrounds;
+  },
+
+  // set click handlers on all anchors
+  patch_anchors: function () {
+    var self = w3c_slidy;
+    var handler = function (event) {
+      // compare this.href with location.href
+      // for link to another slide in this doc
+
+      if (self.page_address(this.href) == self.page_address(location.href))
+      {
+        // yes, so find new slide number
+        var newslidenum = self.find_slide_number(this.href);
+
+        if (newslidenum != self.slide_number)
+        {
+          var slide = self.slides[self.slide_number];
+          self.hide_slide(slide);
+          self.slide_number = newslidenum;
+          slide = self.slides[self.slide_number];
+          self.show_slide(slide);
+          self.set_location();
+        }
+      }
+      else
+        w3c_slidy.stop_propagation(event);
+
+//      else if (this.target == null)
+//        location.href = this.href;
+
+      this.blur();
+      self.disable_slide_click = true;
+    };
+
+    var anchors = document.body.getElementsByTagName("a");
+
+    for (var i = 0; i < anchors.length; ++i)
+    {
+      if (window.addEventListener)
+        anchors[i].addEventListener("click", handler, false);
+      else
+        anchors[i].attachEvent("onclick", handler);
+    }
+  },
+
+  // ### CHECK ME ### see which functions are invoked via setTimeout
+  // either directly or indirectly for use of w3c_slidy vs this
+  show_slide_number: function () {
+    var timer = w3c_slidy.get_timer();
+    w3c_slidy.slide_number_element.innerHTML = timer + w3c_slidy.localize("slide") + " " +
+           (w3c_slidy.slide_number + 1) + "/" + w3c_slidy.slides.length;
+  },
+
+  // every 200mS check if the location has been changed as a
+  // result of the user activating the Back button/menu item
+  // doesn't work for Opera < 9.5
+  check_location: function () {
+    var hash = location.hash;
+
+    if (w3c_slidy.slide_number > 0 && (hash == "" || hash == "#"))
+      w3c_slidy.goto_slide(0);
+    else if (hash.length > 2 && hash != "#("+(w3c_slidy.slide_number+1)+")")
+    {
+      var num = parseInt(location.hash.substr(2));
+
+      if (!isNaN(num))
+        w3c_slidy.goto_slide(num-1);
+    }
+
+    if (w3c_slidy.time_left && w3c_slidy.slide_number > 0)
+    {
+      w3c_slidy.show_slide_number();
+
+      if (w3c_slidy.time_left > 0)
+        w3c_slidy.time_left -= 200;
+    } 
+  },
+
+  get_timer: function () {
+    var timer = "";
+    if (w3c_slidy.time_left)
+    {
+      var mins, secs;
+      secs = Math.floor(w3c_slidy.time_left/1000);
+      mins = Math.floor(secs / 60);
+      secs = secs % 60;
+      timer = (mins ? mins+"m" : "") + secs + "s ";
+    }
+
+    return timer;
+  },
+
+  // this doesn't push location onto history stack for IE
+  // for which a hidden iframe hack is needed: load page into
+  // the iframe with script that set's parent's location.hash
+  // but that won't work for standalone use unless we can
+  // create the page dynamically via a javascript: URL
+  // ### use history.pushState if available
+  set_location: function () {
+     var uri = w3c_slidy.page_address(location.href);
+     var hash = "#(" + (w3c_slidy.slide_number+1) + ")";
+
+     if (w3c_slidy.slide_number >= 0)
+       uri = uri + hash;
+
+     if (typeof(history.pushState) != "undefined")
+     {
+       document.title = w3c_slidy.title + " (" + (w3c_slidy.slide_number+1) + ")";
+       history.pushState(0, document.title, hash);
+       w3c_slidy.show_slide_number();
+       return;
+     }
+
+     if (w3c_slidy.ie && (w3c_slidy.ie6 || w3c_slidy.ie7))
+       w3c_slidy.push_hash(hash);
+
+     if (uri != location.href) // && !khtml
+        location.href = uri;
+
+     if (this.khtml)
+        hash = "(" + (w3c_slidy.slide_number+1) + ")";
+
+     if (!this.ie && location.hash != hash && location.hash != "")
+       location.hash = hash;
+
+     document.title = w3c_slidy.title + " (" + (w3c_slidy.slide_number+1) + ")";
+     w3c_slidy.show_slide_number();
+  },
+
+  page_address: function (uri) {
+    var i = uri.indexOf("#");
+
+    if (i < 0)
+      i = uri.indexOf("%23");
+
+    // check if anchor is entire page
+
+    if (i < 0)
+      return uri;  // yes
+
+    return uri.substr(0, i);
+  },
+
+  // only used for IE6 and IE7
+  on_frame_loaded: function (hash) {
+    location.hash = hash;
+    var uri = w3c_slidy.page_address(location.href);
+    location.href = uri + hash;
+  },
+
+  // history hack with thanks to Bertrand Le Roy
+  push_hash: function (hash) {
+    if (hash == "") hash = "#(1)";
+      window.location.hash = hash;
+
+    var doc = document.getElementById("historyFrame").contentWindow.document;
+    doc.open("javascript:'<html></html>'");
+    doc.write("<html><head><script type=\"text/javascript\">window.parent.w3c_slidy.on_frame_loaded('"+
+      (hash) + "');</script></head><body>hello mum</body></html>");
+      doc.close();
+  },
+
+  // find current slide based upon location
+  // first find target anchor and then look
+  // for associated div element enclosing it
+  // finally map that to slide number
+  find_slide_number: function (uri) {
+    // first get anchor from page location
+
+    var i = uri.indexOf("#");
+
+    // check if anchor is entire page
+    if (i < 0)
+      return 0;  // yes
+
+    var anchor = unescape(uri.substr(i+1));
+
+    // now use anchor as XML ID to find target
+    var target = document.getElementById(anchor);
+
+    if (!target)
+    {
+      // does anchor look like "(2)" for slide 2 ??
+      // where first slide is (1)
+      var re = /\((\d)+\)/;
+
+      if (anchor.match(re))
+      {
+        var num = parseInt(anchor.substring(1, anchor.length-1));
+
+        if (num > this.slides.length)
+          num = 1;
+
+        if (--num < 0)
+          num = 0;
+
+        return num;
+      }
+
+      // accept [2] for backwards compatibility
+      re = /\[(\d)+\]/;
+
+      if (anchor.match(re))
+      {
+         var num = parseInt(anchor.substring(1, anchor.length-1));
+
+         if (num > this.slides.length)
+            num = 1;
+
+         if (--num < 0)
+            num = 0;
+
+         return num;
+      }
+
+      // oh dear unknown anchor
+      return 0;
+    }
+
+    // search for enclosing slide
+
+    while (true)
+    {
+      // browser coerces html elements to uppercase!
+      if (target.nodeName.toLowerCase() == "div" &&
+            this.has_class(target, "slide"))
+      {
+        // found the slide element
+        break;
+      }
+
+      // otherwise try parent element if any
+
+      target = target.parentNode;
+
+      if (!target)
+      {
+        return 0;   // no luck!
+      }
+    };
+
+    for (i = 0; i < slides.length; ++i)
+    {
+      if (slides[i] == target)
+        return i;  // success
+    }
+
+    // oh dear still no luck
+    return 0;
+  },
+
+  previous_slide: function (incremental) {
+    if (!w3c_slidy.view_all)
+    {
+      var slide;
+
+      if ((incremental || w3c_slidy.slide_number == 0) && w3c_slidy.last_shown != null)
+      {
+        w3c_slidy.last_shown = w3c_slidy.hide_previous_item(w3c_slidy.last_shown);
+        w3c_slidy.set_eos_status(false);
+      }
+      else if (w3c_slidy.slide_number > 0)
+      {
+        slide = w3c_slidy.slides[w3c_slidy.slide_number];
+        w3c_slidy.hide_slide(slide);
+
+        w3c_slidy.slide_number = w3c_slidy.slide_number - 1;
+        slide = w3c_slidy.slides[w3c_slidy.slide_number];
+        w3c_slidy.set_visibility_all_incremental("visible");
+        w3c_slidy.last_shown = w3c_slidy.previous_incremental_item(null);
+        w3c_slidy.set_eos_status(true);
+        w3c_slidy.show_slide(slide);
+      }
+
+      w3c_slidy.set_location();
+
+      if (!w3c_slidy.ns_pos)
+        w3c_slidy.refresh_toolbar(200);
+    }
+  },
+
+  next_slide: function (incremental) {
+    if (!w3c_slidy.view_all)
+    {
+      var slide, last = w3c_slidy.last_shown;
+
+      if (incremental || w3c_slidy.slide_number == w3c_slidy.slides.length - 1)
+         w3c_slidy.last_shown = w3c_slidy.reveal_next_item(w3c_slidy.last_shown);
+
+      if ((!incremental || w3c_slidy.last_shown == null) &&
+             w3c_slidy.slide_number < w3c_slidy.slides.length - 1)
+      {
+         slide = w3c_slidy.slides[w3c_slidy.slide_number];
+         w3c_slidy.hide_slide(slide);
+
+         w3c_slidy.slide_number = w3c_slidy.slide_number + 1;
+         slide = w3c_slidy.slides[w3c_slidy.slide_number];
+         w3c_slidy.last_shown = null;
+         w3c_slidy.set_visibility_all_incremental("hidden");
+         w3c_slidy.show_slide(slide);
+      }
+      else if (!w3c_slidy.last_shown)
+      {
+         if (last && incremental)
+           w3c_slidy.last_shown = last;
+      }
+
+      w3c_slidy.set_location();
+
+      w3c_slidy.set_eos_status(!w3c_slidy.next_incremental_item(w3c_slidy.last_shown));
+
+      if (!w3c_slidy.ns_pos)
+         w3c_slidy.refresh_toolbar(200);
+     }
+  },
+
+  // to first slide with nothing revealed
+  // i.e. state at start of presentation
+  first_slide: function () {
+     if (!w3c_slidy.view_all)
+     {
+       var slide;
+
+       if (w3c_slidy.slide_number != 0)
+       {
+         slide = w3c_slidy.slides[w3c_slidy.slide_number];
+         w3c_slidy.hide_slide(slide);
+
+         w3c_slidy.slide_number = 0;
+         slide = w3c_slidy.slides[w3c_slidy.slide_number];
+         w3c_slidy.last_shown = null;
+         w3c_slidy.set_visibility_all_incremental("hidden");
+         w3c_slidy.show_slide(slide);
+       }
+
+       w3c_slidy.set_eos_status(
+         !w3c_slidy.next_incremental_item(w3c_slidy.last_shown));
+       w3c_slidy.set_location();
+     }
+  },
+
+  // goto last slide with everything revealed
+  // i.e. state at end of presentation
+  last_slide: function () {
+    if (!w3c_slidy.view_all)
+    {
+      var slide;
+
+      w3c_slidy.last_shown = null; //revealNextItem(lastShown);
+
+      if (w3c_slidy.last_shown == null &&
+          w3c_slidy.slide_number < w3c_slidy.slides.length - 1)
+      {
+         slide = w3c_slidy.slides[w3c_slidy.slide_number];
+         w3c_slidy.hide_slide(slide);
+         w3c_slidy.slide_number = w3c_slidy.slides.length - 1;
+         slide = w3c_slidy.slides[w3c_slidy.slide_number];
+         w3c_slidy.set_visibility_all_incremental("visible");
+         w3c_slidy.last_shown = w3c_slidy.previous_incremental_item(null);
+
+         w3c_slidy.show_slide(slide);
+      }
+      else
+      {
+         w3c_slidy.set_visibility_all_incremental("visible");
+         w3c_slidy.last_shown = w3c_slidy.previous_incremental_item(null);
+      }
+
+      w3c_slidy.set_eos_status(true);
+      w3c_slidy.set_location();
+    }
+  },
+
+
+  // ### check this and consider add/remove class
+  set_eos_status: function (state) {
+    if (this.eos)
+      this.eos.style.color = (state ? "rgb(240,240,240)" : "red");
+  },
+
+  // first slide is 0
+  goto_slide: function (num) {
+    //alert("going to slide " + (num+1));
+    var slide = w3c_slidy.slides[w3c_slidy.slide_number];
+    w3c_slidy.hide_slide(slide);
+    w3c_slidy.slide_number = num;
+    slide = w3c_slidy.slides[w3c_slidy.slide_number];
+    w3c_slidy.last_shown = null;
+    w3c_slidy.set_visibility_all_incremental("hidden");
+    w3c_slidy.set_eos_status(!w3c_slidy.next_incremental_item(w3c_slidy.last_shown));
+    document.title = w3c_slidy.title + " (" + (w3c_slidy.slide_number+1) + ")";
+    w3c_slidy.show_slide(slide);
+    w3c_slidy.show_slide_number();
+  },
+
+
+  show_slide: function (slide) {
+    this.sync_background(slide);
+    this.remove_class(slide, "hidden");
+
+    // work around IE9 object rendering bug
+    setTimeout("window.scrollTo(0,0);", 1);
+  },
+
+  hide_slide: function (slide) {
+    this.add_class(slide, "hidden");
+  },
+
+  // show just the backgrounds pertinent to this slide
+  // when slide background-color is transparent
+  // this should now work with rgba color values
+  sync_background: function (slide) {
+    var background;
+    var bgColor;
+
+    if (slide.currentStyle)
+      bgColor = slide.currentStyle["backgroundColor"];
+    else if (document.defaultView)
+    {
+      var styles = document.defaultView.getComputedStyle(slide,null);
+
+      if (styles)
+        bgColor = styles.getPropertyValue("background-color");
+      else // broken implementation probably due Safari or Konqueror
+      {
+        //alert("defective implementation of getComputedStyle()");
+        bgColor = "transparent";
+      }
+    }
+    else
+      bgColor == "transparent";
+
+    if (bgColor == "transparent" ||
+        bgColor.indexOf("rgba") >= 0 ||
+        bgColor.indexOf("opacity") >= 0)
+    {
+      var slideClass = this.get_class_list(slide);
+
+      for (var i = 0; i < this.backgrounds.length; i++)
+      {
+        background = this.backgrounds[i];
+
+        var bgClass = this.get_class_list(background);
+
+        if (this.matching_background(slideClass, bgClass))
+          this.remove_class(background, "hidden");
+        else
+          this.add_class(background, "hidden");
+      }
+    }
+    else // forcibly hide all backgrounds
+      this.hide_backgrounds();
+  },
+
+  hide_backgrounds: function () {
+    for (var i = 0; i < this.backgrounds.length; i++)
+    {
+      background = this.backgrounds[i];
+      this.add_class(background, "hidden");
+    }
+  },
+
+  // compare classes for slide and background
+  matching_background: function (slideClass, bgClass) {
+    var i, count, pattern, result;
+
+    // define pattern as regular expression
+    pattern = /\w+/g;
+
+    // check background class names
+    result = bgClass.match(pattern);
+
+    for (i = count = 0; i < result.length; i++)
+    {
+      if (result[i] == "hidden")
+        continue;
+
+      if (result[i] == "background")
+	continue;
+
+      ++count;
+    }
+
+    if (count == 0)  // default match
+      return true;
+
+    // check for matches and place result in array
+    result = slideClass.match(pattern);
+
+    // now check if desired name is present for background
+    for (i = count = 0; i < result.length; i++)
+    {
+      if (result[i] == "hidden")
+        continue;
+
+      if (this.has_token(bgClass, result[i]))
+        return true;
+    }
+
+    return false;
+  },
+
+  resized: function () {
+     var width = 0;
+
+     if ( typeof( window.innerWidth ) == 'number' )
+       width = window.innerWidth;  // Non IE browser
+     else if (document.documentElement && document.documentElement.clientWidth)
+       width = document.documentElement.clientWidth;  // IE6
+     else if (document.body && document.body.clientWidth)
+       width = document.body.clientWidth; // IE4
+
+     var height = 0;
+
+     if ( typeof( window.innerHeight ) == 'number' )
+       height = window.innerHeight;  // Non IE browser
+     else if (document.documentElement && document.documentElement.clientHeight)
+       height = document.documentElement.clientHeight;  // IE6
+     else if (document.body && document.body.clientHeight)
+       height = document.body.clientHeight; // IE4
+
+     if (height && (width/height > 1.05*1024/768))
+     {
+       width = height * 1024.0/768;
+     }
+
+     // IE fires onresize even when only font size is changed!
+     // so we do a check to avoid blocking < and > actions
+     if (width != w3c_slidy.last_width || height != w3c_slidy.last_height)
+     {
+       if (width >= 1100)
+         w3c_slidy.size_index = 5;    // 4
+       else if (width >= 1000)
+         w3c_slidy.size_index = 4;    // 3
+       else if (width >= 800)
+         w3c_slidy.size_index = 3;    // 2
+       else if (width >= 600)
+         w3c_slidy.size_index = 2;    // 1
+       else if (width)
+         w3c_slidy.size_index = 0;
+
+       // add in font size adjustment from meta element e.g.
+       // <meta name="font-size-adjustment" content="-2" />
+       // useful when slides have too much content ;-)
+
+       if (0 <= w3c_slidy.size_index + w3c_slidy.size_adjustment &&
+             w3c_slidy.size_index + w3c_slidy.size_adjustment < w3c_slidy.sizes.length)
+         w3c_slidy.size_index = w3c_slidy.size_index + w3c_slidy.size_adjustment;
+
+       // enables cross browser use of relative width/height
+       // on object elements for use with SVG and Flash media
+       w3c_slidy.adjust_object_dimensions(width, height);
+
+       if (document.body.style.fontSize != w3c_slidy.sizes[w3c_slidy.size_index])
+       {
+         document.body.style.fontSize = w3c_slidy.sizes[w3c_slidy.size_index];
+       }
+
+       w3c_slidy.last_width = width;
+       w3c_slidy.last_height = height;
+
+       // force reflow to work around Mozilla bug
+       if (w3c_slidy.ns_pos)
+       {
+         var slide = w3c_slidy.slides[w3c_slidy.slide_number];
+         w3c_slidy.hide_slide(slide);
+         w3c_slidy.show_slide(slide);
+       }
+
+       // force correct positioning of toolbar
+       w3c_slidy.refresh_toolbar(200);
+     }
+  },
+
+  scrolled: function () {
+    if (w3c_slidy.toolbar && !w3c_slidy.ns_pos && !w3c_slidy.ie7)
+    {
+      w3c_slidy.hack_offset = w3c_slidy.scroll_x_offset();
+      // hide toolbar
+      w3c_slidy.toolbar.style.display = "none";
+
+      // make it reappear later
+      if (w3c_slidy.scrollhack == 0 && !w3c_slidy.view_all)
+      {
+        setTimeout(function () {w3c_slidy.show_toolbar(); }, 1000);
+        w3c_slidy.scrollhack = 1;
+      }
+    }
+  },
+
+  hide_toolbar: function () {
+    w3c_slidy.add_class(w3c_slidy.toolbar, "hidden");
+    window.focus();
+  },
+
+  // used to ensure IE refreshes toolbar in correct position
+  refresh_toolbar: function (interval) {
+    if (!w3c_slidy.ns_pos && !w3c_slidy.ie7)
+    {
+      w3c_slidy.hide_toolbar();
+      setTimeout(function () {w3c_slidy.show_toolbar();}, interval);
+    }
+  },
+
+  // restores toolbar after short delay
+  show_toolbar: function () {
+    if (w3c_slidy.want_toolbar)
+    {
+      w3c_slidy.toolbar.style.display = "block";
+
+      if (!w3c_slidy.ns_pos)
+      {
+        // adjust position to allow for scrolling
+        var xoffset = w3c_slidy.scroll_x_offset();
+        w3c_slidy.toolbar.style.left = xoffset;
+        w3c_slidy.toolbar.style.right = xoffset;
+
+        // determine vertical scroll offset
+        //var yoffset = scrollYOffset();
+
+        // bottom is doc height - window height - scroll offset
+        //var bottom = documentHeight() - lastHeight - yoffset
+
+        //if (yoffset > 0 || documentHeight() > lastHeight)
+        //   bottom += 16;  // allow for height of scrollbar
+
+        w3c_slidy.toolbar.style.bottom = 0; //bottom;
+      }
+
+      w3c_slidy.remove_class(w3c_slidy.toolbar, "hidden");
+    }
+
+    w3c_slidy.scrollhack = 0;
+
+
+    // set the keyboard focus to the help link on the
+    // toolbar to ensure that document has the focus
+    // IE doesn't always work with window.focus()
+    // and this hack has benefit of Enter for help
+
+    try
+    {
+      if (!w3c_slidy.opera)
+        w3c_slidy.help_anchor.focus();
+    }
+    catch (e)
+    {
+    }
+  },
+
+// invoked via F key
+  toggle_toolbar: function () {
+    if (!w3c_slidy.view_all)
+    {
+      if (w3c_slidy.has_class(w3c_slidy.toolbar, "hidden"))
+      {
+        w3c_slidy.remove_class(w3c_slidy.toolbar, "hidden")
+        w3c_slidy.want_toolbar = 1;
+      }
+      else
+      {
+        w3c_slidy.add_class(w3c_slidy.toolbar, "hidden")
+        w3c_slidy.want_toolbar = 0;
+      }
+    }
+  },
+
+  scroll_x_offset: function () {
+    if (window.pageXOffset)
+      return self.pageXOffset;
+
+    if (document.documentElement && 
+             document.documentElement.scrollLeft)
+      return document.documentElement.scrollLeft;
+
+    if (document.body)
+      return document.body.scrollLeft;
+
+    return 0;
+  },
+
+  scroll_y_offset: function () {
+    if (window.pageYOffset)
+      return self.pageYOffset;
+
+    if (document.documentElement && 
+             document.documentElement.scrollTop)
+      return document.documentElement.scrollTop;
+
+    if (document.body)
+      return document.body.scrollTop;
+
+    return 0;
+  },
+
+  // looking for a way to determine height of slide content
+  // the slide itself is set to the height of the window
+  optimize_font_size: function () {
+    var slide = w3c_slidy.slides[w3c_slidy.slide_number];
+
+    //var dh = documentHeight(); //getDocHeight(document);
+    var dh = slide.scrollHeight;
+    var wh = getWindowHeight();
+    var u = 100 * dh / wh;
+
+    alert("window utilization = " + u + "% (doc "
+      + dh + " win " + wh + ")");
+  },
+
+  // from document object
+  get_doc_height: function (doc) {
+    if (!doc)
+      doc = document;
+
+    if (doc && doc.body && doc.body.offsetHeight)
+      return doc.body.offsetHeight;  // ns/gecko syntax
+
+    if (doc && doc.body && doc.body.scrollHeight)
+      return doc.body.scrollHeight;
+
+    alert("couldn't determine document height");
+  },
+
+  get_window_height: function () {
+    if ( typeof( window.innerHeight ) == 'number' )
+      return window.innerHeight;  // Non IE browser
+
+    if (document.documentElement && document.documentElement.clientHeight)
+      return document.documentElement.clientHeight;  // IE6
+
+    if (document.body && document.body.clientHeight)
+      return document.body.clientHeight; // IE4
+  },
+
+  document_height: function () {
+    var sh, oh;
+
+    sh = document.body.scrollHeight;
+    oh = document.body.offsetHeight;
+
+    if (sh && oh)
+    {
+      return (sh > oh ? sh : oh);
+    }
+
+    // no idea!
+    return 0;
+  },
+
+  smaller: function () {
+    if (w3c_slidy.size_index > 0)
+    {
+      --w3c_slidy.size_index;
+    }
+
+    w3c_slidy.toolbar.style.display = "none";
+    document.body.style.fontSize = w3c_slidy.sizes[w3c_slidy.size_index];
+    var slide = w3c_slidy.slides[w3c_slidy.slide_number];
+    w3c_slidy.hide_slide(slide);
+    w3c_slidy.show_slide(slide);
+    setTimeout(function () {w3c_slidy.show_toolbar(); }, 50);
+  },
+
+  bigger: function () {
+    if (w3c_slidy.size_index < w3c_slidy.sizes.length - 1)
+    {
+      ++w3c_slidy.size_index;
+    }
+
+    w3c_slidy.toolbar.style.display = "none";
+    document.body.style.fontSize = w3c_slidy.sizes[w3c_slidy.size_index];
+    var slide = w3c_slidy.slides[w3c_slidy.slide_number];
+    w3c_slidy.hide_slide(slide);
+    w3c_slidy.show_slide(slide);
+    setTimeout(function () {w3c_slidy.show_toolbar(); }, 50);
+  },
+
+  // enables cross browser use of relative width/height
+  // on object elements for use with SVG and Flash media
+  // with thanks to Ivan Herman for the suggestion
+  adjust_object_dimensions: function (width, height) {
+    for( var i = 0; i < w3c_slidy.objects.length; i++ )
+    {
+      var obj = this.objects[i];
+      var mimeType = obj.getAttribute("type");
+
+      if (mimeType == "image/svg+xml" || mimeType == "application/x-shockwave-flash")
+      {
+        if ( !obj.initialWidth ) 
+          obj.initialWidth = obj.getAttribute("width");
+
+        if ( !obj.initialHeight ) 
+          obj.initialHeight = obj.getAttribute("height");
+
+        if ( obj.initialWidth && obj.initialWidth.charAt(obj.initialWidth.length-1) == "%" )
+        {
+          var w = parseInt(obj.initialWidth.slice(0, obj.initialWidth.length-1));
+          var newW = width * (w/100.0);
+          obj.setAttribute("width",newW);
+        }
+
+        if ( obj.initialHeight &&
+             obj.initialHeight.charAt(obj.initialHeight.length-1) == "%" )
+        {
+          var h = parseInt(obj.initialHeight.slice(0, obj.initialHeight.length-1));
+          var newH = height * (h/100.0);
+          obj.setAttribute("height", newH);
+        }
+      }
+    }
+  },
+
+  // needed for Opera to inhibit default behavior
+  // since Opera delivers keyPress even if keyDown
+  // was cancelled
+  key_press: function (event) {
+    if (!event)
+      event = window.event;
+
+    if (!w3c_slidy.key_wanted)
+      return w3c_slidy.cancel(event);
+
+    return true;
+  },
+
+  //  See e.g. http://www.quirksmode.org/js/events/keys.html for keycodes
+  key_down: function (event) {
+    var key, target, tag;
+
+    w3c_slidy.key_wanted = true;
+
+    if (!event)
+      event = window.event;
+
+    // kludge around NS/IE differences 
+    if (window.event)
+    {
+      key = window.event.keyCode;
+      target = window.event.srcElement;
+    }
+    else if (event.which)
+    {
+      key = event.which;
+      target = event.target;
+    }
+    else
+      return true; // Yikes! unknown browser
+
+    // ignore event if key value is zero
+    // as for alt on Opera and Konqueror
+    if (!key)
+       return true;
+
+    // avoid interfering with keystroke
+    // behavior for non-slidy chrome elements
+    if (!w3c_slidy.slidy_chrome(target) &&
+        w3c_slidy.special_element(target))
+      return true;
+
+    // check for concurrent control/command/alt key
+    // but are these only present on mouse events?
+
+    if (event.ctrlKey || event.altKey || event.metaKey)
+       return true;
+
+    // dismiss table of contents if visible
+    if (w3c_slidy.is_shown_toc() && key != 9 && key != 16 && key != 38 && key != 40)
+    {
+      w3c_slidy.hide_table_of_contents(true);
+
+      if (key == 27 || key == 84 || key == 67)
+        return w3c_slidy.cancel(event);
+    }
+
+    if (key == 34) // Page Down
+    {
+      if (w3c_slidy.view_all)
+        return true;
+
+      w3c_slidy.next_slide(false);
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 33) // Page Up
+    {
+      if (w3c_slidy.view_all)
+        return true;
+
+      w3c_slidy.previous_slide(false);
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 32) // space bar
+    {
+      w3c_slidy.next_slide(true);
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 37) // Left arrow
+    {
+      w3c_slidy.previous_slide(!event.shiftKey);
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 36) // Home
+    {
+      w3c_slidy.first_slide();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 35) // End
+    {
+      w3c_slidy.last_slide();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 39) // Right arrow
+    {
+      w3c_slidy.next_slide(!event.shiftKey);
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 13) // Enter
+    {
+      if (w3c_slidy.outline)
+      {
+        if (w3c_slidy.outline.visible)
+          w3c_slidy.fold(w3c_slidy.outline);
+        else
+          w3c_slidy.unfold(w3c_slidy.outline);
+          
+       return w3c_slidy.cancel(event);
+      }
+    }
+    else if (key == 188)  // < for smaller fonts
+    {
+      w3c_slidy.smaller();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 190)  // > for larger fonts
+    {
+      w3c_slidy.bigger();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 189 || key == 109)  // - for smaller fonts
+    {
+      w3c_slidy.smaller();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 187 || key == 191 || key == 107)  // = +  for larger fonts
+    {
+      w3c_slidy.bigger();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 83)  // S for smaller fonts
+    {
+      w3c_slidy.smaller();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 66)  // B for larger fonts
+    {
+      w3c_slidy.bigger();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 90)  // Z for last slide
+    {
+      w3c_slidy.last_slide();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 70)  // F for toggle toolbar
+    {
+      w3c_slidy.toggle_toolbar();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 65)  // A for toggle view single/all slides
+    {
+      w3c_slidy.toggle_view();
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 75)  // toggle action of left click for next page
+    {
+      w3c_slidy.mouse_click_enabled = !w3c_slidy.mouse_click_enabled;
+      var alert_msg = (w3c_slidy.mouse_click_enabled ?
+                "enabled" : "disabled") +  " mouse click advance";
+
+      alert(w3c_slidy.localize(alert_msg));
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 84 || key == 67)  // T or C for table of contents
+    {
+      if (w3c_slidy.toc)
+        w3c_slidy.toggle_table_of_contents();
+
+      return w3c_slidy.cancel(event);
+    }
+    else if (key == 72) // H for help
+    {
+      window.location = w3c_slidy.help_page;
+      return w3c_slidy.cancel(event);
+    }
+    //else alert("key code is "+ key);
+
+    return true;
+  },
+
+  // safe for both text/html and application/xhtml+xml
+  create_element: function (name) {
+    if (this.xhtml && (typeof document.createElementNS != 'undefined'))
+      return document.createElementNS("http://www.w3.org/1999/xhtml", name)
+
+    return document.createElement(name);
+  },
+
+  get_element_style: function (elem, IEStyleProp, CSSStyleProp) {
+    if (elem.currentStyle)
+    {
+      return elem.currentStyle[IEStyleProp];
+    }
+    else if (window.getComputedStyle)
+    {
+      var compStyle = window.getComputedStyle(elem, "");
+      return compStyle.getPropertyValue(CSSStyleProp);
+    }
+    return "";
+  },
+
+  // the string str is a whitespace separated list of tokens
+  // test if str contains a particular token, e.g. "slide"
+  has_token: function (str, token) {
+    if (str)
+    {
+      // define pattern as regular expression
+      var pattern = /\w+/g;
+
+      // check for matches
+      // place result in array
+      var result = str.match(pattern);
+
+      // now check if desired token is present
+      for (var i = 0; i < result.length; i++)
+      {
+        if (result[i] == token)
+          return true;
+      }
+    }
+
+    return false;
+  },
+
+  get_class_list: function (element) {
+    if (typeof element.className != 'undefined')
+      return element.className;
+
+    return element.getAttribute("class");
+  },
+
+  has_class: function (element, name) {
+    if (element.nodeType != 1)
+      return false;
+
+    var regexp = new RegExp("(^| )" + name + "\W*");
+
+    if (typeof element.className != 'undefined')
+      return regexp.test(element.className);
+
+    return regexp.test(element.getAttribute("class"));
+  },
+
+  remove_class: function (element, name) {
+    var regexp = new RegExp("(^| )" + name + "\W*");
+    var clsval = "";
+
+    if (typeof element.className != 'undefined')
+    {
+      clsval = element.className;
+
+      if (clsval)
+      {
+        clsval = clsval.replace(regexp, "");
+        element.className = clsval;
+      }
+    }
+    else
+    {
+      clsval = element.getAttribute("class");
+
+      if (clsval)
+      {
+        clsval = clsval.replace(regexp, "");
+        element.setAttribute("class", clsval);
+      }
+    }
+  },
+
+  add_class: function (element, name) {
+    if (!this.has_class(element, name))
+    {
+      if (typeof element.className != 'undefined')
+        element.className += " " + name;
+      else
+      {
+        var clsval = element.getAttribute("class");
+        clsval = clsval ? clsval + " " + name : name;
+        element.setAttribute("class", clsval);
+      }
+    }
+  },
+
+  // HTML elements that can be used with class="incremental"
+  // note that you can also put the class on containers like
+  // up, ol, dl, and div to make their contents appear
+  // incrementally. Upper case is used since this is what
+  // browsers report for HTML node names (text/html).
+  incremental_elements: null,
+  okay_for_incremental: function (name) {
+    if (!this.incremental_elements)
+    {
+      var inclist = new Array();
+      inclist["p"] = true;
+      inclist["pre"] = true;
+      inclist["li"] = true;
+      inclist["blockquote"] = true;
+      inclist["dt"] = true;
+      inclist["dd"] = true;
+      inclist["h2"] = true;
+      inclist["h3"] = true;
+      inclist["h4"] = true;
+      inclist["h5"] = true;
+      inclist["h6"] = true;
+      inclist["span"] = true;
+      inclist["address"] = true;
+      inclist["table"] = true;
+      inclist["tr"] = true;
+      inclist["th"] = true;
+      inclist["td"] = true;
+      inclist["img"] = true;
+      inclist["object"] = true;
+      this.incremental_elements = inclist;
+    }
+    return this.incremental_elements[name.toLowerCase()];
+  },
+
+  next_incremental_item: function (node) {
+    var br = this.is_xhtml ? "br" : "BR";
+    var slide = w3c_slidy.slides[w3c_slidy.slide_number];
+
+    for (;;)
+    {
+      node = w3c_slidy.next_node(slide, node);
+
+      if (node == null || node.parentNode == null)
+        break;
+
+      if (node.nodeType == 1)  // ELEMENT
+      {
+        if (node.nodeName == br)
+          continue;
+
+        if (w3c_slidy.has_class(node, "incremental")
+             && w3c_slidy.okay_for_incremental(node.nodeName))
+          return node;
+
+        if (w3c_slidy.has_class(node.parentNode, "incremental")
+             && !w3c_slidy.has_class(node, "non-incremental"))
+          return node;
+      }
+    }
+
+    return node;
+  },
+
+  previous_incremental_item: function (node) {
+    var br = this.is_xhtml ? "br" : "BR";
+    var slide = w3c_slidy.slides[w3c_slidy.slide_number];
+
+    for (;;)
+    {
+      node = w3c_slidy.previous_node(slide, node);
+
+      if (node == null || node.parentNode == null)
+        break;
+
+      if (node.nodeType == 1)
+      {
+        if (node.nodeName == br)
+          continue;
+
+        if (w3c_slidy.has_class(node, "incremental")
+             && w3c_slidy.okay_for_incremental(node.nodeName))
+          return node;
+
+        if (w3c_slidy.has_class(node.parentNode, "incremental")
+             && !w3c_slidy.has_class(node, "non-incremental"))
+          return node;
+      }
+    }
+
+    return node;
+  },
+
+  // set visibility for all elements on current slide with
+  // a parent element with attribute class="incremental"
+  set_visibility_all_incremental: function (value) {
+    var node = this.next_incremental_item(null);
+
+    if (value == "hidden")
+    {
+      while (node)
+      {
+        w3c_slidy.add_class(node, "invisible");
+        node = w3c_slidy.next_incremental_item(node);
+      }
+    }
+    else // value == "visible"
+    {
+      while (node)
+      {
+        w3c_slidy.remove_class(node, "invisible");
+        node = w3c_slidy.next_incremental_item(node);
+      }
+    }
+  },
+
+  // reveal the next hidden item on the slide
+  // node is null or the node that was last revealed
+  reveal_next_item: function (node) {
+    node = w3c_slidy.next_incremental_item(node);
+
+    if (node && node.nodeType == 1)  // an element
+      w3c_slidy.remove_class(node, "invisible");
+
+    return node;
+  },
+
+  // exact inverse of revealNextItem(node)
+  hide_previous_item: function (node) {
+    if (node && node.nodeType == 1)  // an element
+      w3c_slidy.add_class(node, "invisible");
+
+    return this.previous_incremental_item(node);
+  },
+
+  // left to right traversal of root's content
+  next_node: function (root, node) {
+    if (node == null)
+      return root.firstChild;
+
+    if (node.firstChild)
+      return node.firstChild;
+
+    if (node.nextSibling)
+      return node.nextSibling;
+
+    for (;;)
+    {
+      node = node.parentNode;
+
+      if (!node || node == root)
+        break;
+
+      if (node && node.nextSibling)
+        return node.nextSibling;
+    }
+
+    return null;
+  },
+
+  // right to left traversal of root's content
+  previous_node: function (root, node) {
+    if (node == null)
+    {
+      node = root.lastChild;
+
+      if (node)
+      {
+        while (node.lastChild)
+          node = node.lastChild;
+      }
+
+      return node;
+    }
+
+    if (node.previousSibling)
+    {
+      node = node.previousSibling;
+
+      while (node.lastChild)
+        node = node.lastChild;
+
+      return node;
+    }
+
+    if (node.parentNode != root)
+      return node.parentNode;
+
+    return null;
+  },
+
+  previous_sibling_element: function (el) {
+    el = el.previousSibling;
+
+    while (el && el.nodeType != 1)
+      el = el.previousSibling;
+
+    return el;
+  },
+
+  next_sibling_element: function (el) {
+    el = el.nextSibling;
+
+    while (el && el.nodeType != 1)
+      el = el.nextSibling;
+
+    return el;
+  },
+
+  first_child_element: function (el) {
+    var node;
+
+    for (node = el.firstChild; node; node = node.nextSibling)
+    {
+      if (node.nodeType == 1)
+        break;
+    }
+
+    return node;
+  },
+
+  first_tag: function (element, tag) {
+    var node;
+
+    if (!this.is_xhtml)
+      tag = tag.toUpperCase();
+
+    for (node = element.firstChild; node; node = node.nextSibling)
+    {
+      if (node.nodeType == 1 && node.nodeName == tag)
+        break;
+    }
+
+    return node;
+  },
+
+  hide_selection: function () {
+    if (window.getSelection) // Firefox, Chromium, Safari, Opera
+    {
+      var selection = window.getSelection();
+
+      if (selection.rangeCount > 0)
+      {
+        var range = selection.getRangeAt(0);
+        range.collapse (false);
+      }
+    }
+    else // Internet Explorer
+    {
+      var textRange = document.selection.createRange ();
+      textRange.collapse (false);
+    }
+  },
+
+  get_selected_text: function () {
+    try
+    {
+      if (window.getSelection)
+        return window.getSelection().toString();
+
+      if (document.getSelection)
+        return document.getSelection().toString();
+
+      if (document.selection)
+        return document.selection.createRange().text;
+    }
+    catch (e)
+    {
+    }
+
+    return "";
+  },
+
+  // make note of length of selected text
+  // as this evaluates to zero in click event
+  mouse_button_up: function (e) {
+    w3c_slidy.selected_text_len = w3c_slidy.get_selected_text().length;
+  },
+
+  mouse_button_down: function (e) {
+    w3c_slidy.selected_text_len = w3c_slidy.get_selected_text().length;
+    w3c_slidy.mouse_x = e.clientX;
+    w3c_slidy.mouse_y = e.clientY;
+  },
+
+  // right mouse button click is reserved for context menus
+  // it is more reliable to detect rightclick than leftclick
+  mouse_button_click: function (e) {
+    if (!e)
+      var e = window.event;
+
+    if (Math.abs(e.clientX -w3c_slidy.mouse_x) +
+        Math.abs(e.clientY -w3c_slidy.mouse_y) > 10)
+      return true;
+
+    if (w3c_slidy.selected_text_len > 0)
+      return true;
+
+    var rightclick = false;
+    var leftclick = false;
+    var middleclick = false;
+    var target;
+
+    if (!e)
+      var e = window.event;
+
+    if (e.target)
+      target = e.target;
+    else if (e.srcElement)
+      target = e.srcElement;
+
+    // work around Safari bug
+    if (target.nodeType == 3)
+      target = target.parentNode;
+
+    if (e.which) // all browsers except IE
+    {
+      leftclick = (e.which == 1);
+      middleclick = (e.which == 2);
+      rightclick = (e.which == 3);
+    }
+    else if (e.button)
+    {
+      // Konqueror gives 1 for left, 4 for middle
+      // IE6 gives 0 for left and not 1 as I expected
+
+      if (e.button == 4)
+        middleclick = true;
+
+      // all browsers agree on 2 for right button
+      rightclick = (e.button == 2);
+    }
+    else
+      leftclick = true;
+
+    if (w3c_slidy.selected_text_len > 0)
+    {
+      w3c_slidy.stop_propagation(e);
+      e.cancel = true;
+      e.returnValue = false;
+      return false;
+    }
+
+    // dismiss table of contents
+    w3c_slidy.hide_table_of_contents(false);
+
+    // check if target is something that probably want's clicks
+    // e.g. a, embed, object, input, textarea, select, option
+    var tag = target.nodeName.toLowerCase();
+
+    if (w3c_slidy.mouse_click_enabled && leftclick &&
+        !w3c_slidy.special_element(target) &&
+        !target.onclick)
+    {
+      w3c_slidy.next_slide(true);
+      w3c_slidy.stop_propagation(e);
+      e.cancel = true;
+      e.returnValue = false;
+      return false;
+    }
+
+    return true;
+  },
+
+  special_element: function (element) {
+    if (this.has_class(element, "non-interactive"))
+      return false;
+
+    var tag = element.nodeName.toLowerCase();
+
+    return element.onkeydown ||
+      element.onclick ||
+      tag == "a" ||
+      tag == "embed" ||
+      tag == "object" ||
+      tag == "video" ||
+      tag == "audio" ||
+      tag == "svg" ||
+      tag == "canvas" ||
+      tag == "input" ||
+      tag == "textarea" ||
+      tag == "select" ||
+      tag == "option";
+  },
+
+  slidy_chrome: function (el) {
+    while (el)
+    {
+      if (el == w3c_slidy.toc ||
+          el == w3c_slidy.toolbar ||
+          w3c_slidy.has_class(el, "outline"))
+        return true;
+
+      el = el.parentNode;
+    }
+
+    return false;
+  },
+
+  get_key: function (e)
+  {
+    var key;
+
+    // kludge around NS/IE differences 
+    if (typeof window.event != "undefined")
+      key = window.event.keyCode;
+    else if (e.which)
+      key = e.which;
+
+    return key;
+  },
+
+  get_target: function (e) {
+    var target;
+
+    if (!e)
+      e = window.event;
+
+    if (e.target)
+      target = e.target;
+    else if (e.srcElement)
+      target = e.srcElement;
+
+    if (target.nodeType != 1)
+      target = target.parentNode;
+
+    return target;
+  },
+
+  // does display property provide correct defaults?
+  is_block: function (elem) {
+    var tag = elem.nodeName.toLowerCase();
+
+    return tag == "ol" || tag == "ul" || tag == "p" ||
+           tag == "li" || tag == "table" || tag == "pre" ||
+           tag == "h1" || tag == "h2" || tag == "h3" ||
+           tag == "h4" || tag == "h5" || tag == "h6" ||
+           tag == "blockquote" || tag == "address"; 
+  },
+
+  add_listener: function (element, event, handler) {
+    if (window.addEventListener)
+      element.addEventListener(event, handler, false);
+    else
+      element.attachEvent("on"+event, handler);
+  },
+
+  // used to prevent event propagation from field controls
+  stop_propagation: function (event) {
+    event = event ? event : window.event;
+    event.cancelBubble = true;  // for IE
+
+    if (event.stopPropagation)
+      event.stopPropagation();
+
+    return true;
+  },
+
+  cancel: function (event) {
+    if (event)
+    {
+       event.cancel = true;
+       event.returnValue = false;
+
+      if (event.preventDefault)
+        event.preventDefault();
+    }
+
+    w3c_slidy.key_wanted = false;
+    return false;
+  },
+
+// for each language define an associative array
+// and also the help text which is longer
+
+  strings_es: {
+    "slide":"pág.",
+    "help?":"Ayuda",
+    "contents?":"Índice",
+    "table of contents":"tabla de contenidos",
+    "Table of Contents":"Tabla de Contenidos",
+    "restart presentation":"Reiniciar presentación",
+    "restart?":"Inicio"
+  },
+  help_es:
+    "Utilice el ratón, barra espaciadora, teclas Izda/Dcha, " +
+    "o Re pág y Av pág. Use S y B para cambiar el tamaño de fuente.",
+
+  strings_ca: {
+    "slide":"pàg..",
+    "help?":"Ajuda",
+    "contents?":"Índex",
+    "table of contents":"taula de continguts",
+    "Table of Contents":"Taula de Continguts",
+    "restart presentation":"Reiniciar presentació",
+    "restart?":"Inici"
+  },
+  help_ca:
+    "Utilitzi el ratolí, barra espaiadora, tecles Esq./Dta. " +
+    "o Re pàg y Av pàg. Usi S i B per canviar grandària de font.",
+
+  strings_cs: {
+    "slide":"snímek",
+    "help?":"nápověda",
+    "contents?":"obsah",
+    "table of contents":"obsah prezentace",
+    "Table of Contents":"Obsah prezentace",
+    "restart presentation":"znovu spustit prezentaci",
+    "restart?":"restart"
+  },
+  help_cs:
+    "Prezentaci můžete procházet pomocí kliknutí myši, mezerníku, " +
+    "šipek vlevo a vpravo nebo kláves PageUp a PageDown. Písmo se " +
+    "dá zvětšit a zmenšit pomocí kláves B a S.",
+
+  strings_nl: {
+    "slide":"pagina",
+    "help?":"Help?",
+    "contents?":"Inhoud?",
+    "table of contents":"inhoudsopgave",
+    "Table of Contents":"Inhoudsopgave",
+    "restart presentation":"herstart presentatie",
+    "restart?":"Herstart?"
+  },
+  help_nl:
+     "Navigeer d.m.v. het muis, spatiebar, Links/Rechts toetsen, " +
+     "of PgUp en PgDn. Gebruik S en B om de karaktergrootte te veranderen.",
+
+  strings_de: {
+    "slide":"Seite",
+    "help?":"Hilfe",
+    "contents?":"Übersicht",
+    "table of contents":"Inhaltsverzeichnis",
+    "Table of Contents":"Inhaltsverzeichnis",
+    "restart presentation":"Präsentation neu starten",
+    "restart?":"Neustart"
+  },
+  help_de:
+    "Benutzen Sie die Maus, Leerschlag, die Cursortasten links/rechts oder " +
+    "Page up/Page Down zum Wechseln der Seiten und S und B für die Schriftgrösse.",
+
+  strings_pl: {
+    "slide":"slajd",
+    "help?":"pomoc?",
+    "contents?":"spis treści?",
+    "table of contents":"spis treści",
+    "Table of Contents":"Spis Treści",
+    "restart presentation":"Restartuj prezentację",
+    "restart?":"restart?"
+  },
+  help_pl:
+    "Zmieniaj slajdy klikając myszą, naciskając spację, strzałki lewo/prawo" +
+    "lub PgUp / PgDn. Użyj klawiszy S i B, aby zmienić rozmiar czczionki.",
+
+  strings_fr: {
+    "slide":"page",
+    "help?":"Aide",
+    "contents?":"Index",
+    "table of contents":"table des matières",
+    "Table of Contents":"Table des matières",
+    "restart presentation":"Recommencer l'exposé",
+    "restart?":"Début"
+  },
+  help_fr:
+    "Naviguez avec la souris, la barre d'espace, les flèches " +
+    "gauche/droite ou les touches Pg Up, Pg Dn. Utilisez " +
+    "les touches S et B pour modifier la taille de la police.",
+
+  strings_hu: {
+    "slide":"oldal",
+    "help?":"segítség",
+    "contents?":"tartalom",
+    "table of contents":"tartalomjegyzék",
+    "Table of Contents":"Tartalomjegyzék",
+    "restart presentation":"bemutató újraindítása",
+    "restart?":"újraindítás"
+  },
+  help_hu:
+    "Az oldalak közti lépkedéshez kattintson az egérrel, vagy " +
+    "használja a szóköz, a bal, vagy a jobb nyíl, illetve a Page Down, " +
+    "Page Up billentyűket. Az S és a B billentyűkkel változtathatja " +
+    "a szöveg méretét.",
+
+  strings_it: {
+    "slide":"pag.",
+    "help?":"Aiuto",
+    "contents?":"Indice",
+    "table of contents":"indice",
+    "Table of Contents":"Indice",
+    "restart presentation":"Ricominciare la presentazione",
+    "restart?":"Inizio"
+  },
+  help_it:
+    "Navigare con mouse, barra spazio, frecce sinistra/destra o " +
+    "PgUp e PgDn. Usare S e B per cambiare la dimensione dei caratteri.",
+
+  strings_el: {
+    "slide":"σελίδα",
+    "help?":"βοήθεια;",
+    "contents?":"περιεχόμενα;",
+    "table of contents":"πίνακας περιεχομένων",
+    "Table of Contents":"Πίνακας Περιεχομένων",
+    "restart presentation":"επανεκκίνηση παρουσίασης",
+    "restart?":"επανεκκίνηση;"
+  },
+  help_el:
+    "Πλοηγηθείτε με το κλίκ του ποντικιού, το space, τα βέλη αριστερά/δεξιά, " +
+    "ή Page Up και Page Down. Χρησιμοποιήστε τα πλήκτρα S και B για να αλλάξετε " +
+    "το μέγεθος της γραμματοσειράς.",
+
+  strings_ja: {
+    "slide":"スライド",
+    "help?":"ヘルプ",
+    "contents?":"目次",
+    "table of contents":"目次を表示",
+    "Table of Contents":"目次",
+    "restart presentation":"最初から再生",
+    "restart?":"最初から"
+  },
+  help_ja:
+     "マウス左クリック ・ スペース ・ 左右キー " +
+     "または Page Up ・ Page Downで操作, S ・ Bでフォントサイズ変更",
+
+  strings_zh: {
+    "slide":"幻灯片",
+    "help?":"帮助?",
+    "contents?":"内容?",
+    "table of contents":"目录",
+    "Table of Contents":"目录",
+    "restart presentation":"重新启动展示",
+    "restart?":"重新启动?"
+  },
+  help_zh:
+    "用鼠标点击, 空格条, 左右箭头, Pg Up 和 Pg Dn 导航. " +
+    "用 S, B 改变字体大小.",
+
+  strings_ru: {
+    "slide":"слайд",
+    "help?":"помощь?",
+    "contents?":"содержание?",
+    "table of contents":"оглавление",
+    "Table of Contents":"Оглавление",
+    "restart presentation":"перезапустить презентацию",
+    "restart?":"перезапуск?"
+  },
+  help_ru:
+    "Перемещайтесь кликая мышкой, используя клавишу пробел, стрелки" +
+    "влево/вправо или Pg Up и Pg Dn. Клавиши S и B меняют размер шрифта.",
+
+  strings_sv: {
+    "slide":"sida",
+    "help?":"hjälp",
+    "contents?":"innehåll",
+    "table of contents":"innehållsförteckning",
+    "Table of Contents":"Innehållsförteckning",
+    "restart presentation":"visa presentationen från början",
+    "restart?":"börja om"
+  },
+  help_sv:
+    "Bläddra med ett klick med vänstra musknappen, mellanslagstangenten, " +
+    "vänster- och högerpiltangenterna eller tangenterna Pg Up, Pg Dn. " +
+    "Använd tangenterna S och B för att ändra textens storlek.",
+
+  strings: { },
+
+  localize: function (src) {
+    if (src == "")
+      return src;
+
+     // try full language code, e.g. en-US
+     var s, lookup = w3c_slidy.strings[w3c_slidy.lang];
+
+     if (lookup)
+     {
+       s = lookup[src];
+
+       if (s)
+        return s;
+     }
+
+     // strip country code suffix, e.g.
+     // try en if undefined for en-US
+     var lg = w3c_slidy.lang.split("-");
+
+     if (lg.length > 1)
+     {
+       lookup = w3c_slidy.strings[lg[0]];
+
+       if (lookup)
+       {
+         s = lookup[src];
+
+         if (s)
+          return s;
+       }
+     }
+
+     // otherwise string as is
+     return src;
+  },
+
+  init_localization: function () {
+    var i18n = w3c_slidy;
+    var help_text = w3c_slidy.help_text;
+
+    // each such language array is declared in the localize array
+    // this is used as in  w3c_slidy.localize("foo");
+    this.strings = {
+      "es":this.strings_es,
+      "ca":this.strings_ca,
+      "cs":this.strings_cs,
+      "nl":this.strings_nl,
+      "de":this.strings_de,
+      "pl":this.strings_pl,
+      "fr":this.strings_fr,
+      "hu":this.strings_hu,
+      "it":this.strings_it,
+      "el":this.strings_el,
+      "jp":this.strings_ja,
+      "zh":this.strings_zh,
+      "ru":this.strings_ru,
+      "sv":this.strings_sv
+    },
+
+    i18n.strings_es[help_text] = i18n.help_es;
+    i18n.strings_ca[help_text] = i18n.help_ca;
+    i18n.strings_cs[help_text] = i18n.help_cs;
+    i18n.strings_nl[help_text] = i18n.help_nl;
+    i18n.strings_de[help_text] = i18n.help_de;
+    i18n.strings_pl[help_text] = i18n.help_pl;
+    i18n.strings_fr[help_text] = i18n.help_fr;
+    i18n.strings_hu[help_text] = i18n.help_hu;
+    i18n.strings_it[help_text] = i18n.help_it;
+    i18n.strings_el[help_text] = i18n.help_el;
+    i18n.strings_ja[help_text] = i18n.help_ja;
+    i18n.strings_zh[help_text] = i18n.help_zh;
+    i18n.strings_ru[help_text] = i18n.help_ru;
+    i18n.strings_sv[help_text] = i18n.help_sv;
+
+    w3c_slidy.lang = document.body.parentNode.getAttribute("lang");
+
+    if (!w3c_slidy.lang)
+      w3c_slidy.lang = document.body.parentNode.getAttribute("xml:lang");
+
+    if (!w3c_slidy.lang)
+      w3c_slidy.lang = "en";
+  }
+};
+
+// hack for back button behavior
+if (w3c_slidy.ie6 || w3c_slidy.ie7)
+{
+  document.write("<iframe id='historyFrame' " +
+  "src='javascript:\"<html"+"></"+"html>\"' " +
+  "height='1' width='1' " +
+  "style='position:absolute;left:-800px'></iframe>");
+}
+
+// attach event listeners for initialization
+w3c_slidy.set_up();
+
+// hide the slides as soon as body element is available
+// to reduce annoying screen mess before the onload event
+setTimeout(w3c_slidy.hide_slides, 50);
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example_slidy/scripts/w3c_talks.js	Tue Sep 03 18:25:44 2013 +0900
@@ -0,0 +1,169 @@
+(function() {
+    'use strict';
+    
+    // Polyfill for sessionStorage taken from https://gist.github.com/tagawa/2880273/
+    window.sessionStorage = window.sessionStorage || {
+        length: 0,
+        setItem: function(key, value) {
+            document.cookie = key + '=' + value + '; path=/';
+            this.length++;
+        },
+        getItem: function(key) {
+            var keyEQ = key + '=';
+            var ca = document.cookie.split(';');
+            for (var i = 0, len = ca.length; i < len; i++) {
+                var c = ca[i];
+                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+                if (c.indexOf(keyEQ) === 0) return c.substring(keyEQ.length, c.length);
+            }
+            return null;
+        },
+        removeItem: function(key) {
+            this.setItem(key, '', -1);
+            this.length--;
+        },
+        clear: function() {
+            // Caution: will clear all persistent cookies as well
+            var ca = document.cookie.split(';');
+            for (var i = 0, len = ca.length; i < len; i++) {
+                var c = ca[i];
+                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+                var key = c.substring(0, c.indexOf('='));
+                this.removeItem(key);
+            }
+            this.length = 0;
+        },
+        key: function(n) {
+            var ca = document.cookie.split(';');
+            if (n >= ca.length || isNaN(parseFloat(n)) || !isFinite(n)) return null;
+            var c = ca[n];
+            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+            return c.substring(0, c.indexOf('='));
+        }
+    };
+    
+    // Add start box to top-right of page
+    function makeUI() {
+        // Create CSS for start box
+        var style = document.createElement('style');
+        style.innerHTML = '#w3c_talks {background:rgba(0, 0, 0, 0.7); border-radius:0 0 0 1em; color:#fff; display:inline-block; opacity:1; padding:0.5em 1em 1em; position:absolute; right:0; text-align:center; top:0; z-index:1000;} #w3c_talks.hidden {opacity:0; -webkit-transition:3s; -moz-transition:3s; -ms-transition:3s; -o-transition:3s; transition:3s;} #w3c_talks_start {font-weight:bold; padding:0.5em 1em;} #w3c_talks_start:hover, #w3c_talks_start:focus {color:blue; cursor:pointer;}';
+        document.getElementsByTagName('head')[0].appendChild(style);
+        
+        // Create and append start box
+        var ui = document.createElement('ui');
+        ui.innerHTML = '<div id="w3c_talks"> <p>W3C talks</p> <button id="w3c_talks_start">Start</button> </div>';
+        document.body.appendChild(ui);
+        
+        // Add functionality to start button
+        var start = document.getElementById('w3c_talks_start');
+        start.onclick = function(event) {
+            window.sessionStorage['accesskey'] = 'asdf1234';
+            start.innerHTML = 'Ready';
+            start.disabled = true;
+            event = event || window.event;
+            var target = event.target || event.srcElement;
+            target.parentElement.className = 'hidden';
+        };
+    }
+
+    // Global variables for tweet posting
+    var url = 'http://www.vodstock.com/w3c_talks/w3c_talks.php';
+    var hashtag = getMetaTag('hashtag');
+    var author = getMetaTag('author');
+    var title = document.title;
+    window.sessionStorage['accesskey'] = '';
+    
+    function getMetaTag(name) {
+        var tag = document.querySelector('[name=' + name + ']');
+        
+        try {
+            return tag.content;
+        } catch(e) {
+            console.log('Unable to get ' + name + ' meta tag');
+            return '';
+        }
+    }
+    
+    // Use XHR to send data to specified URL
+    function doPost(url, data) {
+        var httpRequest;
+        
+        if (window.XMLHttpRequest) { // Modern browsers
+            httpRequest = new XMLHttpRequest();
+        } else if (window.ActiveXObject) { // Old IE
+            try {
+                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!httpRequest) {
+            console.log('Giving up :( Cannot create an XMLHTTP instance');
+            return false;
+        }
+        httpRequest.onreadystatechange = function() {
+            if (httpRequest.readyState === 4) {
+                if (httpRequest.status !== 200) {
+                    console.log('There was a problem with the XHR action.');
+                }
+            }
+        };
+        httpRequest.open('POST', url);
+        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+        httpRequest.send(data);
+    }
+    
+    function sendNote(slide) {
+        if (window.sessionStorage['accesskey']) {
+            try {
+                var note = slide.getAttribute('data-note');
+                if (note) {
+                    var data = 'note=' + encodeURIComponent(note);
+                    data += '&hashtag=' + encodeURIComponent(hashtag);
+                    data += '&author=' + encodeURIComponent(author);
+                    data += '&title=' + encodeURIComponent(title);
+                    data += '&accesskey=' + window.sessionStorage['accesskey'];
+                    doPost(url, data);
+                }
+            } catch(e) {
+                console.log('Unable to send note');
+            }
+        }
+    }
+    
+    makeUI();
+    
+    // The following is for Slidy:
+    if (window.w3c_slidy) {
+        // Store original "show_slide" method for later
+        w3c_slidy.__show_slide = w3c_slidy.show_slide;
+        
+        // Hijack "show_slide" method and add action to send note
+        w3c_slidy.show_slide = function(slide) {
+            this.__show_slide(slide);
+            
+            sendNote(slide);
+        };
+    }
+    
+    // The following is for Shower:
+    if (window.shower) {
+        var slides = document.querySelectorAll('.slide');
+        
+        // Store original "go" method for later
+        shower.__go = shower.go;
+        
+        // Hijack "go" method and add action to send note
+        shower.go = function(slideNumber, callback) {
+            this.__go(slideNumber, callback);
+            
+            if (slides.length > slideNumber) {
+                sendNote(slides[slideNumber]);
+            }
+        };
+    }
+    
+})();
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example_slidy/styles/slidy.css	Tue Sep 03 18:25:44 2013 +0900
@@ -0,0 +1,403 @@
+/* slidy.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   W3C liability, trademark, document use and software licensing
+   rules apply, see:
+
+   http://www.w3.org/Consortium/Legal/copyright-documents
+   http://www.w3.org/Consortium/Legal/copyright-software
+*/
+body
+{
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+  width: 100%;
+  height: 100%;
+  color: black;
+  background-color: white;
+  font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif;
+  font-size: 14pt;
+}
+
+div.toolbar {
+  position: fixed; z-index: 200;
+  top: auto; bottom: 0; left: 0; right: 0;
+  height: 1.2em; text-align: right;
+  padding-left: 1em;
+  padding-right: 1em; 
+  font-size: 60%;
+  color: red;
+  background-color: rgb(240,240,240);
+  border-top: solid 1px rgb(180,180,180);
+}
+
+div.toolbar span.copyright {
+  color: black;
+  margin-left: 0.5em;
+}
+
+div.initial_prompt {
+  position: absolute;
+  z-index: 1000;
+  bottom: 1.2em;
+  width: 100%;
+  background-color: rgb(200,200,200);
+  opacity: 0.35;
+  background-color: rgb(200,200,200, 0.35);
+  cursor: pointer;
+}
+
+div.initial_prompt p.help {
+  text-align: center;
+}
+
+div.initial_prompt p.close {
+  text-align: right;
+  font-style: italic;
+}
+
+div.slidy_toc {
+  position: absolute;
+  z-index: 300;
+  width: 60%;
+  max-width: 30em;
+  height: 30em;
+  overflow: auto;
+  top: auto;
+  right: auto;
+  left: 4em;
+  bottom: 4em;
+  padding: 1em;
+  background: rgb(240,240,240);
+  border-style: solid;
+  border-width: 2px;
+  font-size: 60%;
+}
+
+div.slidy_toc .toc_heading {
+  text-align: center;
+  width: 100%;
+  margin: 0;
+  margin-bottom: 1em;
+  border-bottom-style: solid;
+  border-bottom-color: rgb(180,180,180);
+  border-bottom-width: 1px;
+}
+
+div.slide {
+  z-index: 20;
+  margin: 0 0 0 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 20px;
+  padding-right: 20px;
+  border-width: 0;
+  clear: both;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  line-height: 120%;
+  background-color: transparent;
+}
+
+div.background {
+  display: none;
+}
+
+div.handout {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+div.slide.titlepage {
+  text-align: center;
+}
+
+div.slide.titlepage h1 {
+  padding-top: 10%;
+  margin-right: 0;
+}
+
+div.slide h1 {
+  padding-left: 0;
+  padding-right: 20pt;
+  padding-top: 4pt;
+  padding-bottom: 4pt;
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 60pt;
+  margin-bottom: 0.5em;
+  display: block; 
+  font-size: 160%;
+  line-height: 1.2em;
+  background: transparent;
+}
+
[email protected] screen and (max-device-width: 1024px)
+{
+  div.slide { font-size: 100%; }
+}
+
[email protected] screen and (max-device-width: 800px)
+{
+  div.slide { font-size: 200%; }
+  div.slidy_toc {
+    top: 1em;
+    left: 1em;
+    right: auto;
+    width: 80%;
+    font-size: 180%;
+  }
+}
+
+div.toc-heading {
+  width: 100%;
+  border-bottom: solid 1px rgb(180,180,180);
+  margin-bottom: 1em;
+  text-align: center;
+}
+
+img {
+  image-rendering: optimize-quality;
+}
+
+pre {
+ font-size: 80%;
+ font-weight: bold;
+ line-height: 120%;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ padding-left: 1em;
+ padding-right: 1em;
+ border-style: solid;
+ border-left-width: 1em;
+ border-top-width: thin;
+ border-right-width: thin;
+ border-bottom-width: thin;
+ border-color: #95ABD0;
+ color: #00428C;
+ background-color: #E4E5E7;
+}
+
+li pre { margin-left: 0; }
+
+blockquote { font-style: italic }
+
+img { background-color: transparent }
+
+p.copyright { font-size: smaller }
+
+.center { text-align: center }
+.footnote { font-size: smaller; margin-left: 2em; }
+
+a img { border-width: 0; border-style: none }
+
+a:visited { color: navy }
+a:link { color: navy }
+a:hover { color: red; text-decoration: underline }
+a:active { color: red; text-decoration: underline }
+
+a {text-decoration: none}
+.toolbar a:link {color: blue}
+.toolbar a:visited {color: blue}
+.toolbar a:active {color: red}
+.toolbar a:hover {color: red}
+
+ul { list-style-type: square; }
+ul ul { list-style-type: disc; }
+ul ul ul { list-style-type: circle; }
+ul ul ul ul { list-style-type: disc; }
+li { margin-left: 0.5em; margin-top: 0.5em; }
+li li { font-size: 85%; font-style: italic }
+li li li { font-size: 85%; font-style: normal }
+
+div dt
+{
+  margin-left: 0;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  font-weight: bold;
+}
+div dd
+{
+  margin-left: 2em;
+  margin-bottom: 0.5em;
+}
+
+
+p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+p.subhead { font-weight: bold; margin-top: 2em; }
+
+.smaller { font-size: smaller }
+.bigger { font-size: 130% }
+
+td,th { padding: 0.2em }
+
+ul {
+  margin: 0.5em 1.5em 0.5em 1.5em;
+  padding: 0;
+}
+
+ol {
+  margin: 0.5em 1.5em 0.5em 1.5em;
+  padding: 0;
+}
+
+ul { list-style-type: square; }
+ul ul { list-style-type: disc; }
+ul ul ul { list-style-type: circle; }
+ul ul ul ul { list-style-type: disc; }
+
+ul li { 
+  list-style: square;
+  margin: 0.1em 0em 0.6em 0;
+  padding: 0 0 0 0;
+  line-height: 140%;
+}
+
+ol li { 
+  margin: 0.1em 0em 0.6em 1.5em;
+  padding: 0 0 0 0px;
+  line-height: 140%;
+  list-style-type: decimal;
+}
+
+li ul li { 
+  font-size: 85%; 
+  font-style: italic;
+  list-style-type: disc;
+  background: transparent;
+  padding: 0 0 0 0;
+}
+li li ul li { 
+  font-size: 85%; 
+  font-style: normal;
+  list-style-type: circle;
+  background: transparent;
+  padding: 0 0 0 0;
+}
+li li li ul li {
+  list-style-type: disc;
+  background: transparent;
+  padding: 0 0 0 0;
+}
+
+li ol li {
+  list-style-type: decimal;
+}
+
+
+li li ol li {
+  list-style-type: decimal;
+}
+
+/*
+ setting class="outline on ol or ul makes it behave as an
+ ouline list where blocklevel content in li elements is
+ hidden by default and can be expanded or collapsed with
+ mouse click. Set class="expand" on li to override default
+*/
+
+ol.outline li:hover { cursor: pointer }
+ol.outline li.nofold:hover { cursor: default }
+
+ul.outline li:hover { cursor: pointer }
+ul.outline li.nofold:hover { cursor: default }
+
+ol.outline { list-style:decimal; }
+ol.outline ol { list-style-type:lower-alpha }
+
+ol.outline li.nofold {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.5em;
+}
+ol.outline li.unfolded {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.5em;
+}
+ol.outline li.folded {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.5em;
+}
+ol.outline li.unfolded:hover {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/fold.gif) no-repeat 0px 0.5em;
+}
+ol.outline li.folded:hover {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.5em;
+}
+
+ul.outline li.nofold {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.5em;
+}
+ul.outline li.unfolded {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.5em;
+}
+ul.outline li.folded {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.5em;
+}
+ul.outline li.unfolded:hover {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/fold.gif) no-repeat 0px 0.5em;
+}
+ul.outline li.folded:hover {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.5em;
+}
+
+/* for slides with class "title" in table of contents */
+a.titleslide { font-weight: bold; font-style: italic }
+
+/*
+ hide images for work around for save as bug
+ where browsers fail to save images used by CSS
+*/
+img.hidden { display: none; visibility: hidden }
+div.initial_prompt { display: none; visibility: hidden }
+
+  div.slide {
+     visibility: visible;
+     position: inherit;
+  }
+  div.handout {
+     border-top-style: solid;
+     border-top-width: thin;
+     border-top-color: black;
+  }
+
[email protected] screen {
+  .hidden { display: none; visibility: visible }
+
+  div.slide.hidden { display: block; visibility: visible }
+  div.handout.hidden { display: block; visibility: visible }
+  div.background { display: none; visibility: hidden }
+  body.single_slide div.initial_prompt { display: block; visibility: visible }
+  body.single_slide div.background { display: block; visibility: visible }
+  body.single_slide div.background.hidden { display: none; visibility: hidden }
+  body.single_slide .invisible { visibility: hidden }
+  body.single_slide .hidden { display: none; visibility: hidden }
+  body.single_slide div.slide { position: absolute }
+  body.single_slide div.handout { display: none; visibility: hidden }
+}
+
[email protected] print {
+  .hidden { display: block; visibility: visible }
+
+  div.slide pre { font-size: 60%; padding-left: 0.5em; }
+  div.toolbar { display: none; visibility: hidden; }
+  div.slidy_toc { display: none; visibility: hidden; }
+  div.background { display: none; visibility: hidden; }
+  div.slide { page-break-before: always }
+  /* :first-child isn't reliable for print media */
+  div.slide.first-slide { page-break-before: avoid }
+}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/example_slidy/styles/w3c-blue.css	Tue Sep 03 18:25:44 2013 +0900
@@ -0,0 +1,497 @@
+/* w3c-blue.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   W3C liability, trademark, document use and software licensing
+   rules apply, see:
+
+   http://www.w3.org/Consortium/Legal/copyright-documents
+   http://www.w3.org/Consortium/Legal/copyright-software
+*/
+body
+{
+  margin: 0 0 0 0;
+  padding: 0 0 0 0;
+  width: 100%;
+  height: 100%;
+  color: black;
+  background-color: white;
+  font-family: "Gill Sans MT", "Gill Sans", GillSans, sans-serif;
+  font-size: 14pt;
+}
+
+div.slide.titlepage {
+  text-align: center;
+}
+
+div.slide.titlepage h1 {
+  padding-top: 40%;
+}
+
+div.slide {
+  z-index: 20;
+  margin: 0 0 0 0;
+  padding: 0;
+  border-width: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  line-height: 120%;
+  background-color: transparent;
+}
+
+div.background {
+  z-index: 1;
+  position: absolute;
+  vertical-align: bottom;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: auto;
+  height: 4.1em;
+  padding: 0 0 0 0.2em;
+  margin: 0 0 0 0;
+  border-width: 0;
+  background-color: #728ec2;
+}
+
+div.background img {
+  height: 4em;
+}
+
+/* this rule is hidden from IE which doesn't support + selector */
+div.slide + div[class].slide { page-break-before: always;}
+
+div.slide h1 {
+  padding-left: 3em;
+  padding-right: 3em;
+  padding-top: 0.1em;
+  margin-bottom: 0.8em;
+  margin-top: -0.05em;
+  margin-left: 0;
+  margin-right: 0;
+  min-height: 2.3em;
+  color: white;
+  height: 2.2em;
+  font-size: 160%;
+  line-height: 1.1em;
+}
+
+div.slide h1 a {
+  color: white;
+  text-decoration: none;
+}
+
+div.slide h1 a:link {
+  color: white;
+  text-decoration: none;
+}
+
+div.slide h1 a:visited {
+  color: white;
+  text-decoration: none;
+}
+
+div.slide h1 a:hover {
+  color: white;
+  text-decoration: underline;
+}
+
+div.slide h1 a:active {
+  color: red;
+  text-decoration: underline;
+}
+
+#head-icon {
+  margin-top: 0.5em;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 1em;
+  background:  #728ec2;
+  border-width: 0;
+  height: 3em;
+  max-width: 3em;
+  z-index: 2;
+  float: left;
+}
+
+#head-logo {
+  margin: 0;
+  margin-top: 0.25em;
+  padding-top: 0.25em;
+  padding-bottom: 0.2em;
+  padding-left: 0;
+  padding-right: 0;
+  height: 3.2em;
+  width: 4.8em;
+  float: right;
+  z-index: 2;
+  background: #728ec2;
+}
+
+#head-logo-fallback {
+  margin: 0;
+  padding: 0;
+  margin-top: -0.8em;
+  width: 4.8em;
+  float: right;
+  z-index: 2;
+}
+
+/* the next two classes support vertical and horizontal centering */
+div.vbox {
+  float: left;
+  height: 40%;
+  width: 50%;
+  margin-top: -240px;
+}
+div.hbox {
+  width:60%;
+  margin-top: 0;
+  margin-left:auto;
+  margin-right:auto;
+  height: 60%;
+  border:1px solid silver;
+  background:#F0F0F0;
+  overflow:auto;
+  text-align:left;
+  clear:both;
+}
+
+/* styling for named background */
+div.background.slanty {
+  z-index: 2;
+  bottom: 0; 
+  height: 100%;
+  background: transparent;
+}
+
+div.background.slanty img { margin-top: 4em; width: 100%; height: 80% }
+
+/* the following makes the pre background translucent */
+/* opacity is a CSS3 property but supported by Mozilla family */
+/* filter is an IE specific feature that also requires width */
+div.slide.slanty pre {
+  width: 93%;  /* needed for IE filter to work */
+  opacity: .8;
+  filter: alpha(opacity=80);
+}
+
+img.withBorder {
+  border: 2px solid #c60;
+  padding: 4px;
+}
+
+li pre { margin-left: 0; }
+
[email protected] print { pre { font-size: 60% } }
+
+blockquote { font-style: italic }
+
+img { background-color: transparent }
+
+p.copyright { font-size: smaller }
+
+.center { text-align: center }
+.footnote { font-size: smaller; margin-left: 2em; }
+
+a img { border-width: 0; border-style: none }
+
+a:visited { color: navy }
+a:link { color: navy }
+a:hover { color: red; text-decoration: underline }
+a:active { color: red; text-decoration: underline }
+
+a {text-decoration: none}
+.navbar a:link {color: white}
+.navbar a:visited {color: yellow}
+.navbar a:active {color: red}
+.navbar a:hover {color: red}
+
+ul { list-style-type: square; }
+ul ul { list-style-type: disc; }
+ul ul ul { list-style-type: circle; }
+ul ul ul ul { list-style-type: disc; }
+li { margin-left: 0.5em; margin-top: 0.5em; }
+li li { font-size: 85%; font-style: italic }
+li li li { font-size: 85%; font-style: normal }
+
+div dt
+{
+  margin-left: 0;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  font-weight: bold;
+}
+div dd
+{
+  margin-left: 2em;
+  margin-bottom: 0.5em;
+}
+
+
+p,pre,ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+p.subhead { font-weight: bold; margin-top: 2em; }
+
+div.cover p.explanation {
+  font-style: italic;
+  margin-top: 3em;
+}
+
+
+.smaller { font-size: smaller }
+
+td,th { padding: 0.2em }
+
+ul {
+  margin: 0.5em 1.5em 0.5em 1.5em;
+  padding: 0;
+}
+
+ol {
+  margin: 0.5em 1.5em 0.5em 1.5em;
+  padding: 0;
+}
+
+ul { list-style-type: square; }
+ul ul { list-style-type: disc; }
+ul ul ul { list-style-type: circle; }
+ul ul ul ul { list-style-type: disc; }
+li { margin-left: 0.5em; margin-top: 0.5em; }
+li li { font-size: 85%; font-style: italic }
+li li li { font-size: 85%; font-style: normal }
+
+
+ul li { 
+  list-style: none;
+  margin: 0.1em 0em 0.6em 0;
+  padding: 0 0 0 40px;
+  background: transparent url(../graphics/bullet.png) no-repeat 5px 0.3em;
+  line-height: 140%;
+}
+
+/* workaround IE's failure to support background on li for print media */
[email protected] print { ul li { list-style: disc; padding-left: 0; background: none; } }
+
+ol li { 
+  margin: 0.1em 0em 0.6em 1.5em;
+  padding: 0 0 0 0px;
+  line-height: 140%;
+}
+
+li li { 
+  font-size: 85%; 
+  font-style: italic;
+  list-style-type: disc;
+  background: transparent;
+  padding: 0 0 0 0;
+}
+li li li { 
+  font-size: 85%; 
+  font-style: normal;
+  list-style-type: circle;
+  background: transparent;
+  padding: 0 0 0 0;
+}
+li li li li {
+  list-style-type: disc;
+  background: transparent;
+  padding: 0 0 0 0;
+}
+
+/* rectangular blue bullet + unfold/nofold/fold widget */
+
+/*
+ setting class="outline on ol or ul makes it behave as an
+ ouline list where blocklevel content in li elements is
+ hidden by default and can be expanded or collapsed with
+ mouse click. Set class="expand" on li to override default
+*/
+
+ol.outline li:hover { cursor: pointer }
+ol.outline li.nofold:hover { cursor: default }
+
+ul.outline li:hover { cursor: pointer }
+ul.outline li.nofold:hover { cursor: default }
+
+ol.outline { list-style:decimal; }
+ol.outline ol { list-style-type:lower-alpha }
+
+ol.outline li.nofold {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/nofold-dim.gif) no-repeat 0px 0.3em;
+}
+ol.outline li.unfolded {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/fold-dim.gif) no-repeat 0px 0.3em;
+}
+ol.outline li.folded {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/unfold-dim.gif) no-repeat 0px 0.3em;
+}
+ol.outline li.unfolded:hover {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/fold.gif) no-repeat 0px 0.3em;
+}
+ol.outline li.folded:hover {
+  padding: 0 0 0 20px;
+  background: transparent url(../graphics/unfold.gif) no-repeat 0px 0.3em;
+}
+
+ul.outline li.nofold {
+  padding: 0 0 0 52px;
+  background: transparent url(../graphics/bullet-nofold-dim.gif) no-repeat 5px 0.3em;
+}
+ul.outline li.unfolded {
+  padding: 0 0 0 52px;
+  background: transparent url(../graphics/bullet-fold-dim.gif) no-repeat 5px 0.3em;
+}
+ul.outline li.folded {
+  padding: 0 0 0 52px;
+  background: transparent url(../graphics/bullet-unfold-dim.gif) no-repeat 5px 0.3em;
+}
+ul.outline li.unfolded:hover {
+  padding: 0 0 0 52px;
+  background: transparent url(../graphics/bullet-fold.gif) no-repeat 5px 0.3em;
+}
+ul.outline li.folded:hover {
+  padding: 0 0 0 52px;
+  background: transparent url(../graphics/bullet-unfold.gif) no-repeat 5px 0.3em;
+}
+
+li ul.outline li.nofold {
+  padding: 0 0 0 21px;
+  background: transparent url(../graphics/nofold-dim.gif) no-repeat 5px 0.3em;
+}
+li ul.outline li.unfolded {
+  padding: 0 0 0 21px;
+  background: transparent url(../graphics/fold-dim.gif) no-repeat 5px 0.3em;
+}
+li ul.outline li.folded {
+  padding: 0 0 0 21px;
+  background: transparent url(../graphics/unfold-dim.gif) no-repeat 5px 0.3em;
+}
+li ul.outline li.unfolded:hover {
+  padding: 0 0 0 21px;
+  background: transparent url(../graphics/fold.gif) no-repeat 5px 0.3em;
+}
+li ul.outline li.folded:hover {
+  padding: 0 0 0 21px;
+  background: transparent url(../graphics/unfold.gif) no-repeat 5px 0.3em;
+}
+
+img {
+  image-rendering: optimize-quality;
+}
+
+img.withBorder {
+  border: 2px solid #c60;
+  padding: 4px;
+}
+
+div.header {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: auto;
+  height: 2.95em;
+  width: 100%;
+  padding: 0 0 0 0;
+  margin: 0 0 0 0;
+  border-width: 0;
+  border-style: solid;
+  background-color: #005A9C;
+  border-bottom-width: thick;
+  border-bottom-color: #95ABD0;
+}
+
+div.footer {
+  position: absolute;
+  z-index: 80;
+  left: 0;
+  right: 0;
+  top: auto;
+  bottom: 0;
+  height: 3.5em;
+  margin: 0;
+  font-size: 80%;
+  font-weight: bold;
+  padding-left: 1em;
+  padding-right: 0;
+  padding-top: 0.3em;
+  padding-bottom: 0;
+  color: #003366;
+  background-color: #95ABD0;
+}
+
+/* this is a hack to hide property from IE6 and below */
+div[class="footer"] {
+  position: fixed;
+}
+
+#hidden-bullet {
+  visibility: hidden;
+  display: none;
+}
+
+div.slide.cover {
+  color: white;
+  background-color: #728ec2;
+  padding-top: 0;
+  padding-right: 0;
+  padding-left: 3em;
+  height: 100%;
+}
+
+div.slide.cover h1 {
+  margin: 0;
+  padding: 0.5em;
+  color: white;
+  height: auto;
+}
+
+div.slide.cover h2 {
+  color: white;
+}
+
+div.slide.cover a {
+  color: white;
+}
+
+div.slide.cover a:visited { color: white }
+div.slide.cover a:link { color: white }
+div.slide.cover a:hover { color: yellow; text-decoration: underline }
+div.slide.cover a:active { color: yellow; text-decoration: underline }
+
+div.slide.cover a:hover, div.slide.cover a:active {
+  color: yellow; text-decoration: underline;
+}
+
+div.slide.cover img.cover {
+   margin: 0 0 0 0;
+   float: right;
+   padding-bottom: 4em;
+   width: 50%;
+   overflow: hidden;
+}
+
+div.slide.cover a:hover, div.slide.cover a:active {
+    color: yellow; text-decoration: underline;
+}
+
+/* for Bert as an ardent user of the old W3C slidemaker tool */
+
+div.comment { display: none; visibility: hidden }
+
[email protected] print {
+ div.slide h1 { background: transparent; color: black }
+ div.slide.cover { background: transparent; color: black }
+ div.slide.cover h1 { background: transparent; color: black }
+ div.comment { display: block; visibility: visible } 
+}