changeset 639:f1bc7a3486f5

svg-edit: removed screencasts
author Reimar Bauer <rb.proj AT googlemail DOT com>
date Thu, 05 Feb 2015 17:07:41 +0100
parents 1786868cf9b0
children d16f7c8e426a
files htdocs/svg-edit/screencasts/svgedit-screencast-1.txt htdocs/svg-edit/screencasts/svgedit-screencast-2.txt htdocs/svg-edit/screencasts/svgedit-screencast-3.txt htdocs/svg-edit/screencasts/svgopen2010/index.html htdocs/svg-edit/screencasts/svgopen2010/logo.svg htdocs/svg-edit/screencasts/svgopen2010/script.js htdocs/svg-edit/screencasts/svgopen2010/style.css
diffstat 7 files changed, 0 insertions(+), 1214 deletions(-) [+]
line wrap: on
line diff
--- a/htdocs/svg-edit/screencasts/svgedit-screencast-1.txt	Thu Feb 05 17:06:56 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,27 +0,0 @@
-Hello, my name is Jeff Schiller and I'll be giving you a brief introduction to SVG-edit.  In this video, I'll describe what SVG-edit is, what it can do and I'll demonstrate some of its features.
-
-SVG-edit is a new, open-source, lightweight vector graphics editor similar in nature to Adobe Illustrator or Inkscape.  But what's exciting about SVG-edit is that it runs directly in the browser and is powered only by open web technologies such as HTML, CSS, JavaScript and SVG.  SVG-edit runs in any modern browser including Firefox, Opera, Safari and Chrome.
-
-So here is SVG-edit.  What we're looking at is a small collection of tools, a color palette at the bottom and a white canvas on which you can draw your masterpiece.  We'll see that drawing simple shapes is as simple as clicking the tool you want, I'll choose a simple rectangle here, and then dragging and lifting on the canvas.
-
-We can draw many types of shapes: rectangles, circles [draw one large one for sun], ellipses [draw two small ones], lines [draw three for sun radiation], or even freehand drawing [draw a smile].
-
-If we want to move the elements around, we click on the Select Tool and then drag the element to the correct position.  We can click to select one shape or we can drag on the canvas to select multiple shapes.  We can use the resizing grips to change the size of the element to our hearts content.  [arrange sun, beams, eyes, rectangle floor, and text]
-
-If we want to change the interior color of a particular shape, we first select the shape using the Select Tool, and then either click on a palette box or we can click on the Fill Paint box and choose the color we want from the standard picker.  We can also set the opacity or alpha of the paint.
-
-Changing the border color of the shape can be done in a similar manner by using the color picker for the Stroke.  We can also shift-click on the palette to change the stroke color or to clear the Stroke color.  We can also change the thickness of the stroke or the dash-style of the stroke using controls near the bottom of the window.
-
-A simple Text tool is also included [set stroke to None, set fill to Red, then create a text element that says "Vector Graphics are powerful"]
-
-I'd like to talk a bit about the tool panel near the top of the window.  Apart from some standard buttons on the left, which I'll go over in a minute, the rest of the panel is dedicated to context-sensitive tools.  This means that you only see controls on this toolbar for the tool and element you have selected.  For instance, when I select a Text element, I see controls to change the text contents, font family, font size and whether the text should be bold or italic.  If I select a rectangle, I see controls to change the rectangle's position, size and whether the rectangle should have rounded corners.
-
-You may have noticed that some buttons were available in both cases.  These controls manipulate the selected element.  For instance, you can delete an element or move it to the top of the stack.
-
-The final thing I'd like to talk about is the controls on the left.  These controls are always present.  There are the standard Undo/Redo buttons.  And there are the standard New Document or Save Document buttons.  Clicking New will wipe out all existing work.  Clicking Save will open a new tab in the browser containing your document.  You can then save this document to your desktop, publish it to a website or whatever.
-
-One final thing to mention:  because SVG-edit is a web application, it's quite trivial to embed the editor in a web page using nothing more than an HTML iframe element.  Here we see an entry on my blog in which I've done this very thing.
-
-SVG-edit is still in the beginning stages of development, there are a lot of features missing, but I hope this video has given you a sense of SVG-edit's capabilities and its ease of use.
-
-Thanks for watching!
\ No newline at end of file
--- a/htdocs/svg-edit/screencasts/svgedit-screencast-2.txt	Thu Feb 05 17:06:56 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,23 +0,0 @@
-Hi, this is Jeff Schiller and I'll be describing the new features in the latest release of SVG-edit, version 2.3.
-
-For those of you who didn't watch the first screencast, SVG-edit is an open source vector graphics editor that works in any modern browser that natively supports SVG.  This includes Firefox, Opera, Safari, and Chrome.
-
-The latest release of SVG-edit sports more than just a new logo, this release brings some powerful new features.  Features that you would expect of a first-class vector editor on your desktop.  So let's launch the 2.3 Demo [click]
-
-Probably the most significant new capability that SVG-edit brings is the ability to actually save and reload your work.  SVG-edit now comes with a source editor [click on editor], which means you can save your SVG files to your hard disk and then copy and paste them back into SVG-edit and continue your work.  You can also fine-tune the source of your drawing if there's something you want to do that isn't yet supported by the editor [add Jeff Schiller to comment and delete -->, show dialog].
-
-Another important addition in 2.3 is the ability to construct arbitrary polygons or connected line segments.  Once the shape is complete, click on the first point to close the shape or any other point if you want to leave it open.  Polys can be dragged and resized just like any other shape.  Click the shape again to edit the position of the points. [draw an arrow and position the points]
-
-Rotation is now supported on shapes.  There are a variety of ways to do this:  by drag-rotating the handle, by holding shift and pressing the left/right arrow keys or by adjusting the spinner control at the top. [rotate the arrow]
-
-The final major feature in SVG-edit 2.3 is the ability to pick linear gradients as fill/stroke paints instead of just solid colors.  The color picker now has two tabs, one for solid colors and one for gradients.  You choose the position of the begin and end stops and the color/opacity of each stop. [set fill on the black ellipse to a vert gradient from white to transparent]
-
-There are also several minor features worthy of note:
-
-Elements can now be copy-pasted using the Clone Tool.  Select any number of elements and click Clone (or press C) to get the copied elements.
-
-If you want fine-grained element navigation, you can use the keyboard shortcuts Shift-O and Shift-P to cycle forward or backward through elements on the canvas.
-
-Compared to desktop vector graphics editors, SVG-edit still has a long ways to go, but already pretty sophisticated artwork can be achieved [open mickey.svg].  It's also important to remember that SVG-edit runs directly in the browser, with no plugins required.  This means zero install hassle for users.  You don't even need a bleeding edge browser, any SVG-capable browser released for the last few years will just work.
-
-Thanks for watching.
--- a/htdocs/svg-edit/screencasts/svgedit-screencast-3.txt	Thu Feb 05 17:06:56 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,50 +0,0 @@
-SVG-edit 2.4
-------------
-
-Hi, this is Jeff Schiller and this is part one of two videos in which I'll be describing the new features in the latest release of SVG-edit 2.4.
-
-First, some background: SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG.  This includes Firefox, Opera, Safari and Chrome.  SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed.
-
-So Version 2.4, code-named Arbelos, is a significant improvement over the previous release:  SVG-edit has now evolved from a proof-of-concept demo into a full-featured application.
-
-In this video I'll talk about the new path tool and the concept of zooming, I'll also cover some of the improvements to the user interface.
-
-First up is the new path tool.  In SVG-edit 2.3, the user had the ability to create a connected series of line segments and polygons [Draw a polyline].  In 2.4, the Poly Tool has evolved into a general purpose Path tool that draw straight lines or curves.  To change a line segment into a curve, double-click on the starting point of that segment.  Users can also manipulate the look of the curve by moving control points.  Curves can be configured to be symmetrical by a push-button in the context panel.  As you can see, when I change the position of a control point, the opposite control point also moves.  The user also has the ability to add/delete segments to an existing path element.  One final note on paths: most graphical elements (rectangles, ellipses, etc) can now be converted into paths for finer editing.  This conversion is a one-way process, though it can be undone.
-
-So next I'm going to talk about zooming.  In 2.4, it is now possible to zoom in and out of a graphic.  Zooming can be achieved in a variety of ways:  Using the zoom control at the bottom left, you can type in a zoom percentage, use the spinner or pick a zoom level from the popup.  Also included in the popup are things like "Fit to selection", which can be quite handy.  Zooming is also possible via the Zoom tool on the left.  Select it, then drag the area you wish to zoom in on.  A final option is to just use the mousewheel to zoom the canvas quickly around the mouse pointer.
-
-From a usability perspective, we've created a Document Properties dialog, available by clicking on the button in the top panel.  This dialog box serves as housing for image and editor properties that are seldom accessed, but still important.
-
-In terms of image properties:
-
-	* Give the image a title
-	* Change the canvas size, or pick one of several options
-	(* You can choose to have all local raster images referenced via URL or embedded inline as a data: URL.  This will make your SVG image larger, but self-contained and thus, more portable.)
-
-In terms of editor properties:
-
-	* SVG-edit's entire user interface (tooltips, labels) is fully localizable, and SVG-edit has now been translated into 8 languages.  If you would like to contribute translation for a language, please contact us on the mailing list.
-	* Another nice feature is the ability to set the icon size of the editor, which can help with adapting SVG-edit to different environments (mobile devices, smaller netbooks, widescreen displays).
-	(* One final editor preference that can be changed is the canvas' colour.  For most situations, a white canvas might be fine for creating your graphic, but if you are trying to draw an image with a lot of white in it, you might find this option useful.)
-
-So that's it for this video.  In the next video I'll talk about grouping, layers and a few other features of SVG-edit 2.4.
-
-
---------------------
-
-Hi, this is Jeff Schiller and this is the second of two videos describing the new features in the latest release of SVG-edit 2.4, code-named Arbelos.
-
-If you missed the first video, SVG-edit is a web-based vector graphics editor that runs in any modern browser that supports SVG.  This includes Firefox, Opera, Safari and Chrome.  SVG-edit also runs in Internet Explorer with the Google Chrome Frame plugin installed.
-
-In the first video I gave an overview of the Path tool, Zooming and the new Document Properties dialog.  In this video I'll talk about grouping, layers and a couple other features that round out the release.
-
-So first is grouping.  In SVG-edit 2.3 one could draw graphical primitives such as ellipses, rectangles, lines and polygons - and those elements could be moved, resized, and rotated.  In 2.4 we've added the ability to arrange any number of elements together into a group.  Groups behave just like other element types: they can be moved, resized and rotated - and they can be added to larger groups to create even more complex objects.  You can copy/delete groups just like any other element.  Ungrouping a group allows you to manipulate the elements individually again.
-
-The next thing I'll talk about is Layers.  The Layers panel lies tucked to the side but can be clicked or dragged open at any time.  Layers work very much like they do in other drawing programs: you can create new layers, rename them, change the order and delete them.  Elements not on the current layer are not selectable, so it's an excellent way to separate elements in your drawing so that you can work on them without interfering with other parts of the drawing.  If you want to move elements between layers, select them, then select the layer you want to move them to.
-
-There are a couple of other minor features that round out SVG-edit 2.4:
-	* It is now possible to embed raster images (via URL) into the canvas using the Image tool on the left
-	* It is also possible to keep the ratio of any element fixed when resizing by holding down the shift key.
-	* Finally, if the canvas is starting to become obscured, you can turn on 'wireframe mode' which shows the outline of all shapes in your drawing, but none of the fill or stroke properties.
-
-There are several minor features that I didn't have time to talk about, but feel free to browse to the project page and try out the demo.  Thanks for your time.
\ No newline at end of file
--- a/htdocs/svg-edit/screencasts/svgopen2010/index.html	Thu Feb 05 17:06:56 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,297 +0,0 @@
-<!DOCTYPE html>
-<!--
-  Copyright 2010 Google Inc.
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
-  Original slides: Marcin Wichary (mwichary@google.com)
-  Modifications: Ernest Delgado (ernestd@google.com)
-                 Alex Russell (slightlyoff@chromium.org)
-                 Brad Neuberg
-  SVG-edit presentation: Pavol Rusnak (stick@gk2.sk)
--->
-<html>
-  <head>
-    <!--[if gte IE 9]>
-      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <![endif]-->
-
-    <!--[if lt IE 9]>
-      <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
-    <![endif]-->
-
-    <meta charset="utf-8" />
-    <title>SVG-edit, Pavol Rusnák, SVG Open 2010, Paris</title>
-    <link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet" type="text/css" />
-    <link type="text/css" rel="stylesheet" href="style.css" />
-
-  </head>
-  <body>
-    <div class="presentation">
-      <div id="presentation-counter"></div>
-      <div class="slides">
-
-        <div class="slide">
-          <section class="middle">
-            <h1 style="font-size: 220%;">SVG-edit</h1>
-            <p><img src="logo.svg" alt="logo" width="30%" height="30%" /></p>
-            <h2>Pavol Rusnák</h2>
-            <h3>SVG Open 2010, Paris</h3>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>SVG-edit is ...</h2>
-           </header>
-            <ul class="bulleted">
-              <li>a web-based, JavaScript-driven SVG editor that works in any modern browser</li>
-              <li>not a full replacement for Inkscape (yet :-P)</li>
-              <li>licensed under very liberal open source license (Apache License 2.0)</li>
-              <li>platform for other projects which need to edit SVG documents</li>
-              <li>pushing browsers to find their limits</li>
-              <li>always up-to-date</li>
-            </ul>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>History: 1.0 (13th Feb 2009)</h2>
-           </header>
-            <ul class="bulleted">
-              <li>draw path, line, freehand-circle, rectangle</li>
-              <li>clear drawn image</li>
-              <li>delete element</li>
-              <li>save image</li>
-              <li>&rarr; Narendra Sisodiya</li>
-            </ul>
-            <p><a href="http://svg-edit.googlecode.com/svn/branches/1.0/svg-editor.html">_</a></p>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>History: 2.0 (3rd June 2009)</h2>
-           </header>
-            <ul class="bulleted">
-              <li>draw ellipse, square</li>
-              <li>change line style (stroke-dasharray)</li>
-              <li>rearranged whole code to utilize OOP</li>
-              <li>GUI enhancement</li>
-              <li>&rarr; Pavol Rusnák</li>
-            </ul>
-            <p><a href="http://svg-edit.googlecode.com/svn/branches/2.0/svg-editor.html">_</a></p>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>History: 2.1 (17th June 2009)</h2>
-           </header>
-            <ul class="bulleted">
-              <li>tooltips added to all UI elements</li>
-              <li>edit of fill opacity, stroke opacity, group opacity</li>
-              <li>selection of elements</li>
-              <li>move/drag of elements</li>
-              <li>save SVG file to separate tab</li>
-              <li>create and edit text elements</li>
-              <li>contextual panel of tools</li>
-              <li>change rect radius, font-family, font-size</li>
-              <li>keystroke handling</li>
-              <li>&rarr; Jeff Schiller</li>
-            </ul>
-            <p><a href="http://svg-edit.googlecode.com/svn/branches/2.1/editor/svg-editor.html">_</a></p>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>History: 2.2 (8th July 2009)</h2>
-           </header>
-            <ul class="bulleted">
-              <li>multiselect mode</li>
-              <li>undo/redo actions</li>
-              <li>resize elements</li>
-              <li>contextual tools for rect, circle, ellipse, line, text elements</li>
-              <li>some updated button images</li>
-              <li>stretched the UI to fit the browser window</li>
-              <li>resizing of the SVG canvas</li>
-            </ul>
-            <p><a href="http://svg-edit.googlecode.com/svn/branches/2.2/editor/svg-editor.html">_</a></p>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>History: 2.3 (8th Sept 2009)</h2>
-           </header>
-            <ul class="bulleted">
-              <li>align objects</li>
-              <li>rotate objects</li>
-              <li>clone objects</li>
-              <li>select next/prev object</li>
-              <li>edit SVG source</li>
-              <li>gradient picking</li>
-              <li>polygon mode</li>
-              <li>&rarr; Alexis Deveria</li>
-            </ul>
-            <p><a href="http://svg-edit.googlecode.com/svn/branches/2.3/editor/svg-editor.html">_</a></p>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>History: 2.4 Arbelos (11th Jan 2010)</h2>
-           </header>
-            <ul class="bulleted">
-              <li>include raster images</li>
-              <li>select non-adjacent elements</li>
-              <li>group/ungroup</li>
-              <li>zoom</li>
-              <li>layers</li>
-              <li>curve segments in paths</li>
-              <li>UI localization</li>
-              <li>wireframe mode</li>
-              <li>change background</li>
-              <li>convert shapes to path</li>
-            </ul>
-            <p><a href="http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html">_</a></p>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>History: 2.5 Bicorn (15th June 2010)</h2>
-           </header>
-            <ul class="bulleted">
-              <li>open local files (Firefox 3.6+, Chrome 6+ only)</li>
-              <li>import SVG into drawing (Firefox 3.6+, Chrome 6+ only)</li>
-              <li>connector lines and arrows</li>
-              <li>smoother freehand paths</li>
-              <li>editing outside the canvas</li>
-              <li>increased support for SVG elements</li>
-              <li>add/edit sub-paths</li>
-              <li>multiple path segment selection</li>
-              <li>support for foreign markup (MathML)</li>
-              <li>radial gradients</li>
-              <li>eye-dropper tool</li>
-              <li>stroke linejoin and linecap</li>
-              <li>export to PNG</li>
-            </ul>
-            <p><a href="http://svg-edit.googlecode.com/svn/branches/2.5/editor/svg-editor.html">_</a></p>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>Plugin Architecture</h2>
-           </header>
-           <pre>
-svgEditor.addExtension("Hello World", function() {
-
-        return {
-                svgicons: "extensions/helloworld-icon.xml",
-                buttons: [{...}],
-                mouseDown: function() {
-                        ...
-                },
-
-                mouseUp: function(opts) {
-                        ...
-                }
-        };
-});</pre>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>Features in progress (for 2.6 Cycloid)</h2>
-           </header>
-            <ul class="bulleted">
-              <li>IE9 support</li>
-              <li>context menus</li>
-              <li>path clipping</li>
-              <li>support for &lt;a&gt; element</li>
-              <li><a href="http://10k.aneventapart.com/Entry/319">advanced gradient editor</a> (more stops, elliptic fills)</li>
-              <li>shape library tool</li>
-              <li>linking off to clipart/image library sites</li>
-            </ul>
-            <p><a href="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html">_</a></p>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>Projects based on SVG-edit</h2>
-           </header>
-            <ul class="bulleted">
-              <li>Firefox add-on</li>
-              <li>Opera widget</li>
-              <li>Google Wave gadget</li>
-              <li>Wiki extensions (Dokuwiki, Instiki, MoinMoin, XWiki)</li>
-              <li><a href="http://www.cloud-canvas.com/cloudcanvas.php">Cloud Canvas</a></li>
-              <li>Eduvid</li>
-              <li>Sesame</li>
-            </ul>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section>
-           <header>
-            <h2>Resources</h2>
-           </header>
-            <ul class="bulleted">
-              <li><a href="http://svg-edit.googlecode.com">http://svg-edit.googlecode.com/</a> (demos, downloads, source, wiki, issue tracker)</li>
-              <li>#svg-edit on irc.freenode.net</li>
-              <li><a href="http://groups.google.com/group/svg-edit">http://groups.google.com/group/svg-edit</a></li>
-              <li><a href="http://en.wikipedia.org/wiki/SVG-edit">http://en.wikipedia.org/wiki/SVG-edit</a></li>
-            </ul>
-          </section>
-        </div>
-
-        <div class="slide">
-          <section class="middle">
-            <h2>Thank you!</h2>
-            <h3>Questions?</h3>
-          </section>
-        </div>
-
-      </div> <!-- slides -->
-
-    </div> <!-- presentation -->
-
-    <script src="script.js"></script>
-
-    <!--[if lt IE 9]>
-    <script
-      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
-    </script>
-        <script>CFInstall.check({ mode: "overlay" });</script>
-    <![endif]-->
-
-  </body>
-</html>
--- a/htdocs/svg-edit/screencasts/svgopen2010/logo.svg	Thu Feb 05 17:06:56 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,32 +0,0 @@
-<svg viewBox="0 0 478 472" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
- <defs>
-  <linearGradient id="svg_5" x1="0" y1="0" x2="1" y2="1">
-   <stop offset="0" stop-color="#ffffe0" stop-opacity="1"/>
-   <stop offset="1" stop-color="#edc39c" stop-opacity="1"/>
-  </linearGradient>
-  <linearGradient id="svg_10" x1="0.57031" y1="0.78125" x2="0.28906" y2="0.41406">
-   <stop offset="0" stop-color="#ff7f00" stop-opacity="1"/>
-   <stop offset="1" stop-color="#ffff00"/>
-  </linearGradient>
-  <linearGradient id="svg_18" x1="0.37891" y1="0.35938" x2="1" y2="1">
-   <stop offset="0" stop-color="#e0e0e0" stop-opacity="1"/>
-   <stop offset="1" stop-color="#666666" stop-opacity="1"/>
-  </linearGradient>
- </defs>
- <g>
-  <title>Layer 1</title>
-  <path d="m68.82031,270.04688l-22,-33l17,-35l34,2l25,15l7,-35l28,-16l25,12l100,102l21,23l-15,35l-36,9l20,49l-31,24l-49,-17l-1,31l-33,21l-31,-19l-13,-35l-30,21l-30,-9l-5,-35l16,-31l-32,-6l-15,-19l3,-36l47,-18z" id="svg_19" fill="#ffffff"/>
-  <path fill="#1a171a" fill-rule="nonzero" id="path2902" d="m158.96452,155.03685c-25.02071,0 -45.37077,20.35121 -45.37077,45.3775c0,0.72217 0.01794,1.4399 0.0471,2.15645c-0.49339,-0.53604 -0.99355,-1.06085 -1.50603,-1.58452c-8.56077,-8.55519 -19.95982,-13.28413 -32.07432,-13.28413c-12.12122,0 -23.52027,4.72334 -32.08778,13.29646c-17.69347,17.69464 -17.69347,46.4619 0,64.17445c0.51809,0.51697 1.0485,1.0126 1.59015,1.50601c-0.72891,-0.03586 -1.45782,-0.04822 -2.19234,-0.04822c-25.02071,0 -45.37189,20.35117 -45.37189,45.37747c0,25.01398 20.35119,45.36517 45.37189,45.36517c0.72891,0 1.45221,-0.01236 2.1744,-0.04828c-0.5293,0.48221 -1.05412,0.98801 -1.56547,1.49368c-17.70021,17.68906 -17.70021,46.48654 -0.00628,64.18677c8.57872,8.56747 19.96655,13.2785 32.08778,13.2785c12.1145,0 23.5012,-4.71103 32.07433,-13.2785c0.51247,-0.51694 1.01823,-1.04849 1.50603,-1.57895c-0.02915,0.71213 -0.04709,1.44669 -0.04709,2.15759c0,25.01511 20.35007,45.37747 45.37077,45.37747c25.01398,0 45.37079,-20.3624 45.37079,-45.37747c0,-0.7222 -0.01689,-1.44553 -0.05266,-2.18112c0.48105,0.52933 0.97562,1.04849 1.48697,1.56662c8.57982,8.57977 19.97775,13.2908 32.1057,13.2908c12.11003,0 23.51358,-4.71103 32.0687,-13.2785c17.68906,-17.70013 17.68906,-46.48538 0,-64.17441c-0.50577,-0.4946 -1.01141,-1.00034 -1.54306,-1.48248c0.69983,0.03592 1.42316,0.04828 2.16992,0.04828c25.01514,0 45.35284,-20.35123 45.35284,-45.36517c0,-25.02631 -20.33774,-45.37747 -45.35284,-45.37747c-0.74683,0 -1.47009,0.01236 -2.19345,0.04822c0.53152,-0.49341 1.06082,-0.98904 1.59128,-1.50601c8.55521,-8.55521 13.2785,-19.94186 13.2785,-32.07545c0,-12.12793 -4.72336,-23.52028 -13.30319,-32.0934c-8.55515,-8.56076 -19.95866,-13.2841 -32.0687,-13.2841c-12.12122,0 -23.52025,4.72334 -32.08777,13.2841c-0.51137,0.5181 -1.01822,1.04851 -1.5049,1.57895c0.03586,-0.72331 0.05266,-1.43991 0.05266,-2.16881c0,-25.02629 -20.35681,-45.3775 -45.37079,-45.3775m0,20.71901c13.61607,0 24.65851,11.03122 24.65851,24.65849c0,6.62749 -2.651,12.62137 -6.9101,17.04979l0,51.67419l36.53975,-36.53523c0.12001,-6.14418 2.48277,-12.24686 7.18146,-16.94667c4.81305,-4.81305 11.12094,-7.22409 17.44116,-7.22409c6.30228,0 12.61577,2.41104 17.43552,7.22409c9.62166,9.63287 9.62166,25.24948 0,34.87669c-4.69977,4.68634 -10.80803,7.04915 -16.95334,7.18147l-36.5341,36.53305l51.66742,0c4.42841,-4.25351 10.42905,-6.90451 17.08008,-6.90451c13.59137,0 24.62933,11.03799 24.62933,24.66525c0,13.61606 -11.03796,24.66519 -24.62933,24.66519c-6.65106,0 -12.65167,-2.66333 -17.08008,-6.91681l-51.64836,0l36.50273,36.50946c6.16995,0.14465 12.26587,2.50522 16.96568,7.20618c9.6216,9.61487 9.6216,25.23151 0,34.85757c-4.80856,4.81979 -11.13327,7.22974 -17.43556,7.22974c-6.32019,0 -12.63371,-2.40991 -17.44786,-7.22974c-4.68074,-4.68744 -7.04802,-10.79572 -7.17473,-16.94098l-36.53975,-36.53415l0,51.66742c4.25908,4.44635 6.9101,10.43466 6.9101,17.0621c0,13.62729 -11.04243,24.66415 -24.65851,24.66415c-13.62166,0 -24.65848,-11.0369 -24.65848,-24.66415c0,-6.62744 2.64539,-12.61575 6.90335,-17.0621l0,-51.66742l-36.53864,36.54648c-0.12672,6.14413 -2.48838,12.26477 -7.18147,16.94098c-4.81416,4.81873 -11.12206,7.22974 -17.42882,7.22974c-6.31461,0 -12.6225,-2.41101 -17.43555,-7.22974c-9.63284,-9.62833 -9.63284,-25.24277 0,-34.8699c4.68073,-4.67627 10.79012,-7.05026 16.94101,-7.18262l36.533,-36.53302l-51.66632,0c-4.44075,4.25348 -10.42902,6.91681 -17.06211,6.91681c-13.61606,0 -24.65288,-11.04913 -24.65288,-24.66519c0,-13.62726 11.03682,-24.66525 24.65288,-24.66525c6.63309,0 12.62136,2.651 17.06211,6.90451l51.68537,0l-36.55208,-36.54538c-6.14527,-0.12 -12.25354,-2.49403 -16.94775,-7.19377c-9.62611,-9.61493 -9.62611,-25.23715 0,-34.86441c4.81419,-4.81305 11.12769,-7.22406 17.44228,-7.22406c6.30676,0 12.61465,2.41101 17.42883,7.22406c4.69978,4.69307 7.06034,10.80246 7.18144,16.94777l36.5386,36.53299l0,-51.66074c-4.25795,-4.42841 -6.90334,-10.42229 -6.90334,-17.04979c0,-13.62726 11.03682,-24.65848 24.65848,-24.65848"/>
-  <path d="m188.82031,210.04688l16,-47l155,-148l107,100l-158,156.99999l-44,12l-76,-74z" id="svg_6" fill="url(#svg_10)" stroke="#ffffff" stroke-width="0"/>
-  <path d="m335.57031,40.29688c-11.5,39.75 55.5,115.25 109.25,98.75l21,-20.99999l-103,-101l-27.25,23.25z" id="svg_11" fill="url(#svg_18)" stroke="#ffffff" stroke-width="0"/>
-  <rect x="272.80404" y="20.76382" width="42.35197" height="232.66835" id="svg_13" fill="#ffffff" stroke="#ffffff" stroke-width="0" transform="rotate(45.9094, 293.98, 137.1)" opacity="0.4"/>
-  <rect x="282.80404" y="22.76382" width="14" height="232.66835" fill="#ffffff" stroke="#ffffff" stroke-width="0" transform="rotate(45.9094, 289.805, 139.1)" opacity="0.4" id="svg_14"/>
-  <ellipse cx="415.13312" cy="64.38066" id="svg_12" fill="#ea7598" stroke="#ffffff" stroke-width="0" rx="67.79251" ry="34.82026" transform="rotate(39.4735, 415.133, 64.379)"/>
-  <path d="m212.07031,166.04688c-8.5,47 36.25,103.75 99.25,96.75l-152.5,53.25l53.25,-150z" id="svg_4" fill="url(#svg_5)" stroke="#ffffff" stroke-width="0"/>
-  <path d="m181.32031,242.54688c0.5,20.5 26.75,45 46.75,48.5l-66.25,20l19.5,-68.5z" id="svg_3" fill="#27382f" stroke="#ffffff" stroke-width="0"/>
- </g>
- <g>
-  <title>Layer 2</title>
-  <path d="m152.82031,317.04688l51,-152l157,-153c40,-12.00001 118,48 105,105l-157,152.99999l-156,47z" id="svg_1" fill="none" stroke="#800000" stroke-width="17"/>
- </g>
-</svg>
--- a/htdocs/svg-edit/screencasts/svgopen2010/script.js	Thu Feb 05 17:06:56 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,390 +0,0 @@
-      (function() {
-        var doc = document;
-        var disableBuilds = true;
-
-        var ctr = 0;
-        var spaces = /\s+/, a1 = [''];
-
-        var toArray = function(list) {
-          return Array.prototype.slice.call(list || [], 0);
-        };
-
-        var byId = function(id) {
-          if (typeof id == 'string') { return doc.getElementById(id); }
-          return id;
-        };
-
-        var query = function(query, root) {
-          if (!query) { return []; }
-          if (typeof query != 'string') { return toArray(query); }
-          if (typeof root == 'string') {
-            root = byId(root);
-            if(!root){ return []; }
-          }
-
-          root = root || document;
-          var rootIsDoc = (root.nodeType == 9);
-          var doc = rootIsDoc ? root : (root.ownerDocument || document);
-
-          // rewrite the query to be ID rooted
-          if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
-            root.id = root.id || ('qUnique' + (ctr++));
-            query = '#' + root.id + ' ' + query;
-          }
-          // don't choke on something like ".yada.yada >"
-          if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }
-
-          return toArray(doc.querySelectorAll(query));
-        };
-
-        var strToArray = function(s) {
-          if (typeof s == 'string' || s instanceof String) {
-            if (s.indexOf(' ') < 0) {
-              a1[0] = s;
-              return a1;
-            } else {
-              return s.split(spaces);
-            }
-          }
-          return s;
-        };
-
-        var addClass = function(node, classStr) {
-          classStr = strToArray(classStr);
-          var cls = ' ' + node.className + ' ';
-          for (var i = 0, len = classStr.length, c; i < len; ++i) {
-            c = classStr[i];
-            if (c && cls.indexOf(' ' + c + ' ') < 0) {
-              cls += c + ' ';
-            }
-          }
-          node.className = cls.trim();
-        };
-
-        var removeClass = function(node, classStr) {
-          var cls;
-          if (classStr !== undefined) {
-            classStr = strToArray(classStr);
-            cls = ' ' + node.className + ' ';
-            for (var i = 0, len = classStr.length; i < len; ++i) {
-              cls = cls.replace(' ' + classStr[i] + ' ', ' ');
-            }
-            cls = cls.trim();
-          } else {
-            cls = '';
-          }
-          if (node.className != cls) {
-            node.className = cls;
-          }
-        };
-
-        var toggleClass = function(node, classStr) {
-          var cls = ' ' + node.className + ' ';
-          if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
-            removeClass(node, classStr);
-          } else {
-            addClass(node, classStr);
-          }
-        };
-
-        var ua = navigator.userAgent;
-        var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined;
-        var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined;
-        var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;
-
-        var canTransition = (function() {
-          var ver = parseFloat(ua.split('Version/')[1]) || undefined;
-          // test to determine if this browser can handle CSS transitions.
-          var cachedCanTransition =
-            (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
-          return function() { return cachedCanTransition; }
-        })();
-
-        //
-        // Slide class
-        //
-        var Slide = function(node, idx) {
-          this._node = node;
-          if (idx >= 0) {
-            this._count = idx + 1;
-          }
-          if (this._node) {
-            addClass(this._node, 'slide distant-slide');
-          }
-          this._makeCounter();
-          this._makeBuildList();
-        };
-
-        Slide.prototype = {
-          _node: null,
-          _count: 0,
-          _buildList: [],
-          _visited: false,
-          _currentState: '',
-          _states: [ 'distant-slide', 'far-past',
-                     'past', 'current', 'future',
-                     'far-future', 'distant-slide' ],
-          setState: function(state) {
-            if (typeof state != 'string') {
-              state = this._states[state];
-            }
-            if (state == 'current' && !this._visited) {
-              this._visited = true;
-              this._makeBuildList();
-            }
-            removeClass(this._node, this._states);
-            addClass(this._node, state);
-            this._currentState = state;
-
-            // delay first auto run. Really wish this were in CSS.
-            /*
-            this._runAutos();
-            */
-            var _t = this;
-            setTimeout(function(){ _t._runAutos(); } , 400);
-          },
-          _makeCounter: function() {
-            if(!this._count || !this._node) { return; }
-            var c = doc.createElement('span');
-            c.innerHTML = this._count;
-            c.className = 'counter';
-            this._node.appendChild(c);
-          },
-          _makeBuildList: function() {
-            this._buildList = [];
-            if (disableBuilds) { return; }
-            if (this._node) {
-              this._buildList = query('[data-build] > *', this._node);
-            }
-            this._buildList.forEach(function(el) {
-              addClass(el, 'to-build');
-            });
-          },
-          _runAutos: function() {
-            if (this._currentState != 'current') {
-              return;
-            }
-            // find the next auto, slice it out of the list, and run it
-            var idx = -1;
-            this._buildList.some(function(n, i) {
-              if (n.hasAttribute('data-auto')) {
-                idx = i;
-                return true;
-              }
-              return false;
-            });
-            if (idx >= 0) {
-              var elem = this._buildList.splice(idx, 1)[0];
-              var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
-              var _t = this;
-              if (canTransition()) {
-                var l = function(evt) {
-                  elem.parentNode.removeEventListener(transitionEnd, l, false);
-                  _t._runAutos();
-                };
-                elem.parentNode.addEventListener(transitionEnd, l, false);
-                removeClass(elem, 'to-build');
-              } else {
-                setTimeout(function() {
-                  removeClass(elem, 'to-build');
-                  _t._runAutos();
-                }, 400);
-              }
-            }
-          },
-          buildNext: function() {
-            if (!this._buildList.length) {
-              return false;
-            }
-            removeClass(this._buildList.shift(), 'to-build');
-            return true;
-          },
-        };
-
-        //
-        // SlideShow class
-        //
-        var SlideShow = function(slides) {
-          this._slides = (slides || []).map(function(el, idx) {
-            return new Slide(el, idx);
-          });
-
-          var h = window.location.hash;
-          try {
-            this.current = parseInt(h.split('#slide')[1], 10);
-          }catch (e) { /* squeltch */ }
-          this.current = isNaN(this.current) ? 1 : this.current;
-          var _t = this;
-          doc.addEventListener('keydown',
-              function(e) { _t.handleKeys(e); }, false);
-          doc.addEventListener('mousewheel',
-              function(e) { _t.handleWheel(e); }, false);
-          doc.addEventListener('DOMMouseScroll',
-              function(e) { _t.handleWheel(e); }, false);
-          doc.addEventListener('touchstart',
-              function(e) { _t.handleTouchStart(e); }, false);
-          doc.addEventListener('touchend',
-              function(e) { _t.handleTouchEnd(e); }, false);
-          window.addEventListener('popstate',
-              function(e) { _t.go(e.state); }, false);
-          this._update();
-        };
-
-        SlideShow.prototype = {
-          _slides: [],
-          _update: function(dontPush) {
-            document.querySelector('#presentation-counter').innerText = this.current;
-            if (history.pushState) {
-              if (!dontPush) {
-                history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
-              }
-            } else {
-              window.location.hash = 'slide' + this.current;
-            }
-            for (var x = this.current-1; x < this.current + 7; x++) {
-              if (this._slides[x-4]) {
-                this._slides[x-4].setState(Math.max(0, x-this.current));
-              }
-            }
-          },
-
-          current: 0,
-          next: function() {
-            if (!this._slides[this.current-1].buildNext()) {
-              this.current = Math.min(this.current + 1, this._slides.length);
-              this._update();
-            }
-          },
-          prev: function() {
-            this.current = Math.max(this.current-1, 1);
-            this._update();
-          },
-          go: function(num) {
-            if (history.pushState && this.current != num) {
-              history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
-            }
-            this.current = num;
-            this._update(true);
-          },
-
-          _notesOn: false,
-          showNotes: function() {
-            var isOn = this._notesOn = !this._notesOn;
-            query('.notes').forEach(function(el) {
-              el.style.display = (notesOn) ? 'block' : 'none';
-            });
-          },
-          switch3D: function() {
-            toggleClass(document.body, 'three-d');
-          },
-          handleWheel: function(e) {
-            var delta = 0;
-            if (e.wheelDelta) {
-              delta = e.wheelDelta/120;
-              if (isOpera) {
-                delta = -delta;
-              }
-            } else if (e.detail) {
-              delta = -e.detail/3;
-            }
-
-            if (delta > 0 ) {
-              this.prev();
-              return;
-            }
-            if (delta < 0 ) {
-              this.next();
-              return;
-            }
-          },
-          handleKeys: function(e) {
-
-            if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
-
-            switch (e.keyCode) {
-              case 37: // left arrow
-                this.prev(); break;
-              case 39: // right arrow
-              case 32: // space
-                this.next(); break;
-              case 50: // 2
-                this.showNotes(); break;
-              case 51: // 3
-                this.switch3D(); break;
-            }
-          },
-          _touchStartX: 0,
-          handleTouchStart: function(e) {
-            this._touchStartX = e.touches[0].pageX;
-          },
-          handleTouchEnd: function(e) {
-            var delta = this._touchStartX - e.changedTouches[0].pageX;
-            var SWIPE_SIZE = 150;
-            if (delta > SWIPE_SIZE) {
-              this.next();
-            } else if (delta< -SWIPE_SIZE) {
-              this.prev();
-            }
-          },
-        };
-
-        // Initialize
-        var slideshow = new SlideShow(query('.slide'));
-
-
-
-
-
-        document.querySelector('#toggle-counter').addEventListener('click', toggleCounter, false);
-        document.querySelector('#toggle-size').addEventListener('click', toggleSize, false);
-        document.querySelector('#toggle-transitions').addEventListener('click', toggleTransitions, false);
-        document.querySelector('#toggle-gradients').addEventListener('click', toggleGradients, false);
-
-
-        var counters = document.querySelectorAll('.counter');
-        var slides = document.querySelectorAll('.slide');
-
-        function toggleCounter() {
-          toArray(counters).forEach(function(el) {
-            el.style.display = (el.offsetHeight) ? 'none' : 'block';
-          });
-        }
-
-        function toggleSize() {
-          toArray(slides).forEach(function(el) {
-            if (!/reduced/.test(el.className)) {
-              addClass(el, 'reduced');
-            }
-            else {
-              removeClass(el, 'reduced');
-            }
-          });
-        }
-
-        function toggleTransitions() {
-          toArray(slides).forEach(function(el) {
-            if (!/no-transitions/.test(el.className)) {
-              addClass(el, 'no-transitions');
-            }
-            else {
-              removeClass(el, 'no-transitions');
-            }
-          });
-        }
-
-        function toggleGradients() {
-          toArray(slides).forEach(function(el) {
-            if (!/no-gradients/.test(el.className)) {
-              addClass(el, 'no-gradients');
-            }
-            else {
-              removeClass(el, 'no-gradients');
-            }
-          });
-        }
-
-
-
-
-
-      })();
--- a/htdocs/svg-edit/screencasts/svgopen2010/style.css	Thu Feb 05 17:06:56 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,395 +0,0 @@
-      body {
-        font: 20px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
-        padding: 0;
-        margin: 0;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        left: 0px; top: 0px;
-      }
-
-      .presentation {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        left: 0px;
-        top: 0px;
-        display: block;
-        overflow: hidden;
-        background: #778;
-      }
-
-      .slides {
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        position: absolute;
-        display: block;
-        -webkit-transition: -webkit-transform 1s ease-in-out;
-        -moz-transition: -moz-transform 1s ease-in-out;
-        -o-transition: -o-transform 1s ease-in-out;
-        transition: transform 1s ease-in-out;
-
-        /* so it's visible in the iframe. */
-        -webkit-transform: scale(0.8);
-        -moz-transform: scale(0.8);
-        -o-transform: scale(0.8);
-        transform: scale(0.8);
-
-      }
-
-      .slide {
-        display: none;
-        position: absolute;
-        overflow: hidden;
-        width: 900px;
-        height: 700px;
-        left: 50%;
-        top: 50%;
-        margin-top: -350px;
-        background-color: #eee;
-        background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
-        background: -moz-linear-gradient(bottom, #bbd, #fff);
-        background: linear-gradient(bottom, #bbd, #fff);
-        -webkit-transition: all 0.25s ease-in-out;
-        -moz-transition: all 0.25s ease-in-out;
-        -o-transition: all 0.25s ease-in-out;
-        transition: all 0.25s ease-in-out;
-        -webkit-transform: scale(1);
-        -moz-transform: scale(1);
-        -o-transform: scale(1);
-        transform: scale(1);
-      }
-
-      .slide:nth-child(even) {
-        -moz-border-radius: 20px 0;
-        -khtml-border-radius: 20px 0;
-        border-radius: 20px 0; /* includes Opera 10.5+ */
-        -webkit-border-top-left-radius: 20px;
-        -webkit-border-bottom-right-radius: 20px;
-      }
-
-      .slide:nth-child(odd) {
-        -moz-border-radius: 0 20px;
-        -khtml-border-radius: 0 20px;
-        border-radius: 0 20px;
-        -webkit-border-top-right-radius: 20px;
-        -webkit-border-bottom-left-radius: 20px;
-      }
-
-      .slide p, .slide textarea {
-        font-size: 120%;
-      }
-
-      .slide .counter {
-        color: #999999;
-        position: absolute;
-        left: 20px;
-        bottom: 20px;
-        display: block;
-        font-size: 70%;
-      }
-
-      .slide.title > .counter,
-      .slide.segue > .counter,
-      .slide.mainTitle > .counter {
-        display: none;
-      }
-
-      .force-render {
-        display: block;
-        visibility: hidden;
-      }
-
-      .slide.far-past {
-        display: block;
-        margin-left: -2400px;
-      }
-
-      .slide.past {
-        visibility: visible;
-        display: block;
-        margin-left: -1400px;
-      }
-
-      .slide.current {
-        visibility: visible;
-        display: block;
-        margin-left: -450px;
-      }
-
-      .slide.future {
-        visibility: visible;
-        display: block;
-        margin-left: 500px;
-      }
-
-      .slide.far-future {
-        display: block;
-        margin-left: 1500px;
-      }
-
-      body.three-d div.slides {
-        -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
-        -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
-        -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
-        transform: translateX(50px) scale(0.8) rotateY(10deg);
-      }
-
-      /* Content */
-
-      @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }
-      @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }
-
-      header {
-        font-family: 'Droid Sans';
-        font-weight: normal;
-        letter-spacing: -.05em;
-        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
-        left: 30px;
-        top: 25px;
-        margin: 0;
-        padding: 0;
-        font-size: 140%;
-      }
-
-      h1 {
-        font-size: 140%;
-        display: inline;
-        font-weight: normal;
-        padding: 0;
-        margin: 0;
-      }
-
-      h2 {
-        font-family: 'Droid Sans';
-        color: black;
-        font-size: 120%;
-        padding: 0;
-        margin: 20px 0;
-      }
-
-      h2:first-child {
-        margin-top: 0;
-      }
-
-      section, footer {
-        font-family: 'Droid Sans';
-        color: #3f3f3f;
-        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
-        margin: 100px 30px 0;
-        display: block;
-        overflow: hidden;
-      }
-
-      footer {
-        font-size: 100%;
-        margin: 20px 0 0 30px;
-      }
-
-      a {
-        color: inherit;
-        display: inline-block;
-        text-decoration: none;
-        line-height: 110%;
-        border-bottom: 2px solid #3f3f3f;
-      }
-
-      ul {
-        margin: 0;
-        padding: 0;
-      }
-
-      li {
-        margin: 2%;
-      }
-
-      button {
-        font-size: 100%;
-      }
-
-      pre button {
-        margin: 2px;
-      }
-
-      section.left {
-        float: left;
-        width: 390px;
-      }
-
-      section.small {
-        font-size: 24px;
-      }
-
-      section.small ul {
-        margin: 0 0 0 15px;
-        padding: 0;
-      }
-
-      section.small li {
-        padding-bottom: 0;
-      }
-
-      section.middle {
-        line-height: 2em;
-        text-align: center;
-        display: table-cell;
-        vertical-align: middle;
-        height: 700px;
-        width: 900px;
-      }
-
-      pre {
-        text-align: left;
-        font-family: 'Droid Sans Mono', Courier;
-        font-size: 80%;
-        padding: 10px 20px;
-        background: rgba(255, 0, 0, 0.05);
-        -webkit-border-radius: 8px;
-        -khtml-border-radius: 8px;
-        -moz-border-radius: 8px;
-        border-radius: 8px;
-        border: 1px solid rgba(255, 0, 0, 0.2);
-      }
-
-      pre select {
-        font-family: Monaco, Courier;
-        border: 1px solid #c61800;
-      }
-
-      input {
-        font-size: 100%;
-        margin-right: 10px;
-        font-family: Helvetica;
-        padding: 3px;
-      }
-      input[type="range"] {
-        width: 100%;
-      }
-
-      button {
-        margin: 20px 10px 0 0;
-        font-family: Verdana;
-      }
-
-      button.large {
-        font-size: 32px;
-      }
-
-      pre b {
-        font-weight: normal;
-        color: #c61800;
-        text-shadow: #c61800 0 0 1px;
-        /*letter-spacing: -1px;*/
-      }
-      pre em {
-        font-weight: normal;
-        font-style: normal;
-        color: #18a600;
-        text-shadow: #18a600 0 0 1px;
-      }
-      pre input[type="range"] {
-        height: 6px;
-        cursor: pointer;
-        width: auto;
-      }
-
-      div.example {
-        display: block;
-        padding: 10px 20px;
-        color: black;
-        background: rgba(255, 255, 255, 0.4);
-        -webkit-border-radius: 8px;
-        -khtml-border-radius: 8px;
-        -moz-border-radius: 8px;
-        border-radius: 8px;
-        margin-bottom: 10px;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-
-      video {
-        -moz-border-radius: 8px;
-        -khtml-border-radius: 8px;
-        -webkit-border-radius: 8px;
-        border-radius: 8px;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-
-      .key {
-        font-family: 'Droid Sans';
-        color: black;
-        display: inline-block;
-        padding: 6px 10px 3px 10px;
-        font-size: 100%;
-        line-height: 30px;
-        text-shadow: none;
-        letter-spacing: 0;
-        bottom: 10px;
-        position: relative;
-        -moz-border-radius: 10px;
-        -khtml-border-radius: 10px;
-        -webkit-border-radius: 10px;
-        border-radius: 10px;
-        background: white;
-        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
-        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
-        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
-        -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
-      }
-
-      .key { font-family: Arial; }
-
-      :not(header) > .key {
-        margin: 0 5px;
-        bottom: 4px;
-      }
-
-      .two-column {
-        -webkit-column-count: 2;
-        -moz-column-count: 2;
-        column-count: 2;
-      }
-
-      .stroke {
-        -webkit-text-stroke-color: red;
-        -webkit-text-stroke-width: 1px;
-      } /* currently webkit-only */
-
-      .center {
-        text-align: center;
-      }
-
-      #presentation-counter {
-        color: #ccc;
-        font-size: 70%;
-        letter-spacing: 1px;
-        position: absolute;
-        top: 40%;
-        left: 0;
-        width: 100%;
-        text-align: center;
-      }
-
-      div:not(.current).reduced {
-        -webkit-transform: scale(0.8);
-        -moz-transform: scale(0.8);
-        -o-transform: scale(0.8);
-        transform: scale(0.8);
-      }
-
-      .no-transitions {
-        -webkit-transition: none;
-        -moz-transition: none;
-        -o-transition: none;
-        transition: none;
-      }
-
-      .no-gradients {
-        background: none;
-        background-color: #fff;
-      }
-
-      ul.bulleted {
-        padding-left: 30px;
-      }