--- a/zpt/viewer_thumbs.zpt	Thu Jul 26 19:32:31 2012 +0200
+++ b/zpt/viewer_thumbs.zpt	Thu Jul 26 21:22:56 2012 +0200
@@ -11,14 +11,14 @@
 <link rel="stylesheet" href="template/docuviewer_css" type="text/css" />
 <script type="text/javascript" tal:attributes="src string:$rootUrl/template/jquery_js"></script>
 <script type="text/javascript">
-    // <!--
-    $(document).ready(function() {
-        // autosubmit forms
-        $('form.autosubmit').find('.autosubmit').change(function() {
-            this.form.submit();
-        });
-        $('form.autosubmit input[type="submit"]').hide();
-    });
+	// <!--
+	$(document).ready(function() {
+		// autosubmit forms
+		$('form.autosubmit').find('.autosubmit').change(function() {
+			this.form.submit();
+		});
+		$('form.autosubmit input[type="submit"]').hide();
+	});
 // -->
 </script>
 </head>
@@ -41,30 +41,25 @@
       <!-- col-main: text page -->
       <div class="col main">
         <div class="ruler">
-          <metal:block
-            metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs" />
+          <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs" />
         </div>
-
-        <table class="thumbs">
-          <tr tal:repeat="row pageBatch/pages">
-            <td tal:repeat="thumb row"
-              tal:attributes="class python:here.getStyle(thumb['idx'],pn,'thumb')">
-              <a tal:define="idx thumb/idx" tal:condition="idx"
+        <div class="content-thumbs">
+          <table class="thumbs">
+            <tr tal:repeat="row pageBatch/pages">
+              <td tal:repeat="thumb row" tal:attributes="class python:here.getStyle(thumb['idx'],pn,'thumb')"><a
+                tal:define="idx thumb/idx" tal:condition="idx"
                 tal:attributes="href python:here.getLink(params={'pn':idx, 'viewMode':'images'})"> <img
-                tal:attributes="src python:test(docinfo['imageURL'],here.getScalerUrl(pn=idx,dw=thumbSize,dh=thumbSize,docinfo=docinfo),'images/pic');
+                  tal:attributes="src python:test(docinfo['imageURL'],here.getScalerUrl(pn=idx,dw=thumbSize,dh=thumbSize,docinfo=docinfo),'images/pic');
                                 alt idx" /><br />
-                <span title="Scan number" tal:content="idx" /> <span
-                tal:condition="python:pageNumbers and pageNumbers.get(idx, False) and pageNumbers[idx]['no']"
-                title="Original page number"
-                tal:content="python:' (%s)'%(pageNumbers[idx]['no'])" />
-              </a>
-            </td>
-          </tr>
-        </table>
-
-        <div class="ruler">
-          <metal:block
-            metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs" />
+                  <span title="Scan number" tal:content="idx" /> <span
+                  tal:condition="python:pageNumbers and pageNumbers.get(idx, False) and pageNumbers[idx]['no']"
+                  title="Original page number" tal:content="python:' (%s)'%(pageNumbers[idx]['no'])" />
+              </a></td>
+            </tr>
+          </table>
+        </div>
+        <div class="ruler down">
+          <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs" />
         </div>
 
       </div>
@@ -78,26 +73,19 @@
           <form tal:attributes="action viewerUrl" class="autosubmit">
             <input type="hidden"
               tal:define="params python:here.getParams(params={'thumbRows':None,'thumbCols':None,'thumbSize':None})"
-              tal:repeat="param params"
-              tal:attributes="name param; value python:params[param]" />
+              tal:repeat="param params" tal:attributes="name param; value python:params[param]" />
             <ul>
-              <li>
-                Rows 
-                <select class="autosubmit" name="thumbRows" tal:define="rows python:[2,3,5,10,12,15,20,50,100]">
-                  <option tal:repeat="row rows" tal:attributes="selected python:thumbRows==row; value row" tal:content="row"/>
-                </select>
+              <li>Rows <select class="autosubmit" name="thumbRows" tal:define="rows python:[2,3,5,10,12,15,20,50,100]">
+                  <option tal:repeat="row rows" tal:attributes="selected python:thumbRows==row; value row" tal:content="row" />
+              </select>
               </li>
-              <li>
-                Columns 
-                <select class="autosubmit" name="thumbCols" tal:define="cols python:[2,3,5,10,12,15,20,50,100]">
-                  <option tal:repeat="col cols" tal:attributes="selected python:thumbCols==col; value col" tal:content="col"/>
-                </select>
+              <li>Columns <select class="autosubmit" name="thumbCols" tal:define="cols python:[2,3,5,10,12,15,20,50,100]">
+                  <option tal:repeat="col cols" tal:attributes="selected python:thumbCols==col; value col" tal:content="col" />
+              </select>
               </li>
-              <li>
-                Thumbnail size 
-                <select class="autosubmit" name="thumbSize" tal:define="sizes python:[100,150,200,300,500]">
-                  <option tal:repeat="size sizes" tal:attributes="selected python:thumbSize==size; value size" tal:content="size"/>
-                </select>
+              <li>Thumbnail size <select class="autosubmit" name="thumbSize" tal:define="sizes python:[100,150,200,300,500]">
+                  <option tal:repeat="size sizes" tal:attributes="selected python:thumbSize==size; value size" tal:content="size" />
+              </select>
               </li>
             </ul>
           </form>