First checkin of new layout

22 files changed, 263 insertions, 173 deletions

diff --git a/taginfo-config-example.json b/taginfo-config-example.json
index efcbcab..25a8d4b 100644
--- a/taginfo-config-example.json
+++ b/taginfo-config-example.json
@@ -10,10 +10,10 @@
         // Description that appears if you click on the instance icon in the upper left.
         "description": "This is a Taginfo test instance. To change this text or the icon above change your <tt>taginfo-config.json</tt>.",
         // URL path to instance icon in the upper left.
-        "icon": "/img/instance.png"
+        "icon": "/img/logo/world.png"
     },
     "tagcloud": {
-        "number_of_tags": 200
+        "number_of_tags": 100
     },
     // For the geodistribution map. See the wiki documentation about these settings.
     "geodistribution": {
diff --git a/web/lib/ui/reports.rb b/web/lib/ui/reports.rb
index b35a19a..0a16558 100644
--- a/web/lib/ui/reports.rb
+++ b/web/lib/ui/reports.rb
@@ -3,15 +3,14 @@ class Taginfo < Sinatra::Base
 
     get! '/reports' do
         @title = t.taginfo.reports
-        @breadcrumbs << @title
         erb :'reports/index'
     end
 
     Report.each do |report|
         get report.url do
             @title = report.title
-            @breadcrumbs << [ t.taginfo.reports, '/reports' ]
-            @breadcrumbs << t.reports[report.name].name
+            @section = 'reports'
+            @section_title = 'reports'
             erb ('reports/' + report.name).to_sym
         end
     end
diff --git a/web/lib/ui/search.rb b/web/lib/ui/search.rb
index a874474..a523d68 100644
--- a/web/lib/ui/search.rb
+++ b/web/lib/ui/search.rb
@@ -4,7 +4,6 @@ class Taginfo < Sinatra::Base
     # The search results page
     get '/search' do
         @title = t.pages.search.results.title
-        @breadcrumbs << @title
 
         @query = params[:q]
         if @query =~ /(.*)=(.*)/
diff --git a/web/lib/ui/sources/db.rb b/web/lib/ui/sources/db.rb
index 572bbf2..a1b6939 100644
--- a/web/lib/ui/sources/db.rb
+++ b/web/lib/ui/sources/db.rb
@@ -3,8 +3,6 @@ class Taginfo < Sinatra::Base
 
     get! '/sources/db' do
         @title = 'Database'
-        @breadcrumbs << ['Sources', '/sources']
-        @breadcrumbs << ['Database']
         erb :'sources/db'
     end
 
diff --git a/web/lib/ui/sources/josm.rb b/web/lib/ui/sources/josm.rb
index a65a576..1583155 100644
--- a/web/lib/ui/sources/josm.rb
+++ b/web/lib/ui/sources/josm.rb
@@ -3,26 +3,17 @@ class Taginfo < Sinatra::Base
 
     get! '/sources/josm' do
         @title = 'JOSM'
-        @breadcrumbs << ['Sources', '/sources']
-        @breadcrumbs << ['JOSM']
         erb :'sources/josm/index'
     end
 
     get! '/sources/josm/styles' do
         @title = ['Styles', 'JOSM']
-        @breadcrumbs << ['Sources', '/sources']
-        @breadcrumbs << ['JOSM', '/sources/josm']
-        @breadcrumbs << ['Styles']
         erb :'sources/josm/styles'
     end
 
     get '/sources/josm/styles/:style' do
         @stylename = h(params[:style])
         @title = [@stylename, 'Styles', 'JOSM']
-        @breadcrumbs << ['Sources', '/sources']
-        @breadcrumbs << ['JOSM', '/sources/josm']
-        @breadcrumbs << ['Styles', '/sources/josm/styles']
-        @breadcrumbs << @stylename
         erb :'sources/josm/style'
     end
 
diff --git a/web/lib/ui/sources/merkaartor.rb b/web/lib/ui/sources/merkaartor.rb
index 0f04828..96b3d19 100644
--- a/web/lib/ui/sources/merkaartor.rb
+++ b/web/lib/ui/sources/merkaartor.rb
@@ -3,8 +3,6 @@ class Taginfo < Sinatra::Base
 
     get! '/sources/merkaartor' do
         @title = 'Merkaartor'
-        @breadcrumbs << ['Sources', '/sources']
-        @breadcrumbs << ['Merkaartor']
         erb :'sources/merkaartor/index'
     end
 
diff --git a/web/lib/ui/sources/potlatch.rb b/web/lib/ui/sources/potlatch.rb
index a581c16..3db69e5 100644
--- a/web/lib/ui/sources/potlatch.rb
+++ b/web/lib/ui/sources/potlatch.rb
@@ -3,17 +3,12 @@ class Taginfo < Sinatra::Base
 
     get! '/sources/potlatch' do
         @title = 'Potlatch'
-        @breadcrumbs << ['Sources', '/sources']
-        @breadcrumbs << ['Potlatch']
 
         erb :'sources/potlatch/index'
     end
 
     get '/sources/potlatch/categories' do
         @title = 'Potlatch Features'
-        @breadcrumbs << ['Sources', '/sources']
-        @breadcrumbs << ['Potlatch', '/sources/potlatch']
-        @breadcrumbs << ['Features']
 
         @categories = @db.execute('SELECT * FROM potlatch.categories ORDER BY name')
 
diff --git a/web/lib/ui/sources/wiki.rb b/web/lib/ui/sources/wiki.rb
index 7a8c244..5260a36 100644
--- a/web/lib/ui/sources/wiki.rb
+++ b/web/lib/ui/sources/wiki.rb
@@ -3,8 +3,6 @@ class Taginfo < Sinatra::Base
 
     get! '/sources/wiki' do
         @title = 'Wiki'
-        @breadcrumbs << ['Sources', '/sources']
-        @breadcrumbs << ['Wiki']
         erb :'sources/wiki/index'
     end
 
diff --git a/web/lib/ui/test.rb b/web/lib/ui/test.rb
index eee4c6e..9117da1 100644
--- a/web/lib/ui/test.rb
+++ b/web/lib/ui/test.rb
@@ -3,14 +3,11 @@ class Taginfo < Sinatra::Base
 
     get! '/test' do
         @title = 'Test'
-        @breadcrumbs << 'Test'
         erb :'test/index'
     end
 
     get! '/test/tags' do
         @title = ['Tags', 'Test']
-        @breadcrumbs << [ 'Test', '/test' ]
-        @breadcrumbs << 'Tags'
         limit = 300;
         (@min, @max) = @db.select('SELECT min(count) AS min, max(count) AS max FROM popular_keys').get_columns(:min, :max)
         @tags = @db.select("SELECT key, count, (count - ?) / (? - ?) AS scale, in_wiki, in_josm FROM popular_keys ORDER BY count DESC LIMIT #{limit}", @min.to_f, @max, @min).
@@ -22,8 +19,6 @@ class Taginfo < Sinatra::Base
 
     get '/test/wiki_import' do
         @title = ['Wiki Import', 'Test']
-        @breadcrumbs << [ 'Test', '/test' ]
-        @breadcrumbs << 'Wiki Import'
         @invalid_page_titles = @db.select('SELECT * FROM invalid_page_titles').execute()
         erb :'test/wiki_import'
     end
@@ -41,8 +36,6 @@ class Taginfo < Sinatra::Base
         @key_pp   = pp_key(@key)
 
         @title = [@key_html, 'Keys']
-        @breadcrumbs << ['Keys', '/keys']
-        @breadcrumbs << @key_html
 
         @filter_type = get_filter()
         @sel = Hash.new('')
diff --git a/web/lib/utils.rb b/web/lib/utils.rb
index b72cdef..a4cd31c 100644
--- a/web/lib/utils.rb
+++ b/web/lib/utils.rb
@@ -28,16 +28,6 @@ class Numeric
 
 end
 
-def breadcrumbs
-    return @breadcrumbs.map{ |name, link|
-        if link
-            "<a href='#{link}'>#{name}</a>"
-        else
-            name
-        end    
-    }.join(' &raquo; ')
-end
-
 def title
     @title = [] if @title.nil?
     @title = [@title] unless @title.is_a?(Array)
@@ -76,7 +66,7 @@ end
 def tagcloud_size(tag)
     #(Math.log(0.000001 + tag['scale'].to_f * Math::E) * 36 + 12).to_i
     x = tag['scale1'].to_f / 17 / 2 + tag['pos'] / 2
-    (x * 24 + 12).to_i
+    (x * 32 + 10).to_i
 end
 
 def tagcloud_color(tag)
diff --git a/web/public/css/flexigrid/flexigrid.css b/web/public/css/flexigrid/flexigrid.css
index 3f754c8..4b41e6d 100644
--- a/web/public/css/flexigrid/flexigrid.css
+++ b/web/public/css/flexigrid/flexigrid.css
@@ -3,7 +3,6 @@
 

 .flexigrid

 	{

-//	font-family: Arial, Helvetica, sans-serif;

 	font-size: 80%;

 	position: relative;

 	border: 0px solid #eee;

@@ -66,7 +65,7 @@
 

 .flexigrid div.nDiv tr:hover td, .flexigrid div.nDiv tr.ndcolover td

 	{

-	background: #d5effc url(images/hl.png) repeat-x top;

+/*	background: #d5effc url(images/hl.png) repeat-x top;*/

 	border: 1px solid #a8d8eb;

 	}

 	

@@ -97,7 +96,7 @@
 		height: 24px;

 		width: 14px;

 		z-index: 900;

-		background: #fafafa url(images/fhbg.gif) repeat-x bottom;

+		/*background: #fafafa url(images/fhbg.gif) repeat-x bottom;*/

 		border: 0px solid #ccc;

 		border-left: 1px solid #ccc;

 		top: 0px;

@@ -113,18 +112,18 @@
 			width: 12px;

 			border-left: 1px solid #fff;

 			float: left;

-			background: url(images/ddn.png) no-repeat center;

+			/*background: url(images/ddn.png) no-repeat center;*/

 			}		

 		

 		.flexigrid div.nBtn.srtd

 			{

-			background: url(images/wbg.gif) repeat-x 0px -1px;

+			/*background: url(images/wbg.gif) repeat-x 0px -1px;*/

 			}

 		

 

 .flexigrid div.mDiv

 	{

-	background: url(images/wbg.gif) repeat-x top;

+	/*background: url(images/wbg.gif) repeat-x top;*/

 	border: 1px solid #ccc;

 	border-bottom: 0px;

 	border-top: 0px;

@@ -168,17 +167,17 @@
 			border-bottom: 1px solid #ddd;

 			width: 14px;

 			height: 14px;

-			background: url(images/uup.png) no-repeat center;

+			/*background: url(images/uup.png) no-repeat center;*/

 			}

 			

 			.flexigrid div.mDiv div.ptogtitle.vsble span

 			{

-			background: url(images/ddn.png) no-repeat center;			

+			/*background: url(images/ddn.png) no-repeat center;*/

 			}			

 

 .flexigrid div.tDiv /*toolbar*/

 	{

-	background: #fafafa url(images/bg.gif) repeat-x top;

+	background: #fafafa /*url(images/bg.gif) repeat-x top*/;

 	position: relative;			

 	border: 1px solid #ccc;

 	border-bottom: 0px;

@@ -194,7 +193,7 @@
 

 .flexigrid div.sDiv /*toolbar*/

 	{

-	background: #fafafa url(images/bg.gif) repeat-x top;

+	background: #fafafa /*url(images/bg.gif) repeat-x top*/;

 	position: relative;

 	border: 1px solid #ccc;

 	border-top: 0px;

@@ -266,10 +265,11 @@
 

 .flexigrid div.hDiv

 	{

-	background: #fafafa url(images/fhbg.gif) repeat-x bottom;

+	background: rgb(198,200,202);

 	position: relative;

 	border: 1px solid #ccc;

-	border-bottom: 0px;

+/*	border-bottom: 0px;*/

+    font-weight: bold;

 	overflow: hidden;

 	}	

 

@@ -312,8 +312,6 @@
 	

 	.flexigrid div.iDiv input, .flexigrid div.iDiv select, .flexigrid div.iDiv textarea

 		{

-//		font-family: Arial, Helvetica, sans-serif;

-//		font-size: 11px;

 		}

 		

 	.flexigrid div.iDiv input.tb

@@ -330,7 +328,7 @@
 	{

 	border: 1px solid #ccc;

 	border-top: 0px;

-	background: #fff;

+	background: rgb(230,231,232);

 	overflow: auto;

 	position: relative;

 	}

@@ -363,7 +361,7 @@
 		height: 5px;

 		overflow: hidden;

 		position: relative;

-		background: #fafafa url(images/wbg.gif) repeat-x 0px -1px;

+	    background: rgb(198,200,202);

 		border: 1px solid #ccc;

 		border-top: 0px;

 		text-align: center;

@@ -407,8 +405,6 @@
 	}	

 

 div.colCopy {

-//	font-family: Arial, Helvetica, sans-serif;

-//	font-size: 11px;

 	background: #fafafa url(images/fhbg.gif) repeat-x bottom;

 	border: 1px solid #ccc;

 	border-bottom: 0px;

@@ -417,7 +413,7 @@ div.colCopy {
 

 .flexigrid div.hDiv th.sorted

 	{

-	background: url(images/wbg.gif) repeat-x 0px -1px;

+    background: rgb(188,189,192);

 	border-bottom: 0px solid #ccc;

 	}

 	

@@ -509,7 +505,7 @@ div.colCopy {
 				

 		.flexigrid tr td.sorted

 				{

-				background: #f3f3f3;

+                background: rgb(220,221,222);

 				border-right: 1px solid #ddd;

 				border-bottom: 1px solid #f3f3f3;

 				}		

@@ -521,13 +517,13 @@ div.colCopy {
 

 		.flexigrid tr.erow td

 				{

-				background: #f7f7f7;

+                background: rgb(220,221,222);

 				border-bottom: 1px solid #f7f7f7;

 				}

 				

 		.flexigrid tr.erow td.sorted

 				{

-				background: #e3e3e3;

+                background: rgb(209,211,212);

 				border-bottom: 1px solid #e3e3e3;

 				}						

 

diff --git a/web/public/css/smoothness/jquery-ui-1.8.10.custom.css b/web/public/css/smoothness/jquery-ui-1.8.10.custom.css
index 9548599..f48e0b8 100644
--- a/web/public/css/smoothness/jquery-ui-1.8.10.custom.css
+++ b/web/public/css/smoothness/jquery-ui-1.8.10.custom.css
@@ -12,7 +12,7 @@
 ----------------------------------*/
 .ui-helper-hidden { display: none; }
 .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
-.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 90%; list-style: none; }
 .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
 .ui-helper-clearfix { display: inline-block; }
 /* required comment for clearfix to work in Opera \*/
@@ -56,22 +56,26 @@
 
 /* Component containers
 ----------------------------------*/
-.ui-widget { font-family: Verdana,Arial,sans-serif; /*font-size: 1.1em;*/ }
+.ui-widget { /* font-family: Verdana,Arial,sans-serif; font-size: 1.1em;*/ }
 .ui-widget .ui-widget { font-size: 1em; }
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
-//.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { /* font-family: Verdana,Arial,sans-serif; */ font-size: 1em; }
+/*.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
 .ui-widget-content a { color: #222222; }
-//.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
-.ui-widget-header a { color: #222222; }
+.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
+.ui-widget-header a { color: #222222; }*/
 
 /* Interaction states
 ----------------------------------*/
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
-.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
-.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
-.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #f0f0f0 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
-.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
+/* .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }*/
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #ffffff; background: #ffffff; font-weight: normal; color: #505050; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #505050; text-decoration: none; }
+/*.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }*/
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #ffffff; background: #ffffff; font-weight: normal; color: #000000; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #000000; text-decoration: none; }
+/*.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #f0f0f0 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }*/
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: rgb(220, 221, 222); font-weight: normal; color: #000000; }
+/*.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }*/
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #000000; text-decoration: none; }
 .ui-widget :active { outline: none; }
 
 /* Interaction Cues
@@ -416,11 +420,12 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
  * http://docs.jquery.com/UI/Tabs#theming
  */
 .ui-tabs { position: relative; padding: 0; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
-.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
+.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em 1em 0; }
 .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
 .ui-tabs .ui-tabs-nav li a { float: left; padding: .2em 1em; text-decoration: none; }
 .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
 .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
 .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
-.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background-color: #f0f0f0; border: 1px solid #a0a0a0; }
+.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background-color: rgb(220, 221, 222); border: 1px solid #a0a0a0;
+    -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
 .ui-tabs .ui-tabs-hide { display: none !important; }
diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index 2db64fc..1abac58 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -1,9 +1,10 @@
 /* taginfo.css */
 
 body {
-    font-family: Verdana,Arial,sans-serif;
+    font-family: Arial,sans-serif;
     padding: 0;
     margin: 0;
+    line-height: 130%;
 }
 
 img {
@@ -16,10 +17,12 @@ img.icon_large {
 }
 
 h1 {
-    margin-top: 0;
+    margin: 0;
+    font-size: 150%;
 }
 
 h2 {
+    font-weight: normal;
     margin-top: 20px;
     margin-bottom: 4px;
 }
@@ -40,17 +43,17 @@ iframe {
 
 a {
     text-decoration: none;
-    color: #006000;
+    color: #083e76;
 }
 
 a:hover {
     text-decoration: underline;
 }
-
+/*
 a.taglink {
-    color: #006000 !important;
+    color: #4a837c !important;
 }
-
+*/
 span.badchar {
     color: #e00000;
 }
@@ -70,6 +73,13 @@ a.wikilink {
 a.extlink {
 }
 
+a.section {
+    text-transform: uppercase;
+    font-size: 200%;
+    position: relative;
+    top: -9px;
+}
+
 /* ==========  */
 
 span.button {
@@ -91,40 +101,52 @@ span.disabled {
 /* ========== */
 
 div#top {
-    margin: 8px 20px;
-    background-image: url('/img/bg-green.png');
-    background-repeat: repeat-x;
-    background-color: #b0f0b0;
-    padding: 2px 16px 0 16px;
-    -moz-border-radius: 4px;
-    -khtml-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -chrome-border-radius: 4px;
-    -o-border-radius: 4px;
+    margin: 15px 20px;
 }
 
-div#top div#left span.breadcrumbs {
-    position: relative;
-    left: 8px;
-    top: -6px;
+div#top div#top_right {
+    position: absolute;
+    right: 20px;
+    top: 30px;
 }
 
-div#top div#right {
-    float: right;
-    padding-top: 2px;
+div#top div#top_right form {
+    float: left;
+    padding-left: 6px;
 }
 
-div#top div#middle {
-    float: right;
-    padding: 2px 30px 0 0;
+div#date {
+    position: absolute;
+    top: 10px;
+    right: 21px;
+    font-size: 80%;
+    text-align: right;
+    color: #808080;
 }
 
-div#top div#middle input#search {
+div#top form#set_language {
+}
+
+select#locale {
     background-color: #ffffff;
+    height: 24px;
+    width: 100px;
+    padding: 2px;
+    border: 1px solid #808080;
+    -moz-border-radius: 4px;
+    -khtml-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -chrome-border-radius: 4px;
+    -o-border-radius: 4px;
+}
+
+input#search {
     background-image: url('/css/flexigrid/images/magnifier.png');
     background-repeat: no-repeat;
-    background-position: right 2px;
-    border: 2px solid #ffffff;
+    background-position: right 3px;
+    height: 18px;
+    padding: 2px;
+    border: 1px solid #808080;
     -moz-border-radius: 4px;
     -khtml-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -132,29 +154,40 @@ div#top div#middle input#search {
     -o-border-radius: 4px;
 }
 
-div#date {
-    position: absolute;
-    right: 20px;
-    font-size: 80%;
-    text-align: right;
-    color: #606060;
+input#search:active {
 }
 
 div#main {
-    margin: 30px 20px 0 20px;
+    margin: 20px 20px 0 20px;
 }
 
 div#footer {
+    clear: both;
+    position: relative;
+    top: 4px;
+    font-size: 90%;
+    margin-left: 20px;
+}
+
+div#footer_left {
+    position: absolute;
+}
+
+div#footer_right {
+    position: absolute;
+    right: 20px;
     text-align: right;
-    font-size: 80%;
-    margin: 4px 30px 0 0;
 }
 
 /* ========== */
 
+div#tabs {
+    margin-top: 14px;
+}
+
 div#tabs h2 {
     margin: 0 0 10px 0;
-    font-size: 110%;
+    font-size: 100%;
 }
 
 div#tabs form {
@@ -178,8 +211,9 @@ div.stats h2 {
 /* ========== */
 
 div#tools {
-    margin: 10px 0;
+    float: right;
     font-size: 80%;
+    margin-top: 2px;
 }
 
 span.lang {
@@ -211,12 +245,15 @@ span.char {
     -o-border-radius: 4px;
 }
 
-.source-wiki {
+.tag-description {
+    color: #808080;
     width: 50%;
 }
 
 form#filter-form {
-    padding-bottom: 20px;
+    margin-top: 10px;
+    clear: both;
+    float: right;
 }
 
 div.canvas {
@@ -247,7 +284,7 @@ div.bar {
     margin: 4px 0 0 6px !important;
     padding: 0 !important;
     height: 8px;
-    background-color: #60c060;
+    background-color: #c0c0c0;
 }
 
 /* ========== */
@@ -391,6 +428,44 @@ table.desc td {
 
 /* ==========  */
 
+table#index {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+table#index h2 {
+    margin: 16px 0 2px 0px;
+}
+
+table#index h2 a {
+    color: #000000;
+    text-decoration: none;
+}
+
+table#index td {
+    vertical-align: bottom;
+}
+
+table#index td.box {
+    vertical-align: top;
+    font-size: 90%;
+    background-color: rgb(90%,89%,85%);
+    padding: 6px;
+    margin-bottom: 10px;
+    -moz-border-radius: 4px;
+    -khtml-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -chrome-border-radius: 4px;
+    -o-border-radius: 4px;
+}
+
+table#index td.box p {
+    margin: 0;
+    padding: 8px;
+}
+
+/* ==========  */
+
 div#instance_description a {
     text-decoration: underline;
 }
diff --git a/web/public/img/logo/taginfo.png b/web/public/img/logo/taginfo.png
new file mode 100644
index 0000000..dd566ba
--- /dev/null
+++ b/web/public/img/logo/taginfo.png
diff --git a/web/public/img/logo/taginfo_with_bar.png b/web/public/img/logo/taginfo_with_bar.png
new file mode 100644
index 0000000..1161841
--- /dev/null
+++ b/web/public/img/logo/taginfo_with_bar.png
diff --git a/web/public/img/logo/world.png b/web/public/img/logo/world.png
new file mode 100644
index 0000000..5e619c8
--- /dev/null
+++ b/web/public/img/logo/world.png
diff --git a/web/taginfo.rb b/web/taginfo.rb
index 55336fd..bbef7a9 100755
--- a/web/taginfo.rb
+++ b/web/taginfo.rb
@@ -108,7 +108,8 @@ class Taginfo < Sinatra::Base
 
         javascript 'jquery-1.5.1.min'
         javascript 'jquery-ui-1.8.10.custom.min'
-        javascript 'flexigrid-minified'
+#        javascript 'flexigrid-minified'
+        javascript 'flexigrid'
         javascript 'protovis-r3.2'
         javascript 'lang/' + r18n.locale.code
         javascript 'taginfo'
@@ -120,8 +121,6 @@ class Taginfo < Sinatra::Base
         @db = SQL::Database.new('../../data')
 
         @data_until = DATA_UNTIL
-
-        @breadcrumbs = []
     end
 
     after do
@@ -158,14 +157,12 @@ class Taginfo < Sinatra::Base
     %w(about download keys tags).each do |page|
         get '/' + page do
             @title = t.taginfo[page]
-            @breadcrumbs << @title
             erb page.to_sym
         end
     end
 
     get! '/sources' do
         @title = t.taginfo.sources
-        @breadcrumbs << @title
         erb :'sources/index'
     end
 
@@ -184,8 +181,8 @@ class Taginfo < Sinatra::Base
         @key_pp   = pp_key(@key)
 
         @title = [@key_html, t.osm.keys]
-        @breadcrumbs << [t.osm.keys, '/keys']
-        @breadcrumbs << @key_html
+        @section = 'keys'
+        @section_title = t.taginfo[@section]
 
         @filter_type = get_filter()
         @sel = Hash.new('')
@@ -195,7 +192,7 @@ class Taginfo < Sinatra::Base
 
         @desc = h(@db.select("SELECT description FROM wiki.wikipages WHERE lang=? AND key=? AND value IS NULL", r18n.locale.code, @key).get_first_value())
         @desc = h(@db.select("SELECT description FROM wiki.wikipages WHERE lang='en' AND key=? AND value IS NULL", @key).get_first_value()) if @desc == ''
-        @desc = "<i>#{ t.pages.key.no_description_in_wiki }</i>" if @desc == ''
+        @desc = "[#{ t.pages.key.no_description_in_wiki }]" if @desc == ''
 
         @prevalent_values = @db.select("SELECT value, count_#{@filter_type} AS count FROM tags").
             condition('key=?', @key).
@@ -258,9 +255,8 @@ class Taginfo < Sinatra::Base
         @value_pp   = pp_value(@value)
 
         @title = [@key_html + '=' + @value_html, t.taginfo.tags]
-        @breadcrumbs << [t.taginfo.tags, '/tags']
-        @breadcrumbs << [@key_html, '/keys/' + @key_uri]
-        @breadcrumbs << ( @value.length > 30 ? escape_html(@value[0,20] + '...') : @value_html)
+        @section = 'tags'
+        @section_title = t.taginfo[@section]
 
         @filter_type = get_filter()
         @sel = Hash.new('')
@@ -270,7 +266,7 @@ class Taginfo < Sinatra::Base
 
         @desc = h(@db.select("SELECT description FROM wiki.wikipages WHERE lang=? AND key=? AND value=?", r18n.locale.code, @key, @value).get_first_value())
         @desc = h(@db.select("SELECT description FROM wiki.wikipages WHERE lang='en' AND key=? AND value=?", @key, @value).get_first_value()) if @desc == ''
-        @desc = "<i>#{ t.pages.tag.no_description_in_wiki }</i>" if @desc == ''
+        @desc = "[#{ t.pages.tag.no_description_in_wiki }]" if @desc == ''
 
         erb :tag
     end
@@ -334,7 +330,6 @@ class Taginfo < Sinatra::Base
 
     get '/apidoc' do
         @title = 'API Documentation'
-        @breadcrumbs << @title
         erb :apidoc
     end
 
diff --git a/web/views/index.erb b/web/views/index.erb
index f2d1511..98ec6dc 100644
--- a/web/views/index.erb
+++ b/web/views/index.erb
@@ -1,13 +1,55 @@
-<div style="text-align: center;">
-    <h1><img src="/img/taginfo.128.png" class="icon_large" alt="" width="128" height="63"/><br/>Taginfo</h1>
-    <p><%= t.pages.index.description %></p>
-
-    <p><span class="button"><a href="/keys"><%= t.pages.index.buttons.show_all_keys %></a></span>
-       <span class="button"><a href="/reports"><%= t.pages.index.buttons.reports %></a></span></p>
-
-    <div style="margin: 0 10%;">
+<table id="index">
+    <tr>
+        <td>
+            <h2><a href="/keys">KEYS</a></h2>
+        </td>
+        <td rowspan="4" width="20"></td>
+        <td width="338">
+            <h2><a href="/reports">REPORTS</a></h2>
+        </td>
+        <td rowspan="4" width="20"></td>
+        <td width="338">
+            <h2><a href="/about">ABOUT TAGINFO</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="popkey" style="font-size: <%= tagcloud_size(tag) %>px;"><%= tag['key'] %></a>
+            <a href="/keys/<%= tag['key'] %>" class="taglink" style="font-size: <%= tagcloud_size(tag) %>px;"><%= tag['key'] %></a>
 <% end %>
-    </div>
-</div>
+            </p>
+        </td>
+        <td rowspan="3" class="box">
+            <p>Reports show taginfo data from different angles.</p>
+            <p style="margin-top: 15px">
+<% Report.each do |report| %>
+                <a href="<%= report.url %>"><%= t.reports[report.name].name %></a><br/>
+<% end %>
+            </p>
+            <p style="padding-top: 20px;"><a href="/reports">See all reports...</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>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <h2><a href="/international">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>
+        </td>
+    </tr>
+</table>
diff --git a/web/views/key.erb b/web/views/key.erb
index 8f99553..429b2e3 100644
--- a/web/views/key.erb
+++ b/web/views/key.erb
@@ -1,9 +1,3 @@
-<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) %>
@@ -23,6 +17,12 @@
     </select>
 </form>
 
+<h1><%= @key_pp %></h1>
+
+<div class="tag-description" title="Description from the wiki">
+    <%= @desc %>
+</div>
+
 <div id="tabs">
     <ul>
         <li><a href="#overview"><%= t.taginfo.overview %></a></li>
diff --git a/web/views/layout.erb b/web/views/layout.erb
index 3a13075..f1b7dfe 100644
--- a/web/views/layout.erb
+++ b/web/views/layout.erb
@@ -12,7 +12,7 @@
     </head>
     <body>
         <div id="top">
-            <div id="right">
+            <div id="top_right">
                 <form id="set_language" action="/switch_locale">
                     <input type="hidden" name="url" value="<%= request.path %>"/>
                     <select id="locale" name="locale">
@@ -21,33 +21,36 @@
 <% end %>
                     </select>
                 </form>
-            </div>
-            <div id="middle">
                 <form action="/search">
-                    <input type="text" id="search" name="q" value=""/>
+                    <input type="text" id="search" name="q" value="Search taginfo..." style="color: #d0d0d0;"/>
                 </form>
             </div>
-            <div id="left">
-                <a id="instance" href="#"><img src="<%= TaginfoConfig.get('instance.icon', '/img/instance.png') %>" alt="" height="24" style="padding: 2px 6px 0 0;"/></a>
-                <div id="instance_description" style="display: none;" class="ui-widget-content ui-corner-all">
-                    <p><%= TaginfoConfig.get('instance.description') %></p>
-                    <p><%= t.taginfo.instance.other %></p>
-                </div>
-                <a href="/"><img src="/img/taginfo.48.png" alt="Taginfo" width="48" height="24" style="padding-top: 2px;"/></a>
-                <span class="breadcrumbs"><%= breadcrumbs %></span>
+            <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>
+<% if @section %>
+                <a href="/"><img 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>
+<% end %>
             </div>
-        </div>
-        <div id="date">
-            <%= t.taginfo.data_from %>: <%= @data_until %> UTC
         </div>
         <div id="main">
 <%= yield %>
         </div>
         <div id="footer">
-            <a href="/sources"><%= t.taginfo.sources %></a> &middot;
-            <a href="/download"><%= t.taginfo.download %></a> &middot;
-            <a href="/about"><%= t.taginfo.about %></a> &middot;
-            <img src="/img/link-extern.gif" alt="" width="14" height="10"/><a href="http://wiki.openstreetmap.org/wiki/Taginfo"><%= t.taginfo.wiki %></a>
+            <div id="footer_left">
+                <a href="http://www.openstreetmap.org/"><b style="font-style: smallcaps;">OpenStreetMap</b></a>
+            </div>
+            <div id="footer_right">
+                <a href="/sources"><%= t.taginfo.sources %></a> &middot;
+                <a href="/download"><%= t.taginfo.download %></a> &middot;
+                <a href="/about"><%= t.taginfo.about %></a> &middot;
+                <img src="/img/link-extern.gif" alt="" width="14" height="10"/><a href="http://wiki.openstreetmap.org/wiki/Taginfo"><%= t.taginfo.wiki %></a>
+            </div>
         </div>
     </body>
 </html>
diff --git a/web/views/tag.erb b/web/views/tag.erb
index ec93c27..600bab2 100644
--- a/web/views/tag.erb
+++ b/web/views/tag.erb
@@ -1,6 +1,6 @@
 <h1><%= link_to_key(@key) %>=<%= @value_pp %></h1>
 
-<div class="source-wiki" title="Description from the wiki">
+<div class="tag-description" title="Description from the wiki">
     <%= @desc %>
 </div>
 
diff --git a/web/views/tags.erb b/web/views/tags.erb
new file mode 100644
index 0000000..151708b
--- /dev/null
+++ b/web/views/tags.erb
@@ -0,0 +1,13 @@
+<!--<h1><%= t.osm.tags %></h1>-->
+
+<div id="block">
+    <table id="grid-tags">
+    </table>
+</div>
+
+<% javascript do
+    JQuery.ready do
+        JS.raw(%Q{ create_flexigrid_for.tags.tags(); })
+    end
+end
+%>