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 */
221 .sidebar-copy.intro {
222 border-top: 1px solid #ccc;
226 * Rules for alert boxes shown in the left sidebar when important
227 * information needs to be conveyed such as when the site is
228 * undergoing maintenance.
233 border-top: 1px solid #ccc;
245 * Rules for notice boxes shown in the left sidebar when important, but
246 * non-critical information needs to be conveyed such as notices about
252 border-top: 1px solid #ccc;
262 /* Rules for the menu displayed in the left sidebar */
270 list-style-type: none;
271 border-bottom: 1px solid #ccc;
272 border-top: 1px solid #ccc;
283 list-style-type: none;
289 padding: 5px 0 5px 0;
299 /* Rules for SOTM advert */
313 * Rules for "optional boxes" which appear in the left sidebar on
314 * certain pages. Current users are the seach box on the main page
315 * and the tag cloud on the traces pages.
325 /* Rules for the search box */
340 padding: 2px 0px 2px 5px;
341 box-shadow: inset #DDD 0px 1px 3px;
344 input[type="text"]:focus {
346 border: 1px solid #000;
349 input[type="submit"] {
355 text-indent: -1000px;
357 background: image-url("sprite.png") 0 0 no-repeat;
369 /* Utility for de-emphasizing content */
378 /* Rules for donation request box */
384 border: 1px solid #AED1A0;
391 margin: 10px 10px 0px 10px;
395 text-decoration: none;
400 background: image-url("sprite.png") 0 -29px no-repeat;
404 /* Rules for Creative Commons logo button */
411 /* Rules for tabbed navigation bar */
417 border-bottom: 1px solid #ccc;
423 .site-index #top-bar,
424 .site-export #top-bar {
437 a, a:link, a:visited {
441 text-decoration: none;
445 -webkit-transition: color 200ms ease-in;
446 -moz-transition: color 200ms ease-in;
447 -o-transition: color 200ms ease-in;
448 transition: color 200ms ease-in;
452 .site-index #tabnav a#viewanchor,
453 .site-edit #tabnav a#editanchor,
454 .changeset-list #tabnav a#historyanchor,
455 .site-export #tabnav a#exportanchor {
456 border-bottom: 1px solid #aaa;
461 #tabnav a:link:hover, #tabnav a:visited:hover {
462 text-decoration: underline;
465 #tabnav a:link.disabled,
466 #tabnav a:visited.disabled,
467 #tabnav a:link:hover.disabled,
468 #tabnav a:visited:hover.disabled {
472 text-decoration: none;
476 /* Utility for styling notification numbers */
487 /* Rules for greeting bar in the top right corner */
495 .greeting-bar-unread {
499 /* Rules for the message shown in place of the map when javascript is disabled */
508 /* Rules for Leaflet maps */
510 .leaflet-control-attribution {
514 text-decoration: none;
517 ul.secondary-actions {
527 .site-index .leaflet-top,
528 .site-export .leaflet-top {
529 top: 10px !important;
531 margin-top: 0px !important;
535 .site-index #map .olControlScaleLine,
536 .site-export #map .olControlScaleLine {
537 left: 10px !important;
540 .leaflet-popup-scrolled {
542 border-bottom: 0px !important;
543 border-top: 0px !important;
546 .leaflet-popup-content-wrapper {
547 border-radius: 4px !important;
548 -webkit-border-radius: 4px !important;
551 /* Rules for edit menu */
556 display: inline-block;
558 text-decoration: none !important;
566 background-color: #ffffff;
567 border: 1px solid #cccccc;
574 border-top: 1px solid #eee;
579 /* Rules for attribution text under the main map shown on printouts */
585 .attribution_license,
586 .attribution_project {
590 .attribution_notice {
594 /* Rules for the popout map sidebar */
603 border-right: 1px solid #ccc;
610 border-bottom: 1px solid #ccc;
640 padding: 0 20px 10px 20px;
643 border-bottom: 1px solid #ddd;
647 /* Rules for the map key which appears in the popout sidebar */
651 .mapkey-table-key img {
657 padding: 0 5px 5px 5px;
661 /* Rules for search results which appear in the popout sidebar */
668 .search_results_entry {
677 .search_results_entry .search_searching {
684 ul.results-list li { border-bottom: 1px solid #ccc; }
686 .search_results_error {
690 /* Rules for data browser information which appears in the popout sidebar */
694 .browse_show_list.button {
719 /* Rules for export information which appears in the popout sidebar */
725 .export_area_inputs {
733 .export_details input[type="text"]#export_html_text {
737 #sidebar #marker_inputs li:last-child {
752 /* Rules for the main content area */
760 .site-index #content,
761 .site-export #content {
764 top: 30px; bottom: 0;
765 left: 184px; right: 0;
766 border-left: 1px solid #ccc;
771 border-left: 1px solid #ccc;
775 .site-edit #content {
792 #slim_container_content {
794 background-color: #FFFFFF;
798 -moz-border-radius: 25px;
799 border: 1px solid #e6e6e6;
818 vertical-align: middle;
841 /* Rules for small maps in content areas */
847 border: 1px solid #ccc;
852 .content_map #small_map {
858 /* Rules for the home page */
869 /* Rules for the edit page */
880 /* Rules for the changeset list shown by the history tab etc */
887 border-top: 1px solid #ccc;
889 border-bottom: 1px solid #ccc;
897 border-left: 1px solid #ccc;
903 #changeset_list_map_wrapper {
911 #changeset_list_map_wrapper.scrolled {
915 #changeset_list_map {
921 border: 1px solid #ccc;
924 #changeset_list_map_wrapper.scrolled #changeset_list_map {
928 /* Rules for the data browser */
931 border-top: 1px solid #ccc;
938 background-color: #ffe0cc;
947 display: inline-block;
957 display: inline-block;
968 text-overflow: ellipsis;
979 #browse_map .geolink {
983 #browse_map .secondary-actions {
987 /* Rules for the trace list shown by the traces tab etc */
1007 .trace_identifiable {
1020 /* Rules for the user profile page */
1024 .userinformation-inner {
1039 .admin-user-info small {
1040 margin-bottom: 10px;
1047 border-bottom: 1px solid #ccc;
1048 padding-bottom: 20px;
1051 margin-bottom: 10px;
1060 .activity-details p {
1065 #friends-container .contact-activity ul {
1070 p#no_home_location {
1079 /* Rules for the user map */
1081 .content_map .leaflet-popup-content {
1086 /* Rules for user popups on maps */
1093 padding-bottom: 5px;
1100 img.user_thumbnail {
1106 /* Rules for the user list */
1113 vertical-align: middle;
1122 #user_list_actions {
1127 /* Rules for the diary list page */
1129 .diary_entry-list img.user_thumbnail {
1138 border-top: 1px solid #ccc;
1153 ul.secondary-actions { display: inline-block;}
1156 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1160 #content .post_heading {
1161 margin-bottom: 20px;
1164 margin-bottom: 10px;
1169 /* Rules for the diary entry page */
1176 border: 1px solid #ccc;
1178 margin-bottom: 20px;
1181 border-top: 1px solid #ccc;
1190 border-top: 1px dashed #ccc;
1195 border-top: 1px solid #ccc;
1198 margin-bottom: 10px;
1207 .diary_entry-view img.user_thumbnail {
1211 /* Rules for the login page */
1213 #login_openid_buttons {
1217 #login_openid_buttons li {
1222 /* Rules for the account confirmation page */
1226 border: 1px solid #ccc;
1228 margin-bottom: 20px;
1242 margin: 20px auto inherit auto;
1247 input[type=submit] {
1258 margin-bottom: 20px;
1260 #contributorGuidance {
1261 background-color: #f4f4ff;
1263 -moz-border-radius: 4px;
1270 /* Rules for the account settings page */
1272 #accountForm .user_map {
1276 border: 1px solid #ccc;
1279 .accountImage-options {
1281 display: inline-block;
1293 display: inline !important;
1296 .content_map.settings_map {
1301 /* Rules for message in/out box page */
1305 border: 1px solid #ddd;
1308 border-top: 1px solid #ccc;
1312 background: #f8f8ff;
1329 .inbox-row .inbox-mark-read {
1334 margin-bottom: 20px;
1335 padding: 5px 0px 4px 0px;
1336 border-bottom: 1px solid #ccc;
1343 .info-line .user_thumbnail_tiny {
1344 vertical-align: middle;
1347 .inbox-row-unread .inbox-mark-unread {
1351 /* Rules for "flash" notice boxes shown at the top of the content area */
1356 background-color: #ff7070;
1359 background-color: #ffe0cc;
1362 background-color: #CBEEA7;
1366 /* Rules for highlighting fields with rails validation errors */
1368 .field_with_errors {
1370 background-color: #ff7070;
1374 /* Rules for rails validation error boxes */
1378 border: 2px solid #ff7070;
1380 margin-bottom: 20px;
1381 background-color: #f0f0f0;
1384 padding: 5px 5px 5px 15px;
1387 background-color: #c00;
1405 /* Rules for forms */
1409 margin-bottom: 20px;
1420 margin-bottom: 10px;
1422 input[name=remember_me] {
1427 #remember_me_openid {
1432 input[type="email"],
1434 input[type="password"],
1436 border: 1px solid #ccc;
1439 /* Rules for user images */
1444 border: 1px solid #ccc;
1445 margin-bottom: 20px;
1450 img.user_thumbnail {
1453 border: 1px solid #ccc;
1457 img.user_thumbnail_tiny {
1460 border: 1px solid #ccc;
1463 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1466 white-space: nowrap;
1469 /* Rules for geo microformats */
1472 border-bottom: none;
1475 /* Rules for RSS buttons */
1482 /* General styles for action lists / subnavs / pager navs */
1484 ul.secondary-actions {
1489 display: inline-block;
1496 border-left: 1px solid #ccc;
1509 /* Utility for managing inner content areas */
1511 .inner22 { padding: 20px;}
1513 .inner12 { padding: 10px 20px;}
1515 .inner02 { padding: 0 20px;}
1517 /* Utility for general button styles */
1519 input[type="button"],
1520 input[type="submit"],
1521 input[type="reset"],
1528 margin-bottom: 10px;
1530 background: #7092FF;
1533 -moz-border-radius: 2px;
1536 text-decoration: none;
1544 background-color: #cbeea7;
1546 background-color: #9ed485;
1550 /* Rules for doing distinct colour of alternate table rows */
1554 background: #F4F4FF;
1562 /* Rules for OpenID logo */
1565 vertical-align: text-bottom;
1569 /* Rules for rich text */
1573 padding-bottom: 10px;
1574 border-bottom: 1px dashed #cccccc;
1575 margin-bottom: 10px;
1592 background: #e8e8e8;
1598 background: #e8e8e8;
1608 background-color: #f4f4ff;
1615 border-left: 20px solid #f4f4ff;
1624 margin-bottom: 20px;
1633 list-style: decimal;
1637 .diary_post .richtext {
1641 .comments .richtext {
1646 /* Rules for rich text editors */
1648 .richtext_container {
1650 display: inline-block;
1651 vertical-align: top;
1654 display: inline-block;
1656 background-color: #f4f4ff;
1660 background-image: image-url("loading.gif");
1661 background-repeat: no-repeat;
1662 background-position: center;
1672 display: inline-block;
1673 vertical-align: top;
1675 background-color: #f8f8ff;
1685 border-bottom: 1px solid #ccc;
1687 padding-bottom: 5px;
1690 li h4, li span, li p {
1691 display: inline-block;
1692 vertical-align: top;
1705 white-space: nowrap;
1708 input.richtext_doedit,
1709 input.richtext_dopreview {
1714 .buttons input[type="submit"] {
1715 display: inline-block;
1720 .buttons input:first-child {
1721 border-radius:2px 0 0 2px;
1724 .buttons input:last-child {
1725 border-radius:0 2px 2px 0;
1729 /* Rules for the user notes list */
1733 background-color: #eeeeee;
1745 /* Rules for the notes interface */
1753 margin-bottom: 10px;
1766 background: image-url("sprite.png") 0 -45px no-repeat;
1774 .permalink:hover span {
1780 background-color: #ffe0cc;
1782 margin-bottom: 10px;
1807 * Rules for the iD editor
1814 /* Rules for rotating sidebar ads */
1820 border-bottom: 1px solid #ccc;