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 .leaflet-control .zoomin,
543 .control-layers .control-button {
545 border-radius: 4px 0 0 0;
548 .site .leaflet-control .zoomout,
549 .control-key .control-button {
554 .control-locate .control-button,
555 .control-share .control-button {
556 border-radius: 0 0 0 4px;
559 .leaflet-control .control-button:hover {
560 background-color: black;
563 .leaflet-control .control-button.active {
564 background-color: #9ed485;
567 .leaflet-control .control-button .icon {
571 /* Rules for the home page */
587 border-left: 1px solid #CCC;
591 border-bottom: 1px solid #DDD;
601 border:1px solid #ddd;
607 ul, li:last-child, p:last-child {
621 padding: 5px 5px 5px 7px;
622 background-color: #eee;
627 background-color: #ccc;
652 font-family: monospace;
666 .site-index .leaflet-top,
667 .site-export .leaflet-top {
668 top: $lineheight/2 !important;
670 margin-right: 0px !important;
671 margin-top: 0px !important;
675 .leaflet-popup-scrolled {
676 padding-right: $lineheight;
677 border-bottom: 0px !important;
678 border-top: 0px !important;
681 .leaflet-popup-content-wrapper {
682 border-radius: 4px !important;
683 -webkit-border-radius: 4px !important;
686 /* Rules for edit menu */
689 padding: 0 $lineheight/4;
691 display: inline-block;
693 text-decoration: none !important;
701 background-color: #ffffff;
702 border: 1px solid $lightgrey;
708 padding: 2px $lineheight/4;
709 border-top: 1px solid #eee;
714 /* Rules for attribution text under the main map shown on printouts */
720 .attribution_license,
721 .attribution_project {
725 .attribution_notice {
729 /* Rules for the popout map sidebar */
735 border-right: 1px solid $lightgrey;
741 border-bottom: 1px solid #ccc;
744 margin-bottom: $lineheight/4;
754 padding: $lineheight/2 $lineheight;
756 background: $offwhite;
757 border-bottom: 1px solid #ccc;
779 padding: 0 $lineheight $lineheight/2 $lineheight;
780 margin-top: $lineheight/2;
782 border-bottom: 1px solid #ddd;
786 /* Rules for the map key which appears in the popout sidebar */
789 .mapkey-table-key img {
795 padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
799 /* Rules for search results which appear in the popout sidebar */
802 margin-top: $lineheight/4;
803 margin-bottom: $lineheight/4;
806 .search_results_entry {
815 .search_results_entry .search_searching {
817 margin: $lineheight auto;
822 ul.results-list li { border-bottom: 1px solid #ccc; }
824 .search_results_error {
828 /* Rules for data browser information which appears in the popout sidebar */
832 .browse_show_list.button {
857 /* Rules for export information which appears in the popout sidebar */
863 .export_area_inputs {
864 margin-bottom: $lineheight/2;
872 margin: $lineheight/4;
875 /* Rules for the main content area */
878 padding: $lineheight;
883 .site-index #content,
884 .site-export #content {
887 top: 30px; bottom: 0;
888 left: 184px; right: 0;
889 border-left: 1px solid #ccc;
894 border-left: 1px solid #ccc;
898 .site-edit #content {
915 #slim_container_content {
917 background-color: #FFFFFF;
918 margin: $lineheight/2 auto;
921 -moz-border-radius: 25px;
922 border: 1px solid #e6e6e6;
926 margin: $lineheight/2;
936 margin: 30px $lineheight/2;
939 margin-right: $lineheight/4;
941 vertical-align: middle;
942 margin-bottom: $lineheight/4;
943 margin-right: $lineheight/4;
949 padding: $lineheight;
950 background: $offwhite;
952 margin-bottom: $lineheight/2;
959 margin-top: $lineheight/2;
964 /* Rules for small maps in content areas */
970 border: 1px solid #ccc;
971 margin-bottom: $lineheight;
975 .content_map #small_map {
978 margin-bottom: $lineheight;
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;
1048 display: inline-block;
1049 vertical-align: top;
1059 display: inline-block;
1060 vertical-align: top;
1068 padding: $lineheight/4 0;
1070 text-overflow: ellipsis;
1081 #browse_map .geolink {
1085 #browse_map .secondary-actions {
1086 margin-bottom: $lineheight/2;
1089 /* Rules for the trace list shown by the traces tab etc */
1092 font-size: $lineheight/2;
1109 .trace_identifiable {
1122 /* Rules for the user profile page */
1127 .userinformation-inner {
1142 .admin-user-info small {
1143 margin-bottom: $lineheight/2;
1145 margin-right: $lineheight;
1150 border-bottom: 1px solid #ccc;
1151 padding-bottom: $lineheight;
1154 margin-bottom: $lineheight/2;
1159 margin-top: $lineheight;
1163 .activity-details p {
1168 #friends-container .contact-activity ul {
1173 p#no_home_location {
1174 margin: $lineheight;
1177 margin-top: $lineheight/4;
1182 /* Rules for the user map */
1184 .content_map .leaflet-popup-content {
1185 margin: $lineheight/2;
1189 /* Rules for user popups on maps */
1195 margin-top: 0 0 0 60px;
1198 img.user_thumbnail {
1200 margin: 0 $lineheight/2 0 0;
1204 /* Rules for the user list */
1207 font-size: $lineheight/2;
1211 vertical-align: middle;
1220 #user_list_actions {
1222 margin-top: $lineheight/2;
1225 /* Rules for the diary list page */
1227 .diary_entry-list img.user_thumbnail {
1234 margin-top: $lineheight/2;
1235 padding-top: $lineheight;
1236 border-top: 1px solid #ccc;
1251 ul.secondary-actions { display: inline-block;}
1254 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1258 #content .post_heading {
1259 margin-bottom: $lineheight;
1262 margin-bottom: $lineheight/2;
1267 /* Rules for the diary entry page */
1274 border: 1px solid #ccc;
1276 margin-bottom: $lineheight;
1279 border-top: 1px solid #ccc;
1280 padding-top: $lineheight;
1281 margin-top: $lineheight/2;
1287 margin-top: $lineheight/2;
1288 border-top: 1px dashed #ccc;
1289 padding-top: $lineheight/2;
1291 margin-top: $lineheight;
1292 padding-top: $lineheight;
1293 border-top: 1px solid #ccc;
1296 margin-bottom: $lineheight/2;
1305 .diary_entry-view img.user_thumbnail {
1309 /* Rules for the login page */
1311 #login_openid_buttons {
1315 #login_openid_buttons li {
1317 padding: $lineheight/4 $lineheight/2;
1320 /* Rules for the account confirmation page */
1324 border: 1px solid #ccc;
1325 padding: $lineheight;
1326 margin-bottom: $lineheight;
1340 margin: $lineheight auto inherit auto;
1345 input[type=submit] {
1351 background: darken($grey, $hovercolor);
1356 margin-bottom: $lineheight;
1358 #contributorGuidance {
1359 background-color: $offwhite;
1361 -moz-border-radius: 4px;
1368 /* Rules for the account settings page */
1370 #accountForm .user_map {
1374 border: 1px solid #ccc;
1377 #accountForm .user_image {
1381 #accountForm #user_image {
1385 #accountForm ul.accountImage-options {
1398 display: inline !important;
1401 .content_map.settings_map {
1406 /* Rules for the oauth settings page */
1408 .oauth_clients .buttons .oauth-edit {
1409 border-radius: 2px 0 0 2px;
1412 .oauth_clients .buttons .oauth-delete {
1413 border-radius: 0 2px 2px 0;
1416 /* Rules for messages pages */
1420 border: 1px solid #ddd;
1422 input[type="submit"] {
1426 border-top: 1px solid #ccc;
1430 background: #f8f8ff;
1443 padding: $lineheight/4;
1454 border-right: 1px solid $lightgrey;
1458 .inbox-row .inbox-mark-read {
1463 margin-bottom: $lineheight;
1464 padding: $lineheight/4 0px 4px 0px;
1465 border-bottom: 1px solid #ccc;
1472 .info-line .user_thumbnail_tiny {
1473 vertical-align: middle;
1482 .inbox-row-unread .inbox-mark-unread {
1486 .message-read .message-buttons {
1487 margin-top: $lineheight;
1488 padding-top: $lineheight;
1489 border-top: 1px solid $lightgrey;
1492 .message-read .buttons .mark-unread-button {
1496 /* Rules for "flash" notice boxes shown at the top of the content area */
1499 padding: $lineheight;
1501 background-color: #ff7070;
1504 background-color: #ffe0cc;
1507 background-color: #CBEEA7;
1511 /* Rules for highlighting fields with rails validation errors */
1513 .field_with_errors {
1515 background-color: #ff7070;
1519 /* Rules for rails validation error boxes */
1523 border: 2px solid #ff7070;
1524 padding: 0 $lineheight/2;
1525 margin-bottom: $lineheight;
1526 background-color: #f0f0f0;
1529 margin: 0 -10px 10px -10px;
1530 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1533 background-color: #c00;
1541 padding: $lineheight/4;
1545 padding-left: $lineheight;
1554 /* Rules for forms */
1558 margin-bottom: $lineheight;
1560 label.standard-label {
1562 margin-bottom: $lineheight/4;
1563 font-size: $typeheight;
1567 label.standard-label.secondary {
1568 display: inline-block;
1569 font-weight: normal;
1572 font-weight: normal;
1579 margin-top: $lineheight;
1580 padding-top: $lineheight;
1581 border-top: 1px solid $lightgrey;
1584 margin-bottom: $lineheight/2;
1592 input[type="checkbox"],
1593 input[type="radio"] {
1599 #remember_me_openid {
1603 input[type="checkbox"],
1604 input[type="radio"] {
1609 input[type="email"],
1611 input[type="password"],
1613 border: 1px solid #ccc;
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;
1715 min-height: 20px + $lineheight/2;
1717 margin: 0 0 $lineheight/2 0;
1722 -moz-border-radius: 2px;
1724 background: darken($blue, $hovercolor);
1725 text-decoration: none;
1728 background: $lightblue;
1730 background: darken($lightblue, $hovercolor);
1734 background: $lightgrey;
1736 background: $lightgrey;
1746 input[type="submit"],
1747 input[type="button"],
1748 input[type="reset"],
1750 box-sizing: border-box;
1756 border-right:1px solid white;
1757 text-overflow: ellipsis;
1758 white-space: nowrap;
1762 .button:first-child {
1763 border-radius:2px 0 0 2px;
1766 .button:last-child {
1767 border-radius:0 2px 2px 0;
1768 border-right-width: 0;
1772 *[value="Hide"] + input:last-child,
1773 *[value="Hide"] + .button:last-child {
1775 border-right-width: 0;
1777 /* if a 3-button set has a hidden middle button */
1778 *[value="Hide"] + input:nth-child(3),
1779 *[value="Hide"] + .button:nth-child(3) {
1780 border-radius:0 2px 2px 0;
1781 border-right-width: 0;
1783 /* if a 3-button set starts with a hidden button */
1784 *[value="Hide"] + input:nth-child(2):not(:last-child),
1785 *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1786 border-radius:2px 0 0 2px;
1787 border-right-width: 1px solid white;
1791 /* Rules for doing distinct colour of alternate table rows */
1795 background: $offwhite;
1803 /* Rules for OpenID logo */
1806 vertical-align: text-bottom;
1810 /* Rules for rich text */
1815 padding-bottom: $lineheight/2;
1816 border-bottom: 1px dashed #cccccc;
1817 margin-bottom: $lineheight/2;
1829 font-size: $typeheight;
1834 background: #e8e8e8;
1840 background: #e8e8e8;
1849 padding: $lineheight;
1850 background-color: $offwhite;
1857 border-left: $lineheight solid $offwhite;
1858 padding-left: $lineheight;
1864 padding-left: $lineheight;
1865 margin-bottom: $lineheight;
1866 margin-left: $lineheight;
1874 list-style: decimal;
1878 .diary_post .richtext {
1879 margin-top: $lineheight;
1882 .comments .richtext {
1887 /* Rules for rich text editors */
1889 .richtext_container {
1890 margin-bottom: $lineheight;
1894 display: inline-block;
1895 vertical-align: top;
1898 display: inline-block;
1899 padding: $lineheight;
1900 background-color: $offwhite;
1904 background-image: image-url("loading.gif");
1905 background-repeat: no-repeat;
1906 background-position: center;
1916 display: inline-block;
1917 vertical-align: top;
1919 background-color: #f8f8ff;
1920 padding: $lineheight/2;
1928 border-bottom: 1px solid #ccc;
1929 margin-bottom: $lineheight/4;
1930 padding-bottom: $lineheight/4;
1933 li h4, li span, li p {
1934 display: inline-block;
1935 vertical-align: top;
1946 margin-left: $lineheight/2;
1947 margin-bottom: $lineheight/4;
1948 white-space: nowrap;
1953 /* Rules for the user notes list */
1957 background-color: #eeeeee;
1969 /* Rules for the notes interface */
1971 .leaflet-popup-content .note {
1972 padding-top: $lineheight/2;
1975 .leaflet-popup-content .note {
1977 margin-bottom: $lineheight/2;
1981 margin-top: $lineheight/2;
1987 left: $lineheight/4;
1994 padding-left: $lineheight;
1997 .permalink:hover span {
2003 background-color: #ffe0cc;
2005 margin-bottom: $lineheight/2;
2024 margin-top: $lineheight/4;
2030 * Rules for the iD editor
2037 /* Rules for rotating sidebar ads */
2043 border-bottom: 1px solid #ccc;