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;
193 pointer-events: none;
203 pointer-events: stroke;
207 -webkit-transition: 200ms;
208 -moz-transition: 200ms;
227 g.point.hover:not(.selected) .shadow {
231 g.point.selected .shadow {
235 g.point.active, g.point.active * {
236 pointer-events: none;
239 /* vertices and midpoints */
251 g.vertex.shared .stroke {
268 g.vertex.vertex-hover {
272 .mode-draw-area g.vertex.vertex-hover,
273 .mode-draw-line g.vertex.vertex-hover,
274 .mode-add-area g.vertex.vertex-hover,
275 .mode-add-line g.vertex.vertex-hover,
276 .mode-add-point g.vertex.vertex-hover,
277 .mode-drag-node g.vertex.vertex-hover {
281 g.vertex.hover:not(.selected) .shadow,
282 g.midpoint.hover:not(.selected) .shadow {
286 g.vertex.selected .shadow {
290 .mode-draw-area g.midpoint,
291 .mode-draw-line g.midpoint,
292 .mode-add-area g.midpoint,
293 .mode-add-line g.midpoint,
294 .mode-add-point g.midpoint {
301 stroke-linecap: round;
302 stroke-linejoin: bevel;
316 path.shadow.hover:not(.selected) {
320 path.shadow.selected {
340 path.stroke.tag-natural {
343 path.fill.tag-natural {
347 path.stroke.tag-natural-water {
350 path.fill.tag-natural-water {
354 path.stroke.tag-amenity-school {
357 path.fill.tag-amenity-school {
362 path.stroke.tag-amenity-university {
365 path.fill.tag-amenity-university {
370 path.stroke.tag-building {
373 path.fill.tag-building {
380 path.stroke.tag-landuse,
381 path.stroke.tag-natural-wood,
382 path.stroke.tag-natural-tree,
383 path.stroke.tag-natural-grassland,
384 path.stroke.tag-leisure-pitch,
385 path.stroke.tag-leisure-park {
389 path.stroke.tag-landuse-retail,
390 path.stroke.tag-landuse-commercial {
394 path.stroke.tag-landuse-industrial {
398 path.stroke.tag-landuse-basin,
399 path.stroke.tag-landuse-reservoir {
403 path.stroke.tag-landuse-quarry {
407 path.stroke.tag-landuse-residential,
408 path.stroke.tag-landuse-construction {
412 path.stroke.tag-landuse-meadow,
413 path.stroke.tag-natural-wetland {
417 path.stroke.tag-natural-beach {
421 path.stroke.tag-natural-scrub {
425 path.fill.tag-landuse,
426 path.fill.tag-natural-wood,
427 path.fill.tag-natural-tree,
428 path.fill.tag-natural-grassland,
429 path.fill.tag-natural-grass,
430 path.fill.tag-leisure-pitch,
431 path.fill.tag-leisure-park {
436 path.fill.tag-landuse-retail,
437 path.fill.tag-landuse-residential,
438 path.fill.tag-landuse-commercial,
439 path.fill.tag-landuse-industrial {
443 path.fill.tag-natural-wetland,
444 path.fill.tag-natural-beach,
445 path.fill.tag-natural-scrub,
446 path.fill.tag-landuse-cemetery,
447 path.fill.tag-landuse-meadow,
448 path.fill.tag-landuse-farm,
449 path.fill.tag-landuse-farmland,
450 path.fill.tag-landuse-construction,
451 path.fill.tag-landuse-orchard {
452 /* background color is applied a further opacity later */
456 .pattern-color-beach,
457 .pattern-color-scrub,
458 .pattern-color-meadow,
459 .pattern-color-wetland,
460 .pattern-color-cemetery,
462 .pattern-color-farmland,
463 .pattern-color-construction,
464 .pattern-color-orchard {
468 path.fill.tag-landuse-basin,
469 path.fill.tag-landuse-reservoir {
473 path.fill.tag-landuse-quarry {
477 path.fill.tag-landuse-residential {
481 path.fill.tag-landuse-farm,
482 path.fill.tag-landuse-farmland {
483 fill: url(#pattern-farmland) #8cd05f;
487 .pattern-color-farmland {
488 fill: url(#pattern-farmland) #8cd05f;
491 path.fill.tag-landuse-meadow {
492 fill: url(#pattern-meadow) #b6e199;
494 .pattern-color-meadow {
498 path.fill.tag-natural-wetland {
499 fill: url(#pattern-wetland) #b6e199;
501 .pattern-color-wetland {
505 path.fill.tag-natural-beach {
506 fill: url(#pattern-beach) #ffff7e;
508 .pattern-color-beach {
512 path.fill.tag-natural-scrub {
513 fill: url(#pattern-scrub) #dbf08b;
515 .pattern-color-scrub {
519 path.fill.tag-landuse-cemetery {
520 fill: url(#pattern-cemetery) #8cd05f;
522 .pattern-color-cemetery {
526 path.fill.tag-landuse-orchard {
527 fill: url(#pattern-orchard) #8cd05f;
529 .pattern-color-orchard {
533 path.fill.tag-landuse-construction {
534 fill: url(#pattern-construction) #e06e5f;
536 .pattern-color-construction {
540 path.fill.tag-landuse-retail,
541 path.fill.tag-landuse-commercial {
545 path.fill.tag-landuse-industrial {
549 path.stroke.tag-amenity-parking {
552 path.fill.tag-amenity-parking {
557 path.fill.tag-boundary {
563 path.shadow.tag-highway {
566 path.casing.tag-highway {
570 path.stroke.tag-highway {
575 .low-zoom path.shadow.tag-highway {
578 .low-zoom path.casing.tag-highway {
581 .low-zoom path.stroke.tag-highway {
585 path.stroke.tag-highway-motorway,
586 path.stroke.tag-highway-motorway_link,
587 path.stroke.tag-construction-motorway {
591 path.casing.tag-highway-motorway,
592 path.casing.tag-highway-motorway_link,
593 path.casing.tag-construction-motorway {
597 path.stroke.tag-highway-trunk,
598 path.stroke.tag-highway-trunk_link,
599 path.stroke.tag-construction-trunk {
602 path.casing.tag-highway-trunk,
603 path.casing.tag-highway-trunk_link,
604 path.casing.tag-construction-trunk {
608 path.stroke.tag-highway-primary,
609 path.stroke.tag-highway-primary_link,
610 path.stroke.tag-construction-primary {
613 path.casing.tag-highway-primary,
614 path.casing.tag-highway-primary_link,
615 path.casing.tag-construction-primary {
619 path.stroke.tag-highway-secondary,
620 path.stroke.tag-highway-secondary_link,
621 path.stroke.tag-construction-secondary {
624 path.casing.tag-highway-secondary,
625 path.casing.tag-highway-secondary_link,
626 path.casing.tag-construction-secondary {
630 path.stroke.tag-highway-tertiary,
631 path.stroke.tag-highway-tertiary_link,
632 path.stroke.tag-construction-tertiary {
635 path.casing.tag-highway-tertiary,
636 path.casing.tag-highway-tertiary_link,
637 path.casing.tag-construction-tertiary {
641 path.stroke.tag-highway-unclassified,
642 path.stroke.tag-construction-unclassified {
645 path.casing.tag-highway-unclassified,
646 path.casing.tag-construction-unclassified {
650 path.stroke.tag-highway-residential,
651 path.stroke.tag-construction-residential {
654 path.casing.tag-highway-residential,
655 path.casing.tag-construction-residential {
659 path.stroke.tag-highway-living_street {
663 path.casing.tag-highway-living_street {
668 path.stroke.line.tag-highway-pedestrian {
670 stroke-dasharray: 2, 8;
671 stroke-width:4 !important;
672 shapeRendering: auto;
674 path.casing.line.tag-highway-pedestrian {
676 stroke-width:6 !important;
678 path.stroke.area.tag-highway-pedestrian {
682 path.fill.area.tag-highway-pedestrian {
686 path.stroke.tag-highway-service {
690 path.casing.tag-highway-service {
694 .low-zoom path.stroke.tag-highway-service {
697 .low-zoom path.casing.tag-highway-service {
701 path.stroke.tag-highway-track {
705 path.casing.tag-highway-track {
708 stroke-linecap: butt;
709 stroke-dasharray: 6, 6;
711 .low-zoom path.stroke.tag-highway-track {
714 .low-zoom path.casing.tag-highway-track {
718 path.stroke.tag-highway-path {
720 stroke-width: 1 !important;
721 stroke-linecap: butt;
722 stroke-dasharray: 8, 4;
724 path.casing.tag-highway-path {
725 stroke-width: 1 !important;
729 path.stroke.tag-highway-footway,
730 path.stroke.tag-highway-cycleway,
731 path.stroke.tag-highway-bridleway {
733 stroke-linecap: butt;
734 stroke-dasharray: 6, 6;
736 path.casing.tag-highway-footway,
737 path.casing.tag-highway-cycleway,
738 path.casing.tag-highway-bridleway {
743 .low-zoom path.stroke.tag-highway-footway,
744 .low-zoom path.stroke.tag-highway-cycleway,
745 .low-zoom path.stroke.tag-highway-bridleway {
748 .low-zoom path.casing.tag-highway-footway,
749 .low-zoom path.casing.tag-highway-cycleway,
750 .low-zoom path.casing.tag-highway-bridleway {
754 path.stroke.tag-highway-footway {
757 path.stroke.tag-highway-cycleway {
760 path.stroke.tag-highway-bridleway {
764 path.stroke.tag-highway-steps {
767 stroke-linecap: butt;
768 stroke-dasharray: 3, 3;
770 path.casing.tag-highway-steps {
777 path.stroke.tag-aeroway-taxiway {
781 path.shadow.tag-aeroway-runway {
784 path.stroke.tag-aeroway-runway {
787 stroke-linecap: butt;
788 stroke-dasharray: 24, 48;
790 path.casing.tag-aeroway-runway {
793 stroke-linecap: square;
795 path.fill.tag-aeroway-runway {
799 path.stroke.tag-aeroway-apron {
802 path.fill.tag-aeroway-apron {
810 path.casing.tag-bridge {
816 path.casing.tag-highway-living_street.tag-bridge,
817 path.casing.tag-highway-path.tag-bridge {
821 path.casing.line.tag-highway-pedestrian,
822 path.casing.tag-highway-service.tag-bridge,
823 path.casing.tag-highway-track.tag-bridge,
824 path.casing.tag-highway-steps.tag-bridge,
825 path.casing.tag-highway-footway.tag-bridge,
826 path.casing.tag-highway-cycleway.tag-bridge,
827 path.casing.tag-highway-bridleway.tag-bridge {
831 path.shadow.tag-highway-residential.tag-bridge {
835 path.shadow.tag-highway-living_street.tag-bridge,
836 path.shadow.tag-highway-path.tag-bridge,
837 path.shadow.line.tag-highway-pedestrian,
838 path.shadow.tag-highway-service.tag-bridge,
839 path.shadow.tag-highway-track.tag-bridge,
840 path.shadow.tag-highway-steps.tag-bridge,
841 path.shadow.tag-highway-footway.tag-bridge,
842 path.shadow.tag-highway-cycleway.tag-bridge,
843 path.shadow.tag-highway-bridleway.tag-bridge {
849 path.stroke.tag-highway.tag-tunnel {
853 path.casing.tag-highway.tag-tunnel {
857 path.stroke.tag-highway-construction,
858 path.casing.tag-highway-construction {
859 stroke-linecap: butt;
860 stroke-dasharray: 7, 7;
865 .low-zoom path.stroke.tag-highway-construction,
866 .low-zoom path.casing.tag-highway-construction {
867 stroke-linecap: butt;
868 stroke-dasharray: 5, 5;
873 .line.stroke.tag-railway {
876 stroke-linecap: butt;
877 stroke-dasharray: 12,12;
879 .line.casing.tag-railway {
884 .line.stroke.tag-railway-abandoned {
887 .line.casing.tag-railway-abandoned {
891 .line.stroke.tag-railway-subway {
894 .line.casing.tag-railway-subway {
898 .line.stroke.tag-railway-platform {
901 stroke-dasharray: none;
903 .line.casing.tag-railway-platform {
909 path.fill.tag-waterway {
913 path.stroke.tag-waterway {
917 path.casing.tag-waterway {
922 path.stroke.tag-waterway-river {
925 path.casing.tag-waterway-river {
929 path.stroke.tag-waterway-ditch {
933 path.casing.tag-waterway-ditch {
940 path.stroke.tag-power {
944 path.casing.tag-power {
950 path.stroke.tag-boundary {
953 stroke-linecap: butt;
954 stroke-dasharray: 20, 5, 5, 5;
956 path.casing.tag-boundary {
961 path.casing.tag-boundary-protected_area,
962 path.casing.tag-boundary-national_park {
969 pointer-events: none;
974 .oneway .textpath.tag-waterway {
978 marker#oneway-marker path {
993 text.pointlabel-halo,
1000 text-anchor: middle;
1001 pointer-events: none;
1002 -webkit-transition: opacity 100ms linear;
1003 transition: opacity 100ms linear;
1004 -moz-transition: opacity 100ms linear;
1007 .linelabel-halo .textpath,
1008 .linelabel .textpath {
1009 dominant-baseline: middle;
1012 /* Opera doesn't support dominant-baseline. See #715 */
1013 .opera .linelabel-halo .textpath,
1014 .opera .linelabel .textpath {
1015 baseline-shift: -33%;
1016 dominant-baseline: auto;
1023 stroke-miterlimit: 1;
1037 cursor: auto; /* Opera */
1038 cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
1039 cursor: -webkit-image-set(
1040 url(<%= asset_path("iD/img/cursor-grab.png") %>) 1x,
1041 url(<%= asset_path("iD/img/cursor-grab2x.png") %>) 2x
1045 .mode-browse .point,
1046 .mode-select .point {
1047 cursor: pointer; /* Opera */
1048 cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
1049 cursor: -webkit-image-set(
1050 url(<%= asset_path("iD/img/cursor-select-point.png") %>) 1x,
1051 url(<%= asset_path("iD/img/cursor-select-point2x.png") %>) 2x
1055 .mode-select .vertex,
1056 .mode-browse .vertex {
1057 cursor: pointer; /* Opera */
1058 cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
1059 cursor: -webkit-image-set(
1060 url(<%= asset_path("iD/img/cursor-select-vertex.png") %>) 1x,
1061 url(<%= asset_path("iD/img/cursor-select-vertex2x.png") %>) 2x
1066 .mode-select .line {
1067 cursor: pointer; /* Opera */
1068 cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
1069 cursor: -webkit-image-set(
1070 url(<%= asset_path("iD/img/cursor-select-line.png") %>) 1x,
1071 url(<%= asset_path("iD/img/cursor-select-line2x.png") %>) 2x
1076 .mode-browse .area {
1077 cursor: pointer; /* Opera */
1078 cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
1079 cursor: -webkit-image-set(
1080 url(<%= asset_path("iD/img/cursor-select-area.png") %>) 1x,
1081 url(<%= asset_path("iD/img/cursor-select-area2x.png") %>) 2x
1085 .mode-select .midpoint,
1086 .mode-browse .midpoint {
1087 cursor: pointer; /* Opera */
1088 cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
1089 cursor: -webkit-image-set(
1090 url(<%= asset_path("iD/img/cursor-select-split.png") %>) 1x,
1091 url(<%= asset_path("iD/img/cursor-select-split2x.png") %>) 2x
1095 .mode-select .behavior-multiselect .point,
1096 .mode-select .behavior-multiselect .vertex,
1097 .mode-select .behavior-multiselect .line,
1098 .mode-select .behavior-multiselect .area {
1099 cursor: pointer; /* Opera */
1100 cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
1101 cursor: -webkit-image-set(
1102 url(<%= asset_path("iD/img/cursor-select-add.png") %>) 1x,
1103 url(<%= asset_path("iD/img/cursor-select-add2x.png") %>) 2x
1107 .mode-select .behavior-multiselect .selected {
1108 cursor: pointer; /* Opera */
1109 cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
1110 cursor: -webkit-image-set(
1111 url(<%= asset_path("iD/img/cursor-select-remove.png") %>) 1x,
1112 url(<%= asset_path("iD/img/cursor-select-remove2x.png") %>) 2x
1117 #map .vertex:active,
1120 #map .midpoint:active,
1121 #map .mode-select .selected {
1122 cursor: pointer; /* Opera */
1123 cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */
1124 cursor: -webkit-image-set(
1125 url(<%= asset_path("iD/img/cursor-select-acting.png") %>) 1x,
1126 url(<%= asset_path("iD/img/cursor-select-acting2x.png") %>) 2x
1130 .mode-draw-line #map,
1131 .mode-draw-area #map,
1132 .mode-add-line #map,
1133 .mode-add-area #map,
1134 .mode-drag-node #map {
1135 cursor: crosshair; /* Opera */
1136 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1137 cursor: -webkit-image-set(
1138 url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x,
1139 url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x
1143 .mode-draw-line .way.hover,
1144 .mode-draw-area .way.hover,
1145 .mode-add-line .way.hover,
1146 .mode-add-area .way.hover,
1147 .mode-drag-node .way.hover {
1148 cursor: crosshair; /* Opera */
1149 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
1150 cursor: -webkit-image-set(
1151 url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 1x,
1152 url(<%= asset_path("iD/img/cursor-draw-connect-line2x.png") %>) 2x
1156 .mode-draw-line .vertex.hover,
1157 .mode-draw-area .vertex.hover,
1158 .mode-add-line .vertex.hover,
1159 .mode-add-area .vertex.hover,
1160 .mode-drag-node .vertex.hover {
1161 cursor: crosshair; /* Opera */
1162 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
1163 cursor: -webkit-image-set(
1164 url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 1x,
1165 url(<%= asset_path("iD/img/cursor-draw-connect-vertex2x.png") %>) 2x
1169 .mode-add-point #map,
1173 cursor: crosshair; /* Opera */
1174 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1175 cursor: -webkit-image-set(
1176 url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x,
1177 url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x
1182 pointer-events: visibleStroke;
1190 pointer-events: none;
1200 .mode-draw-line .vertex.active,
1201 .mode-draw-area .vertex.active,
1202 .mode-drag-node .vertex.active {
1206 .mode-draw-line .way.active,
1207 .mode-draw-area .way.active,
1208 .mode-drag-node .active {
1209 pointer-events: none;
1212 /* Ensure drawing doesn't interact with area fills. */
1213 .mode-add-point .area.fill,
1214 .mode-draw-line .area.fill,
1215 .mode-draw-area .area.fill,
1216 .mode-add-line .area.fill,
1217 .mode-add-area .area.fill,
1218 .mode-drag-node .area.fill {
1219 pointer-events: none;
1222 ------------------------------------------------------- */
1225 Opera misbehaves when the window is resized vertically unless 100% width + height are
1226 applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
1234 font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif;
1244 vertical-align: middle;
1287 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
1288 -moz-box-sizing: border-box;
1289 -webkit-box-sizing: border-box;
1290 box-sizing: border-box;
1293 a, button, input, textarea {
1294 -webkit-tap-highlight-color:rgba(0,0,0,0);
1295 -webkit-touch-callout:none;
1300 .checkselect label:hover,
1301 .opacity-options li,
1303 cursor: pointer; /* Opera */
1304 cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
1305 cursor: -webkit-image-set(
1306 url(<%= asset_path("iD/img/cursor-pointer.png") %>) 1x,
1307 url(<%= asset_path("iD/img/cursor-pointer2x.png") %>) 2x
1315 margin-bottom: 20px;
1320 h4:last-child { margin-bottom: 0;}
1326 margin-bottom: 10px;
1332 padding-bottom: 10px;
1336 outline-color: transparent;
1337 outline-style: none;
1360 -webkit-transition: all 100ms;
1361 -moz-transition: all 100ms;
1362 -o-transition: all 100ms;
1363 transition: all 100ms;
1371 ------------------------------------------------------- */
1375 font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
1385 background-color: white;
1386 border:1px solid #ccc;
1391 text-overflow: ellipsis;
1392 -webkit-transition: all 200ms;
1393 -moz-transition: all 200ms;
1394 -o-transition: all 200ms;
1395 transition: all 200ms;
1400 background-color: #F1F1F1;
1403 input[type="checkbox"],
1404 input[type="radio"] {
1412 /* remove bottom border radius when combobox is open */
1413 .combobox + * textarea:focus,
1414 .combobox + * input:focus {
1415 border-bottom-left-radius: 0 !important;
1416 border-bottom-right-radius: 0 !important;
1422 background-color: white;
1423 border-collapse: collapse;
1432 table.tags, table.tags td, table.tags th {
1433 border: 1px solid #CCC;
1438 ------------------------------------------------------- */
1440 .col0 { float:left; width:04.1666%; }
1441 .col1 { float:left; width:08.3333%; }
1442 .col2 { float:left; width:16.6666%; }
1443 .col3 { float:left; width:25.0000%; max-width: 300px; }
1444 .col4 { float:left; width:33.3333%; max-width: 400px; }
1445 .col5 { float:left; width:41.6666%; max-width: 500px; }
1446 .col6 { float:left; width:50.0000%; max-width: 600px; }
1447 .col7 { float:left; width:58.3333%; }
1448 .col8 { float:left; width:66.6666%; }
1449 .col9 { float:left; width:75.0000%; }
1450 .col10 { float:left; width:83.3333%; }
1451 .col11 { float:left; width:91.6666%; }
1452 .col12 { float:left; width:100.0000%; }
1455 ------------------------------------------------------- */
1457 ul li { list-style: none;}
1459 .toggle-list > label {
1464 background-color: white;
1467 -moz-transition: all 100ms;
1468 -o-transition: all 100ms;
1469 transition: all 100ms;
1472 .toggle-list > label:hover {
1473 background-color: #ececec;
1476 .toggle-list > label:not(:last-child) {
1477 border-bottom: 1px solid #ccc;
1480 .toggle-list > label:last-child {
1481 border-radius: 0 0 3px 3px;
1484 .toggle-list label > span {
1487 white-space: nowrap;
1488 text-overflow: ellipsis;
1491 .toggle-list > label.active {
1492 background: #E8EBFF;
1497 border-left: 1px solid rgba(255,255,255,.5);
1498 padding: 5px 0 5px 5px;
1502 ul.link-list li:last-child {
1509 ------------------------------------------------------- */
1516 background: #f6f6f6;
1521 background: #ececec;
1526 background:rgba(0,0,0,.5);
1531 .fr { float: right;}
1545 box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
1549 background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
1550 background-size:5px 5px;
1585 display: inline-block;
1588 /* Crashes Safari: https://github.com/openstreetmap/iD/issues/1188 */
1589 /*-webkit-transition: all 100ms;*/
1590 -moz-transition: all 100ms;
1591 -o-transition: all 100ms;
1592 transition: all 100ms;
1597 background-color: #ececec;
1602 background-color: rgba(255,255,255,.25);
1603 color: rgba(0,0,0,.5);
1608 background: #7092ff;
1618 background-color: #fafafa;
1621 button.minor .icon {
1625 button.minor:hover {
1626 background-color: #f1f1f1;
1630 display: inline-block;
1635 .button-wrap button:only-child {
1639 .button-wrap:last-of-type {
1645 border-right: 1px solid rgba(0,0,0,.5);
1648 .joined button:first-child {
1649 border-radius:4px 0 0 4px;
1652 .joined button:last-child {
1653 border-right-width: 0;
1654 border-radius:0 4px 4px 0;
1658 background: #7092ff;
1661 button.action:focus,
1662 button.action:hover {
1663 background: #597BE7;
1666 button.save.has-count {
1670 button.save .count {
1674 button.save.has-count .count {
1678 background: rgba(255, 255, 255, .5);
1685 margin-left: 8.3333%;
1688 button.save.has-count .count::before {
1697 border-top: 6px solid transparent;
1698 border-bottom: 6px solid transparent;
1699 border-right: 6px solid rgba(255,255,255,.5);
1705 display:inline-block;
1709 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 0;
1710 text-indent:-9999px;
1726 /* Definitions for every icon */
1727 .icon.alert { background-position: 0 0;}
1729 .icon.add-point { background-position: -20px 0;}
1731 .icon.add-line { background-position: -40px 0;}
1733 .icon.add-area { background-position: -60px 0;}
1734 .icon.undo { background-position: -80px 0;}
1735 .icon.redo { background-position: -100px 0;}
1736 .icon.apply { background-position: -120px 0;}
1737 .icon.save { background-position: -140px 0;}
1738 .icon.close { background-position: -160px 0;}
1739 .icon.delete { background-position: -180px 0;}
1740 .icon.remove { background-position: -200px 0;}
1741 .icon.inspect { background-position: -220px 0;}
1742 .icon.plus { background-position: -240px 0;}
1743 .icon.search { background-position: -280px 0;}
1744 .icon.geocode { background-position: -280px 0;}
1745 .icon.layers { background-position: -300px 0;}
1746 .icon.avatar { background-position: -320px 0;}
1747 .icon.nearby { background-position: -340px 0;}
1748 .icon.geolocate { background-position: -360px 0;}
1749 .icon.warning { background-position: -380px 0;}
1750 .icon.bug { background-position: -400px 0;}
1751 .icon.back { background-position: -420px 0;}
1752 .icon.forward { background-position: -440px 0;}
1753 .icon.help { background-position: -460px 0;}
1754 .icon.relation { background-position: -520px 0;}
1755 .icon.relation.route { background-position: -540px 0;}
1756 .icon.relation.multipolygon { background-position: -560px 0;}
1757 .icon.vertex { background-position: -580px 0;}
1759 .icon.inspect.light { background-position: -220px -20px;}
1760 .icon.plus.light { background-position: -240px -20px;}
1761 .icon.zoom-in { background-position: -240px -20px;}
1762 .icon.zoom-out { background-position: -260px -20px;}
1763 .icon.geocode.light { background-position: -280px -20px;}
1764 .icon.layers.light { background-position: -300px -20px;}
1765 .icon.avatar.light { background-position: -320px -20px;}
1766 .icon.nearby.light { background-position: -340px -20px;}
1767 .icon.geolocate.light { background-position: -360px -20px;}
1768 .icon.bug.light { background-position: -400px -20px;}
1769 .icon.help.light { background-position: -460px -20px;}
1771 .icon.back.blue { background-position: -420px -20px;}
1772 .icon.forward.blue { background-position: -440px -20px;}
1774 button[disabled] .icon.alert { background-position: 0 -40px;}
1775 button[disabled] .icon.add-point { background-position: -20px -40px;}
1776 button[disabled] .icon.add-line { background-position: -40px -40px;}
1777 button[disabled] .icon.add-area { background-position: -60px -40px;}
1778 button.disabled .icon.undo { background-position: -80px -40px;}
1779 button.disabled .icon.redo { background-position: -100px -40px;}
1780 button[disabled] .apply.icon { background-position: -120px -40px;}
1781 button[disabled] .close.icon { background-position: -160px -40px;}
1782 button[disabled] .delete.icon { background-position: -180px -40px;}
1783 button[disabled] .icon.remove { background-position: -200px -40px;}
1784 button[disabled] .icon.inspect { background-position: -220px -40px;}
1785 button[disabled] .icon.zoom-in { background-position: -240px -40px;}
1786 button[disabled] .icon.zoom-out { background-position: -260px -40px;}
1787 button[disabled] .icon.geocode { background-position: -280px -40px;}
1788 button[disabled] .icon.layers { background-position: -300px -40px;}
1789 button[disabled] .icon.avatar { background-position: -320px -40px;}
1790 button[disabled] .icon.nearby { background-position: -340px -40px;}
1792 .icon.point.deleted { background-position: -302px -80px;}
1793 .icon.line.deleted { background-position: -320px -80px;}
1794 .icon.area.deleted { background-position: -340px -80px;}
1796 .icon.point.created { background-position: -302px -100px;}
1797 .icon.line.created { background-position: -320px -100px;}
1798 .icon.area.created { background-position: -340px -100px;}
1800 .icon.point.modified { background-position: -22px 0; }
1802 .icon.modified { opacity: .5; }
1804 /* Out link is special */
1806 .icon.out-link { height: 14px; width: 14px; background-position: -500px 0;}
1807 a:hover .icon.out-link { background-position: -500px -14px;}
1809 .icon.plus-dark { background-position: -240px -40px;}
1811 /* Universal preset icons */
1813 .icon.source { background-position: 0 -200px;}
1814 .icon.address { background-position: -20px -200px;}
1815 .icon.telephone { background-position: -40px -200px;}
1816 .icon.website { background-position: -60px -200px;}
1817 .icon.elevation { background-position: -80px -200px;}
1818 .icon.wikipedia { background-position: -100px -200px;}
1819 .icon.note { background-position: -120px -200px;}
1820 .icon.wheelchair { background-position: -140px -200px;}
1822 /* ToolBar / Persistent UI Elements
1823 ------------------------------------------------------- */
1836 /* Header for modals / panes
1837 ------------------------------------------------------- */
1840 border-bottom: 1px solid #ccc;
1848 white-space: nowrap;
1849 text-overflow: ellipsis;
1867 .preset-list-pane .header button {
1884 padding: 5px 30px 5px 30px;
1885 border-top: 1px solid #ccc;
1886 background-color: #fafafa;
1890 .sidebar-component .body {
1899 ------------------------------------------------------- */
1907 background: #f6f6f6;
1910 .sidebar-component {
1936 .feature-list-pane .inspector-body {
1940 .preset-list-pane .inspector-body {
1944 .entity-editor-pane .inspector-body {
1948 .selection-list-pane .inspector-body {
1957 #sidebar .search-header .icon {
1962 pointer-events: none;
1965 #sidebar .search-header input {
1973 border-bottom-width: 1px;
1987 .feature-list-item {
1990 border-bottom: 1px solid #ccc;
1994 .feature-list-item .label {
1997 white-space: nowrap;
1998 text-overflow: ellipsis;
2000 border-left: 1px solid rgba(0, 0, 0, .1);
2001 -moz-transition: all 100ms;
2002 -o-transition: all 100ms;
2003 transition: all 100ms;
2006 .feature-list-item .label .icon {
2010 .feature-list-item:hover .label {
2011 background-color: #ececec;
2014 .feature-list-item .entity-type {
2018 .feature-list-item:hover .entity-type {
2022 .feature-list-item .entity-name {
2023 font-weight: normal;
2029 ------------------------------------------------------- */
2035 padding: 20px 20px 10px 20px;
2036 border-bottom: 1px solid #ccc;
2039 .preset-list-button-wrap {
2041 margin-bottom: 10px;
2045 .preset-list-button {
2049 border: 1px solid #ccc;
2052 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
2053 background: #ececec;
2064 .preset-icon-relation {
2069 .preset-list-button .label {
2070 background-color: #f6f6f6;
2079 white-space: nowrap;
2080 text-overflow: ellipsis;
2082 border-left: 1px solid rgba(0, 0, 0, .1);
2083 -moz-transition: all 100ms;
2084 -o-transition: all 100ms;
2085 transition: all 100ms;
2086 border-radius: 0 3px 3px 0;
2089 .preset-list-button:hover .label {
2090 background-color: #ececec;
2093 .preset-list-item button.tag-reference-button {
2095 border: 1px solid #CCC;
2096 border-radius: 0 3px 3px 0;
2101 background: #fafafa;
2104 .preset-list-item button.tag-reference-button .icon {
2108 .current .preset-list-button,
2109 .current .preset-list-button .label {
2110 background-color: #E8EBFF;
2113 .category .preset-list-button:after,
2114 .category .preset-list-button:before {
2118 left: -1px; right: -1px;
2119 border: 1px solid #ccc;
2120 border-bottom: none;
2121 border-radius: 6px 6px 0 0;
2125 .category .preset-list-button:before {
2129 .subgrid .preset-list {
2130 padding: 10px 10px 0 10px;
2134 width: -webkit-calc(100% + 20px);
2139 border: solid rgba(0, 0, 0, 0);
2141 border-bottom-color: #f1f1f1;
2145 margin-left: -webkit-calc(50% - 10px);
2149 /* Preset icon colors */
2151 .preset-icon-fill.icon-area {
2157 left: 7px; top: 7px;
2158 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -240px -80px;
2161 .preset-icon-fill.tag-shop,
2162 .preset-icon-fill.tag-building {
2163 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px;
2166 .preset-icon-fill.tag-natural-water {
2167 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -60px -80px;
2170 .preset-icon-fill.tag-landuse,
2171 .preset-icon-fill.tag-natural-wood,
2172 .preset-icon-fill.tag-natural-tree,
2173 .preset-icon-fill.tag-natural-grassland,
2174 .preset-icon-fill.tag-leisure-park {
2175 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -120px -80px;
2178 .preset-icon-fill.tag-amenity-parking {
2179 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -180px -80px;
2182 /* preset form basics */
2188 .inspector-preset .preset-form {
2190 margin: 0 10px 20px 10px;
2194 .entity-editor-pane .preset-list-item::after {
2203 border: solid rgba(0, 0, 0, 0);
2205 border-bottom-color: #ececec;
2208 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
2214 margin-bottom: 10px;
2216 -webkit-transition: margin-bottom 200ms;
2217 -moz-transition: margin-bottom 200ms;
2218 -o-transition: margin-bottom 200ms;
2219 transition: margin-bottom 200ms;
2222 .form-field:last-child {
2229 border: 1px solid #cfcfcf;
2230 padding: 5px 0 5px 10px;
2231 background: #f6f6f6;
2233 border-radius: 4px 4px 0 0;
2237 .form-label-button-wrap {
2243 background: transparent;
2247 .form-label-button-wrap .icon {
2251 .form-label button {
2252 border-left: 1px solid #CCC;
2256 background: #fafafa;
2259 .form-label .modified-icon,
2260 .form-field .remove-icon {
2264 .modified .form-label .modified-icon,
2265 .present .form-label .remove-icon {
2266 display: inline-block;
2269 .form-field > input,
2270 .form-field > textarea,
2271 .form-field .preset-input-wrap {
2272 border: 1px solid #CCC;
2275 border-radius: 0 0 4px 4px;
2278 .form-field textarea {
2283 border-bottom: 1px solid #CCC
2286 /* Preset form (hover mode) */
2288 .inspector-hover .checkselect label:last-of-type,
2289 .inspector-hover .preset-input-wrap .label,
2290 .inspector-hover input,
2291 .inspector-hover label {
2292 background: #ececec;
2296 .inspector-hover .checkselect label:last-of-type {
2300 /* hide and remove from layout */
2302 .inspector-hover label input[type="checkbox"],
2303 .inspector-hover label input[type="radio"],
2304 .inspector-hover .toggle-list label,
2305 .inspector-hover .toggle-list label span,
2306 .inspector-hover .inspector-inner .add-tag,
2307 .inspector-hover .inspector-inner .add-relation,
2308 .inspector-hover .toggle-list label.remove .icon {
2312 opacity: 0 !important;
2318 /* hide but preserve in layout */
2319 .inspector-hover .entity-editor-pane button.minor,
2320 .inspector-hover .combobox-caret,
2321 .inspector-hover .entity-editor-pane .header button,
2322 .inspector-hover .spin-control,
2323 .inspector-hover .hide-toggle:before,
2324 .inspector-hover .more-buttons,
2325 .inspector-hover .form-label-button-wrap,
2326 .inspector-hover .tag-reference-button,
2327 .inspector-hover .view-on-osm {
2331 /* Styles for raw tag inspector on hover */
2332 .inspector-hover .tag-row .key-wrap,
2333 .inspector-hover .tag-row .input-wrap-position {
2337 .inspector-hover .tag-row:first-child input.value {
2338 border-top-right-radius: 4px;
2341 .inspector-hover .tag-row:last-child input.value {
2342 border-bottom-right-radius: 4px;
2345 .inspector-hover .tag-row:last-child input.key {
2346 border-bottom-left-radius: 4px;
2349 .inspector-hover .inspector-body .more-buttons {
2354 /* Unstyle button fields */
2355 .inspector-hover .toggle-list label.active,
2356 .inspector-hover .entity-editor-pane a.hide-toggle {
2358 background-color: transparent;
2364 .inspector-hover .toggle-list button.active {
2368 /* Add placeholder only on hover for radio buttons */
2369 .inspector-hover .toggle-list .placeholder {
2377 /* Hide placeholder for radio buttons if another is active, or not in hover state */
2378 .toggle-list label.active ~ .placeholder,
2379 .toggle-list .placeholder {
2386 -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2387 -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2388 -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2389 transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2392 /* first phase hover-to-active animations */
2397 .preset-input-wrap .label {
2398 -webkit-transition: all 200ms;
2399 -moz-transition: all 200ms;
2400 -o-transition: all 200ms;
2401 transition: all 200ms;
2404 /* second phase hover-to-active animations */
2407 .checkselect label:last-of-type {
2408 -webkit-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2409 -moz-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2410 -o-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2411 transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2414 .entity-editor-pane button.minor,
2416 .entity-editor-pane .header button,
2417 .toggle-list label span,
2421 .hide-toggle:before,
2422 .entity-editor-pane .toggle-list label::before,
2423 .entity-editor-pane .toggle-list label.remove .icon {
2424 -webkit-transition: opacity 200ms 200ms;
2425 -moz-transition: opacity 200ms 200ms;
2426 -o-transition: opacity 200ms 200ms;
2427 transition: opacity 200ms 200ms;
2430 .entity-editor-pane a.hide-toggle {
2431 -webkit-transition: padding-left 200ms 200ms, color 200ms 200ms;
2432 -moz-transition: padding-left 200ms 200ms, color 200ms 200ms;
2433 -o-transition: padding-left 200ms 200ms, color 200ms 200ms;
2434 transition: padding-left 200ms 200ms, color 200ms 200ms;
2437 .entity-editor-pane .toggle-list label:not(.active) {
2438 -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2439 -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2440 -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2441 transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2444 .entity-editor-pane .toggle-list label {
2445 -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2446 -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2447 -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2448 transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2451 /* adding additional preset fields */
2453 .inspector-body .more-buttons {
2456 -webkit-transition: padding 200ms 200ms, max-height 200ms 200ms;
2457 -moz-transition: padding 200ms 200ms, max-height 200ms 200ms;
2458 -o-transition: padding 200ms 200ms, max-height 200ms 200ms;
2459 transition: padding 200ms 200ms, max-height 200ms 200ms;
2462 button.preset-add-field {
2463 background: #f6f6f6;
2466 -webkit-transition: width 200ms;
2467 -moz-transition: width 200ms;
2468 -o-transition: width 200ms;
2469 transition: width 200ms;
2472 button.preset-add-field:hover {
2473 background: #ececec;
2476 /* set width based on # of buttons */
2478 button.preset-add-field:only-child {
2482 button.preset-add-field:nth-last-child(2),
2483 button.preset-add-field:nth-last-child(2) ~ button.preset-add-field {
2487 button.preset-add-field:nth-last-child(3),
2488 button.preset-add-field:nth-last-child(3) ~ button.preset-add-field {
2492 button.preset-add-field:nth-last-child(4),
2493 button.preset-add-field:nth-last-child(4) ~ button.preset-add-field {
2497 button.preset-add-field:nth-last-child(5),
2498 button.preset-add-field:nth-last-child(5) ~ button.preset-add-field {
2502 button.preset-add-field:nth-last-child(6),
2503 button.preset-add-field:nth-last-child(6) ~ button.preset-add-field {
2507 button.preset-add-field:nth-last-child(7),
2508 button.preset-add-field:nth-last-child(7) ~ button.preset-add-field {
2512 button.preset-add-field:nth-last-child(8),
2513 button.preset-add-field:nth-last-child(8) ~ button.preset-add-field {
2517 .preset-fav button.fav {
2523 /* preset form access */
2525 .preset-input-wrap .label {
2527 background: #F6F6F6;
2531 .form-field-access .preset-input-wrap li {
2532 border-bottom: 1px solid #CCC;
2534 .form-field-access .preset-input-wrap li:last-child {
2538 .preset-input-access-wrap input {
2541 border-left-width: 1px;
2544 .preset-input-wrap li:last-child input {
2545 border-bottom-right-radius: 4px;
2548 /* preset form numbers */
2550 input[type=number] {
2558 display: inline-block;
2560 margin-bottom: -11px;
2564 .spin-control button {
2570 border-left: 1px solid #CCC;
2572 background: rgba(0, 0, 0, 0);
2575 .spin-control button.decrement {
2576 border-bottom-right-radius: 3px;
2579 .spin-control button.decrement::after,
2580 .spin-control button.increment::after {
2582 height: 0; width: 0;
2584 left: 0; right: 0; bottom: 0; top: 0;
2588 .spin-control button.decrement::after {
2589 border-top: 5px solid #CCC;
2590 border-left: 5px solid transparent;
2591 border-right: 5px solid transparent;
2594 .spin-control button.increment::after {
2595 border-bottom: 5px solid #CCC;
2596 border-left: 5px solid transparent;
2597 border-right: 5px solid transparent;
2600 /* preset form checkbox */
2602 .checkselect label:last-of-type {
2609 .checkselect label:hover {
2610 background: #f1f1f1;
2617 .checkselect label:not(.set) input[type="checkbox"] {
2621 /* Preset form radio button */
2623 .toggle-list button.remove {
2624 border-radius: 0 0 3px 3px;
2627 .toggle-list button.remove .icon {
2632 .toggle-list button.remove::before {
2636 .form-field .wiki-lang {
2640 .form-field .wiki-title {
2644 .form-field .wiki-title ~ .combobox-caret {
2649 .form-field .wiki-link {
2651 background: #fafafa;
2656 .form-field .wiki-link:hover {
2657 background: #f1f1f1;
2660 #preset-input-maxspeed {
2662 border-radius: 0 0 0 4px;
2666 .form-field .maxspeed-unit {
2667 border-radius: 0 0 4px 0;
2671 /* Name + translate form */
2673 .form-field .localized-main {
2677 .form-field .button-input-action {
2682 border: 1px solid #CCC;
2683 border-top-width: 0;
2684 border-right-width: 0;
2685 border-radius: 0 0 4px 0;
2687 vertical-align: top;
2690 .form-field .localized-wrap {
2694 .form-field .localized-wrap .entry {
2699 .form-field .localized-wrap .entry::before {
2712 .form-field .localized-wrap .entry .localized-lang {
2714 border-top-width: 0;
2717 .form-field .localized-wrap .entry .localized-value {
2718 border-top-width: 0;
2719 border-radius: 0 0 4px 4px;
2722 .form-field .localized-wrap .form-label button {
2723 border-top-right-radius: 3px;
2726 /* Preset form address */
2728 .form-field .addr-housename {
2733 .form-field .addr-number {
2741 .form-field .addr-street {
2748 .form-field .addr-city {
2753 border-radius: 0 0 0 4px;
2756 .form-field .addr-postcode {
2760 border-radius: 0 0 4px 0;
2762 /* combobox dropdown */
2767 box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
2773 border: 1px solid #ccc;
2774 border-radius: 0 0 4px 4px;
2780 border-top:1px solid #ccc;
2781 text-overflow: ellipsis;
2782 white-space: nowrap;
2786 .combobox a.selected,
2788 background: #ececec;
2791 .combobox a:first-child {
2796 display: inline-block;
2801 vertical-align: top;
2804 .combobox-caret::after {
2806 height: 0; width: 0;
2808 left: 0; right: 0; bottom: 0; top: 0;
2810 border-top: 5px solid #ccc;
2811 border-left: 5px solid transparent;
2812 border-right: 5px solid transparent;
2815 /* Raw Tag Editor */
2831 border-bottom: 1px solid #CCC;
2832 border-left: 1px solid #CCC;
2836 .tag-row .input-wrap-position {
2840 -webkit-transition: width 200ms;
2841 -moz-transition: width 200ms;
2842 -o-transition: width 200ms;
2843 transition: width 200ms;
2846 .tag-row input.key {
2848 background-color: #f6f6f6;
2851 .tag-row input.value {
2852 border-right: 1px solid #CCC;
2855 .tag-row:first-child input.key {
2856 border-top: 1px solid #CCC;
2857 border-top-left-radius: 4px;
2860 .tag-row:first-child input.value {
2861 border-top: 1px solid #CCC;
2868 border: 1px solid #CCC;
2869 border-top-width: 0;
2870 border-left-width: 0;
2873 .tag-row button:hover {
2874 background: #f1f1f1;
2877 .tag-row button .icon {
2881 .tag-row:first-child button {
2882 border-top-width: 1px;
2885 .tag-row:first-child .tag-reference-button {
2886 border-top-right-radius: 4px;
2889 .tag-row:last-child .tag-reference-button {
2890 border-bottom-right-radius: 4px;
2893 .tag-row .tag-reference-button {
2898 background: #fafafa;
2901 /* Adding form fields to tag editor */
2903 .inspector-inner .add-tag {
2907 background: rgba(0,0,0,.5);
2908 border-radius: 0 0 4px 4px;
2911 .inspector-inner .add-tag:hover {
2912 background: rgba(0,0,0,.8);
2915 .inspector-inner .add-tag .label {
2921 button.minor.tag-reference-loading {
2922 background-color: #f5f5f5;
2925 .tag-reference-loading .icon {
2926 background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
2927 background-position: 0 0;
2930 .tag-reference-body {
2934 .tag-reference-body p,
2935 .tag-reference-body img {
2939 .tag-reference-body p:last-child {
2940 padding-bottom: 10px;
2943 .tag-reference-body a {
2945 padding-bottom: 10px;
2948 .preset-list .tag-reference-body {
2953 .preset-list .tag-reference-body a {
2954 padding-bottom: 20px;
2957 .preset-list .tag-reference-body p,
2958 .preset-list .tag-reference-body img {
2962 .raw-tag-editor .tag-reference-body {
2963 border-bottom: 1px solid #ccc;
2968 .raw-tag-editor .tag-reference-body p:last-child {
2969 padding-bottom: 20px;
2972 .raw-tag-editor .tag-reference-body a {
2973 padding-bottom: 20px;
2979 width: -webkit-calc(33.3333% - 10px);
2980 width: calc(33.3333% - 10px);
2985 margin-bottom: 20px;
2988 /* Raw relation membership editor */
2990 .raw-member-editor .member-list li:first-child,
2991 .raw-membership-editor .member-list li:first-child {
2995 .raw-member-editor .member-row,
2996 .raw-membership-editor .member-row {
3000 .raw-member-editor .member-row .member-entity-name,
3001 .raw-membership-editor .member-row .member-entity-name {
3002 font-weight: normal;
3006 .member-incomplete .member-delete {
3010 .member-row-new .member-entity-input {
3011 border-radius: 4px 4px 0 0;
3012 border: 1px solid #cfcfcf;
3018 background: rgba(0,0,0,.5);
3023 .add-relation:hover {
3024 background: rgba(0,0,0,.8);
3037 .map-control > button {
3039 background: rgba(0,0,0,.5);
3043 .map-control > button:hover {
3044 background: rgba(0, 0, 0, .8);
3047 .map-control > button.active,
3048 .map-control > button.active:hover {
3049 background: #7092ff;
3054 .zoombuttons button.zoom-in {
3055 border-radius: 4px 0 0 0;
3058 /* Background Settings */
3060 .background-control button {
3061 border-radius: 4px 0 0 0;
3064 .background-control {
3069 border: 1px solid #CCC;
3072 .background-control .adjustments button:last-child {
3076 .background-control .hide-toggle {
3077 padding-bottom: 10px;
3081 margin-bottom: 10px;
3082 border: 1px solid #CCC;
3089 background-color: white;
3093 .layer-list > li:first-child {
3094 border-radius: 3px 3px 0 0;
3097 .layer-list > li:last-child {
3098 border-radius: 0 0 3px 3px;
3101 .layer-list > li:only-child {
3105 .layer-list li:not(:last-child) {
3106 border-bottom: 1px solid #ccc;
3109 .layer-list li:hover {
3110 background-color: #ececec;
3113 .layer-list li.active {
3114 background: #E8EBFF;
3123 .layer-list label > span {
3126 white-space: nowrap;
3127 text-overflow: ellipsis;
3136 .hide-toggle:before {
3144 border-top: 4px solid transparent;
3145 border-bottom: 4px solid transparent;
3146 border-left: 8px solid #7092ff;
3149 .hide-toggle.expanded:before {
3150 border-top: 8px solid #7092ff;
3152 border-right: 4px solid transparent;
3153 border-left: 4px solid transparent;
3156 .background-control .nudge-container button {
3160 border-right: 1px solid #CCC;
3164 .background-control .nudge::after {
3169 left: 0; right: 0; top: 0; bottom: 0;
3174 .background-control .nudge.left::after {
3175 border-top: 5px solid transparent;
3176 border-bottom: 5px solid transparent;
3177 border-left: 5px solid #222;
3180 .background-control .nudge.right::after {
3181 border-top: 5px solid transparent;
3182 border-bottom: 5px solid transparent;
3183 border-right: 5px solid #222;
3186 .background-control .nudge.top::after {
3187 border-right: 5px solid transparent;
3188 border-left: 5px solid transparent;
3189 border-bottom: 5px solid #222;
3192 .background-control .nudge.bottom::after {
3193 border-right: 5px solid transparent;
3194 border-left: 5px solid transparent;
3195 border-top: 5px solid #222;
3199 background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
3205 border: 1px solid #ccc;
3208 .opacity-options li {
3214 .opacity-options li .select-box{
3221 .background-control li:hover .select-box,
3222 .background-control li.selected .select-box {
3223 border: 2px solid #7092ff;
3224 background: rgba(89, 123, 231, .5);
3228 .background-control li.selected:hover .select-box,
3229 .background-control li.selected .select-box {
3233 .background-control .opacity {
3235 display:inline-block;
3240 .background-control .layer-toggle-gpx button {
3244 border-left: 1px solid #CCC;
3248 .background-control .layer-toggle-gpx button .icon {
3252 .background-control .layer-toggle-gpx button.layer-extent {
3253 border-radius: 0 3px 3px 0;
3258 .geolocate-control {
3259 margin-bottom: 10px;
3262 .geolocate-control button {
3263 border-radius: 0 0 0 4px;
3266 .map-overlay.content {
3270 padding: 20px 50px 20px 20px;
3275 .background-control .map-overlay {
3280 .help-control button {
3281 border-radius: 0 0 0 4px;
3286 margin-bottom: 20px;
3289 .help-wrap .left-content .body p code {
3295 /* This is two columns, 41.66666 x .4 = 16.6666 */
3299 margin-bottom: 20px;
3303 .help-wrap .toc li a,
3306 border: 1px solid #CCC;
3310 .help-wrap .toc li a {
3314 .help-wrap .toc li a:hover,
3315 .help-wrap .nav a:hover {
3316 background: #ececec;
3319 .help-wrap .toc li a.selected {
3320 background: #E8EBFF;
3323 .help-wrap .toc li:first-child a {
3324 border-radius: 4px 4px 0 0;
3327 .help-wrap .toc li:nth-last-child(2) a {
3328 border-bottom: 1px solid #CCC;
3329 border-radius: 0 0 4px 4px
3332 .help-wrap .toc li.walkthrough a {
3335 border-bottom: 1px solid #ccc;
3349 .help-wrap .nav a:first-child {
3350 border-radius: 4px 0 0 4px;
3353 .help-wrap .nav a:last-child:not(:only-child) {
3354 border-radius: 0 4px 4px 0;
3358 .help-wrap .nav a:only-child {
3364 ------------------------------------------------------- */
3374 transform-origin:0 0;
3375 -ms-transform-origin:0 0;
3376 -webkit-transform-origin:0 0;
3377 -moz-transform-origin:0 0;
3378 -o-transform-origin:0 0;
3379 -moz-user-select: none;
3380 -webkit-user-select: none;
3381 -ms-user-select: none;
3385 #supersurface, .layer-layer {
3394 ------------------------------------------------------- */
3402 -webkit-transition: opacity 200ms;
3403 -moz-transition: opacity 200ms;
3404 transition: opacity 200ms;
3407 .about-block:hover {
3417 padding: 2px 4px 4px 4px;
3420 .source-switch a.live {
3421 background: #d32232;
3425 /* Attribution overlay */
3426 .base-layer-attribution,
3427 .overlay-layer-attribution {
3434 .base-layer-attribution {
3438 .overlay-layer-attribution {
3442 .overlay-layer-attribution .attribution:not(:last-child):after {
3451 .user-list a:not(:last-child):after {
3461 .api-status.offline,
3462 .api-status.readonly {
3467 /* Account Information */
3476 border-left: 1px solid white;
3481 ------------------------------------------------------- */
3484 display: inline-block;
3493 margin-bottom: 10px;
3496 .modal .description {
3512 background:rgba(0,0,0,0.5);
3514 left:0px; right:0px; top:0px; bottom:0px;
3519 border-bottom: 1px solid #CCC;
3522 .modal-section:last-child {
3530 .modal-actions button,
3531 .save-success a.button {
3532 font-weight: normal;
3534 border-bottom: 1px solid #CCC;
3538 display: inline-block;
3541 .modal-actions button:hover
3542 .save-success a.button:hover {
3543 background-color: #ececec;
3546 .modal-actions button:before,
3547 .save-success a.button:before,
3548 .walkthrough a:before {
3554 margin-bottom: 10px;
3555 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px;
3558 .modal-actions :first-child {
3559 border-right: 1px solid #CCC;
3563 ------------------------------------------------------- */
3565 .modal-actions .restore:before {
3566 background-position: -600px -220px;
3569 .modal-actions .reset:before {
3570 background-position: -700px -220px;
3574 ------------------------------------------------------- */
3580 .save-success .button {
3584 .save-success .button.social {
3588 .save-success .button.social:before {
3592 .save-success .button.osm:before {
3593 background-position: 0px -220px;
3596 .save-success .button.twitter:before {
3597 background-position: -100px -245px;
3600 .save-success .button.facebook:before {
3601 background-position: -200px -245px;
3604 .save-success .button.google:before {
3605 background-position: -300px -245px;
3609 ------------------------------------------------------- */
3611 .modal-actions .walkthrough:before,
3612 .walkthrough a:before {
3613 background-position: -400px -220px;
3616 .modal-actions .start:before {
3617 background-position: -500px -220px;
3621 ------------------------------------------------------- */
3623 .mode-save a.user-info {
3624 display: inline-block;
3627 .mode-save .commit-form {
3631 .mode-save button.action {
3639 .mode-save .user-info img {
3643 .mode-save h3 small.count {
3657 .mode-save .commit-info {
3658 margin-bottom: 10px;
3661 .mode-save .changeset-list {
3662 border:1px solid #ccc;
3667 .mode-save .warning-section .changeset-list button {
3668 border-left: 1px solid #CCC;
3671 .mode-save .changeset-list li {
3673 border-top:1px solid #ccc;
3678 .mode-save .changeset-list li:hover {
3679 background-color: #ececec;
3682 .mode-save .changeset-list .alert {
3686 .changeset-list li span.count {
3691 .mode-save .commit-section .changeset-list button {
3692 border-left: 1px solid #CCC;
3695 .changeset-list li span.count:before { content: '('; }
3697 .changeset-list li span.count:after { content: ')'; }
3699 .changeset-list li:first-child { border-top: 0;}
3702 ------------------------------------------------------- */
3724 .notice .zoom-to:hover {
3725 background: #d8e1ff;
3728 .notice .zoom-to .icon {
3733 .icon.zoom-in-invert {
3734 background-position: -240px -40px;
3738 ------------------------------------------------------- */
3775 display: inline-block;
3779 font-weight: normal;
3780 background-color: white;
3786 pointer-events: none;
3790 background: transparent;
3798 border-color: transparent;
3799 border-style: solid;
3803 border-left-color: white;
3804 border-width: 5px 0 5px 5px;
3822 border-color: transparent;
3823 border-style: solid;
3827 border-right-color: white;
3828 border-width: 5px 5px 5px 0;
3835 border-color: transparent;
3836 border-style: solid;
3839 .tooltip.top .tooltip-arrow {
3843 border-top-color: white;
3844 border-width: 5px 5px 0;
3847 .tooltip.right .tooltip-arrow {
3851 border-right-color: white;
3852 border-width: 5px 5px 5px 0;
3855 .tooltip.left .tooltip-arrow {
3859 border-left-color: white;
3860 border-width: 5px 0 5px 5px;
3863 .tooltip.bottom .tooltip-arrow {
3867 border-bottom-color: white;
3868 border-width: 0 5px 5px;
3872 background: #F6F6F6;
3874 margin: 10px -10px -10px;
3877 .tooltip-inner .keyhint {
3881 display: inline-block;
3883 border: 1px solid #CCC;
3889 .tooltip-inner .keyhint::after {
3898 border: 1px solid #CCC;
3902 /* Exceptions for tooltip layouts */
3904 /* make tooltips in panels dark */
3905 .map-overlay .tooltip.top .tooltip-arrow,
3906 .entity-editor-pane .tooltip.top .tooltip-arrow,
3907 .warning-section .tooltip.top .tooltip-arrow {
3908 border-top-color: #000;
3911 .map-overlay .tooltip.bottom .tooltip-arrow,
3912 .entity-editor-pane .tooltip.bottom .tooltip-arrow,
3913 .warning-section .tooltip.bottom .tooltip-arrow {
3914 border-bottom-color: #000;
3917 .map-overlay .tooltip.left .tooltip-arrow,
3918 .entity-editor-pane .tooltip.left .tooltip-arrow,
3919 .warning-section .tooltip.left .tooltip-arrow {
3920 border-left-color: #000;
3923 .map-overlay .tooltip.right .tooltip-arrow,
3924 .entity-editor-pane .tooltip.right .tooltip-arrow,
3925 .warning-section .tooltip.right .tooltip-arrow {
3926 border-right-color: #000;
3929 .map-overlay .tooltip-inner,
3930 .entity-editor-pane .tooltip-inner,
3931 .warning-section .tooltip-inner {
3935 /* commit warning tooltips need to be closer */
3936 .warning-section .tooltip.top {
3940 /* Uncramp map-control tooltips */
3941 .map-control .tooltip {
3944 /* Move over tooltips that are near the edge of screen */
3945 .add-point .tooltip {
3946 left: 33.3333% !important;
3949 .curtain-tooltip.intro-points-add .tooltip-arrow,
3950 .add-point .tooltip .tooltip-arrow {
3954 .radial-menu-tooltip {
3961 .radial-menu-background {
3963 stroke-opacity: 0.5;
3970 .radial-menu-item:hover {
3974 .radial-menu-item:active {
3978 .radial-menu-item.disabled {
3980 fill: rgba(255,255,255,.5);
3983 .radial-menu .icon {
3984 pointer-events: none;
3992 stroke-dasharray: 5, 5;
3996 ------------------------------------------------------- */
3998 @media only screen and (max-width: 840px) {
3999 #bar .icon.icon-pre-text { margin-right: 0;}
4000 /* override hide for save button */
4001 #bar .save .label { display: block;}
4005 ----------------------------------------------------- */
4007 ::-webkit-scrollbar {
4012 border-left: 1px solid #DDD;
4015 ::-webkit-scrollbar-track {
4016 background-clip: padding-box;
4017 border: solid transparent;
4021 ::-webkit-scrollbar-thumb {
4022 background-color: rgba(0,0,0,.2);
4023 background-clip: padding-box;
4024 border: solid transparent;
4025 border-width: 3px 3px 3px 4px;
4028 ::-webkit-scrollbar-track:hover,
4029 ::-webkit-scrollbar-track:active {
4030 background-color: rgba(0,0,0,.05);
4033 /* Intro walkthrough
4034 ----------------------------------------------------- */
4037 pointer-events: all;
4052 .intro-nav-wrap button.step {
4056 .intro-nav-wrap button.step.finished {
4057 background: #8cd05f;
4060 .intro-nav-wrap button.step .icon {
4064 .intro-nav-wrap button.step.finished .icon {
4065 display: inline-block;
4069 .curtain-tooltip .tooltip-inner {
4074 .curtain-tooltip .tooltip-inner {
4078 .curtain-tooltip .tooltip-inner .bold {
4081 border-top: 1px solid #CCC;
4084 margin-right: -20px;
4085 padding: 10px 20px 0 20px;
4088 .curtain-tooltip .tooltip-inner .bold:only-child {
4094 .curtain-tooltip.intro-points-describe {
4095 top: 133px !important;
4098 /* Tooltip illustrations */
4100 .intro-points-add .tooltip-inner::before,
4101 .intro-areas-add .tooltip-inner::before,
4102 .intro-lines-add .tooltip-inner::before {
4108 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -320px;
4111 .intro-areas-add .tooltip-inner::before {
4112 background-position: 0 -400px;
4115 .intro-lines-add .tooltip-inner::before {
4116 background-position: 0 -480px;
4119 .huge-modal-button {
4125 .huge-modal-button .illustration {
4128 background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -400px -220px;
4131 /* This file is generated by make. Do NOT edit manually. */
4133 .preset-icon{background-image:url(<%= asset_path("iD/img/maki-sprite.png") %>);background-repeat:no-repeat;width:24px;height:24px;}
4134 .preset-icon-line{background-image:url(<%= asset_path("iD/img/line-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
4135 .preset-icon-relation{background-image:url(<%= asset_path("iD/img/relation-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
4136 .feature-circle-stroked{background-position:-0px -0px;}
4137 .feature-circle{background-position:-54px -0px;}
4138 .feature-square-stroked{background-position:-108px -0px;}
4139 .feature-square{background-position:-162px -0px;}
4140 .feature-triangle-stroked{background-position:-216px -0px;}
4141 .feature-triangle{background-position:-0px -24px;}
4142 .feature-star-stroked{background-position:-54px -24px;}
4143 .feature-star{background-position:-108px -24px;}
4144 .feature-cross{background-position:-162px -24px;}
4145 .feature-marker-stroked{background-position:-216px -24px;}
4146 .feature-marker{background-position:-0px -48px;}
4147 .feature-religious-jewish{background-position:-54px -48px;}
4148 .feature-religious-christian{background-position:-108px -48px;}
4149 .feature-religious-muslim{background-position:-162px -48px;}
4150 .feature-cemetery{background-position:-216px -48px;}
4151 .feature-rocket{background-position:-0px -72px;}
4152 .feature-airport{background-position:-54px -72px;}
4153 .feature-heliport{background-position:-108px -72px;}
4154 .feature-rail{background-position:-162px -72px;}
4155 .feature-rail-metro{background-position:-216px -72px;}
4156 .feature-rail-light{background-position:-0px -96px;}
4157 .feature-bus{background-position:-54px -96px;}
4158 .feature-fuel{background-position:-108px -96px;}
4159 .feature-parking{background-position:-162px -96px;}
4160 .feature-parking-garage{background-position:-216px -96px;}
4161 .feature-airfield{background-position:-0px -120px;}
4162 .feature-roadblock{background-position:-54px -120px;}
4163 .feature-ferry{background-position:-108px -120px;}
4164 .feature-harbor{background-position:-162px -120px;}
4165 .feature-bicycle{background-position:-216px -120px;}
4166 .feature-park{background-position:-0px -144px;}
4167 .feature-park2{background-position:-54px -144px;}
4168 .feature-museum{background-position:-108px -144px;}
4169 .feature-lodging{background-position:-162px -144px;}
4170 .feature-monument{background-position:-216px -144px;}
4171 .feature-zoo{background-position:-0px -168px;}
4172 .feature-garden{background-position:-54px -168px;}
4173 .feature-campsite{background-position:-108px -168px;}
4174 .feature-theatre{background-position:-162px -168px;}
4175 .feature-art-gallery{background-position:-216px -168px;}
4176 .feature-pitch{background-position:-0px -192px;}
4177 .feature-soccer{background-position:-54px -192px;}
4178 .feature-america-football{background-position:-108px -192px;}
4179 .feature-tennis{background-position:-162px -192px;}
4180 .feature-basketball{background-position:-216px -192px;}
4181 .feature-baseball{background-position:-0px -216px;}
4182 .feature-golf{background-position:-54px -216px;}
4183 .feature-swimming{background-position:-108px -216px;}
4184 .feature-cricket{background-position:-162px -216px;}
4185 .feature-skiing{background-position:-216px -216px;}
4186 .feature-school{background-position:-0px -240px;}
4187 .feature-college{background-position:-54px -240px;}
4188 .feature-library{background-position:-108px -240px;}
4189 .feature-post{background-position:-162px -240px;}
4190 .feature-fire-station{background-position:-216px -240px;}
4191 .feature-town-hall{background-position:-0px -264px;}
4192 .feature-police{background-position:-54px -264px;}
4193 .feature-prison{background-position:-108px -264px;}
4194 .feature-embassy{background-position:-162px -264px;}
4195 .feature-beer{background-position:-216px -264px;}
4196 .feature-restaurant{background-position:-0px -288px;}
4197 .feature-cafe{background-position:-54px -288px;}
4198 .feature-shop{background-position:-108px -288px;}
4199 .feature-fast-food{background-position:-162px -288px;}
4200 .feature-bar{background-position:-216px -288px;}
4201 .feature-bank{background-position:-0px -312px;}
4202 .feature-grocery{background-position:-54px -312px;}
4203 .feature-cinema{background-position:-108px -312px;}
4204 .feature-pharmacy{background-position:-162px -312px;}
4205 .feature-hospital{background-position:-216px -312px;}
4206 .feature-danger{background-position:-0px -336px;}
4207 .feature-industrial{background-position:-54px -336px;}
4208 .feature-warehouse{background-position:-108px -336px;}
4209 .feature-commercial{background-position:-162px -336px;}
4210 .feature-building{background-position:-216px -336px;}
4211 .feature-place-of-worship{background-position:-0px -360px;}
4212 .feature-alcohol-shop{background-position:-54px -360px;}
4213 .feature-logging{background-position:-108px -360px;}
4214 .feature-oil-well{background-position:-162px -360px;}
4215 .feature-slaughterhouse{background-position:-216px -360px;}
4216 .feature-dam{background-position:-0px -384px;}
4217 .feature-water{background-position:-54px -384px;}
4218 .feature-wetland{background-position:-108px -384px;}
4219 .feature-disability{background-position:-162px -384px;}
4220 .feature-telephone{background-position:-216px -384px;}
4221 .feature-emergency-telephone{background-position:-0px -408px;}
4222 .feature-toilets{background-position:-54px -408px;}
4223 .feature-waste-basket{background-position:-108px -408px;}
4224 .feature-music{background-position:-162px -408px;}
4225 .feature-land-use{background-position:-216px -408px;}
4226 .feature-city{background-position:-0px -432px;}
4227 .feature-town{background-position:-54px -432px;}
4228 .feature-village{background-position:-108px -432px;}
4229 .feature-farm{background-position:-162px -432px;}
4230 .feature-bakery{background-position:-216px -432px;}
4231 .feature-dog-park{background-position:-0px -456px;}
4232 .feature-lighthouse{background-position:-54px -456px;}
4233 .feature-clothing-store{background-position:-108px -456px;}
4234 .feature-polling-place{background-position:-162px -456px;}
4235 .feature-playground{background-position:-216px -456px;}
4236 .feature-entrance{background-position:-0px -480px;}
4237 .feature-heart{background-position:-54px -480px;}
4238 .feature-london-underground{background-position:-108px -480px;}
4239 .feature-minefield{background-position:-162px -480px;}
4240 .feature-rail-underground{background-position:-216px -480px;}
4241 .feature-rail-above{background-position:-0px -504px;}
4242 .feature-camera{background-position:-54px -504px;}
4243 .feature-laundry{background-position:-108px -504px;}
4244 .feature-car{background-position:-162px -504px;}
4245 .feature-suitcase{background-position:-216px -504px;}
4246 .preset-icon-line.feature-highway-motorway{background-position:-20px -25px;}
4247 .preset-icon-line.feature-highway-trunk{background-position:-80px -25px;}
4248 .preset-icon-line.feature-highway-primary{background-position:-140px -25px;}
4249 .preset-icon-line.feature-highway-secondary{background-position:-200px -25px;}
4250 .preset-icon-line.feature-highway-tertiary{background-position:-260px -25px;}
4251 .preset-icon-line.feature-highway-motorway-link{background-position:-320px -25px;}
4252 .preset-icon-line.feature-highway-trunk-link{background-position:-380px -25px;}
4253 .preset-icon-line.feature-highway-primary-link{background-position:-440px -25px;}
4254 .preset-icon-line.feature-highway-secondary-link{background-position:-500px -25px;}
4255 .preset-icon-line.feature-highway-tertiary-link{background-position:-560px -25px;}
4256 .preset-icon-line.feature-highway-residential{background-position:-620px -25px;}
4257 .preset-icon-line.feature-highway-unclassified{background-position:-680px -25px;}
4258 .preset-icon-line.feature-highway-service{background-position:-740px -25px;}
4259 .preset-icon-line.feature-highway-road{background-position:-800px -25px;}
4260 .preset-icon-line.feature-highway-track{background-position:-860px -25px;}
4261 .preset-icon-line.feature-highway-living-street{background-position:-920px -25px;}
4262 .preset-icon-line.feature-highway-path{background-position:-980px -25px;}
4263 .preset-icon-line.feature-highway-cycleway{background-position:-1040px -25px;}
4264 .preset-icon-line.feature-highway-footway{background-position:-1100px -25px;}
4265 .preset-icon-line.feature-highway-bridleway{background-position:-1160px -25px;}
4266 .preset-icon-line.feature-highway-steps{background-position:-1220px -25px;}
4267 .preset-icon-line.feature-railway-rail{background-position:-1280px -25px;}
4268 .preset-icon-line.feature-railway-disused{background-position:-1340px -25px;}
4269 .preset-icon-line.feature-railway-abandoned{background-position:-1400px -25px;}
4270 .preset-icon-line.feature-railway-subway{background-position:-1460px -25px;}
4271 .preset-icon-line.feature-railway-light-rail{background-position:-1520px -25px;}
4272 .preset-icon-line.feature-railway-monorail{background-position:-1580px -25px;}
4273 .preset-icon-line.feature-waterway-river{background-position:-1640px -25px;}
4274 .preset-icon-line.feature-waterway-stream{background-position:-1700px -25px;}
4275 .preset-icon-line.feature-waterway-canal{background-position:-1760px -25px;}
4276 .preset-icon-line.feature-waterway-ditch{background-position:-1820px -25px;}
4277 .preset-icon-line.feature-power-line{background-position:-1880px -25px;}
4278 .preset-icon-line.feature-other-line{background-position:-1940px -25px;}
4279 .preset-icon-line.feature-category-roads{background-position:-2000px -25px;}
4280 .preset-icon-line.feature-category-rail{background-position:-2060px -25px;}
4281 .preset-icon-line.feature-category-path{background-position:-2120px -25px;}
4282 .preset-icon-line.feature-category-water{background-position:-2180px -25px;}
4283 .preset-icon-line.feature-ferry{background-position:-2240px -25px;}
4284 .preset-icon-line.feature-pipeline{background-position:-2300px -25px;}
4285 .preset-icon-relation.feature-relation{background-position:-20px -25px;}
4286 .preset-icon-relation.feature-restriction{background-position:-80px -25px;}
4287 .preset-icon-relation.feature-multipolygon{background-position:-140px -25px;}
4288 .preset-icon-relation.feature-boundary{background-position:-200px -25px;}
4289 .preset-icon-relation.feature-route{background-position:-260px -25px;}
4290 .preset-icon-relation.feature-route-road{background-position:-320px -25px;}
4291 .preset-icon-relation.feature-route-bicycle{background-position:-380px -25px;}
4292 .preset-icon-relation.feature-route-foot{background-position:-440px -25px;}
4293 .preset-icon-relation.feature-route-bus{background-position:-500px -25px;}
4294 .preset-icon-relation.feature-route-train{background-position:-560px -25px;}
4295 .preset-icon-relation.feature-route-detour{background-position:-620px -25px;}
4296 .preset-icon-relation.feature-route-tram{background-position:-680px -25px;}
4297 .preset-icon-relation.feature-route-ferry{background-position:-740px -25px;}
4298 .preset-icon-relation.feature-route-power{background-position:-800px -25px;}
4299 .preset-icon-relation.feature-route-pipeline{background-position:-860px -25px;}
4300 .preset-icon-relation.feature-route-master{background-position:-920px -25px;}