Starter sugarized activity

48 files changed, 8726 insertions, 0 deletions

diff --git a/cover.py b/cover.py
new file mode 100644
index 0000000..36ebf8a
--- /dev/null
+++ b/cover.py
@@ -0,0 +1,370 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+#
+#       cover.py
+#
+#       Copyright 2012 S. Daniel Francis <francis@sugarlabs.org>
+#
+#       This program is free software; you can redistribute it and/or modify
+#       it under the terms of the GNU General Public License as published by
+#       the Free Software Foundation; either version 3 of the License.
+#
+#       This program is distributed in the hope that it will be useful,
+#       but WITHOUT ANY WARRANTY; without even the implied warranty of
+#       MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#       GNU General Public License for more details.
+#
+#       You should have received a copy of the GNU General Public License
+#       along with this program; if not, write to the Free Software
+#       Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+#       MA 02110-1301, USA.
+#
+
+
+import os
+from gettext import gettext as _
+import gtk
+from widgets import ImageEditor
+
+langs = {"en": _("English"),
+         "es": _("Spanish"),
+         "ca": _("Catalonian"),
+         "cs": _("Czech"),
+         "nl": _("Dutch"),
+         "de": _("German"),
+         "pl": _("Polish"),
+         "fr": _("French"),
+         "hu": _("Hungarian"),
+         "it": _("Italian"),
+         "el": _("Greek"),
+         "jp": _("Japanese"),
+         "zh": _("Chinese"),
+         "ru": _("Russian"),
+         "sv": _("Swedish")}
+
+
+class CoverSlide(gtk.VPaned):
+    def set_copyright(self, title):
+        self._copyright.set_text(title)
+
+    def get_copyright(self):
+        return self._copyright.get_text()
+
+    def get_title_label(self):
+        return self.slide_title
+
+    def activate_time(self, widget):
+        self._time.set_sensitive(widget.get_active())
+
+    def get_count_time(self):
+        return self.count_time.get_active()
+
+    def set_count_time(self, value):
+        self.count_time.set_active(value)
+
+    def set_lenght(self, lenght):
+        self._time.set_value(lenght)
+
+    def get_lenght(self):
+        return self._time.get_value() if self.get_count_time() else 0
+
+    def set_slide_title(self, title):
+        self.get_title_label().set_text(title)
+
+    def get_slide_title(self):
+        return self.get_title_label().get_text()
+
+    def clear(self):
+        self.presentation_title.clear()
+        self._copyright.set_text("Copyright ©")
+        self.count_time.set_active(False)
+        self._time.set_value(0)
+        self._time.set_sensitive(False)
+        self.slide_title.clear()
+        self.style_selection.select_path(self.style_model.get_path
+                                            (self.default_color_iter))
+        self.bullet_selection.select_path(self.bullet_model.get_path
+                                          (self.default_bullet_iter))
+        self.lang_selection.select_path(self.lang_model.get_path
+                                        (self.default_lang_iter))
+        self.set_show_big_bullet(True)
+        self.head_image_editor.clear()
+        self.background_image_editor.clear()
+        self.cover_image_editor.clear()
+
+    def get_bullet_type(self):
+        model, _iter = self.bullet_selection.get_selected()
+        return model.get_value(_iter, 0).split("-")[1]
+
+    def set_bullet_type(self, bullet_type):
+        _iter = self.bullet_model.get_iter_first()
+        while _iter:
+            if self.bullet_model.get_value(_iter,
+                        0) == "icon-" + bullet_type + "-" + self.get_color():
+                self.bullet_selection.select_path(self.bullet_model.get_path
+                                                  (_iter))
+            _iter = self.bullet_model.iter_next(_iter)
+
+    def get_color(self):
+        model, _iter = self.style_selection.get_selected()
+        return model.get_value(_iter, 0)
+
+    def set_color(self, color):
+        _iter = self.style_model.get_iter_first()
+        while _iter:
+            if self.style_model.get_value(_iter, 0) == color:
+                self.style_selection.select_path(self.style_model.get_path
+                                                 (_iter))
+            _iter = self.style_model.iter_next(_iter)
+
+    def get_language(self):
+        model, _iter = self.lang_selection.get_selected()
+        return model.get_value(_iter, 0)
+
+    def set_language(self, lang):
+        _iter = self.lang_model.get_iter_first()
+        while _iter:
+            if self.lang_model.get_value(_iter, 0) == lang:
+                self.lang_selection.select_path(self.lang_model.get_path(_iter))
+            _iter = self.lang_model.iter_next(_iter)
+
+    def get_show_big_bullet(self):
+        return self.head_bullet_check.get_active()
+
+    def set_show_big_bullet(self, show):
+        self.head_bullet_check.set_active(show)
+
+    def get_cover_image(self):
+        if self.cover_image_check.get_active():
+            return self.cover_image_editor.get_image_path()
+        return None
+
+    def get_background_image(self):
+        if self.background_image_check.get_active():
+            return self.background_image_editor.get_image_path()
+        return None
+
+    def get_head_image(self):
+        if self.head_image_check.get_active():
+            return self.head_image_editor.get_image_path()
+        return None
+
+    def set_head_image(self, head_image):
+        if head_image == None:
+            self.head_image_check.set_active(False)
+        else:
+            self.head_image_check.set_active(True)
+            self.head_image_editor.set_image(head_image)
+
+    def set_background_image(self, background_image):
+        if background_image == None:
+            self.background_image_check.set_active(False)
+        else:
+            self.background_image_check.set_active(True)
+            self.background_image_editor.set_image(background_image)
+
+    def set_cover_image(self, cover_image):
+        if cover_image == None:
+            self.cover_image_check.set_active(False)
+        else:
+            self.cover_image_check.set_active(True)
+            self.cover_image_editor.set_image(cover_image)
+
+    def __init__(self):
+        super(CoverSlide, self).__init__()
+        self.main_vbox = gtk.VBox()
+        self.pack1(self.main_vbox)
+        hbox = gtk.HBox()
+        self._copyright = gtk.Entry()
+        self._copyright.set_text("Copyright ©")
+        self._copyright.set_tooltip_text("Copyright")
+        self._copyright.show()
+        hbox.pack_start(self._copyright, True, True)
+        self.count_time = gtk.CheckButton("Presentation duration: ")
+        self.count_time.connect("toggled", self.activate_time)
+        self.count_time.show()
+        hbox.pack_start(self.count_time, False, False, 0)
+        self._time = gtk.SpinButton(gtk.Adjustment(value=0,
+                                                   lower=0,
+                                                   upper=120,
+                                                   step_incr=1,
+                                                   page_incr=5))
+        self._time.show()
+        self._time.set_sensitive(False)
+        hbox.pack_start(self._time, True, True)
+        self.label = gtk.Label("minutes")
+        self.label.show()
+        hbox.pack_start(self.label, False, False)
+        hbox.show()
+        self.main_vbox.pack_start(hbox, False, True, 0)
+        style_box = gtk.HBox()
+        self.style_model = gtk.ListStore(str)
+        self.styles_list = gtk.TreeView(self.style_model)
+        column = gtk.TreeViewColumn("Presentation Color")
+        cell = gtk.CellRendererPixbuf()
+        cell.set_property("stock-size", gtk.ICON_SIZE_DIALOG)
+        column.pack_start(cell, True)
+        column.add_attribute(cell, 'icon-name', 0)
+        self.styles_list.append_column(column)
+        self.styles_list.show()
+        for i in os.listdir('./themes/colors'):
+            _iter = self.style_model.append([i])
+            if i == "blue":
+                self.default_color_iter = _iter
+                self.style_selection = self.styles_list.get_selection()
+                self.style_selection.select_path(self.style_model.get_path
+                                                 (_iter))
+                self.style_selection.set_select_function(self.bullet_color_set)
+        styles_scrollbar = gtk.VScrollbar(self.styles_list.get_vadjustment())
+        style_box.pack_start(self.styles_list, True, True, 0)
+        style_box.pack_start(styles_scrollbar, False, True, 0)
+
+        self.bullet_model = gtk.ListStore(str)
+        self.bullet_list = gtk.TreeView(self.bullet_model)
+        hadjustment = self.bullet_list.get_hadjustment()
+        hadjustment.set_page_size(hadjustment.get_upper())
+        column = gtk.TreeViewColumn("Bullet Type")
+        cell = gtk.CellRendererPixbuf()
+        cell.set_property("stock-size", gtk.ICON_SIZE_DIALOG)
+        column.pack_start(cell, True)
+        column.add_attribute(cell, 'icon-name', 0)
+        self.bullet_list.append_column(column)
+        self.bullet_list.show()
+        for i in os.listdir('./themes/bullets'):
+            _iter = self.bullet_model.append(["icon-" + i + "-blue"])
+            if i == "square":
+                self.default_bullet_iter = _iter
+                self.bullet_selection = self.bullet_list.get_selection()
+                self.bullet_selection.select_path(self.bullet_model.get_path
+                                                  (_iter))
+        bullet_scrollbar = gtk.VScrollbar(self.bullet_list.get_vadjustment())
+        bullet_scrollbar.show()
+        style_box.pack_start(self.bullet_list, True, True, 0)
+        style_box.pack_start(bullet_scrollbar, False, True, 0)
+
+        self.head_bullet_check = gtk.CheckButton(
+                            "Display a big bullet at the top of the slides")
+        self.head_bullet_check.set_active(True)
+        self.head_bullet_check.show()
+        images_check_view = gtk.TreeView()
+        self.images_check_model = gtk.ListStore(bool, str)
+        images_check_view.set_model(self.images_check_model)
+        null_column = gtk.TreeViewColumn()
+        images_check_view.append_column(null_column)
+        column = gtk.TreeViewColumn("Select an image item to edit it")
+        images_check_view.append_column(column)
+        check_cell = gtk.CellRendererToggle()
+        check_cell.connect("toggled", self.activate_image)
+        null_column.pack_start(check_cell)
+        desc_cell = gtk.CellRendererText()
+        column.pack_start(desc_cell)
+        null_column.add_attribute(check_cell, 'active', 0)
+        column.add_attribute(desc_cell, 'text', 1)
+
+        self.images_notebook = gtk.Notebook()
+        label1 = gtk.Label("No selected image")
+        label1.show()
+        self.images_notebook.append_page(label1)
+
+        top_image_editor = ImageEditor()
+        #top_image_editor.connect("get-image-from-galery",
+        #                         self.model.images_galery.image_request)
+        self.images_notebook.append_page(top_image_editor)
+        self.images_check_model.append([False,
+                                  "Display an image on\nthe top of the slides"])
+        self.images_check_model.append([False,
+                                   "Display a background image\n\
+in the slides you choose"])
+        self.images_check_model.append([False,
+                                   "Display an image at\nthe cover slide"])
+        images_check_view.show()
+        style_box.show()
+        self.main_vbox.pack_start(style_box, True, True, 0)
+        self.main_vbox.pack_start(self.head_bullet_check, False, True, 0)
+        self.main_vbox.pack_start(images_check_view, False, True, 0)
+        self.images_notebook.show()
+        self.pack2(self.images_notebook)
+        """
+        images_editing_box = gtk.VBox()
+        self.images_model = gtk.ListStore(str, bool, int)
+        self.head_iter = self.images_model.append(["Head Image", False, 1])
+        self.head_image_check.connect("toggled",
+                                      self.check_display_image,
+                                      self.head_iter)
+        self.background_iter = self.images_model.append(["Background Image",
+                                                         False,
+                                                         2])
+        self.background_image_check.connect("toggled",
+                                            self.check_display_image,
+                                            self.background_iter)
+        self.cover_iter = self.images_model.append(["Cover Image", False, 3])
+        self.cover_image_check.connect("toggled",
+                                       self.check_display_image,
+                                       self.cover_iter)
+        self.image_iters = [self.head_iter,
+                            self.background_iter,
+                            self.cover_iter]
+        self.image_combo = gtk.ComboBox(self.images_model)
+        cell = gtk.CellRendererText()
+        self.image_combo.pack_start(cell)
+        self.image_combo.add_attribute(cell, 'text', 0)
+        self.image_combo.add_attribute(cell, 'sensitive', 1)
+        self.image_combo.show()
+        images_editing_box.pack_start(self.image_combo, False, True, 0)
+        self.images_editing_notebook = gtk.Notebook()
+        self.images_editing_notebook.set_show_tabs(False)
+        self.images_editing_notebook.append_page(gtk.Label(), None)
+        self.head_image_editor = ImageEditor()
+        self.head_image_editor.show()
+        self.images_editing_notebook.append_page(self.head_image_editor, None)
+        self.background_image_editor = ImageEditor()
+        self.background_image_editor.show()
+        self.images_editing_notebook.append_page(self.background_image_editor,
+                                                 None)
+        self.cover_image_editor = ImageEditor()
+        self.cover_image_editor.show()
+        self.images_editing_notebook.append_page(self.cover_image_editor, None)
+        self.images_editing_notebook.show_all()
+        self.images_editing_notebook.set_current_page(0)
+        self.image_combo.connect("changed", self.change_image)
+        images_editing_box.pack_start(self.images_editing_notebook,
+                                      True,
+                                      True,
+                                      0)
+        images_editing_box.show()
+        hbox.pack_start(images_editing_box, True, True, 0)
+        """
+        self.slide_title = gtk.Entry()
+        self.slide_title.set_text("Cover Slide")
+        self.slide_title.show()
+
+    def activate_image(self, widget, path):
+        self.images_check_model[path][0] = not self.images_check_model[path][0]
+
+    def change_image(self, widget):
+        active_iter = self.image_combo.get_active_iter()
+        self.images_editing_notebook.set_current_page(self.images_model.\
+                                                      get_value
+                                                      (active_iter,
+                                                       2)
+                                                       if active_iter else 0)
+
+    def check_display_image(self, widget, _iter):
+        self.images_model.set_value(_iter, 1, widget.get_active())
+        if self.image_combo.get_active_iter() == None:
+            self.image_combo.set_active_iter(_iter)
+        if not self.images_model.get_value(self.image_combo.get_active_iter(),
+                                           1):
+            self.image_combo.set_property("active", -1)
+            for i in self.image_iters:
+                if self.images_model.get_value(i, 1):
+                    self.image_combo.set_active_iter(i)
+                    break
+
+    def bullet_color_set(self, selection):
+        _iter = self.style_model.get_iter(selection)
+        for i in self.bullet_model:
+            text = i[0].split("-")
+            text[-1] = self.style_model.get_value(_iter, 0)
+            i[0] = "-".join(text)
+        return True
diff --git a/icons/blue.svg b/icons/blue.svg
new file mode 100644
index 0000000..8329737
--- /dev/null
+++ b/icons/blue.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
+  <circle cx="250" cy="250" r="250" stroke="none" fill="#E4E5E7" />
+  <circle cx="250" cy="250" r="225" stroke="none" fill="#c3c3ff" />
+  <circle cx="250" cy="250" r="200" stroke="none" fill="#b8c4de" />
+  <circle cx="250" cy="250" r="175" stroke="none" fill="#95ABD0" />
+  <circle cx="250" cy="250" r="150" stroke="none" fill="#859dc7" />
+  <circle cx="250" cy="250" r="125" stroke="none" fill="#728ec2" />
+  <circle cx="250" cy="250" r="100" stroke="none" fill="#005A9C" />
+  <circle cx="250" cy="250" r="75" stroke="none" fill="#00428C" />
+  <circle cx="250" cy="250" r="50" stroke="none" fill="#003366" />
+</svg> 
diff --git a/icons/brightness-high.svg b/icons/brightness-high.svg
new file mode 100644
index 0000000..ac00eb0
--- /dev/null
+++ b/icons/brightness-high.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32">
+  <path d="M 16,18 L30,18 Q32,16 30,14 L 16,14" style="fill: #FFFF00; stroke: none;"/>
+  <path d="M 16,18 L2,18 Q0,16 2,14 L 16,14" style="fill: #FFFF00; stroke: none;"/>
+  <path d="M18,16 L18,30 Q16,32 14,30 L14,16" style="fill: #FFFF00; stroke: none;" />
+  <path d="M18,16 L18,2 Q16,0 14,2 L14,16" style="fill: #FFFF00; stroke: none;" />
+  <path d="M18,16 L27.5,7.5 Q27.5,4.5 24.5,4.5 L14,16" style="fill: #FFFF00; stroke: none;" />
+  <path d="M18,16 L27.5,24.5 Q27.5,27.5 24.5,27.5 L14,16" style="fill: #FFFF00; stroke: none;" />
+  <path d="M16,18 L7.5,27.5 Q4.5,27.5 4.5,24.5 L16,14" style="fill: #FFFF00; stroke: none;" />
+  <path d="M16,14 L7.5,4.5 Q4.5,4.5 4.5,7.5 L16,18" style="fill: #FFFF00; stroke: none;" />
+  <circle cx="16" cy="16" r="8" stroke="none" fill="#FFFF00" />
+</svg>
diff --git a/icons/brightness-slow.svg b/icons/brightness-slow.svg
new file mode 100644
index 0000000..ed6ada0
--- /dev/null
+++ b/icons/brightness-slow.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32">
+  <circle cx="16" cy="16" r="5" stroke="none" fill="#FFFF00" />
+  <circle cx="16" cy="5" r="2" stroke="none" fill="#FFFF00" />
+  <circle cx="16" cy="27" r="2" stroke="none" fill="#FFFF00" />
+  <circle cx="5" cy="16" r="2" stroke="none" fill="#FFFF00" />
+  <circle cx="27" cy="16" r="2" stroke="none" fill="#FFFF00" />
+</svg>
diff --git a/icons/brown.svg b/icons/brown.svg
new file mode 100644
index 0000000..205794c
--- /dev/null
+++ b/icons/brown.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
+  <circle cx="250" cy="250" r="250" stroke="none" fill="#E7E5E4" />
+  <circle cx="250" cy="250" r="225" stroke="none" fill="#ffc3c3" />
+  <circle cx="250" cy="250" r="200" stroke="none" fill="#dec4b8" />
+  <circle cx="250" cy="250" r="175" stroke="none" fill="#D0AB95" />
+  <circle cx="250" cy="250" r="150" stroke="none" fill="#c79d85" />
+  <circle cx="250" cy="250" r="125" stroke="none" fill="#c28e72" />
+  <circle cx="250" cy="250" r="100" stroke="none" fill="#9C5A00" />
+  <circle cx="250" cy="250" r="75" stroke="none" fill="#8C4200" />
+  <circle cx="250" cy="250" r="50" stroke="none" fill="#663300" />
+</svg> 
diff --git a/icons/contrast-high.svg b/icons/contrast-high.svg
new file mode 100644
index 0000000..da3836a
--- /dev/null
+++ b/icons/contrast-high.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="32">
+  <path d="M 2,4 C 15,7 15,25 2,28 L 2,4" fill="white" stroke="black"/>
+</svg>
diff --git a/icons/contrast-slow.svg b/icons/contrast-slow.svg
new file mode 100644
index 0000000..ed7c929
--- /dev/null
+++ b/icons/contrast-slow.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="32">
+  <path d="M 14,4 C 1,7 1,25 14,28 L14,4" stroke="white"/>
+</svg>
diff --git a/icons/green.svg b/icons/green.svg
new file mode 100644
index 0000000..e232059
--- /dev/null
+++ b/icons/green.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
+  <circle cx="250" cy="250" r="250" stroke="none" fill="#E5E7E4" />
+  <circle cx="250" cy="250" r="225" stroke="none" fill="#c3ffc3" />
+  <circle cx="250" cy="250" r="200" stroke="none" fill="#c4deb8" />
+  <circle cx="250" cy="250" r="175" stroke="none" fill="#ABD095" />
+  <circle cx="250" cy="250" r="150" stroke="none" fill="#9dc785" />
+  <circle cx="250" cy="250" r="125" stroke="none" fill="#8ec272" />
+  <circle cx="250" cy="250" r="100" stroke="none" fill="#5A9C00" />
+  <circle cx="250" cy="250" r="75" stroke="none" fill="#428C00" />
+  <circle cx="250" cy="250" r="50" stroke="none" fill="#336600" />
+</svg> 
diff --git a/icons/icon-circle-blue.svg b/icons/icon-circle-blue.svg
new file mode 100644
index 0000000..e885746
--- /dev/null
+++ b/icons/icon-circle-blue.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <path d="M 2,22 Q2,2 22,2 L 22,22" style="fill: #859dc7; stroke: none;"/>
+  <path d="M 28,2 Q48,2 48,22 L 28,22" style="fill: #b8c4de; stroke: none;"/>
+  <path d="M 2,28 Q2,48 22,48 L 22,28" style="fill: #b8c4de; stroke: none;"/>
+  <path d="M 48,28 Q48,48 28,48 L 28,28" style="fill: #859dc7; stroke: none;"/>
+</svg>
diff --git a/icons/icon-circle-brown.svg b/icons/icon-circle-brown.svg
new file mode 100644
index 0000000..cea30d0
--- /dev/null
+++ b/icons/icon-circle-brown.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <path d="M 2,22 Q2,2 22,2 L 22,22" style="fill: #c79d85; stroke: none;"/>
+  <path d="M 28,2 Q48,2 48,22 L 28,22" style="fill: #dec4b8; stroke: none;"/>
+  <path d="M 2,28 Q2,48 22,48 L 22,28" style="fill: #dec4b8; stroke: none;"/>
+  <path d="M 48,28 Q48,48 28,48 L 28,28" style="fill: #c79d85; stroke: none;"/>
+</svg>
diff --git a/icons/icon-circle-green.svg b/icons/icon-circle-green.svg
new file mode 100644
index 0000000..f003eed
--- /dev/null
+++ b/icons/icon-circle-green.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <path d="M 2,22 Q2,2 22,2 L 22,22" style="fill: #9dc785; stroke: none;"/>
+  <path d="M 28,2 Q48,2 48,22 L 28,22" style="fill: #c4deb8; stroke: none;"/>
+  <path d="M 2,28 Q2,48 22,48 L 22,28" style="fill: #c4deb8; stroke: none;"/>
+  <path d="M 48,28 Q48,48 28,48 L 28,28" style="fill: #9dc785; stroke: none;"/>
+</svg>
diff --git a/icons/icon-circle-magenta.svg b/icons/icon-circle-magenta.svg
new file mode 100644
index 0000000..7f53652
--- /dev/null
+++ b/icons/icon-circle-magenta.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <path d="M 2,22 Q2,2 22,2 L 22,22" style="fill: #c7859d; stroke: none;"/>
+  <path d="M 28,2 Q48,2 48,22 L 28,22" style="fill: #deb8c4; stroke: none;"/>
+  <path d="M 2,28 Q2,48 22,48 L 22,28" style="fill: #deb8c4; stroke: none;"/>
+  <path d="M 48,28 Q48,48 28,48 L 28,28" style="fill: #c7859d; stroke: none;"/>
+</svg>
diff --git a/icons/icon-circle-violet.svg b/icons/icon-circle-violet.svg
new file mode 100644
index 0000000..7f944dc
--- /dev/null
+++ b/icons/icon-circle-violet.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <path d="M 2,22 Q2,2 22,2 L 22,22" style="fill: #9d85c7; stroke: none;"/>
+  <path d="M 28,2 Q48,2 48,22 L 28,22" style="fill: #c4b8de; stroke: none;"/>
+  <path d="M 2,28 Q2,48 22,48 L 22,28" style="fill: #c4b8de; stroke: none;"/>
+  <path d="M 48,28 Q48,48 28,48 L 28,28" style="fill: #9d85c7; stroke: none;"/>
+</svg>
diff --git a/icons/icon-square-blue.svg b/icons/icon-square-blue.svg
new file mode 100644
index 0000000..6b68db9
--- /dev/null
+++ b/icons/icon-square-blue.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <rect x="2" y="2" width="20" height="20" style="fill: #859dc7; stroke: none;"/>
+  <rect x="28" y="2" width="20" height="20" style="fill: #b8c4de; stroke: none;"/>
+  <rect x="2" y="28" width="20" height="20" style="fill: #b8c4de; stroke: none;"/>
+  <rect x="28" y="28" width="20" height="20" style="fill: #859dc7; stroke: none;"/>
+</svg>
diff --git a/icons/icon-square-brown.svg b/icons/icon-square-brown.svg
new file mode 100644
index 0000000..6643bca
--- /dev/null
+++ b/icons/icon-square-brown.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <rect x="2" y="2" width="20" height="20" style="fill: #c79d85; stroke: none;"/>
+  <rect x="28" y="2" width="20" height="20" style="fill: #dec4b8; stroke: none;"/>
+  <rect x="2" y="28" width="20" height="20" style="fill: #dec4b8; stroke: none;"/>
+  <rect x="28" y="28" width="20" height="20" style="fill: #c79d85; stroke: none;"/>
+</svg>
diff --git a/icons/icon-square-green.svg b/icons/icon-square-green.svg
new file mode 100644
index 0000000..f637775
--- /dev/null
+++ b/icons/icon-square-green.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <rect x="2" y="2" width="20" height="20" style="fill: #9dc785; stroke: none;"/>
+  <rect x="28" y="2" width="20" height="20" style="fill: #c4deb8; stroke: none;"/>
+  <rect x="2" y="28" width="20" height="20" style="fill: #c4deb8; stroke: none;"/>
+  <rect x="28" y="28" width="20" height="20" style="fill: #9dc785; stroke: none;"/>
+</svg>
diff --git a/icons/icon-square-magenta.svg b/icons/icon-square-magenta.svg
new file mode 100644
index 0000000..ecd0efe
--- /dev/null
+++ b/icons/icon-square-magenta.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <rect x="2" y="2" width="20" height="20" style="fill: #c7859d; stroke: none;"/>
+  <rect x="28" y="2" width="20" height="20" style="fill: #deb8c4; stroke: none;"/>
+  <rect x="2" y="28" width="20" height="20" style="fill: #deb8c4; stroke: none;"/>
+  <rect x="28" y="28" width="20" height="20" style="fill: #c7859d; stroke: none;"/>
+</svg>
diff --git a/icons/icon-square-violet.svg b/icons/icon-square-violet.svg
new file mode 100644
index 0000000..c61f0fa
--- /dev/null
+++ b/icons/icon-square-violet.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
+  <rect x="2" y="2" width="20" height="20" style="fill: #9d85c7; stroke: none;"/>
+  <rect x="28" y="2" width="20" height="20" style="fill: #c4b8de; stroke: none;"/>
+  <rect x="2" y="28" width="20" height="20" style="fill: #c4b8de; stroke: none;"/>
+  <rect x="28" y="28" width="20" height="20" style="fill: #9d85c7; stroke: none;"/>
+</svg>
diff --git a/icons/image-rotate.svg b/icons/image-rotate.svg
new file mode 100644
index 0000000..c468655
--- /dev/null
+++ b/icons/image-rotate.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32">
+  <rect x="4" y="4" width="16" height="12" fill="#204A87" />
+  <rect x="5.5" y="5.5" width="13" height="9" fill="#729FCF" />
+  <rect x="7" y="7" width="10" height="6" fill="#4F7EB6" />
+  <path d="M16,10 L8,19 L20,30 L28,21 L16,10" fill="#204A87" />
+  <path d="M16,12 L10,19 L20,28 L26,21 L16,12" fill="#729FCF" />
+  <path d="M16,14 L12,19 L20,26 L24,21 L16,14" fill="#4F7EB6" />
+  <path d="M4,21 L1.3,25 L3.5,25 Q 2,30 8,30 L8,28 Q 4,28 5.5,25 L8,25 L4,21.5" fill="#FFFFFF" stroke="#3465A4" />
+  <path d="M28,11 L30.7,7 L28.5,7 Q 30,2 24,2 L24,4 Q 28,4 26.5,7 L24,7 L28,10.5" fill="#FFFFFF" stroke="#3465A4" />
+</svg>
diff --git a/icons/link.svg b/icons/link.svg
new file mode 100644
index 0000000..a39cf44
--- /dev/null
+++ b/icons/link.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="48">
+  <defs>
+    <linearGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+      <stop offset="0%" style="stop-color: #2E3436" />
+      <stop offset="50%" style="stop-color: #EEEEEC" />
+      <stop offset="100%" style="stop-color: #888A85" />
+    </linearGradient>
+  </defs>
+  <path d="M10,20 L18,20 L18,2 L2,2 L2,20 L10,20 L10,16 L6,16 L6,6 L14,6 L14,16 L10,16 L10,20" style="fill: #E8E8E9; stroke: #555753; stroke-width:2"/>
+  <path d="M10,28 L18,28 L18,46 L2,46 L2,28 L10,28 L10,32 L6,32 L6,42 L14,42 L14,32 L10,32 L10,28" style="fill: #E8E8E9; stroke: #555753; stroke-width:2"/>
+  <rect x="7" y="15" width="6" height="18" fill="url(#grad1)" />
+</svg>
diff --git a/icons/magenta.svg b/icons/magenta.svg
new file mode 100644
index 0000000..2383324
--- /dev/null
+++ b/icons/magenta.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
+  <circle cx="250" cy="250" r="250" stroke="none" fill="#E7E4E5" />
+  <circle cx="250" cy="250" r="225" stroke="none" fill="#ffc3c3" />
+  <circle cx="250" cy="250" r="200" stroke="none" fill="#deb8c4" />
+  <circle cx="250" cy="250" r="175" stroke="none" fill="#D095AB" />
+  <circle cx="250" cy="250" r="150" stroke="none" fill="#c7859d" />
+  <circle cx="250" cy="250" r="125" stroke="none" fill="#c2728e" />
+  <circle cx="250" cy="250" r="100" stroke="none" fill="#9C005A" />
+  <circle cx="250" cy="250" r="75" stroke="none" fill="#8C0042" />
+  <circle cx="250" cy="250" r="50" stroke="none" fill="#660033" />
+</svg> 
diff --git a/icons/scale.svg b/icons/scale.svg
new file mode 100644
index 0000000..38bbfb0
--- /dev/null
+++ b/icons/scale.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32">
+  <defs>
+    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+      <stop offset="0%" style="stop-color: #38639D;stop-opacity:1" />
+      <stop offset="100%" style="stop-color: #AABED8;stop-opacity:1" />
+    </radialGradient>
+    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+      <stop offset="0%" style="stop-color: #5A7EAF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color: #B6CAE5;stop-opacity:1" />
+    </radialGradient>
+  </defs>
+  <rect x="7" y="7" width="24" height="24" style="fill: url(#grad1); stroke: #204A87; stroke-width:1" />
+  <rect x="1" y="1" width="10" height="10" style="fill: url(#grad2); stroke: #164C93; stroke-width:1" />
+  <line x1="4.5" y1="4.5" x2="20" y2="4.5" stroke="#CCC" stroke-width="1" stroke-dasharray="2 2" />
+  <line x1="20" y1="4.5" x2="20" y2="20" stroke="#CCC" stroke-width="1" stroke-dasharray="2 2" />
+  <line x1="4.5" y1="20" x2="20" y2="20" stroke="#CCC" stroke-width="1" stroke-dasharray="2 2" />
+  <line x1="4.5" y1="4.5" x2="4.5" y2="20" stroke="#CCC" stroke-width="1" stroke-dasharray="2 2" />
+  <path d="M 5,3 L 20,19 L23,16 L 23,23 L16,23 L19,20 L4,4 L5,3" stroke="#416AA2" fill="#FFFFFF" />
+</svg>
diff --git a/icons/unlink.svg b/icons/unlink.svg
new file mode 100644
index 0000000..9dcaefb
--- /dev/null
+++ b/icons/unlink.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="48">
+  <path d="M10,20 L18,20 L18,2 L2,2 L2,20 L10,20 L10,16 L6,16 L6,6 L14,6 L14,16 L10,16 L10,20" style="fill: #E8E8E9; stroke: #555753; stroke-width:2"/>
+  <path d="M10,28 L18,28 L18,46 L2,46 L2,28 L10,28 L10,32 L6,32 L6,42 L14,42 L14,32 L10,32 L10,28" style="fill: #E8E8E9; stroke: #555753; stroke-width:2"/>
+</svg>
diff --git a/icons/violet.svg b/icons/violet.svg
new file mode 100644
index 0000000..08d70f0
--- /dev/null
+++ b/icons/violet.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
+  <circle cx="250" cy="250" r="250" stroke="none" fill="#E5E4E7" />
+  <circle cx="250" cy="250" r="225" stroke="none" fill="#c3c3ff" />
+  <circle cx="250" cy="250" r="200" stroke="none" fill="#c4b8de" />
+  <circle cx="250" cy="250" r="175" stroke="none" fill="#AB95D0" />
+  <circle cx="250" cy="250" r="150" stroke="none" fill="#9d85c7" />
+  <circle cx="250" cy="250" r="125" stroke="none" fill="#8e72c2" />
+  <circle cx="250" cy="250" r="100" stroke="none" fill="#5A009C" />
+  <circle cx="250" cy="250" r="75" stroke="none" fill="#42008C" />
+  <circle cx="250" cy="250" r="50" stroke="none" fill="#330066" />
+</svg> 
diff --git a/images.py b/images.py
new file mode 100644
index 0000000..6a22d2d
--- /dev/null
+++ b/images.py
@@ -0,0 +1,105 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+# images.py
+#
+# Copyright 2012 S. Daniel Francis <francis@sugarlabs.org>
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+# MA 02110-1301, USA.
+#
+
+import gtk
+from sugar.graphics.tray import VTray
+
+TARGET_TYPE_TEXT = 80
+TARGET_TYPE_PIXMAP = 81
+
+
+class Image:
+    ready = False
+    path = None
+
+    def __init__(self):
+        self.pixbuf = None
+        self.width = -1
+        self.height = -1
+
+    def set_from_pixbuf(self, pixbuf):
+        self.pixbuf = pixbuf
+        self.width = self.pixbuf.get_width()
+        self.height = self.pixbuf.get_height()
+        self.ready = True
+
+    def set_from_file(self, path):
+        self.path = path
+        self.pixbuf = gtk.gdk.pixbuf_new_from_file(path)
+        self.width = self.pixbuf.get_width()
+        self.height = self.pixbuf.get_height()
+        self.ready = True
+
+    def resize_to_galery(self):
+        # Cross Multiplication :  Rule of Three
+        #   self.width   --  self.height
+        # espected_width (150) -- new_height (unknown)
+        new_height = 150 * self.height / self.width
+        return self.pixbuf.scale_simple(150,
+                                        new_height,
+                                        gtk.gdk.INTERP_NEAREST)
+
+    def render_to_preview(self, width=None, height=None):
+        return self.pixbuf
+        #_width = width if width else self.width
+        #_height = height if height else self.height
+        #return self.pixbuf.scale_simple(int(_width),
+        #                                int(_height),
+        #                                gtk.gdk.INTERP_BILINEAR)
+
+
+class ImagesGalery(VTray):
+    def image_request(self, widget, index):
+        return self.images[int(index)][1]
+
+    def drag_send(self, widget, context, selection, targetType, eventTime):
+        for i in self.images:
+            if i[0].get_child() == widget:
+                selection.set(gtk.gdk.TARGET_STRING,
+                              8,
+                              str(self.images.index(i)))
+
+    def append_image(self, image):
+        item = gtk.ToolButton(self.main_item)
+        child = item.get_child()
+        child.connect("drag_data_get", self.drag_send)
+        child.drag_source_set(gtk.gdk.BUTTON1_MASK,
+                             [("text/plain",
+                               0,
+                               TARGET_TYPE_TEXT)],
+                             gtk.gdk.ACTION_COPY)
+        pixbuf = image.resize_to_galery()
+        image_widget = gtk.image_new_from_pixbuf(pixbuf)
+        image_widget.show()
+        item.set_icon_widget(image_widget)
+        self.galery.add_item(item)
+        item.show()
+        self.images.append((item, image))
+        adjustment = self.galery._viewport.get_vadjustment()
+        adjustment.set_value(adjustment.get_upper())
+
+    def __init__(self):
+        super(ImagesGalery, self).__init__()
+        self.main_item = gtk.RadioToolButton()
+        self.images = []
+        self.set_size_request(170, -1)
diff --git a/present.py b/present.py
new file mode 100755
index 0000000..32787c9
--- /dev/null
+++ b/present.py
@@ -0,0 +1,48 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+#
+# present.py
+#
+# Copyright 2012 S. Daniel Francis <francis@sugarlabs.org>
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+# MA 02110-1301, USA.
+#
+
+import gtk
+from sugar.activity import activity
+from sugar.activity.widgets import ActivityToolbarButton
+from sugar.activity.widgets import StopButton
+from slides import SlidesNotebook
+from toolbars import PresentToolbarBox
+from images import ImagesGalery
+
+
+class PresentActivity(activity.Activity):
+    def __init__(self, handle):
+        activity.Activity.__init__(self, handle, False)
+        activity_button = ActivityToolbarButton(self)
+        stop_button = StopButton(self)
+        toolbarbox = PresentToolbarBox(activity_button, stop_button)
+        self.set_toolbar_box(toolbarbox)
+        self.images_galery = ImagesGalery()
+        self.images_galery.show()
+        self.set_tray(self.images_galery, gtk.POS_RIGHT)
+        canvas = SlidesNotebook()
+        self.set_canvas(canvas)
+        self.show_all()
+
+if __name__ == "__main__":
+    Present().show()
+    gtk.main()
diff --git a/scripts/slidy.js b/scripts/slidy.js
new file mode 100644
index 0000000..83e4a10
--- /dev/null
+++ b/scripts/slidy.js
@@ -0,0 +1,2974 @@
+/* slidy.js
+
+   Copyright (c) 2005-2011 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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: "help/help.html."+lang,
+  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, "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, "touchstart", this.touchstart);
+    this.add_listener(document, "touchmove", this.touchmove);
+    this.add_listener(document, "touchend", this.touchend);
+
+    // 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.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;
+      } 
+    }
+  },
+
+// 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);
+       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);
+    window.scrollTo(0,0);
+    this.remove_class(slide, "hidden");
+  },
+
+  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;
+  },
+
+  // right mouse button click is reserved for context menus
+  // it is more reliable to detect rightclick than leftclick
+  mouse_button_click: function (e) {
+    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);
+
diff --git a/setup.py b/setup.py
new file mode 100644
index 0000000..530f97c
--- /dev/null
+++ b/setup.py
@@ -0,0 +1,21 @@
+#!/usr/bin/env python
+
+# Copyright (C) 2006, Red Hat, Inc.
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 2 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+
+from sugar.activity import bundlebuilder
+
+bundlebuilder.start()
diff --git a/slides.py b/slides.py
new file mode 100644
index 0000000..be9a815
--- /dev/null
+++ b/slides.py
@@ -0,0 +1,37 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+#
+#       slides.py
+#
+#       Copyright 2012 S. Daniel Francis <francis@sugarlabs.org>
+#
+#       This program is free software; you can redistribute it and/or modify
+#       it under the terms of the GNU General Public License as published by
+#       the Free Software Foundation; either version 3 of the License.
+#
+#       This program is distributed in the hope that it will be useful,
+#       but WITHOUT ANY WARRANTY; without even the implied warranty of
+#       MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#       GNU General Public License for more details.
+#
+#       You should have received a copy of the GNU General Public License
+#       along with this program; if not, write to the Free Software
+#       Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+#       MA 02110-1301, USA.
+#
+
+import gtk
+from cover import CoverSlide
+
+
+class SlidesNotebook(gtk.Notebook):
+    __gtype_name__ = 'BrowseNotebook'
+
+    def clear(self):
+        self.cover.clear()
+
+    def __init__(self):
+        gtk.Notebook.__init__(self)
+        self.set_tab_pos(gtk.POS_LEFT)
+        self.cover = CoverSlide()
+        self.append_page(self.cover, self.cover.get_title_label())
diff --git a/styles/slidy-blue.css b/styles/slidy-blue.css
new file mode 100644
index 0000000..ea21ce3
--- /dev/null
+++ b/styles/slidy-blue.css
@@ -0,0 +1,406 @@
+/* slidy-blue.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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;
+}
+
+div.toc {
+  position: absolute;
+  top: auto;
+  bottom: 4em;
+  left: 4em;
+  right: auto;
+  width: 60%;
+  max-width: 30em;
+  height: 30em;
+  border: solid thin black;
+  padding: 1em;
+  background: rgb(240,240,240);
+  color: black;
+  z-index: 300;
+  overflow: auto;
+  display: block;
+  visibility: visible;
+}
+
+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}
+.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; }
+
+.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;
+  }
+
+@media 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 }
+}
+
+@media 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 }
+}
+
diff --git a/styles/slidy-brown.css b/styles/slidy-brown.css
new file mode 100644
index 0000000..2753acc
--- /dev/null
+++ b/styles/slidy-brown.css
@@ -0,0 +1,406 @@
+/* slidy-brown.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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;
+}
+
+div.toc {
+  position: absolute;
+  top: auto;
+  bottom: 4em;
+  left: 4em;
+  right: auto;
+  width: 60%;
+  max-width: 30em;
+  height: 30em;
+  border: solid thin black;
+  padding: 1em;
+  background: rgb(240,240,240);
+  color: black;
+  z-index: 300;
+  overflow: auto;
+  display: block;
+  visibility: visible;
+}
+
+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: #D0AB95;
+ color: #8C4200;
+ background-color: #E7E5E4;
+}
+
+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}
+.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; }
+
+.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;
+  }
+
+@media 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 }
+}
+
+@media 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 }
+}
+
diff --git a/styles/slidy-green.css b/styles/slidy-green.css
new file mode 100644
index 0000000..ebfd57c
--- /dev/null
+++ b/styles/slidy-green.css
@@ -0,0 +1,406 @@
+/* slidy-green.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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;
+}
+
+div.toc {
+  position: absolute;
+  top: auto;
+  bottom: 4em;
+  left: 4em;
+  right: auto;
+  width: 60%;
+  max-width: 30em;
+  height: 30em;
+  border: solid thin black;
+  padding: 1em;
+  background: rgb(240,240,240);
+  color: black;
+  z-index: 300;
+  overflow: auto;
+  display: block;
+  visibility: visible;
+}
+
+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: #ABD095;
+ color: #428C00;
+ background-color: #E5E7E4;
+}
+
+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}
+.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; }
+
+.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;
+  }
+
+@media 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 }
+}
+
+@media 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 }
+}
+
diff --git a/styles/slidy-magenta.css b/styles/slidy-magenta.css
new file mode 100644
index 0000000..f903b97
--- /dev/null
+++ b/styles/slidy-magenta.css
@@ -0,0 +1,406 @@
+/* slidy-magenta.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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;
+}
+
+div.toc {
+  position: absolute;
+  top: auto;
+  bottom: 4em;
+  left: 4em;
+  right: auto;
+  width: 60%;
+  max-width: 30em;
+  height: 30em;
+  border: solid thin black;
+  padding: 1em;
+  background: rgb(240,240,240);
+  color: black;
+  z-index: 300;
+  overflow: auto;
+  display: block;
+  visibility: visible;
+}
+
+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: #D095AB;
+ color: #8C0042;
+ background-color: #E7E4E5;
+}
+
+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}
+.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; }
+
+.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;
+  }
+
+@media 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 }
+}
+
+@media 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 }
+}
+
diff --git a/styles/slidy-violet.css b/styles/slidy-violet.css
new file mode 100644
index 0000000..77edb4e
--- /dev/null
+++ b/styles/slidy-violet.css
@@ -0,0 +1,406 @@
+/* slidy-violet.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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;
+}
+
+div.toc {
+  position: absolute;
+  top: auto;
+  bottom: 4em;
+  left: 4em;
+  right: auto;
+  width: 60%;
+  max-width: 30em;
+  height: 30em;
+  border: solid thin black;
+  padding: 1em;
+  background: rgb(240,240,240);
+  color: black;
+  z-index: 300;
+  overflow: auto;
+  display: block;
+  visibility: visible;
+}
+
+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: #AB95D0;
+ color: #42008C;
+ background-color: #E5E4E7;
+}
+
+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}
+.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; }
+
+.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;
+  }
+
+@media 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 }
+}
+
+@media 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 }
+}
+
diff --git a/styles/w3c-blue.css b/styles/w3c-blue.css
new file mode 100644
index 0000000..561bb17
--- /dev/null
+++ b/styles/w3c-blue.css
@@ -0,0 +1,498 @@
+/* w3c-blue.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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; }
+
+@media 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 */
+@media 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 }
+
+@media 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 } 
+}
diff --git a/styles/w3c-brown.css b/styles/w3c-brown.css
new file mode 100644
index 0000000..f93ded8
--- /dev/null
+++ b/styles/w3c-brown.css
@@ -0,0 +1,499 @@
+/* w3c-brown.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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: #c28e72;
+}
+
+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:  #c28e72;
+  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: #c28e72;
+}
+
+#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; }
+
+@media 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: brown }
+a:link { color: brown }
+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 */
+@media 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: #9C5A00;
+  border-bottom-width: thick;
+  border-bottom-color: #D0AB95;
+}
+
+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: #663300;
+  background-color: #D0AB95;
+}
+
+/* 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: #c28e72;
+  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 }
+
+@media 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 } 
+}
diff --git a/styles/w3c-green.css b/styles/w3c-green.css
new file mode 100644
index 0000000..c76569f
--- /dev/null
+++ b/styles/w3c-green.css
@@ -0,0 +1,498 @@
+/* w3c-green.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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: #8ec272;
+}
+
+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:  #8ec272;
+  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: #8ec272;
+}
+
+#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; }
+
+@media 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: dark green }
+a:link { color: dark green }
+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 */
+@media 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: #5A9C00;
+  border-bottom-width: thick;
+  border-bottom-color: #ABD095;
+}
+
+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: #336600;
+  background-color: #ABD095;
+}
+
+/* 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: #8ec272;
+  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 }
+
+@media 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 } 
+}
diff --git a/styles/w3c-magenta.css b/styles/w3c-magenta.css
new file mode 100644
index 0000000..c946f82
--- /dev/null
+++ b/styles/w3c-magenta.css
@@ -0,0 +1,498 @@
+/* w3c-magenta.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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: #c2728e;
+}
+
+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:  #c2728e;
+  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: #c2728e;
+}
+
+#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; }
+
+@media 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: magenta }
+a:link { color: magenta }
+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 */
+@media 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: #9C005A;
+  border-bottom-width: thick;
+  border-bottom-color: #D095AB;
+}
+
+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: #660033;
+  background-color: #D095AB;
+}
+
+/* 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: #c2728e;
+  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 }
+
+@media 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 } 
+}
diff --git a/styles/w3c-violet.css b/styles/w3c-violet.css
new file mode 100644
index 0000000..cafce9e
--- /dev/null
+++ b/styles/w3c-violet.css
@@ -0,0 +1,498 @@
+/* w3c-violet.css
+
+   Copyright (c) 2005-2010 W3C (MIT, ERCIM, Keio), All Rights Reserved.
+   Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+   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: #8e72c2;
+}
+
+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:  #8e72c2;
+  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: #8e72c2;
+}
+
+#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; }
+
+@media 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: purple }
+a:link { color: purple }
+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 */
+@media 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: #5A009C;
+  border-bottom-width: thick;
+  border-bottom-color: #AB95D0;
+}
+
+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: #330066;
+  background-color: #AB95D0;
+}
+
+/* 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: #8e72c2;
+  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 }
+
+@media 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 } 
+}
diff --git a/themes/bullets/circle b/themes/bullets/circle
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/bullets/circle
diff --git a/themes/bullets/square b/themes/bullets/square
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/bullets/square
diff --git a/themes/colors/blue b/themes/colors/blue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/colors/blue
diff --git a/themes/colors/brown b/themes/colors/brown
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/colors/brown
diff --git a/themes/colors/green b/themes/colors/green
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/colors/green
diff --git a/themes/colors/magenta b/themes/colors/magenta
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/colors/magenta
diff --git a/themes/colors/violet b/themes/colors/violet
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/colors/violet
diff --git a/toolbars.py b/toolbars.py
new file mode 100644
index 0000000..8936cc4
--- /dev/null
+++ b/toolbars.py
@@ -0,0 +1,37 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+#
+#       options.py
+#
+#       Copyright 2012 S. Daniel Francis <francis@sugarlabs.org>
+#
+#       This program is free software; you can redistribute it and/or modify
+#       it under the terms of the GNU General Public License as published by
+#       the Free Software Foundation; either version 3 of the License.
+#
+#       This program is distributed in the hope that it will be useful,
+#       but WITHOUT ANY WARRANTY; without even the implied warranty of
+#       MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#       GNU General Public License for more details.
+#
+#       You should have received a copy of the GNU General Public License
+#       along with this program; if not, write to the Free Software
+#       Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+#       MA 02110-1301, USA.
+#
+
+import gtk
+from sugar.graphics.toolbarbox import ToolbarBox
+
+
+class PresentToolbarBox(ToolbarBox):
+    def __init__(self, activitybutton, stopbutton):
+        ToolbarBox.__init__(self)
+        self.toolbar.insert(activitybutton, -1)
+        activitybutton.show_all()
+        separator = gtk.SeparatorToolItem()
+        separator.set_expand(True)
+        separator.set_draw(False)
+        self.toolbar.insert(separator, -1)
+        self.toolbar.insert(stopbutton, -1)
+        stopbutton.show()
diff --git a/widgets.py b/widgets.py
new file mode 100644
index 0000000..0833d5a
--- /dev/null
+++ b/widgets.py
@@ -0,0 +1,360 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+#
+# widgets.py
+#
+# Copyright 2012 Santiago Daniel Francis <francis@sugarlabs.org>
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+# MA 02110-1301, USA.
+#
+
+#import tempfile
+import gobject
+import gtk
+
+
+class ImageEditor(gtk.VBox):
+    __gsignals__ = {"get-image-from-galery": (gobject.SIGNAL_RUN_LAST,
+                                              gobject.TYPE_PYOBJECT,
+                                              (gobject.TYPE_STRING,))}
+
+    position = 0
+
+    def __init__(self):
+        super(ImageEditor, self).__init__()
+        self.toolbar = gtk.Toolbar()
+        scale_image = gtk.image_new_from_icon_name("scale",
+                                         gtk.ICON_SIZE_LARGE_TOOLBAR)
+        scale_image.show()
+        scale_item = gtk.ToolItem()
+        scale_item.add(scale_image)
+        scale_item.show()
+        self.toolbar.insert(scale_item, -1)
+        separator = gtk.SeparatorToolItem()
+        separator.set_draw(False)
+        separator.show()
+        self.toolbar.insert(separator, -1)
+        refresh_button = gtk.ToolButton(gtk.STOCK_REFRESH)
+        refresh_button.show()
+        self.toolbar.insert(refresh_button, -1)
+        separator = gtk.SeparatorToolItem()
+        separator.set_draw(False)
+        separator.show()
+        self.toolbar.insert(separator, -1)
+        self.width, self.height = 1, 1
+        self.width_entry = gtk.SpinButton(gtk.Adjustment(value=0,
+                                                         lower=0,
+                                                         upper=50000,
+                                                         step_incr=1))
+        self.width_entry.connect("value-changed", self.change_width)
+        self.width_entry.show()
+        width_item = gtk.ToolItem()
+        width_item.add(self.width_entry)
+        width_item.show()
+        self.toolbar.insert(width_item, -1)
+        self.link_values_button = gtk.ToggleToolButton()
+        self.link_values_button.set_active(True)
+        self.link_values_button.connect("toggled", self.link_unlink)
+        self.link_values_button.set_icon_name("link")
+        self.link_values_button.show()
+        self.toolbar.insert(self.link_values_button, -1)
+        self.height_entry = gtk.SpinButton(gtk.Adjustment(value=0,
+                                                          lower=0,
+                                                          upper=50000,
+                                                          step_incr=1))
+        self.height_entry.connect("value-changed", self.change_height)
+        self.height_entry.show()
+        height_item = gtk.ToolItem()
+        height_item.add(self.height_entry)
+        height_item.show()
+        self.toolbar.insert(height_item, -1)
+        separator = gtk.SeparatorToolItem()
+        separator.show()
+        self.toolbar.insert(separator, -1)
+        rotate_button = gtk.ToolButton()
+        rotate_button.set_icon_name("image-rotate")
+        rotate_button.connect("clicked", self.rotate_image)
+        rotate_button.show()
+        self.toolbar.insert(rotate_button, -1)
+        separator = gtk.SeparatorToolItem()
+        separator.show()
+        self.toolbar.insert(separator, -1)
+        contrast_box = gtk.HBox()
+        slow_contrast_image = gtk.image_new_from_icon_name("contrast-slow",
+                                                    gtk.ICON_SIZE_LARGE_TOOLBAR)
+        slow_contrast_image.show()
+        contrast_box.pack_start(slow_contrast_image, False, False)
+        contrast_scale = gtk.HScale(gtk.Adjustment(0, -1, 1, 0.1))
+        contrast_scale.set_draw_value(False)
+        contrast_scale.show()
+        contrast_box.pack_start(contrast_scale, True, True)
+        high_contrast_image = gtk.image_new_from_icon_name("contrast-high",
+                                                    gtk.ICON_SIZE_LARGE_TOOLBAR)
+        high_contrast_image.show()
+        contrast_box.pack_start(high_contrast_image, False, False)
+        contrast_item = gtk.ToolItem()
+        contrast_item.set_expand(True)
+        contrast_item.add(contrast_box)
+        contrast_box.show()
+        contrast_item.show()
+        self.toolbar.insert(contrast_item, -1)
+        brightness_box = gtk.HBox()
+        slow_brightness_image = gtk.image_new_from_icon_name("brightness-slow",
+                                                    gtk.ICON_SIZE_LARGE_TOOLBAR)
+        slow_brightness_image.show()
+        brightness_box.pack_start(slow_brightness_image, False, False)
+        brightness_scale = gtk.HScale(gtk.Adjustment(0, -1, 1, 0.1))
+        brightness_scale.set_draw_value(False)
+        brightness_scale.show()
+        brightness_box.pack_start(brightness_scale, True, True)
+        high_brightness_image = gtk.image_new_from_icon_name("brightness-high",
+                                                    gtk.ICON_SIZE_LARGE_TOOLBAR)
+        high_brightness_image.show()
+        brightness_box.pack_start(high_brightness_image, False, False)
+        brightness_box.show()
+        brightness_item = gtk.ToolItem()
+        brightness_item.add(brightness_box)
+        brightness_item.set_expand(True)
+        brightness_item.show()
+        self.toolbar.insert(brightness_item, -1)
+        self.toolbar.set_sensitive(False)
+        self.toolbar.show()
+        self.pack_start(self.toolbar, False, True)
+        self.notebook = gtk.Notebook()
+        self.notebook.set_show_border(False)
+        drag_label = gtk.Label("Drag here an image")
+        drag_label.drag_dest_set(gtk.DEST_DEFAULT_MOTION |
+                                  gtk.DEST_DEFAULT_HIGHLIGHT |
+                                  gtk.DEST_DEFAULT_DROP,
+                                 [("text/plain",
+                                   0,
+                                   80)],
+                                 gtk.gdk.ACTION_COPY)
+        drag_label.connect("drag_data_received", self.image_received)
+        drag_label.show()
+        self.notebook.append_page(drag_label)
+        self.scrolled_window = gtk.ScrolledWindow()
+        self.scrolled_window.set_policy(gtk.POLICY_AUTOMATIC,
+                                        gtk.POLICY_AUTOMATIC)
+        self.image_widget = gtk.Image()
+        self.image_widget.show()
+        self.scrolled_window.add_with_viewport(self.image_widget)
+        self.scrolled_window.show()
+        self.notebook.append_page(self.scrolled_window)
+        self.notebook.set_show_tabs(False)
+        self.notebook.show()
+        self.pack_start(self.notebook)
+
+    def change_width(self, widget):
+        if self.link_values_button.get_active():
+            # Cross multiplication : Rule of three
+            # self.width - self.height
+            # new_value - (new_height)
+            new_value = widget.get_value()
+            new_height = int(round(new_value *\
+                                   float(self.height) /\
+                                   float(self.width)))
+            self.height_entry.set_value(new_height)
+        self.rescale_image()
+
+    def change_height(self, widget):
+        if self.link_values_button.get_active():
+            new_value = widget.get_value()
+            new_width = int(round(new_value *\
+                                  float(self.width) /\
+                                  float(self.height)))
+            self.width_entry.set_value(new_width)
+        self.rescale_image()
+
+    def image_received(self,
+                       widget,
+                       context,
+                       x,
+                       y,
+                       selection,
+                       targetType,
+                       time):
+        self.image = self.emit("get-image-from-galery", selection.data)
+        self.main_pixbuf = self.image.render_to_preview()
+        self.pixbuf = self.image.render_to_preview()
+        self.image_widget.set_from_pixbuf(self.pixbuf)
+        self.notebook.set_current_page(1)
+        self.toolbar.set_sensitive(True)
+        self.width_entry.set_value(self.image.width)
+        self.height_entry.set_value(self.image.height)
+        self.link_values_button.set_active(True)
+        self.width = self.image.width
+        self.height = self.image.height
+
+    def link_unlink(self, widget):
+        active = widget.get_active()
+        widget.set_icon_name("link" if active else "unlink")
+        if active:
+            self.width = self.width_entry.get_value()
+            self.height = self.height_entry.get_value()
+
+    def rescale_image(self):
+        width = self.width_entry.get_value()
+        height = self.height_entry.get_value()
+        self.pixbuf = self.main_pixbuf.scale_simple(int(width
+                                                        if self.position ==\
+                                                    0 or self.position == 180
+                                                        else height),
+                                                   int(height
+                                                        if self.position ==\
+                                                    90 or self.position == 270
+                                                        else width),
+                                                   gtk.gdk.INTERP_TILES)
+        self.pixbuf = self.pixbuf.rotate_simple(self.position)
+        self.image_widget.set_from_pixbuf(self.pixbuf)
+
+    def rotate_image(self, widget=None):
+        self.position += 90
+        self.position = 0 if self.position == 360 else self.position
+        self.pixbuf = self.pixbuf.rotate_simple(90)
+        self.image_widget.set_from_pixbuf(self.pixbuf)
+
+
+"""
+class ImageEditor(gtk.Notebook):
+    def clear(self):
+        self.filechooser.unselect_all()
+
+    def set_image(self, path):
+        self.radios[-1].set_active(True)
+        self.saved_image_viewer.set_path(path)
+
+    def get_image_path(self):
+        current_page = self.get_current_page()
+        if current_page == 0:
+            return self.filechooser.get_filename()
+        elif current_page == 1:
+            return self.clipboardchooser.get_image_path()
+        else:
+            return self.saved_image_viewer.get_path()
+
+    def __init__(self):
+        gtk.Notebook.__init__(self)
+        self.filechooser = FileChooser()
+        self.filechooser.show()
+        radio1 = gtk.RadioButton(None, "From file")
+        radio1.show()
+        self.append_page(self.filechooser, radio1)
+        self.clipboardchooser = ClipboardChooser()
+        self.clipboardchooser.show()
+        radio2 = gtk.RadioButton(radio1, "From Clipboard")
+        radio2.show()
+        self.append_page(self.clipboardchooser, radio2)
+        self.saved_image_viewer = SavedImageViewer()
+        self.saved_image_viewer.show()
+        radio3 = gtk.RadioButton(radio1, "Saved Image")
+        radio3.show()
+        self.append_page(self.saved_image_viewer, radio3)
+        self.radios = [radio1, radio2, radio3]
+        num = 0
+        for i in self.radios:
+            i.connect("toggled", self.option_changed, num)
+            num += 1
+
+        self.connect('switch-page', self.change_radio)
+
+    def change_radio(self, widget, page, page_num):
+        self.radios[page_num].set_active(True)
+
+    def option_changed(self, widget, index):
+        if widget.get_active():
+            self.set_current_page(index)
+
+
+class FileChooser(gtk.FileChooserWidget):
+    def __init__(self):
+        gtk.FileChooserWidget.__init__(self)
+        self.pixbuf = None
+        self.preview_vbox = gtk.VBox()
+        self.preview_image = gtk.Image()
+        self.preview_image.show()
+        self.preview_vbox.pack_start(self.preview_image)
+        self.preview_vbox.show()
+        self.set_preview_widget(self.preview_vbox)
+        self.connect("update-preview", self.update_preview_cb)
+        self.filter = gtk.FileFilter()
+        self.filter.add_mime_type("image/*")
+        self.set_filter(self.filter)
+
+    def update_preview_cb(self, widget):
+        filename = self.get_preview_filename()
+        self.pixbuf = gtk.gdk.pixbuf_new_from_file_at_size(filename, 128, 128)
+        self.preview_image.set_from_pixbuf(self.pixbuf)
+        return
+
+
+class SavedImageViewer(gtk.ScrolledWindow):
+    def get_path(self):
+        return self.path
+
+    def set_path(self, path):
+        self.path = path
+        self.pixbuf = gtk.gdk.pixbuf_new_from_file(path)
+        self.image.set_from_pixbuf(self.pixbuf)
+
+    def __init__(self):
+        gtk.ScrolledWindow.__init__(self)
+        self.path = None
+        self.image = gtk.Image()
+        self.add_with_viewport(self.image)
+        self.image.show()
+        self.pixbuf = None
+
+
+class ClipboardChooser(gtk.VBox):
+    def get_image_path(self):
+        if self.pixbuf != None:
+            path = tempfile.mktemp(".png")
+            self.pixbuf.save(path, 'png')
+            return path
+
+    def reload_image(self, widget):
+        clipboard = gtk.Clipboard()
+        self.pixbuf = clipboard.wait_for_image()
+        self.image.set_from_pixbuf(self.pixbuf)
+
+    def __init__(self):
+        super(ClipboardChooser, self).__init()
+        self.pixbuf = None
+        toolbar = gtk.Toolbar()
+        separator = gtk.SeparatorToolItem()
+        separator.set_draw(False)
+        separator.set_expand(True)
+        separator.show()
+        toolbar.insert(separator, -1)
+        button = gtk.ToolButton(gtk.STOCK_REFRESH)
+        button.set_tooltip_text("Refresh image from clipboard")
+        button.connect('clicked', self.reload_image)
+        button.show()
+        toolbar.insert(button, -1)
+        separator = gtk.SeparatorToolItem()
+        separator.set_draw(False)
+        separator.set_expand(True)
+        separator.show()
+        toolbar.insert(separator, -1)
+        toolbar.show()
+        self.pack_start(toolbar, False, True, 0)
+        self.sw = gtk.ScrolledWindow()
+        self.image = gtk.Image()
+        self.image.show()
+        self.sw.add_with_viewport(self.image)
+        self.sw.show()
+        self.pack_start(self.sw, True, True, 0)
+"""