/* 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; } 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: 0px; width: 185px; font-size: 11px; line-height: 12px; } /* Rules for the OpenStreetMap logo in the top left corner */ #logo { width: 170px; min-width: 170px; padding: 5px; text-align: center; margin: 25px 0 5px 0; } #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; } /* Rules for the introductory text displayed in the left sidebar to new users */ .sidebar-copy { padding: 0px 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 { padding: 5px 10px; margin: 4px 0; border-top: 1px solid #ccc; line-height: 20px; font-size: 14px; font-weight: bold; } .left_menu h1 { font-style: normal; font-size: 15px; } .left_menu ul { margin: 0px; list-style-type: none; } .left_menu li { margin: 0px; padding: 0px; } /* submenus */ .left_menu ul li ul { font-weight: normal; line-height: 15px; font-size: 12px; } .left_menu a { color: #000; } /* 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 { padding: 5px 10px; margin: 4px 0; } .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: 100%; margin: 0px; padding: 0px; } #search_field { position:relative; } #search_field input[type="text"] { width: 165px; padding: 5px; font-size: 14px; line-height: 15px; height: 25px; 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:0; text-indent:-1000px; padding-left: 0px; padding-right: 0px; background: url(sprite.png); position:absolute; right:2px; top:5px; cursor:pointer; } .search_help { margin:0; } .deemphasize { color: #999; } .deemphasize a { color: #7092FF; } /* Rules for donation request box */ .donate { width: 153px; margin: 10px 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; } .donate a { color:#222; } /* Rules for Creative Commons logo button */ #cclogo { margin-top: 10px; margin-bottom: 10px; } /* Rules for tabbed navigation bar */ #top-bar { border-bottom: 1px solid #ccc; height: 29px; } #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 { background: #fff; font-size: 14px; line-height: 19px; font-weight: bold; padding: 5px 10px; text-decoration: none; color: #333; } #tabnav a:link.active, #tabnav a:visited.active { 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 { height: 28px; margin: 0px; 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; } /* Rules for OpenLayers maps */ #map { margin: 0px; padding: 0px; } .olControlAttribution { bottom: 15px !important; left: 0px !important; right: 0px !important; text-align: center; } #permalink { z-index: 10000; position: absolute; bottom: 0px; right: 0px; padding: 5px; background:#fff; text-align: right; font-size: 12px; } #permalink a { padding: 5px; } /* 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_notice { text-align: center; } /* Rules for the popout map sidebar */ #sidebar { display: none; position: absolute; margin: 0px; padding: 0px; width: 30%; top: 0px; bottom: 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: #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: 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: 10px; margin: 0px; position: absolute; bottom: 0px; } #content.site_index, #content.site_edit, #content.site_export { border: 0px; padding: 0px; } #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; } /* 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; } /* 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; } #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; top: 0px; bottom: 0px; width: 49%; min-height: 400px; border: solid 1px black; } /* Rules for the data browser */ #browse_navigation { width: 250px; text-align: center; } table.browse_details th { white-space: nowrap; } #browse_map { width: 250px; } #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; } #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 { margin-top: 10px; } /* 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; } 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; } #accountImage 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 .user_map { 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 .olControlSimplePanZoom { display: none; } .user_map .olControlZoom { 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; } .user_popup img.user_thumbnail { float: left; } /* Rules for message in/out box page */ #messages { border: 1px solid #ccc; } .inbox-row-unread .inbox-subject { font-weight: bold; } .inbox-row .inbox-mark-read { display: none; } .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; margin: -7px; background-color: #c00; color: #fff; } #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; } .minorNote { font-size: 0.8em; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { border: 1px solid #ccc; } /* Rules for user images */ img.user_image { max-width: 100px; max-height: 100px; border: 1px solid black; } img.user_thumbnail { max-width: 50px; 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; } /* 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; padding: 5px 10px 10px 10px; font-size: 12px; p { margin: 0px; } th { vertical-align: top; } td { font-family: fixed; line-height: 16px; padding: 0px !important; } input.richtext_doedit { margin-top: 5px !important; } input.richtext_dopreview { margin-top: 5px !important; } } }