/* Styles common to large and small screens */ /* Default rules for the body of every page */ body { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 14px; line-height: 20px; color: #222; background-color: #fff; margin: 0px; padding: 0px; text-align: left; } body.slim { background-color: #f0f0f0; } /* Rules for links */ a { color: #00f; text-decoration: none; } a:hover { text-decoration: underline; } /* Rules for horizontal lines */ hr { border: none; background-color: #ccc; color: #ccc; height: 1px; } /* Default rules for headings */ h2 { margin: 5px 0; font-size: 25px; line-height: 30px; } /* Rules for the whole left sidebar, including the logo */ #left { position: absolute; top: 30px; bottom: 0; width: 185px; font-size: 11px; line-height: 12px; border-right: 1px solid #ccc; } /* Rules for the OpenStreetMap logo in the top left corner */ #logo { display: block; width: 170px; min-width: 170px; padding: 5px; text-align: center; margin: auto; } #logo img { border: 0px; } #logo h1 { font-size: 18px; line-height: 20px; text-align: center; margin: 0px; } #logo h2 { font-size: 10px; line-height: 15px; margin: 0px; } /* Rules for the site name */ #small-title { display: none; } #small-title img { border: 0px; } /* Rules for the introductory text displayed in the left sidebar to new users */ .sidebar-copy { padding: 5px 10px; } .sidebar-copy p { margin: 5px 0; } .sidebar-copy.intro { margin-top: -1px; border-top: 1px solid #ccc; } /* * Rules for alert boxes shown in the left sidebar when important * information needs to be conveyed such as when the site is * undergoing maintenance. */ .sidebar-alert { padding: 4px 5px 4px 5px; border-top: 1px solid #ccc; margin-top: 4px; margin-bottom: -4px; background: #e00; font-size: 13px; font-weight: bold; line-height: 17px; p { margin: 5px; } } /* * 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. */ .sidebar-notice { padding: 4px 5px 4px 5px; border-top: 1px solid #ccc; margin-top: 4px; margin-bottom: -4px; background: #ea0; font-size: 13px; line-height: 17px; p { margin: 5px; } } /* Rules for the menu displayed in the left sidebar */ .left_menu { left: 0px; margin: 0; padding: 5px 10px; line-height: 15px; font-size: 12px; list-style-type: none; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } .left_menu ul { padding: 0; margin: 0; } .left_menu li { list-style-type: none; padding: 0; margin: 0; } .left_menu h4 { padding: 5px 0 5px 0; font-size: 12px; margin: 0; } .left_menu li:last-child h4 { padding-top: 0; } /* Rules for SOTM advert */ #sotm { width: 165px; margin: 10px; padding: 0px; border: 0px; background: #fff; } #sotm img { width: 165px; } /* * 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. */ .optionalbox { left: 0px; padding: 5px 10px; margin: 5px 0; text-align: left; } .optionalbox h1 { font-size: 14px; font-weight: bold; line-height: 20px; margin: 0px; vertical-align: bottom; } /* Rules for the search box */ .whereami { } #search_field form { width: 165px; margin: 0px; padding: 0px; } #search_field { position: relative; } #search_field input[type="text"] { width: 165px; font-size: 14px; line-height: 15px; height: 25px; padding: 2px 0px 2px 5px; box-shadow: inset #DDD 0px 1px 3px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } #search_field input[type="text"]:focus { outline: none; border: 1px solid #000; } #search_field input[type="submit"] { width: 15px; height: 15px; border: 0px; text-indent: -1000px; overflow: hidden; text-transform: capitalize; padding-left: 0px; padding-right: 0px; background: image-url("sprite.png"); position: absolute; top: 5px; right: 4px; cursor: pointer; } .search_help { margin: 5px 0 0 0; } .deemphasize { color: #999; } .deemphasize a { color: #7092FF; } /* Rules for donation request box */ .donate { display: block; position: relative; width: 153px; margin: 10px 10px 0px 10px; padding: 5px; border: 1px solid #AED1A0; background: #cbeea7; line-height: 20px; text-align: center; font-size: 14px; border-radius: 2px; -moz-border-radius: 2px; color: #222; } .donate:hover { background: #9ed485; text-decoration: none; } .donate p { text-indent: 20px; margin: 0; } .donate .donate-icon { width: 15px; height: 15px; border: 0px; padding-left: 0px; padding-right: 0px; background: image-url("sprite.png") 0 -30px no-repeat; position: absolute; top: 8px; left: 17px; } /* Rules for Creative Commons logo button */ #cclogo { margin-top: 10px; margin-bottom: 10px; } /* Rules for tabbed navigation bar */ #top-bar { position: absolute; z-index: 10000; top: 0; left: 185px; right: 0; height: 29px; border-bottom: 1px solid #ccc; background: white; } #tabnav { padding: 0; margin: 0; overflow:hidden; } #tabnav li { margin: 0px; padding: 0px; display: inline; list-style-type: none; } #tabnav a, #tabnav a:link, #tabnav a:visited { float: left; background: #fff; font-size: 14px; line-height: 19px; font-weight: bold; padding: 5px 10px; margin-right: 1px; text-decoration: none; color: #333; -webkit-transition: color 200ms ease-in; -moz-transition: color 200ms ease-in; -o-transition: color 200ms ease-in; transition: color 200ms ease-in; } body.site-index #tabnav a#viewanchor, body.site-edit #tabnav a#editanchor, body.changeset-list #tabnav a#historyanchor, body.site-export #tabnav a#exportanchor { border-bottom: 1px solid #aaa; background: #9ed485; color: #000; } #tabnav a:link:hover, #tabnav a:visited:hover { text-decoration:underline; } #tabnav a:link.disabled, #tabnav a:visited.disabled, #tabnav a:link:hover.disabled, #tabnav a:visited:hover.disabled { color: #ccc; cursor: default; } #tabnav a:link.disabled:hover, #tabnav a:visited.disabled:hover, #tabnav a:link:hover.disabled:hover, #tabnav a:visited:hover.disabled:hover { text-decoration: none; } .count-number { padding: 2px 5px; border-radius: 3px; background: #eee; margin: 0 2px; font-size: 11px; color: #333; } /* Rules for greeting bar in the top right corner */ #greeting { float: right; height: 28px; margin: 0px; padding-right: 10px; font-size: 13px; line-height: 28px; } .greeting-bar-unread { font-weight: bold; } /* Rules for the message shown in place of the map when javascript is disabled */ #noscript { z-index: 20000000; position: absolute; top: 15px; left: 15px; } /* Rules for Leaflet maps */ #map { margin: 0px; border: 0px; padding: 0px; } #permalink { z-index: 10000; position: absolute; bottom: 0px; right: 0px; padding: 5px; background:#fff; text-align: right; font-size: 12px; } #permalink a { padding: 5px; } #permalink a.disabled { color: #ccc; cursor: default; text-decoration: none; } .site-index .leaflet-top, .site-export .leaflet-top { top: 40px !important; .leaflet-control { margin-top: 0px !important; } } .site-index #map .olControlScaleLine, .site-export #map .olControlScaleLine { left: 10px !important; } .leaflet-popup-scrolled { padding-right: 20px; border-bottom: 0px !important; border-top: 0px !important; } /* Rules for edit menu */ .menuicon { padding: 5px; &:hover { background: #eee; text-decoration: none !important; } } .menu { display: none; z-index: 10000; position: absolute; background-color: #ffffff; border: 1px solid #cccccc; border-top: 0px; } .menu ul { margin: 0px; padding: 0px; } .menu li { padding: 2px 5px; margin: 0px; list-style-type: none; border-top: 1px solid #eee; white-space: nowrap; } /* Rules for attribution text under the main map shown on printouts */ #attribution { display: none; } .attribution_license { text-align: left; } .attribution_notice { text-align: center; } .attribution_project { text-align: right; } /* Rules for the popout map sidebar */ #sidebar { display: none; position: absolute; margin: 30px 0px 0px 0px; padding: 0px; border-right: 1px solid #ccc; width: 30%; top: 0px; bottom: 0px; left: 0px; } #sidebar #sidebar_content { overflow: auto; position: absolute; font-size: 13px; line-height: 15px; top: 29px; bottom: 0px; left: 0px; right: 0px; } #sidebar .sidebar_title { margin: 0px; padding: 3px 6px 4px 6px; height: 29px; font-size: 14px; line-height: 15px; background: #ccc; } #sidebar #sidebar_title { text-align: left; } #sidebar #sidebar_close { text-align: right; } /* 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 img { display: block; margin-left: auto; margin-right: auto; } #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: 2px 5px; border-bottom: 1px solid #ccc; font-weight: bold; } .search_results_entry { margin: 0px; padding: 2px 5px; } .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; border: 1px solid #ccc; background: #ddd; } .browse_details { margin: 0px; padding: 0px 6px; } /* Rules for export information which appears in the popout sidebar */ .export_heading { margin: 0px; padding: 2px 5px; border-bottom: 1px solid #ccc; font-weight: bold; } .export_bounds { width: 100%; text-align: center; } .export_bound { margin: 5px; } .export_details { padding: 2px 6px; } #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: 20px; margin: 30px 0px 0px 185px; border-left: 1px solid #ccc; text-align: left; } .site-edit #content, .site-index #content, .site-export #content { position: fixed; margin-top: 0px; left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 0px; } .site-edit #content { top: 30px; } #slim_container { width: 100%; } #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-right: 5px; } /* Rules for text content pages */ .wide-table { width: 100%; } /* Rules for the home page */ .site-index #map { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } .site-export #map { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } /* Rules for the edit page */ .site-edit #map { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; } /* Rules for the changeset list shown by the history tab etc */ #changeset_list_container { position: relative; } #changeset_list { width: 50%; font-size: small; border-collapse: collapse; border-width: 0px; margin-top: 1px; margin-bottom: 1px; text-align: left; } #changeset_list td { vertical-align: top; padding: 3px; } #changeset_list .date { white-space: nowrap; } #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; float: right; top: 0px; bottom: 0px; right: 0px; width: 49%; min-height: 400px; border: solid 1px black; } /* Rules for the data browser */ #browse_navigation { float: right; width: 250px; margin-left: 10px; text-align: center; } table.browse_details th { white-space: nowrap; } td.browse_comments { padding: 0px; } td.browse_comments table { border-collapse: collapse; } td.browse_comments table td { padding-bottom: 10px; } td.browse_comments table td span.by { font-size: small; color: #999999; } #browse_map { float: right; width: 250px; text-align: right; margin-left: 10px; } #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; text-align: right; } #trace_list .trace_summary { font-size: 12px; color: gray; } #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; } #user_list_actions { float: right; margin-top: 10px; } /* Rules for the diary list */ .diary_entry-list img.user_image { float: right; } .diary_entry-list img.user_thumbnail { float: right; } /* Rules for the diary entry view */ .diary_entry-view img.user_image { float: right; } .diary_entry-view img.user_thumbnail { float: right; } /* Rules for the new diary entry page */ .diary_entry div#map { position: relative; width: 90%; height: 400px; border: 1px solid #ccc; display: none; } /* 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; 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; } form#termsForm div#buttons { float: right; } form#termsForm input#agree { margin-left: 50px; } 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 { margin-top: 20px; } #accountForm td { padding-bottom: 10px; } #accountForm .user_map { position: relative; width: 500px; height: 400px; border: 1px solid #ccc; } #accountForm td.accountImage { img { vertical-align: top; margin-top: 3px; } table { display: inline-block; td { padding-bottom: 0px; } } } .nohome .location { display: none; } #homerow .message { display: none; } .nohome .message { display: inline !important; } #accountForm input[type=submit] { margin-top: 15px; } /* Rules for the user view */ .user-view img.user_image { float: right; } .user-view .user_map { float: right; position: relative; width: 400px; height: 400px; border: 1px solid #ccc; } .user-view .user_map p#no_home_location { position: absolute; top: 0px; bottom: 0px; width: 90%; height: 30%; margin: auto 5% } /* Rules for the user map */ .user_map .leaflet-control-pan, .user_map .leaflet-control-zoomslider { display: none; } .user_map .leaflet-control-zoom { display: block; } /* Rules for user popups on maps */ .user_popup { min-width: 200px; } .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 { width: 100%; border-collapse: collapse; border-spacing: 0px; border-width: 0px; } .messages tbody tr { border-top: 1px solid #ccc; } .messages .inbox-row { background: #eee; } .messages tr td, .messages tr th { padding: 0px 5px; } .inbox-row .inbox-mark-read { display: none; } .info-line { border-bottom: 1px solid #ccc; padding: 5px 0px 4px 0px; } .info-line form, .info-line form div { display: inline; } .info-line .user_thumbnail_tiny { vertical-align: middle; } .right { float: right; } .inbox-row-unread .inbox-mark-unread { display: none; } /* 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; } #warning { border: 1px solid orange; padding: 7px; background-color: #fff6f0; margin-bottom: 20px; border-radius: 5px; -moz-border-radius: 5px; } #notice { border: 1px solid green; padding: 7px; background-color: #f0fff0; margin-bottom: 20px; border-radius: 5px; -moz-border-radius: 5px; } /* Rules for highlighting fields with rails validation errors */ .field_with_errors { padding: 2px; background-color: red; display: table; } /* Rules for rails validation error boxes */ #errorExplanation { width: 400px; border: 2px solid red; padding: 7px; padding-bottom: 12px; margin-bottom: 20px; background-color: #f0f0f0; } #errorExplanation h2 { font-weight: bold; font-size: 12px; padding: 5px 5px 5px 15px; margin: -7px; background-color: #c00; color: #fff; text-align: left; } #errorExplanation p { color: #333; margin-bottom: 0px; padding: 5px; } #errorExplanation ul li { font-size: 12px; list-style: square; } /* Rules for forms */ .fieldName { vertical-align: top; font-weight: bold; font-size: 12px; line-height: 20px; text-align: right; } .submitButton { text-align: right; } .minorNote { font-size: 0.8em; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { border: 1px solid #ccc; } input.openid_url { background: image-url('openid_input.png') repeat-y left white; padding-left: 16px; } /* Rules for user images */ img.user_image { max-width: 100px; max-height: 100px; border: 1px solid #ccc; } img.user_thumbnail { max-width: 50px; max-height: 100px; border: 1px solid #ccc; } img.user_thumbnail_tiny { max-width: 25px; max-height: 25px; border: 1px solid #ccc; } /* 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; } /* Rules for rich text editors */ .richtext_container { white-space: nowrap; .richtext_content { display: inline-block; vertical-align: top; .richtext_preview { display: inline-block; margin-top: 1px; margin-bottom: 1px; border: 4px solid #eee; background-color: #eee; white-space: normal; &.loading { background-image: image-url("loading.gif"); background-repeat: no-repeat; background-position: center; } > :first-child { margin-top: 0px; } } } .richtext_help { display: inline-block; vertical-align: top; background-color: #ddd; margin-left: 15px; padding: 5px 10px 10px 10px; font-size: 12px; p { margin: 0px; } th { vertical-align: top; text-align: left; padding: 0px 15px 0px 0px !important; } td { text-align: left; font-family: fixed; line-height: 16px; padding: 0px !important; } input.richtext_doedit { margin-top: 5px !important; margin-right: 10px !important; } input.richtext_dopreview { margin-top: 5px !important; margin-left: 10px !important; } } } /* Rules for the notes interface */ .note .buttons { margin-top: 5px; text-align: right; }