1 /* http://meyerweb.com/eric/tools/css/reset/
3 License: none (public domain)
6 html, body, div, span, applet, object, iframe,
7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 a, abbr, acronym, address, big, cite, code,
9 del, dfn, em, img, ins, kbd, q, s, samp,
10 small, strike, strong, sub, sup, tt, var,
12 dl, dt, dd, ol, ul, li,
13 fieldset, form, label, legend,
14 table, caption, tbody, tfoot, thead, tr, th, td,
15 article, aside, canvas, details, embed,
16 figure, figcaption, footer, header, hgroup,
17 menu, nav, output, ruby, section, summary,
18 time, mark, audio, video {
24 vertical-align: baseline;
26 /* HTML5 display-role reset for older browsers */
27 article, aside, details, figcaption, figure,
28 footer, header, hgroup, menu, nav, section {
40 blockquote:before, blockquote:after,
46 border-collapse: collapse;
49 a { text-decoration: none;}
51 * 1. Corrects font family not being inherited in all browsers.
52 * 2. Corrects font size not being inherited in all browsers.
53 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
60 font-family: inherit; /* 1 */
61 font-size: 100%; /* 2 */
67 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
76 /* Hide default number spinner controls */
77 input[type="number"]::-webkit-inner-spin-button,
78 input[type="number"]::-webkit-outer-spin-button {
83 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
84 * and `video` controls.
85 * 2. Corrects inability to style clickable `input` types in iOS.
86 * 3. Improves usability and consistency of cursor style between image-type
91 html input[type="button"], /* 1 */
93 input[type="submit"] {
94 -webkit-appearance: button; /* 2 */
95 cursor: pointer; /* 3 */
99 * Re-set default cursor for disabled elements.
108 * 1. Addresses box sizing set to `content-box` in IE 8/9.
109 * 2. Removes excess padding in IE 8/9.
112 input[type="checkbox"],
113 input[type="radio"] {
114 box-sizing: border-box; /* 1 */
119 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
120 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
121 * (include `-moz` to future-proof).
124 input[type="search"] {
125 -webkit-appearance: textfield; /* 1 */
126 -moz-box-sizing: border-box;
127 -webkit-box-sizing: border-box; /* 2 */
128 box-sizing: border-box;
132 * Removes inner padding and search cancel button in Safari 5 and Chrome
136 input[type="search"]::-webkit-search-cancel-button,
137 input[type="search"]::-webkit-search-decoration {
138 -webkit-appearance: none;
142 * Removes inner padding and border in Firefox 4+.
145 button::-moz-focus-inner,
146 input::-moz-focus-inner {
152 ** Markup free clearing
153 ** Details: http://www.positioniseverything.net/easyclearing.html
157 content: " "; /* 1 */
158 display: table; /* 2 */
167 transform-origin:0 0;
168 -ms-transform-origin:0 0;
169 -webkit-transform-origin:0 0;
170 -moz-transform-origin:0 0;
171 -o-transform-origin:0 0;
175 -webkit-transition: opacity 200ms linear;
176 transition: opacity 200ms linear;
177 -moz-transition: opacity 200ms linear;
190 pointer-events: none;
200 pointer-events: stroke;
204 -webkit-transition: 200ms;
205 -moz-transition: 200ms;
224 .behavior-hover g.point.hover:not(.selected) .shadow {
228 g.point.selected .shadow {
232 g.point.active, g.point.active * {
233 pointer-events: none;
236 /* vertices and midpoints */
248 g.vertex.shared .stroke {
252 g.vertex.tagged .fill {
269 g.vertex.vertex-hover {
273 .mode-draw-area .behavior-hover g.vertex.vertex-hover,
274 .mode-draw-line .behavior-hover g.vertex.vertex-hover,
275 .mode-add-area .behavior-hover g.vertex.vertex-hover,
276 .mode-add-line .behavior-hover g.vertex.vertex-hover,
277 .mode-add-point .behavior-hover g.vertex.vertex-hover,
278 .mode-drag-node .behavior-hover g.vertex.vertex-hover {
282 .behavior-hover g.vertex.hover:not(.selected) .shadow,
283 .behavior-hover g.midpoint.hover:not(.selected) .shadow {
287 g.vertex.selected .shadow {
291 .mode-draw-area g.midpoint,
292 .mode-draw-line g.midpoint,
293 .mode-add-area g.midpoint,
294 .mode-add-line g.midpoint,
295 .mode-add-point g.midpoint,
296 .mode-drag-node g.midpoint {
303 stroke-linecap: round;
304 stroke-linejoin: bevel;
318 .behavior-hover path.shadow.hover:not(.selected) {
322 path.shadow.selected {
327 path.line.member-type-multipolygon.stroke {
330 path.area.stroke.selected,
331 path.line.member-type-multipolygon.stroke.selected {
332 stroke-width:4 !important;
349 path.stroke.tag-natural {
353 path.fill.tag-natural {
357 path.stroke.tag-natural-water {
360 path.fill.tag-natural-water {
364 path.stroke.tag-amenity-school {
368 path.fill.tag-amenity-school {
373 path.stroke.tag-amenity-university {
376 path.fill.tag-amenity-university {
381 path.stroke.tag-building {
385 path.fill.tag-building {
392 path.stroke.tag-landuse,
393 path.stroke.tag-natural-wood,
394 path.stroke.tag-natural-tree,
395 path.stroke.tag-natural-grassland,
396 path.stroke.tag-leisure-pitch,
397 path.stroke.tag-leisure-park {
402 path.stroke.tag-landuse-residential {
406 path.stroke.tag-landuse-retail,
407 path.stroke.tag-landuse-commercial {
411 path.stroke.tag-landuse-industrial {
415 path.stroke.tag-landuse-basin,
416 path.stroke.tag-landuse-reservoir {
420 path.stroke.tag-landuse-quarry {
424 path.stroke.tag-landuse-residential,
425 path.stroke.tag-landuse-construction {
429 path.stroke.tag-landuse-meadow,
430 path.stroke.tag-natural-wetland {
434 path.stroke.tag-natural-beach {
438 path.stroke.tag-natural-scrub {
442 path.fill.tag-landuse,
443 path.fill.tag-natural-wood,
444 path.fill.tag-natural-tree,
445 path.fill.tag-natural-grassland,
446 path.fill.tag-natural-grass,
447 path.fill.tag-leisure-pitch,
448 path.fill.tag-leisure-park {
453 path.fill.tag-landuse-retail,
454 path.fill.tag-landuse-residential,
455 path.fill.tag-landuse-commercial,
456 path.fill.tag-landuse-industrial {
460 path.fill.tag-natural-wetland,
461 path.fill.tag-natural-beach,
462 path.fill.tag-natural-scrub,
463 path.fill.tag-landuse-cemetery,
464 path.fill.tag-landuse-meadow,
465 path.fill.tag-landuse-farm,
466 path.fill.tag-landuse-farmland,
467 path.fill.tag-landuse-construction,
468 path.fill.tag-landuse-orchard {
469 /* background color is applied a further opacity later */
473 .pattern-color-beach,
474 .pattern-color-scrub,
475 .pattern-color-meadow,
476 .pattern-color-wetland,
477 .pattern-color-cemetery,
479 .pattern-color-farmland,
480 .pattern-color-construction,
481 .pattern-color-orchard {
485 path.fill.tag-landuse-basin,
486 path.fill.tag-landuse-reservoir {
490 path.fill.tag-landuse-quarry {
494 path.fill.tag-landuse-residential {
498 path.fill.tag-landuse-farm,
499 path.fill.tag-landuse-farmland {
500 fill: url(#pattern-farmland) #8cd05f;
504 .pattern-color-farmland {
505 fill: url(#pattern-farmland) #8cd05f;
508 path.fill.tag-landuse-meadow {
509 fill: url(#pattern-meadow) #b6e199;
511 .pattern-color-meadow {
515 path.fill.tag-natural-wetland {
516 fill: url(#pattern-wetland) #b6e199;
518 .pattern-color-wetland {
522 path.fill.tag-natural-beach {
523 fill: url(#pattern-beach) #ffff7e;
525 .pattern-color-beach {
529 path.fill.tag-natural-scrub {
530 fill: url(#pattern-scrub) #dbf08b;
532 .pattern-color-scrub {
536 path.fill.tag-landuse-cemetery {
537 fill: url(#pattern-cemetery) #8cd05f;
539 .pattern-color-cemetery {
543 path.fill.tag-landuse-orchard {
544 fill: url(#pattern-orchard) #8cd05f;
546 .pattern-color-orchard {
550 path.fill.tag-landuse-construction {
551 fill: url(#pattern-construction) #e06e5f;
553 .pattern-color-construction {
557 path.fill.tag-landuse-retail,
558 path.fill.tag-landuse-commercial {
562 path.fill.tag-landuse-industrial {
566 path.stroke.tag-amenity-parking {
570 path.fill.tag-amenity-parking {
575 path.fill.tag-boundary {
581 path.shadow.tag-highway {
584 path.casing.tag-highway {
588 path.stroke.tag-highway {
593 svg[data-zoom="16"] path.shadow.tag-highway {
596 svg[data-zoom="16"] path.casing.tag-highway {
599 svg[data-zoom="16"] path.stroke.tag-highway {
603 path.stroke.tag-highway-motorway,
604 path.stroke.tag-highway-motorway_link,
605 path.stroke.tag-construction-motorway {
609 path.casing.tag-highway-motorway,
610 path.casing.tag-highway-motorway_link,
611 path.casing.tag-construction-motorway {
615 path.stroke.tag-highway-trunk,
616 path.stroke.tag-highway-trunk_link,
617 path.stroke.tag-construction-trunk {
620 path.casing.tag-highway-trunk,
621 path.casing.tag-highway-trunk_link,
622 path.casing.tag-construction-trunk {
626 path.stroke.tag-highway-primary,
627 path.stroke.tag-highway-primary_link,
628 path.stroke.tag-construction-primary {
631 path.casing.tag-highway-primary,
632 path.casing.tag-highway-primary_link,
633 path.casing.tag-construction-primary {
637 path.stroke.tag-highway-secondary,
638 path.stroke.tag-highway-secondary_link,
639 path.stroke.tag-construction-secondary {
642 path.casing.tag-highway-secondary,
643 path.casing.tag-highway-secondary_link,
644 path.casing.tag-construction-secondary {
648 path.stroke.tag-highway-tertiary,
649 path.stroke.tag-highway-tertiary_link,
650 path.stroke.tag-construction-tertiary {
653 path.casing.tag-highway-tertiary,
654 path.casing.tag-highway-tertiary_link,
655 path.casing.tag-construction-tertiary {
659 path.stroke.tag-highway-unclassified,
660 path.stroke.tag-construction-unclassified {
663 path.casing.tag-highway-unclassified,
664 path.casing.tag-construction-unclassified {
668 path.stroke.tag-highway-residential,
669 path.stroke.tag-construction-residential {
672 path.casing.tag-highway-residential,
673 path.casing.tag-construction-residential {
677 path.stroke.tag-highway-living_street {
681 path.casing.tag-highway-living_street {
686 path.stroke.line.tag-highway-pedestrian {
688 stroke-dasharray: 2, 8;
689 stroke-width:4 !important;
690 shapeRendering: auto;
692 path.casing.line.tag-highway-pedestrian {
694 stroke-width:6 !important;
696 path.stroke.area.tag-highway-pedestrian {
700 path.fill.area.tag-highway-pedestrian {
704 path.stroke.tag-highway-service {
708 path.casing.tag-highway-service {
712 svg[data-zoom="16"] path.stroke.tag-highway-service {
715 svg[data-zoom="16"] path.casing.tag-highway-service {
719 path.stroke.tag-highway-track {
723 path.casing.tag-highway-track {
726 stroke-linecap: butt;
727 stroke-dasharray: 6, 6;
729 svg[data-zoom="16"] path.stroke.tag-highway-track {
732 svg[data-zoom="16"] path.casing.tag-highway-track {
736 path.stroke.tag-highway-path {
738 stroke-width: 1 !important;
739 stroke-linecap: butt;
740 stroke-dasharray: 8, 4;
742 path.casing.tag-highway-path {
743 stroke-width: 1 !important;
747 path.stroke.tag-highway-footway,
748 path.stroke.tag-highway-cycleway,
749 path.stroke.tag-highway-bridleway {
751 stroke-linecap: butt;
752 stroke-dasharray: 6, 6;
754 path.casing.tag-highway-footway,
755 path.casing.tag-highway-cycleway,
756 path.casing.tag-highway-bridleway {
761 svg[data-zoom="16"] path.stroke.tag-highway-footway,
762 svg[data-zoom="16"] path.stroke.tag-highway-cycleway,
763 svg[data-zoom="16"] path.stroke.tag-highway-bridleway {
766 svg[data-zoom="16"] path.casing.tag-highway-footway,
767 svg[data-zoom="16"] path.casing.tag-highway-cycleway,
768 svg[data-zoom="16"] path.casing.tag-highway-bridleway {
772 path.stroke.tag-highway-footway {
775 path.stroke.tag-highway-cycleway {
778 path.stroke.tag-highway-bridleway {
782 path.stroke.tag-highway-steps {
785 stroke-linecap: butt;
786 stroke-dasharray: 3, 3;
788 path.casing.tag-highway-steps {
795 path.stroke.tag-aeroway-taxiway {
799 path.shadow.tag-aeroway-runway {
802 path.stroke.tag-aeroway-runway {
805 stroke-linecap: butt;
806 stroke-dasharray: 24, 48;
808 path.casing.tag-aeroway-runway {
811 stroke-linecap: square;
813 path.fill.tag-aeroway-runway {
817 path.stroke.tag-aeroway-apron {
820 path.fill.tag-aeroway-apron {
828 path.casing.tag-bridge-yes {
834 path.casing.tag-highway-living_street.tag-bridge-yes,
835 path.casing.tag-highway-path.tag-bridge-yes {
839 path.casing.line.tag-highway-pedestrian,
840 path.casing.tag-highway-service.tag-bridge-yes,
841 path.casing.tag-highway-track.tag-bridge-yes,
842 path.casing.tag-highway-steps.tag-bridge-yes,
843 path.casing.tag-highway-footway.tag-bridge-yes,
844 path.casing.tag-highway-cycleway.tag-bridge-yes,
845 path.casing.tag-highway-bridleway.tag-bridge-yes {
849 path.shadow.tag-highway-residential.tag-bridge {
853 path.shadow.tag-highway-living_street.tag-bridge-yes,
854 path.shadow.tag-highway-path.tag-bridge-yes,
855 path.shadow.line.tag-highway-pedestrian,
856 path.shadow.tag-highway-service.tag-bridge-yes,
857 path.shadow.tag-highway-track.tag-bridge-yes,
858 path.shadow.tag-highway-steps.tag-bridge-yes,
859 path.shadow.tag-highway-footway.tag-bridge-yes,
860 path.shadow.tag-highway-cycleway.tag-bridge-yes,
861 path.shadow.tag-highway-bridleway.tag-bridge-yes {
867 path.stroke.tag-highway.tag-tunnel-yes {
871 path.casing.tag-highway.tag-tunnel-yes {
875 path.stroke.tag-highway-construction,
876 path.casing.tag-highway-construction {
877 stroke-linecap: butt;
878 stroke-dasharray: 7, 7;
883 svg[data-zoom="16"] path.stroke.tag-highway-construction,
884 svg[data-zoom="16"] path.casing.tag-highway-construction {
885 stroke-linecap: butt;
886 stroke-dasharray: 5, 5;
891 .line.stroke.tag-railway {
894 stroke-linecap: butt;
895 stroke-dasharray: 12,12;
897 .line.casing.tag-railway {
902 .line.stroke.tag-railway-abandoned {
905 .line.casing.tag-railway-abandoned {
909 .line.stroke.tag-railway-subway {
912 .line.casing.tag-railway-subway {
916 .line.stroke.tag-railway-platform {
919 stroke-dasharray: none;
921 .line.casing.tag-railway-platform {
927 path.fill.tag-waterway {
931 path.stroke.tag-waterway {
935 path.casing.tag-waterway {
940 path.stroke.tag-waterway-river {
943 path.casing.tag-waterway-river {
947 svg[data-zoom="16"] path.stroke.tag-waterway-river {
950 svg[data-zoom="16"] path.casing.tag-waterway-river {
954 path.stroke.tag-waterway-ditch {
958 path.casing.tag-waterway-ditch {
965 path.stroke.tag-power {
969 path.casing.tag-power {
975 path.stroke.tag-boundary {
978 stroke-linecap: butt;
979 stroke-dasharray: 20, 5, 5, 5;
981 path.casing.tag-boundary {
986 path.casing.tag-boundary-protected_area,
987 path.casing.tag-boundary-national_park {
994 pointer-events: none;
999 .oneway .textpath.tag-waterway {
1003 marker#oneway-marker path {
1016 text.arealabel-halo,
1017 text.linelabel-halo,
1018 text.pointlabel-halo,
1025 text-anchor: middle;
1026 pointer-events: none;
1027 -webkit-transition: opacity 100ms linear;
1028 transition: opacity 100ms linear;
1029 -moz-transition: opacity 100ms linear;
1032 .linelabel-halo .textpath,
1033 .linelabel .textpath {
1034 dominant-baseline: middle;
1037 /* Opera doesn't support dominant-baseline. See #715 */
1038 .opera .linelabel-halo .textpath,
1039 .opera .linelabel .textpath {
1040 baseline-shift: -33%;
1041 dominant-baseline: auto;
1048 stroke-miterlimit: 1;
1058 cursor: auto; /* Opera */
1059 cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
1060 cursor: -webkit-image-set(
1061 url(<%= asset_path("iD/img/cursor-grab.png") %>) 1x,
1062 url(<%= asset_path("iD/img/cursor-grab2x.png") %>) 2x
1067 cursor: pointer; /* Opera */
1068 cursor: url(<%= asset_path("iD/img/cursor-grabbing.png") %>) 9 9, auto; /* FF */
1069 cursor: -webkit-image-set(
1070 url(<%= asset_path("iD/img/cursor-grabbing.png") %>) 1x,
1071 url(<%= asset_path("iD/img/cursor-grabbing2x.png") %>) 2x
1075 .mode-browse .point,
1076 .mode-select .point {
1077 cursor: pointer; /* Opera */
1078 cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
1079 cursor: -webkit-image-set(
1080 url(<%= asset_path("iD/img/cursor-select-point.png") %>) 1x,
1081 url(<%= asset_path("iD/img/cursor-select-point2x.png") %>) 2x
1085 .mode-select .vertex,
1086 .mode-browse .vertex {
1087 cursor: pointer; /* Opera */
1088 cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
1089 cursor: -webkit-image-set(
1090 url(<%= asset_path("iD/img/cursor-select-vertex.png") %>) 1x,
1091 url(<%= asset_path("iD/img/cursor-select-vertex2x.png") %>) 2x
1096 .mode-select .line {
1097 cursor: pointer; /* Opera */
1098 cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
1099 cursor: -webkit-image-set(
1100 url(<%= asset_path("iD/img/cursor-select-line.png") %>) 1x,
1101 url(<%= asset_path("iD/img/cursor-select-line2x.png") %>) 2x
1106 .mode-browse .area {
1107 cursor: pointer; /* Opera */
1108 cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
1109 cursor: -webkit-image-set(
1110 url(<%= asset_path("iD/img/cursor-select-area.png") %>) 1x,
1111 url(<%= asset_path("iD/img/cursor-select-area2x.png") %>) 2x
1115 .mode-select .midpoint,
1116 .mode-browse .midpoint {
1117 cursor: pointer; /* Opera */
1118 cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
1119 cursor: -webkit-image-set(
1120 url(<%= asset_path("iD/img/cursor-select-split.png") %>) 1x,
1121 url(<%= asset_path("iD/img/cursor-select-split2x.png") %>) 2x
1125 .mode-select .behavior-multiselect .point,
1126 .mode-select .behavior-multiselect .vertex,
1127 .mode-select .behavior-multiselect .line,
1128 .mode-select .behavior-multiselect .area {
1129 cursor: pointer; /* Opera */
1130 cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
1131 cursor: -webkit-image-set(
1132 url(<%= asset_path("iD/img/cursor-select-add.png") %>) 1x,
1133 url(<%= asset_path("iD/img/cursor-select-add2x.png") %>) 2x
1137 .mode-select .behavior-multiselect .selected {
1138 cursor: pointer; /* Opera */
1139 cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
1140 cursor: -webkit-image-set(
1141 url(<%= asset_path("iD/img/cursor-select-remove.png") %>) 1x,
1142 url(<%= asset_path("iD/img/cursor-select-remove2x.png") %>) 2x
1147 #map .vertex:active,
1150 #map .midpoint:active,
1151 #map .mode-select .selected {
1152 cursor: pointer; /* Opera */
1153 cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */
1154 cursor: -webkit-image-set(
1155 url(<%= asset_path("iD/img/cursor-select-acting.png") %>) 1x,
1156 url(<%= asset_path("iD/img/cursor-select-acting2x.png") %>) 2x
1160 .mode-draw-line #map:hover,
1161 .mode-draw-area #map:hover,
1162 .mode-add-line #map:hover,
1163 .mode-add-area #map:hover,
1164 .mode-drag-node #map:hover {
1165 cursor: crosshair; /* Opera */
1166 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1167 cursor: -webkit-image-set(
1168 url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x,
1169 url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x
1173 .mode-draw-line .behavior-hover .way,
1174 .mode-draw-area .behavior-hover .way,
1175 .mode-add-line .behavior-hover .way,
1176 .mode-add-area .behavior-hover .way,
1177 .mode-drag-node .behavior-hover .way {
1178 cursor: crosshair; /* Opera */
1179 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
1180 cursor: -webkit-image-set(
1181 url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 1x,
1182 url(<%= asset_path("iD/img/cursor-draw-connect-line2x.png") %>) 2x
1186 .mode-draw-line .behavior-hover .vertex,
1187 .mode-draw-area .behavior-hover .vertex,
1188 .mode-add-line .behavior-hover .vertex,
1189 .mode-add-area .behavior-hover .vertex,
1190 .mode-drag-node .behavior-hover .vertex {
1191 cursor: crosshair; /* Opera */
1192 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
1193 cursor: -webkit-image-set(
1194 url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 1x,
1195 url(<%= asset_path("iD/img/cursor-draw-connect-vertex2x.png") %>) 2x
1199 .mode-add-point #map:hover,
1203 cursor: crosshair; /* Opera */
1204 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1205 cursor: -webkit-image-set(
1206 url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x,
1207 url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x
1212 pointer-events: visibleStroke;
1220 pointer-events: none;
1225 .mode-draw-line .vertex.active,
1226 .mode-draw-area .vertex.active,
1227 .mode-drag-node .vertex.active {
1231 .mode-draw-line .way.active,
1232 .mode-draw-area .way.active,
1233 .mode-drag-node .active {
1234 pointer-events: none;
1237 /* Ensure drawing doesn't interact with area fills. */
1238 .mode-add-point .area.fill,
1239 .mode-draw-line .area.fill,
1240 .mode-draw-area .area.fill,
1241 .mode-add-line .area.fill,
1242 .mode-add-area .area.fill,
1243 .mode-drag-node .area.fill {
1244 pointer-events: none;
1247 ------------------------------------------------------- */
1250 font:normal 12px/1.6666 'Helvetica Neue', Arial, sans-serif;
1256 -webkit-font-smoothing: subpixel-antialiased;
1261 vertical-align: middle;
1295 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
1296 -moz-box-sizing: border-box;
1297 -webkit-box-sizing: border-box;
1298 box-sizing: border-box;
1301 a, button, input, textarea {
1302 -webkit-tap-highlight-color:rgba(0,0,0,0);
1303 -webkit-touch-callout:none;
1308 .checkselect label:hover,
1309 .opacity-options li,
1311 cursor: pointer; /* Opera */
1312 cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
1313 cursor: -webkit-image-set(
1314 url(<%= asset_path("iD/img/cursor-pointer.png") %>) 1x,
1315 url(<%= asset_path("iD/img/cursor-pointer2x.png") %>) 2x
1323 margin-bottom: 20px;
1328 h4:last-child { margin-bottom: 0;}
1334 margin-bottom: 10px;
1340 padding-bottom: 10px;
1344 outline-color: transparent;
1345 outline-style: none;
1368 -webkit-transition: all 100ms;
1369 -moz-transition: all 100ms;
1370 -o-transition: all 100ms;
1371 transition: all 100ms;
1379 ------------------------------------------------------- */
1383 font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
1393 background-color: white;
1394 border:1px solid #ccc;
1399 -webkit-transition: all 100ms;
1400 -moz-transition: all 100ms;
1401 -o-transition: all 100ms;
1402 transition: all 100ms;
1407 background-color: #F1F1F1;
1418 /* remove bottom border radius when combox is open */
1419 .combobox + div textarea:focus,
1420 .combobox + div input:focus {
1421 border-bottom-left-radius: 0;
1422 border-bottom-right-radius: 0;
1428 background-color: white;
1429 border-collapse: collapse;
1438 table.tags, table.tags td, table.tags th {
1439 border: 1px solid #CCC;
1444 ------------------------------------------------------- */
1446 .col0 { float:left; width:04.1666%; }
1447 .col1 { float:left; width:08.3333%; }
1448 .col2 { float:left; width:16.6666%; }
1449 .col3 { float:left; width:25.0000%; max-width: 300px; }
1450 .col4 { float:left; width:33.3333%; max-width: 400px; }
1451 .col5 { float:left; width:41.6666%; max-width: 500px; }
1452 .col6 { float:left; width:50.0000%; max-width: 600px; }
1453 .col7 { float:left; width:58.3333%; }
1454 .col8 { float:left; width:66.6666%; }
1455 .col9 { float:left; width:75.0000%; }
1456 .col10 { float:left; width:83.3333%; }
1457 .col11 { float:left; width:91.6666%; }
1458 .col12 { float:left; width:100.0000%; }
1461 ------------------------------------------------------- */
1463 ul li { list-style: none;}
1467 border: 1px solid #CCC;
1468 margin-bottom: 10px;
1471 ul.toggle-list li a {
1473 padding: 5px 10px 5px 25px;
1475 border-top: 1px solid #ccc;
1478 ul.toggle-list li:first-child a {
1480 border-radius: 3px 3px 0 0;
1483 ul.toggle-list li:last-child a {
1484 border-radius: 0 0 3px 3px;
1487 ul.toggle-list li:only-child a {
1491 ul.toggle-list li a:hover { background-color: #ececec;}
1493 ul.toggle-list li a.selected { background-color: #e8ebff;}
1497 border-left: 1px solid rgba(255,255,255,.5);
1498 padding: 5px 0 5px 5px;
1502 ul.link-list li:last-child {
1508 .toggle-list a::before {
1510 display: inline-block;
1515 border: 1px solid #CCC;
1521 .toggle-list a:hover::before {
1522 box-shadow: inset 0 0 0 2px white;
1525 .toggle-list a.selected::before {
1526 background: #7092ff;
1527 box-shadow: inset 0 0 0 2px white;
1531 ------------------------------------------------------- */
1538 background: #f7f7f7 url(<%= asset_path("iD/img/background-pattern-1.png") %>) repeat;
1543 background: #f1f1f1;
1548 background:rgba(0,0,0,.5);
1553 .fr { float: right;}
1567 box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
1571 background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
1572 background-size:5px 5px;
1606 display: inline-block;
1609 /* Crashes Safari: https://github.com/systemed/iD/issues/1188 */
1610 /*-webkit-transition: all 100ms;*/
1611 -moz-transition: all 100ms;
1612 -o-transition: all 100ms;
1613 transition: all 100ms;
1618 background-color: #ececec;
1623 background-color: rgba(255,255,255,.25);
1624 color: rgba(0,0,0,.5);
1628 button.active:not([disabled]):not(.disabled) {
1629 background: #7092ff;
1643 display: inline-block;
1648 .button-wrap button:only-child { width: 100%;}
1649 .button-wrap:last-of-type { padding-right: 0;}
1653 border-right: 1px solid rgba(0,0,0,.5);
1656 .joined button:first-child {
1657 border-radius:4px 0 0 4px;
1660 .joined button:last-child {
1661 border-right-width: 0;
1662 border-radius:0 4px 4px 0;
1666 background: #7092ff;
1669 button.action:focus,
1670 button.action:hover {
1671 background: #597BE7;
1674 button.save.has-count {
1678 button.save .count {
1682 button.save.has-count .count {
1686 background: rgba(255, 255, 255, .5);
1693 margin-left: 8.3333%;
1696 button.save.has-count .count::before {
1705 border-top: 6px solid transparent;
1706 border-bottom: 6px solid transparent;
1707 border-right: 6px solid rgba(255,255,255,.5);
1713 display:inline-block;
1717 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 0;
1718 text-indent:-9999px;
1734 /* Definitions for every icon */
1735 .icon.browse { background-position: 0 0;}
1736 .icon.add-point { background-position: -20px 0;}
1737 .icon.add-line { background-position: -40px 0;}
1738 .icon.add-area { background-position: -60px 0;}
1739 .icon.undo { background-position: -80px 0;}
1740 .icon.redo { background-position: -100px 0;}
1741 .icon.apply { background-position: -120px 0;}
1742 .icon.save { background-position: -140px 0;}
1743 .icon.close { background-position: -160px 0;}
1744 .icon.delete { background-position: -180px 0;}
1745 .icon.remove { background-position: -200px 0;}
1746 .icon.inspect { background-position: -220px 0;}
1747 .icon.zoom-in { background-position: -240px 0;}
1748 .icon.zoom-out { background-position: -260px 0;}
1749 .icon.plus { background-position: -240px 0;}
1750 .icon.search { background-position: -280px 0;}
1751 .icon.geocode { background-position: -280px 0;}
1752 .icon.layers { background-position: -300px 0;}
1753 .icon.avatar { background-position: -320px 0;}
1754 .icon.nearby { background-position: -340px 0;}
1755 .icon.geolocate { background-position: -360px 0;}
1756 .icon.warning { background-position: -380px 0;}
1757 .icon.back { background-position: -420px 0;}
1758 .icon.forward { background-position: -440px 0;}
1759 .icon.help { background-position: -460px 0;}
1761 .icon.inspect.light { background-position: -220px -20px;}
1762 .icon.geocode.light { background-position: -280px -20px;}
1763 .icon.help.light { background-position: -460px -20px;}
1764 .icon.avatar.light { background-position: -320px -20px;}
1765 .icon.nearby.light { background-position: -340px -20px;}
1767 .icon.back.blue { background-position: -420px -20px;}
1768 .icon.forward.blue { background-position: -440px -20px;}
1770 button[disabled] .icon.browse { background-position: 0 -40px;}
1771 button[disabled] .icon.add-point { background-position: -20px -40px;}
1772 button[disabled] .icon.add-line { background-position: -40px -40px;}
1773 button[disabled] .icon.add-area { background-position: -60px -40px;}
1774 button.disabled .icon.undo { background-position: -80px -40px;}
1775 button.disabled .icon.redo { background-position: -100px -40px;}
1776 button[disabled] .apply.icon { background-position: -120px -40px;}
1777 button[disabled] .close.icon { background-position: -160px -40px;}
1778 button[disabled] .delete.icon { background-position: -180px -40px;}
1779 button[disabled] .icon.remove { background-position: -200px -40px;}
1780 button[disabled] .icon.inspect { background-position: -220px -40px;}
1781 button[disabled] .icon.zoom-in { background-position: -240px -40px;}
1782 button[disabled] .icon.zoom-out { background-position: -260px -40px;}
1783 button[disabled] .icon.geocode { background-position: -280px -40px;}
1784 button[disabled] .icon.layers { background-position: -300px -40px;}
1785 button[disabled] .icon.avatar { background-position: -320px -40px;}
1786 button[disabled] .icon.nearby { background-position: -340px -40px;}
1788 /* Out link is special */
1790 .icon.out-link { height: 14px; width: 14px; background-position: -500px 0;}
1791 a:hover .icon.out-link { background-position: -500px -14px;}
1793 .icon.plus-dark { background-position: -240px -40px;}
1795 /* Universal preset icons */
1797 .icon.source { background-position: 0 -200px;}
1798 .icon.address { background-position: -20px -200px;}
1799 .icon.telephone { background-position: -40px -200px;}
1800 .icon.website { background-position: -60px -200px;}
1801 .icon.elevation { background-position: -80px -200px;}
1802 .icon.wikipedia { background-position: -100px -200px;}
1803 .icon.note { background-position: -120px -200px;}
1804 .icon.wheelchair { background-position: -140px -200px;}
1806 /* ToolBar / Persistent UI Elements
1807 ------------------------------------------------------- */
1818 /* Header for modals / panes
1819 ------------------------------------------------------- */
1822 border-bottom: 1px solid #ccc;
1831 white-space: nowrap;
1832 text-overflow: ellipsis;
1840 border-left: 1px solid #CCC;
1855 ------------------------------------------------------- */
1874 .pane:first-child .inspector-body {
1883 .inspector-wrap .header button.preset-reset {
1884 border-right: 1px solid #CCC;
1888 .inspector-wrap .header button.preset-reset > div {
1893 .inspector-wrap .header button.preset-reset .col12:last-child {
1900 .inspector-wrap .header button:hover .col12:first-child {
1904 .inspector-wrap .header button:hover .col12:last-child {
1908 .inspector-wrap .header button.line > div {
1921 ------------------------------------------------------- */
1927 padding: 20px 20px 10px 20px;
1928 border-bottom: 1px solid #ccc;
1932 padding-bottom: 10px;
1940 border: 1px solid #ccc;
1945 margin-bottom: 20px;
1948 .preset-grid.filtered .grid-button-wrap:first-child .grid-entry {
1949 background: #ececec;
1964 .grid-entry .label {
1965 background: #f6f6f6;
1973 white-space: nowrap;
1974 text-overflow: ellipsis;
1976 border-left: 1px solid rgba(0, 0, 0, .1);
1980 .grid-entry:hover .label {
1984 .grid-button-wrap button.tag-reference-button {
1989 border: 1px solid #CCC;
1990 border-radius: 0 3px 3px 0;
1993 .current .grid-entry,
1994 .current .grid-entry .label {
1995 background-color: #E8EBFF;
1998 .category .grid-entry:after,
1999 .category .grid-entry:before {
2003 left: -1px; right: -1px;
2004 border: 1px solid #ccc;
2005 border-bottom: none;
2006 border-radius: 6px 6px 0 0;
2010 .category .grid-entry:before {
2014 .preset-grid-search-wrap .icon {
2019 pointer-events: none;
2022 .preset-grid-search-wrap input {
2027 border-bottom-width: 1px;
2031 .preset-search-result {
2037 .subgrid .preset-grid {
2038 padding: 10px 10px 0 10px;
2039 border: 1px solid #CCC;
2045 border: solid rgba(0, 0, 0, 0);
2047 border-bottom-color: #CCC;
2051 margin-left: -webkit-calc(50% - 10px);
2058 border-bottom: 1px solid #ccc;
2066 /* Preset icon colors */
2068 .inspector-body-line .icon.feature-marker-stroked {
2072 .preset-icon-fill.icon-area {
2078 left: 7px; top: 7px;
2079 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -240px -80px;
2082 .preset-icon-fill.tag-shop,
2083 .preset-icon-fill.tag-building {
2084 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px;
2087 .preset-icon-fill.tag-natural-water {
2088 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -60px -80px;
2091 .preset-icon-fill.tag-landuse,
2092 .preset-icon-fill.tag-natural-wood,
2093 .preset-icon-fill.tag-natural-tree,
2094 .preset-icon-fill.tag-natural-grassland,
2095 .preset-icon-fill.tag-leisure-park {
2096 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -120px -80px;
2099 .preset-icon-fill.tag-amenity-parking {
2100 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -180px -80px;
2103 /* preset form basics */
2105 .tag-wrap .preset-icon-wrap {
2106 border-bottom: 1px solid #CCC;
2107 background-color: #e8ebff;
2110 .tag-wrap .preset-icon-wrap::after {
2119 border: solid rgba(0, 0, 0, 0);
2121 border-bottom-color: #CCC;
2124 .tag-wrap .preset-icon-wrap > div {
2129 border: 1px solid #CCC;
2133 .inspector-preset .form-field {
2135 padding-right: 20px;
2141 border: 1px solid #cfcfcf;
2142 padding: 5px 0 5px 10px;
2143 background: #f6f6f6;
2145 border-radius: 4px 4px 0 0;
2148 .form-label button {
2149 border-left: 1px solid #CCC;
2152 .form-label .modified-icon {
2158 .modified .form-label .modified-icon {
2162 .form-label button.tag-reference-button {
2163 border-top-right-radius: 3px;
2166 .form-field > input,
2167 .form-field > textarea,
2168 .form-field .preset-input-wrap {
2169 border: 1px solid #CCC;
2171 border-radius: 0 0 4px 4px;
2174 .form-field textarea {
2178 .form-field-name input.localized-main {
2184 /* adding additional preset fields */
2188 border-top: 1px solid #CCC;
2191 .more-buttons:nth-last-child(2) {
2192 border-bottom: 1px solid #CCC;
2195 button.preset-add-field {
2198 -webkit-transition: width 200ms;
2199 -moz-transition: width 200ms;
2200 -o-transition: width 200ms;
2201 transition: width 200ms;
2204 /* set width based on # of buttons */
2206 button.preset-add-field:nth-last-child(4),
2207 button.preset-add-field:nth-last-child(4) ~ button.preset-add-field {
2211 button.preset-add-field:nth-last-child(5),
2212 button.preset-add-field:nth-last-child(5) ~ button.preset-add-field {
2216 button.preset-add-field:nth-last-child(6),
2217 button.preset-add-field:nth-last-child(6) ~ button.preset-add-field {
2221 button.preset-add-field:nth-last-child(7),
2222 button.preset-add-field:nth-last-child(7) ~ button.preset-add-field {
2226 button.preset-add-field:nth-last-child(8),
2227 button.preset-add-field:nth-last-child(8) ~ button.preset-add-field {
2231 .preset-add-field .tooltip.top .tooltip-arrow {
2232 border-top-color: #000;
2235 .preset-add-field .tooltip-inner {
2240 .preset-fav button.fav {
2246 /* preset form access */
2248 .preset-input-wrap li {
2249 border-bottom: 1px solid #CCC;
2251 .preset-input-wrap li:last-child {
2255 .preset-input-wrap .label {
2256 background: #F6F6F6;
2260 .preset-input-access-wrap input {
2263 border-left-width: 1px;
2266 .preset-input-wrap li:last-child input {
2267 border-bottom-right-radius: 4px;
2270 /* preset form numbers */
2272 input[type=number] {
2274 padding-right: 65px;
2280 border-left: 1px solid #CCC;
2281 display: inline-block;
2283 margin-bottom: -11px;
2287 .spin-control button {
2292 border-left: 1px solid #CCC;
2293 border-right: 1px solid #CCC;
2296 background: rgba(0, 0, 0, 0);
2299 .spin-control button.decrement {
2300 border-bottom-right-radius: 3px;
2303 .spin-control button.decrement::after,
2304 .spin-control button.increment::after {
2306 height: 0; width: 0;
2308 left: 0; right: 0; bottom: 0; top: 0;
2312 .spin-control button.decrement::after {
2313 border-top: 5px solid #CCC;
2314 border-left: 5px solid transparent;
2315 border-right: 5px solid transparent;
2318 .spin-control button.increment::after {
2319 border-bottom: 5px solid #CCC;
2320 border-left: 5px solid transparent;
2321 border-right: 5px solid transparent;
2324 /* preset form checkbox */
2326 .checkselect label:last-of-type {
2329 box-sizing: border-box;
2333 .checkselect label:hover {
2334 background: #f1f1f1;
2341 .checkselect input[type="checkbox"] {
2344 vertical-align: middle;
2348 .checkselect .set input[type="checkbox"] {
2352 /* Preset form radio button */
2354 .radio-wrap button {
2357 font-weight: normal;
2360 border-bottom: 1px solid #CCC;
2366 .radio-wrap button::before {
2368 display: inline-block;
2373 border: 1px solid #CCC;
2379 .radio-wrap button:hover::before {
2380 box-shadow: inset 0 0 0 2px white;
2383 .radio-wrap button.active::before {
2384 background: #7092ff;
2385 box-shadow: inset 0 0 0 2px white;
2388 .radio-wrap button:last-child {
2392 .radio-wrap button.active {
2393 background-color: #E8EBFF !important;
2396 .radio-wrap button.remove {
2397 border-radius: 0 0 3px 3px;
2399 .radio-wrap button.remove .icon {
2404 .radio-wrap button.remove::before {
2408 .form-field .localized-main {
2410 border-radius: 0 0 0 4px;
2413 .form-field .localized-add {
2416 border-radius: 0 0 4px 0;
2417 border-bottom: 1px solid #ccc;
2418 border-right: 1px solid #ccc;
2419 vertical-align: top;
2422 .form-field .localized-wrap .entry .localized-lang {
2429 .form-field .localized-wrap .entry .localized-value {
2435 .form-field .localized-wrap .entry .localized-remove {
2438 border-bottom: 1px solid #ccc;
2439 border-right: 1px solid #ccc;
2440 vertical-align: top;
2444 .form-field .localized-wrap .entry:last-child .localized-lang {
2445 border-radius: 0 0 0 4px;
2448 .form-field .localized-wrap .entry:last-child .localized-remove {
2449 border-radius: 0 0 4px 0;
2452 .form-field .wiki-lang {
2455 border-radius: 0 0 0 4px;
2458 .form-field .wiki-title {
2464 .form-field .wiki-link {
2465 border-radius: 0 0 4px 0;
2466 border: 1px solid #ccc;
2473 -webkit-transition: all 100ms;
2474 -moz-transition: all 100ms;
2475 -o-transition: all 100ms;
2476 transition: all 100ms;
2479 .form-field .wiki-link:hover {
2480 background: #ececec;
2483 #preset-input-maxspeed {
2485 border-radius: 0 0 0 4px;
2489 .form-field .maxspeed-unit {
2490 border-radius: 0 0 4px 0;
2491 border: 1px solid #ccc;
2502 /* Preset form address */
2504 .form-field .addr-housename {
2508 .form-field .addr-number {
2516 .form-field .addr-street {
2523 .form-field .addr-city {
2528 border-radius: 0 0 0 4px;
2531 .form-field .addr-postcode {
2535 border-radius: 0 0 4px 0;
2537 /* combobox dropdown */
2542 box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
2548 border: 1px solid #ccc;
2549 border-radius: 0 0 4px 4px;
2555 border-top:1px solid #ccc;
2556 text-overflow: ellipsis;
2557 white-space: nowrap;
2561 .combobox a.selected,
2563 background: #ececec;
2566 .combobox a:first-child {
2573 display:inline-block;
2574 border-top: 5px solid #ccc;
2575 border-left: 5px solid transparent;
2576 border-right: 5px solid transparent;
2581 .inspector-inner.additional-tags {
2582 border-top: 1px solid #ccc;
2598 border-bottom: 1px solid #CCC;
2599 border-left: 1px solid #CCC;
2602 .tag-row input.key {
2603 background-color: #f6f6f6;
2606 .tag-row input.value {
2607 border-right: 1px solid #CCC;
2610 .tag-row:first-child input.key {
2611 border-top: 1px solid #CCC;
2612 border-top-left-radius: 4px;
2615 .tag-row:first-child input.value {
2616 border-top: 1px solid #CCC;
2623 border: 1px solid #CCC;
2624 border-top-width: 0; border-left-width: 0;
2627 background: #fafafa;
2630 .tag-row button:hover {
2631 background: #f1f1f1;
2634 .tag-row button .icon {
2638 .tag-row:first-child button {
2639 border-top-width: 1px;
2642 .tag-row:first-child button.tag-help-button {
2643 border-top-right-radius: 4px;
2646 .tag-row:last-child button.tag-help-button {
2647 border-bottom-right-radius: 4px;
2650 .tag-row button.tag-help-button {
2654 /* Adding form fields to tag editor */
2656 .inspector-inner .add-tag {
2657 width: -webkit-calc(50% - 20px);
2658 width: calc(50% - 20px);
2661 background: rgba(0,0,0,.5);
2662 border-radius: 0 0 4px 4px;
2665 .inspector-inner .add-tag:hover {
2666 background: rgba(0,0,0,.8);
2669 .inspector-inner .add-tag .label {
2688 .grid-pane .tag-reference-wrap {
2689 padding: 10px 0 20px 0;
2692 .tag-pane .tag-reference-wrap {
2696 .additional-tags .tag-reference-wrap {
2697 border-bottom: 1px solid #ccc;
2701 .additional-tags div.tag-help {
2704 width: -webkit-calc(100% + 40px);
2705 width: calc(100% + 40px);
2711 width: -webkit-calc(33.3333% - 10px);
2712 width: calc(33.3333% - 10px);
2729 .map-control > button {
2731 background: rgba(0,0,0,.5);
2735 .map-control > button:hover {
2736 background: rgba(0, 0, 0, .8);
2739 .map-control > button.active:hover {
2740 background: #7092ff;
2751 padding: 10px 10px 0 10px;
2756 .zoombuttons button.zoom-in {
2757 border-radius:0 4px 0 0;
2760 /* Background Settings */
2762 .background-control button {
2763 border-radius:0 4px 0 0;
2766 .background-control button.active {
2771 border-top: 1px solid #CCC;
2775 .background-control .adjustments button:last-child {
2781 padding: 0 0 10px 12px;
2785 .hide-toggle:before {
2793 border-top: 4px solid transparent;
2794 border-bottom: 4px solid transparent;
2795 border-left: 8px solid #7092ff;
2798 .hide-toggle.expanded:before {
2799 border-top: 8px solid #7092ff;
2801 border-right: 4px solid transparent;
2802 border-left: 4px solid transparent;
2805 .background-control .nudge-container button {
2810 border-right: 1px solid #CCC;
2814 .background-control .nudge::after {
2819 left: 0; right: 0; top: 0; bottom: 0;
2824 .background-control .nudge.left::after {
2825 border-top: 5px solid transparent;
2826 border-bottom: 5px solid transparent;
2827 border-left: 5px solid #222;
2830 .background-control .nudge.right::after {
2831 border-top: 5px solid transparent;
2832 border-bottom: 5px solid transparent;
2833 border-right: 5px solid #222;
2836 .background-control .nudge.top::after {
2837 border-right: 5px solid transparent;
2838 border-left: 5px solid transparent;
2839 border-bottom: 5px solid #222;
2842 .background-control .nudge.bottom::after {
2843 border-right: 5px solid transparent;
2844 border-left: 5px solid transparent;
2845 border-top: 5px solid #222;
2849 background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
2855 border: 1px solid #ccc;
2858 .opacity-options li {
2864 .opacity-options li .select-box{
2871 .background-control li:hover .select-box,
2872 .background-control li.selected .select-box {
2873 border: 2px solid #7092ff;
2874 background: rgba(89, 123, 231, .5);
2878 .background-control li.selected:hover .select-box,
2879 .background-control li.selected .select-box {
2883 .background-control .opacity {
2885 display:inline-block;
2890 .background-control .layer-toggle-gpx .layer-extent {
2891 border-left: 1px solid #CCC;
2894 .background-control .layer-toggle-gpx.selected .layer-extent {
2895 display:inline-block;
2900 .geocode-control form {
2904 .geocode-control form {
2908 .geocode-control input {
2912 .geocode-control div.map-overlay {
2913 border-top: 1px solid #CCC;
2921 .geocode-control div.map-overlay span {
2922 display: inline-block;
2923 border-bottom: 1px solid #CCC;
2926 .geocode-control div.map-overlay span.not-found {
2931 .geocode-control a:focus {
2932 text-decoration: underline;
2937 .geolocate-control button {
2938 border-radius: 0 0 4px 0;
2944 margin-bottom: 20px;
2947 .help-control button {
2948 border-radius: 0 0 4px 0;
2955 padding: 20px 20px 20px 50px;
2962 margin-bottom: 20px;
2965 .help-wrap .left-content .body p code {
2971 /* This is two columns, 41.66666 x .4 = 16.6666 */
2975 margin-bottom: 20px;
2979 .help-wrap .toc li a,
2982 border: 1px solid #CCC;
2986 .help-wrap .toc li a {
2990 .help-wrap .toc li a:hover,
2991 .help-wrap .nav a:hover {
2992 background: #ececec;
2995 .help-wrap .toc li a.selected {
2996 background: #E8EBFF;
2999 .help-wrap .toc li:first-child a {
3000 border-radius: 4px 4px 0 0;
3003 .help-wrap .toc li:nth-last-child(2) a {
3004 border-bottom: 1px solid #CCC;
3005 border-radius: 0 0 4px 4px
3008 .help-wrap .toc li.walkthrough a {
3011 border-bottom: 1px solid #ccc;
3025 .help-wrap .nav a:first-child {
3026 border-radius: 4px 0 0 4px;
3029 .help-wrap .nav a:last-child:not(:only-child) {
3030 border-radius: 0 4px 4px 0;
3034 .help-wrap .nav a:only-child {
3040 ------------------------------------------------------- */
3054 transform-origin:0 0;
3055 -ms-transform-origin:0 0;
3056 -webkit-transform-origin:0 0;
3057 -moz-transform-origin:0 0;
3058 -o-transform-origin:0 0;
3059 -moz-user-select: none;
3060 -webkit-user-select: none;
3061 -ms-user-select: none;
3065 #surface, #layer-g, .layer-layer {
3070 ------------------------------------------------------- */
3077 white-space: nowrap;
3078 text-overflow: ellipsis;
3081 -webkit-transition: opacity 200ms;
3082 -moz-transition: opacity 200ms;
3083 transition: opacity 200ms;
3086 .about-block:hover {
3096 padding: 2px 4px 4px 4px;
3099 .source-switch a.live {
3100 background: #d32232;
3104 /* Attribution overlay */
3118 .user-list a:not(:last-child):after {
3128 .api-status.offline,
3129 .api-status.readonly {
3134 /* Account Information */
3143 border-left: 1px solid white;
3148 ------------------------------------------------------- */
3151 display: inline-block;
3160 margin-bottom: 10px;
3163 .modal .description {
3177 background:rgba(0,0,0,0.5);
3179 left:0px; right:0px; top:0px; bottom:0px;
3184 border-bottom: 1px solid #CCC;
3187 .modal-section:last-child {
3195 .modal-actions button,
3197 background-size: white;
3198 font-weight: normal;
3200 border-bottom: 1px solid #CCC;
3204 display: inline-block;
3208 /* `button` elements have box-algin: auto, need
3209 compensate this for `a`*/
3213 .modal-actions button:hover,
3214 .modal-actions a:hover {
3215 background-color: #ececec;
3218 .modal-actions a:before,
3219 .modal-actions button:before,
3220 .walkthrough a:before {
3221 background-size: white;
3227 margin-bottom: 10px;
3228 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px;
3231 .modal-actions :first-child {
3232 border-right: 1px solid #CCC;
3236 ------------------------------------------------------- */
3238 .modal-actions .restore:before {
3239 background-position: -500px -220px;
3242 .modal-actions .reset:before {
3243 background-position: -600px -220px;
3247 ------------------------------------------------------- */
3249 .modal-actions .twitter:before {
3250 background-position: -100px -220px;
3253 .modal-actions .facebook {
3254 border-left: 1px solid #ccc;
3257 .modal-actions .facebook:before {
3258 background-position: -200px -220px;
3262 ------------------------------------------------------- */
3264 .modal-actions .walkthrough:before,
3265 .walkthrough a:before {
3266 background-position: -300px -220px;
3269 .modal-actions .start:before {
3270 background-position: -400px -220px;
3274 ------------------------------------------------------- */
3276 .commit-modal a.user-info {
3277 display: inline-block;
3280 .commit-modal .commit-info {
3282 padding-bottom: 20px;
3285 .commit-modal .user-info img {
3289 .commit-modal h3 small.count {
3303 .commit-modal .changeset-list {
3305 border:1px solid #ccc;
3311 .commit-modal .warning-section .changeset-list button {
3312 border-left: 1px solid #CCC;
3315 .commit-modal .changeset-list li {
3317 border-top:1px solid #ccc;
3321 .changeset-list li span.count {
3326 .changeset-list li span.count:before { content: '('; }
3328 .changeset-list li span.count:after { content: ')'; }
3330 .changeset-list li:first-child { border-top: 0;}
3333 ------------------------------------------------------- */
3338 padding-right: 10px;
3352 .notice .zoom-to:hover {
3353 background: #d8e1ff;
3356 .notice .zoom-to .icon {
3361 .icon.zoom-in-invert {
3362 background-position: -240px -40px;
3366 ------------------------------------------------------- */
3403 display: inline-block;
3405 font-weight: normal;
3406 background-color: white;
3412 pointer-events: none;
3416 background: transparent;
3424 border-color: transparent;
3425 border-style: solid;
3429 border-left-color: white;
3430 border-width: 5px 0 5px 5px;
3448 border-color: transparent;
3449 border-style: solid;
3453 border-right-color: white;
3454 border-width: 5px 5px 5px 0;
3461 border-color: transparent;
3462 border-style: solid;
3465 .tooltip.top .tooltip-arrow {
3469 border-top-color: white;
3470 border-width: 5px 5px 0;
3473 .tooltip.right .tooltip-arrow {
3477 border-right-color: white;
3478 border-width: 5px 5px 5px 0;
3481 .tooltip.left .tooltip-arrow {
3485 border-left-color: white;
3486 border-width: 5px 0 5px 5px;
3489 .tooltip.bottom .tooltip-arrow {
3493 border-bottom-color: white;
3494 border-width: 0 5px 5px;
3498 /* Exceptions for tooltips that are up against the edge of the screen */
3499 .add-point .tooltip {
3500 left: -20px !important; }
3502 .curtain-tooltip.intro-points-add .tooltip-arrow,
3503 .add-point .tooltip .tooltip-arrow {
3507 .tooltip .keyhint-wrap {
3508 padding: 5px 0 5px 0;
3511 .tooltip-inner .keyhint {
3516 display: inline-block;
3518 border: 1px solid #CCC;
3525 .tooltip .keyhint .keyhint-label {
3526 display: inline-block;
3529 .tooltip-inner .keyhint::after {
3538 border: 1px solid #CCC;
3542 .radial-menu-tooltip {
3543 background-color: rgba(255, 255, 255, 0.8);
3549 .radial-menu-background {
3551 stroke-opacity: 0.5;
3558 .radial-menu-item:hover {
3562 .radial-menu-item:active {
3566 .radial-menu-item.disabled {
3568 fill: rgba(255,255,255,.5);
3571 .radial-menu .icon {
3572 pointer-events: none;
3580 stroke-dasharray: 5, 5;
3584 ------------------------------------------------------- */
3586 @media only screen and (max-width: 840px) {
3587 #bar .label {display: none;}
3588 #bar .icon.icon-pre-text { margin-right: 0;}
3589 /* override hide for save button */
3590 #bar .save .label { display: block;}
3594 ----------------------------------------------------- */
3596 ::-webkit-scrollbar {
3601 border-left: 1px solid #DDD;
3604 ::-webkit-scrollbar-track {
3605 background-clip: padding-box;
3606 border: solid transparent;
3610 ::-webkit-scrollbar-thumb {
3611 background-color: rgba(0,0,0,.2);
3612 background-clip: padding-box;
3613 border: solid transparent;
3614 border-width: 3px 3px 3px 4px;
3617 ::-webkit-scrollbar-track:hover,
3618 ::-webkit-scrollbar-track:active {
3619 background-color: rgba(0,0,0,.05);
3622 /* Intro walkthrough
3623 ----------------------------------------------------- */
3626 pointer-events: all;
3641 .intro-nav-wrap button.step {
3645 .intro-nav-wrap button.step.finished {
3646 background: #8cd05f;
3649 .intro-nav-wrap button.step .icon {
3653 .intro-nav-wrap button.step.finished .icon {
3654 display: inline-block;
3658 .curtain-tooltip .tooltip-inner {
3663 .curtain-tooltip .tooltip-inner {
3667 .curtain-tooltip .tooltip-inner .bold {
3670 border-top: 1px solid #CCC;
3673 margin-right: -20px;
3674 padding: 10px 20px 0 20px;
3677 .curtain-tooltip .tooltip-inner .bold:only-child {
3683 .curtain-tooltip.intro-points-describe {
3684 top: 133px !important;
3687 /* Tooltip illustrations */
3689 .intro-points-add .tooltip-inner::before,
3690 .intro-areas-add .tooltip-inner::before,
3691 .intro-lines-add .tooltip-inner::before {
3696 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -320px;
3699 .intro-areas-add .tooltip-inner::before {
3700 background-position: 0 -400px;
3703 .intro-lines-add .tooltip-inner::before {
3704 background-position: 0 -480px;
3707 .huge-modal-button {
3713 .huge-modal-button .illustration {
3716 background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -301px -220px;
3719 /* This file is generated by make. Do NOT edit manually. */
3721 .preset-icon{background-image:url(<%= asset_path("iD/img/maki-sprite.png") %>);background-repeat:no-repeat;width:24px;height:24px;}
3722 .preset-icon-line{background-image:url(<%= asset_path("iD/img/line-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
3723 .feature-airfield{background-position:-0px -34px;}
3724 .feature-airport{background-position:-0px -94px;}
3725 .feature-alcohol-shop{background-position:-0px -154px;}
3726 .feature-america-football{background-position:-0px -214px;}
3727 .feature-art-gallery{background-position:-0px -274px;}
3728 .feature-bank{background-position:-0px -334px;}
3729 .feature-bar{background-position:-0px -394px;}
3730 .feature-baseball{background-position:-0px -454px;}
3731 .feature-basketball{background-position:-0px -514px;}
3732 .feature-beer{background-position:-0px -574px;}
3733 .feature-bicycle{background-position:-0px -634px;}
3734 .feature-building{background-position:-0px -694px;}
3735 .feature-bus{background-position:-0px -754px;}
3736 .feature-cafe{background-position:-0px -814px;}
3737 .feature-campsite{background-position:-0px -874px;}
3738 .feature-cemetery{background-position:-0px -934px;}
3739 .feature-cinema{background-position:-0px -994px;}
3740 .feature-circle{background-position:-0px -1054px;}
3741 .feature-circle-stroked{background-position:-0px -1114px;}
3742 .feature-college{background-position:-0px -1174px;}
3743 .feature-commercial{background-position:-0px -1234px;}
3744 .feature-cricket{background-position:-0px -1294px;}
3745 .feature-cross{background-position:-0px -1354px;}
3746 .feature-dam{background-position:-0px -1414px;}
3747 .feature-danger{background-position:-0px -1474px;}
3748 .feature-disability{background-position:-0px -1534px;}
3749 .feature-embassy{background-position:-0px -1594px;}
3750 .feature-emergency-telephone{background-position:-0px -1654px;}
3751 .feature-fast-food{background-position:-0px -1714px;}
3752 .feature-ferry{background-position:-0px -1774px;}
3753 .feature-fire-station{background-position:-0px -1834px;}
3754 .feature-fuel{background-position:-0px -1894px;}
3755 .feature-garden{background-position:-0px -1954px;}
3756 .feature-golf{background-position:-0px -2014px;}
3757 .feature-grocery{background-position:-0px -2074px;}
3758 .feature-harbor{background-position:-0px -2134px;}
3759 .feature-heliport{background-position:-0px -2194px;}
3760 .feature-hospital{background-position:-0px -2254px;}
3761 .feature-industrial{background-position:-0px -2314px;}
3762 .feature-library{background-position:-0px -2374px;}
3763 .feature-lodging{background-position:-0px -2434px;}
3764 .feature-logging{background-position:-0px -2494px;}
3765 .feature-marker{background-position:-0px -2554px;}
3766 .feature-marker-stroked{background-position:-0px -2614px;}
3767 .feature-monument{background-position:-0px -2674px;}
3768 .feature-museum{background-position:-0px -2734px;}
3769 .feature-music{background-position:-0px -2794px;}
3770 .feature-oil-well{background-position:-0px -2854px;}
3771 .feature-park{background-position:-0px -2914px;}
3772 .feature-park2{background-position:-0px -2974px;}
3773 .feature-parking{background-position:-0px -3034px;}
3774 .feature-parking-garage{background-position:-0px -3094px;}
3775 .feature-pharmacy{background-position:-0px -3154px;}
3776 .feature-pitch{background-position:-0px -3214px;}
3777 .feature-place-of-worship{background-position:-0px -3274px;}
3778 .feature-police{background-position:-0px -3334px;}
3779 .feature-post{background-position:-0px -3394px;}
3780 .feature-prison{background-position:-0px -3454px;}
3781 .feature-rail{background-position:-0px -3514px;}
3782 .feature-rail-above{background-position:-0px -3574px;}
3783 .feature-rail-underground{background-position:-0px -3634px;}
3784 .feature-religious-christian{background-position:-0px -3694px;}
3785 .feature-religious-jewish{background-position:-0px -3754px;}
3786 .feature-religious-muslim{background-position:-0px -3814px;}
3787 .feature-restaurant{background-position:-0px -3874px;}
3788 .feature-roadblock{background-position:-0px -3934px;}
3789 .feature-school{background-position:-0px -3994px;}
3790 .feature-shop{background-position:-0px -4054px;}
3791 .feature-skiing{background-position:-0px -4114px;}
3792 .feature-slaughterhouse{background-position:-0px -4174px;}
3793 .feature-soccer{background-position:-0px -4234px;}
3794 .feature-square{background-position:-0px -4294px;}
3795 .feature-square-stroked{background-position:-0px -4354px;}
3796 .feature-star{background-position:-0px -4414px;}
3797 .feature-star-stroked{background-position:-0px -4474px;}
3798 .feature-swimming{background-position:-0px -4534px;}
3799 .feature-telephone{background-position:-0px -4594px;}
3800 .feature-tennis{background-position:-0px -4654px;}
3801 .feature-theatre{background-position:-0px -4714px;}
3802 .feature-toilets{background-position:-0px -4774px;}
3803 .feature-town-hall{background-position:-0px -4834px;}
3804 .feature-triangle{background-position:-0px -4894px;}
3805 .feature-triangle-stroked{background-position:-0px -4954px;}
3806 .feature-warehouse{background-position:-0px -5014px;}
3807 .feature-waste-basket{background-position:-0px -5074px;}
3808 .feature-water{background-position:-0px -5134px;}
3809 .feature-wetland{background-position:-0px -5194px;}
3810 .feature-zoo{background-position:-0px -5254px;}
3811 .preset-icon-line.feature-highway-motorway{background-position:-20px -25px;}
3812 .preset-icon-line.feature-highway-trunk{background-position:-80px -25px;}
3813 .preset-icon-line.feature-highway-primary{background-position:-140px -25px;}
3814 .preset-icon-line.feature-highway-secondary{background-position:-200px -25px;}
3815 .preset-icon-line.feature-highway-tertiary{background-position:-260px -25px;}
3816 .preset-icon-line.feature-highway-motorway-link{background-position:-320px -25px;}
3817 .preset-icon-line.feature-highway-trunk-link{background-position:-380px -25px;}
3818 .preset-icon-line.feature-highway-primary-link{background-position:-440px -25px;}
3819 .preset-icon-line.feature-highway-secondary-link{background-position:-500px -25px;}
3820 .preset-icon-line.feature-highway-tertiary-link{background-position:-560px -25px;}
3821 .preset-icon-line.feature-highway-residential{background-position:-620px -25px;}
3822 .preset-icon-line.feature-highway-unclassified{background-position:-680px -25px;}
3823 .preset-icon-line.feature-highway-service{background-position:-740px -25px;}
3824 .preset-icon-line.feature-highway-road{background-position:-800px -25px;}
3825 .preset-icon-line.feature-highway-track{background-position:-860px -25px;}
3826 .preset-icon-line.feature-highway-living-street{background-position:-920px -25px;}
3827 .preset-icon-line.feature-highway-path{background-position:-980px -25px;}
3828 .preset-icon-line.feature-highway-cycleway{background-position:-1040px -25px;}
3829 .preset-icon-line.feature-highway-footway{background-position:-1100px -25px;}
3830 .preset-icon-line.feature-highway-bridleway{background-position:-1160px -25px;}
3831 .preset-icon-line.feature-highway-steps{background-position:-1220px -25px;}
3832 .preset-icon-line.feature-railway-rail{background-position:-1280px -25px;}
3833 .preset-icon-line.feature-railway-disused{background-position:-1340px -25px;}
3834 .preset-icon-line.feature-railway-abandoned{background-position:-1400px -25px;}
3835 .preset-icon-line.feature-railway-subway{background-position:-1460px -25px;}
3836 .preset-icon-line.feature-railway-light-rail{background-position:-1520px -25px;}
3837 .preset-icon-line.feature-railway-monorail{background-position:-1580px -25px;}
3838 .preset-icon-line.feature-waterway-river{background-position:-1640px -25px;}
3839 .preset-icon-line.feature-waterway-stream{background-position:-1700px -25px;}
3840 .preset-icon-line.feature-waterway-canal{background-position:-1760px -25px;}
3841 .preset-icon-line.feature-waterway-ditch{background-position:-1820px -25px;}
3842 .preset-icon-line.feature-power-line{background-position:-1880px -25px;}
3843 .preset-icon-line.feature-other-line{background-position:-1940px -25px;}
3844 .preset-icon-line.feature-category-roads{background-position:-2000px -25px;}
3845 .preset-icon-line.feature-category-rail{background-position:-2060px -25px;}
3846 .preset-icon-line.feature-category-path{background-position:-2120px -25px;}
3847 .preset-icon-line.feature-category-water{background-position:-2180px -25px;}