Index: zpt/toc_figures.zpt
===================================================================
--- zpt/toc_figures.zpt	(revision 122)
+++ zpt/toc_figures.zpt	(revision 481)
@@ -1,14 +1,54 @@
-<tal:block tal:define="docinfo options/docinfo; pageinfo options/pageinfo;  
-  pn python:int(pageinfo['tocPN']); tocsize python:int(docinfo['tocSize_figures']); grpsize python:int(pageinfo['tocPageSize']);
-  maxpn python:int(tocsize/grpsize);">
-  <div class="thumbruler">
-    <span tal:condition="python:(pn>1)">
-      <a tal:attributes="href python:here.getLink(param='tocPN',val=pn-1)">&lt;</a>
-    </span>
-    <span tal:content="string:$pn of $maxpn"/>
-    <span>
-    <a tal:attributes="href python:here.getLink(param='tocPN',val=pn+1)">&gt;</a>
-  </span>
-</div>
-  <div tal:content="structure python:here.getTocPage(mode='figures',pageinfo=pageinfo,docinfo=docinfo)"/>
-</tal:block>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+</head>
+<body>
+  <!-- block used for main content area -->
+  <div class="col_left" metal:define-macro="main"
+    tal:define="pn pageinfo/tocPN; tocsize docinfo/tocSize_figures; grpsize pageinfo/tocPageSize;
+                maxpn python:int(math.ceil(tocsize/float(grpsize)));">
+    <ul class="switcher">
+      <li><a
+        tal:attributes="href python:here.getLink('tocMode','thumbs')">Thumbnails</a>
+      </li>
+      <li
+        tal:condition="python:docpath and docinfo.get('numTocEntries', None)">
+        <a tal:attributes="href python:here.getLink('tocMode','text')">Content</a>
+      </li>
+      <li
+        tal:condition="python:docpath and docinfo.get('numFigureEntries', None)">
+        <a
+        tal:attributes="href python:here.getLink('tocMode','figures')">Figures</a>
+      </li>
+      <li><a
+        tal:attributes="href python:here.getLink('tocMode','none')">None</a>
+      </li>
+    </ul>
+    <div class="ruler">
+      <form class="autosubmit" tal:attributes="action viewerUrl">
+        <input type="hidden"
+          tal:define="params python:here.getParams('tocPN', None)"
+          tal:repeat="param params"
+          tal:attributes="name param; value python:params[param]" /> 
+        <a tal:condition="python:(pn>1)"
+          tal:attributes="href python:here.getLink('tocPN',pn-1)">&lt;</a>
+        <span tal:condition="python:(pn<=1)">&lt;</span> 
+        <select class="autosubmit" name="tocPN">
+          <option tal:repeat="idx python:range(maxpn)"
+            tal:attributes="selected python:(pn==idx*grpsize+1); value python:(idx*grpsize+1)"
+            tal:content="python:str(idx*grpsize+1)" />
+        </select> 
+        <input type="submit" value="Go" /> 
+        <a tal:condition="python:(pn<maxpn)"
+          tal:attributes="href python:here.getLink('tocPN',pn+1)">&gt;</a>
+        <span tal:condition="python:(pn>=maxpn)">&gt;</span> 
+      </form>
+    </div>
+    <div class="content"
+      tal:content="structure python:here.getTocPage(mode='figures',pageinfo=pageinfo,docinfo=docinfo)" />
+  </div>
+  <!-- toc -->
+</body>
+</html>
Index: zpt/toc_text.zpt
===================================================================
--- zpt/toc_text.zpt	(revision 122)
+++ zpt/toc_text.zpt	(revision 481)
@@ -1,3 +1,12 @@
-<tal:block tal:define="docinfo options/docinfo; pageinfo options/pageinfo;  
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+</head>
+<body>
+  <!-- block used for main content area -->
+  <div class="col_left" metal:define-macro="main"
+     tal:define="docinfo options/docinfo; pageinfo options/pageinfo;  
   pn python:int(pageinfo['tocPN']); tocsize python:int(docinfo['tocSize_text']); grpsize python:int(pageinfo['tocPageSize']);
   maxpn python:int(tocsize/grpsize);">
@@ -11,4 +20,6 @@
   </span>
 </div>
-  <div tal:content="structure python:here.getTocPage(mode='text',pageinfo=pageinfo,docinfo=docinfo)"/>
-</tal:block>
+  <div class="content" tal:content="structure python:here.getTocPage(mode='text',pageinfo=pageinfo,docinfo=docinfo)"/>
+</div> <!-- toc -->
+</body>
+</html>
Index: zpt/toc_thumbs.zpt
===================================================================
--- zpt/toc_thumbs.zpt	(revision 480)
+++ zpt/toc_thumbs.zpt	(revision 481)
@@ -7,5 +7,5 @@
 <body>
   <!-- block used for main content area -->
-  <div class="toc" metal:define-macro="main"
+  <div class="col_left" metal:define-macro="main"
     tal:define="start pageinfo/start;
                 grpsize pageinfo/groupsize;
Index: zpt/viewer_text.zpt
===================================================================
--- zpt/viewer_text.zpt	(revision 480)
+++ zpt/viewer_text.zpt	(revision 481)
@@ -21,10 +21,10 @@
   <div class="page_body" tal:condition="python:here.isAccessible(docinfo)">
     <!--table of contents-->
-    <div class="toc"
+    <div class="col_left"
       metal:use-macro="python:path('here/template/toc_%s/macros/main'%tocMode)" />
     <!-- text page -->
-    <div class="text">
+    <div class="col_main">
       <div class="ruler">
-        <form class="autosubmit pageruler" tal:attributes="action viewerUrl">
+        <form class="autosubmit" tal:attributes="action viewerUrl">
           <input type="hidden" tal:define="params python:here.getParams('pn', None)"
             tal:repeat="param params" tal:attributes="name param; value python:params[param]" />
@@ -48,5 +48,5 @@
         </form>
       </div>
-      <div class="page">
+      <div class="content">
         <div class="pageHeaderTitle" tal:condition="exists:pageinfo/pageHeaderTitle" tal:content="structure pageinfo/pageHeaderTitle"/>
         <tal:block tal:replace="structure textPage"/>
