X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/0166abe88a2c082500f208d6f6be1343e6d0bedd..03f733c4f4091dc53e391aa74a020681af98a4ff:/public/stylesheets/common.css

diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index b05dcc3d9..4efbd928f 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,85 @@ 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
+
+#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 {
-  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 +385,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,51 +444,169 @@ 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;
+}
+
+#changeset_list .area {
+  white-space: nowrap;
+}
+
+#changeset_list.th {
+  font-weight: bold;
+}
+
+/* Rules for the trace list shown by the traces tab etc */
+
+#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 the user map */
+
+.user_map .olControlPanZoomBar {
+  display: none;
+}
+
+.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;
+}
+
+/* Rules for message in/out box page */
+
+#messages {
+  border: 1px solid #ccc;
 }
 
-/* inbox and messaging stuff */
 .inbox-row-unread .inbox-subject {
-	font-weight: bold;
+  font-weight: bold;
 }
 
-/* rails error field stuff */
+/* Rules for "flash" notice boxes shown at the top of the content area */
 
-.fieldWithErrors {
-  padding: 2px;
-  background-color: red;
-  display: table;
+#error {
+  border: 1px solid red;
+  padding: 7px;
+  background-color: #fff0f0;
+  margin-bottom: 20px;
+}
+
+#warning {
+  border: 1px solid orange;
+  padding: 7px;
+  background-color: #fff6f0;
+  margin-bottom: 20px;
 }
 
 #notice {
@@ -552,6 +616,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;
@@ -582,107 +656,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;
-}
+/* 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;
+  font-size: 0.8em;
 }
 
-.nowrap {
-  white-space: nowrap;
+input[type="text"], input[type="password"], textarea {
+  border: 1px solid black;
 }
 
-#map #popup p {
-  margin: 0px;
-  padding: 2px;
+input[type="submit"] {
+  border: 1px solid black;
 }
 
-#permalink {
-  z-index:10000;
-  position:absolute;
-  bottom:15px;
-  right:15px;
-  font-size:smaller;
-  text-align: right;
-}
+/* Rules for user images */
 
-#attribution {
-  display: none;
+img.user_image {
+  max-width: 100px;
+  max-height: 100px;
+  border: 1px solid black;
 }
 
-.export_heading {
-  margin: 0px;
-  padding: 3px 6px;
-  border: 1px solid #ccc;
-  background: #ddd;
+img.user_thumbnail {
+  max-width: 50px;
+  max-height: 100px;
+  border: 1px solid black;
 }
 
-.export_bounds {
-  width: 100%;
-  text-align: center;
-}
+/* Rule for "nowrap" class that can be applied to anything to stop wrapping */
 
-.export_bound {
-  margin: 5px;
+.nowrap {
+  white-space: nowrap;
 }
 
-.export_details {
-  padding: 2px 6px;
-}
+/* Rules for geo microformats */
 
-#export_osm {
-  display: none;
+abbr.geo {
+  border-bottom: none;
 }
 
-#export_mapnik {
-  display: none;
-}
+/* Rules for RSS buttons */
 
-#export_osmarender {
-  display: none;
+.rsssmall {
+  position: relative;
+  top: 4px;
 }
 
-.export_hint {
-  padding: 0px 12px;
-  font-style: italic;
-}
+/* Rules for doing distinct colour of alternate table rows */
 
-.export_buttons {
-  width: 100%;
-  text-align: center;
+.table0 { 
+  background: #f6f6f6;
 }
 
-#noscript {
-  z-index: 20000000;
-  position: absolute;
-  top: 15px;
-  left: 15px
+.table1 { 
+  background: #fff;
 }