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;
701 .leaflet-top.leaflet-right {
702 top: $lineheight/2 !important;
704 margin-right: 0px !important;
705 margin-top: 0px !important;
709 .leaflet-popup-scrolled {
710 padding-right: $lineheight;
711 border-bottom: 0px !important;
712 border-top: 0px !important;
715 .leaflet-popup-content-wrapper {
716 border-radius: 4px !important;
717 -webkit-border-radius: 4px !important;
720 /* Rules for edit menu */
723 padding: 0 $lineheight/4;
725 display: inline-block;
727 text-decoration: none !important;
735 background-color: #ffffff;
736 border: 1px solid $lightgrey;
742 padding: 2px $lineheight/4;
743 border-top: 1px solid #eee;
748 /* Rules for attribution text under the main map shown on printouts */
754 .attribution_license,
755 .attribution_project {
759 .attribution_notice {
763 /* Rules for the popout map sidebar */
769 border-right: 1px solid $lightgrey;
775 border-bottom: 1px solid #ccc;
778 margin-bottom: $lineheight/4;
788 padding: $lineheight/2 $lineheight;
790 background: $offwhite;
791 border-bottom: 1px solid #ccc;
813 padding: 0 $lineheight $lineheight/2 $lineheight;
814 margin-top: $lineheight/2;
816 border-bottom: 1px solid #ddd;
820 /* Rules for the map key which appears in the popout sidebar */
823 .mapkey-table-key img {
829 padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
833 /* Rules for search results which appear in the popout sidebar */
836 margin-top: $lineheight/4;
837 margin-bottom: $lineheight/4;
840 .search_results_entry {
849 .search_results_entry .search_searching {
851 margin: $lineheight auto;
856 ul.results-list li { border-bottom: 1px solid #ccc; }
858 .search_results_error {
862 /* Rules for data browser information which appears in the popout sidebar */
866 .browse_show_list.button {
891 /* Rules for export information which appears in the popout sidebar */
897 .export_area_inputs {
898 margin-bottom: $lineheight/2;
906 margin: $lineheight/4;
909 /* Rules for the main content area */
912 padding: $lineheight;
917 .site-index #content,
918 .site-export #content {
921 top: 30px; bottom: 0;
922 left: 184px; right: 0;
923 border-left: 1px solid #ccc;
928 border-left: 1px solid #ccc;
932 .site-edit #content {
949 #slim_container_content {
951 background-color: #FFFFFF;
952 margin: $lineheight/2 auto;
955 -moz-border-radius: 25px;
956 border: 1px solid #e6e6e6;
960 margin: $lineheight/2;
970 margin: 30px $lineheight/2;
973 margin-right: $lineheight/4;
975 vertical-align: middle;
976 margin-bottom: $lineheight/4;
977 margin-right: $lineheight/4;
983 padding: $lineheight;
984 background: $offwhite;
986 margin-bottom: $lineheight/2;
993 margin-top: $lineheight/2;
998 /* Rules for small maps in content areas */
1004 border: 1px solid #ccc;
1005 margin-bottom: $lineheight;
1009 .content_map #small_map {
1012 margin-bottom: $lineheight;
1015 /* Rules for the changeset list shown by the history tab etc */
1020 padding: $lineheight/2 0;
1022 border-top: 1px solid #ccc;
1024 border-bottom: 1px solid #ccc;
1028 background: #FFFFC0;
1032 border-left: 1px solid #ccc;
1033 padding-left: $lineheight/4;
1034 margin-right: $lineheight/4;
1038 #changeset_list_map_wrapper {
1046 #changeset_list_map_wrapper.scrolled {
1050 #changeset_list_map {
1052 bottom: $lineheight;
1056 border: 1px solid #ccc;
1059 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1063 /* Rules for the data browser */
1066 border-top: 1px solid #ccc;
1067 margin-top: $lineheight/2;
1068 padding-top: $lineheight/2;
1073 background-color: #ffe0cc;
1079 margin-bottom: $lineheight/4;
1082 display: inline-block;
1083 vertical-align: top;
1093 display: inline-block;
1094 vertical-align: top;
1102 padding: $lineheight/4 0;
1104 text-overflow: ellipsis;
1115 #browse_map .geolink {
1119 #browse_map .secondary-actions {
1120 margin-bottom: $lineheight/2;
1123 /* Rules for the trace list shown by the traces tab etc */
1126 font-size: $lineheight/2;
1143 .trace_identifiable {
1156 /* Rules for the user profile page */
1161 .userinformation-inner {
1176 .admin-user-info small {
1177 margin-bottom: $lineheight/2;
1179 margin-right: $lineheight;
1184 border-bottom: 1px solid #ccc;
1185 padding-bottom: $lineheight;
1188 margin-bottom: $lineheight/2;
1193 margin-top: $lineheight;
1197 .activity-details p {
1202 #friends-container .contact-activity ul {
1207 p#no_home_location {
1208 margin: $lineheight;
1211 margin-top: $lineheight/4;
1216 /* Rules for the user map */
1218 .content_map .leaflet-popup-content {
1219 margin: $lineheight/2;
1223 /* Rules for user popups on maps */
1229 margin-top: 0 0 0 60px;
1232 img.user_thumbnail {
1234 margin: 0 $lineheight/2 0 0;
1238 /* Rules for the user list */
1241 font-size: $lineheight/2;
1245 vertical-align: middle;
1254 #user_list_actions {
1256 margin-top: $lineheight/2;
1259 /* Rules for the diary list page */
1261 .diary_entry-list img.user_thumbnail {
1268 margin-top: $lineheight/2;
1269 padding-top: $lineheight;
1270 border-top: 1px solid #ccc;
1285 ul.secondary-actions { display: inline-block;}
1288 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1292 #content .post_heading {
1293 margin-bottom: $lineheight;
1296 margin-bottom: $lineheight/2;
1301 /* Rules for the diary entry page */
1308 border: 1px solid #ccc;
1310 margin-bottom: $lineheight;
1313 border-top: 1px solid #ccc;
1314 padding-top: $lineheight;
1315 margin-top: $lineheight/2;
1321 margin-top: $lineheight/2;
1322 border-top: 1px dashed #ccc;
1323 padding-top: $lineheight/2;
1325 margin-top: $lineheight;
1326 padding-top: $lineheight;
1327 border-top: 1px solid #ccc;
1330 margin-bottom: $lineheight/2;
1339 .diary_entry-view img.user_thumbnail {
1343 /* Rules for the login page */
1345 #login_openid_buttons {
1349 #login_openid_buttons li {
1351 padding: $lineheight/4 $lineheight/2;
1354 /* Rules for the account confirmation page */
1358 border: 1px solid #ccc;
1359 padding: $lineheight;
1360 margin-bottom: $lineheight;
1374 margin: $lineheight auto inherit auto;
1379 input[type=submit] {
1385 background: darken($grey, $hovercolor);
1390 margin-bottom: $lineheight;
1392 #contributorGuidance {
1393 background-color: $offwhite;
1395 -moz-border-radius: 4px;
1402 /* Rules for the account settings page */
1404 #accountForm .user_map {
1408 border: 1px solid #ccc;
1411 #accountForm .user_image {
1415 #accountForm #user_image {
1419 #accountForm ul.accountImage-options {
1432 display: inline !important;
1435 .content_map.settings_map {
1440 /* Rules for the oauth settings page */
1442 .oauth_clients .buttons .oauth-edit {
1443 border-radius: 2px 0 0 2px;
1446 .oauth_clients .buttons .oauth-delete {
1447 border-radius: 0 2px 2px 0;
1450 /* Rules for messages pages */
1454 border: 1px solid #ddd;
1456 input[type="submit"] {
1460 border-top: 1px solid #ccc;
1464 background: #f8f8ff;
1477 padding: $lineheight/4;
1488 border-right: 1px solid $lightgrey;
1492 .inbox-row .inbox-mark-read {
1497 margin-bottom: $lineheight;
1498 padding: $lineheight/4 0px 4px 0px;
1499 border-bottom: 1px solid #ccc;
1506 .info-line .user_thumbnail_tiny {
1507 vertical-align: middle;
1516 .inbox-row-unread .inbox-mark-unread {
1520 .message-read .message-buttons {
1521 margin-top: $lineheight;
1522 padding-top: $lineheight;
1523 border-top: 1px solid $lightgrey;
1526 .message-read .buttons .mark-unread-button {
1530 /* Rules for "flash" notice boxes shown at the top of the content area */
1533 padding: $lineheight;
1535 background-color: #ff7070;
1538 background-color: #ffe0cc;
1541 background-color: #CBEEA7;
1545 /* Rules for highlighting fields with rails validation errors */
1547 .field_with_errors {
1549 background-color: #ff7070;
1553 /* Rules for rails validation error boxes */
1557 border: 2px solid #ff7070;
1558 padding: 0 $lineheight/2;
1559 margin-bottom: $lineheight;
1560 background-color: #f0f0f0;
1563 margin: 0 -10px 10px -10px;
1564 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1567 background-color: #c00;
1575 padding: $lineheight/4;
1579 padding-left: $lineheight;
1588 /* Rules for forms */
1592 margin-bottom: $lineheight;
1594 label.standard-label {
1596 margin-bottom: $lineheight/4;
1597 font-size: $typeheight;
1601 label.standard-label.secondary {
1602 display: inline-block;
1603 font-weight: normal;
1606 font-weight: normal;
1613 margin-top: $lineheight;
1614 padding-top: $lineheight;
1615 border-top: 1px solid $lightgrey;
1618 margin-bottom: $lineheight/2;
1626 input[type="checkbox"],
1627 input[type="radio"] {
1633 #remember_me_openid {
1637 input[type="checkbox"],
1638 input[type="radio"] {
1643 input[type="email"],
1645 input[type="password"],
1647 border: 1px solid #ccc;
1658 /* Rules for user images */
1663 border: 1px solid #ccc;
1664 margin-bottom: $lineheight;
1666 margin-right: $lineheight;
1669 img.user_thumbnail {
1672 border: 1px solid #ccc;
1673 margin-right: $lineheight;
1676 img.user_thumbnail_tiny {
1679 border: 1px solid #ccc;
1682 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1685 white-space: nowrap;
1688 /* Rules for geo microformats */
1691 border-bottom: none;
1694 /* Rules for RSS buttons */
1701 /* General styles for action lists / subnavs / pager navs */
1703 ul.secondary-actions {
1708 display: inline-block;
1715 border-left: 1px solid #ccc;
1716 padding-left: $lineheight/4;
1717 margin-right: $lineheight/4;
1728 /* Utility for managing inner content areas */
1730 .inner22 { padding: $lineheight;}
1732 .inner12 { padding: $lineheight/2 $lineheight;}
1734 .inner11 { padding: $lineheight/2;}
1736 .inner02 { padding: 0 $lineheight;}
1738 /* Utility for general button styles */
1740 input[type="button"],
1741 input[type="submit"],
1742 input[type="reset"],
1746 display: inline-block;
1748 padding: $lineheight/4 $lineheight/2;
1749 min-height: 20px + $lineheight/2;
1751 margin: 0 0 $lineheight/2 0;
1756 -moz-border-radius: 2px;
1758 background: darken($blue, $hovercolor);
1759 text-decoration: none;
1762 background: $lightblue;
1764 background: darken($lightblue, $hovercolor);
1768 background: $lightgrey;
1770 background: $lightgrey;
1780 input[type="submit"],
1781 input[type="button"],
1782 input[type="reset"],
1784 box-sizing: border-box;
1790 border-right:1px solid white;
1791 text-overflow: ellipsis;
1792 white-space: nowrap;
1796 .button:first-child {
1797 border-radius:2px 0 0 2px;
1800 .button:last-child {
1801 border-radius:0 2px 2px 0;
1802 border-right-width: 0;
1806 *[value="Hide"] + input:last-child,
1807 *[value="Hide"] + .button:last-child {
1809 border-right-width: 0;
1811 /* if a 3-button set has a hidden middle button */
1812 *[value="Hide"] + input:nth-child(3),
1813 *[value="Hide"] + .button:nth-child(3) {
1814 border-radius:0 2px 2px 0;
1815 border-right-width: 0;
1817 /* if a 3-button set starts with a hidden button */
1818 *[value="Hide"] + input:nth-child(2):not(:last-child),
1819 *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1820 border-radius:2px 0 0 2px;
1821 border-right-width: 1px solid white;
1825 /* Rules for doing distinct colour of alternate table rows */
1829 background: $offwhite;
1837 /* Rules for OpenID logo */
1840 vertical-align: text-bottom;
1844 /* Rules for rich text */
1849 padding-bottom: $lineheight/2;
1850 border-bottom: 1px dashed #cccccc;
1851 margin-bottom: $lineheight/2;
1863 font-size: $typeheight;
1868 background: #e8e8e8;
1874 background: #e8e8e8;
1883 padding: $lineheight;
1884 background-color: $offwhite;
1891 border-left: $lineheight solid $offwhite;
1892 padding-left: $lineheight;
1898 padding-left: $lineheight;
1899 margin-bottom: $lineheight;
1900 margin-left: $lineheight;
1908 list-style: decimal;
1912 .diary_post .richtext {
1913 margin-top: $lineheight;
1916 .comments .richtext {
1921 /* Rules for rich text editors */
1923 .richtext_container {
1924 margin-bottom: $lineheight;
1928 display: inline-block;
1929 vertical-align: top;
1932 display: inline-block;
1933 padding: $lineheight;
1934 background-color: $offwhite;
1938 background-image: image-url("loading.gif");
1939 background-repeat: no-repeat;
1940 background-position: center;
1950 display: inline-block;
1951 vertical-align: top;
1953 background-color: #f8f8ff;
1954 padding: $lineheight/2;
1962 border-bottom: 1px solid #ccc;
1963 margin-bottom: $lineheight/4;
1964 padding-bottom: $lineheight/4;
1967 li h4, li span, li p {
1968 display: inline-block;
1969 vertical-align: top;
1980 margin-left: $lineheight/2;
1981 margin-bottom: $lineheight/4;
1982 white-space: nowrap;
1987 /* Rules for the user notes list */
1991 background-color: #eeeeee;
2003 /* Rules for the notes interface */
2005 .leaflet-popup-content .note {
2006 padding-top: $lineheight/2;
2009 .leaflet-popup-content .note {
2011 margin-bottom: $lineheight/2;
2015 margin-top: $lineheight/2;
2021 left: $lineheight/4;
2028 padding-left: $lineheight;
2031 .permalink:hover span {
2037 background-color: #ffe0cc;
2039 margin-bottom: $lineheight/2;
2058 margin-top: $lineheight/4;
2064 * Rules for the iD editor
2071 /* Rules for rotating sidebar ads */
2077 border-bottom: 1px solid #ccc;