1 /* Styles common to large and small screens */
3 /* Minimal CSS reset */
5 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p {
12 fieldset,img { border: 0; }
14 legend { color: #000; }
16 sup { vertical-align: text-top; }
18 sub { vertical-align: text-bottom; }
21 border-collapse: collapse;
25 li { list-style: none; }
30 body { font: 14px/20px "Helvetica Neue",Arial,sans-serif; }
33 border-bottom: .1em dotted;
37 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */
49 /* Default rules for the body of every page */
52 -moz-box-sizing: border-box;
53 -webkit-box-sizing: border-box;
54 box-sizing: border-box;
58 font-family: 'Helvetica Neue',Arial,sans-serif;
62 background-color: #fff;
69 background-color: #f0f0f0;
129 vertical-align: middle;
133 /* Rules for links */
137 text-decoration: none;
139 text-decoration: underline;
143 /* Rules for horizontal lines */
147 background-color: #ccc;
152 /* General styles for tables */
167 vertical-align: middle;
171 /* Rules for the whole left sidebar, including the logo */
180 border-right: 1px solid #ccc;
183 /* Rules for the OpenStreetMap logo in the top left corner */
207 /* Rules for the site name */
213 /* Rules for the introductory text displayed in the left sidebar to new users */
223 .sidebar-copy.intro {
225 border-top: 1px solid #ccc;
229 * Rules for alert boxes shown in the left sidebar when important
230 * information needs to be conveyed such as when the site is
231 * undergoing maintenance.
236 border-top: 1px solid #ccc;
248 * Rules for notice boxes shown in the left sidebar when important, but
249 * non-critical information needs to be conveyed such as notices about
255 border-top: 1px solid #ccc;
265 /* Rules for the menu displayed in the left sidebar */
273 list-style-type: none;
274 border-bottom: 1px solid #ccc;
275 border-top: 1px solid #ccc;
288 list-style-type: none;
294 padding: 5px 0 5px 0;
299 .left_menu li:last-child h4 {
303 /* Rules for SOTM advert */
318 * Rules for "optional boxes" which appear in the left sidebar on
319 * certain pages. Current users are the seach box on the main page
320 * and the tag cloud on the traces pages.
330 /* Rules for the search box */
340 #search_field input[type="text"] {
346 padding: 2px 0px 2px 5px;
347 box-shadow: inset #DDD 0px 1px 3px;
350 #search_field input[type="text"]:focus {
352 border: 1px solid #000;
355 #search_field input[type="submit"] {
361 text-indent: -1000px;
363 background: image-url("sprite.png") 0 0 no-repeat;
374 /* Utility for de-emphasizing content */
383 /* Rules for donation request box */
389 border: 1px solid #AED1A0;
396 margin: 10px 10px 0px 10px;
400 text-decoration: none;
405 background: image-url("sprite.png") 0 -29px no-repeat;
409 /* Rules for Creative Commons logo button */
416 /* Rules for tabbed navigation bar */
422 border-bottom: 1px solid #ccc;
428 .site-index #top-bar,
429 .site-export #top-bar {
445 #tabnav a, #tabnav a:link, #tabnav a:visited {
449 text-decoration: none;
453 -webkit-transition: color 200ms ease-in;
454 -moz-transition: color 200ms ease-in;
455 -o-transition: color 200ms ease-in;
456 transition: color 200ms ease-in;
459 .site-index #tabnav a#viewanchor,
460 .site-edit #tabnav a#editanchor,
461 .changeset-list #tabnav a#historyanchor,
462 .site-export #tabnav a#exportanchor {
463 border-bottom: 1px solid #aaa;
468 #tabnav a:link:hover, #tabnav a:visited:hover {
469 text-decoration: underline;
472 #tabnav a:link.disabled,
473 #tabnav a:visited.disabled,
474 #tabnav a:link:hover.disabled,
475 #tabnav a:visited:hover.disabled {
480 #tabnav a:link.disabled:hover,
481 #tabnav a:visited.disabled:hover,
482 #tabnav a:link:hover.disabled:hover,
483 #tabnav a:visited:hover.disabled:hover {
484 text-decoration: none;
487 /* Utility for styling notification numbers */
498 /* Rules for greeting bar in the top right corner */
506 .greeting-bar-unread {
510 /* Rules for the message shown in place of the map when javascript is disabled */
519 /* Rules for Leaflet maps */
521 .leaflet-control-attribution {
525 text-decoration: none;
528 ul.secondary-actions {
538 .site-index .leaflet-top,
539 .site-export .leaflet-top {
540 top: 10px !important;
542 margin-top: 0px !important;
546 .site-index #map .olControlScaleLine,
547 .site-export #map .olControlScaleLine {
548 left: 10px !important;
551 .leaflet-popup-scrolled {
553 border-bottom: 0px !important;
554 border-top: 0px !important;
557 .leaflet-popup-content-wrapper {
558 border-radius: 4px !important;
559 -webkit-border-radius: 4px !important;
562 /* Rules for edit menu */
567 display: inline-block;
569 text-decoration: none !important;
577 background-color: #ffffff;
578 border: 1px solid #cccccc;
588 border-top: 1px solid #eee;
592 /* Rules for attribution text under the main map shown on printouts */
598 .attribution_license,
599 .attribution_project {
603 .attribution_notice {
607 /* Rules for the popout map sidebar */
616 border-right: 1px solid #ccc;
623 border-bottom: 1px solid #ccc;
653 padding: 0 20px 10px 20px;
656 border-bottom: 1px solid #ddd;
660 /* Rules for the map key which appears in the popout sidebar */
666 #mapkey .mapkey-table-key img {
673 padding: 0 5px 5px 5px;
676 /* Rules for search results which appear in the popout sidebar */
683 .search_results_entry {
692 .search_results_entry .search_searching {
699 ul.results-list li { border-bottom: 1px solid #ccc; }
701 .search_results_error {
705 /* Rules for data browser information which appears in the popout sidebar */
709 .browse_show_list.button {
734 /* Rules for export information which appears in the popout sidebar */
740 .export_area_inputs {
748 .export_details input[type="text"]#export_html_text {
752 #sidebar #marker_inputs li:last-child {
767 /* Rules for the main content area */
775 .site-index #content,
776 .site-export #content {
779 top: 30px; bottom: 0;
780 left: 184px; right: 0;
781 border-left: 1px solid #ccc;
786 border-left: 1px solid #ccc;
790 .site-edit #content {
807 #slim_container_content {
809 background-color: #FFFFFF;
813 -moz-border-radius: 25px;
814 border: 1px solid #e6e6e6;
835 vertical-align: middle;
857 /* Rules for small maps in content areas */
863 border: 1px solid #ccc;
868 .content_map #small_map {
874 /* Rules for the home page */
885 /* Rules for the edit page */
896 /* Rules for the changeset list shown by the history tab etc */
903 border-top: 1px solid #ccc;
905 border-bottom: 1px solid #ccc;
913 border-left: 1px solid #ccc;
919 #changeset_list_map_wrapper {
927 #changeset_list_map_wrapper.scrolled {
931 #changeset_list_map {
937 border: 1px solid #ccc;
940 #changeset_list_map_wrapper.scrolled #changeset_list_map {
944 /* Rules for the data browser */
947 border-top: 1px solid #ccc;
954 background-color: #ffe0cc;
963 display: inline-block;
973 display: inline-block;
984 text-overflow: ellipsis;
995 #browse_map .geolink {
999 #browse_map .secondary-actions {
1000 margin-bottom: 10px;
1003 /* Rules for the trace list shown by the traces tab etc */
1011 #trace_list .trace_summary {
1016 #trace_list .trace_pending {
1020 #trace_list .trace_public {
1024 #trace_list .trace_identifiable {
1028 #trace_list .trace_trackable {
1032 #trace_list .trace_private {
1036 /* Rules for the user profile page */
1040 .userinformation-inner {
1055 .admin-user-info small {
1056 margin-bottom: 10px;
1063 border-bottom: 1px solid #ccc;
1064 padding-bottom: 20px;
1067 margin-bottom: 10px;
1076 .activity-details p {
1081 #friends-container .contact-activity ul {
1085 .user-view p#no_home_location {
1089 .user-view .user_thumbnail {
1094 /* Rules for the user map */
1096 .content_map .leaflet-popup-content {
1101 /* Rules for user popups on maps */
1109 padding-bottom: 3px;
1116 .user_popup img.user_thumbnail {
1121 /* Rules for user popups on maps */
1129 /* Rules for the user list */
1137 vertical-align: middle;
1145 #user_list_actions {
1150 /* Rules for the diary list page */
1152 .diary_entry-list img.user_thumbnail {
1161 border-top: 1px solid #ccc;
1176 ul.secondary-actions { display: inline-block;}
1179 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1183 #content .post_heading {
1184 margin-bottom: 20px;
1187 margin-bottom: 10px;
1192 /* Rules for the diary entry page */
1199 border: 1px solid #ccc;
1201 margin-bottom: 20px;
1204 border-top: 1px solid #ccc;
1213 border-top: 1px dashed #ccc;
1218 border-top: 1px solid #ccc;
1221 margin-bottom: 10px;
1230 .diary_entry-view img.user_thumbnail {
1234 /* Rules for the login page */
1236 #login_openid_buttons li {
1241 /* Rules for the account confirmation page */
1243 div#contributorTerms {
1244 border: 1px solid #ccc;
1246 margin-bottom: 20px;
1251 div#contributorTerms p#last {
1255 div#contributorTerms ol {
1259 div#contributorTerms img {
1261 margin: 20px auto inherit auto;
1264 form#termsForm div#buttons {
1268 form#termsForm input#agree {
1272 div#slim_content form#termsForm {
1276 p#contributorGuidance {
1277 background-color: #f4f4ff;
1279 -moz-border-radius: 4px;
1284 /* Rules for the account settings page */
1291 padding-bottom: 10px;
1294 #accountForm .user_map {
1298 border: 1px solid #ccc;
1301 .accountImage-options {
1303 display: inline-block;
1315 display: inline !important;
1318 #accountForm input[type=submit] {
1322 .content_map.settings_map {
1327 /* Rules for message in/out box page */
1331 border: 1px solid #ddd;
1334 .messages tbody tr {
1335 border-top: 1px solid #ccc;
1338 .messages .inbox-row {
1339 background: #f8f8ff;
1342 .messages .inbox-row-unread {
1355 .inbox-row .inbox-mark-read {
1360 margin-bottom: 20px;
1361 padding: 5px 0px 4px 0px;
1362 border-bottom: 1px solid #ccc;
1366 .info-line form div {
1370 .info-line .user_thumbnail_tiny {
1371 vertical-align: middle;
1374 .inbox-row-unread .inbox-mark-unread {
1378 /* Rules for "flash" notice boxes shown at the top of the content area */
1383 background-color: #ff7070;
1386 background-color: #ffe0cc;
1389 background-color: #CBEEA7;
1393 /* Rules for highlighting fields with rails validation errors */
1395 .field_with_errors {
1397 background-color: #ff7070;
1401 /* Rules for rails validation error boxes */
1405 border: 2px solid #ff7070;
1407 margin-bottom: 20px;
1408 background-color: #f0f0f0;
1411 #errorExplanation h2 {
1413 padding: 5px 5px 5px 15px;
1416 background-color: #c00;
1421 #errorExplanation p {
1427 #errorExplanation ul li {
1432 /* Rules for forms */
1439 vertical-align: top;
1442 line-height: 1.6666;
1455 input[type="email"],
1457 input[type="password"],
1459 border: 1px solid #ccc;
1462 /* Rules for user images */
1467 border: 1px solid #ccc;
1468 margin-bottom: 20px;
1473 img.user_thumbnail {
1476 border: 1px solid #ccc;
1480 img.user_thumbnail_tiny {
1483 border: 1px solid #ccc;
1486 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1489 white-space: nowrap;
1492 /* Rules for geo microformats */
1495 border-bottom: none;
1498 /* Rules for RSS buttons */
1505 /* General styles for action lists / subnavs / pager navs */
1507 ul.secondary-actions {
1512 display: inline-block;
1513 margin-bottom: 20px;
1520 border-left: 1px solid #ccc;
1533 /* Utility for managing inner content areas */
1535 .inner22 { padding: 20px;}
1537 .inner12 { padding: 10px 20px;}
1539 .inner02 { padding: 0 20px;}
1541 /* Utility for general button styles */
1547 margin-bottom: 10px;
1549 background: #7092FF;
1552 -moz-border-radius: 2px;
1555 text-decoration: none;
1563 background-color: #cbeea7;
1565 background-color: #9ed485;
1569 /* Rules for doing distinct colour of alternate table rows */
1573 background: #F4F4FF;
1581 /* Rules for OpenID logo */
1584 vertical-align: text-bottom;
1588 /* Rules for rich text */
1592 padding-bottom: 10px;
1593 border-bottom: 1px dashed #cccccc;
1594 margin-bottom: 10px;
1611 background: #e8e8e8;
1617 background-color: #f4f4ff;
1624 border-left: 20px solid #f4f4ff;
1633 margin-bottom: 20px;
1642 list-style: decimal;
1646 .diary_post .richtext {
1650 .comments .richtext {
1655 /* Rules for rich text editors */
1657 .richtext_container {
1659 display: inline-block;
1660 vertical-align: top;
1663 display: inline-block;
1665 background-color: #f4f4ff;
1669 background-image: image-url("loading.gif");
1670 background-repeat: no-repeat;
1671 background-position: center;
1681 display: inline-block;
1682 vertical-align: top;
1684 background-color: #f8f8ff;
1693 border-bottom: 1px solid #ccc;
1695 padding-bottom: 5px;
1698 li h4, li span, li p {
1699 display: inline-block;
1700 vertical-align: top;
1713 white-space: nowrap;
1716 input.richtext_doedit,
1717 input.richtext_dopreview {
1723 /* Rules for the user notes list */
1727 background-color: #eeeeee;
1739 /* Rules for the notes interface */
1747 margin-bottom: 10px;
1760 background: image-url("sprite.png") 0 -45px no-repeat;
1768 .permalink:hover span {
1774 background-color: #ffe0cc;
1776 margin-bottom: 10px;
1801 * Rules for the iD editor
1808 /* Rules for rotating sidebar ads */
1814 border-bottom: 1px solid #ccc;