12 /* Styles common to large and small screens */
14 /* Minimal CSS reset */
16 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input {
23 fieldset,img { border: 0; }
25 legend { color: #000; }
27 sup { vertical-align: text-top; }
29 sub { vertical-align: text-bottom; }
32 border-collapse: collapse;
36 li { list-style: none; }
41 body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; }
44 border-bottom: .1em dotted;
48 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */
60 /* Default rules for the body of every page */
63 -moz-box-sizing: border-box;
64 -webkit-box-sizing: border-box;
65 box-sizing: border-box;
69 font-family: 'Helvetica Neue',Arial,sans-serif;
70 font-size: $typeheight;
73 background-color: #fff;
80 background-color: #f0f0f0;
84 margin-top: $lineheight/2;
85 margin-bottom: $lineheight;
100 margin-top: $lineheight/2;
101 margin-bottom: $lineheight;
105 font-size: $typeheight;
106 margin-top: $lineheight/2;
107 margin-bottom: $lineheight/2;
113 margin-bottom: $lineheight;
136 margin: 0 0 $lineheight/2 0;
140 vertical-align: middle;
141 margin-right: $lineheight/4;
144 /* Rules for icons */
147 display:inline-block;
151 background:transparent image-url("sprite.png") no-repeat 0 0;
160 .icon.search { background-position: 0 0; }
161 .icon.donate { background-position: -20px 0; }
162 .icon.zoomin { background-position: -40px 0; }
163 .icon.zoomout { background-position: -60px 0; }
164 .icon.geolocate { background-position: -80px 0; }
165 .icon.layers { background-position: -100px 0; }
166 .icon.key { background-position: -120px 0; }
167 .icon.share { background-position: -140px 0; }
168 .icon.clipboard { background-position: -160px 0; }
169 .icon.link { background-position: -180px 0; }
170 .icon.close { background-position: -200px 0; }
171 .icon.check { background-position: -220px 0; }
172 .icon.note { background-position: -240px 0; }
174 /* Rules for links */
178 text-decoration: none;
180 text-decoration: underline;
184 /* Rules for horizontal lines */
188 background-color: #ccc;
193 /* General styles for tables */
197 margin-bottom: $lineheight;
200 padding: $lineheight/4;
201 line-height: $lineheight;
208 vertical-align: middle;
212 /* Rules for the whole left sidebar, including the logo */
221 border-right: 1px solid #ccc;
224 /* Rules for the OpenStreetMap logo in the top left corner */
230 padding: $lineheight $lineheight/4;
243 font-size: $lineheight/2;
248 /* Rules for the site name */
254 /* Rules for the introductory text displayed in the left sidebar to new users */
257 padding: $lineheight/4 $lineheight/2;
259 margin: $lineheight/4 0;
262 .sidebar-copy.intro {
263 border-top: 1px solid #ccc;
267 * Rules for alert boxes shown in the left sidebar when important
268 * information needs to be conveyed such as when the site is
269 * undergoing maintenance.
273 padding: $lineheight/4;
274 border-top: 1px solid #ccc;
281 margin: $lineheight/4;
286 * Rules for notice boxes shown in the left sidebar when important, but
287 * non-critical information needs to be conveyed such as notices about
292 padding: $lineheight/4;
293 border-top: 1px solid #ccc;
299 margin: $lineheight/4;
303 /* Rules for the menu displayed in the left sidebar */
308 padding: $lineheight/4 $lineheight/2;
311 list-style-type: none;
312 border-bottom: 1px solid #ccc;
313 border-top: 1px solid #ccc;
315 margin: $lineheight/2 0px;
324 list-style-type: none;
330 padding: $lineheight/4 0 $lineheight/4 0;
340 /* Rules for SOTM advert */
344 margin: $lineheight/2;
354 * Rules for "optional boxes" which appear in the left sidebar on
355 * certain pages. Current users are the seach box on the main page
356 * and the tag cloud on the traces pages.
361 padding: $lineheight/4 $lineheight/2;
362 margin: $lineheight/4 0;
366 /* Rules for the search box */
378 font-size: $typeheight;
381 padding: 2px 0px 2px $lineheight/4;
382 box-shadow: inset #DDD 0px 1px 3px;
385 input[type="text"]:focus {
387 border: 1px solid #000;
390 input[type="submit"] {
397 text-indent: -1000px;
399 background: image-url("sprite.png") 0 0 no-repeat;
402 right: $lineheight/4;
408 margin: $lineheight/4 0 0 0;
411 /* Utility for de-emphasizing content */
420 /* Rules for donation request box */
425 padding: $lineheight/4;
426 border: 1px solid #AED1A0;
428 font-size: $typeheight;
433 margin: $lineheight/2 $lineheight/2 0px $lineheight/2;
437 text-decoration: none;
441 /* Rules for Creative Commons logo button */
444 margin: $lineheight/2 0;
448 /* Rules for tabbed navigation bar */
454 border-bottom: 1px solid #ccc;
460 .site-index #top-bar,
461 .site-export #top-bar {
474 a, a:link, a:visited {
477 padding: 3px $lineheight/2;
478 text-decoration: none;
482 -webkit-transition: color 200ms ease-in;
483 -moz-transition: color 200ms ease-in;
484 -o-transition: color 200ms ease-in;
485 transition: color 200ms ease-in;
489 .site-index #tabnav a#viewanchor,
490 .site-edit #tabnav a#editanchor,
491 .changeset-list #tabnav a#historyanchor,
492 .site-export #tabnav a#exportanchor {
493 border-bottom: 1px solid #aaa;
498 #tabnav a:link:hover, #tabnav a:visited:hover {
499 text-decoration: underline;
502 #tabnav a:link.disabled,
503 #tabnav a:visited.disabled,
504 #tabnav a:link:hover.disabled,
505 #tabnav a:visited:hover.disabled {
509 text-decoration: none;
513 /* Utility for styling notification numbers */
516 padding: 2px $lineheight/4;
524 /* Rules for greeting bar in the top right corner */
529 margin-right: $lineheight/4;
532 .greeting-bar-unread {
536 /* Rules for the message shown in place of the map when javascript is disabled */
545 /* Rules for Leaflet maps */
551 background-color: white;
552 background-color: rgba(255,255,255,.8);
557 .leaflet-control a:hover {
558 background-color: white;
561 .leaflet-control a .icon {
576 border-top: 1px solid #868e85;
588 background-color: #868e85;
592 background-color: #68c879;
597 border-radius: 0px 0px 4px 4px;
601 border-radius: 4px 4px 0px 0px;
609 .leaflet-control-attribution {
613 text-decoration: none;
616 ul.secondary-actions {
618 margin-right: $lineheight/4;
626 .site-index .leaflet-top,
627 .site-export .leaflet-top {
628 top: $lineheight/2 !important;
630 margin-top: 0px !important;
634 .site-index #map .olControlScaleLine,
635 .site-export #map .olControlScaleLine {
636 left: $lineheight/2 !important;
639 .leaflet-popup-scrolled {
640 padding-right: $lineheight;
641 border-bottom: 0px !important;
642 border-top: 0px !important;
645 .leaflet-popup-content-wrapper {
646 border-radius: 4px !important;
647 -webkit-border-radius: 4px !important;
650 /* Rules for edit menu */
653 padding: 0 $lineheight/4;
655 display: inline-block;
657 text-decoration: none !important;
665 background-color: #ffffff;
666 border: 1px solid $keyline;
672 padding: 2px $lineheight/4;
673 border-top: 1px solid #eee;
678 /* Rules for attribution text under the main map shown on printouts */
684 .attribution_license,
685 .attribution_project {
689 .attribution_notice {
693 /* Rules for the popout map sidebar */
702 border-right: 1px solid $keyline;
706 padding: $lineheight/2 $lineheight;
708 background: $offwhite;
709 border-bottom: 1px solid #ccc;
717 border-bottom: 1px solid #ccc;
720 margin-bottom: $lineheight/4;
742 padding: 0 $lineheight $lineheight/2 $lineheight;
743 margin-top: $lineheight/2;
745 border-bottom: 1px solid #ddd;
749 /* Rules for the map key which appears in the popout sidebar */
752 padding: $lineheight $lineheight 0 $lineheight;
753 .mapkey-table-key img {
759 padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
763 /* Rules for search results which appear in the popout sidebar */
766 margin-top: $lineheight/4;
767 margin-bottom: $lineheight/4;
770 .search_results_entry {
779 .search_results_entry .search_searching {
781 margin: $lineheight auto;
786 ul.results-list li { border-bottom: 1px solid #ccc; }
788 .search_results_error {
792 /* Rules for data browser information which appears in the popout sidebar */
796 .browse_show_list.button {
821 /* Rules for export information which appears in the popout sidebar */
827 .export_area_inputs {
828 margin-bottom: $lineheight/2;
836 margin: $lineheight/4;
839 .export_details input[type="text"]#export_html_text {
843 #sidebar #marker_inputs li:last-child {
844 margin-bottom: $lineheight/2;
853 /* Rules for the main content area */
856 padding: $lineheight;
861 .site-index #content,
862 .site-export #content {
865 top: 30px; bottom: 0;
866 left: 184px; right: 0;
867 border-left: 1px solid #ccc;
872 border-left: 1px solid #ccc;
876 .site-edit #content {
893 #slim_container_content {
895 background-color: #FFFFFF;
896 margin: $lineheight/2 auto;
899 -moz-border-radius: 25px;
900 border: 1px solid #e6e6e6;
904 margin: $lineheight/2;
914 margin: 30px $lineheight/2;
917 margin-right: $lineheight/4;
919 vertical-align: middle;
920 margin-bottom: $lineheight/4;
921 margin-right: $lineheight/4;
927 padding: $lineheight;
928 background: $offwhite;
930 margin-bottom: $lineheight/2;
937 margin-top: $lineheight/2;
942 /* Rules for small maps in content areas */
948 border: 1px solid #ccc;
949 margin-bottom: $lineheight;
953 .content_map #small_map {
956 margin-bottom: $lineheight;
959 /* Rules for the home page */
970 /* Rules for the edit page */
981 /* Rules for the changeset list shown by the history tab etc */
986 padding: $lineheight/2 0;
988 border-top: 1px solid #ccc;
990 border-bottom: 1px solid #ccc;
998 border-left: 1px solid #ccc;
999 padding-left: $lineheight/4;
1000 margin-right: $lineheight/4;
1004 #changeset_list_map_wrapper {
1012 #changeset_list_map_wrapper.scrolled {
1016 #changeset_list_map {
1018 bottom: $lineheight;
1022 border: 1px solid #ccc;
1025 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1029 /* Rules for the data browser */
1032 border-top: 1px solid #ccc;
1033 margin-top: $lineheight/2;
1034 padding-top: $lineheight/2;
1039 background-color: #ffe0cc;
1045 margin-bottom: $lineheight/4;
1047 p, ul, .bbox, .geo {
1048 display: inline-block;
1049 vertical-align: top;
1058 display: inline-block;
1059 vertical-align: top;
1067 padding: $lineheight/4 0;
1069 text-overflow: ellipsis;
1080 #browse_map .geolink {
1084 #browse_map .secondary-actions {
1085 margin-bottom: $lineheight/2;
1088 /* Rules for the trace list shown by the traces tab etc */
1091 font-size: $lineheight/2;
1108 .trace_identifiable {
1121 /* Rules for the user profile page */
1126 .userinformation-inner {
1141 .admin-user-info small {
1142 margin-bottom: $lineheight/2;
1144 margin-right: $lineheight;
1149 border-bottom: 1px solid #ccc;
1150 padding-bottom: $lineheight;
1153 margin-bottom: $lineheight/2;
1158 margin-top: $lineheight;
1162 .activity-details p {
1167 #friends-container .contact-activity ul {
1172 p#no_home_location {
1173 margin: $lineheight;
1176 margin-top: $lineheight/4;
1181 /* Rules for the user map */
1183 .content_map .leaflet-popup-content {
1184 margin: $lineheight/2;
1188 /* Rules for user popups on maps */
1194 margin-top: 0 0 0 60px;
1197 img.user_thumbnail {
1199 margin: 0 $lineheight/2 0 0;
1203 /* Rules for the user list */
1206 font-size: $lineheight/2;
1210 vertical-align: middle;
1219 #user_list_actions {
1221 margin-top: $lineheight/2;
1224 /* Rules for the diary list page */
1226 .diary_entry-list img.user_thumbnail {
1233 margin-top: $lineheight/2;
1234 padding-top: $lineheight;
1235 border-top: 1px solid #ccc;
1250 ul.secondary-actions { display: inline-block;}
1253 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1257 #content .post_heading {
1258 margin-bottom: $lineheight;
1261 margin-bottom: $lineheight/2;
1266 /* Rules for the diary entry page */
1273 border: 1px solid #ccc;
1275 margin-bottom: $lineheight;
1278 border-top: 1px solid #ccc;
1279 padding-top: $lineheight;
1280 margin-top: $lineheight/2;
1286 margin-top: $lineheight/2;
1287 border-top: 1px dashed #ccc;
1288 padding-top: $lineheight/2;
1290 margin-top: $lineheight;
1291 padding-top: $lineheight;
1292 border-top: 1px solid #ccc;
1295 margin-bottom: $lineheight/2;
1304 .diary_entry-view img.user_thumbnail {
1308 /* Rules for the login page */
1310 #login_openid_buttons {
1314 #login_openid_buttons li {
1316 padding: $lineheight/4 $lineheight/2;
1319 /* Rules for the account confirmation page */
1323 border: 1px solid #ccc;
1324 padding: $lineheight;
1325 margin-bottom: $lineheight;
1339 margin: $lineheight auto inherit auto;
1344 input[type=submit] {
1350 background: darken($grey, $hovercolor);
1355 margin-bottom: $lineheight;
1357 #contributorGuidance {
1358 background-color: $offwhite;
1360 -moz-border-radius: 4px;
1367 /* Rules for the account settings page */
1369 #accountForm .user_map {
1373 border: 1px solid #ccc;
1376 #accountForm .user_image {
1380 #accountForm #user_image {
1384 #accountForm ul.accountImage-options {
1397 display: inline !important;
1400 .content_map.settings_map {
1405 /* Rules for the oauth settings page */
1407 .oauth_clients .buttons .oauth-edit {
1408 border-radius: 2px 0 0 2px;
1411 .oauth_clients .buttons .oauth-delete {
1412 border-radius: 0 2px 2px 0;
1415 /* Rules for messages pages */
1419 border: 1px solid #ddd;
1421 input[type="submit"] {
1425 border-top: 1px solid #ccc;
1429 background: #f8f8ff;
1442 padding: $lineheight/4;
1453 border-right: 1px solid $keyline;
1457 .inbox-row .inbox-mark-read {
1462 margin-bottom: $lineheight;
1463 padding: $lineheight/4 0px 4px 0px;
1464 border-bottom: 1px solid #ccc;
1471 .info-line .user_thumbnail_tiny {
1472 vertical-align: middle;
1481 .inbox-row-unread .inbox-mark-unread {
1485 .message-read .message-buttons {
1486 margin-top: $lineheight;
1487 padding-top: $lineheight;
1488 border-top: 1px solid $keyline;
1491 .message-read .buttons .mark-unread-button {
1495 /* Rules for "flash" notice boxes shown at the top of the content area */
1498 padding: $lineheight;
1500 background-color: #ff7070;
1503 background-color: #ffe0cc;
1506 background-color: #CBEEA7;
1510 /* Rules for highlighting fields with rails validation errors */
1512 .field_with_errors {
1514 background-color: #ff7070;
1518 /* Rules for rails validation error boxes */
1522 border: 2px solid #ff7070;
1523 padding: 0 $lineheight/2;
1524 margin-bottom: $lineheight;
1525 background-color: #f0f0f0;
1528 margin: 0 -10px 10px -10px;
1529 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1532 background-color: #c00;
1540 padding: $lineheight/4;
1544 padding-left: $lineheight;
1553 /* Rules for forms */
1557 margin-bottom: $lineheight;
1559 label.standard-label {
1561 margin-bottom: $lineheight/4;
1562 font-size: $typeheight;
1566 label.standard-label.secondary {
1567 display: inline-block;
1568 font-weight: normal;
1571 font-weight: normal;
1578 margin-top: $lineheight;
1579 padding-top: $lineheight;
1580 border-top: 1px solid $keyline;
1583 margin-bottom: $lineheight/2;
1591 input[type="checkbox"],
1592 input[type="radio"] {
1598 #remember_me_openid {
1602 input[type="checkbox"],
1603 input[type="radio"] {
1608 input[type="email"],
1610 input[type="password"],
1612 border: 1px solid #ccc;
1621 height: 100% !important;
1624 /* Rules for user images */
1629 border: 1px solid #ccc;
1630 margin-bottom: $lineheight;
1632 margin-right: $lineheight;
1635 img.user_thumbnail {
1638 border: 1px solid #ccc;
1639 margin-right: $lineheight;
1642 img.user_thumbnail_tiny {
1645 border: 1px solid #ccc;
1648 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1651 white-space: nowrap;
1654 /* Rules for geo microformats */
1657 border-bottom: none;
1660 /* Rules for RSS buttons */
1667 /* General styles for action lists / subnavs / pager navs */
1669 ul.secondary-actions {
1674 display: inline-block;
1681 border-left: 1px solid #ccc;
1682 padding-left: $lineheight/4;
1683 margin-right: $lineheight/4;
1694 /* Utility for managing inner content areas */
1696 .inner22 { padding: $lineheight;}
1698 .inner12 { padding: $lineheight/2 $lineheight;}
1700 .inner11 { padding: $lineheight/2;}
1702 .inner02 { padding: 0 $lineheight;}
1704 /* Utility for general button styles */
1706 input[type="button"],
1707 input[type="submit"],
1708 input[type="reset"],
1712 display: inline-block;
1714 padding: $lineheight/4 $lineheight/2;
1716 margin: 0 0 $lineheight/2 0;
1721 -moz-border-radius: 2px;
1723 background: darken($blue, $hovercolor);
1724 text-decoration: none;
1727 background: $lightblue;
1729 background: darken($lightblue, $hovercolor);
1733 background: $lightblue;
1742 input[type="submit"],
1743 input[type="button"],
1744 input[type="reset"],
1746 box-sizing: border-box;
1752 border-right:1px solid white;
1755 .button:first-child {
1756 border-radius:2px 0 0 2px;
1759 .button:last-child {
1760 border-radius:0 2px 2px 0;
1761 border-right-width: 0;
1765 *[value="Hide"] + input:last-child,
1766 *[value="Hide"] + .button:last-child {
1768 border-right-width: 0;
1770 /* if a 3-button set has a hidden middle button */
1771 *[value="Hide"] + input:nth-child(3),
1772 *[value="Hide"] + .button:nth-child(3) {
1773 border-radius:0 2px 2px 0;
1774 border-right-width: 0;
1776 /* if a 3-button set starts with a hidden button */
1777 *[value="Hide"] + input:nth-child(2):not(:last-child),
1778 *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1779 border-radius:2px 0 0 2px;
1780 border-right-width: 1px solid white;
1784 /* Rules for doing distinct colour of alternate table rows */
1788 background: $offwhite;
1796 /* Rules for OpenID logo */
1799 vertical-align: text-bottom;
1803 /* Rules for rich text */
1808 padding-bottom: $lineheight/2;
1809 border-bottom: 1px dashed #cccccc;
1810 margin-bottom: $lineheight/2;
1822 font-size: $typeheight;
1827 background: #e8e8e8;
1833 background: #e8e8e8;
1842 padding: $lineheight;
1843 background-color: $offwhite;
1850 border-left: $lineheight solid $offwhite;
1851 padding-left: $lineheight;
1858 padding-left: $lineheight;
1859 margin-bottom: $lineheight;
1860 margin-left: $lineheight;
1868 list-style: decimal;
1872 .diary_post .richtext {
1873 margin-top: $lineheight;
1876 .comments .richtext {
1881 /* Rules for rich text editors */
1883 .richtext_container {
1884 margin-bottom: $lineheight;
1888 display: inline-block;
1889 vertical-align: top;
1892 display: inline-block;
1893 padding: $lineheight;
1894 background-color: $offwhite;
1898 background-image: image-url("loading.gif");
1899 background-repeat: no-repeat;
1900 background-position: center;
1910 display: inline-block;
1911 vertical-align: top;
1913 background-color: #f8f8ff;
1914 padding: $lineheight/2;
1922 border-bottom: 1px solid #ccc;
1923 margin-bottom: $lineheight/4;
1924 padding-bottom: $lineheight/4;
1927 li h4, li span, li p {
1928 display: inline-block;
1929 vertical-align: top;
1940 margin-left: $lineheight/2;
1941 margin-bottom: $lineheight/4;
1942 white-space: nowrap;
1947 /* Rules for the user notes list */
1951 background-color: #eeeeee;
1963 /* Rules for the notes interface */
1965 .leaflet-popup-content .note {
1966 padding-top: $lineheight/2;
1969 .leaflet-popup-content .note {
1971 margin-bottom: $lineheight/2;
1975 margin-top: $lineheight/2;
1981 left: $lineheight/4;
1984 background: image-url("sprite.png") 0 -45px no-repeat;
1989 padding-left: $lineheight;
1992 .permalink:hover span {
1998 background-color: #ffe0cc;
2000 margin-bottom: $lineheight/2;
2019 margin-top: $lineheight/4;
2025 * Rules for the iD editor
2032 /* Rules for rotating sidebar ads */
2038 border-bottom: 1px solid #ccc;