Add a map to the changeset list page

[rails.git] / public / stylesheets / common.css

diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index c7519b2ec4467f6007914e5f103d6ba029bc0414..098a9ddd92d96fa8973398b60b5e36ed831fd20c 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,142 +25,113 @@ 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: 10px; }
+#intro p { margin: 5px; }
+
+/*
+ * 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;
   text-align: left;
   font-size: 14px;
   border: 1px solid #ccc;
   background: #d00;
   line-height: 1.2em;
   text-align: left;
   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;
   text-align: left;
   font-size: 14px;
   border: 1px solid #ccc;
   background: #ea0;
   line-height: 1.2em;
   text-align: left;
   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;
   left: 0px;
   background: #ddd;
   border: 1px solid #ccc;
   left: 0px;
   background: #ddd;


@@ -150,6 +139,8 @@ body {
   text-align: Left;
   font-size: 14px;
   font-weight: bold;
   text-align: Left;
   font-size: 14px;
   font-weight: bold;

+  border-radius: 5px;
+  -moz-border-radius: 5px;

 }
 
 .left_menu td {
 }
 
 .left_menu td {


@@ -165,9 +156,9 @@ body {
 }
 
 .left_menu ul {
 }
 
 .left_menu ul {

-  /*list-style: none;*/
-  padding-left: 10px;
+  padding-left: 0px;

   margin: 0px;
   margin: 0px;

+  list-style-type: none;

 }
 
 .left_menu li {
 }
 
 .left_menu li {


@@ -179,121 +170,109 @@ body {
   margin: 2px 8px 0px 0px;
 }
 
   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;
+  left: 0px;

   line-height: 1.2em;
   text-align: left;
   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;
+  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%;
   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
 {
 
 #tabnav
 {


@@ -303,6 +282,7 @@ body {
   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,6 +290,7 @@ body {
   display: inline;
   list-style-type: none;
 }
   display: inline;
   list-style-type: none;
 }

+

 #tabnav a, #tabnav a:link, #tabnav a:visited 
 {
   float: left;
 #tabnav a, #tabnav a:link, #tabnav a:visited 
 {
   float: left;


@@ -322,137 +303,112 @@ body {
   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 {
+  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;
   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 {
+#permalink {
+  z-index: 10000;

   position: absolute;
   position: absolute;

-  right: 21px;
-  line-height: 22px;
-  vertical-align: bottom;
-}
-
-.optionalbox form {
-  margin: 0px;
-  padding: 0px;
-}
-
-#search_field form {
-  width: 100%;
-}
-
-#search_field input[type="text"] {
-  width: 116px;
+  bottom: 15px;
+  right: 15px;
+  font-size: smaller;
+  text-align: right;

 }
 
 }
 

-#search_field input[type="submit"] {
-  width: 26px;
-}
+/* Rules for edit menu */

 
 

-.search_form {
-  height: 16px;
-  padding-bottom: 6px;
-}
-
-.rsssmall {
-  position: relative;
-  top: 4px;
+#editmenu {
+  display: none;
+  z-index: 10000;
+  position: absolute;
+  background-color: #ffffff;
+  border: 1px solid black;

 }
 
 }
 

-.button {
+#editmenu ul {

   margin-top: 10px;
   margin-bottom: 10px;
   margin-top: 10px;
   margin-bottom: 10px;

+  padding-left: 10px;
+  padding-right: 10px;

 }
 
 }
 

-#controls img
-{
-  z-index: 9999;
+#editmenu li {
+  list-style-type: none;

 }
 
 }
 

-#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 */

 
 

-#map {
-  position: absolute;
-  border: 1px solid black;
-  margin: 0px; 
-  padding: 0px;
-  left: 0px;
-  right: 2px;
-  top: 0px;
-  bottom: 0px;
+#attribution {
+  display: none;

 }
 
 }
 

+/* Rules for the popout map sidebar */
+

 #sidebar {
   display: none;
   position: absolute;
 #sidebar {
   display: none;
   position: absolute;


@@ -486,6 +442,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,112 +501,267 @@ 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; 
+  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;
+#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-right: 5px;

   margin-bottom: 5px;
 }
 
   margin-bottom: 5px;
 }
 

-.olControlAttribution {
-  display: none !important;
+/* 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;

 }
 
 }
 

-/* inbox and messaging stuff */
-.inbox-row-unread .inbox-subject {
-       font-weight: bold;
+#changeset_list .date {
+  white-space: nowrap;

 }
 
 }
 

-/* rails error field stuff */
+#changeset_list .user {
+  white-space: nowrap;
+}

 
 

-.fieldWithErrors {
-  padding: 2px;
-  background-color: red;
-  display: table;
+#changeset_list .area {
+  white-space: nowrap;

 }
 
 }
 

-#error {
-  border: 1px solid red;
-  padding: 7px;
-  background-color: #fff0f0;
-  margin-bottom: 20px;
+/* Rules for the data browser */
+
+#browse_navigation {
+  float: right;
+  width: 250px;
+  text-align: center;
+  margin-left: 10px;

 }
 
 }
 

-#warning {
-  border: 1px solid orange;
-  padding: 7px;
-  background-color: #fff6f0;
-  margin-bottom: 20px;
+#browse_map {
+  float: right;
+  width: 250px;
+  text-align: right;
+  margin-left: 10px;

 }
 
 }
 

-#notice {
-  border: 1px solid green;
-  padding: 7px;
-  background-color: #f0fff0;
-  margin-bottom: 20px;
+#browse_map #small_map {
+  width: 250px;
+  height: 300px;
+  border: solid 1px black;

 }
 
 }
 

-#errorExplanation {
-  width: 400px;
-  border: 2px solid red;
-  padding: 7px;
-  padding-bottom: 12px;
-  margin-bottom: 20px;
-  background-color: #f0f0f0;
+#browse_map_changeset {
+  float: right;
+  width: 100%;
+  text-align: right;
+  margin-left: 10px;

 }
 
 }
 

-#errorExplanation h2 {
+#browse_map_changeset #small_map {
+  width: 100%;
+  height: 315px;
+  border: solid 1px black;
+}
+
+/* Rules for the trace list shown by the traces tab etc */
+
+#trace_list {
+  font-size: small;

   text-align: left;
   text-align: left;

-  font-weight: bold;
-  padding: 5px 5px 5px 15px;
+  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;
+/* 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 {
+  float: right;
+  margin-top: 10px;

 }
 
 }
 

-input[type="text"], input[type="password"], textarea {
-  border: 1px solid black;
+/* Rules for the login page */
+
+#login_wrapper div {
+  margin: 5px;
+  padding: 15px;
+  border-radius: 15px;
+  -moz-border-radius: 15px;

 }
 
 }
 

-input[type="submit"] {
+#login_wrapper input[type=submit] {
+  float: right;
+}
+
+#login_login {
+  background-color: #f5f5ff;
+  border: 1px solid #f3f3ff;
+  border-radius: 15px;
+  -moz-border-radius: 15px;
+}
+
+#login_login h1 {
+  margin-top: 5px;
+}
+
+#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: 80%;
+  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: 80%;
+  margin-bottom: 3em;
+}
+
+div#slim_content form#termsForm {
+  width: auto;
+}
+
+form#termsForm div#buttons {
+  float: right;
+}
+
+form#termsForm input#agree {
+  margin-left: 50px;
+}
+
+/* Rules for the account settings page */
+

 #accountForm td {
   padding-bottom: 10px;
 }
 #accountForm td {
   padding-bottom: 10px;
 }


@@ -612,12 +770,6 @@ input[type="submit"] {
   padding-bottom: 0px;
 }
 
   padding-bottom: 0px;
 }
 

-.fieldName {
-       text-align:right;
-       font-weight:bold;
-}
-
-

 .nohome .location {
   display: none;
 }
 .nohome .location {
   display: none;
 }


@@ -630,85 +782,127 @@ input[type="submit"] {
   display: inline !important;
 }
 
   display: inline !important;
 }
 

-.minorNote {
-       font-size:0.8em;
+/* Rules for the user map */
+
+.user_map .olControlPanZoomBar {
+  display: none;

 }
 
 }
 

-.nowrap {
-  white-space: nowrap;
+.user_map .olControlPanZoom {
+  display: block;

 }
 
 }
 

-#map #popup p {
-  margin: 0px;
-  padding: 2px;
+/* 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;

 }
 
 }
 

-#permalink {
-  z-index:10000;
-  position:absolute;
-  bottom:15px;
-  right:15px;
-  font-size:smaller;
-  text-align: right;
+/* Rules for message in/out box page */
+
+#messages {
+  border: 1px solid #ccc;

 }
 
 }
 

-#attribution {
-  display: none;
+.inbox-row-unread .inbox-subject {
+  font-weight: bold;

 }
 
 }
 

-.export_heading {
-  margin: 0px;
-  padding: 3px 6px;
-  border: 1px solid #ccc;
-  background: #ddd;
+/* 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_bounds {
-  width: 100%;
-  text-align: center;
+#warning {
+  border: 1px solid orange;
+  padding: 7px;
+  background-color: #fff6f0;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;

 }
 
 }
 

-.export_bound {
-  margin: 5px;
+#notice {
+  border: 1px solid green;
+  padding: 7px;
+  background-color: #f0fff0;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  -moz-border-radius: 5px;

 }
 
 }
 

-.export_details {
-  padding: 2px 6px;
+/* Rules for highlighting fields with rails validation errors */
+
+.fieldWithErrors {
+  padding: 2px;
+  background-color: red;
+  display: table;

 }
 
 }
 

-#export_osm {
-  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_mapnik {
-  display: none;
+#errorExplanation h2 {
+  text-align: left;
+  font-weight: bold;
+  padding: 5px 5px 5px 15px;
+  font-size: 12px;
+  margin: -7px;
+  background-color: #c00;
+  color: #fff;

 }
 
 }
 

-#export_osmarender {
-  display: none;
+#errorExplanation p {
+  color: #333;
+  margin-bottom: 0px;
+  padding: 5px;

 }
 
 }
 

-.export_hint {
-  padding: 0px 12px;
-  font-style: italic;
+#errorExplanation ul li {
+  font-size: 12px;
+  list-style: square;

 }
 
 }
 

-.export_buttons {
-  width: 100%;
-  text-align: center;
+/* Rules for forms */
+
+.fieldName {
+  text-align: right;
+  font-weight: bold;

 }
 
 }
 

-#noscript {
-  z-index: 20000000;
-  position: absolute;
-  top: 15px;
-  left: 15px
+.minorNote {
+  font-size: 0.8em;

 }
 
 }
 

-abbr.geo {
-  border-bottom: none;
+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 +914,32 @@ 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;
+}