X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/6ee7bc57f17fad6596d91a0b2fa3ca4ea51c2ac8..924d09229e9a34f167cf24ad17c94808d1711627:/public/stylesheets/common.css?ds=sidebyside

diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index 1d56b1464..1ea7a5bd2 100644
--- 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;
 }
@@ -7,142 +25,113 @@ 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;
-  top: -8px;
-  min-width: 150px;
+  top: 0px;
+  min-width: 170px;
 }
 
+/* Rules for the OpenStreetMap logo in the top left corner */
+
 #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;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
+
 #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;
-}
+/* 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;
-  margin: 10px;
+  padding: 5px;
+  margin: 5px;
   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 {
-  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-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 {
-  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-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 {
-  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;
@@ -150,6 +139,8 @@ body {
   text-align: Left;
   font-size: 14px;
   font-weight: bold;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
 }
 
 .left_menu td {
@@ -165,9 +156,9 @@ body {
 }
 
 .left_menu ul {
-  /*list-style: none;*/
-  padding-left: 10px;
+  padding-left: 0px;
   margin: 0px;
+  list-style-type: none;
 }
 
 .left_menu li {
@@ -179,121 +170,109 @@ 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: 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;
+  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%;
+  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
 {
@@ -303,6 +282,7 @@ body {
   padding-top: 5px;
   background: url('../images/tab_bottom.gif') repeat-x bottom;
 }
+
 #tabnav li
 {
   margin: 0px; 
@@ -310,6 +290,7 @@ body {
   display: inline;
   list-style-type: none;
 }
+
 #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-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:hover
+
+#tabnav a:link:hover, #tabnav a:visited:hover
 {
   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;
-  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;
-  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;
-}
-
-#search_field input[type="submit"] {
-  width: 26px;
+  bottom: 15px;
+  right: 15px;
+  font-size: smaller;
+  text-align: right;
 }
 
-.search_form {
-  height: 16px;
-  padding-bottom: 6px;
-}
+/* Rules for edit menu */
 
-.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;
+  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;
@@ -486,6 +442,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,121 +501,292 @@ 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;
+#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;
 }
 
-.olControlAttribution {
-  display: none !important;
+/* Rules for the changeset list shown by the history tab etc */
+
+#changeset_list_container {
+  position: relative;
 }
 
-/* inbox and messaging stuff */
-.inbox-row-unread .inbox-subject {
-	font-weight: bold;
+#changeset_list {
+  width: 50%;
+  font-size: small;
+  text-align: left;
+  border-collapse: collapse;
+  border-width: 0px;
+  margin-top: 1px;
+  margin-bottom: 1px;
 }
 
-/* rails error field stuff */
+#changeset_list td {
+  vertical-align: top;
+  padding: 3px;
+}
 
-.fieldWithErrors {
-  padding: 2px;
-  background-color: red;
-  display: table;
+#changeset_list .date {
+  white-space: nowrap;
 }
 
-#error {
-  border: 1px solid red;
-  padding: 7px;
-  background-color: #fff0f0;
-  margin-bottom: 20px;
+#changeset_list .user {
+  white-space: nowrap;
 }
 
-#warning {
-  border: 1px solid orange;
-  padding: 7px;
-  background-color: #fff6f0;
-  margin-bottom: 20px;
+#changeset_list .area {
+  white-space: nowrap;
 }
 
-#notice {
-  border: 1px solid green;
-  padding: 7px;
-  background-color: #f0fff0;
-  margin-bottom: 20px;
+#changeset_list .selected {
+  background-color: rgb(255, 255, 160);
+  background-color: rgba(255, 255, 85, 0.5);
 }
 
-#errorExplanation {
-  width: 400px;
-  border: 2px solid red;
-  padding: 7px;
-  padding-bottom: 12px;
-  margin-bottom: 20px;
-  background-color: #f0f0f0;
+#changeset_list_map {
+  float: right;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  width: 49%;
+  min-height: 400px;
+  border: solid 1px black;
 }
 
-#errorExplanation h2 {
+/* Rules for the data browser */
+
+#browse_navigation {
+  float: right;
+  width: 250px;
+  text-align: center;
+  margin-left: 10px;
+}
+
+table.browse_details th {
+  white-space: nowrap;
+}
+
+#browse_map {
+  float: right;
+  width: 250px;
+  text-align: right;
+  margin-left: 10px;
+}
+
+#browse_map #small_map {
+  width: 250px;
+  height: 300px;
+  border: solid 1px black;
+}
+
+/* Rules for the trace list shown by the traces tab etc */
+
+#trace_list {
+  font-size: small;
   text-align: left;
-  font-weight: bold;
-  padding: 5px 5px 5px 15px;
+  border-collapse: collapse;
+  border-width: 0px;
+}
+
+#trace_list .trace_summary {
   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;
-  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;
+  padding: 4px;
+  overflow: auto;
+  width: 80%;
+  height: 400px;
 }
 
-#accountForm td {
-	padding-bottom:10px;
+div#slim_content div#contributorTerms {
+  width: auto;
 }
 
-.fieldName {
-	text-align:right;
-	font-weight:bold;
+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;
+}
+
+#accountImage td {
+  padding-bottom: 0px;
+}
 
 .nohome .location {
   display: none;
@@ -626,85 +800,127 @@ input[type="submit"] {
   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;
@@ -716,3 +932,32 @@ img.user_thumbnail {
   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;
+}