]> git.openstreetmap.org Git - rails.git/blobdiff - public/stylesheets/common.css
projects / rails.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Allow the log location to be changed in production
[rails.git] / public / stylesheets / common.css
diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index c7519b2ec4467f6007914e5f103d6ba029bc0414..e256bb3f6a380a508fe8fd62cbbd155cb70d510b 100644 (file)
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@@ -1,4 +1,22 @@
-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;
+}
+
+body.slim {
+  background-color: #f0f0f0;
+}
+
+/* Rules for links */
+
+a {
   color: #00f;
   text-decoration: none;
 }
   color: #00f;
   text-decoration: none;
 }
@@ -7,167 +25,134 @@ a:hover {
   text-decoration: underline;
 }
 
   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;
 
 #left {
   position: absolute;
-  top: -8px;
-  min-width: 150px;
+  top: 0px;
+  min-width: 170px;
 }
 
 }
 
+/* Rules for the OpenStreetMap logo in the top left corner */
+
 #logo {
 #logo {
-  width: 150px;
-  min-width: 150px;
-  padding: 10px;
-  margin: 10px;
+  width: 170px;
+  min-width: 170px;
+  padding: 5px;
+  margin: 5px;
   height: 150px;
   background: #fff;
   border: 1px solid #ccd;
   height: 150px;
   background: #fff;
   border: 1px solid #ccd;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 }
+
 #logo h1 {
   font-size: 14px;
   text-align: center;
   margin: 0px;
 }
 #logo h1 {
   font-size: 14px;
   text-align: center;
   margin: 0px;
 }
+
 #logo h2 {
   font-size: 10px;
   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;
-}
+/* Rules for the site name */
 
 
-#small-greeting {
-    display: none;
+#small-title {
+  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;
 
 #intro {
   width: 170px;
-  margin: 10px;
+  padding: 5px;
+  margin: 5px;
   border: 1px solid #ccc;
   font-size: 11px;
   border: 1px solid #ccc;
   font-size: 11px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+}
+
+#intro p {
+  margin: 5px;
 }
 
 }
 
-#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 {
 
 #alert {
-  width: 150px;
-  margin: 10px;
-  padding: 10px;
+  width: 170px;
+  margin: 5px;
+  padding: 5px;
   border: 1px solid #ccc;
   background: #d00;
   line-height: 1.2em;
   border: 1px solid #ccc;
   background: #d00;
   line-height: 1.2em;
-  text-align: left;
   font-size: 14px;
   font-size: 14px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 
 }
 
-#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 {
 
 .notice {
-  width: 150px;
-  margin: 10px;
-  padding: 10px;
+  width: 170px;
+  margin: 5px;
+  padding: 5px;
   border: 1px solid #ccc;
   background: #ea0;
   line-height: 1.2em;
   border: 1px solid #ccc;
   background: #ea0;
   line-height: 1.2em;
-  text-align: left;
   font-size: 14px;
   font-size: 14px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 
 }
 
-.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 {
 
 .left_menu {
-  width: 150px;
-  min-width: 150px;
-  margin: 10px;
-  padding: 10px;
+  width: 170px;
+  min-width: 170px;
+  margin: 5px;
+  padding: 5px;
   border: 1px solid #ccc;
   border: 1px solid #ccc;
-  left: 0px;
   background: #ddd;
   line-height: 1.2em;
   background: #ddd;
   line-height: 1.2em;
-  text-align: Left;
   font-size: 14px;
   font-weight: bold;
   font-size: 14px;
   font-weight: bold;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 
 .left_menu td {
   font-size: 12px;
 }
 
 .left_menu td {
   font-size: 12px;
-  padding-right: 4px;
 }
 
 .left_menu h1 {
   font-style: normal;
   font-size: 15px;
 }
 
 .left_menu h1 {
   font-style: normal;
   font-size: 15px;
-  padding: 0em 0em 0em 1em;
-  text-align: left;
 }
 
 .left_menu ul {
 }
 
 .left_menu ul {
-  /*list-style: none;*/
-  padding-left: 10px;
   margin: 0px;
   margin: 0px;
+  list-style-type: none;
 }
 
 .left_menu li {
 }
 
 .left_menu li {
@@ -175,134 +160,115 @@ body {
   padding: 0px;
 }
 
   padding: 0px;
 }
 
-.left_menu img {
-  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;
   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: 180px;
+  min-width: 180px;
+  margin: 5px;
+  padding: 0px;
+  border: 0px;
+  background: #fff;
 }
 
 }
 
+/*
+ * 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: 170px;
+  min-width: 170px;
+  margin: 5px;
+  padding: 5px;
+  border: 1px solid #ccc;
   line-height: 1.2em;
   line-height: 1.2em;
-  text-align: left;
+  font-size: 12px;
+  background: #eee;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 
 }
 
-#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;
 }
 
 }
 
-#changeset_list, #keyvalue {
-  font-size: small;
-  text-align: left;
-  border-collapse: collapse;
-  border-width: 0px;
+.search_container {
+  height: 16px;
+  padding-bottom: 6px;
 }
 
 }
 
-#changeset_list {
+#search_field form {
   width: 100%;
   width: 100%;
+  margin: 0px;
+  padding: 0px;
 }
 
 }
 
-#changeset_list .date {
-  white-space: nowrap;
+#search_field input[type="text"] {
+  width: 136px;
 }
 
 }
 
-#changeset_list .user {
-  white-space: nowrap;
+#search_field input[type="submit"] {
+  width: 26px;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
 }
 
-#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: 170px;
+  margin: 5px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  background: #cbeea7;
+  line-height: 1.2em;
+  text-align: center;
+  font-size: 14px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 
 }
 
+/* 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
 {
   height: 20px;
   margin: 0px;
 
 #tabnav
 {
   height: 20px;
   margin: 0px;
-  padding-left: 215px;
   padding-top: 5px;
   background: url('../images/tab_bottom.gif') repeat-x bottom;
 }
   padding-top: 5px;
   background: url('../images/tab_bottom.gif') repeat-x bottom;
 }
+
 #tabnav li
 {
   margin: 0px; 
 #tabnav li
 {
   margin: 0px; 
@@ -310,149 +276,120 @@ body {
   display: inline;
   list-style-type: none;
 }
   display: inline;
   list-style-type: none;
 }
+
 #tabnav a, #tabnav a:link, #tabnav a:visited 
 {
 #tabnav a, #tabnav a:link, #tabnav a:visited 
 {
-  float: left;
   background: #f3f3f3;
   font-size: 13px;
   line-height: 14px;
   font-weight: bold;
   padding: 2px 10px;
   background: #f3f3f3;
   font-size: 13px;
   line-height: 14px;
   font-weight: bold;
   padding: 2px 10px;
-  margin-right: 4px;
   border: 1px solid #ccc;
   text-decoration: none;
   color: #333;
   border: 1px solid #ccc;
   text-decoration: none;
   color: #333;
+  border-top-right-radius: 5px;
+  -moz-border-radius-topright: 5px;
+  border-top-left-radius: 5px;
+  -moz-border-radius-topleft: 5px;
 }
 }
+
 #tabnav a:link.active, #tabnav a:visited.active
 {
   border-bottom: 1px solid #fff;
   background: #fff;
   color: #000;
 }
 #tabnav a:link.active, #tabnav a:visited.active
 {
   border-bottom: 1px solid #fff;
   background: #fff;
   color: #000;
 }
-#tabnav a:link:hover
+
+#tabnav a:link:hover, #tabnav a:visited:hover
 {
   background: #fff;
 }
 
 {
   background: #fff;
 }
 
-#gads {
-  /*  position: absolute; */
-  left: 100px;
-  width: 700px;
-  text-align: center;
-  font-size: 10px;
+#tabnav a:link.disabled, #tabnav a:visited.disabled,
+#tabnav a:link:hover.disabled, #tabnav a:visited:hover.disabled
+{
+  background: #bbbbbb;
+  color: white
 }
 
 }
 
-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 {
+  height: 20px;
+  margin: 0px;
+  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;
 }
 
 }
 
+/* Rules for OpenLayers maps */
 
 
-.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;
+#map {
+  border: 1px solid black;
+  margin: 0px; 
+  padding: 0px;
 }
 
 }
 
-.oboxheader {
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 22px;
-  vertical-align: bottom;
+.olControlAttribution {
+  display: none !important;
 }
 
 }
 
-.whereami {
+#permalink {
+  z-index: 10000;
   position: absolute;
   position: absolute;
-  right: 21px;
-  line-height: 22px;
-  vertical-align: bottom;
+  bottom: 15px;
+  right: 15px;
+  text-align: right;
+  font-size: smaller;
 }
 
 }
 
-.optionalbox form {
-  margin: 0px;
-  padding: 0px;
-}
-
-#search_field form {
-  width: 100%;
-}
-
-#search_field input[type="text"] {
-  width: 116px;
-}
-
-#search_field input[type="submit"] {
-  width: 26px;
-}
-
-.search_form {
-  height: 16px;
-  padding-bottom: 6px;
-}
+/* Rules for edit menu */
 
 
-.rsssmall {
-  position: relative;
-  top: 4px;
+.menu {
+  display: none;
+  z-index: 10000;
+  position: absolute;
+  background-color: #ffffff;
+  border: 1px solid black;
 }
 
 }
 
-.button {
+.menu ul {
   margin-top: 10px;
   margin-bottom: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 }
 
-#controls img
-{
-  z-index: 9999;
+.menu li {
+  list-style-type: none;
+  white-space: nowrap;
 }
 
 }
 
-#controls
-{
-  position:absolute;
-  top: 0px;
-  left: 0px;
-  width: 64px;
-  height: 32px;
-  z-index: 9998;
-  cursor: pointer;
+/* Rules for attribution text under the main map shown on printouts */
+
+#attribution {
+  display: none;
 }
 
 }
 
-#map {
-  position: absolute;
-  border: 1px solid black;
-  margin: 0px; 
-  padding: 0px;
-  left: 0px;
-  right: 2px;
-  top: 0px;
-  bottom: 0px;
+.attribution_notice {
+  text-align: center;
 }
 
 }
 
+/* Rules for the popout map sidebar */
+
 #sidebar {
   display: none;
   position: absolute;
 #sidebar {
   display: none;
   position: absolute;
@@ -460,12 +397,11 @@ hr {
   margin: 0px;
   padding: 0px;
   width: 30%;
   margin: 0px;
   padding: 0px;
   width: 30%;
-  left: 0px;
   top: 0px;
   bottom: 0px;
 }
 
   top: 0px;
   bottom: 0px;
 }
 
-#sidebar_content {
+#sidebar #sidebar_content {
   overflow: auto;
   position: absolute;
   font-size: 13px;
   overflow: auto;
   position: absolute;
   font-size: 13px;
@@ -476,7 +412,7 @@ hr {
   right: 0px;
 }
 
   right: 0px;
 }
 
-.sidebar_title {
+#sidebar .sidebar_title {
   margin: 0px;
   padding: 3px 6px;
   height: 29px;
   margin: 0px;
   padding: 3px 6px;
   height: 29px;
@@ -486,6 +422,53 @@ hr {
   background: #bbb;
 }
 
   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;
 .browse_heading {
   margin: 0px;
   padding: 3px 6px;
@@ -498,126 +481,358 @@ hr {
   padding: 0px 6px;
 }
 
   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;
 }
 
   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;
 }
 
   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;
   margin: 0px;
-  padding: 2px 6px 0px;
-  color: #f00;
+  position: absolute; 
+  bottom: 10px;
+  line-height: 1.2em;
 }
 
 }
 
-.search_help {
-  font-size: 10px;
-  line-height: 1em;
-  margin-top: 3px;
-  margin-bottom: 0px;
+#slim_container {
+  width: 100%;
 }
 
 }
 
-.search_searching {
-  margin-top: 5px;
+#slim_container_content {
+  max-width: 50em;
+  background-color: #FFFFFF;
+  margin: 10px auto;
+  padding: 3px;
+  border-radius: 25px;
+  -moz-border-radius: 25px;
+  border: 1px solid #e6e6e6;
+}
+
+#slim_content {
+  margin: 10px;
+  margin-top: 90px;
+  max-width: 50em;
+}
+
+#slim_header {
+  margin: 10px;
+  position: absolute;
+  top: 0px;
+}
+
+#slim_header img {
+  vertical-align: middle;
   margin-bottom: 5px;
 }
 
   margin-bottom: 5px;
 }
 
-.olControlAttribution {
-  display: none !important;
+/* Rules for the home page */
+
+.site_index #map {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
 }
 
 }
 
-/* inbox and messaging stuff */
-.inbox-row-unread .inbox-subject {
-       font-weight: bold;
+.site_export #map {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
 }
 
 }
 
-/* rails error field stuff */
+/* Rules for the edit page */
 
 
-.fieldWithErrors {
-  padding: 2px;
-  background-color: red;
-  display: table;
+.site_edit #map {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
 }
 
 }
 
-#error {
-  border: 1px solid red;
-  padding: 7px;
-  background-color: #fff0f0;
-  margin-bottom: 20px;
+/* Rules for the changeset list shown by the history tab etc */
+
+#changeset_list_container {
+  position: relative;
 }
 
 }
 
-#warning {
-  border: 1px solid orange;
-  padding: 7px;
-  background-color: #fff6f0;
-  margin-bottom: 20px;
+#changeset_list {
+  width: 50%;
+  font-size: small;
+  border-collapse: collapse;
+  border-width: 0px;
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 
 }
 
-#notice {
-  border: 1px solid green;
-  padding: 7px;
-  background-color: #f0fff0;
-  margin-bottom: 20px;
+#changeset_list td {
+  vertical-align: top;
+  padding: 3px;
 }
 
 }
 
-#errorExplanation {
-  width: 400px;
-  border: 2px solid red;
-  padding: 7px;
-  padding-bottom: 12px;
-  margin-bottom: 20px;
-  background-color: #f0f0f0;
+#changeset_list .date {
+  white-space: nowrap;
 }
 
 }
 
-#errorExplanation h2 {
-  text-align: left;
-  font-weight: bold;
-  padding: 5px 5px 5px 15px;
+#changeset_list .user {
+  white-space: nowrap;
+}
+
+#changeset_list .area {
+  white-space: nowrap;
+}
+
+#changeset_list .selected {
+  background-color: rgb(255, 255, 160);
+  background-color: rgba(255, 255, 85, 0.5);
+}
+
+#changeset_list_map {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  width: 49%;
+  min-height: 400px;
+  border: solid 1px black;
+}
+
+/* Rules for the data browser */
+
+#browse_navigation {
+  width: 250px;
+  text-align: center;
+}
+
+table.browse_details th {
+  white-space: nowrap;
+}
+
+#browse_map {
+  width: 250px;
+}
+
+#browse_map #small_map {
+  width: 250px;
+  height: 300px;
+  border: solid 1px black;
+}
+
+#browse_map .geolink {
+  display: none;
+}
+
+/* Rules for the trace list shown by the traces tab etc */
+
+#trace_list {
+  font-size: small;
+  border-collapse: collapse;
+  border-width: 0px;
+}
+
+#trace_list .trace_summary {
   font-size: 12px;
   font-size: 12px;
-  margin: -7px;
-  background-color: #c00;
-  color: #fff;
+  color: gray;
 }
 
 }
 
-#errorExplanation p {
-  color: #333;
+#trace_list .trace_pending {
+  color: red;
+}
+
+#trace_list .trace_public {
+  color: green;
+}
+
+#trace_list .trace_identifiable {
+  color: green;
+}
+
+#trace_list .trace_trackable {
+  color: red;
+}
+
+#trace_list .trace_private {
+  color: red;
+}
+
+/* Rules for the user list */
+
+#user_list {
+  width: 100%;
+  font-size: small;
+}
+
+#user_list tr {
+  vertical-align: middle;
+}
+
+#user_list p {
+  margin-top: 0px;
   margin-bottom: 0px;
   margin-bottom: 0px;
-  padding: 5px;
 }
 
 }
 
-#errorExplanation ul li {
-  font-size: 12px;
-  list-style: square;
+#user_list_actions {
+  margin-top: 10px;
 }
 
 }
 
-input[type="text"], input[type="password"], textarea {
-  border: 1px solid black;
+/* Rules for the new diary entry page */
+
+.diary_entry div#map {
+  position: relative;
+  width: 90%;
+  height: 400px;
+  display: none;
 }
 
 }
 
-input[type="submit"] {
+/* Rules for the login page */
+
+#login_wrapper div {
+  margin: 5px;
+  padding: 15px;
+  border-radius: 15px;
+  -moz-border-radius: 15px;
+}
+
+#login_login {
+  background-color: #f5f5ff;
+  border: 1px solid #f3f3ff;
+  border-radius: 15px;
+  -moz-border-radius: 15px;
+}
+
+#login_login h1 {
+  margin-top: 5px;
+}
+
+table#login_openid_buttons {
+  padding-bottom: 10px;
+}
+
+#login_openid_buttons td {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+#login_openid_buttons img {
+  border: 0;
+}
+
+#login_signup form.button-to div {
+  margin: 0px;
+  padding: 0px;
+}
+
+/* Rules for the account confirmation page */
+
+div#contributorTerms {
   border: 1px solid black;
   border: 1px solid black;
+  padding: 4px;
+  overflow: auto;
+  width: 95%;
+  height: 400px;
+}
+
+div#slim_content div#contributorTerms {
+  width: auto;
+}
+
+div#contributorTerms p#first {
+  margin-top: 0px;
 }
 
 }
 
+div#contributorTerms p#last {
+  margin-bottom: 0px;
+}
+
+div#contributorTerms ol {
+  margin-bottom: 0px;
+}
+
+div#contributorTerms img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10%;
+}
+
+form#termsForm {
+  width: 95%;
+  margin-bottom: 3em;
+}
+
+div#slim_content form#termsForm {
+  width: auto;
+}
+
+p#contributorGuidance {
+  background-color: #f5f5ff;
+  border: 1px solid #f3f3ff;
+  border-radius: 15px;
+  -moz-border-radius: 15px;
+  padding: 10px;
+}
+
+/* Rules for the account settings page */
+
 #accountForm td {
   padding-bottom: 10px;
 }
 
 #accountForm td {
   padding-bottom: 10px;
 }
 
-#accountImage td {
-  padding-bottom: 0px;
+#accountForm .user_map {
+  position: relative;
+  width: 500px;
+  height: 400px; 
 }
 
 }
 
-.fieldName {
-       text-align:right;
-       font-weight:bold;
+#accountImage td {
+  padding-bottom: 0px;
 }
 
 }
 
-
 .nohome .location {
   display: none;
 }
 .nohome .location {
   display: none;
 }
@@ -630,85 +845,150 @@ input[type="submit"] {
   display: inline !important;
 }
 
   display: inline !important;
 }
 
-.minorNote {
-       font-size:0.8em;
+#accountForm input[type=submit] {
+  margin-top: 15px;
 }
 
 }
 
-.nowrap {
-  white-space: nowrap;
-}
+/* Rules for the user view */
 
 
-#map #popup p {
-  margin: 0px;
-  padding: 2px;
+.user_view .user_map {
+  position: relative;
+  width: 400px;
+  height: 400px; 
 }
 
 }
 
-#permalink {
-  z-index:10000;
-  position:absolute;
-  bottom:15px;
-  right:15px;
-  font-size:smaller;
-  text-align: right;
+.user_view .user_map p#no_home_location {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  width: 90%;
+  height: 30%;
+  margin: auto 5%
 }
 
 }
 
-#attribution {
+/* Rules for the user map */
+
+.user_map .olControlPanZoomBar {
   display: none;
 }
 
   display: none;
 }
 
-.export_heading {
-  margin: 0px;
-  padding: 3px 6px;
+.user_map .olControlPanZoom {
+  display: block;
+}
+
+/* Rules for user popups on maps */
+
+.user_popup p {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-left: 55px;
+  margin-right: 2px;
+}
+
+.user_popup img.user_thumbnail {
+  float: left;
+}
+
+/* Rules for message in/out box page */
+
+#messages {
   border: 1px solid #ccc;
   border: 1px solid #ccc;
-  background: #ddd;
 }
 
 }
 
-.export_bounds {
-  width: 100%;
-  text-align: center;
+.inbox-row-unread .inbox-subject {
+  font-weight: bold;
 }
 
 }
 
-.export_bound {
-  margin: 5px;
+/* Rules for "flash" notice boxes shown at the top of the content area */
+
+#error {
+  border: 1px solid red;
+  padding: 7px;
+  background-color: #fff0f0;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 
 }
 
-.export_details {
-  padding: 2px 6px;
+#warning {
+  border: 1px solid orange;
+  padding: 7px;
+  background-color: #fff6f0;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 
 }
 
-#export_osm {
-  display: none;
+#notice {
+  border: 1px solid green;
+  padding: 7px;
+  background-color: #f0fff0;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 
 }
 
-#export_mapnik {
-  display: none;
+/* Rules for highlighting fields with rails validation errors */
+
+.fieldWithErrors {
+  padding: 2px;
+  background-color: red;
+  display: table;
 }
 
 }
 
-#export_osmarender {
-  display: none;
+/* Rules for rails validation error boxes */
+
+#errorExplanation {
+  width: 400px;
+  border: 2px solid red;
+  padding: 7px;
+  padding-bottom: 12px;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
 }
 
 }
 
-.export_hint {
-  padding: 0px 12px;
-  font-style: italic;
+#errorExplanation h2 {
+  font-weight: bold;
+  font-size: 12px;
+  margin: -7px;
+  background-color: #c00;
+  color: #fff;
 }
 
 }
 
-.export_buttons {
-  width: 100%;
-  text-align: center;
+#errorExplanation p {
+  color: #333;
+  margin-bottom: 0px;
+  padding: 5px;
 }
 
 }
 
-#noscript {
-  z-index: 20000000;
-  position: absolute;
-  top: 15px;
-  left: 15px
+#errorExplanation ul li {
+  font-size: 12px;
+  list-style: square;
 }
 
 }
 
-abbr.geo {
-  border-bottom: none;
+/* Rules for forms */
+
+.fieldName {
+  vertical-align: top;
+  font-weight: bold;
+}
+
+.minorNote {
+  font-size: 0.8em;
+}
+
+input[type="text"], input[type="password"], textarea {
+  border: 1px solid black;
+}
+
+input[type="submit"] {
+  border: 1px solid black;
 }
 
 }
 
+/* Rules for user images */
+
 img.user_image {
   max-width: 100px;
   max-height: 100px;
 img.user_image {
   max-width: 100px;
   max-height: 100px;
@@ -720,3 +1000,39 @@ img.user_thumbnail {
   max-height: 100px;
   border: 1px solid black;
 }
   max-height: 100px;
   border: 1px solid black;
 }
+
+/* Rule for "nowrap" class that can be applied to anything to stop wrapping */
+
+.nowrap {
+  white-space: nowrap;
+}
+
+/* Rules for geo microformats */
+
+abbr.geo {
+  border-bottom: none;
+}
+
+/* Rules for RSS buttons */
+
+.rsssmall {
+  position: relative;
+  top: 4px;
+}
+
+/* Rules for doing distinct colour of alternate table rows */
+
+.table0 { 
+  background: #f6f6f6;
+}
+
+.table1 { 
+  background: #fff;
+}
+
+/* Rules for OpenID logo */
+
+.openid_logo {
+  vertical-align: text-bottom;
+  border: 0;
+}
The OpenStreetMap web site