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 svg[data-zoom="16"] path.shadow.tag-highway {
578 svg[data-zoom="16"] path.casing.tag-highway {
581 svg[data-zoom="16"] 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 svg[data-zoom="16"] path.stroke.tag-highway-service {
697 svg[data-zoom="16"] 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 svg[data-zoom="16"] path.stroke.tag-highway-track {
714 svg[data-zoom="16"] 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 svg[data-zoom="16"] path.stroke.tag-highway-footway,
744 svg[data-zoom="16"] path.stroke.tag-highway-cycleway,
745 svg[data-zoom="16"] path.stroke.tag-highway-bridleway {
748 svg[data-zoom="16"] path.casing.tag-highway-footway,
749 svg[data-zoom="16"] path.casing.tag-highway-cycleway,
750 svg[data-zoom="16"] 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 svg[data-zoom="16"] path.stroke.tag-highway-construction,
866 svg[data-zoom="16"] 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 svg[data-zoom="16"] path.stroke.tag-waterway-river {
932 svg[data-zoom="16"] path.casing.tag-waterway-river {
936 path.stroke.tag-waterway-ditch {
940 path.casing.tag-waterway-ditch {
947 path.stroke.tag-power {
951 path.casing.tag-power {
957 path.stroke.tag-boundary {
960 stroke-linecap: butt;
961 stroke-dasharray: 20, 5, 5, 5;
963 path.casing.tag-boundary {
968 path.casing.tag-boundary-protected_area,
969 path.casing.tag-boundary-national_park {
976 pointer-events: none;
981 .oneway .textpath.tag-waterway {
985 marker#oneway-marker path {
1000 text.pointlabel-halo,
1007 text-anchor: middle;
1008 pointer-events: none;
1009 -webkit-transition: opacity 100ms linear;
1010 transition: opacity 100ms linear;
1011 -moz-transition: opacity 100ms linear;
1014 .linelabel-halo .textpath,
1015 .linelabel .textpath {
1016 dominant-baseline: middle;
1019 /* Opera doesn't support dominant-baseline. See #715 */
1020 .opera .linelabel-halo .textpath,
1021 .opera .linelabel .textpath {
1022 baseline-shift: -33%;
1023 dominant-baseline: auto;
1030 stroke-miterlimit: 1;
1044 cursor: auto; /* Opera */
1045 cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
1046 cursor: -webkit-image-set(
1047 url(<%= asset_path("iD/img/cursor-grab.png") %>) 1x,
1048 url(<%= asset_path("iD/img/cursor-grab2x.png") %>) 2x
1052 .mode-browse .point,
1053 .mode-select .point {
1054 cursor: pointer; /* Opera */
1055 cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
1056 cursor: -webkit-image-set(
1057 url(<%= asset_path("iD/img/cursor-select-point.png") %>) 1x,
1058 url(<%= asset_path("iD/img/cursor-select-point2x.png") %>) 2x
1062 .mode-select .vertex,
1063 .mode-browse .vertex {
1064 cursor: pointer; /* Opera */
1065 cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
1066 cursor: -webkit-image-set(
1067 url(<%= asset_path("iD/img/cursor-select-vertex.png") %>) 1x,
1068 url(<%= asset_path("iD/img/cursor-select-vertex2x.png") %>) 2x
1073 .mode-select .line {
1074 cursor: pointer; /* Opera */
1075 cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
1076 cursor: -webkit-image-set(
1077 url(<%= asset_path("iD/img/cursor-select-line.png") %>) 1x,
1078 url(<%= asset_path("iD/img/cursor-select-line2x.png") %>) 2x
1083 .mode-browse .area {
1084 cursor: pointer; /* Opera */
1085 cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
1086 cursor: -webkit-image-set(
1087 url(<%= asset_path("iD/img/cursor-select-area.png") %>) 1x,
1088 url(<%= asset_path("iD/img/cursor-select-area2x.png") %>) 2x
1092 .mode-select .midpoint,
1093 .mode-browse .midpoint {
1094 cursor: pointer; /* Opera */
1095 cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
1096 cursor: -webkit-image-set(
1097 url(<%= asset_path("iD/img/cursor-select-split.png") %>) 1x,
1098 url(<%= asset_path("iD/img/cursor-select-split2x.png") %>) 2x
1102 .mode-select .behavior-multiselect .point,
1103 .mode-select .behavior-multiselect .vertex,
1104 .mode-select .behavior-multiselect .line,
1105 .mode-select .behavior-multiselect .area {
1106 cursor: pointer; /* Opera */
1107 cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
1108 cursor: -webkit-image-set(
1109 url(<%= asset_path("iD/img/cursor-select-add.png") %>) 1x,
1110 url(<%= asset_path("iD/img/cursor-select-add2x.png") %>) 2x
1114 .mode-select .behavior-multiselect .selected {
1115 cursor: pointer; /* Opera */
1116 cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
1117 cursor: -webkit-image-set(
1118 url(<%= asset_path("iD/img/cursor-select-remove.png") %>) 1x,
1119 url(<%= asset_path("iD/img/cursor-select-remove2x.png") %>) 2x
1124 #map .vertex:active,
1127 #map .midpoint:active,
1128 #map .mode-select .selected {
1129 cursor: pointer; /* Opera */
1130 cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */
1131 cursor: -webkit-image-set(
1132 url(<%= asset_path("iD/img/cursor-select-acting.png") %>) 1x,
1133 url(<%= asset_path("iD/img/cursor-select-acting2x.png") %>) 2x
1137 .mode-draw-line #map,
1138 .mode-draw-area #map,
1139 .mode-add-line #map,
1140 .mode-add-area #map,
1141 .mode-drag-node #map {
1142 cursor: crosshair; /* Opera */
1143 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1144 cursor: -webkit-image-set(
1145 url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x,
1146 url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x
1150 .mode-draw-line .way.hover,
1151 .mode-draw-area .way.hover,
1152 .mode-add-line .way.hover,
1153 .mode-add-area .way.hover,
1154 .mode-drag-node .way.hover {
1155 cursor: crosshair; /* Opera */
1156 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
1157 cursor: -webkit-image-set(
1158 url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 1x,
1159 url(<%= asset_path("iD/img/cursor-draw-connect-line2x.png") %>) 2x
1163 .mode-draw-line .vertex.hover,
1164 .mode-draw-area .vertex.hover,
1165 .mode-add-line .vertex.hover,
1166 .mode-add-area .vertex.hover,
1167 .mode-drag-node .vertex.hover {
1168 cursor: crosshair; /* Opera */
1169 cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
1170 cursor: -webkit-image-set(
1171 url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 1x,
1172 url(<%= asset_path("iD/img/cursor-draw-connect-vertex2x.png") %>) 2x
1176 .mode-add-point #map,
1180 cursor: crosshair; /* Opera */
1181 cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1182 cursor: -webkit-image-set(
1183 url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x,
1184 url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x
1189 pointer-events: visibleStroke;
1197 pointer-events: none;
1207 .mode-draw-line .vertex.active,
1208 .mode-draw-area .vertex.active,
1209 .mode-drag-node .vertex.active {
1213 .mode-draw-line .way.active,
1214 .mode-draw-area .way.active,
1215 .mode-drag-node .active {
1216 pointer-events: none;
1219 /* Ensure drawing doesn't interact with area fills. */
1220 .mode-add-point .area.fill,
1221 .mode-draw-line .area.fill,
1222 .mode-draw-area .area.fill,
1223 .mode-add-line .area.fill,
1224 .mode-add-area .area.fill,
1225 .mode-drag-node .area.fill {
1226 pointer-events: none;
1229 ------------------------------------------------------- */
1232 Opera misbehaves when the window is resized vertically unless 100% width + height are
1233 applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
1241 font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif;
1251 vertical-align: middle;
1294 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
1295 -moz-box-sizing: border-box;
1296 -webkit-box-sizing: border-box;
1297 box-sizing: border-box;
1300 a, button, input, textarea {
1301 -webkit-tap-highlight-color:rgba(0,0,0,0);
1302 -webkit-touch-callout:none;
1307 .checkselect label:hover,
1308 .opacity-options li,
1310 cursor: pointer; /* Opera */
1311 cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
1312 cursor: -webkit-image-set(
1313 url(<%= asset_path("iD/img/cursor-pointer.png") %>) 1x,
1314 url(<%= asset_path("iD/img/cursor-pointer2x.png") %>) 2x
1322 margin-bottom: 20px;
1327 h4:last-child { margin-bottom: 0;}
1333 margin-bottom: 10px;
1339 padding-bottom: 10px;
1343 outline-color: transparent;
1344 outline-style: none;
1367 -webkit-transition: all 100ms;
1368 -moz-transition: all 100ms;
1369 -o-transition: all 100ms;
1370 transition: all 100ms;
1378 ------------------------------------------------------- */
1382 font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
1392 background-color: white;
1393 border:1px solid #ccc;
1398 text-overflow: ellipsis;
1399 -webkit-transition: all 200ms;
1400 -moz-transition: all 200ms;
1401 -o-transition: all 200ms;
1402 transition: all 200ms;
1407 background-color: #F1F1F1;
1410 input[type="checkbox"],
1411 input[type="radio"] {
1419 /* remove bottom border radius when combobox is open */
1420 .combobox + * textarea:focus,
1421 .combobox + * input:focus {
1422 border-bottom-left-radius: 0 !important;
1423 border-bottom-right-radius: 0 !important;
1429 background-color: white;
1430 border-collapse: collapse;
1439 table.tags, table.tags td, table.tags th {
1440 border: 1px solid #CCC;
1445 ------------------------------------------------------- */
1447 .col0 { float:left; width:04.1666%; }
1448 .col1 { float:left; width:08.3333%; }
1449 .col2 { float:left; width:16.6666%; }
1450 .col3 { float:left; width:25.0000%; max-width: 300px; }
1451 .col4 { float:left; width:33.3333%; max-width: 400px; }
1452 .col5 { float:left; width:41.6666%; max-width: 500px; }
1453 .col6 { float:left; width:50.0000%; max-width: 600px; }
1454 .col7 { float:left; width:58.3333%; }
1455 .col8 { float:left; width:66.6666%; }
1456 .col9 { float:left; width:75.0000%; }
1457 .col10 { float:left; width:83.3333%; }
1458 .col11 { float:left; width:91.6666%; }
1459 .col12 { float:left; width:100.0000%; }
1462 ------------------------------------------------------- */
1464 ul li { list-style: none;}
1466 .toggle-list > label {
1471 background-color: white;
1474 -moz-transition: all 100ms;
1475 -o-transition: all 100ms;
1476 transition: all 100ms;
1479 .toggle-list > label:hover {
1480 background-color: #ececec;
1483 .toggle-list > label:not(:last-child) {
1484 border-bottom: 1px solid #ccc;
1487 .toggle-list > label:last-child {
1488 border-radius: 0 0 3px 3px;
1491 .toggle-list label > span {
1494 white-space: nowrap;
1495 text-overflow: ellipsis;
1498 .toggle-list > label.active {
1499 background: #E8EBFF;
1504 border-left: 1px solid rgba(255,255,255,.5);
1505 padding: 5px 0 5px 5px;
1509 ul.link-list li:last-child {
1516 ------------------------------------------------------- */
1523 background: #f6f6f6;
1528 background: #ececec;
1533 background:rgba(0,0,0,.5);
1538 .fr { float: right;}
1552 box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
1556 background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
1557 background-size:5px 5px;
1592 display: inline-block;
1595 /* Crashes Safari: https://github.com/systemed/iD/issues/1188 */
1596 /*-webkit-transition: all 100ms;*/
1597 -moz-transition: all 100ms;
1598 -o-transition: all 100ms;
1599 transition: all 100ms;
1604 background-color: #ececec;
1609 background-color: rgba(255,255,255,.25);
1610 color: rgba(0,0,0,.5);
1615 background: #7092ff;
1625 background-color: #fafafa;
1628 button.minor .icon {
1632 button.minor:hover {
1633 background-color: #f1f1f1;
1637 display: inline-block;
1642 .button-wrap button:only-child {
1646 .button-wrap:last-of-type {
1652 border-right: 1px solid rgba(0,0,0,.5);
1655 .joined button:first-child {
1656 border-radius:4px 0 0 4px;
1659 .joined button:last-child {
1660 border-right-width: 0;
1661 border-radius:0 4px 4px 0;
1665 background: #7092ff;
1668 button.action:focus,
1669 button.action:hover {
1670 background: #597BE7;
1673 button.save.has-count {
1677 button.save .count {
1681 button.save.has-count .count {
1685 background: rgba(255, 255, 255, .5);
1692 margin-left: 8.3333%;
1695 button.save.has-count .count::before {
1704 border-top: 6px solid transparent;
1705 border-bottom: 6px solid transparent;
1706 border-right: 6px solid rgba(255,255,255,.5);
1712 display:inline-block;
1716 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 0;
1717 text-indent:-9999px;
1733 /* Definitions for every icon */
1734 .icon.alert { background-position: 0 0;}
1736 .icon.add-point { background-position: -20px 0;}
1738 .icon.add-line { background-position: -40px 0;}
1740 .icon.add-area { background-position: -60px 0;}
1741 .icon.undo { background-position: -80px 0;}
1742 .icon.redo { background-position: -100px 0;}
1743 .icon.apply { background-position: -120px 0;}
1744 .icon.save { background-position: -140px 0;}
1745 .icon.close { background-position: -160px 0;}
1746 .icon.delete { background-position: -180px 0;}
1747 .icon.remove { background-position: -200px 0;}
1748 .icon.inspect { background-position: -220px 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.bug { background-position: -400px 0;}
1758 .icon.back { background-position: -420px 0;}
1759 .icon.forward { background-position: -440px 0;}
1760 .icon.help { background-position: -460px 0;}
1761 .icon.relation { background-position: -520px 0;}
1762 .icon.relation.route { background-position: -540px 0;}
1763 .icon.relation.multipolygon { background-position: -560px 0;}
1764 .icon.vertex { background-position: -580px 0;}
1766 .icon.inspect.light { background-position: -220px -20px;}
1767 .icon.plus.light { background-position: -240px -20px;}
1768 .icon.zoom-in { background-position: -240px -20px;}
1769 .icon.zoom-out { background-position: -260px -20px;}
1770 .icon.geocode.light { background-position: -280px -20px;}
1771 .icon.layers.light { background-position: -300px -20px;}
1772 .icon.avatar.light { background-position: -320px -20px;}
1773 .icon.nearby.light { background-position: -340px -20px;}
1774 .icon.geolocate.light { background-position: -360px -20px;}
1775 .icon.bug.light { background-position: -400px -20px;}
1776 .icon.help.light { background-position: -460px -20px;}
1778 .icon.back.blue { background-position: -420px -20px;}
1779 .icon.forward.blue { background-position: -440px -20px;}
1781 button[disabled] .icon.alert { background-position: 0 -40px;}
1782 button[disabled] .icon.add-point { background-position: -20px -40px;}
1783 button[disabled] .icon.add-line { background-position: -40px -40px;}
1784 button[disabled] .icon.add-area { background-position: -60px -40px;}
1785 button.disabled .icon.undo { background-position: -80px -40px;}
1786 button.disabled .icon.redo { background-position: -100px -40px;}
1787 button[disabled] .apply.icon { background-position: -120px -40px;}
1788 button[disabled] .close.icon { background-position: -160px -40px;}
1789 button[disabled] .delete.icon { background-position: -180px -40px;}
1790 button[disabled] .icon.remove { background-position: -200px -40px;}
1791 button[disabled] .icon.inspect { background-position: -220px -40px;}
1792 button[disabled] .icon.zoom-in { background-position: -240px -40px;}
1793 button[disabled] .icon.zoom-out { background-position: -260px -40px;}
1794 button[disabled] .icon.geocode { background-position: -280px -40px;}
1795 button[disabled] .icon.layers { background-position: -300px -40px;}
1796 button[disabled] .icon.avatar { background-position: -320px -40px;}
1797 button[disabled] .icon.nearby { background-position: -340px -40px;}
1799 .icon.point.deleted { background-position: -302px -80px;}
1800 .icon.line.deleted { background-position: -320px -80px;}
1801 .icon.area.deleted { background-position: -340px -80px;}
1803 .icon.point.created { background-position: -302px -100px;}
1804 .icon.line.created { background-position: -320px -100px;}
1805 .icon.area.created { background-position: -340px -100px;}
1807 .icon.point.modified { background-position: -24px 0; }
1809 .icon.modified { opacity: .5; }
1811 /* Out link is special */
1813 .icon.out-link { height: 14px; width: 14px; background-position: -500px 0;}
1814 a:hover .icon.out-link { background-position: -500px -14px;}
1816 .icon.plus-dark { background-position: -240px -40px;}
1818 /* Universal preset icons */
1820 .icon.source { background-position: 0 -200px;}
1821 .icon.address { background-position: -20px -200px;}
1822 .icon.telephone { background-position: -40px -200px;}
1823 .icon.website { background-position: -60px -200px;}
1824 .icon.elevation { background-position: -80px -200px;}
1825 .icon.wikipedia { background-position: -100px -200px;}
1826 .icon.note { background-position: -120px -200px;}
1827 .icon.wheelchair { background-position: -140px -200px;}
1829 /* ToolBar / Persistent UI Elements
1830 ------------------------------------------------------- */
1843 /* Header for modals / panes
1844 ------------------------------------------------------- */
1847 border-bottom: 1px solid #ccc;
1855 white-space: nowrap;
1856 text-overflow: ellipsis;
1874 .preset-list-pane .header button {
1891 padding: 5px 30px 5px 30px;
1892 border-top: 1px solid #ccc;
1893 background-color: #fafafa;
1897 .sidebar-component .body {
1906 ------------------------------------------------------- */
1914 background: #f6f6f6;
1917 .sidebar-component {
1943 .feature-list-pane .inspector-body {
1947 .preset-list-pane .inspector-body {
1951 .entity-editor-pane .inspector-body {
1955 .selection-list-pane .inspector-body {
1964 #sidebar .search-header .icon {
1969 pointer-events: none;
1972 #sidebar .search-header input {
1980 border-bottom-width: 1px;
1994 .feature-list-item {
1997 border-bottom: 1px solid #ccc;
2001 .feature-list-item .label {
2004 white-space: nowrap;
2005 text-overflow: ellipsis;
2007 border-left: 1px solid rgba(0, 0, 0, .1);
2008 -moz-transition: all 100ms;
2009 -o-transition: all 100ms;
2010 transition: all 100ms;
2013 .feature-list-item .label .icon {
2017 .feature-list-item:hover .label {
2018 background-color: #ececec;
2021 .feature-list-item .entity-type {
2025 .feature-list-item:hover .entity-type {
2029 .feature-list-item .entity-name {
2030 font-weight: normal;
2036 ------------------------------------------------------- */
2042 padding: 20px 20px 10px 20px;
2043 border-bottom: 1px solid #ccc;
2046 .preset-list-button-wrap {
2048 margin-bottom: 10px;
2052 .preset-list-button {
2056 border: 1px solid #ccc;
2059 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
2060 background: #ececec;
2071 .preset-icon-relation {
2076 .preset-list-button .label {
2077 background-color: #f6f6f6;
2086 white-space: nowrap;
2087 text-overflow: ellipsis;
2089 border-left: 1px solid rgba(0, 0, 0, .1);
2090 -moz-transition: all 100ms;
2091 -o-transition: all 100ms;
2092 transition: all 100ms;
2093 border-radius: 0 3px 3px 0;
2096 .preset-list-button:hover .label {
2097 background-color: #ececec;
2100 .preset-list-item button.tag-reference-button {
2102 border: 1px solid #CCC;
2103 border-radius: 0 3px 3px 0;
2108 background: #fafafa;
2111 .preset-list-item button.tag-reference-button .icon {
2115 .current .preset-list-button,
2116 .current .preset-list-button .label {
2117 background-color: #E8EBFF;
2120 .category .preset-list-button:after,
2121 .category .preset-list-button:before {
2125 left: -1px; right: -1px;
2126 border: 1px solid #ccc;
2127 border-bottom: none;
2128 border-radius: 6px 6px 0 0;
2132 .category .preset-list-button:before {
2136 .subgrid .preset-list {
2137 padding: 10px 10px 0 10px;
2141 width: -webkit-calc(100% + 20px);
2146 border: solid rgba(0, 0, 0, 0);
2148 border-bottom-color: #f1f1f1;
2152 margin-left: -webkit-calc(50% - 10px);
2156 /* Preset icon colors */
2158 .preset-icon-fill.icon-area {
2164 left: 7px; top: 7px;
2165 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -240px -80px;
2168 .preset-icon-fill.tag-shop,
2169 .preset-icon-fill.tag-building {
2170 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px;
2173 .preset-icon-fill.tag-natural-water {
2174 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -60px -80px;
2177 .preset-icon-fill.tag-landuse,
2178 .preset-icon-fill.tag-natural-wood,
2179 .preset-icon-fill.tag-natural-tree,
2180 .preset-icon-fill.tag-natural-grassland,
2181 .preset-icon-fill.tag-leisure-park {
2182 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -120px -80px;
2185 .preset-icon-fill.tag-amenity-parking {
2186 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -180px -80px;
2189 /* preset form basics */
2195 .inspector-preset .preset-form {
2197 margin: 0 10px 20px 10px;
2201 .entity-editor-pane .preset-list-item::after {
2210 border: solid rgba(0, 0, 0, 0);
2212 border-bottom-color: #ececec;
2215 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
2221 margin-bottom: 10px;
2223 -webkit-transition: margin-bottom 200ms;
2224 -moz-transition: margin-bottom 200ms;
2225 -o-transition: margin-bottom 200ms;
2226 transition: margin-bottom 200ms;
2229 .form-field:last-child {
2236 border: 1px solid #cfcfcf;
2237 padding: 5px 0 5px 10px;
2238 background: #f6f6f6;
2240 border-radius: 4px 4px 0 0;
2244 .form-label-button-wrap {
2250 background: transparent;
2254 .form-label-button-wrap .icon {
2258 .form-label button {
2259 border-left: 1px solid #CCC;
2263 background: #fafafa;
2266 .form-label .modified-icon,
2267 .form-field .remove-icon {
2271 .modified .form-label .modified-icon,
2272 .present .form-label .remove-icon {
2273 display: inline-block;
2276 .form-field > input,
2277 .form-field > textarea,
2278 .form-field .preset-input-wrap {
2279 border: 1px solid #CCC;
2282 border-radius: 0 0 4px 4px;
2285 .form-field textarea {
2290 border-bottom: 1px solid #CCC
2293 /* Preset form (hover mode) */
2295 .inspector-hover .checkselect label:last-of-type,
2296 .inspector-hover .preset-input-wrap .label,
2297 .inspector-hover input,
2298 .inspector-hover label {
2299 background: #ececec;
2303 .inspector-hover .checkselect label:last-of-type {
2307 /* hide and remove from layout */
2309 .inspector-hover label input[type="checkbox"],
2310 .inspector-hover label input[type="radio"],
2311 .inspector-hover .toggle-list label,
2312 .inspector-hover .toggle-list label span,
2313 .inspector-hover .inspector-inner .add-tag,
2314 .inspector-hover .inspector-inner .add-relation,
2315 .inspector-hover .toggle-list label.remove .icon {
2319 opacity: 0 !important;
2325 /* hide but preserve in layout */
2326 .inspector-hover .entity-editor-pane button.minor,
2327 .inspector-hover .combobox-caret,
2328 .inspector-hover .entity-editor-pane .header button,
2329 .inspector-hover .spin-control,
2330 .inspector-hover .hide-toggle:before,
2331 .inspector-hover .more-buttons,
2332 .inspector-hover .form-label-button-wrap,
2333 .inspector-hover .tag-reference-button,
2334 .inspector-hover .view-on-osm {
2338 /* Styles for raw tag inspector on hover */
2339 .inspector-hover .tag-row .key-wrap,
2340 .inspector-hover .tag-row .input-wrap-position {
2344 .inspector-hover .tag-row:first-child input.value {
2345 border-top-right-radius: 4px;
2348 .inspector-hover .tag-row:last-child input.value {
2349 border-bottom-right-radius: 4px;
2352 .inspector-hover .tag-row:last-child input.key {
2353 border-bottom-left-radius: 4px;
2356 .inspector-hover .inspector-body .more-buttons {
2361 /* Unstyle button fields */
2362 .inspector-hover .toggle-list label.active,
2363 .inspector-hover .entity-editor-pane a.hide-toggle {
2365 background-color: transparent;
2371 .inspector-hover .toggle-list button.active {
2375 /* Add placeholder only on hover for radio buttons */
2376 .inspector-hover .toggle-list .placeholder {
2384 /* Hide placeholder for radio buttons if another is active, or not in hover state */
2385 .toggle-list label.active ~ .placeholder,
2386 .toggle-list .placeholder {
2393 -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2394 -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2395 -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2396 transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2399 /* first phase hover-to-active animations */
2404 .preset-input-wrap .label {
2405 -webkit-transition: all 200ms;
2406 -moz-transition: all 200ms;
2407 -o-transition: all 200ms;
2408 transition: all 200ms;
2411 /* second phase hover-to-active animations */
2414 .checkselect label:last-of-type {
2415 -webkit-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2416 -moz-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2417 -o-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2418 transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2421 .entity-editor-pane button.minor,
2423 .entity-editor-pane .header button,
2424 .toggle-list label span,
2428 .hide-toggle:before,
2429 .entity-editor-pane .toggle-list label::before,
2430 .entity-editor-pane .toggle-list label.remove .icon {
2431 -webkit-transition: opacity 200ms 200ms;
2432 -moz-transition: opacity 200ms 200ms;
2433 -o-transition: opacity 200ms 200ms;
2434 transition: opacity 200ms 200ms;
2437 .entity-editor-pane a.hide-toggle {
2438 -webkit-transition: padding-left 200ms 200ms, color 200ms 200ms;
2439 -moz-transition: padding-left 200ms 200ms, color 200ms 200ms;
2440 -o-transition: padding-left 200ms 200ms, color 200ms 200ms;
2441 transition: padding-left 200ms 200ms, color 200ms 200ms;
2444 .entity-editor-pane .toggle-list label:not(.active) {
2445 -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2446 -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2447 -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2448 transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2451 .entity-editor-pane .toggle-list label {
2452 -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2453 -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2454 -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2455 transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2458 /* adding additional preset fields */
2460 .inspector-body .more-buttons {
2463 -webkit-transition: padding 200ms 200ms, max-height 200ms 200ms;
2464 -moz-transition: padding 200ms 200ms, max-height 200ms 200ms;
2465 -o-transition: padding 200ms 200ms, max-height 200ms 200ms;
2466 transition: padding 200ms 200ms, max-height 200ms 200ms;
2469 button.preset-add-field {
2470 background: #f6f6f6;
2473 -webkit-transition: width 200ms;
2474 -moz-transition: width 200ms;
2475 -o-transition: width 200ms;
2476 transition: width 200ms;
2479 button.preset-add-field:hover {
2480 background: #ececec;
2483 /* set width based on # of buttons */
2485 button.preset-add-field:only-child {
2489 button.preset-add-field:nth-last-child(2),
2490 button.preset-add-field:nth-last-child(2) ~ button.preset-add-field {
2494 button.preset-add-field:nth-last-child(3),
2495 button.preset-add-field:nth-last-child(3) ~ button.preset-add-field {
2499 button.preset-add-field:nth-last-child(4),
2500 button.preset-add-field:nth-last-child(4) ~ button.preset-add-field {
2504 button.preset-add-field:nth-last-child(5),
2505 button.preset-add-field:nth-last-child(5) ~ button.preset-add-field {
2509 button.preset-add-field:nth-last-child(6),
2510 button.preset-add-field:nth-last-child(6) ~ button.preset-add-field {
2514 button.preset-add-field:nth-last-child(7),
2515 button.preset-add-field:nth-last-child(7) ~ button.preset-add-field {
2519 button.preset-add-field:nth-last-child(8),
2520 button.preset-add-field:nth-last-child(8) ~ button.preset-add-field {
2524 .preset-fav button.fav {
2530 /* preset form access */
2532 .preset-input-wrap .label {
2534 background: #F6F6F6;
2538 .form-field-access .preset-input-wrap li {
2539 border-bottom: 1px solid #CCC;
2541 .form-field-access .preset-input-wrap li:last-child {
2545 .preset-input-access-wrap input {
2548 border-left-width: 1px;
2551 .preset-input-wrap li:last-child input {
2552 border-bottom-right-radius: 4px;
2555 /* preset form numbers */
2557 input[type=number] {
2565 display: inline-block;
2567 margin-bottom: -11px;
2571 .spin-control button {
2577 border-left: 1px solid #CCC;
2579 background: rgba(0, 0, 0, 0);
2582 .spin-control button.decrement {
2583 border-bottom-right-radius: 3px;
2586 .spin-control button.decrement::after,
2587 .spin-control button.increment::after {
2589 height: 0; width: 0;
2591 left: 0; right: 0; bottom: 0; top: 0;
2595 .spin-control button.decrement::after {
2596 border-top: 5px solid #CCC;
2597 border-left: 5px solid transparent;
2598 border-right: 5px solid transparent;
2601 .spin-control button.increment::after {
2602 border-bottom: 5px solid #CCC;
2603 border-left: 5px solid transparent;
2604 border-right: 5px solid transparent;
2607 /* preset form checkbox */
2609 .checkselect label:last-of-type {
2616 .checkselect label:hover {
2617 background: #f1f1f1;
2624 .checkselect label:not(.set) input[type="checkbox"] {
2628 /* Preset form radio button */
2630 .toggle-list button.remove {
2631 border-radius: 0 0 3px 3px;
2634 .toggle-list button.remove .icon {
2639 .toggle-list button.remove::before {
2643 .form-field .wiki-lang {
2647 .form-field .wiki-title {
2651 .form-field .wiki-title ~ .combobox-caret {
2656 .form-field .wiki-link {
2658 background: #fafafa;
2663 .form-field .wiki-link:hover {
2664 background: #f1f1f1;
2667 #preset-input-maxspeed {
2669 border-radius: 0 0 0 4px;
2673 .form-field .maxspeed-unit {
2674 border-radius: 0 0 4px 0;
2678 /* Name + translate form */
2680 .form-field .localized-main {
2684 .form-field .button-input-action {
2689 border: 1px solid #CCC;
2690 border-top-width: 0;
2691 border-right-width: 0;
2692 border-radius: 0 0 4px 0;
2694 vertical-align: top;
2697 .form-field .localized-wrap {
2701 .form-field .localized-wrap .entry {
2706 .form-field .localized-wrap .entry::before {
2719 .form-field .localized-wrap .entry .localized-lang {
2721 border-top-width: 0;
2724 .form-field .localized-wrap .entry .localized-value {
2725 border-top-width: 0;
2726 border-radius: 0 0 4px 4px;
2729 .form-field .localized-wrap .form-label button {
2730 border-top-right-radius: 3px;
2733 /* Preset form address */
2735 .form-field .addr-housename {
2740 .form-field .addr-number {
2748 .form-field .addr-street {
2755 .form-field .addr-city {
2760 border-radius: 0 0 0 4px;
2763 .form-field .addr-postcode {
2767 border-radius: 0 0 4px 0;
2769 /* combobox dropdown */
2774 box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
2780 border: 1px solid #ccc;
2781 border-radius: 0 0 4px 4px;
2787 border-top:1px solid #ccc;
2788 text-overflow: ellipsis;
2789 white-space: nowrap;
2793 .combobox a.selected,
2795 background: #ececec;
2798 .combobox a:first-child {
2803 display: inline-block;
2808 vertical-align: top;
2811 .combobox-caret::after {
2813 height: 0; width: 0;
2815 left: 0; right: 0; bottom: 0; top: 0;
2817 border-top: 5px solid #ccc;
2818 border-left: 5px solid transparent;
2819 border-right: 5px solid transparent;
2822 /* Raw Tag Editor */
2838 border-bottom: 1px solid #CCC;
2839 border-left: 1px solid #CCC;
2843 .tag-row .input-wrap-position {
2847 -webkit-transition: width 200ms;
2848 -moz-transition: width 200ms;
2849 -o-transition: width 200ms;
2850 transition: width 200ms;
2853 .tag-row input.key {
2855 background-color: #f6f6f6;
2858 .tag-row input.value {
2859 border-right: 1px solid #CCC;
2862 .tag-row:first-child input.key {
2863 border-top: 1px solid #CCC;
2864 border-top-left-radius: 4px;
2867 .tag-row:first-child input.value {
2868 border-top: 1px solid #CCC;
2875 border: 1px solid #CCC;
2876 border-top-width: 0;
2877 border-left-width: 0;
2880 .tag-row button:hover {
2881 background: #f1f1f1;
2884 .tag-row button .icon {
2888 .tag-row:first-child button {
2889 border-top-width: 1px;
2892 .tag-row:first-child .tag-reference-button {
2893 border-top-right-radius: 4px;
2896 .tag-row:last-child .tag-reference-button {
2897 border-bottom-right-radius: 4px;
2900 .tag-row .tag-reference-button {
2905 background: #fafafa;
2908 /* Adding form fields to tag editor */
2910 .inspector-inner .add-tag {
2914 background: rgba(0,0,0,.5);
2915 border-radius: 0 0 4px 4px;
2918 .inspector-inner .add-tag:hover {
2919 background: rgba(0,0,0,.8);
2922 .inspector-inner .add-tag .label {
2928 button.minor.tag-reference-loading {
2929 background-color: #f5f5f5;
2932 .tag-reference-loading .icon {
2933 background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
2934 background-position: 0 0;
2937 .tag-reference-body {
2941 .tag-reference-body p,
2942 .tag-reference-body img {
2946 .tag-reference-body p:last-child {
2947 padding-bottom: 10px;
2950 .tag-reference-body a {
2952 padding-bottom: 10px;
2955 .preset-list .tag-reference-body {
2960 .preset-list .tag-reference-body a {
2961 padding-bottom: 20px;
2964 .preset-list .tag-reference-body p,
2965 .preset-list .tag-reference-body img {
2969 .raw-tag-editor .tag-reference-body {
2970 border-bottom: 1px solid #ccc;
2975 .raw-tag-editor .tag-reference-body p:last-child {
2976 padding-bottom: 20px;
2979 .raw-tag-editor .tag-reference-body a {
2980 padding-bottom: 20px;
2986 width: -webkit-calc(33.3333% - 10px);
2987 width: calc(33.3333% - 10px);
2992 margin-bottom: 20px;
2995 /* Raw relation membership editor */
2997 .raw-member-editor .member-list li:first-child,
2998 .raw-membership-editor .member-list li:first-child {
3002 .raw-member-editor .member-row,
3003 .raw-membership-editor .member-row {
3007 .raw-member-editor .member-row .member-entity-name,
3008 .raw-membership-editor .member-row .member-entity-name {
3009 font-weight: normal;
3013 .member-incomplete .member-delete {
3017 .member-row-new .member-entity-input {
3018 border-radius: 4px 4px 0 0;
3019 border: 1px solid #cfcfcf;
3025 background: rgba(0,0,0,.5);
3030 .add-relation:hover {
3031 background: rgba(0,0,0,.8);
3044 .map-control > button {
3046 background: rgba(0,0,0,.5);
3050 .map-control > button:hover {
3051 background: rgba(0, 0, 0, .8);
3054 .map-control > button.active:hover {
3055 background: #7092ff;
3066 padding: 10px 10px 0 10px;
3071 .zoombuttons button.zoom-in {
3072 border-radius: 4px 0 0 0;
3075 /* Background Settings */
3077 .background-control button {
3078 border-radius: 4px 0 0 0;
3081 .background-control button.active {
3085 .background-control {
3089 .background-control .map-overlay {
3095 border-top: 1px solid #CCC;
3099 .background-control .adjustments button:last-child {
3103 .background-control .hide-toggle {
3104 padding-bottom: 10px;
3108 margin-bottom: 10px;
3109 border: 1px solid #CCC;
3116 background-color: white;
3120 .layer-list > li:first-child {
3121 border-radius: 3px 3px 0 0;
3124 .layer-list > li:last-child {
3125 border-radius: 0 0 3px 3px;
3128 .layer-list > li:only-child {
3132 .layer-list li:not(:last-child) {
3133 border-bottom: 1px solid #ccc;
3136 .layer-list li:hover {
3137 background-color: #ececec;
3140 .layer-list li.active {
3141 background: #E8EBFF;
3150 .layer-list label > span {
3153 white-space: nowrap;
3154 text-overflow: ellipsis;
3163 .hide-toggle:before {
3171 border-top: 4px solid transparent;
3172 border-bottom: 4px solid transparent;
3173 border-left: 8px solid #7092ff;
3176 .hide-toggle.expanded:before {
3177 border-top: 8px solid #7092ff;
3179 border-right: 4px solid transparent;
3180 border-left: 4px solid transparent;
3183 .background-control .nudge-container button {
3188 border-right: 1px solid #CCC;
3192 .background-control .nudge::after {
3197 left: 0; right: 0; top: 0; bottom: 0;
3202 .background-control .nudge.left::after {
3203 border-top: 5px solid transparent;
3204 border-bottom: 5px solid transparent;
3205 border-left: 5px solid #222;
3208 .background-control .nudge.right::after {
3209 border-top: 5px solid transparent;
3210 border-bottom: 5px solid transparent;
3211 border-right: 5px solid #222;
3214 .background-control .nudge.top::after {
3215 border-right: 5px solid transparent;
3216 border-left: 5px solid transparent;
3217 border-bottom: 5px solid #222;
3220 .background-control .nudge.bottom::after {
3221 border-right: 5px solid transparent;
3222 border-left: 5px solid transparent;
3223 border-top: 5px solid #222;
3227 background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
3233 border: 1px solid #ccc;
3236 .opacity-options li {
3242 .opacity-options li .select-box{
3249 .background-control li:hover .select-box,
3250 .background-control li.selected .select-box {
3251 border: 2px solid #7092ff;
3252 background: rgba(89, 123, 231, .5);
3256 .background-control li.selected:hover .select-box,
3257 .background-control li.selected .select-box {
3261 .background-control .opacity {
3263 display:inline-block;
3268 .background-control .layer-toggle-gpx button {
3272 border-left: 1px solid #CCC;
3276 .background-control .layer-toggle-gpx button .icon {
3280 .background-control .layer-toggle-gpx button.layer-extent {
3281 border-radius: 0 3px 3px 0;
3286 .geolocate-control {
3287 margin-bottom: 10px;
3290 .geolocate-control button {
3291 border-radius: 0 0 0 4px;
3296 .help-control button {
3297 border-radius: 0 0 0 4px;
3304 padding: 20px 50px 20px 20px;
3311 margin-bottom: 20px;
3314 .help-wrap .left-content .body p code {
3320 /* This is two columns, 41.66666 x .4 = 16.6666 */
3324 margin-bottom: 20px;
3328 .help-wrap .toc li a,
3331 border: 1px solid #CCC;
3335 .help-wrap .toc li a {
3339 .help-wrap .toc li a:hover,
3340 .help-wrap .nav a:hover {
3341 background: #ececec;
3344 .help-wrap .toc li a.selected {
3345 background: #E8EBFF;
3348 .help-wrap .toc li:first-child a {
3349 border-radius: 4px 4px 0 0;
3352 .help-wrap .toc li:nth-last-child(2) a {
3353 border-bottom: 1px solid #CCC;
3354 border-radius: 0 0 4px 4px
3357 .help-wrap .toc li.walkthrough a {
3360 border-bottom: 1px solid #ccc;
3374 .help-wrap .nav a:first-child {
3375 border-radius: 4px 0 0 4px;
3378 .help-wrap .nav a:last-child:not(:only-child) {
3379 border-radius: 0 4px 4px 0;
3383 .help-wrap .nav a:only-child {
3389 ------------------------------------------------------- */
3399 transform-origin:0 0;
3400 -ms-transform-origin:0 0;
3401 -webkit-transform-origin:0 0;
3402 -moz-transform-origin:0 0;
3403 -o-transform-origin:0 0;
3404 -moz-user-select: none;
3405 -webkit-user-select: none;
3406 -ms-user-select: none;
3410 #supersurface, .layer-layer {
3419 ------------------------------------------------------- */
3427 -webkit-transition: opacity 200ms;
3428 -moz-transition: opacity 200ms;
3429 transition: opacity 200ms;
3432 .about-block:hover {
3442 padding: 2px 4px 4px 4px;
3445 .source-switch a.live {
3446 background: #d32232;
3450 /* Attribution overlay */
3451 .base-layer-attribution,
3452 .overlay-layer-attribution {
3459 .base-layer-attribution {
3463 .overlay-layer-attribution {
3467 .overlay-layer-attribution .attribution:not(:last-child):after {
3476 .user-list a:not(:last-child):after {
3486 .api-status.offline,
3487 .api-status.readonly {
3492 /* Account Information */
3501 border-left: 1px solid white;
3506 ------------------------------------------------------- */
3509 display: inline-block;
3518 margin-bottom: 10px;
3521 .modal .description {
3537 background:rgba(0,0,0,0.5);
3539 left:0px; right:0px; top:0px; bottom:0px;
3544 border-bottom: 1px solid #CCC;
3547 .modal-section:last-child {
3555 .modal-actions button,
3556 .save-success a.button {
3557 font-weight: normal;
3559 border-bottom: 1px solid #CCC;
3563 display: inline-block;
3566 .modal-actions button:hover
3567 .save-success a.button:hover {
3568 background-color: #ececec;
3571 .modal-actions button:before,
3572 .save-success a.button:before,
3573 .walkthrough a:before {
3579 margin-bottom: 10px;
3580 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px;
3583 .modal-actions :first-child {
3584 border-right: 1px solid #CCC;
3588 ------------------------------------------------------- */
3590 .modal-actions .restore:before {
3591 background-position: -600px -220px;
3594 .modal-actions .reset:before {
3595 background-position: -700px -220px;
3599 ------------------------------------------------------- */
3605 .save-success .button {
3609 .save-success .button.social {
3613 .save-success .button.social:before {
3617 .save-success .button.osm:before {
3618 background-position: 0px -220px;
3621 .save-success .button.twitter:before {
3622 background-position: -100px -245px;
3625 .save-success .button.facebook:before {
3626 background-position: -200px -245px;
3629 .save-success .button.google:before {
3630 background-position: -300px -245px;
3634 ------------------------------------------------------- */
3636 .modal-actions .walkthrough:before,
3637 .walkthrough a:before {
3638 background-position: -400px -220px;
3641 .modal-actions .start:before {
3642 background-position: -500px -220px;
3646 ------------------------------------------------------- */
3648 .mode-save a.user-info {
3649 display: inline-block;
3652 .mode-save .commit-form {
3656 .mode-save button.action {
3664 .mode-save .user-info img {
3668 .mode-save h3 small.count {
3682 .mode-save .commit-info {
3683 margin-bottom: 10px;
3686 .mode-save .changeset-list {
3688 border:1px solid #ccc;
3693 .mode-save .warning-section .changeset-list button {
3694 border-left: 1px solid #CCC;
3697 .mode-save .changeset-list li {
3699 border-top:1px solid #ccc;
3704 .mode-save .changeset-list li:hover {
3705 background-color: #ececec;
3708 .mode-save .changeset-list .alert {
3712 .changeset-list li span.count {
3717 .mode-save .commit-section .changeset-list button {
3718 border-left: 1px solid #CCC;
3721 .changeset-list li span.count:before { content: '('; }
3723 .changeset-list li span.count:after { content: ')'; }
3725 .changeset-list li:first-child { border-top: 0;}
3728 ------------------------------------------------------- */
3750 .notice .zoom-to:hover {
3751 background: #d8e1ff;
3754 .notice .zoom-to .icon {
3759 .icon.zoom-in-invert {
3760 background-position: -240px -40px;
3764 ------------------------------------------------------- */
3801 display: inline-block;
3805 font-weight: normal;
3806 background-color: white;
3812 pointer-events: none;
3816 background: transparent;
3824 border-color: transparent;
3825 border-style: solid;
3829 border-left-color: white;
3830 border-width: 5px 0 5px 5px;
3848 border-color: transparent;
3849 border-style: solid;
3853 border-right-color: white;
3854 border-width: 5px 5px 5px 0;
3861 border-color: transparent;
3862 border-style: solid;
3865 .tooltip.top .tooltip-arrow {
3869 border-top-color: white;
3870 border-width: 5px 5px 0;
3873 .tooltip.right .tooltip-arrow {
3877 border-right-color: white;
3878 border-width: 5px 5px 5px 0;
3881 .tooltip.left .tooltip-arrow {
3885 border-left-color: white;
3886 border-width: 5px 0 5px 5px;
3889 .tooltip.bottom .tooltip-arrow {
3893 border-bottom-color: white;
3894 border-width: 0 5px 5px;
3898 background: #F6F6F6;
3900 margin: 10px -10px -10px;
3903 .tooltip-inner .keyhint {
3907 display: inline-block;
3909 border: 1px solid #CCC;
3915 .tooltip-inner .keyhint::after {
3924 border: 1px solid #CCC;
3928 /* Exceptions for tooltip layouts */
3930 /* make tooltips in editor pane dark */
3931 .entity-editor-pane .tooltip.top .tooltip-arrow {
3932 border-top-color: #000;
3935 .entity-editor-pane .tooltip.bottom .tooltip-arrow {
3936 border-bottom-color: #000;
3939 .entity-editor-pane .tooltip.left .tooltip-arrow {
3940 border-left-color: #000;
3943 .entity-editor-pane .tooltip.right .tooltip-arrow {
3944 border-right-color: #000;
3947 .entity-editor-pane .tooltip-inner {
3952 /* Uncramp map-control tooltips */
3953 .map-control .tooltip {
3956 /* Move over tooltips that are near the edge of screen */
3957 .add-point .tooltip {
3958 left: 33.3333% !important;
3961 .curtain-tooltip.intro-points-add .tooltip-arrow,
3962 .add-point .tooltip .tooltip-arrow {
3966 .radial-menu-tooltip {
3973 .radial-menu-background {
3975 stroke-opacity: 0.5;
3982 .radial-menu-item:hover {
3986 .radial-menu-item:active {
3990 .radial-menu-item.disabled {
3992 fill: rgba(255,255,255,.5);
3995 .radial-menu .icon {
3996 pointer-events: none;
4004 stroke-dasharray: 5, 5;
4008 ------------------------------------------------------- */
4010 @media only screen and (max-width: 840px) {
4011 #bar .icon.icon-pre-text { margin-right: 0;}
4012 /* override hide for save button */
4013 #bar .save .label { display: block;}
4017 ----------------------------------------------------- */
4019 ::-webkit-scrollbar {
4024 border-left: 1px solid #DDD;
4027 ::-webkit-scrollbar-track {
4028 background-clip: padding-box;
4029 border: solid transparent;
4033 ::-webkit-scrollbar-thumb {
4034 background-color: rgba(0,0,0,.2);
4035 background-clip: padding-box;
4036 border: solid transparent;
4037 border-width: 3px 3px 3px 4px;
4040 ::-webkit-scrollbar-track:hover,
4041 ::-webkit-scrollbar-track:active {
4042 background-color: rgba(0,0,0,.05);
4045 /* Intro walkthrough
4046 ----------------------------------------------------- */
4049 pointer-events: all;
4064 .intro-nav-wrap button.step {
4068 .intro-nav-wrap button.step.finished {
4069 background: #8cd05f;
4072 .intro-nav-wrap button.step .icon {
4076 .intro-nav-wrap button.step.finished .icon {
4077 display: inline-block;
4081 .curtain-tooltip .tooltip-inner {
4086 .curtain-tooltip .tooltip-inner {
4090 .curtain-tooltip .tooltip-inner .bold {
4093 border-top: 1px solid #CCC;
4096 margin-right: -20px;
4097 padding: 10px 20px 0 20px;
4100 .curtain-tooltip .tooltip-inner .bold:only-child {
4106 .curtain-tooltip.intro-points-describe {
4107 top: 133px !important;
4110 /* Tooltip illustrations */
4112 .intro-points-add .tooltip-inner::before,
4113 .intro-areas-add .tooltip-inner::before,
4114 .intro-lines-add .tooltip-inner::before {
4120 background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -320px;
4123 .intro-areas-add .tooltip-inner::before {
4124 background-position: 0 -400px;
4127 .intro-lines-add .tooltip-inner::before {
4128 background-position: 0 -480px;
4131 .huge-modal-button {
4137 .huge-modal-button .illustration {
4140 background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -400px -220px;
4143 /* This file is generated by make. Do NOT edit manually. */
4145 .preset-icon{background-image:url(<%= asset_path("iD/img/maki-sprite.png") %>);background-repeat:no-repeat;width:24px;height:24px;}
4146 .preset-icon-line{background-image:url(<%= asset_path("iD/img/line-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
4147 .preset-icon-relation{background-image:url(<%= asset_path("iD/img/relation-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
4148 .feature-circle-stroked{background-position:-0px -0px;}
4149 .feature-circle{background-position:-54px -0px;}
4150 .feature-square-stroked{background-position:-108px -0px;}
4151 .feature-square{background-position:-162px -0px;}
4152 .feature-triangle-stroked{background-position:-216px -0px;}
4153 .feature-triangle{background-position:-0px -24px;}
4154 .feature-star-stroked{background-position:-54px -24px;}
4155 .feature-star{background-position:-108px -24px;}
4156 .feature-cross{background-position:-162px -24px;}
4157 .feature-marker-stroked{background-position:-216px -24px;}
4158 .feature-marker{background-position:-0px -48px;}
4159 .feature-religious-jewish{background-position:-54px -48px;}
4160 .feature-religious-christian{background-position:-108px -48px;}
4161 .feature-religious-muslim{background-position:-162px -48px;}
4162 .feature-cemetery{background-position:-216px -48px;}
4163 .feature-rocket{background-position:-0px -72px;}
4164 .feature-airport{background-position:-54px -72px;}
4165 .feature-heliport{background-position:-108px -72px;}
4166 .feature-rail{background-position:-162px -72px;}
4167 .feature-rail-underground{background-position:-216px -72px;}
4168 .feature-rail-above{background-position:-0px -96px;}
4169 .feature-bus{background-position:-54px -96px;}
4170 .feature-fuel{background-position:-108px -96px;}
4171 .feature-parking{background-position:-162px -96px;}
4172 .feature-parking-garage{background-position:-216px -96px;}
4173 .feature-airfield{background-position:-0px -120px;}
4174 .feature-roadblock{background-position:-54px -120px;}
4175 .feature-ferry{background-position:-108px -120px;}
4176 .feature-harbor{background-position:-162px -120px;}
4177 .feature-bicycle{background-position:-216px -120px;}
4178 .feature-park{background-position:-0px -144px;}
4179 .feature-park2{background-position:-54px -144px;}
4180 .feature-museum{background-position:-108px -144px;}
4181 .feature-lodging{background-position:-162px -144px;}
4182 .feature-monument{background-position:-216px -144px;}
4183 .feature-zoo{background-position:-0px -168px;}
4184 .feature-garden{background-position:-54px -168px;}
4185 .feature-campsite{background-position:-108px -168px;}
4186 .feature-theatre{background-position:-162px -168px;}
4187 .feature-art-gallery{background-position:-216px -168px;}
4188 .feature-pitch{background-position:-0px -192px;}
4189 .feature-soccer{background-position:-54px -192px;}
4190 .feature-america-football{background-position:-108px -192px;}
4191 .feature-tennis{background-position:-162px -192px;}
4192 .feature-basketball{background-position:-216px -192px;}
4193 .feature-baseball{background-position:-0px -216px;}
4194 .feature-golf{background-position:-54px -216px;}
4195 .feature-swimming{background-position:-108px -216px;}
4196 .feature-cricket{background-position:-162px -216px;}
4197 .feature-skiing{background-position:-216px -216px;}
4198 .feature-school{background-position:-0px -240px;}
4199 .feature-college{background-position:-54px -240px;}
4200 .feature-library{background-position:-108px -240px;}
4201 .feature-post{background-position:-162px -240px;}
4202 .feature-fire-station{background-position:-216px -240px;}
4203 .feature-town-hall{background-position:-0px -264px;}
4204 .feature-police{background-position:-54px -264px;}
4205 .feature-prison{background-position:-108px -264px;}
4206 .feature-embassy{background-position:-162px -264px;}
4207 .feature-beer{background-position:-216px -264px;}
4208 .feature-restaurant{background-position:-0px -288px;}
4209 .feature-cafe{background-position:-54px -288px;}
4210 .feature-shop{background-position:-108px -288px;}
4211 .feature-fast-food{background-position:-162px -288px;}
4212 .feature-bar{background-position:-216px -288px;}
4213 .feature-bank{background-position:-0px -312px;}
4214 .feature-grocery{background-position:-54px -312px;}
4215 .feature-cinema{background-position:-108px -312px;}
4216 .feature-pharmacy{background-position:-162px -312px;}
4217 .feature-hospital{background-position:-216px -312px;}
4218 .feature-danger{background-position:-0px -336px;}
4219 .feature-industrial{background-position:-54px -336px;}
4220 .feature-warehouse{background-position:-108px -336px;}
4221 .feature-commercial{background-position:-162px -336px;}
4222 .feature-building{background-position:-216px -336px;}
4223 .feature-place-of-worship{background-position:-0px -360px;}
4224 .feature-alcohol-shop{background-position:-54px -360px;}
4225 .feature-logging{background-position:-108px -360px;}
4226 .feature-oil-well{background-position:-162px -360px;}
4227 .feature-slaughterhouse{background-position:-216px -360px;}
4228 .feature-dam{background-position:-0px -384px;}
4229 .feature-water{background-position:-54px -384px;}
4230 .feature-wetland{background-position:-108px -384px;}
4231 .feature-disability{background-position:-162px -384px;}
4232 .feature-telephone{background-position:-216px -384px;}
4233 .feature-emergency-telephone{background-position:-0px -408px;}
4234 .feature-toilets{background-position:-54px -408px;}
4235 .feature-waste-basket{background-position:-108px -408px;}
4236 .feature-music{background-position:-162px -408px;}
4237 .feature-land-use{background-position:-216px -408px;}
4238 .feature-city{background-position:-0px -432px;}
4239 .feature-town{background-position:-54px -432px;}
4240 .feature-village{background-position:-108px -432px;}
4241 .feature-farm{background-position:-162px -432px;}
4242 .feature-bakery{background-position:-216px -432px;}
4243 .feature-dog-park{background-position:-0px -456px;}
4244 .feature-lighthouse{background-position:-54px -456px;}
4245 .feature-clothing-store{background-position:-108px -456px;}
4246 .feature-london-underground{background-position:-162px -456px;}
4247 .feature-minefield{background-position:-216px -456px;}
4248 .feature-camera{background-position:-0px -480px;}
4249 .preset-icon-line.feature-highway-motorway{background-position:-20px -25px;}
4250 .preset-icon-line.feature-highway-trunk{background-position:-80px -25px;}
4251 .preset-icon-line.feature-highway-primary{background-position:-140px -25px;}
4252 .preset-icon-line.feature-highway-secondary{background-position:-200px -25px;}
4253 .preset-icon-line.feature-highway-tertiary{background-position:-260px -25px;}
4254 .preset-icon-line.feature-highway-motorway-link{background-position:-320px -25px;}
4255 .preset-icon-line.feature-highway-trunk-link{background-position:-380px -25px;}
4256 .preset-icon-line.feature-highway-primary-link{background-position:-440px -25px;}
4257 .preset-icon-line.feature-highway-secondary-link{background-position:-500px -25px;}
4258 .preset-icon-line.feature-highway-tertiary-link{background-position:-560px -25px;}
4259 .preset-icon-line.feature-highway-residential{background-position:-620px -25px;}
4260 .preset-icon-line.feature-highway-unclassified{background-position:-680px -25px;}
4261 .preset-icon-line.feature-highway-service{background-position:-740px -25px;}
4262 .preset-icon-line.feature-highway-road{background-position:-800px -25px;}
4263 .preset-icon-line.feature-highway-track{background-position:-860px -25px;}
4264 .preset-icon-line.feature-highway-living-street{background-position:-920px -25px;}
4265 .preset-icon-line.feature-highway-path{background-position:-980px -25px;}
4266 .preset-icon-line.feature-highway-cycleway{background-position:-1040px -25px;}
4267 .preset-icon-line.feature-highway-footway{background-position:-1100px -25px;}
4268 .preset-icon-line.feature-highway-bridleway{background-position:-1160px -25px;}
4269 .preset-icon-line.feature-highway-steps{background-position:-1220px -25px;}
4270 .preset-icon-line.feature-railway-rail{background-position:-1280px -25px;}
4271 .preset-icon-line.feature-railway-disused{background-position:-1340px -25px;}
4272 .preset-icon-line.feature-railway-abandoned{background-position:-1400px -25px;}
4273 .preset-icon-line.feature-railway-subway{background-position:-1460px -25px;}
4274 .preset-icon-line.feature-railway-light-rail{background-position:-1520px -25px;}
4275 .preset-icon-line.feature-railway-monorail{background-position:-1580px -25px;}
4276 .preset-icon-line.feature-waterway-river{background-position:-1640px -25px;}
4277 .preset-icon-line.feature-waterway-stream{background-position:-1700px -25px;}
4278 .preset-icon-line.feature-waterway-canal{background-position:-1760px -25px;}
4279 .preset-icon-line.feature-waterway-ditch{background-position:-1820px -25px;}
4280 .preset-icon-line.feature-power-line{background-position:-1880px -25px;}
4281 .preset-icon-line.feature-other-line{background-position:-1940px -25px;}
4282 .preset-icon-line.feature-category-roads{background-position:-2000px -25px;}
4283 .preset-icon-line.feature-category-rail{background-position:-2060px -25px;}
4284 .preset-icon-line.feature-category-path{background-position:-2120px -25px;}
4285 .preset-icon-line.feature-category-water{background-position:-2180px -25px;}
4286 .preset-icon-line.feature-ferry{background-position:-2240px -25px;}
4287 .preset-icon-line.feature-pipeline{background-position:-2300px -25px;}
4288 .preset-icon-relation.feature-relation{background-position:-20px -25px;}
4289 .preset-icon-relation.feature-restriction{background-position:-80px -25px;}
4290 .preset-icon-relation.feature-multipolygon{background-position:-140px -25px;}
4291 .preset-icon-relation.feature-boundary{background-position:-200px -25px;}
4292 .preset-icon-relation.feature-route{background-position:-260px -25px;}
4293 .preset-icon-relation.feature-route-road{background-position:-320px -25px;}
4294 .preset-icon-relation.feature-route-bicycle{background-position:-380px -25px;}
4295 .preset-icon-relation.feature-route-foot{background-position:-440px -25px;}
4296 .preset-icon-relation.feature-route-bus{background-position:-500px -25px;}
4297 .preset-icon-relation.feature-route-train{background-position:-560px -25px;}
4298 .preset-icon-relation.feature-route-detour{background-position:-620px -25px;}
4299 .preset-icon-relation.feature-route-tram{background-position:-680px -25px;}
4300 .preset-icon-relation.feature-route-ferry{background-position:-740px -25px;}
4301 .preset-icon-relation.feature-route-power{background-position:-800px -25px;}
4302 .preset-icon-relation.feature-route-pipeline{background-position:-860px -25px;}
4303 .preset-icon-relation.feature-route-master{background-position:-920px -25px;}