Continuing the great layout change...

29 files changed, 436 insertions, 711 deletions

diff --git a/web/views/about.erb b/web/views/about.erb
index 0e64c48..54d9b16 100644
--- a/web/views/about.erb
+++ b/web/views/about.erb
@@ -1,5 +1,18 @@
-<h1>About</h1>
 
+<div class="boxes">
+    <h2>Sources</h2>
+    <div class="box">
+        <p>Taginfo integrates data about tags from several sources:</p>
+        <p>From the <b>OSM database</b> statistics about key and tag usage.</p>
+        <p>The <b>Wiki</b> contains some documentation for keys and tags.</p>
+        <p>Icons and styles are taken from the <b>JOSM</b> editor
+        configuration.</p>
+        <p>&#x2794; <a href="http://wiki.openstreetmap.org/wiki/Taginfo/Sources">More information about the sources on the wiki...</a></p>
+    </div>
+</div>
+
+
+<h1>About taginfo</h1>
 <p>OpenStreetMap uses <b>tags</b> to add meaning to geographic objects. There
 is no fixed list of those tags. New tags can be invented and used as needed.
 Everybody can come up with a new tag and add it to new or existing objects.
@@ -17,15 +30,6 @@ also gets information about those tags from the wiki and from other places. Tagi
 tries to bring together all information about tags to help you understand
 how they are used and what they mean.</p>
 
-<h2>Sources</h2>
-
-<p><b>Wiki:</b> The <img src="/img/link-extern.gif" alt=""/><a class="extlink" href="http://wiki.openstreetmap.org/">OSM wiki</a>
-contains lots of documentation about tags but the information is far from complete.
-Taginfo finds all pages beginning with 'Key:' or 'Tag:' and their
-counterparts for other languages (for example 'DE:Key:...'). </p>
-
-<p><b>JOSM:</b> <img src="/img/link-extern.gif" alt=""/><a class="extlink" href="http://josm.openstreetmap.de/">JOSM</a> is one of the most popular OSM editors.</p>
-
 <h2>Contact</h2>
 
 <p>Taginfo was created and is maintained by <a href="http://wiki.openstreetmap.org/wiki/User:Joto">Jochen Topf</a>. You can contact
@@ -59,11 +63,3 @@ Please use the API responsibly. Do not create huge amounts of requests to
 get the whole database or large chunks of it, instead use the
 <a href="/download">database downloads</a> provided.</p>
 
-<h2>Similar tools</h2>
-
-<p>Taginfo is not the first tool to try something like this. Others like
-<img src="/img/link-extern.gif" alt=""/><a class="extlink" href="http://wiki.openstreetmap.org/wiki/Tagwatch">Tagwatch</a>,
-<img src="/img/link-extern.gif" alt=""/><a class="extlink" href="http://tagstat.hypercube.telascience.org/index.php">Tagstat</a>, and
-<img src="/img/link-extern.gif" alt=""/><a class="extlink" href="http://www.osmdoc.com/">Osmdoc</a> came before it.</p>
-
-
diff --git a/web/views/apidoc.erb b/web/views/apidoc.erb
index d1cf6c7..d3685b3 100644
--- a/web/views/apidoc.erb
+++ b/web/views/apidoc.erb
@@ -1,4 +1,4 @@
-<h1>API Documentation</h1>
+<h1 class="section">API Documentation</h1>
 
 <p>See <a href="http://wiki.openstreetmap.org/wiki/Taginfo/API">the OSM wiki</a> for general information about the API.</p>
 
diff --git a/web/views/download.erb b/web/views/download.erb
index 9eb95aa..0e06179 100644
--- a/web/views/download.erb
+++ b/web/views/download.erb
@@ -1,24 +1,34 @@
-<h1><%= t.taginfo.download %></h1>
-
-<%= t.pages.download.index.intro %>
-
-<table class="list">
-    <tr>
-        <th class="tl"><%= t.pages.download.index.file %></th>
-        <th class="tr"><%= t.pages.download.index.packed %></th>
-        <th class="tr"><%= t.pages.download.index.unpacked %></th>
-        <th class="tl"><%= t.pages.download.index.description %></th>
-    </tr>
-<% Source.visible.each do |source| %>
-        <td class="tl"><%= source.link_download %></td>
-        <td class="tr"><%= source.dbpack %></td>
-        <td class="tr"><%= source.dbsize %></td>
-        <td class="tl"><%= t.sources[source.id].description %></td>
-    </tr>
+<div class="pre">
+    <h1 class="section"><%= t.taginfo.download %></h1>
+    <%= t.pages.download.index.intro %>
+</div>
+<div class="box resize">
+    <table class="list">
+        <tr>
+            <th class="tl"><%= t.pages.download.index.file %></th>
+            <th class="tr"><%= t.pages.download.index.packed %></th>
+            <th class="tr"><%= t.pages.download.index.unpacked %></th>
+            <th class="tl"><%= t.pages.download.index.description %></th>
+        </tr>
+        <tr>
+            <td class="tl"><a rel="nofollow" href="/download/taginfo-master.db.bz2">taginfo-master.db.bz2</a></td>
+            <td class="tr"><%= File.size("../../download/taginfo-master.db.bz2").to_bytes rescue "<i>#{ t.pages.download.index.unknown }</i>" %></td>
+            <td class="tr"><%= File.size("../../data/taginfo-master.db").to_bytes rescue "<i>#{ t.pages.download.index.unknown }</i>" %></td>
+            <td class="tl"><%= t.sources.master.description %></td>
+        </tr>
+<% Source.visible.each_with_index do |source, n| c = (n%2==0) ? ' even' : '' %>
+        <tr>
+            <td class="tl<%= c %>"><%= source.link_download %></td>
+            <td class="tr<%= c %>"><%= source.dbpack %></td>
+            <td class="tr<%= c %>"><%= source.dbsize %></td>
+            <td class="tl<%= c %>"><%= t.sources[source.id].description %></td>
+        </tr>
 <% end %>
-        <td class="tl"><a rel="nofollow" href="/download/taginfo-master.db.bz2">taginfo-master.db.bz2</a></td>
-        <td class="tr"><%= File.size("../../download/taginfo-master.db.bz2").to_bytes rescue "<i>#{ t.pages.download.index.unknown }</i>" %></td>
-        <td class="tr"><%= File.size("../../data/taginfo-master.db").to_bytes rescue "<i>#{ t.pages.download.index.unknown }</i>" %></td>
-        <td class="tl"><%= t.sources.master.description %></td>
-    </tr>
-</table>
+    </table>
+</div>
+<% javascript do
+    JQuery.ready do
+        JS.raw(%Q{ resize_wrapper(); })
+    end
+end
+%>
diff --git a/web/views/embed/key.erb b/web/views/embed/key.erb
index 5b457f0..e1aaa09 100644
--- a/web/views/embed/key.erb
+++ b/web/views/embed/key.erb
@@ -1,11 +1,11 @@
 <% if @key == '{{{key}}}' %>
-<a target="_blank" title="More information about key '<%= escape_html(@key) %>' at Taginfo" href="http://taginfo.openstreetmap.org/"><img src="/img/taginfo.24.png" alt="Taginfo"/> <b>Taginfo</b> [More...]</a>
+<a target="_blank" title="More information about key '<%= escape_html(@key) %>' at Taginfo" href="http://taginfo.openstreetmap.org/">tag<b>info</b> [More...]</a>
 <p>Statistics about the key will appear here.</p>
 <% elsif @dbkey.nil? %>
-<a target="_blank" title="More information about key '<%= escape_html(@key) %>' at Taginfo" href="http://taginfo.openstreetmap.org/tags/?key=<%= escape(@key) %>&value=<%= escape(@value) %>"><img src="/img/taginfo.24.png" alt="Taginfo"/> <b>Taginfo</b> [More...]</a>
+<a target="_blank" title="More information about key '<%= escape_html(@key) %>' at Taginfo" href="http://taginfo.openstreetmap.org/tags/?key=<%= escape(@key) %>&value=<%= escape(@value) %>">tag<b>info</b> [More...]</a>
 <p>This key does not appear in the OSM database.</p>
 <% else %>
-<a target="_blank" title="More information about key '<%= escape_html(@key) %>' at Taginfo" href="http://taginfo.openstreetmap.org/keys/?key=<%= escape(@key) %>"><img src="/img/taginfo.24.png" alt="Taginfo"/> <b>Taginfo</b> [More...]</a>
+<a target="_blank" title="More information about key '<%= escape_html(@key) %>' at Taginfo" href="http://taginfo.openstreetmap.org/keys/?key=<%= escape(@key) %>">tag<b>info</b> [More...]</a>
 <div class="content"><table>
     <tr>
         <td class="ft"><img src="/img/types/node.16.png" alt="Nodes" title="Nodes with key '<%= escape_html(@key) %>' in database"></td>
diff --git a/web/views/embed/layout.erb b/web/views/embed/layout.erb
index 9f02fb3..edb3c28 100644
--- a/web/views/embed/layout.erb
+++ b/web/views/embed/layout.erb
@@ -4,7 +4,7 @@
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <style>
 body {
-    font-family: Verdana,Arial,sans-serif;
+    font-family: Arial,sans-serif;
     font-size: 0.8em;
     padding: 0;
     margin: 0;
@@ -13,7 +13,7 @@ body {
 div.main {
     width: 180px;
     background-color: #ffffff;
-    border: 1px solid #006000;
+    border: 1px solid #a0a0a0;
     padding: 4px;
     -moz-border-radius: 4px;
     -khtml-border-radius: 4px;
@@ -30,7 +30,7 @@ a img {
 
 a {
     text-decoration: none;
-    color: #006000;
+    color: #083e76;
 }
 
 div.content {
diff --git a/web/views/embed/tag.erb b/web/views/embed/tag.erb
index 74361b8..394f168 100644
--- a/web/views/embed/tag.erb
+++ b/web/views/embed/tag.erb
@@ -1,11 +1,11 @@
 <% if @key == '{{{key}}}' && @value == '{{{value}}}' %>
-<a target="_blank" title="More information about tag '<%= escape_html(@key) %>=<%= escape_html(@value) %>' at Taginfo" href="http://taginfo.openstreetmap.org/"><img src="/img/taginfo.24.png" alt="Taginfo"/> <b>Taginfo</b> [More...]</a>
+<a target="_blank" title="More information about tag '<%= escape_html(@key) %>=<%= escape_html(@value) %>' at Taginfo" href="http://taginfo.openstreetmap.org/">tag<b>info</b> [More...]</a>
 <p>Statistics about the tag will appear here.</p>
 <% elsif @dbtag.nil? %>
-<a target="_blank" title="More information about tag '<%= escape_html(@key) %>=<%= escape_html(@value) %>' at Taginfo" href="http://taginfo.openstreetmap.org/tags/?key=<%= escape(@key) %>&value=<%= escape(@value) %>"><img src="/img/taginfo.24.png" alt="Taginfo"/> <b>Taginfo</b> [More...]</a>
+<a target="_blank" title="More information about tag '<%= escape_html(@key) %>=<%= escape_html(@value) %>' at Taginfo" href="http://taginfo.openstreetmap.org/tags/?key=<%= escape(@key) %>&value=<%= escape(@value) %>">tag<b>info</b> [More...]</a>
 <p>This tag does not appear in the OSM database.</p>
 <% else %>
-<a target="_blank" title="More information about tag '<%= escape_html(@key) %>=<%= escape_html(@value) %>' at Taginfo" href="http://taginfo.openstreetmap.org/tags/?key=<%= escape(@key) %>&value=<%= escape(@value) %>"><img src="/img/taginfo.24.png" alt="Taginfo"/> <b>Taginfo</b> [More...]</a>
+<a target="_blank" title="More information about tag '<%= escape_html(@key) %>=<%= escape_html(@value) %>' at Taginfo" href="http://taginfo.openstreetmap.org/tags/?key=<%= escape(@key) %>&value=<%= escape(@value) %>">tag<b>info</b> [More...]</a>
 <div class="content"><table>
     <tr>
         <td class="ft"><img src="/img/types/node.16.png" alt="Nodes" title="Nodes with tag '<%= escape_html(@key) %>=<%= escape_html(@value) %>' in database"></td>
diff --git a/web/views/index.erb b/web/views/index.erb
index e27ce36..51be9fe 100644
--- a/web/views/index.erb
+++ b/web/views/index.erb
@@ -1,55 +1,61 @@
-<table id="index">
+<table class="boxes resize" width="100%">
     <tr>
         <td>
-            <h2><a href="/keys">KEYS</a></h2>
+            <h2><a href="/keys"><%= t.taginfo.keys %></a>
+            / <a href="/tags"><%= t.taginfo.tags %></a></h2>
         </td>
         <td rowspan="4" width="20"></td>
-        <td width="338">
-            <h2><a href="/reports">REPORTS</a></h2>
+        <td width="232">
+            <h2><a href="/reports"><%= t.taginfo.reports %></a></h2>
         </td>
         <td rowspan="4" width="20"></td>
-        <td width="338">
-            <h2><a href="/about">ABOUT TAGINFO</a></h2>
+        <td width="232">
+            <h2><a href="/about"><%= t.taginfo.about %></a></h2>
         </td>
     </tr>
     <tr>
         <td rowspan="3" class="box">
-            <p>Here are some common tag keys. There is also a <a href="/keys">list of all keys</a>
-            or a <a href="/tags">list of the most common tags</a>.</p>
-            <p style="margin-top: 15px; line-height: 200%; text-align: justify;">
-<% @tags.each do |tag| %>
-            <a href="/keys/<%= tag['key'] %>" class="taglink" style="font-size: <%= tagcloud_size(tag) %>px;"><%= tag['key'] %></a>
-<% end %>
-            </p>
+            <p><%= t.pages.index.keys.intro %></p>
+            <div id="tagcloud" style="margin: 15px 0; line-height: 200%; text-align: justify; overflow: hidden;">
+            </div>
+            <p class="emphasis" style="margin-top: 20px;">&#x2794; <a href="/keys"><%= t.pages.index.keys.listkeys %></a></p>
+            <p class="emphasis">&#x2794; <a href="/tags"><%= t.pages.index.keys.listtags %></a></p>
         </td>
         <td rowspan="3" class="box">
-            <%= t.pages.reports.index.intro %>
-            <p style="margin-top: 15px">
+            <p><%= t.pages.reports.index.intro %></p>
+            <ul style="margin: 0 0 0 18px; padding: 0;">
 <% Report.each do |report| %>
-                <a href="<%= report.url %>"><%= t.reports[report.name].name %></a><br/>
+                <li><a href="<%= report.url %>"><%= t.reports[report.name].name %></a></li>
 <% end %>
-            </p>
-            <p style="padding-top: 20px;"><a href="/reports">See all reports...</a></p>
+            </ul>
+            <p class="emphasis" style="margin-top: 20px;">&#x2794; <a href="/reports"><%= t.pages.index.reports.listreports %></a></p>
         </td>
         <td class="box">
-            <p>OpenStreetMap uses <b>tags</b> of the form <b>key=value</b>
-            to add meaning to geographic objects.
-            Taginfo collects information about these tags from several
-            sources and helps you find tags and explore their uses.</p>
-            <p><a href="/about">More about taginfo...</a></p>
+            <%= t.pages.index.about.intro %>
+            <p class="emphasis" style="margin-top: 20px;">&#x2794; <a href="/about"><%= t.pages.index.about.more %></a></p>
         </td>
     </tr>
     <tr>
         <td>
-            <h2><a href="/international">INTERNATIONAL</a></h2>
+            <h2><a href="/international"><%= t.taginfo.international %></a></h2>
         </td>
     </tr>
     <tr>
         <td class="box">
-            <p>This is the main taginfo site. It contains OSM data for
-            the whole planet and is updated daily.</p>
-            <p><a href="/sites">See other taginfo sites showing data for a
-            specific area...</a></p>
+            <p><%= TaginfoConfig.get('instance.description') %></p>
+            <p class="emphasis" style="margin-top: 20px;">&#x2794; <a href="http://wiki.openstreetmap.org/wiki/Taginfo/Sites"><%= t.pages.index.international.see %></a></p>
         </td>
     </tr>
 </table>
+<% javascript do
+    JS.raw('function tagcloud_data() { return ' + @tags.map{ |tag| [tag['key'], tagcloud_size(tag)] }.to_json.gsub(/\],/, "],\n")) + "; }\n" +
+
+    JQuery.ready do
+        JS.raw(<<"JAVASCRIPT")
+jQuery(window).resize(resize_home);
+resize_home();
+
+JAVASCRIPT
+    end
+end
+%>
diff --git a/web/views/key.erb b/web/views/key.erb
index 429b2e3..98e28e9 100644
--- a/web/views/key.erb
+++ b/web/views/key.erb
@@ -1,28 +1,24 @@
-<div id="tools">
-    <% if @count_all_values < 1000 %>
-        <%= xapi_link('*', @key) %> <%= josm_link('*', @key) %>
-    <% else %>
-        <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" width="14" height="10" alt=""/>XAPI</span>
-        <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" width="14" height="10" alt=""/>JOSM</span>
-    <% end %>
-</div>
-
-<form id="filter-form">
-    <label for="filter"><%= t.pages.key.filter.label %></label>
-    <select id="filter" name="filter">
-        <option value="all"<%=       @sel['all']       %>><%= t.pages.key.filter.none %></option>
-        <option value="nodes"<%=     @sel['nodes']     %>><%= t.pages.key.filter.nodes %></option>
-        <option value="ways"<%=      @sel['ways']      %>><%= t.pages.key.filter.ways %></option>
-        <option value="relations"<%= @sel['relations'] %>><%= t.pages.key.filter.relations %></option>
-    </select>
-</form>
-
-<h1><%= @key_pp %></h1>
-
-<div class="tag-description" title="Description from the wiki">
-    <%= @desc %>
+<div class="pre">
+    <div id="tools">
+        <% if @count_all_values < 1000 %>
+            <%= xapi_link('*', @key) %> <%= josm_link('*', @key) %>
+        <% else %>
+            <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" width="14" height="10" alt=""/>XAPI</span>
+            <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" width="14" height="10" alt=""/>JOSM</span>
+        <% end %>
+    </div>
+    <form id="filter-form">
+        <label for="filter"><%= t.pages.key.filter.label %></label>
+        <select id="filter" name="filter">
+            <option value="all"<%=       @sel['all']       %>><%= t.pages.key.filter.none %></option>
+            <option value="nodes"<%=     @sel['nodes']     %>><%= t.pages.key.filter.nodes %></option>
+            <option value="ways"<%=      @sel['ways']      %>><%= t.pages.key.filter.ways %></option>
+            <option value="relations"<%= @sel['relations'] %>><%= t.pages.key.filter.relations %></option>
+        </select>
+    </form>
+    <h1><%= @key_pp %></h1>
+    <p><%= @desc %></p>
 </div>
-
 <div id="tabs">
     <ul>
         <li><a href="#overview"><%= t.taginfo.overview %></a></li>
@@ -36,11 +32,12 @@
         <h2><%= t.taginfo.overview %></h2>
         <table id="grid-overview">
         </table>
+        <p>Objects with this key are owned by <%= @user_count %> different users.</p>
     </div>
     <div id="values">
         <h2><%= t.pages.key.values_used %></h2>
-        <div class="canvas" id="canvas-values" style="position: absolute;"></div>
-        <div style="margin-left: 180px;">
+        <div class="canvas" id="canvas-values" style="float: right;"></div>
+        <div>
             <table id="grid-values">
             </table>
         </div>
@@ -81,12 +78,12 @@
     </div>
     <div id="josm">
         <h2><%= t.pages.key.josm_rules.title %></h2>
-        <form>
+<!--        <form>
             <label for="josm-style"><%= t.pages.key.josm_rules.choice %></label>
             <select id="josm-style" name="josm-style">
                 <option>Standard</option>
             </select>
-        </form>
+        </form>-->
        <table id="grid-josm">
        </table>
     </div>
@@ -108,9 +105,7 @@
         </table>
     </div>-->
 </div>
-
 <iframe id="josmiframe" name="josmiframe"></iframe>
-
 <% javascript do
     JQuery.ready do
         JS.raw(<<"JAVASCRIPT")
@@ -131,6 +126,7 @@ jQuery('#filter').bind('change', function() {
 
 var tabs = jQuery('#tabs').tabs({
     show: function(event, ui) { 
+        resize_wrapper();
         window.location.hash = ui.tab.hash;
         if (ui.tab.hash.substring(1) in create_flexigrid_for.key) {
             create_flexigrid_for.key[ui.tab.hash.substring(1)](#{ @key.to_json }, #{ @filter_type.to_json });
diff --git a/web/views/keys.erb b/web/views/keys.erb
index 26be6e2..3154633 100644
--- a/web/views/keys.erb
+++ b/web/views/keys.erb
@@ -1,11 +1,14 @@
-<h1 style="text-transform: uppercase;"><%= t.osm.keys %></h1>
-
-<table id="grid-keys">
-</table>
-
+<div class="pre">
+    <h1 class="section"><%= t.osm.keys %></h1>
+    <%= t.pages.keys.intro %>
+</div>
+<div class="box resize">
+    <table id="grid-keys">
+    </table>
+</div>
 <% javascript do
     JQuery.ready do
-        JS.raw(%Q{ create_flexigrid_for.keys.keys(); })
+        JS.raw(%Q{ resize_wrapper(); create_flexigrid_for.keys.keys(); })
     end
 end
 %>
diff --git a/web/views/layout.erb b/web/views/layout.erb
index f1b7dfe..cd6ce97 100644
--- a/web/views/layout.erb
+++ b/web/views/layout.erb
@@ -11,8 +11,11 @@
 <%= javascript_tags %>
     </head>
     <body>
-        <div id="top">
-            <div id="top_right">
+        <div id="header">
+            <div id="header_date" title="<%= t.taginfo.data_from_description %>">
+                <%= t.taginfo.data_from %>: <%= @data_until %> UTC
+            </div>
+            <div id="header_forms">
                 <form id="set_language" action="/switch_locale">
                     <input type="hidden" name="url" value="<%= request.path %>"/>
                     <select id="locale" name="locale">
@@ -22,19 +25,16 @@
                     </select>
                 </form>
                 <form action="/search">
-                    <input type="text" id="search" name="q" value="Search taginfo..." style="color: #d0d0d0;"/>
+                    <input type="text" id="search" name="q" value=""/>
                 </form>
             </div>
-            <div id="date">
-                <%= t.taginfo.data_from %>: <%= @data_until %> UTC
-            </div>
-            <div id="top_left">
-                <a href="/"><img src="<%= TaginfoConfig.get('instance.icon', '/img/logo/world.png') %>" alt="taginfo"/></a>
+            <div id="header_logo">
+                <a href="/"><img width="49" height="49" src="<%= TaginfoConfig.get('instance.icon', '/img/logo/world.png') %>" alt="taginfo"/></a>
 <% if @section %>
-                <a href="/"><img src="/img/logo/taginfo_with_bar.png" alt="taginfo"/></a>
+                <a href="/"><img width="136" height="49" src="/img/logo/taginfo_with_bar.png" alt="taginfo"/></a>
                 <a class="section" href="/<%= @section %>"><%= @section_title %></a>
 <% else %>
-                <a href="/"><img src="/img/logo/taginfo.png" alt="taginfo"/></a>
+                <a href="/"><img width="129" height="49" src="/img/logo/taginfo.png" alt="taginfo"/></a>
 <% end %>
             </div>
         </div>
@@ -43,9 +43,12 @@
         </div>
         <div id="footer">
             <div id="footer_left">
-                <a href="http://www.openstreetmap.org/"><b style="font-style: smallcaps;">OpenStreetMap</b></a>
+                <a href="http://www.openstreetmap.org/"><b style="font-style: smallcaps;">OpenStreetMap</b> - The Free Wiki World Map</a>
             </div>
             <div id="footer_right">
+                <a href="/keys"><%= t.taginfo.keys %></a> &middot;
+                <a href="/tags"><%= t.taginfo.tags %></a> &middot;
+                <a href="/reports"><%= t.taginfo.reports %></a> &middot;
                 <a href="/sources"><%= t.taginfo.sources %></a> &middot;
                 <a href="/download"><%= t.taginfo.download %></a> &middot;
                 <a href="/about"><%= t.taginfo.about %></a> &middot;
diff --git a/web/views/reports/characters_in_keys.erb b/web/views/reports/characters_in_keys.erb
index 390e091..71f2470 100644
--- a/web/views/reports/characters_in_keys.erb
+++ b/web/views/reports/characters_in_keys.erb
@@ -1,7 +1,7 @@
-<h1><%= t.reports.characters_in_keys.name %></h1>
-
-<%= t.reports.characters_in_keys.intro %>
-
+<div class="pre">
+    <h1><%= t.reports.characters_in_keys.name %></h1>
+    <%= t.reports.characters_in_keys.intro %>
+</div>
 <div id="tabs">
     <ul>
         <li><a href="#statistics"><%= t.reports.characters_in_keys.statistics.tab %></a></li>
@@ -10,36 +10,45 @@
     </ul>
     <div id="statistics">
         <h2><%= t.reports.characters_in_keys.statistics.title %></h2>
-        <div class="canvas" id="canvas"></div>
-        <p></p>
-        <table id="grid-statistics">
+        <div class="canvas boxpre" id="canvas" style="margin-bottom: 20px;"></div>
+        <table class="list">
+            <tr>
+                <th>&nbsp;</th>
+                <th class="tr"><%= t.misc.count %></th>
+                <th class="tr"><%= t.reports.characters_in_keys.statistics.fraction %></th>
+                <th class="tl"><%= t.reports.characters_in_keys.statistics.characters %></th>
+            </tr>
 <% letter='A'
    colors = { :A => '#2ca02c', :B => '#98df8a', :C => '#dbdb8d', :D => '#d62728', :E => '#ff9896', :F => '#aec7e8' }
-   %w(plain colon letters space problem rest).each do |type| %>
+   %w(plain colon letters space problem rest).each_with_index do |type, n| c = (n%2!=0) ? ' even' : '' %>
             <tr>
-                <td style="background-color: <%= colors[letter.to_sym] %>;"><%= letter %></td>
-                <td><%= @db.stats('characters_in_keys_' + type) %></td>
-                <td><%= sprintf '%.2f', @db.stats('characters_in_keys_' + type) * 100.0 / @db.stats('num_keys') %>%</td>
-                <td><%= t.reports.characters_in_keys.statistics.characters_in_keys[type] %></td>
+                <td class="tc<%= c %>" style="background-color: <%= colors[letter.to_sym] %>;"><%= letter %></td>
+                <td class="tr<%= c %>"><%= @db.stats('characters_in_keys_' + type) %></td>
+                <td class="tr<%= c %>"><%= sprintf '%.2f', @db.stats('characters_in_keys_' + type) * 100.0 / @db.stats('num_keys') %>%</td>
+                <td class="tl<%= c %>"><%= t.reports.characters_in_keys.statistics.characters_in_keys[type] %></td>
             </tr>
 <% letter = letter.succ; end %>
             <tr>
-                <td style="border-top: 1px solid #000000;"></td>
-                <td style="border-top: 1px solid #000000;"><%= @db.stats('num_keys') %></td>
-                <td style="border-top: 1px solid #000000;">100%</td>
-                <td style="border-top: 1px solid #000000;">Total</td>
+                <td class="tc" style="border-top: 1px solid #000000;"></td>
+                <td class="tr" style="border-top: 1px solid #000000;"><%= @db.stats('num_keys') %></td>
+                <td class="tr" style="border-top: 1px solid #000000;">100%</td>
+                <td class="tl" style="border-top: 1px solid #000000;">Total</td>
             </tr>
         </table>
     </div>
     <div id="whitespace">
         <h2><%= t.reports.characters_in_keys.whitespace.title %></h2>
-        <%= t.reports.characters_in_keys.whitespace.intro %>
+        <div class="boxpre">
+            <%= t.reports.characters_in_keys.whitespace.intro %>
+        </div>
         <table id="grid-whitespace">
         </table>
     </div>
     <div id="problematic">
         <h2><%= t.reports.characters_in_keys.problematic.title %></h2>
-        <%= t.reports.characters_in_keys.problematic.intro %>
+        <div class="boxpre">
+            <%= t.reports.characters_in_keys.problematic.intro %>
+        </div>
         <table id="grid-problematic">
         </table>
     </div>
@@ -51,8 +60,11 @@
 
 var tabs = jQuery('#tabs').tabs({
     show: function(event, ui) { 
+        resize_wrapper();
         window.location.hash = ui.tab.hash;
-        create_flexigrid_for.reports.characters_in_keys[ui.tab.hash.substring(1)]();
+        if (create_flexigrid_for.reports.characters_in_keys[ui.tab.hash.substring(1)]) {
+            create_flexigrid_for.reports.characters_in_keys[ui.tab.hash.substring(1)]();
+        }
     }
 });
 
diff --git a/web/views/reports/database_statistics.erb b/web/views/reports/database_statistics.erb
index fe36c97..da04737 100644
--- a/web/views/reports/database_statistics.erb
+++ b/web/views/reports/database_statistics.erb
@@ -1,49 +1,57 @@
 <h1><%= t.reports.database_statistics.name %></h1>
 
-<div class="stats" style="float: left; padding-right: 60px;">
-    <div>
-        <h2><img class="icon_large" src="/img/types/all.24.png" alt=""/> Objects</h2>
-        <table class="stats">
-            <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('objects').to_s_with_ts %></td><td> objects in the database</td></tr>
-            <tr><td>with together </td><td class="number"><%= @db.stats('object_tags').to_s_with_ts %></td><td> tags</td></tr>
-        </table>
-    </div>
-    <div>
-        <h2><img class="icon_large" src="/img/types/node.24.png" alt=""/> Nodes</h2>
-        <table class="stats">
-            <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('nodes').to_s_with_ts %></td><td> nodes</td></tr>
-            <tr><td>of which </td><td class="number"><%= @db.stats('nodes_with_tags').to_s_with_ts %></td><td> have at least one tag</td></tr>
-            <tr><td>(thats </td><td class="number"><%= (10000.0 * @db.stats('nodes_with_tags') / @db.stats('nodes')).to_i.to_f / 100 %></td><td> %)</td></tr>
-            <tr><td>with together </td><td class="number"><%= @db.stats('node_tags').to_s_with_ts %></td><td> tags</td></tr>
-            <tr><td>(or about </td><td class="number"><%= ( 100.0 * @db.stats('node_tags') / @db.stats('nodes_with_tags')).to_i.to_f / 100 %></td><td> tags per tagged node)</td></tr>
-        </table>
-    </div>
-    <div>
-        <h2><img class="icon_large" src="/img/types/way.24.png" alt=""/> Ways</h2>
-        <table class="stats">
-            <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('ways').to_s_with_ts %></td><td> ways</td></tr>
-            <tr><td>(of which </td><td class="number"><%= @db.stats('closed_ways').to_s_with_ts %></td><td> are closed)</td></tr>
-            <tr><td>with together </td><td class="number"><%= @db.stats('way_tags').to_s_with_ts %></td><td> tags</td></tr>
-            <tr><td>(or about </td><td class="number"><%= ( 100.0 * @db.stats('way_tags') / @db.stats('ways')).to_i.to_f / 100 %></td><td> tags per way)</td></tr>
-        </table>
-    </div>
-    <div>
-        <h2><img class="icon_large" src="/img/types/relation.24.png" alt=""/> Relations</h2>
-        <table class="stats">
-            <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('relations').to_s_with_ts %></td><td> relations</td></tr>
-            <tr><td>with together </td><td class="number"><%= @db.stats('relation_tags').to_s_with_ts %></td><td> tags</td></tr>
-            <tr><td>(or about </td><td class="number"><%= ( 100.0 * @db.stats('relation_tags') / @db.stats('relations')).to_i.to_f / 100 %></td><td> tags per relation)</td></tr>
-        </table>
-    </div>
-</div>
-
-<div class="stats">
-    <div>
-        <h2><img class="icon_large" src="/img/types/tag.24.png" alt=""/> Tags</h2>
-        <table class="stats">
-            <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('num_keys').to_s_with_ts %></td><td> different keys</td></tr>
-            <tr><td>and </td><td class="number"><%= @db.stats('num_tags').to_s_with_ts %></td><td> different tags</td></tr>
-        </table>
-    </div>
-</div>
-
+<table class="boxes">
+    <tr>
+        <td><h2><img class="icon_large" src="/img/types/all.24.png" alt=""/> OBJECTS</h2></td>
+        <td rowspan="4" width="20"></td>
+        <td><h2><img class="icon_large" src="/img/types/tag.24.png" alt=""/> TAGS</h2></td>
+        <td rowspan="4" width="20"></td>
+        <td></td>
+    </tr>
+    <tr>
+        <td class="box">
+            <table>
+                <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('objects').to_s_with_ts %></td><td> objects in the database</td></tr>
+                <tr><td>with together </td><td class="number"><%= @db.stats('object_tags').to_s_with_ts %></td><td> tags</td></tr>
+            </table>
+        </td>
+        <td class="box">
+            <table>
+                <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('num_keys').to_s_with_ts %></td><td> different keys</td></tr>
+                <tr><td>and </td><td class="number"><%= @db.stats('num_tags').to_s_with_ts %></td><td> different tags</td></tr>
+            </table>
+        </td>
+        <td></td>
+    </tr>
+    <tr>
+        <td><h2><img class="icon_large" src="/img/types/node.24.png" alt=""/> NODES</h2></td>
+        <td><h2><img class="icon_large" src="/img/types/way.24.png" alt=""/> WAYS</h2></td>
+        <td><h2><img class="icon_large" src="/img/types/relation.24.png" alt=""/> RELATIONS</h2></td>
+    </tr>
+    <tr>
+        <td class="box">
+            <table>
+                <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('nodes').to_s_with_ts %></td><td> nodes</td></tr>
+                <tr><td>of which </td><td class="number"><%= @db.stats('nodes_with_tags').to_s_with_ts %></td><td> have at least one tag</td></tr>
+                <tr><td>(thats </td><td class="number"><%= (10000.0 * @db.stats('nodes_with_tags') / @db.stats('nodes')).to_i.to_f / 100 %></td><td> %)</td></tr>
+                <tr><td>with together </td><td class="number"><%= @db.stats('node_tags').to_s_with_ts %></td><td> tags</td></tr>
+                <tr><td>(or about </td><td class="number"><%= ( 100.0 * @db.stats('node_tags') / @db.stats('nodes_with_tags')).to_i.to_f / 100 %></td><td> tags per tagged node)</td></tr>
+            </table>
+        </td>
+        <td class="box">
+            <table>
+                <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('ways').to_s_with_ts %></td><td> ways</td></tr>
+                <tr><td>(of which </td><td class="number"><%= @db.stats('closed_ways').to_s_with_ts %></td><td> are closed)</td></tr>
+                <tr><td>with together </td><td class="number"><%= @db.stats('way_tags').to_s_with_ts %></td><td> tags</td></tr>
+                <tr><td>(or about </td><td class="number"><%= ( 100.0 * @db.stats('way_tags') / @db.stats('ways')).to_i.to_f / 100 %></td><td> tags per way)</td></tr>
+            </table>
+        </td>
+        <td class="box">
+            <table>
+                <tr><td style="width: 7em;">There are </td><td style="width: 7em;" class="number"><%= @db.stats('relations').to_s_with_ts %></td><td> relations</td></tr>
+                <tr><td>with together </td><td class="number"><%= @db.stats('relation_tags').to_s_with_ts %></td><td> tags</td></tr>
+                <tr><td>(or about </td><td class="number"><%= ( 100.0 * @db.stats('relation_tags') / @db.stats('relations')).to_i.to_f / 100 %></td><td> tags per relation)</td></tr>
+            </table>
+        </td>
+    </tr>
+</table>
diff --git a/web/views/reports/frequently_used_keys_without_wiki_page.erb b/web/views/reports/frequently_used_keys_without_wiki_page.erb
index 6c0f8b2..78d8909 100644
--- a/web/views/reports/frequently_used_keys_without_wiki_page.erb
+++ b/web/views/reports/frequently_used_keys_without_wiki_page.erb
@@ -1,24 +1,26 @@
-<h1><%= @title %></h1>
-
-<p>This table shows keys that appear more than 10&thinsp;000 times in the OSM
-database but have no wiki page describing them.  If you know anything about one
-of these keys, please create the wiki page by clicking on the link in the
-leftmost column and describe the key. Sometimes it might make sense to create a
-redirect to a different wiki page instead. To do this put just one line with
-<tt style="background-color: #f0f0f0; padding: 0 2px;">#REDIRECT [[<i>page name</i>]]</tt>
-in the wiki page.</p>
-
-<form method="" type="GET">
-    <input type="checkbox" name="english" id="english"<%= params[:english] == '1' ? ' checked="checked"' : '' %>/> Also show keys that have no English language wiki page but a page in some other language.
-</form>
-<p></p>
-
-<table id="grid-keys">
-</table>
-
+<div class="pre">
+    <h1><%= @title %></h1>
+    <p>This table shows keys that appear more than 10&thinsp;000 times in the OSM
+    database but have no wiki page describing them.  If you know anything about one
+    of these keys, please create the wiki page by clicking on the link in the
+    leftmost column and describe the key. Sometimes it might make sense to create a
+    redirect to a different wiki page instead. To do this put just one line with
+    <tt style="background-color: #f0f0f0; padding: 0 2px;">#REDIRECT [[<i>page name</i>]]</tt>
+    in the wiki page.</p>
+</div>
+<div class="box resize">
+    <div class="boxpre">
+        <form method="" type="GET" style="margin-bottom: 10px;">
+            <input type="checkbox" name="english" id="english"<%= params[:english] == '1' ? ' checked="checked"' : '' %>/> Also show keys that have no English language wiki page but a page in some other language.
+        </form>
+    </div>
+    <table id="grid-keys">
+    </table>
+</div>
 <% javascript do
     JQuery.ready do
         JS.raw(<<"JAVASCRIPT")
+            resize_wrapper(); 
             create_flexigrid_for.reports.frequently_used_keys_without_wiki_page(#{ params[:english] == '1' ? '1' : '0' });
             jQuery('#english').bind('click', function() {
                 jQuery('#grid-keys').flexOptions({
diff --git a/web/views/reports/index.erb b/web/views/reports/index.erb
index 94928a8..f632270 100644
--- a/web/views/reports/index.erb
+++ b/web/views/reports/index.erb
@@ -1,17 +1,24 @@
-<h1><%= t.taginfo.reports %></h1>
-
-<%= t.pages.reports.index.intro %>
-
-<table class="list">
-    <tr><th class="tc" colspan="<%= Source.visible.size %>"/><%= t.pages.reports.index.data_sources %></th><th class="tl">Report</th></tr>
-<% Report.each_with_index do |report, n| c = (n%2!=0) ? ' even' : '' %>
-    <tr>
-<% Source.visible.each do |source| %>
-        <td class="tc<%= c %>" width="45"><%= source.link_img if report.uses_source? source.id %></td>
-<% end %>
-        <td class="tl<%= c %>"><a href="<%= report.url %>"><%= t.reports[report.name].name %></a></td>
-    </tr>
-<% end %>
-</table>
-
-
+<div class="pre">
+    <h1 class="section"><%= t.taginfo.reports %></h1>
+    <%= t.pages.reports.index.intro %>
+</div>
+<div class="box resize">
+    <h2>List of all reports</h2>
+    <table class="list">
+        <tr><th class="tc" colspan="<%= Source.visible.size %>"/><%= t.pages.reports.index.data_sources %></th><th class="tl">Report</th></tr>
+    <% Report.each_with_index do |report, n| c = (n%2!=0) ? ' even' : '' %>
+        <tr>
+    <% Source.visible.each do |source| %>
+            <td class="tc<%= c %>" width="45"><%= source.link_img if report.uses_source? source.id %></td>
+    <% end %>
+            <td class="tl<%= c %>"><a href="<%= report.url %>"><%= t.reports[report.name].name %></a></td>
+        </tr>
+    <% end %>
+    </table>
+</div>
+<% javascript do
+    JQuery.ready do
+        JS.raw(%Q{ resize_wrapper(); })
+    end
+end
+%>
diff --git a/web/views/reports/josm_styles.erb b/web/views/reports/josm_styles.erb
index 55a0f75..e1c4a93 100644
--- a/web/views/reports/josm_styles.erb
+++ b/web/views/reports/josm_styles.erb
@@ -1,18 +1,20 @@
-<h1><%= t.reports.josm_styles.name %></h1>
-
-Select style:
-<select>
-<% ['standard'].each do |style| %>
-    <option id="<%= style %>" name="<%= style %>"><%= style %></option>
-<% end %>
-</select>
-
-<table id="grid-rules">
-</table>
-
+<div class="pre">
+    <h1><%= t.reports.josm_styles.name %></h1>
+<!--
+    Select style:
+    <select>
+    <% ['standard'].each do |style| %>
+        <option id="<%= style %>" name="<%= style %>"><%= style %></option>
+    <% end %>
+    </select>-->
+</div>
+<div class="box resize">
+    <table id="grid-rules">
+    </table>
+</div>
 <% javascript do
     JQuery.ready do
-        JS.raw(%Q{ create_flexigrid_for.reports.josm_styles('standard'); })
+        JS.raw(%Q{ resize_wrapper(); create_flexigrid_for.reports.josm_styles('standard'); })
     end
 end
 %>
diff --git a/web/views/reports/key_lengths.erb b/web/views/reports/key_lengths.erb
index 9931a82..2b937c8 100644
--- a/web/views/reports/key_lengths.erb
+++ b/web/views/reports/key_lengths.erb
@@ -1,7 +1,7 @@
-<h1><%= @title %></h1>
-
-<p>Tag keys can be between 0 and 255 (Unicode) characters long. Very short or very long keys are often, but not always, errors.</p>
-
+<div class="pre">
+    <h1><%= @title %></h1>
+    <p>Tag keys can be between 0 and 255 (Unicode) characters long. Very short or very long keys are often, but not always, errors.</p>
+</div>
 <%
     hist = Array.new
     @db.execute('SELECT length(key) AS length, count(*) AS count FROM db.keys GROUP BY length(key) ORDER BY length(key)') do |row|
@@ -9,7 +9,6 @@
     end
     hist = hist.map{ |item| item.nil? ? 0 : item }
 %>
-
 <div id="tabs">
     <ul>
         <li><a href="#keys">Keys</a></li>
@@ -26,12 +25,12 @@
         <div id="canvas"></div>
     </div>
 </div>
-
 <script type="text/javascript">
 
 jQuery(function() {
     var tabs = jQuery('#tabs').tabs({
         show: function(event, ui) { 
+            resize_wrapper();
             window.location.hash = ui.tab.hash;
             create_flexigrid_for.reports.key_lengths[ui.tab.hash.substring(1)]();
         }
diff --git a/web/views/reports/language_comparison_table_for_keys_in_the_wiki.erb b/web/views/reports/language_comparison_table_for_keys_in_the_wiki.erb
index 4a231a7..e6655d1 100644
--- a/web/views/reports/language_comparison_table_for_keys_in_the_wiki.erb
+++ b/web/views/reports/language_comparison_table_for_keys_in_the_wiki.erb
@@ -9,29 +9,29 @@
     end
     @languages_lookup = @languages.map{ |lang| "'#{lang}': #{lang_lookup[lang]}" }.join(', ')
 %>
-<h1><%= t.reports.language_comparison_table_for_keys_in_the_wiki.name %></h1>
-
-<%= t.reports.language_comparison_table_for_keys_in_the_wiki.intro %>
-
-<table id="grid-keys">
-</table>
-
-<p></p>
-
-<table>
-    
-    <tr><td><img src="/img/sources/wiki/wiki-t.png" alt="[t]"/></td><td><%= t.reports.language_comparison_table_for_keys_in_the_wiki.icons.template %></td></tr>
-    <tr><td><img src="/img/sources/wiki/wiki-e.png" alt="[e]"/></td><td><%= t.reports.language_comparison_table_for_keys_in_the_wiki.icons.error    %></td></tr>
-    <tr><td><img src="/img/sources/wiki/wiki-p.png" alt="[p]"/></td><td><%= t.reports.language_comparison_table_for_keys_in_the_wiki.icons.page     %></td></tr>
-    <tr><td><img src="/img/sources/wiki/wiki-r.png" alt="[r]"/></td><td><%= t.reports.language_comparison_table_for_keys_in_the_wiki.icons.redirect %></td></tr>
-</table>
-
+<div class="pre">
+    <h1><%= t.reports.language_comparison_table_for_keys_in_the_wiki.name %></h1>
+    <%= t.reports.language_comparison_table_for_keys_in_the_wiki.intro %>
+</div>
+<div class="box resize">
+    <table id="grid-keys">
+    </table>
+    <table class="boxpre">
+        <tr><td><img src="/img/sources/wiki/wiki-t.png" alt="[t]"/></td><td><%= t.reports.language_comparison_table_for_keys_in_the_wiki.icons.template %></td></tr>
+        <tr><td><img src="/img/sources/wiki/wiki-e.png" alt="[e]"/></td><td><%= t.reports.language_comparison_table_for_keys_in_the_wiki.icons.error    %></td></tr>
+        <tr><td><img src="/img/sources/wiki/wiki-p.png" alt="[p]"/></td><td><%= t.reports.language_comparison_table_for_keys_in_the_wiki.icons.page     %></td></tr>
+        <tr><td><img src="/img/sources/wiki/wiki-r.png" alt="[r]"/></td><td><%= t.reports.language_comparison_table_for_keys_in_the_wiki.icons.redirect %></td></tr>
+    </table>
+</div>
 <script type="text/javascript">
     jQuery(document).ready(function() {
+        resize_wrapper();
         var lang_to_idx = {
             <%= @languages_lookup %>
         };
-        jQuery('#grid-keys').flexigrid({
+        var rp = calculate_flexigrid_rp(jQuery('div.box')) - 1;
+        current_grid = 'grid-keys';
+        grids[current_grid] = jQuery('#grid-keys').flexigrid({
             url: '/api/2/wiki/keys',
             method: 'GET',
             dataType: 'json',
@@ -49,10 +49,12 @@
             showToggleBtn: false,
             showTableToggleBtn: false,
             usepager: true,
-            useRp: true,
-            rpOptions: [10,15,20,25,50,100],
-            rp: 15,
-            height: 400,
+            useRp: false,
+            rp: rp,
+            height: 'auto',
+            onSuccess: function(grid) {
+                grid.fixHeight();
+            },
             preProcess: function(data) {
                 return {
                     total: data.total,
diff --git a/web/views/reports/languages.erb b/web/views/reports/languages.erb
index 9cf7047..baae73b 100644
--- a/web/views/reports/languages.erb
+++ b/web/views/reports/languages.erb
@@ -1,10 +1,11 @@
-<h1><%= t.reports.languages.name %></h1>
-
-<%= t.reports.languages.intro %>
-
-<table id="grid-langs">
-</table>
-
+<div class="pre">
+    <h1><%= t.reports.languages.name %></h1>
+    <%= t.reports.languages.intro %>
+</div>
+<div class="box">
+    <table id="grid-langs">
+    </table>
+</div>
 <% javascript do
     JQuery.ready do
         JS.raw(%Q{ create_flexigrid_for.reports.languages(); })
diff --git a/web/views/reports/wiki_pages_about_non_existing_keys.erb b/web/views/reports/wiki_pages_about_non_existing_keys.erb
index f030386..3ca8264 100644
--- a/web/views/reports/wiki_pages_about_non_existing_keys.erb
+++ b/web/views/reports/wiki_pages_about_non_existing_keys.erb
@@ -1,13 +1,14 @@
-<h1><%= t.reports.wiki_pages_about_non_existing_keys.name %></h1>
-
-<%= t.reports.wiki_pages_about_non_existing_keys.intro %>
-
-<table id="grid-keys">
-</table>
-
+<div class="pre">
+    <h1><%= t.reports.wiki_pages_about_non_existing_keys.name %></h1>
+    <%= t.reports.wiki_pages_about_non_existing_keys.intro %>
+</div>
+<div class="box resize">
+    <table id="grid-keys">
+    </table>
+</div>
 <% javascript do
     JQuery.ready do
-        JS.raw(%Q{ create_flexigrid_for.reports.wiki_pages_about_non_existing_keys(); })
+        JS.raw(%Q{ resize_wrapper(); create_flexigrid_for.reports.wiki_pages_about_non_existing_keys(); })
     end
 end
 %>
diff --git a/web/views/search.erb b/web/views/search.erb
index 4226d74..a6c9eb2 100644
--- a/web/views/search.erb
+++ b/web/views/search.erb
@@ -1,7 +1,7 @@
-<h1><%= @title %></h1>
-
-<p><b><%= t.pages.search.results.you_were_searching_for %>:</b> <%= escape_html(@query) %></p>
-
+<div class="pre">
+    <h1 class="section"><%= @title %></h1>
+    <p><b><%= t.pages.search.results.you_were_searching_for %>:</b> <%= escape_html(@query) %></p>
+</div>
 <div id="tabs">
     <ul>
         <li><a href="#keys"><%= t.osm.keys %></a></li>
@@ -18,12 +18,12 @@
         </table>
     </div>
 </div>
-
 <% javascript do
     JQuery.ready do
         JS.raw(%Q{
             var tabs = jQuery('#tabs').tabs({
                 show: function(event, ui) { 
+                    resize_wrapper();
                     window.location.hash = ui.tab.hash;
                     create_flexigrid_for.search[ui.tab.hash.substring(1)](#{ @query.to_json });
                 }
diff --git a/web/views/search_tags.erb b/web/views/search_tags.erb
index 2548199..bd8e911 100644
--- a/web/views/search_tags.erb
+++ b/web/views/search_tags.erb
@@ -1,7 +1,7 @@
-<h1><%= @title %></h1>
-
-<p><b><%= t.pages.search.results.you_were_searching_for %>:</b> <%= escape_html(@query) %></p>
-
+<div class="pre">
+    <h1 class="section"><%= @title %></h1>
+    <p><b><%= t.pages.search.results.you_were_searching_for %>:</b> <%= escape_html(@query) %></p>
+</div>
 <div id="tabs">
     <ul>
         <li><a href="#tags"><%= t.osm.tags %></a></li>
@@ -12,12 +12,12 @@
         </table>
     </div>
 </div>
-
 <% javascript do
     JQuery.ready do
         JS.raw(%Q{
             var tabs = jQuery('#tabs').tabs({
                 show: function(event, ui) { 
+                    resize_wrapper();
                     window.location.hash = ui.tab.hash;
                     create_flexigrid_for.search[ui.tab.hash.substring(1)](#{ @query.to_json });
                 }
diff --git a/web/views/sources.erb b/web/views/sources.erb
new file mode 100644
index 0000000..5e35000
--- /dev/null
+++ b/web/views/sources.erb
@@ -0,0 +1,26 @@
+<div class="pre">
+    <h1 class="section"><%= t.taginfo.sources %></h1>
+    <%= t.pages.sources.index.intro %>
+</div>
+<div class="box resize">
+    <table class="list">
+        <tr>
+            <th class="tl"><%= t.taginfo.source %></th><th><%= t.pages.sources.index.data_until %>*</th><th><%= t.pages.sources.index.last_update_run %></th>
+        </tr>
+    <% Source.visible.each_with_index do |source, n| c = (n%2!=0) ? ' even' : '' %>
+        <tr>
+            <td class="<%= c %>"><%= source.name %>
+            <td class="tc<%= c %>"><%= source.data_until %> UTC</td>
+            <td class="tc<%= c %>"><%= source.update_start + ' ' + t.pages.sources.index.to + ' ' + source.update_end %> UTC</td>
+        </tr>
+    <% end %>
+    </table>
+
+    <p style="font-size: 80%">* <%= t.pages.sources.index.data_until_explanation %></p>
+</div>
+<% javascript do
+    JQuery.ready do
+        JS.raw(%Q{ resize_wrapper(); })
+    end
+end
+%>
diff --git a/web/views/sources/index.erb b/web/views/sources/index.erb
deleted file mode 100644
index 2aef3e7..0000000
--- a/web/views/sources/index.erb
+++ /dev/null
@@ -1,20 +0,0 @@
-<h1><%= t.taginfo.sources %></h1>
-
-<%= t.pages.sources.index.intro %>
-
-<table class="list">
-    <tr>
-        <th class="tl"><%= t.taginfo.source %></th><th><%= t.pages.sources.index.data_until %>*</th><th><%= t.pages.sources.index.last_update_run %></th>
-    </tr>
-<% Source.visible.each_with_index do |source, n| c = (n%2!=0) ? ' even' : '' %>
-    <tr>
-        <td class="<%= c %>"><%= source.name %>
-        <td class="tc<%= c %>"><%= source.data_until %></td>
-        <td class="tc<%= c %>"><%= source.update_start + ' ' + t.pages.sources.index.to + ' ' + source.update_end %></td>
-    </tr>
-<% end %>
-</table>
-
-<p style="font-size: 80%">* <%= t.pages.sources.index.data_until_explanation %></p>
-
-<%= t.pages.sources.index.info %>
diff --git a/web/views/sources/merkaartor/index.erb b/web/views/sources/merkaartor/index.erb
deleted file mode 100644
index a1486c7..0000000
--- a/web/views/sources/merkaartor/index.erb
+++ /dev/null
@@ -1,4 +0,0 @@
-<h1><img src="/img/sources/merkaartor.32.png" alt="" title="Merkaartor"/> Merkaartor</h1>
-
-<p><img src="/img/link-extern.gif" alt=""/><a class="extlink" href="http://merkaartor.be/">Merkaartor</a> is an OSM editor.</p>
-
diff --git a/web/views/tag.erb b/web/views/tag.erb
index e5807d5..5c750c4 100644
--- a/web/views/tag.erb
+++ b/web/views/tag.erb
@@ -1,28 +1,24 @@
-<div id="tools">
-    <% if @count_all < 1000 %>
-        <%= xapi_link('*', @key, @value) %> <%= josm_link('*', @key, @value) %>
-    <% else %>
-        <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" alt=""/>XAPI</span>
-        <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" alt=""/>JOSM</span>
-    <% end %>
-</div>
-
-<form id="filter-form">
-    <label for="filter"><%= t.pages.key.filter.label %></label>
-    <select id="filter" name="filter">
-        <option value="all"<%=       @sel['all']       %>><%= t.pages.key.filter.none %></option>
-        <option value="nodes"<%=     @sel['nodes']     %>><%= t.pages.key.filter.nodes %></option>
-        <option value="ways"<%=      @sel['ways']      %>><%= t.pages.key.filter.ways %></option>
-        <option value="relations"<%= @sel['relations'] %>><%= t.pages.key.filter.relations %></option>
-    </select>
-</form>
-
-<h1><%= link_to_key(@key) %>=<%= @value_pp %></h1>
-
-<div class="tag-description" title="Description from the wiki">
-    <%= @desc %>
+<div class="pre">
+    <div id="tools">
+        <% if @count_all < 1000 %>
+            <%= xapi_link('*', @key, @value) %> <%= josm_link('*', @key, @value) %>
+        <% else %>
+            <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" alt=""/>XAPI</span>
+            <span class="button disabled" title="Button disabled, because there are too many objects with this key"><img src="/img/link-extern-disabled.gif" alt=""/>JOSM</span>
+        <% end %>
+    </div>
+    <form id="filter-form">
+        <label for="filter"><%= t.pages.key.filter.label %></label>
+        <select id="filter" name="filter">
+            <option value="all"<%=       @sel['all']       %>><%= t.pages.key.filter.none %></option>
+            <option value="nodes"<%=     @sel['nodes']     %>><%= t.pages.key.filter.nodes %></option>
+            <option value="ways"<%=      @sel['ways']      %>><%= t.pages.key.filter.ways %></option>
+            <option value="relations"<%= @sel['relations'] %>><%= t.pages.key.filter.relations %></option>
+        </select>
+    </form>
+    <h1><%= link_to_key(@key) %>=<%= @value_pp %></h1>
+    <p><%= @desc %></p>
 </div>
-
 <div id="tabs">
     <ul>
         <li><a href="#overview"><%= t.taginfo.overview %></a></li>
@@ -43,24 +39,27 @@
     </div>
     <div id="wiki">
         <h2><%= t.pages.tag.wiki_pages.title %></h2>
-        <table id="grid-wiki">
-        </table>
+        <% if @wiki_count > 0 %>
+            <table id="grid-wiki">
+            </table>
+        <% else %>
+            <p><i><%= t.pages.tag.wiki_pages.none_found %>.</i></p>
+            <p>[<a href="http://wiki.openstreetmap.org/w/index.php?action=edit&title=Tag:<%= escape(@tag) %>">Create wiki page</a>]</p>
+        <% end %>
     </div>
     <div id="josm">
         <h2><%= t.pages.key.josm_rules.title %></h2>
-        <form>
+<!--        <form>
             <label for="josm-style"><%= t.pages.tag.josm_rules.choice %></label>
             <select id="josm-style" name="josm-style">
                 <option>Standard</option>
             </select>
-        </form>
+        </form>-->
        <table id="grid-josm">
        </table>
     </div>
 </div>
-
 <iframe id="josmiframe" name="josmiframe"></iframe>
-
 <% javascript do
     JQuery.ready do
         JS.raw(<<"JAVASCRIPT")
@@ -76,6 +75,7 @@ jQuery('#filter').bind('change', function() {
 
 var tabs = jQuery('#tabs').tabs({
     show: function(event, ui) { 
+        resize_wrapper();
         window.location.hash = ui.tab.hash;
         create_flexigrid_for.tag[ui.tab.hash.substring(1)](#{ @key.to_json }, #{ @value.to_json }, #{ @filter_type.to_json });
     }
diff --git a/web/views/tags.erb b/web/views/tags.erb
index 17d0a93..37c84e7 100644
--- a/web/views/tags.erb
+++ b/web/views/tags.erb
@@ -1,11 +1,14 @@
-<h1 style="text-transform: uppercase;"><%= t.osm.tags %></h1>
-
-<table id="grid-tags">
-</table>
-
+<div class="pre">
+    <h1 class="section"><%= t.osm.tags %></h1>
+    <%= t.pages.tags.intro %>
+</div>
+<div class="box resize">
+    <table id="grid-tags">
+    </table>
+</div>
 <% javascript do
     JQuery.ready do
-        JS.raw(%Q{ create_flexigrid_for.tags.tags(); })
+        JS.raw(%Q{ resize_wrapper(); create_flexigrid_for.tags.tags(); })
     end
 end
 %>
diff --git a/web/views/test/index.erb b/web/views/test/index.erb
index 7fb38d8..6dd7804 100644
--- a/web/views/test/index.erb
+++ b/web/views/test/index.erb
@@ -1,8 +1,17 @@
-<h1>Test</h1>
-
-<p>The test pages are for Taginfo development only.</p>
-
-<ul>
-    <li><a href="/test/tags">Tags</a></li>
-    <li><a href="/test/wiki_import">Wiki import</a></li>
-</ul>
+<div class="pre">
+    <h1 class="section">Test</h1>
+    <p>The test pages are for taginfo development only.</p>
+</div>
+<div class="box resize">
+    <h2>Test pages</h2>
+    <ul>
+        <li><a href="/test/tags">Tags</a></li>
+        <li><a href="/test/wiki_import">Wiki import</a></li>
+    </ul>
+</div>
+<% javascript do
+    JQuery.ready do
+        JS.raw(%Q{ resize_wrapper(); })
+    end
+end
+%>
diff --git a/web/views/test/key.erb b/web/views/test/key.erb
deleted file mode 100644
index 9a819ce..0000000
--- a/web/views/test/key.erb
+++ /dev/null
@@ -1,340 +0,0 @@
-<table id="overview">
-</table>
-
-<h1><%= @key_pp %></h1>
-
-<div class="source-wiki" title="Description from the wiki">
-    <%= @desc %>
-</div>
-
-<div id="tools">
-    <% if @count_all_values < 1000 %>
-        [<%= xapi_link('*', @key) %>] [<%= josm_link('*', @key) %>]
-    <% else %>
-        <span title="Links disabled, because there are too many objects with this key">[XAPI] [JOSM]</span>
-    <% end %>
-</div>
-
-<form id="filter-form">
-    <label for="filter">Filter:</label>
-    <select id="filter" name="filter">
-        <option value="all"<%=       @sel['all']       %>>No filter</option>
-        <option value="nodes"<%=     @sel['nodes']     %>>Nodes only</option>
-        <option value="ways"<%=      @sel['ways']      %>>Ways only</option>
-        <option value="relations"<%= @sel['relations'] %>>Relations only</option>
-    </select>
-</form>
-
-<div id="tabs">
-    <ul>
-        <li><a href="#tabs-values">Values</a></li>
-        <li><a href="#tabs-keys">Other Keys</a></li>
-        <li><a href="#tabs-map">Map</a></li>
-        <li><a href="#tabs-wiki">Wiki</a></li>
-        <li><a href="#tabs-josm">JOSM</a></li>
-    </ul>
-    <div id="tabs-values">
-        <h2>Values used with this key</h2>
-        <div class="canvas" id="canvas-values"></div>
-        <div style="margin-left: 180px;">
-            <table id="grid-values">
-            </table>
-        </div>
-    </div>
-    <div id="tabs-keys">
-        <h2>Other keys used together with this key</h2>
-       <table id="grid-keys">
-       </table>
-        <div class="canvas" id="canvas-keypairs"></div>
-    </div>
-    <div id="tabs-map">
-        <h2>Geographical distribution of this key</h2>
-        <p><i>Currently only tags on nodes are shown.</i></p>
-        <div style="background-image: url(/img/worldp.png); background-repeat: no-repeat;"/><img src="/api/2/db/keys/distribution?key=<%= @key_uri %>" alt=""/></div>
-    </div>
-    <div id="tabs-wiki">
-        <h2>Wiki pages about this key</h2>
-        <table id="wiki-langs">
-        </table>
-    </div>
-    <div id="tabs-josm">
-        <h2>JOSM style rules with this key</h2>
-        <form>
-            <label for="josm-style">Choose style:</label>
-            <select id="josm-style" name="josm-style">
-                <option>Standard</option>
-            </select>
-        </form>
-       <table id="grid-josm">
-       </table>
-    </div>
-</div>
-
-<iframe id="josmiframe" name="josmiframe"></iframe>
-
-<script type="text/javascript">
-    jQuery(function() {
-        jQuery('#josm').bind('click', function() {
-            jQuery('#josmiframe')[0].src = jQuery('#josm')[0].href;
-            return false;
-        });
-
-        jQuery('#filter').bind('change', function() {
-            var value = this.value;
-            window.location.search = 'filter=' + value;
-        });
-
-        var tabs = jQuery('#tabs').tabs();
-
-        jQuery.getJSON('/api/2/db/keys/overview?key=<%= @key_uri %>', function(data, textStatus) {
-            var table_content = '<tr><th></th><th title="Number of objects with this key">Number of objects</th><th class="values" title="Number of different values">Values</th></tr>';
-            table_content += jQuery.map(['all', 'nodes', 'ways', 'relations'], function(obj, i) {
-                var d = data[obj];
-                return '<tr><td>' + print_image(obj) + '</td><td class="count">' + print_value_with_percent(d.count, d.count_fraction) + '</td><td class="values">' + print_with_ts(d.values) + '</td></tr>';
-            }).join('');
-            jQuery('#overview').append(table_content);
-        });
-
-        jQuery('#grid-values').flexigrid({
-            url: '/api/2/db/keys/values?key=<%= @key_uri %>&filter=<%= @filter_type %>',
-            method: 'GET',
-            dataType: 'json',
-            colModel: [
-                { display: 'Count', name: 'count', width: 300, sortable: true, align: 'center' },
-                { display: 'Value', name: 'value', width: 500, sortable: true, align: 'left' }
-            ],
-            searchitems: [
-                { display: 'Value', name: 'value' }
-            ],
-            sortname: 'count',
-            sortorder: 'desc',
-            showToggleBtn: false,
-            showTableToggleBtn: false,
-            usepager: true,
-            useRp: true,
-            rpOptions: [10,15,20,25,50,100],
-            rp: 15,
-            height: 410,
-            preProcess: function(data) {
-                data.rows = jQuery.map(data.data, function(row, i) {
-                    return { 'cell': [
-                        print_value_with_percent(row.count, row.fraction),
-                        link_to_value(<%= @key_json %>, row.value)
-                    ] };
-                });
-                delete data.data;
-                return data;
-            }
-        });
-
-        jQuery('#grid-keys').flexigrid({
-            url: '/api/2/db/keys/keys?key=<%= @key_uri %>&filter=<%= @filter_type %>',
-            method: 'GET',
-            dataType: 'json',
-            colModel: [
-                { display: '<span title="Number of objects with this key that also have the other key">Count &rarr;</span>', name: 'to_count', width: 320, sortable: true, align: 'center' },
-                { display: '<span title="Key used together with this key">Other key</span>', name: 'other_key', width: 340, sortable: true, align: 'left' },
-                { display: '<span title="Number of objects with other key that also have this key">&rarr; Count</span>', name: 'from_count', width: 320, sortable: true, align: 'center' }
-            ],
-/*            searchitems: [
-                { display: 'Other Key', name: 'other_key' }
-            ],*/
-            sortname: 'to_count',
-            sortorder: 'desc',
-            showToggleBtn: false,
-            showTableToggleBtn: false,
-            usepager: true,
-            useRp: true,
-            rpOptions: [10,15,20,25,50,100],
-            rp: 15,
-            height: 410,
-            preProcess: function(data) {
-                data.rows = jQuery.map(data.data, function(row, i) {
-                    return { 'cell': [
-                        print_value_with_percent(row.together_count, row.to_fraction),
-                        link_to_key(row.other_key),
-                        print_value_with_percent(row.together_count, row.from_fraction),
-                    ] };
-                });
-                return data;
-            }
-        });
-
-        jQuery('#grid-josm').flexigrid({
-            url: '/api/2/josm/styles/standard/keys?key=<%= @key_uri %>',
-            method: 'GET',
-            dataType: 'json',
-            colModel: [
-                { display: 'Value',     name: 'v',         width: 200, sortable: true,  align: 'left'  },
-                { display: 'Scale min', name: 'scale_min', width:  80, sortable: true,  align: 'right' },
-                { display: 'Scale max', name: 'scale_max', width:  80, sortable: true,  align: 'right' },
-                { display: 'Rule XML',  name: 'rule',      width: 100, sortable: false, align: 'left'  }
-            ],
-            searchitems: [
-                { display: 'Value', name: 'v' }
-            ],
-            sortname: 'v',
-            sortorder: 'asc',
-            showToggleBtn: false,
-            showTableToggleBtn: false,
-            usepager: true,
-            useRp: true,
-            rpOptions: [10,15,20,25,50,100],
-            rp: 15,
-            height: 410,
-            preProcess: function(data) {
-                data.rows = jQuery.map(data.data, function(row, i) {
-                    return { 'cell': [
-                        row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
-                        print_with_ts(row.scale_min),
-                        print_with_ts(row.scale_max),
-                        '<span title="' + row.rule + '">XML</span>'
-                    ] };
-                });
-                return data;
-            }
-        });
-
-        jQuery('#wiki-langs').flexigrid({
-            url: '/api/2/wiki/keys?key=<%= @key_uri %>',
-            method: 'GET',
-            dataType: 'json',
-            colModel: [
-                { display: 'Language',      name: 'lang',             width: 150, sortable: false },
-                { display: 'Wikipage',      name: 'title',            width: 160, sortable: false, align: 'right' },
-                { display: 'Description',   name: 'description',      width: 400, sortable: false },
-                { display: 'Image',         name: 'image',            width: 120, sortable: false },
-                { display: 'Objects',       name: 'objects',          width:  80, sortable: false },
-                { display: 'Implied Tags',  name: 'tags_implied',     width: 120, sortable: false },
-                { display: 'Combined Tags', name: 'tags_combination', width: 120, sortable: false },
-                { display: 'Linked Tags',   name: 'tags_linked',      width: 220, sortable: false }
-            ],
-            showToggleBtn: false,
-            showTableToggleBtn: false,
-            usepager: false,
-            useRp: false,
-            rpOptions: [10,15,20,25,50,100],
-            height: 400,
-            preProcess: function(data) {
-                return {
-                    total: data.size,
-                    page: 1,
-                    rows: jQuery.map(data, function(row, i) {
-                        return { 'cell': [
-                            print_language(row.lang, row.language),
-                            print_wiki_link(row.title),
-                            row.description,
-                            row.image == null ? '<i>no image</i>' : print_wiki_link(row.image),
-                            (row.on_node      ? '<img src="/img/types/node.16.png"     alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
-                            (row.on_way       ? '<img src="/img/types/way.16.png"      alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
-                            (row.on_area      ? '<img src="/img/types/area.16.png"     alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
-                            (row.on_relation  ? '<img src="/img/types/relation.16.png" alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>'),
-                            print_key_or_tag_list(row.tags_implies),
-                            print_key_or_tag_list(row.tags_combination),
-                            print_key_or_tag_list(row.tags_linked)
-                        ]};
-                    })
-                };
-            }
-        });
-    });
-</script>
-<script type="text/javascript+protovis">
-
-var data = <%= @prevalent_values.to_json() %>;
-
-var w=160, h=440;
-
-var vis = new pv.Panel()
-    .canvas('canvas-values')
-    .width(w)
-    .height(h + 20);
-
-var scale = pv.Scale.linear(0, <%= @count_all_values %>).range(0, h);
-
-vis.add(pv.Layout.Stack)
-    .bottom(10)
-    .layers(data)
-    .x(10)
-    .y(function(d) scale(d.count))
-  .layer.add(pv.Bar)
-    .width(20)
-  .anchor('left')
-    .add(pv.Label)
-    .left(30)
-    .text(function(d) d.value);
-
-vis.render();
-
-// =======
-
-jQuery.getJSON('/api/2/db/keys/keys?key=<%= @key_uri %>&filter=<%= @filter_type %>&page=1&rp=100&sortname=to_count&sortorder=desc', function(jsonData, textStatus) {
-
-    var data = jsonData.data;
-    jQuery.getJSON('/api/2/db/keys/keys?key=<%= @key_uri %>&filter=<%= @filter_type %>&page=1&rp=100&sortname=from_count&sortorder=desc', function(jsonData_rev, textStatus) {
-
-    data = data.concat(jsonData_rev.data);
-/*    var l = jsonData_rev.data.length;
-    for(var i=0; i<l; i++) {
-        data.push({
-           from_fraction:  jsonData_rev.data[i].to_fraction,
-           to_fraction:    jsonData_rev.data[i].from_fraction,
-           together_count: jsonData_rev.data[i].together_count,
-           other_key:      jsonData_rev.data[i].other_key
-        });
-    }*/
-
-    var w=600, h=600;
-
-    var x = pv.Scale.linear(0, 1).range(0, w),
-        y = pv.Scale.linear(0, 1).range(0, h),
-        c = pv.Scale.log(10000, 20000000).range("orange", "brown"),
-        s = pv.Scale.log(10000, 20000000).range(1, 100);
-
-    var vis_keypairs = new pv.Panel()
-        .canvas('canvas-keypairs')
-        .width(w)
-        .height(h)
-        .bottom(20)
-        .left(20)
-        .right(10)
-        .top(5);
-
-    /* Y-axis and ticks. */
-    vis_keypairs.add(pv.Rule)
-        .data(y.ticks())
-        .bottom(y)
-        .strokeStyle(function(d) d ? "#eee" : "#000")
-    .anchor("left").add(pv.Label)
-        .visible(function(d) d > 0 && d < 1)
-        .text(y.tickFormat);
-
-    /* X-axis and ticks. */
-    vis_keypairs.add(pv.Rule)
-        .data(x.ticks())
-        .left(x)
-        .strokeStyle(function(d) d ? "#eee" : "#000")
-    .anchor("bottom").add(pv.Label)
-        .visible(function(d) d > 0 && d < 1)
-        .text(x.tickFormat);
-
-    /* The dot plot! */
-    vis_keypairs.add(pv.Panel)
-        .data(data)
-    .add(pv.Dot)
-        .left(function(d) x(d.from_fraction))
-        .bottom(function(d) y(d.to_fraction))
-//        .strokeStyle(function(d) c(d.together_count))
-        .strokeStyle('brown')
-        .fillStyle(function() this.strokeStyle())
-//        .fillStyle(function() this.strokeStyle().alpha(.2))
-//        .size(function(d) s(d.together_count))
-        .size(8)
-//        .visible(function(d) d.from_fraction > 0.1 && d.to_fraction > 0.1)
-        .title(function(d) d.other_key);
-
-    vis_keypairs.render();
-    });
-});
-
-</script>
diff --git a/web/views/test/wiki_import.erb b/web/views/test/wiki_import.erb
index 33b9b1e..f061b2f 100644
--- a/web/views/test/wiki_import.erb
+++ b/web/views/test/wiki_import.erb
@@ -1,10 +1,13 @@
-<h1>Wiki Import</h1>
-
-<table>
-    <% @invalid_page_titles.each do |row| %>
-        <tr>
-            <td><%= row['reason'] %></td>
-            <td><%= row['title']  %></td>
-        </tr>
-    <% end %>
-</table>
+<div class="pre">
+    <h1 class="section">Wiki Import</h1>
+</div>
+<div class="box">
+    <table>
+        <% @invalid_page_titles.each do |row| %>
+            <tr>
+                <td><%= row['reason'] %></td>
+                <td><%= row['title']  %></td>
+            </tr>
+        <% end %>
+    </table>
+</div>