From: Tom Hughes <tom@compton.nu>
Date: Wed, 3 Mar 2010 15:46:16 +0000 (+0000)
Subject: Tidy up the stylesheets, removing lots of ancient, unused junk and
X-Git-Tag: live~6290^2~52
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/318c7a9854f31bebd39eb8e90fbf11a95bfa8995

Tidy up the stylesheets, removing lots of ancient, unused junk and
trying to group everything else together in more logical fashion.
---

diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index 8fb9beae1..7ee3cf938 100644
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -7,9 +7,9 @@
     <%= javascript_include_tag 'site' %>
     <!--[if lt IE 7]><%= javascript_include_tag 'pngfix' %><![endif]--> <!-- thanks, microsoft! -->
     <%= stylesheet_link_tag 'common' %>
-    <!--[if IE]><%= stylesheet_link_tag 'site', :media => "screen" %><![endif]--> <!-- IE is totally broken with CSS media queries -->
-    <%= stylesheet_link_tag 'site-sml', :media => "only screen and (max-width: 481px)" %>
-    <%= stylesheet_link_tag 'site', :media => "screen and (min-width: 482px)" %> 
+    <!--[if IE]><%= stylesheet_link_tag 'large', :media => "screen" %><![endif]--> <!-- IE is totally broken with CSS media queries -->
+    <%= stylesheet_link_tag 'small', :media => "only screen and (max-width: 481px)" %>
+    <%= stylesheet_link_tag 'large', :media => "screen and (min-width: 482px)" %> 
     <%= stylesheet_link_tag 'print', :media => "print" %>
     <%= tag("link", { :rel => "search", :type => "application/opensearchdescription+xml", :title => "OpenStreetMap Search", :href => "/opensearch/osm.xml" }) %>
     <%= tag("meta", { :name => "description", :content => "OpenStreetMap is the free wiki world map." }) %>
@@ -134,7 +134,7 @@
           <a href="http://donate.openstreetmap.org/" title="<%= h(t('layouts.make_a_donation.title')) %>"><%= h(t('layouts.make_a_donation.text')) %></a>
         </div>
 
-        <div id="cclogo" class="button" style="width: 88px">
+        <div id="cclogo" style="width: 88px">
           <%= link_to(
                   image_tag("cc_button.png",
                       :alt => t('layouts.license.alt'),
diff --git a/app/views/site/_search.html.erb b/app/views/site/_search.html.erb
index 0fea3793f..31b5af16f 100644
--- a/app/views/site/_search.html.erb
+++ b/app/views/site/_search.html.erb
@@ -32,8 +32,8 @@
 
 <% content_for "optionals" do %>
   <div class="optionalbox">
-    <span class="oboxheader"><%= t 'site.search.search' %></span>
     <span class="whereami"><a href="javascript:describeLocation()" title="<%= t 'site.search.where_am_i_title' %>"><%= t 'site.search.where_am_i' %></a></span>
+    <h1><%= t 'site.search.search' %></h1>
     <div class="search_form">
     <div id="search_field">
     <% form_remote_tag(:before => "setSearchViewbox()",
diff --git a/app/views/trace/_trace.html.erb b/app/views/trace/_trace.html.erb
index a3ae1fb08..509c346ed 100644
--- a/app/views/trace/_trace.html.erb
+++ b/app/views/trace/_trace.html.erb
@@ -10,7 +10,7 @@
     <% end %>
   </td>
   <td class="<%= cl %>"><%= link_to trace.name, {:controller => 'trace', :action => 'view', :display_name => trace.user.display_name, :id => trace.id} %>
-    <span class="gpxsummary" title="<%= trace.timestamp %>"> ... 
+    <span class="trace_summary" title="<%= trace.timestamp %>"> ... 
       <% if trace.inserted %> 
         (<%= t'trace.trace.count_points', :count => trace.size.to_s.gsub(/(\d)(?=(\d{3})+$)/,'\1,') %>)
       <% end %> 
diff --git a/app/views/trace/_trace_list.html.erb b/app/views/trace/_trace_list.html.erb
index c1547027a..968fd85be 100644
--- a/app/views/trace/_trace_list.html.erb
+++ b/app/views/trace/_trace_list.html.erb
@@ -1,6 +1,6 @@
 <%= render :partial => 'trace_paging_nav' %>
 
-<table id="keyvalue" cellpadding="3">
+<table id="trace_list" cellpadding="3">
   <tr>
     <th></th>
     <th></th>
diff --git a/app/views/trace/_trace_optionals.html.erb b/app/views/trace/_trace_optionals.html.erb
index f166a779b..69eedd143 100644
--- a/app/views/trace/_trace_optionals.html.erb
+++ b/app/views/trace/_trace_optionals.html.erb
@@ -1,7 +1,6 @@
 <% content_for "optionals" do %>
   <div class="optionalbox">
-    <span class="oboxheader"><%= t'trace.trace_optionals.tags' %></span>
-    <br />
+    <h1><%= t'trace.trace_optionals.tags' %></h1>
     <br />
     <% if @all_tags %>
       <% @all_tags.each do |tag| %>
diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index c7519b2ec..ca6a7be20 100644
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@@ -1,4 +1,18 @@
-a, a:visited, a:active, a:link, a:hover {
+/* Styles common to large and small screens */
+
+/* Default rules for the body of every page */
+
+body {
+  font-family: Arial,sans-serif;
+  color: #000;
+  background-color: #fff;
+  margin: 0px;
+  padding: 0px;
+}
+
+/* Rules for links */
+
+a {
   color: #00f;
   text-decoration: none;
 }
@@ -7,25 +21,16 @@ a:hover {
   text-decoration: underline;
 }
 
-#frontpage_main {
-  width: 100%;
-  text-align: center;
-  font-family: sans-serif;
-}
-
+/* Rules for horizontal lines */
 
-#frontpage_MAIN h1 {
-  font-size: xx-large;
-  font-weight: normal;
+hr {
+  border: none;
+  background-color: #ccc;
+  color: #ccc;
+  height: 1px;
 }
 
-body {
-  font-family: Arial,sans-serif;
-  color: #000;
-  background-color: #fff;
-  margin: 0px;
-  padding: 0px;
-}
+/* Rules for the whole left sidebar, including the logo */
 
 #left {
   position: absolute;
@@ -33,6 +38,8 @@ body {
   min-width: 150px;
 }
 
+/* Rules for the OpenStreetMap logo in the top left corner */
+
 #logo {
   width: 150px;
   min-width: 150px;
@@ -42,54 +49,19 @@ body {
   background: #fff;
   border: 1px solid #ccd;
 }
+
 #logo h1 {
   font-size: 14px;
   text-align: center;
   margin: 0px;
 }
+
 #logo h2 {
   font-size: 10px;
   margin: 0px;
 }
 
-/* The Map Key sidebar */
-#mapkey h3 {
-    font-size: 110%;
-    font-weight: normal;
-    text-align: center;
-}
-
-#mapkey .mapkey-table {
-    padding-left: 5px;
-    padding-right: 5px;
-}
-
-/*#mapkey .mapkey-table-key {}*/
-
-#mapkey .mapkey-table-value {
-    font-size: 90%;
-}
-
-
-#greeting {
-  float: right;
-  height: 20px;
-  margin: 0px;
-  padding-right: 10px;
-  padding-top: 5px;
-  font-size: 13px;
-  line-height: 14px;
-  background: url('../images/tab_bottom.gif') repeat-x bottom;
-}
-
-#small-greeting {
-    display: none;
-}
-
-/* An unread message (e.g. "inbox(1)") */
-.greeting-bar-unread {
-  font-weight: bold;
-}
+/* Rules for the introductory text displayed in the left sidebar to new users */
 
 #intro {
   width: 170px;
@@ -100,6 +72,12 @@ body {
 
 #intro p { margin: 10px; }
 
+/*
+ * Rules for alert boxes shown in the left sidebar when important
+ * information needs to be conveyed such as when the site is
+ * undergoing maintenance.
+ */
+
 #alert {
   width: 150px;
   margin: 10px;
@@ -111,10 +89,11 @@ body {
   font-size: 14px;
 }
 
-#sotm {
-  width: 170px;
-  padding: 0px;
-}
+/*
+ * Rules for notice boxes shown in the left sidebar when important, but
+ * non-critical information needs to be conveyed such as notices about
+ * donation drives.
+ */
 
 .notice {
   width: 150px;
@@ -127,16 +106,7 @@ body {
   font-size: 14px;
 }
 
-.donate {
-  width: 150px;
-  margin: 10px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  background: #cbeea7;
-  line-height: 1.2em;
-  text-align: center;
-  font-size: 14px;
-}
+/* Rules for the menu displayed in the left sidebar */
 
 .left_menu {
   width: 150px;
@@ -165,7 +135,6 @@ body {
 }
 
 .left_menu ul {
-  /*list-style: none;*/
   padding-left: 10px;
   margin: 0px;
 }
@@ -179,121 +148,99 @@ body {
   margin: 2px 8px 0px 0px;
 }
 
-.left_menu a, .left_menu a:visited, .left_menu a:active, .left_menu a:link, .left_menu a:hover {
+.left_menu a {
   color: #000;
-  text-decoration: none;
 }
 
-.left_menu a:hover {
-  color: #000;
-  text-decoration: underline;
-}
+/* Rules for SOTM advert */
 
-#messages {
-  border: 1px solid #ccc;
+#sotm {
+  width: 170px;
+  padding: 0px;
 }
 
+/*
+ * Rules for "optional boxes" which appear in the left sidebar on
+ * certain pages. Current users are the seach box on the main page
+ * and the tag cloud on the traces pages.
+ */
 
-#content {
-  padding: 0px;
-  margin: 0px;
-  position: absolute; 
-  left: 192px;
-  right: 10px;
-  top: 35px;
-  bottom: 10px;
+.optionalbox {
+  width: 150px;
+  min-width: 150px;
+  margin: 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  left: 0px;
   line-height: 1.2em;
   text-align: left;
+  font-size: 12px;
+  background: #eee;
 }
 
-#bottom_bar {
-  position: absolute;
-  bottom: 0px;
-  width: 100%;
-  font-size: x-small;
-  text-align: center;
+.optionalbox h1 {
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 22px;
+  margin: 0px;
+  vertical-align: bottom;
 }
 
-#mapImage {
-  position: absolute;
-  left: 0px;
-}
-#drag {
-  top: 0px;
-  left: 14px;
-}
+/* Rules for the search box */
 
-#mapEpilog {
-  font-size: x-small;
+.whereami {
+  line-height: 22px;
+  vertical-align: bottom;
+  float: right;
 }
 
-#changeset_list, #keyvalue {
-  font-size: small;
-  text-align: left;
-  border-collapse: collapse;
-  border-width: 0px;
+.search_form {
+  height: 16px;
+  padding-bottom: 6px;
 }
 
-#changeset_list {
+#search_field form {
   width: 100%;
+  margin: 0px;
+  padding: 0px;
 }
 
-#changeset_list .date {
-  white-space: nowrap;
+#search_field input[type="text"] {
+  width: 116px;
 }
 
-#changeset_list .user {
-  white-space: nowrap;
+#search_field input[type="submit"] {
+  width: 26px;
 }
 
-#changeset_list .area {
-  white-space: nowrap;
+.search_help {
+  font-size: 10px;
+  line-height: 1em;
+  margin-top: 3px;
+  margin-bottom: 0px;
 }
 
-#changeset_list.th {
-  font-weight: bold;
-}
+/* Rules for donation request box */
 
-.emphasized {
-  background-color: #82bcff;
+.donate {
+  width: 150px;
+  margin: 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  background: #cbeea7;
+  line-height: 1.2em;
+  text-align: center;
+  font-size: 14px;
 }
 
+/* Rules for Creative Commons logo button */
 
-#header {
-  float: left;
-  width: 100%;
-  background: #DAE0D2;
-  font-size: 93%;
-  line-height: normal;
-}
-#header ul {
-  margin: 0px;
-  padding: 10px 10px 0px 215px;
-  list-style: none;
-}
-#header li {
-  float: left;
-  margin: 0px;
-  padding: 0px 0px 0px 9px;
-}
-#header li a {
-  float: left;
-  display: block;
-  padding: 5px 15px 4px 6px;
-  text-decoration: none;
-  font-weight: bold;
-  color: #765;
+#cclogo {
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
-#header li a {float:none;}
-
-#header li a:hover {
-  color: #333;
-}
-#header #current a {
-  color: #333;
-  padding-bottom: 5px;
-}
+/* Rules for tabbed navigation bar */
 
 #tabnav
 {
@@ -303,6 +250,7 @@ body {
   padding-top: 5px;
   background: url('../images/tab_bottom.gif') repeat-x bottom;
 }
+
 #tabnav li
 {
   margin: 0px; 
@@ -310,6 +258,7 @@ body {
   display: inline;
   list-style-type: none;
 }
+
 #tabnav a, #tabnav a:link, #tabnav a:visited 
 {
   float: left;
@@ -323,135 +272,78 @@ body {
   text-decoration: none;
   color: #333;
 }
+
 #tabnav a:link.active, #tabnav a:visited.active
 {
   border-bottom: 1px solid #fff;
   background: #fff;
   color: #000;
 }
+
 #tabnav a:link:hover
 {
   background: #fff;
 }
 
-#gads {
-  /*  position: absolute; */
-  left: 100px;
-  width: 700px;
-  text-align: center;
-  font-size: 10px;
-}
-
-hr {
-  border: none;
-  background-color: #ccc;
-  color: #ccc;
-  height: 1px;
-}
+/* Rules for greeting bar in the top right corner */
 
-.gpxsummary {
-  font-size: 12px;
-  color: gray;
+#greeting {
+  float: right;
+  height: 20px;
+  margin: 0px;
+  padding-right: 10px;
+  padding-top: 5px;
+  font-size: 13px;
+  line-height: 14px;
+  background: url('../images/tab_bottom.gif') repeat-x bottom;
 }
 
-.gpxdesc {
-  font-style: italic;
+.greeting-bar-unread {
+  font-weight: bold;
 }
 
-.table0 { 
-  background: #f6f6f6;
-}
+/* Rules for the message shown in place of the map when javascript is disabled */
 
-.table1 { 
-  background: #fff;
+#noscript {
+  z-index: 20000000;
+  position: absolute;
+  top: 15px;
+  left: 15px
 }
 
+/* Rules for OpenLayers maps */
 
-.optionalbox {
-  width: 150px;
-  min-width: 150px;
-  margin: 10px;
-  padding: 10px;
-  border: 1px solid #ccc;
+#map {
+  position: absolute;
+  border: 1px solid black;
+  margin: 0px; 
+  padding: 0px;
   left: 0px;
-  line-height: 1.2em;
-  text-align: left;
-  font-size: 12px;
-  background: #eee;
+  right: 2px;
+  top: 0px;
+  bottom: 0px;
 }
 
-.oboxheader {
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 22px;
-  vertical-align: bottom;
+.olControlAttribution {
+  display: none !important;
 }
 
-.whereami {
-  position: absolute;
-  right: 21px;
-  line-height: 22px;
-  vertical-align: bottom;
+#map #permalink {
+  z-index:10000;
+  position:absolute;
+  bottom:15px;
+  right:15px;
+  font-size:smaller;
+  text-align: right;
 }
 
-.optionalbox form {
-  margin: 0px;
-  padding: 0px;
-}
+/* Rules for attribution text under the main map shown on printouts */
 
-#search_field form {
-  width: 100%;
+#attribution {
+  display: none;
 }
 
-#search_field input[type="text"] {
-  width: 116px;
-}
-
-#search_field input[type="submit"] {
-  width: 26px;
-}
-
-.search_form {
-  height: 16px;
-  padding-bottom: 6px;
-}
-
-.rsssmall {
-  position: relative;
-  top: 4px;
-}
-
-.button {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-#controls img
-{
-  z-index: 9999;
-}
-
-#controls
-{
-  position:absolute;
-  top: 0px;
-  left: 0px;
-  width: 64px;
-  height: 32px;
-  z-index: 9998;
-  cursor: pointer;
-}
-
-#map {
-  position: absolute;
-  border: 1px solid black;
-  margin: 0px; 
-  padding: 0px;
-  left: 0px;
-  right: 2px;
-  top: 0px;
-  bottom: 0px;
-}
+/* Rules for the popout map sidebar */
 
 #sidebar {
   display: none;
@@ -486,6 +378,53 @@ hr {
   background: #bbb;
 }
 
+/* Rules for the map key which appears in the popout sidebar */
+
+#mapkey h3 {
+    font-size: 110%;
+    font-weight: normal;
+    text-align: center;
+}
+
+#mapkey .mapkey-table {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+#mapkey .mapkey-table-key {
+}
+
+#mapkey .mapkey-table-value {
+    font-size: 90%;
+}
+
+/* Rules for search results which appear in the popout sidebar */
+
+.search_searching {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.search_results_heading {
+  margin: 0px;
+  padding: 3px 6px;
+  border: 1px solid #ccc;
+  background: #ddd;
+}
+
+.search_results_entry {
+  margin: 0px;
+  padding: 2px 6px;
+}
+
+.search_results_error {
+  margin: 0px;
+  padding: 2px 6px 0px;
+  color: #f00;
+}
+
+/* Rules for data browser information which appears in the popout sidebar */
+
 .browse_heading {
   margin: 0px;
   padding: 3px 6px;
@@ -498,53 +437,136 @@ hr {
   padding: 0px 6px;
 }
 
-.search_results_heading {
+/* Rules for export information which appears in the popout sidebar */
+
+.export_heading {
   margin: 0px;
   padding: 3px 6px;
   border: 1px solid #ccc;
   background: #ddd;
 }
 
-.search_results_entry {
-  margin: 0px;
+.export_bounds {
+  width: 100%;
+  text-align: center;
+}
+
+.export_bound {
+  margin: 5px;
+}
+
+.export_details {
   padding: 2px 6px;
 }
 
-.search_results_error {
+#export_osm {
+  display: none;
+}
+
+#export_mapnik {
+  display: none;
+}
+
+#export_osmarender {
+  display: none;
+}
+
+.export_hint {
+  padding: 0px 12px;
+  font-style: italic;
+}
+
+.export_buttons {
+  width: 100%;
+  text-align: center;
+}
+
+/* Rules for the main content area */
+
+#content {
+  padding: 0px;
   margin: 0px;
-  padding: 2px 6px 0px;
-  color: #f00;
+  position: absolute; 
+  right: 10px;
+  bottom: 10px;
+  line-height: 1.2em;
+  text-align: left;
 }
 
-.search_help {
-  font-size: 10px;
-  line-height: 1em;
-  margin-top: 3px;
-  margin-bottom: 0px;
+/* Rules for the changeset list shown by the history tab etc */
+
+#changeset_list, #keyvalue {
+  width: 100%;
+  font-size: small;
+  text-align: left;
+  border-collapse: collapse;
+  border-width: 0px;
 }
 
-.search_searching {
-  margin-top: 5px;
-  margin-bottom: 5px;
+#changeset_list .date {
+  white-space: nowrap;
 }
 
-.olControlAttribution {
-  display: none !important;
+#changeset_list .user {
+  white-space: nowrap;
 }
 
-/* inbox and messaging stuff */
-.inbox-row-unread .inbox-subject {
-	font-weight: bold;
+#changeset_list .area {
+  white-space: nowrap;
+}
+
+#changeset_list.th {
+  font-weight: bold;
 }
 
-/* rails error field stuff */
+/* Rules for the trace list shown by the traces tab etc */
 
-.fieldWithErrors {
-  padding: 2px;
-  background-color: red;
-  display: table;
+#trace_list {
+  font-size: small;
+  text-align: left;
+  border-collapse: collapse;
+  border-width: 0px;
+}
+
+#trace_list .trace_summary {
+  font-size: 12px;
+  color: gray;
+}
+
+/* Rules for the account settings page */
+
+#accountForm td {
+  padding-bottom: 10px;
+}
+
+#accountImage td {
+  padding-bottom: 0px;
+}
+
+.nohome .location {
+  display: none;
 }
 
+#homerow .message {
+  display: none;
+}
+
+.nohome .message {
+  display: inline !important;
+}
+
+/* Rules for message in/out box page */
+
+#messages {
+  border: 1px solid #ccc;
+}
+
+.inbox-row-unread .inbox-subject {
+  font-weight: bold;
+}
+
+/* Rules for "flash" notice boxes shown at the top of the content area */
+
 #error {
   border: 1px solid red;
   padding: 7px;
@@ -566,6 +588,16 @@ hr {
   margin-bottom: 20px;
 }
 
+/* Rules for highlighting fields with rails validation errors */
+
+.fieldWithErrors {
+  padding: 2px;
+  background-color: red;
+  display: table;
+}
+
+/* Rules for rails validation error boxes */
+
 #errorExplanation {
   width: 400px;
   border: 2px solid red;
@@ -596,127 +628,64 @@ hr {
   list-style: square;
 }
 
-input[type="text"], input[type="password"], textarea {
-  border: 1px solid black;
-}
-
-input[type="submit"] {
-  border: 1px solid black;
-}
-
-#accountForm td {
-  padding-bottom: 10px;
-}
-
-#accountImage td {
-  padding-bottom: 0px;
-}
+/* Rules for forms */
 
 .fieldName {
-	text-align:right;
-	font-weight:bold;
-}
-
-
-.nohome .location {
-  display: none;
-}
-
-#homerow .message {
-  display: none;
-}
-
-.nohome .message {
-  display: inline !important;
+  text-align: right;
+  font-weight: bold;
 }
 
 .minorNote {
-	font-size:0.8em;
-}
-
-.nowrap {
-  white-space: nowrap;
+  font-size: 0.8em;
 }
 
-#map #popup p {
-  margin: 0px;
-  padding: 2px;
+input[type="text"], input[type="password"], textarea {
+  border: 1px solid black;
 }
 
-#permalink {
-  z-index:10000;
-  position:absolute;
-  bottom:15px;
-  right:15px;
-  font-size:smaller;
-  text-align: right;
+input[type="submit"] {
+  border: 1px solid black;
 }
 
-#attribution {
-  display: none;
-}
+/* Rules for user images */
 
-.export_heading {
-  margin: 0px;
-  padding: 3px 6px;
-  border: 1px solid #ccc;
-  background: #ddd;
-}
-
-.export_bounds {
-  width: 100%;
-  text-align: center;
+img.user_image {
+  max-width: 100px;
+  max-height: 100px;
+  border: 1px solid black;
 }
 
-.export_bound {
-  margin: 5px;
+img.user_thumbnail {
+  max-width: 50px;
+  max-height: 100px;
+  border: 1px solid black;
 }
 
-.export_details {
-  padding: 2px 6px;
-}
+/* Rule for "nowrap" class that can be applied to anything to stop wrapping */
 
-#export_osm {
-  display: none;
-}
-
-#export_mapnik {
-  display: none;
+.nowrap {
+  white-space: nowrap;
 }
 
-#export_osmarender {
-  display: none;
-}
+/* Rules for geo microformats */
 
-.export_hint {
-  padding: 0px 12px;
-  font-style: italic;
+abbr.geo {
+  border-bottom: none;
 }
 
-.export_buttons {
-  width: 100%;
-  text-align: center;
-}
+/* Rules for RSS buttons */
 
-#noscript {
-  z-index: 20000000;
-  position: absolute;
-  top: 15px;
-  left: 15px
+.rsssmall {
+  position: relative;
+  top: 4px;
 }
 
-abbr.geo {
-  border-bottom: none;
-}
+/* Rules for doing distinct colour of alternate table rows */
 
-img.user_image {
-  max-width: 100px;
-  max-height: 100px;
-  border: 1px solid black;
+.table0 { 
+  background: #f6f6f6;
 }
 
-img.user_thumbnail {
-  max-width: 50px;
-  max-height: 100px;
-  border: 1px solid black;
+.table1 { 
+  background: #fff;
 }
diff --git a/public/stylesheets/large.css b/public/stylesheets/large.css
new file mode 100644
index 000000000..a1efa8583
--- /dev/null
+++ b/public/stylesheets/large.css
@@ -0,0 +1,20 @@
+/* Styles specific to large screens  */
+
+/* Rules for greeting bar in the top right corner */
+
+#small-greeting {
+  display: none;
+}
+
+/* Rules for the main content area */
+
+#content {
+  left: 192px;
+  top: 35px;
+}
+
+/* Rules for OpenLayers maps */
+
+.olControlPanZoom {
+  display: none;
+}
diff --git a/public/stylesheets/site-sml.css b/public/stylesheets/site-sml.css
deleted file mode 100644
index 4f49100e9..000000000
--- a/public/stylesheets/site-sml.css
+++ /dev/null
@@ -1,148 +0,0 @@
-/* styles specific to a small-format screen, such as iPhone, Android, etc... */
-
-body {
-    font-size: 12px;
-}
-h1 {
-    font-size: 14px;
-}
-
-#logo {
-  width: 100px;
-  min-width: 100px;
-  padding: 10px;
-  margin: 10px;
-  margin-top: 10px;
-  height: 70px;
-  background: #fff;
-  border: 1px solid #ccd;
-}
-#logo h1 {
-  font-size: 11px;
-  text-align: center;
-  margin: 0px;
-}
-#logo h2 {
-  font-size: 8px;
-  margin: 0px;
-}
-#logo-img {
-    display: none;
-}
-
-#tabnav
-{
-  height: 14px;
-  margin: 0px;
-  padding-left: 10px;
-  padding-top: 5px;
-  margin-top: 18px;
-  background: url('../images/tab_bottom.gif') repeat-x bottom;
-  font-size: 10px;
-  line-height: 10px;
-}
-#tabnav li
-{
-  margin: 0px; 
-  padding: 0px;
-  display: inline;
-  list-style-type: none;
-}
-#tabnav a, #tabnav a:link, #tabnav a:visited 
-{
-  float: left;
-  background: #f3f3f3;
-  font-size: 10px;
-  line-height: 10px;
-  font-weight: bold;
-  padding: 1px 5px;
-  margin-right: 1px;
-  border: 1px solid #ccc;
-  text-decoration: none;
-  color: #333;
-}
-#tabnav a:link.active, #tabnav a:visited.active
-{
-  border-bottom: 1px solid #fff;
-  background: #fff;
-  color: #000;
-}
-#tabnav a:link:hover
-{
-  background: #fff;
-}
-
-#left {
-  display: none;
-  min-width: 100px;
-  top: 20px;
-}
-#intro {
-    display: none;
-}
-.left_menu {
-  width: 100px;
-  min-width: 100px;
-}
-.optionalbox {
-  width: 100px;
-  min-width: 100px;
-}
-.donate {
-  width: 100px;
-  min-width: 100px;
-}
-#content {
-    /* left: 142px; */
-    left: 10px;
-    top: 47px;
-}
-
-#greeting {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  height: 14px;
-  font-size: 12px;
-  line-height: 12px;
-  white-space: nowrap;
-  background: none;
-}
-#full-greeting {
-    display: none;
-}
-#small-greeting {
-    display: inline;
-}
-
-#signupForm input[type="text"], #signupForm input[type="password"] {
-    width: 100%;
-}
-#signupForm input#user_email {
-    max-width: 30em;
-}
-#signupForm input#user_email_confirmation {
-    max-width: 30em;
-}
-#signupForm input#user_display_name {
-    max-width: 20em;
-}
-#signupForm input#user_pass_crypt {
-    max-width: 20em;
-}
-#signupForm input#user_pass_crypt_confirmation {
-    max-width: 20em;
-}
-
-#loginForm input#user_email {
-    width: 100%;
-    max-width: 18em;
-}
-#loginForm input#user_password {
-    width: 100%;
-    max-width: 18em;
-}
-
-.olControlPanZoomBar {
-  display: none;
-}
diff --git a/public/stylesheets/site.css b/public/stylesheets/site.css
deleted file mode 100644
index b39c8a7b9..000000000
--- a/public/stylesheets/site.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* styles specific to a large-format screen */
-
-#logo-img-sml {
-    display: none;
-}
-
-.olControlPanZoom {
-  display: none;
-}
diff --git a/public/stylesheets/small.css b/public/stylesheets/small.css
new file mode 100644
index 000000000..b11aebf69
--- /dev/null
+++ b/public/stylesheets/small.css
@@ -0,0 +1,111 @@
+/* Styles specific to a small screen, such as iPhone, Android, etc... */
+
+/* Default rules for the body of every page */
+
+body {
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 14px;
+}
+
+/* Rules for the whole left sidebar, including the logo */
+
+#left {
+  display: none;
+}
+
+/* Rules for tabbed navigation bar */
+
+#tabnav
+{
+  height: 14px;
+  margin: 0px;
+  padding-left: 10px;
+  padding-top: 5px;
+  margin-top: 18px;
+  background: url('../images/tab_bottom.gif') repeat-x bottom;
+  font-size: 10px;
+  line-height: 10px;
+}
+
+#tabnav a, #tabnav a:link, #tabnav a:visited 
+{
+  font-size: 10px;
+  line-height: 10px;
+  padding: 1px 5px;
+  margin-right: 1px;
+}
+
+/* Rules for greeting bar in the top right corner */
+
+#greeting {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  height: 14px;
+  font-size: 12px;
+  line-height: 12px;
+  white-space: nowrap;
+  background: none;
+}
+
+#full-greeting {
+  display: none;
+}
+
+#small-greeting {
+  display: inline;
+}
+
+/* Rules for OpenLayers maps */
+
+.olControlPanZoomBar {
+  display: none;
+}
+
+/* Rules for the main content area */
+
+#content {
+  left: 10px;
+  top: 47px;
+}
+
+/* Rules for the signup form */
+
+#signupForm input[type="text"], #signupForm input[type="password"] {
+  width: 100%;
+}
+
+#signupForm input#user_email {
+  max-width: 30em;
+}
+
+#signupForm input#user_email_confirmation {
+  max-width: 30em;
+}
+
+#signupForm input#user_display_name {
+  max-width: 20em;
+}
+
+#signupForm input#user_pass_crypt {
+  max-width: 20em;
+}
+
+#signupForm input#user_pass_crypt_confirmation {
+  max-width: 20em;
+}
+
+/* Rules for the login form */
+
+#loginForm input#user_email {
+  width: 100%;
+  max-width: 18em;
+}
+
+#loginForm input#user_password {
+  width: 100%;
+  max-width: 18em;
+}