-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;
}
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;
-}
-
-#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;
- 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;
text-align: Left;
font-size: 14px;
font-weight: bold;
+ border-radius: 5px;
+ -moz-border-radius: 5px;
}
.left_menu td {
}
.left_menu ul {
- /*list-style: none;*/
- padding-left: 10px;
+ padding-left: 0px;
margin: 0px;
+ list-style-type: none;
}
.left_menu li {
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
{
padding-top: 5px;
background: url('../images/tab_bottom.gif') repeat-x bottom;
}
+
#tabnav li
{
margin: 0px;
display: inline;
list-style-type: none;
}
+
#tabnav a, #tabnav a:link, #tabnav a:visited
{
float: left;
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;
-}
-
-.whereami {
- 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;
+.olControlAttribution {
+ display: none !important;
}
-#search_field input[type="submit"] {
- width: 26px;
+#permalink {
+ z-index: 10000;
+ position: absolute;
+ 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;
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;
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;
+ height: 650px;
+ background-color: #FFFFFF;
+ margin: 10px auto;
+ padding: 3px;
+ border-radius: 25px;
+ -moz-border-radius: 25px;
+ border: 1px solid #e6e6e6;
+}
+
+#slim_content {
+ margin: 10px;
+ position: absolute;
+ top: 90px;
+ max-width: 50em;
+}
+
+#slim_header {
+ margin: 10px;
+}
+
+#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, #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;
+#changeset_list.th {
+ font-weight: bold;
}
-#warning {
- border: 1px solid orange;
- padding: 7px;
- background-color: #fff6f0;
- margin-bottom: 20px;
+/* Rules for the data browser */
+
+#browse_navigation {
+ float: right;
+ width: 250px;
+ text-align: center;
+ margin-left: 10px;
}
-#notice {
- border: 1px solid green;
- padding: 7px;
- background-color: #f0fff0;
- margin-bottom: 20px;
+#browse_map {
+ float: right;
+ width: 250px;
+ text-align: right;
+ margin-left: 10px;
}
-#errorExplanation {
- width: 400px;
- border: 2px solid red;
- padding: 7px;
- padding-bottom: 12px;
- margin-bottom: 20px;
- background-color: #f0f0f0;
+#browse_map #small_map {
+ width: 250px;
+ height: 300px;
+ border: solid 1px black;
}
-#errorExplanation h2 {
+/* 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 {
+ float: left; /* ensures the child divs are the same size, and only as wide as they need to be */
}
-input[type="submit"] {
+#login_wrapper div {
+ margin: 5px;
+ padding: 15px;
+ border-radius: 15px;
+ -moz-border-radius: 15px;
+}
+
+#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: 60%;
}
-#accountForm td {
- padding-bottom:10px;
+div#contributorTerms p#first {
+ margin-top: 0px;
}
-.fieldName {
- text-align:right;
- font-weight:bold;
+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%;
}
+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;
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;
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;
+}
projects / rails.git / blobdiff