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 .active .icon.geolocate { background-position: -80px -20px; }
166 .icon.layers { background-position: -100px 0; }
167 .icon.key { background-position: -120px 0; }
168 .icon.share { background-position: -140px 0; }
169 .icon.clipboard { background-position: -160px 0; }
170 .icon.link { background-position: -180px 0; }
171 .icon.close { background-position: -200px 0; }
172 .icon.check { background-position: -220px 0; }
173 .icon.note { background-position: -240px 0; }
175 /* Rules for links */
179 text-decoration: none;
181 text-decoration: underline;
185 /* Rules for horizontal lines */
189 background-color: #ccc;
194 /* General styles for tables */
198 margin-bottom: $lineheight;
201 padding: $lineheight/4;
202 line-height: $lineheight;
209 vertical-align: middle;
213 /* Rules for the whole left sidebar, including the logo */
222 border-right: 1px solid #ccc;
225 /* Rules for the OpenStreetMap logo in the top left corner */
231 padding: $lineheight $lineheight/4;
244 font-size: $lineheight/2;
249 /* Rules for the site name */
255 /* Rules for the introductory text displayed in the left sidebar to new users */
258 padding: $lineheight/4 $lineheight/2;
260 margin: $lineheight/4 0;
263 .sidebar-copy.intro {
264 border-top: 1px solid #ccc;
268 * Rules for alert boxes shown in the left sidebar when important
269 * information needs to be conveyed such as when the site is
270 * undergoing maintenance.
274 padding: $lineheight/4;
275 border-top: 1px solid #ccc;
282 margin: $lineheight/4;
287 * Rules for notice boxes shown in the left sidebar when important, but
288 * non-critical information needs to be conveyed such as notices about
293 padding: $lineheight/4;
294 border-top: 1px solid #ccc;
300 margin: $lineheight/4;
304 /* Rules for the menu displayed in the left sidebar */
309 padding: $lineheight/4 $lineheight/2 $lineheight/2 $lineheight/2;
312 list-style-type: none;
313 border-bottom: 1px solid #ccc;
314 border-top: 1px solid #ccc;
316 margin: $lineheight/2 0px;
325 list-style-type: none;
331 padding: $lineheight/4 0 $lineheight/4 0;
338 * Rules for "optional boxes" which appear in the left sidebar on
339 * certain pages. Current users are the seach box on the main page
340 * and the tag cloud on the traces pages.
345 padding: $lineheight/4 $lineheight/2;
346 margin: $lineheight/4 0;
350 /* Rules for the search box */
362 font-size: $typeheight;
365 padding: 2px 0px 2px $lineheight/4;
366 box-shadow: inset #DDD 0px 1px 3px;
369 input[type="text"]:focus {
371 border: 1px solid #000;
374 input[type="submit"] {
381 text-indent: -1000px;
383 background: image-url("sprite.png") -2px -2px no-repeat;
386 right: $lineheight/4;
392 margin: $lineheight/4 0 0 0;
395 /* Utility for de-emphasizing content */
404 /* Rules for donation request box */
409 padding: $lineheight/4;
410 border: 1px solid #AED1A0;
412 font-size: $typeheight;
417 margin: $lineheight/2 $lineheight/2 0px $lineheight/2;
421 text-decoration: none;
425 /* Rules for Creative Commons logo button */
428 margin: $lineheight/2 0;
432 /* Rules for tabbed navigation bar */
438 border-bottom: 1px solid #ccc;
444 .site-index #top-bar,
445 .site-export #top-bar {
458 a, a:link, a:visited {
461 padding: 3px $lineheight/2;
462 text-decoration: none;
466 -webkit-transition: color 200ms ease-in;
467 -moz-transition: color 200ms ease-in;
468 -o-transition: color 200ms ease-in;
469 transition: color 200ms ease-in;
473 .site-index #tabnav a#viewanchor,
474 .site-edit #tabnav a#editanchor,
475 .changeset-list #tabnav a#historyanchor {
476 border-bottom: 1px solid #aaa;
481 #tabnav a:link:hover, #tabnav a:visited:hover {
482 text-decoration: underline;
485 #tabnav a:link.disabled,
486 #tabnav a:visited.disabled,
487 #tabnav a:link:hover.disabled,
488 #tabnav a:visited:hover.disabled {
492 text-decoration: none;
496 /* Utility for styling notification numbers */
499 padding: 2px $lineheight/4;
507 /* Rules for greeting bar in the top right corner */
512 margin-right: $lineheight/4;
515 .greeting-bar-unread {
519 /* Rules for the message shown in place of the map when javascript is disabled */
528 /* Rules for Leaflet maps */
530 .leaflet-control .control-button {
534 background-color: #333;
535 background-color: rgba(0,0,0,.6);
536 -bottom: 1px solid #333;
537 border-radius: 4px 0 0 4px;
542 background-color: black;
546 background-color: #9ed485;
550 background-color: #333;
551 background-color: rgba(0,0,0,.5);
560 .leaflet-control .zoomin,
561 .control-layers .control-button {
563 border-radius: 4px 0 0 0;
566 .site .leaflet-control .zoomout,
567 .control-key .control-button {
572 .leaflet-control .zoomout, // For non-main page maps
573 .control-locate .control-button,
574 .control-share .control-button {
575 border-radius: 0 0 0 4px;
578 /* Rules for the home page */
594 border-left: 1px solid #CCC;
598 border-bottom: 1px solid #DDD;
608 border:1px solid #ddd;
614 ul, li:last-child, p:last-child {
628 padding: 5px 5px 5px 7px;
629 background-color: #eee;
634 background-color: #ccc;
652 text-decoration: none;
653 background-color: $lightblue;
658 border-right: 1px solid #fff;
659 border-radius: 4px 0 0 4px;
663 border-left: 1px solid #fff;
664 border-radius: 0 4px 4px 0;
668 background-color: $blue;
680 font-family: monospace;
700 .leaflet-top.leaflet-right {
701 top: $lineheight/2 !important;
703 margin-right: 0px !important;
704 margin-top: 0px !important;
708 .leaflet-popup-scrolled {
709 padding-right: $lineheight;
710 border-bottom: 0px !important;
711 border-top: 0px !important;
714 .leaflet-popup-content-wrapper {
715 border-radius: 4px !important;
716 -webkit-border-radius: 4px !important;
719 /* Rules for edit menu */
722 padding: 0 $lineheight/4;
724 display: inline-block;
726 text-decoration: none !important;
734 background-color: #ffffff;
735 border: 1px solid $lightgrey;
741 padding: 2px $lineheight/4;
742 border-top: 1px solid #eee;
747 /* Rules for attribution text under the main map shown on printouts */
753 .attribution_license,
754 .attribution_project {
758 .attribution_notice {
762 /* Rules for the popout map sidebar */
768 border-right: 1px solid $lightgrey;
774 border-bottom: 1px solid #ccc;
777 margin-bottom: $lineheight/4;
787 padding: $lineheight/2 $lineheight;
789 background: $offwhite;
790 border-bottom: 1px solid #ccc;
812 padding: 0 $lineheight $lineheight/2 $lineheight;
813 margin-top: $lineheight/2;
815 border-bottom: 1px solid #ddd;
819 /* Rules for the map key which appears in the popout sidebar */
822 .mapkey-table-key img {
828 padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
832 /* Rules for search results which appear in the popout sidebar */
835 margin-top: $lineheight/4;
836 margin-bottom: $lineheight/4;
839 .search_results_entry {
848 .search_results_entry .search_searching {
850 margin: $lineheight auto;
855 ul.results-list li { border-bottom: 1px solid #ccc; }
857 .search_results_error {
861 /* Rules for data browser information which appears in the popout sidebar */
865 .browse_show_list.button {
890 /* Rules for export information which appears in the popout sidebar */
896 .export_area_inputs {
897 margin-bottom: $lineheight/2;
905 margin: $lineheight/4;
908 /* Rules for the main content area */
911 padding: $lineheight;
916 .site-index #content,
917 .site-export #content {
920 top: 30px; bottom: 0;
921 left: 184px; right: 0;
922 border-left: 1px solid #ccc;
927 border-left: 1px solid #ccc;
931 .site-edit #content {
948 #slim_container_content {
950 background-color: #FFFFFF;
951 margin: $lineheight/2 auto;
954 -moz-border-radius: 25px;
955 border: 1px solid #e6e6e6;
959 margin: $lineheight/2;
969 margin: 30px $lineheight/2;
972 margin-right: $lineheight/4;
974 vertical-align: middle;
975 margin-bottom: $lineheight/4;
976 margin-right: $lineheight/4;
982 padding: $lineheight;
983 background: $offwhite;
985 margin-bottom: $lineheight/2;
992 margin-top: $lineheight/2;
997 /* Rules for small maps in content areas */
1003 border: 1px solid #ccc;
1004 margin-bottom: $lineheight;
1008 .content_map #small_map {
1011 margin-bottom: $lineheight;
1014 /* Rules for the changeset list shown by the history tab etc */
1019 padding: $lineheight/2 0;
1021 border-top: 1px solid #ccc;
1023 border-bottom: 1px solid #ccc;
1027 background: #FFFFC0;
1031 border-left: 1px solid #ccc;
1032 padding-left: $lineheight/4;
1033 margin-right: $lineheight/4;
1037 #changeset_list_map_wrapper {
1045 #changeset_list_map_wrapper.scrolled {
1049 #changeset_list_map {
1051 bottom: $lineheight;
1055 border: 1px solid #ccc;
1058 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1062 /* Rules for the data browser */
1065 border-top: 1px solid #ccc;
1066 margin-top: $lineheight/2;
1067 padding-top: $lineheight/2;
1072 background-color: #ffe0cc;
1078 margin-bottom: $lineheight/4;
1081 display: inline-block;
1082 vertical-align: top;
1092 display: inline-block;
1093 vertical-align: top;
1101 padding: $lineheight/4 0;
1103 text-overflow: ellipsis;
1114 #browse_map .geolink {
1118 #browse_map .secondary-actions {
1119 margin-bottom: $lineheight/2;
1122 /* Rules for the trace list shown by the traces tab etc */
1125 font-size: $lineheight/2;
1142 .trace_identifiable {
1155 /* Rules for the user profile page */
1160 .userinformation-inner {
1175 .admin-user-info small {
1176 margin-bottom: $lineheight/2;
1178 margin-right: $lineheight;
1183 border-bottom: 1px solid #ccc;
1184 padding-bottom: $lineheight;
1187 margin-bottom: $lineheight/2;
1192 margin-top: $lineheight;
1196 .activity-details p {
1201 #friends-container .contact-activity ul {
1206 p#no_home_location {
1207 margin: $lineheight;
1210 margin-top: $lineheight/4;
1215 /* Rules for the user map */
1217 .content_map .leaflet-popup-content {
1218 margin: $lineheight/2;
1222 /* Rules for user popups on maps */
1228 margin-top: 0 0 0 60px;
1231 img.user_thumbnail {
1233 margin: 0 $lineheight/2 0 0;
1237 /* Rules for the user list */
1240 font-size: $lineheight/2;
1244 vertical-align: middle;
1253 #user_list_actions {
1255 margin-top: $lineheight/2;
1258 /* Rules for the diary list page */
1260 .diary_entry-list img.user_thumbnail {
1267 margin-top: $lineheight/2;
1268 padding-top: $lineheight;
1269 border-top: 1px solid #ccc;
1284 ul.secondary-actions { display: inline-block;}
1287 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1291 #content .post_heading {
1292 margin-bottom: $lineheight;
1295 margin-bottom: $lineheight/2;
1300 /* Rules for the diary entry page */
1307 border: 1px solid #ccc;
1309 margin-bottom: $lineheight;
1312 border-top: 1px solid #ccc;
1313 padding-top: $lineheight;
1314 margin-top: $lineheight/2;
1320 margin-top: $lineheight/2;
1321 border-top: 1px dashed #ccc;
1322 padding-top: $lineheight/2;
1324 margin-top: $lineheight;
1325 padding-top: $lineheight;
1326 border-top: 1px solid #ccc;
1329 margin-bottom: $lineheight/2;
1338 .diary_entry-view img.user_thumbnail {
1342 /* Rules for the login page */
1344 #login_openid_buttons {
1348 #login_openid_buttons li {
1350 padding: $lineheight/4 $lineheight/2;
1353 /* Rules for the account confirmation page */
1357 border: 1px solid #ccc;
1358 padding: $lineheight;
1359 margin-bottom: $lineheight;
1373 margin: $lineheight auto inherit auto;
1378 input[type=submit] {
1384 background: darken($grey, $hovercolor);
1389 margin-bottom: $lineheight;
1391 #contributorGuidance {
1392 background-color: $offwhite;
1394 -moz-border-radius: 4px;
1401 /* Rules for the account settings page */
1403 #accountForm .user_map {
1407 border: 1px solid #ccc;
1410 #accountForm .user_image {
1414 #accountForm #user_image {
1418 #accountForm ul.accountImage-options {
1431 display: inline !important;
1434 .content_map.settings_map {
1439 /* Rules for the oauth settings page */
1441 .oauth_clients .buttons .oauth-edit {
1442 border-radius: 2px 0 0 2px;
1445 .oauth_clients .buttons .oauth-delete {
1446 border-radius: 0 2px 2px 0;
1449 /* Rules for messages pages */
1453 border: 1px solid #ddd;
1455 input[type="submit"] {
1459 border-top: 1px solid #ccc;
1463 background: #f8f8ff;
1476 padding: $lineheight/4;
1487 border-right: 1px solid $lightgrey;
1491 .inbox-row .inbox-mark-read {
1496 margin-bottom: $lineheight;
1497 padding: $lineheight/4 0px 4px 0px;
1498 border-bottom: 1px solid #ccc;
1505 .info-line .user_thumbnail_tiny {
1506 vertical-align: middle;
1515 .inbox-row-unread .inbox-mark-unread {
1519 .message-read .message-buttons {
1520 margin-top: $lineheight;
1521 padding-top: $lineheight;
1522 border-top: 1px solid $lightgrey;
1525 .message-read .buttons .mark-unread-button {
1529 /* Rules for "flash" notice boxes shown at the top of the content area */
1532 padding: $lineheight;
1534 background-color: #ff7070;
1537 background-color: #ffe0cc;
1540 background-color: #CBEEA7;
1544 /* Rules for highlighting fields with rails validation errors */
1546 .field_with_errors {
1548 background-color: #ff7070;
1552 /* Rules for rails validation error boxes */
1556 border: 2px solid #ff7070;
1557 padding: 0 $lineheight/2;
1558 margin-bottom: $lineheight;
1559 background-color: #f0f0f0;
1562 margin: 0 -10px 10px -10px;
1563 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1566 background-color: #c00;
1574 padding: $lineheight/4;
1578 padding-left: $lineheight;
1587 /* Rules for forms */
1591 margin-bottom: $lineheight;
1593 label.standard-label {
1595 margin-bottom: $lineheight/4;
1596 font-size: $typeheight;
1600 label.standard-label.secondary {
1601 display: inline-block;
1602 font-weight: normal;
1605 font-weight: normal;
1612 margin-top: $lineheight;
1613 padding-top: $lineheight;
1614 border-top: 1px solid $lightgrey;
1617 margin-bottom: $lineheight/2;
1625 input[type="checkbox"],
1626 input[type="radio"] {
1632 #remember_me_openid {
1636 input[type="checkbox"],
1637 input[type="radio"] {
1642 input[type="email"],
1644 input[type="password"],
1646 border: 1px solid #ccc;
1657 /* Rules for user images */
1662 border: 1px solid #ccc;
1663 margin-bottom: $lineheight;
1665 margin-right: $lineheight;
1668 img.user_thumbnail {
1671 border: 1px solid #ccc;
1672 margin-right: $lineheight;
1675 img.user_thumbnail_tiny {
1678 border: 1px solid #ccc;
1681 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1684 white-space: nowrap;
1687 /* Rules for geo microformats */
1690 border-bottom: none;
1693 /* Rules for RSS buttons */
1700 /* General styles for action lists / subnavs / pager navs */
1702 ul.secondary-actions {
1707 display: inline-block;
1714 border-left: 1px solid #ccc;
1715 padding-left: $lineheight/4;
1716 margin-right: $lineheight/4;
1727 /* Utility for managing inner content areas */
1729 .inner22 { padding: $lineheight;}
1731 .inner12 { padding: $lineheight/2 $lineheight;}
1733 .inner11 { padding: $lineheight/2;}
1735 .inner02 { padding: 0 $lineheight;}
1737 /* Utility for general button styles */
1739 input[type="button"],
1740 input[type="submit"],
1741 input[type="reset"],
1745 display: inline-block;
1747 padding: $lineheight/4 $lineheight/2;
1748 min-height: 20px + $lineheight/2;
1750 margin: 0 0 $lineheight/2 0;
1755 -moz-border-radius: 2px;
1757 background: darken($blue, $hovercolor);
1758 text-decoration: none;
1761 background: $lightblue;
1763 background: darken($lightblue, $hovercolor);
1767 background: $lightgrey;
1769 background: $lightgrey;
1779 input[type="submit"],
1780 input[type="button"],
1781 input[type="reset"],
1783 box-sizing: border-box;
1789 border-right:1px solid white;
1790 text-overflow: ellipsis;
1791 white-space: nowrap;
1795 .button:first-child {
1796 border-radius:2px 0 0 2px;
1799 .button:last-child {
1800 border-radius:0 2px 2px 0;
1801 border-right-width: 0;
1805 *[value="Hide"] + input:last-child,
1806 *[value="Hide"] + .button:last-child {
1808 border-right-width: 0;
1810 /* if a 3-button set has a hidden middle button */
1811 *[value="Hide"] + input:nth-child(3),
1812 *[value="Hide"] + .button:nth-child(3) {
1813 border-radius:0 2px 2px 0;
1814 border-right-width: 0;
1816 /* if a 3-button set starts with a hidden button */
1817 *[value="Hide"] + input:nth-child(2):not(:last-child),
1818 *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1819 border-radius:2px 0 0 2px;
1820 border-right-width: 1px solid white;
1824 /* Rules for doing distinct colour of alternate table rows */
1828 background: $offwhite;
1836 /* Rules for OpenID logo */
1839 vertical-align: text-bottom;
1843 /* Rules for rich text */
1848 padding-bottom: $lineheight/2;
1849 border-bottom: 1px dashed #cccccc;
1850 margin-bottom: $lineheight/2;
1862 font-size: $typeheight;
1867 background: #e8e8e8;
1873 background: #e8e8e8;
1882 padding: $lineheight;
1883 background-color: $offwhite;
1890 border-left: $lineheight solid $offwhite;
1891 padding-left: $lineheight;
1897 padding-left: $lineheight;
1898 margin-bottom: $lineheight;
1899 margin-left: $lineheight;
1907 list-style: decimal;
1911 .diary_post .richtext {
1912 margin-top: $lineheight;
1915 .comments .richtext {
1920 /* Rules for rich text editors */
1922 .richtext_container {
1923 margin-bottom: $lineheight;
1927 display: inline-block;
1928 vertical-align: top;
1931 display: inline-block;
1932 padding: $lineheight;
1933 background-color: $offwhite;
1937 background-image: image-url("loading.gif");
1938 background-repeat: no-repeat;
1939 background-position: center;
1949 display: inline-block;
1950 vertical-align: top;
1952 background-color: #f8f8ff;
1953 padding: $lineheight/2;
1961 border-bottom: 1px solid #ccc;
1962 margin-bottom: $lineheight/4;
1963 padding-bottom: $lineheight/4;
1966 li h4, li span, li p {
1967 display: inline-block;
1968 vertical-align: top;
1979 margin-left: $lineheight/2;
1980 margin-bottom: $lineheight/4;
1981 white-space: nowrap;
1986 /* Rules for the user notes list */
1990 background-color: #eeeeee;
2002 /* Rules for the notes interface */
2004 .leaflet-popup-content .note {
2005 padding-top: $lineheight/2;
2008 .leaflet-popup-content .note {
2010 margin-bottom: $lineheight/2;
2014 margin-top: $lineheight/2;
2020 left: $lineheight/4;
2027 padding-left: $lineheight;
2030 .permalink:hover span {
2036 background-color: #ffe0cc;
2038 margin-bottom: $lineheight/2;
2057 margin-top: $lineheight/4;
2063 * Rules for the iD editor
2070 /* Rules for rotating sidebar ads */
2076 border-bottom: 1px solid #ccc;