Merge remote-tracking branch 'upstream/pull/2120'
[rails.git] / vendor / assets / iD / iD.css.erb
1 /* http://meyerweb.com/eric/tools/css/reset/
2    v2.0 | 20110126
3    License: none (public domain)
4 */
5
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,
11 b, u, i, center,
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 {
19         margin: 0;
20         padding: 0;
21         border: 0;
22         font-size: 100%;
23         font: inherit;
24         vertical-align: baseline;
25 }
26 /* HTML5 display-role reset for older browsers */
27 article, aside, details, figcaption, figure,
28 footer, header, hgroup, menu, nav, section {
29         display: block;
30 }
31 body {
32         line-height: 1;
33 }
34 ol, ul {
35         list-style: none;
36 }
37 blockquote, q {
38         quotes: none;
39 }
40 blockquote:before, blockquote:after,
41 q:before, q:after {
42         content: '';
43         content: none;
44 }
45 table {
46         border-collapse: collapse;
47         border-spacing: 0;
48 }
49 a { text-decoration: none;}
50 /*
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
54  */
55
56 button,
57 input,
58 select,
59 textarea {
60     font-family: inherit; /* 1 */
61     font-size: 100%; /* 2 */
62     margin: 0; /* 3 */
63     padding: 0;
64 }
65
66 /*
67  * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
68  * the UA stylesheet.
69  */
70
71 button,
72 input {
73     line-height: normal;
74 }
75
76 /* Hide default number spinner controls */
77 input[type="number"]::-webkit-inner-spin-button,
78 input[type="number"]::-webkit-outer-spin-button {
79 display: none;
80 }
81
82 /*
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
87  *    `input` and others.
88  */
89
90 button,
91 html input[type="button"], /* 1 */
92 input[type="reset"],
93 input[type="submit"] {
94     -webkit-appearance: button; /* 2 */
95     cursor: pointer; /* 3 */
96 }
97
98 /*
99  * Re-set default cursor for disabled elements.
100  */
101
102 button[disabled],
103 input[disabled] {
104     cursor: default;
105 }
106
107 /*
108  * 1. Addresses box sizing set to `content-box` in IE 8/9.
109  * 2. Removes excess padding in IE 8/9.
110  */
111
112 input[type="checkbox"],
113 input[type="radio"] {
114     box-sizing: border-box; /* 1 */
115     padding: 0; /* 2 */
116 }
117
118 /*
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).
122  */
123
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;
129 }
130
131 /*
132  * Removes inner padding and search cancel button in Safari 5 and Chrome
133  * on OS X.
134  */
135
136 input[type="search"]::-webkit-search-cancel-button,
137 input[type="search"]::-webkit-search-decoration {
138     -webkit-appearance: none;
139 }
140
141 /*
142  * Removes inner padding and border in Firefox 4+.
143  */
144
145 button::-moz-focus-inner,
146 input::-moz-focus-inner {
147     border: 0;
148     padding: 0;
149 }
150
151 /*
152 ** Markup free clearing
153 ** Details: http://www.positioniseverything.net/easyclearing.html
154 */
155 .cf:before,
156 .cf:after {
157     content: " "; /* 1 */
158     display: table; /* 2 */
159 }
160
161 .cf:after {
162     clear: both;
163 }
164 /* base styles */
165 .layer-osm path {
166     fill: none;
167 }
168
169 /* IE/Edge needs these overrides for markers to show up */
170 .layer-osm path.oneway-marker-path          { fill: #000; }
171 .layer-osm path.sided-marker-natural-path   { fill: rgb(140, 208, 95); }
172 .layer-osm path.sided-marker-coastline-path { fill: #77dede; }
173 .layer-osm path.sided-marker-barrier-path   { fill: #ddd; }
174 .layer-osm path.sided-marker-man_made-path  { fill: #fff; }
175
176 /* IE/Edge rule for <use> marker style */
177 .layer-osm path.viewfield-marker-path {
178     fill: #333;
179     fill-opacity: 0.75;
180     stroke: #fff;
181     stroke-width: 0.5px;
182     stroke-opacity: 0.75;
183 }
184 .fill-wireframe .layer-osm path.viewfield-marker-path {   /* IE/Edge rule for <use> marker style */
185     fill: none;
186 }
187
188 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
189 .layer-osm use.icon path { fill: #333; }                       /* FF svg Maki icons */
190 .layer-osm .turn use path { fill: #000; }                      /* FF turn restriction icons */
191 #turn-only-shape2, #turn-only-u-shape2 { fill: #7092ff; }      /* FF turn-only, turn-only-u */
192 #turn-no-shape2, #turn-no-u-shape2     { fill: #e06d5f; }      /* FF turn-no, turn-no-u */
193 #turn-yes-shape2, #turn-yes-u-shape2   { fill: #8cd05f; }      /* FF turn-yes, turn-yes-u */
194
195
196 /* No interactivity except what we specifically allow */
197 .data-layer.osm *,
198 .data-layer.notes *,
199 .data-layer.keepRight * {
200     pointer-events: none;
201 }
202
203 .lasso #map {
204     pointer-events: visibleStroke;
205 }
206
207
208 /* `.target` objects are interactive */
209 /* They can be picked up, clicked, hovered, or things can connect to them */
210 .kr_error.target,
211 .note.target,
212 .node.target,
213 .turn .target {
214     pointer-events: fill;
215     fill-opacity: 0.8;
216     fill: currentColor;
217     stroke: none;
218 }
219
220 .way.target {
221     pointer-events: stroke;
222     fill: none;
223     stroke-width: 12;
224     stroke-opacity: 0.8;
225     stroke: currentColor;
226     stroke-linecap: round;
227     stroke-linejoin: round;
228 }
229
230
231 /* `.target-nope` objects are explicitly forbidden to join to */
232 .surface:not(.nope-disabled) .node.target.target-nope,
233 .surface:not(.nope-disabled) .way.target.target-nope {
234     cursor: not-allowed;
235 }
236
237
238 /* `.active` objects (currently being drawn or dragged) are not interactive */
239 /* This is important to allow the events to drop through to whatever is */
240 /* below them on the map, so you can still hover and connect to other things. */
241 .layer-osm .active {
242     pointer-events: none !important;
243 }
244
245 /* NOTE: when more QA layers are added, replace kr_error with generic QA layer selector */
246 /* points, notes & QA */
247
248 /* points, notes, markers */
249 g.kr_error .stroke,
250 g.note .stroke {
251     stroke: #222;
252     stroke-width: 1;
253     fill: #222;
254     opacity: 0.6;
255 }
256
257 g.kr_error.active .stroke,
258 g.note.active .stroke {
259     stroke: #222;
260     stroke-width: 1;
261     fill: #222;
262     opacity: 0.8;
263 }
264
265 g.point .stroke {
266     stroke: #444;
267     stroke-width: 1;
268     fill: #fff;
269 }
270
271 g.kr_error .shadow,
272 g.point .shadow,
273 g.note .shadow {
274     fill: none;
275     stroke: #f6634f;
276     stroke-width: 16;
277     stroke-opacity: 0;
278 }
279
280 g.kr_error.hover:not(.selected) .shadow,
281 g.note.hover:not(.selected) .shadow,
282 g.point.related:not(.selected) .shadow,
283 g.point.hover:not(.selected) .shadow {
284     stroke-opacity: 0.5;
285 }
286
287 g.kr_error.selected .shadow,
288 g.note.selected .shadow,
289 g.point.selected .shadow {
290     stroke-opacity: 0.7;
291 }
292
293 /* g.note ellipse.stroke, */
294 g.point ellipse.stroke {
295     display: none;
296 }
297 .mode-drag-note g.note.active ellipse.stroke,
298 .mode-drag-node g.point.active ellipse.stroke {
299     display: block;
300 }
301
302
303 /* vertices and midpoints */
304 g.vertex .fill {
305     fill: #000;
306 }
307 g.vertex .stroke {
308     stroke: #666;
309     stroke-width: 1;
310     fill: white;
311 }
312 g.vertex.shared .stroke {
313     fill: #bbb;
314 }
315 g.midpoint .fill {
316     fill: #eee;
317     stroke: #444;
318     stroke-opacity: .6;
319     opacity: .7;
320 }
321
322 g.vertex .shadow,
323 g.midpoint .shadow {
324     stroke-width: 6;
325     fill: #f6634f;
326     fill-opacity: 0;
327 }
328
329 g.vertex.related:not(.selected) .shadow,
330 g.vertex.hover:not(.selected) .shadow,
331 g.midpoint.related:not(.selected) .shadow,
332 g.midpoint.hover:not(.selected) .shadow {
333     fill-opacity: 0.5;
334 }
335
336 g.vertex.selected .shadow {
337     fill-opacity: 0.7;
338 }
339
340
341 /* lines */
342 .preset-icon .icon.iD-other-line {
343     color: #fff;
344     fill: #777;
345 }
346
347 path.line {
348     stroke-linecap: round;
349     stroke-linejoin: round;
350 }
351
352 path.stroke {
353     stroke: #000;
354     stroke-width: 4;
355 }
356
357 path.shadow {
358     stroke: #f6634f;
359     stroke-width: 16;
360     stroke-opacity: 0;
361 }
362
363 path.shadow.related:not(.selected),
364 path.shadow.hover:not(.selected) {
365     stroke-opacity: 0.4;
366 }
367
368 path.shadow.selected {
369     stroke-opacity: 0.7;
370 }
371
372 path.line.stroke {
373     stroke: #fff;
374     stroke-width: 2;
375 }
376
377
378 /* Labels / Markers */
379 text {
380     font-size: 10px;
381     color: #222;
382     opacity: 1;
383 }
384
385 .oneway .textpath.tag-waterway {
386     fill: #002F35;
387 }
388
389 .onewaygroup path.oneway,
390 .viewfieldgroup path.viewfield,
391 .sidedgroup path.sided {
392     stroke-width: 6px;
393 }
394
395 text.arealabel-halo,
396 text.linelabel-halo,
397 text.pointlabel-halo,
398 text.arealabel,
399 text.linelabel,
400 text.pointlabel {
401     dominant-baseline: middle;
402     text-anchor: middle;
403     font-size: 12px;
404     font-weight: bold;
405     fill: #333;
406     -webkit-transition: opacity 100ms linear;
407     transition: opacity 100ms linear;
408     -moz-transition: opacity 100ms linear;
409 }
410
411 /* Opera doesn't support dominant-baseline. See #715 */
412 /* Safari 10 seems to have regressed too */
413 .linelabel-halo .textpath,
414 .linelabel .textpath {
415   baseline-shift: -33%;
416   dominant-baseline: auto;
417 }
418
419 .labels-group.halo text {
420     opacity: 0.7;
421     stroke: #fff;
422     stroke-width: 5px;
423     stroke-miterlimit: 1;
424 }
425
426 text.nolabel {
427     opacity: 0 !important;
428 }
429 text.point {
430     font-size: 10px;
431 }
432
433 .icon.areaicon-halo {
434     opacity: 0.6;
435     stroke: #999;
436     stroke-width: 2px;
437     stroke-miterlimit: 1;
438 }
439 .icon.areaicon {
440     fill: #222;
441     opacity: 0.8;
442 }
443
444 /* Highlighting */
445 g.point.highlighted .shadow,
446 path.shadow.highlighted {
447     stroke-opacity: 0.95;
448     stroke: #7092ff;
449 }
450 g.vertex.highlighted .shadow {
451     stroke-width: 7;
452     stroke-opacity: 0.95;
453     stroke: #7092ff;
454 }
455
456 /* Turn Restrictions */
457 .points-group.turns g.turn rect,
458 .points-group.turns g.turn circle {
459     fill: none;
460 }
461
462 /* Turn restriction paths and vertices */
463 .surface.tr .way.target,
464 .surface.tr path.shadow.selected,
465 .surface.tr path.shadow.related {
466     stroke-width: 25px;
467 }
468
469 .surface.tr path.shadow.selected,
470 .surface.tr path.shadow.related,
471 .surface.tr g.vertex.selected .shadow,
472 .surface.tr g.vertex.related .shadow {
473     stroke-opacity: 0.7;
474     stroke: #777;
475 }
476 .surface.tr path.shadow.related.allow,
477 .surface.tr g.vertex.related.allow .shadow {
478     stroke: #5b3;
479 }
480 .surface.tr path.shadow.related.restrict,
481 .surface.tr g.vertex.related.restrict .shadow {
482     stroke: #d53;
483 }
484 .surface.tr path.shadow.related.only,
485 .surface.tr g.vertex.related.only .shadow {
486     stroke: #68f;
487 }
488
489
490 /* Default - light gray */
491 path.area.stroke {
492     stroke: rgb(170, 170, 170);
493     stroke-width: 1;
494 }
495 path.area.fill {
496     stroke-width: 0;
497     stroke: rgba(255, 255, 255, 0.3);
498     fill: rgba(255, 255, 255, 0.3);
499     fill-rule: evenodd;
500 }
501 .preset-icon-fill-area {
502     border: 1px solid rgb(170, 170, 170);
503     background-color: rgba(170, 170, 170, 0.3);
504 }
505
506 path.shadow.old-multipolygon,
507 path.stroke.old-multipolygon {
508     stroke-dasharray: 100, 5;
509     stroke-linecap: butt;
510 }
511
512
513 /* Green things */
514 path.stroke.tag-landuse,
515 path.stroke.tag-natural,
516 path.stroke.tag-leisure-nature_reserve,
517 path.stroke.tag-leisure-pitch,
518 path.stroke.tag-leisure-track,
519 path.stroke.tag-leisure-golf_course,
520 path.stroke.tag-leisure-garden,
521 path.stroke.tag-leisure-park,
522 path.stroke.tag-barrier-hedge,
523 path.stroke.tag-landuse-forest,
524 path.stroke.tag-landuse-wood,
525 path.stroke.tag-landuse-grass {
526     stroke: rgb(140, 208, 95);
527 }
528 path.fill.tag-landuse,
529 path.fill.tag-natural,
530 path.fill.tag-leisure-nature_reserve,
531 path.fill.tag-leisure-pitch,
532 path.fill.tag-leisure-track,
533 path.fill.tag-leisure-golf_course,
534 path.fill.tag-leisure-garden,
535 path.fill.tag-leisure-park,
536 path.fill.tag-landuse-forest,
537 path.fill.tag-natural-wood,
538 path.fill.tag-landuse-grass {
539     stroke: rgba(140, 208, 95, 0.3);
540     fill: rgba(140, 208, 95, 0.3);
541 }
542 .preset-icon-fill-area.tag-landuse,
543 .preset-icon-fill-area.tag-natural,
544 .preset-icon-fill-area.tag-leisure-nature_reserve,
545 .preset-icon-fill-area.tag-leisure-pitch,
546 .preset-icon-fill-area.tag-leisure-track,
547 .preset-icon-fill-area.tag-leisure-golf_course,
548 .preset-icon-fill-area.tag-leisure-garden,
549 .preset-icon-fill-area.tag-leisure-park,
550 .preset-icon-fill-area.tag-landuse-forest,
551 .preset-icon-fill-area.tag-natural-wood,
552 .preset-icon-fill-area.tag-landuse-grass {
553     border-color: rgb(140, 208, 95);
554     background-color: rgba(140, 208, 95, 0.3);
555 }
556 .pattern-color-forest,
557 .pattern-color-forest_broadleaved,
558 .pattern-color-forest_needleleaved,
559 .pattern-color-forest_leafless,
560 .pattern-color-wood,
561 .pattern-color-grass {
562     fill: rgba(140, 208, 95, 0.3);
563 }
564
565
566 /* Blue things */
567 path.stroke.tag-amenity-fountain,
568 path.stroke.tag-amenity-swimming_pool,
569 path.stroke.tag-leisure-swimming_pool,
570 path.stroke.tag-landuse-aquaculture,
571 path.stroke.tag-landuse-basin,
572 path.stroke.tag-landuse-harbour,
573 path.stroke.tag-landuse-reservoir,
574 path.stroke.tag-man_made-groyne,
575 path.stroke.tag-man_made-breakwater,
576 path.stroke.tag-natural-water {
577     stroke: rgb(119, 211, 222);
578 }
579 path.fill.tag-amenity-fountain,
580 path.fill.tag-amenity-swimming_pool,
581 path.fill.tag-leisure-swimming_pool,
582 path.fill.tag-landuse-aquaculture,
583 path.fill.tag-landuse-basin,
584 path.fill.tag-landuse-harbour,
585 path.fill.tag-landuse-reservoir,
586 path.fill.tag-natural-water {
587     stroke: rgba(119, 211, 222, 0.3);
588     fill: rgba(119, 211, 222, 0.3);
589 }
590 .preset-icon-fill-area.tag-amenity-fountain,
591 .preset-icon-fill-area.tag-amenity-swimming_pool,
592 .preset-icon-fill-area.tag-leisure-swimming_pool,
593 .preset-icon-fill-area.tag-landuse-aquaculture,
594 .preset-icon-fill-area.tag-landuse-basin,
595 .preset-icon-fill-area.tag-landuse-harbour,
596 .preset-icon-fill-area.tag-landuse-reservoir,
597 .preset-icon-fill-area.tag-natural-water {
598     border-color: rgb(119, 211, 222);
599     background-color: rgba(119, 211, 222, 0.3);
600 }
601 .pattern-color-waves,
602 .pattern-color-water_standing,
603 .pattern-color-pond {
604     fill: rgba(119, 211, 222, 0.3);
605 }
606
607
608 /* Yellow things */
609 path.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
610 path.stroke.tag-leisure-pitch.tag-sport-baseball,
611 path.stroke.tag-leisure-pitch.tag-sport-softball,
612 path.stroke.tag-leisure-track,
613 path.stroke.tag-natural-beach,
614 path.stroke.tag-natural-sand,
615 path.stroke.tag-natural-scrub,
616 path.stroke.tag-amenity-childcare,
617 path.stroke.tag-amenity-kindergarten,
618 path.stroke.tag-amenity-school,
619 path.stroke.tag-amenity-college,
620 path.stroke.tag-amenity-university {
621     stroke: rgba(255, 255, 148, 0.75);
622 }
623 path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
624 path.fill.tag-leisure-pitch.tag-sport-baseball,
625 path.fill.tag-leisure-pitch.tag-sport-softball,
626 path.fill.tag-leisure-track,
627 path.fill.tag-natural-beach,
628 path.fill.tag-natural-sand,
629 path.fill.tag-natural-scrub,
630 path.fill.tag-amenity-childcare,
631 path.fill.tag-amenity-kindergarten,
632 path.fill.tag-amenity-school,
633 path.fill.tag-amenity-college,
634 path.fill.tag-amenity-university {
635     stroke: rgba(255, 255, 148, 0.25);
636     fill: rgba(255, 255, 148, 0.25);
637 }
638 .preset-icon-fill-area.tag-leisure-pitch.tag-sport-beachvolleyball,
639 .preset-icon-fill-area.tag-leisure-pitch.tag-sport-baseball,
640 .preset-icon-fill-area.tag-leisure-pitch.tag-sport-softball,
641 .preset-icon-fill-area.tag-leisure-track,
642 .preset-icon-fill-area.tag-natural-beach,
643 .preset-icon-fill-area.tag-natural-sand,
644 .preset-icon-fill-area.tag-natural-scrub,
645 .preset-icon-fill-area.tag-amenity-childcare,
646 .preset-icon-fill-area.tag-amenity-kindergarten,
647 .preset-icon-fill-area.tag-amenity-school,
648 .preset-icon-fill-area.tag-amenity-college,
649 .preset-icon-fill-area.tag-amenity-university {
650     border-color: rgb(232, 232, 0);
651     background-color: rgba(255, 255, 148, 0.25);
652 }
653 .pattern-color-beach,
654 .pattern-color-sand,
655 .pattern-color-scrub {
656     fill: rgba(255, 255, 148, 0.2);
657 }
658
659
660 /* Gold things */
661 path.stroke.tag-landuse-residential,
662 path.stroke.tag-landuse-construction {
663     stroke: rgb(196, 189, 25);
664 }
665 path.fill.tag-landuse-residential {
666     stroke: rgba(196, 189, 25, 0.3);
667     fill: rgba(196, 189, 25, 0.3);
668 }
669 .preset-icon-fill-area.tag-landuse-residential,
670 .preset-icon-fill-area.tag-landuse-construction {
671     border-color: rgb(196, 189, 25);
672     background: rgba(196, 189, 25, 0.3);
673 }
674 .pattern-color-construction {
675     fill: rgba(196, 189, 25, 0.3);
676 }
677
678
679 /* Orange things */
680 path.stroke.tag-landuse-retail,
681 path.stroke.tag-landuse-commercial,
682 path.stroke.tag-landuse-landfill,
683 path.stroke.tag-military,
684 path.stroke.tag-landuse-military {
685     stroke: rgb(214, 136, 26);
686 }
687 path.fill.tag-landuse-retail,
688 path.fill.tag-landuse-commercial,
689 path.fill.tag-landuse-landfill,
690 path.fill.tag-military,
691 path.fill.tag-landuse-military {
692     stroke: rgba(214, 136, 26, 0.3);
693     fill: rgba(214, 136, 26, 0.3);
694 }
695 .preset-icon-fill-area.tag-landuse-retail,
696 .preset-icon-fill-area.tag-landuse-commercial,
697 .preset-icon-fill-area.tag-landuse-landfill,
698 .preset-icon-fill-area.tag-military,
699 .preset-icon-fill-area.tag-landuse-military {
700     border-color: rgb(214, 136, 26);
701     background-color: rgba(214, 136, 26, 0.3);
702 }
703 .pattern-color-landfill {
704     fill: rgba(214, 136, 26, 0.3);
705 }
706
707
708 /* Pink things */
709 path.stroke.tag-landuse-industrial,
710 path.stroke.tag-power-plant {
711     stroke: rgb(228, 164, 245);
712 }
713 path.fill.tag-landuse-industrial,
714 path.fill.tag-power-plant {
715     stroke: rgba(228, 164, 245, 0.3);
716     fill: rgba(228, 164, 245, 0.3);
717 }
718 .preset-icon-fill-area.tag-landuse-industrial,
719 .preset-icon-fill-area.tag-power-plant {
720     border-color: rgb(228, 164, 245);
721     background-color: rgba(228, 164, 245, 0.3);
722 }
723
724
725 /* Teal things */
726 path.stroke.tag-natural-wetland {
727     stroke: rgb(153, 225, 170);
728 }
729 .preset-icon-fill-area.tag-natural-wetland {
730     border-color: rgb(153, 225, 170);
731     background-color: rgba(153, 225, 170, 0.2);
732 }
733 .pattern-color-wetland,
734 .pattern-color-wetland_marsh,
735 .pattern-color-wetland_swamp,
736 .pattern-color-wetland_bog,
737 .pattern-color-wetland_reedbed {
738     fill: rgba(153, 225, 170, 0.3);
739 }
740
741
742 /* Light Green things */
743 path.stroke.tag-landuse-cemetery,
744 path.stroke.tag-landuse-orchard,
745 path.stroke.tag-landuse-vineyard,
746 path.stroke.tag-landuse-meadow,
747 path.stroke.tag-landuse-farmland {
748     stroke: rgb(191, 232, 63);
749 }
750 .preset-icon-fill-area.tag-landuse-cemetery,
751 .preset-icon-fill-area.tag-landuse-orchard,
752 .preset-icon-fill-area.tag-landuse-vineyard,
753 .preset-icon-fill-area.tag-landuse-meadow,
754 .preset-icon-fill-area.tag-landuse-farmland {
755     background-color: rgba(191, 232, 63, 0.2);
756 }
757 .pattern-color-cemetery,
758 .pattern-color-cemetery_christian,
759 .pattern-color-cemetery_buddhist,
760 .pattern-color-cemetery_muslim,
761 .pattern-color-cemetery_jewish,
762 .pattern-color-orchard,
763 .pattern-color-vineyard,
764 .pattern-color-meadow,
765 .pattern-color-farmland {
766     fill: rgba(191, 232, 63, 0.2);
767 }
768
769
770 /* Tan things */
771 path.stroke.tag-landuse-farmyard {
772     stroke: rgb(245, 220, 186);
773 }
774 path.fill.tag-landuse-farmyard {
775     stroke: rgba(245, 220, 186, 0.3);
776     fill: rgba(245, 220, 186, 0.3);
777 }
778 .preset-icon-fill-area.tag-landuse-farmyard {
779     border-color: rgb(226, 177, 111);
780     background: rgba(245, 220, 186, 0.3);
781 }
782 .pattern-color-farmyard {
783     fill: rgba(245, 220, 186, 0.3);
784 }
785
786
787 /* Dark Gray things */
788 path.stroke.tag-amenity-parking,
789 path.stroke.tag-leisure-pitch.tag-sport-basketball,
790 path.stroke.tag-leisure-pitch.tag-sport-skateboard,
791 path.stroke.tag-natural-bare_rock,
792 path.stroke.tag-natural-scree,
793 path.stroke.tag-landuse-railway,
794 path.stroke.tag-landuse-quarry {
795     stroke: rgb(170, 170, 170);
796 }
797 path.fill.tag-amenity-parking,
798 path.fill.tag-leisure-pitch.tag-sport-basketball,
799 path.fill.tag-leisure-pitch.tag-sport-skateboard,
800 path.fill.tag-natural-bare_rock,
801 path.fill.tag-natural-scree,
802 path.fill.tag-landuse-railway,
803 path.fill.tag-landuse-quarry {
804     stroke: rgba(140, 140, 140, 0.5);
805     fill: rgba(140, 140, 140, 0.5);
806 }
807 .preset-icon-fill-area.tag-amenity-parking,
808 .preset-icon-fill-area.tag-leisure-pitch.tag-sport-basketball,
809 .preset-icon-fill-area.tag-leisure-pitch.tag-sport-skateboard,
810 .preset-icon-fill-area.tag-natural-bare_rock,
811 .preset-icon-fill-area.tag-natural-scree,
812 .preset-icon-fill-area.tag-landuse-railway,
813 .preset-icon-fill-area.tag-landuse-quarry {
814     border-color: rgb(170, 170, 170);
815     background-color: rgba(140, 140, 140, 0.5);
816 }
817 .pattern-color-quarry {
818     fill: rgba(140, 140, 140, 0.5);
819 }
820
821
822 /* Light gray overrides */
823 path.stroke.tag-natural-cave_entrance,
824 path.stroke.tag-natural-glacier {
825     stroke: rgb(170, 170, 170);
826 }
827 path.fill.tag-natural-cave_entrance,
828 path.fill.tag-natural-glacier {
829     stroke: rgba(255, 255, 255, 0.3);
830     fill: rgba(255, 255, 255, 0.3);
831 }
832 .preset-icon-fill-area.tag-natural-cave_entrance,
833 .preset-icon-fill-area.tag-natural-glacier {
834     border-color: rgb(170, 170, 170);
835     background: rgba(170, 170, 170, 0.3);
836 }
837 /* highways */
838
839 /* defaults */
840 .preset-icon .icon.tag-highway.other-line {
841     color: #fff;
842     fill: #777;
843 }
844 path.line.casing.tag-highway {
845     stroke: #444;
846 }
847 path.line.stroke.tag-highway {
848     stroke: #ccc;
849 }
850
851 /* wide highways */
852 path.line.shadow.tag-highway {
853     stroke-width: 20;
854 }
855 path.line.casing.tag-highway {
856     stroke-width: 10;
857 }
858 path.line.stroke.tag-highway {
859     stroke-width: 8;
860 }
861 .low-zoom path.line.shadow.tag-highway {
862     stroke-width: 16;
863 }
864 .low-zoom path.line.casing.tag-highway {
865     stroke-width: 7;
866 }
867 .low-zoom path.line.stroke.tag-highway {
868     stroke-width: 5;
869 }
870
871 .preset-icon .icon.iD-highway-motorway,
872 .preset-icon .icon.iD-highway-motorway-link {
873     color: #CF2081;
874     fill: #70372f;
875 }
876 path.line.stroke.tag-highway-motorway,
877 path.line.stroke.tag-highway-motorway_link,
878 path.line.stroke.tag-motorway {
879     stroke: #CF2081;
880 }
881 path.line.casing.tag-highway-motorway,
882 path.line.casing.tag-highway-motorway_link,
883 path.line.casing.tag-motorway {
884     stroke: #70372f;
885 }
886
887 .preset-icon .icon.iD-highway-trunk,
888 .preset-icon .icon.iD-highway-trunk-link {
889     color: #DD2F22;
890     fill: #70372f;
891 }
892 path.line.stroke.tag-highway-trunk,
893 path.line.stroke.tag-highway-trunk_link,
894 path.line.stroke.tag-trunk {
895     stroke: #DD2F22;
896 }
897 path.line.casing.tag-highway-trunk,
898 path.line.casing.tag-highway-trunk_link,
899 path.line.casing.tag-trunk {
900     stroke: #70372f;
901 }
902
903 .preset-icon .icon.iD-highway-primary,
904 .preset-icon .icon.iD-highway-primary-link {
905     color: #F99806;
906     fill: #70372f;
907 }
908 path.line.stroke.tag-highway-primary,
909 path.line.stroke.tag-highway-primary_link,
910 path.line.stroke.tag-primary {
911     stroke: #F99806;
912 }
913 path.line.casing.tag-highway-primary,
914 path.line.casing.tag-highway-primary_link,
915 path.line.casing.tag-primary {
916     stroke: #70372f;
917 }
918
919 .preset-icon .icon.iD-highway-secondary,
920 .preset-icon .icon.iD-highway-secondary-link {
921     color: #F3F312;
922     fill: #70372f;
923 }
924 path.line.stroke.tag-highway-secondary,
925 path.line.stroke.tag-highway-secondary_link,
926 path.line.stroke.tag-secondary {
927     stroke: #F3F312;
928 }
929 path.line.casing.tag-highway-secondary,
930 path.line.casing.tag-highway-secondary_link,
931 path.line.casing.tag-secondary {
932     stroke: #70372f;
933 }
934
935 .preset-icon .icon.iD-highway-tertiary,
936 .preset-icon .icon.iD-highway-tertiary-link {
937     color: #FFF9B3;
938     fill: #70372f;
939 }
940 path.line.stroke.tag-highway-tertiary,
941 path.line.stroke.tag-highway-tertiary_link,
942 path.line.stroke.tag-tertiary {
943     stroke: #FFF9B3;
944 }
945 path.line.casing.tag-highway-tertiary,
946 path.line.casing.tag-highway-tertiary_link,
947 path.line.casing.tag-tertiary {
948     stroke: #70372f;
949 }
950
951 .legacy-carto .preset-icon .icon.iD-highway-motorway,
952 .legacy-carto .preset-icon .icon.iD-highway-motorway-link {
953     color: #58a9ed;
954     fill: #2c5476;
955 }
956 .legacy-carto path.line.stroke.tag-highway-motorway,
957 .legacy-carto path.line.stroke.tag-highway-motorway_link,
958 .legacy-carto path.line.stroke.tag-motorway {
959     stroke: #58a9ed;
960 }
961 .legacy-carto path.line.casing.tag-highway-motorway,
962 .legacy-carto path.line.casing.tag-highway-motorway_link,
963 .legacy-carto path.line.casing.tag-motorway {
964     stroke: #2c5476;
965 }
966
967 .legacy-carto .preset-icon .icon.iD-highway-trunk,
968 .legacy-carto .preset-icon .icon.iD-highway-trunk-link {
969     color: #8cd05f;
970     fill: #46682f;
971 }
972 .legacy-carto path.line.stroke.tag-highway-trunk,
973 .legacy-carto path.line.stroke.tag-highway-trunk_link,
974 .legacy-carto path.line.stroke.tag-trunk {
975     stroke: #8cd05f;
976 }
977 .legacy-carto path.line.casing.tag-highway-trunk,
978 .legacy-carto path.line.casing.tag-highway-trunk_link,
979 .legacy-carto path.line.casing.tag-trunk {
980     stroke: #46682f;
981 }
982
983 .legacy-carto .preset-icon .icon.iD-highway-primary,
984 .legacy-carto .preset-icon .icon.iD-highway-primary-link {
985     color: #e06d5f;
986     fill: #70372f;
987 }
988 .legacy-carto path.line.stroke.tag-highway-primary,
989 .legacy-carto path.line.stroke.tag-highway-primary_link,
990 .legacy-carto path.line.stroke.tag-primary {
991     stroke: #e06d5f;
992 }
993 .legacy-carto path.line.casing.tag-highway-primary,
994 .legacy-carto path.line.casing.tag-highway-primary_link,
995 .legacy-carto path.line.casing.tag-primary {
996     stroke: #70372f;
997 }
998
999 .legacy-carto .preset-icon .icon.iD-highway-secondary,
1000 .legacy-carto .preset-icon .icon.iD-highway-secondary-link {
1001     color: #eab056;
1002     fill: #75582b;
1003 }
1004 .legacy-carto path.line.stroke.tag-highway-secondary,
1005 .legacy-carto path.line.stroke.tag-highway-secondary_link,
1006 .legacy-carto path.line.stroke.tag-secondary {
1007     stroke: #eab056;
1008 }
1009 .legacy-carto path.line.casing.tag-highway-secondary,
1010 .legacy-carto path.line.casing.tag-highway-secondary_link,
1011 .legacy-carto path.line.casing.tag-secondary {
1012     stroke: #75582b;
1013 }
1014
1015 .legacy-carto .preset-icon .icon.iD-highway-tertiary,
1016 .legacy-carto .preset-icon .icon.iD-highway-tertiary-link {
1017     color: #ffff7e;
1018     fill: #7f7f3f;
1019 }
1020 .legacy-carto path.line.stroke.tag-highway-tertiary,
1021 .legacy-carto path.line.stroke.tag-highway-tertiary_link,
1022 .legacy-carto path.line.stroke.tag-tertiary {
1023     stroke: #ffff7e;
1024 }
1025 .legacy-carto path.line.casing.tag-highway-tertiary,
1026 .legacy-carto path.line.casing.tag-highway-tertiary_link,
1027 .legacy-carto path.line.casing.tag-tertiary {
1028     stroke: #7f7f3f;
1029 }
1030
1031 .preset-icon .icon.iD-highway-residential {
1032     color: #fff;
1033     fill: #444;
1034 }
1035 path.line.stroke.tag-highway-residential,
1036 path.line.stroke.tag-residential {
1037     stroke: #fff;
1038 }
1039 path.line.casing.tag-highway-residential,
1040 path.line.casing.tag-residential {
1041     stroke: #444;
1042 }
1043
1044 .preset-icon .icon.iD-highway-unclassified {
1045     color: #dca;
1046     fill: #444;
1047 }
1048 path.line.stroke.tag-highway-unclassified,
1049 path.line.stroke.tag-unclassified {
1050     stroke: #dca;
1051 }
1052 path.line.casing.tag-highway-unclassified,
1053 path.line.casing.tag-unclassified {
1054     stroke: #444;
1055 }
1056
1057
1058 /* narrow highways */
1059 path.line.shadow.tag-highway-living_street,
1060 path.line.shadow.tag-highway-bus_guideway,
1061 path.line.shadow.tag-highway-service,
1062 path.line.shadow.tag-highway-track,
1063 path.line.shadow.tag-highway-road,
1064 path.line.shadow.tag-living_street,
1065 path.line.shadow.tag-service,
1066 path.line.shadow.tag-track,
1067 path.line.shadow.tag-road {
1068     stroke-width: 16;
1069 }
1070 path.line.casing.tag-highway-living_street,
1071 path.line.casing.tag-highway-bus_guideway,
1072 path.line.casing.tag-highway-service,
1073 path.line.casing.tag-highway-track,
1074 path.line.casing.tag-highway-road,
1075 path.line.casing.tag-living_street,
1076 path.line.casing.tag-service,
1077 path.line.casing.tag-track,
1078 path.line.casing.tag-road {
1079     stroke-width: 7;
1080 }
1081 path.line.stroke.tag-highway-living_street,
1082 path.line.stroke.tag-highway-bus_guideway,
1083 path.line.stroke.tag-highway-service,
1084 path.line.stroke.tag-highway-track,
1085 path.line.stroke.tag-highway-road,
1086 path.line.stroke.tag-living_street,
1087 path.line.stroke.tag-service,
1088 path.line.stroke.tag-track,
1089 path.line.stroke.tag-road {
1090     stroke-width: 5;
1091 }
1092
1093 path.line.shadow.tag-highway-path,
1094 path.line.shadow.tag-highway-footway,
1095 path.line.shadow.tag-highway-cycleway,
1096 path.line.shadow.tag-highway-bridleway,
1097 path.line.shadow.tag-highway-corridor,
1098 path.line.shadow.tag-highway-pedestrian,
1099 path.line.shadow.tag-highway-steps,
1100 path.line.shadow.tag-path,
1101 path.line.shadow.tag-footway,
1102 path.line.shadow.tag-cycleway,
1103 path.line.shadow.tag-bridleway,
1104 path.line.shadow.tag-corridor,
1105 path.line.shadow.tag-pedestrian,
1106 path.line.shadow.tag-steps {
1107     stroke-width: 16;
1108 }
1109 path.line.casing.tag-highway-path,
1110 path.line.casing.tag-highway-footway,
1111 path.line.casing.tag-highway-cycleway,
1112 path.line.casing.tag-highway-bridleway,
1113 path.line.casing.tag-highway-corridor,
1114 path.line.casing.tag-highway-pedestrian,
1115 path.line.casing.tag-highway-steps,
1116 path.line.casing.tag-path,
1117 path.line.casing.tag-footway,
1118 path.line.casing.tag-cycleway,
1119 path.line.casing.tag-bridleway,
1120 path.line.casing.tag-corridor,
1121 path.line.casing.tag-pedestrian,
1122 path.line.casing.tag-steps {
1123     stroke-width: 5;
1124 }
1125 path.line.stroke.tag-highway-path,
1126 path.line.stroke.tag-highway-footway,
1127 path.line.stroke.tag-highway-cycleway,
1128 path.line.stroke.tag-highway-bridleway,
1129 path.line.stroke.tag-highway-corridor,
1130 path.line.stroke.tag-highway-pedestrian,
1131 path.line.stroke.tag-highway-steps,
1132 path.line.stroke.tag-path,
1133 path.line.stroke.tag-footway,
1134 path.line.stroke.tag-cycleway,
1135 path.line.stroke.tag-bridleway,
1136 path.line.stroke.tag-corridor,
1137 path.line.stroke.tag-pedestrian,
1138 path.line.stroke.tag-steps {
1139     stroke-width: 3;
1140 }
1141
1142 .low-zoom path.line.shadow.tag-highway-living_street,
1143 .low-zoom path.line.shadow.tag-highway-bus_guideway,
1144 .low-zoom path.line.shadow.tag-highway-service,
1145 .low-zoom path.line.shadow.tag-highway-track,
1146 .low-zoom path.line.shadow.tag-highway-road,
1147 .low-zoom path.line.shadow.tag-living_street,
1148 .low-zoom path.line.shadow.tag-service,
1149 .low-zoom path.line.shadow.tag-track,
1150 .low-zoom path.line.shadow.tag-road {
1151     stroke-width: 12;
1152 }
1153 .low-zoom path.line.casing.tag-highway-living_street,
1154 .low-zoom path.line.casing.tag-highway-bus_guideway,
1155 .low-zoom path.line.casing.tag-highway-service,
1156 .low-zoom path.line.casing.tag-highway-track,
1157 .low-zoom path.line.casing.tag-highway-road,
1158 .low-zoom path.line.casing.tag-living_street,
1159 .low-zoom path.line.casing.tag-service,
1160 .low-zoom path.line.casing.tag-track,
1161 .low-zoom path.line.casing.tag-road {
1162     stroke-width: 5;
1163 }
1164 .low-zoom path.line.stroke.tag-highway-living_street,
1165 .low-zoom path.line.stroke.tag-highway-bus_guideway,
1166 .low-zoom path.line.stroke.tag-highway-service,
1167 .low-zoom path.line.stroke.tag-highway-track,
1168 .low-zoom path.line.stroke.tag-highway-road,
1169 .low-zoom path.line.stroke.tag-living_street,
1170 .low-zoom path.line.stroke.tag-service,
1171 .low-zoom path.line.stroke.tag-track,
1172 .low-zoom path.line.stroke.tag-road {
1173     stroke-width: 3;
1174 }
1175
1176 .low-zoom path.line.shadow.tag-highway-path,
1177 .low-zoom path.line.shadow.tag-highway-footway,
1178 .low-zoom path.line.shadow.tag-highway-cycleway,
1179 .low-zoom path.line.shadow.tag-highway-bridleway,
1180 .low-zoom path.line.shadow.tag-highway-corridor,
1181 .low-zoom path.line.shadow.tag-highway-pedestrian,
1182 .low-zoom path.line.shadow.tag-highway-steps,
1183 .low-zoom path.line.shadow.tag-path,
1184 .low-zoom path.line.shadow.tag-footway,
1185 .low-zoom path.line.shadow.tag-cycleway,
1186 .low-zoom path.line.shadow.tag-bridleway,
1187 .low-zoom path.line.shadow.tag-corridor,
1188 .low-zoom path.line.shadow.tag-pedestrian,
1189 .low-zoom path.line.shadow.tag-steps {
1190     stroke-width: 12;
1191 }
1192 .low-zoom path.line.casing.tag-highway-path,
1193 .low-zoom path.line.casing.tag-highway-footway,
1194 .low-zoom path.line.casing.tag-highway-cycleway,
1195 .low-zoom path.line.casing.tag-highway-bridleway,
1196 .low-zoom path.line.casing.tag-highway-corridor,
1197 .low-zoom path.line.casing.tag-highway-pedestrian,
1198 .low-zoom path.line.casing.tag-highway-steps,
1199 .low-zoom path.line.casing.tag-path,
1200 .low-zoom path.line.casing.tag-footway,
1201 .low-zoom path.line.casing.tag-cycleway,
1202 .low-zoom path.line.casing.tag-bridleway,
1203 .low-zoom path.line.casing.tag-corridor,
1204 .low-zoom path.line.casing.tag-pedestrian,
1205 .low-zoom path.line.casing.tag-steps {
1206     stroke-width: 3;
1207 }
1208 .low-zoom path.line.stroke.tag-highway-path,
1209 .low-zoom path.line.stroke.tag-highway-footway,
1210 .low-zoom path.line.stroke.tag-highway-cycleway,
1211 .low-zoom path.line.stroke.tag-highway-bridleway,
1212 .low-zoom path.line.stroke.tag-highway-corridor,
1213 .low-zoom path.line.stroke.tag-highway-pedestrian,
1214 .low-zoom path.line.stroke.tag-highway-steps,
1215 .low-zoom path.line.stroke.tag-path,
1216 .low-zoom path.line.stroke.tag-footway,
1217 .low-zoom path.line.stroke.tag-cycleway,
1218 .low-zoom path.line.stroke.tag-bridleway,
1219 .low-zoom path.line.stroke.tag-corridor,
1220 .low-zoom path.line.stroke.tag-pedestrian,
1221 .low-zoom path.line.stroke.tag-steps {
1222     stroke-width: 1;
1223 }
1224
1225
1226 .preset-icon .icon.iD-highway-living-street {
1227     color: #bbb;
1228     fill: #ddd;
1229 }
1230 path.line.stroke.tag-highway-living_street,
1231 path.line.stroke.tag-living_street {
1232     stroke: #ccc;
1233 }
1234 path.line.casing.tag-highway-living_street,
1235 path.line.casing.tag-living_street {
1236     stroke: #fff;
1237 }
1238
1239 .preset-icon .icon.iD-highway-footway.tag-highway-corridor,
1240 .preset-icon .icon.iD-highway-footway.tag-highway-pedestrian {
1241     color: #8cd05f;
1242     fill: #fff;
1243 }
1244 path.line.stroke.tag-highway-corridor,
1245 path.line.stroke.tag-highway-pedestrian,
1246 path.line.stroke.tag-corridor,
1247 path.line.stroke.tag-pedestrian {
1248     stroke: #fff;
1249     stroke-dasharray: 2, 8;
1250 }
1251 .low-zoom path.line.stroke.tag-highway-corridor,
1252 .low-zoom path.line.stroke.tag-highway-pedestrian,
1253 .low-zoom path.line.stroke.tag-corridor,
1254 .low-zoom path.line.stroke.tag-pedestrian {
1255     stroke-dasharray: 1, 4;
1256 }
1257 path.line.casing.tag-highway-corridor,
1258 path.line.casing.tag-highway-pedestrian,
1259 path.line.casing.tag-corridor,
1260 path.line.casing.tag-pedestrian,
1261 path.line.casing.tag-highway-corridor.tag-unpaved,
1262 path.line.casing.tag-highway-pedestrian.tag-unpaved,
1263 path.line.casing.tag-corridor.tag-unpaved,
1264 path.line.casing.tag-pedestrian.tag-unpaved {
1265     stroke: #8cd05f;
1266     stroke-linecap: round;
1267     stroke-dasharray: none;
1268 }
1269
1270 .preset-icon .icon.iD-highway-road {
1271     color: #9e9e9e;
1272     fill: #666;
1273 }
1274 path.line.stroke.tag-highway-road,
1275 path.line.stroke.tag-road {
1276     stroke: #9e9e9e;
1277 }
1278 path.line.casing.tag-highway-road,
1279 path.line.casing.tag-road {
1280     stroke: #666;
1281 }
1282
1283 .preset-icon .icon.iD-highway-service {
1284     color: #fff;
1285     fill: #666;
1286 }
1287 path.line.stroke.tag-highway-service,
1288 path.line.stroke.tag-service {
1289     stroke: #fff;
1290 }
1291 path.line.casing.tag-highway-service,
1292 path.line.casing.tag-service {
1293     stroke: #666;
1294 }
1295
1296 /* special service roads and bus guideways */
1297 /* with `service=* tag`  (e.g. parking_aisle, alley, drive-through */
1298 .preset-icon .icon.iD-highway-bus_guideway,
1299 .preset-icon .icon.iD-highway-service.tag-service {
1300     color: #dca;
1301     fill: #666;
1302 }
1303 path.line.stroke.tag-highway-bus_guideway,
1304 path.line.stroke.tag-highway-service.tag-service,
1305 path.line.stroke.tag-service.tag-service {
1306     stroke: #dca;
1307 }
1308 path.line.casing.tag-highway-bus_guideway,
1309 path.line.casing.tag-highway-service.tag-service,
1310 path.line.casing.tag-service.tag-service {
1311     stroke: #666;
1312 }
1313
1314 .preset-icon .icon.iD-highway-track {
1315     color: #eaeaea;
1316     fill: #c5b59f;
1317 }
1318 path.line.stroke.tag-highway-track,
1319 path.line.stroke.tag-track {
1320     stroke: #c5b59f;
1321 }
1322 path.line.casing.tag-highway-track,
1323 path.line.casing.tag-track {
1324     stroke: #746f6f;
1325 }
1326
1327 path.line.stroke.tag-highway-path,
1328 path.line.stroke.tag-highway-footway,
1329 path.line.stroke.tag-highway-cycleway,
1330 path.line.stroke.tag-highway-bridleway {
1331     stroke-linecap: butt;
1332     stroke-dasharray: 6, 6;
1333 }
1334 .low-zoom path.line.stroke.tag-highway-path,
1335 .low-zoom path.line.stroke.tag-highway-footway,
1336 .low-zoom path.line.stroke.tag-highway-cycleway,
1337 .low-zoom path.line.stroke.tag-highway-bridleway {
1338     stroke-linecap: butt;
1339     stroke-dasharray: 3, 3;
1340 }
1341
1342 path.line.casing.tag-highway-path,
1343 path.line.casing.tag-highway-path.tag-unpaved {
1344     stroke: #dca;
1345     stroke-linecap: round;
1346     stroke-dasharray: none;
1347 }
1348 path.line.casing.tag-highway-footway,
1349 path.line.casing.tag-highway-cycleway,
1350 path.line.casing.tag-highway-bridleway,
1351 path.line.casing.tag-highway-footway.tag-unpaved,
1352 path.line.casing.tag-highway-cycleway.tag-unpaved,
1353 path.line.casing.tag-highway-bridleway.tag-unpaved {
1354     stroke: #fff;
1355     stroke-linecap: round;
1356     stroke-dasharray: none;
1357 }
1358
1359 .preset-icon .icon.iD-category-path,
1360 .preset-icon .icon.iD-highway-path {
1361     color: #988;
1362     fill: #dca;
1363 }
1364 path.line.stroke.tag-highway-path {
1365     stroke: #988;
1366 }
1367
1368 .preset-icon .icon.tag-route-foot,
1369 .preset-icon .icon.tag-route-hiking,
1370 .preset-icon .icon.iD-highway-footway {
1371     color: #988;
1372     fill: #fff;
1373 }
1374 path.line.stroke.tag-highway-footway {
1375     stroke: #988;
1376 }
1377
1378
1379 .preset-icon .icon.tag-route-bicycle,
1380 .preset-icon .icon.iD-highway-cycleway {
1381     color: #58a9ed;
1382     fill: #fff;
1383 }
1384 path.line.stroke.tag-highway-cycleway {
1385     stroke: #58a9ed;
1386 }
1387
1388 .preset-icon .icon.tag-route-horse,
1389 .preset-icon .icon.iD-highway-bridleway {
1390     color: #e06d5f;
1391     fill: #fff;
1392 }
1393 path.line.stroke.tag-highway-bridleway {
1394     stroke: #e06d5f;
1395 }
1396
1397 .preset-icon .icon.iD-highway-steps {
1398     color: #81d25c;
1399     fill: #fff;
1400 }
1401 path.line.stroke.tag-highway-steps {
1402     stroke: #81d25c;
1403     stroke-linecap: butt;
1404     stroke-dasharray: 3, 3;
1405 }
1406 .low-zoom path.line.stroke.tag-highway-steps {
1407     stroke-dasharray: 2, 2;
1408 }
1409 path.line.casing.tag-highway-steps,
1410 path.line.casing.tag-highway-steps.tag-unpaved {
1411     stroke: #fff;
1412     stroke-linecap: round;
1413     stroke-dasharray: none;
1414 }
1415
1416 /* highway midpoints */
1417 g.midpoint.tag-highway-corridor .fill,
1418 g.midpoint.tag-highway-pedestrian .fill,
1419 g.midpoint.tag-highway-steps .fill,
1420 g.midpoint.tag-highway-path .fill,
1421 g.midpoint.tag-highway-footway .fill,
1422 g.midpoint.tag-highway-cycleway .fill,
1423 g.midpoint.tag-highway-bridleway .fill {
1424     fill: #fff;
1425     stroke: #333;
1426     stroke-opacity: .8;
1427     opacity: .8;
1428 }
1429 /* aeroways */
1430
1431 /* areas */
1432 path.area.stroke.tag-aeroway,
1433 .low-zoom path.area.stroke.tag-aeroway {
1434     stroke: #fff;
1435     stroke-dasharray: none;
1436     stroke-width: 1;
1437 }
1438 path.area.fill.tag-aeroway-runway {
1439     stroke: rgba(0, 0, 0, 0.6);
1440     fill: rgba(0, 0, 0, 0.6);
1441 }
1442
1443 /* lines */
1444 /* narrow aeroways (taxiway) */
1445 path.line.shadow.tag-aeroway-taxiway,
1446 path.line.shadow.tag-taxiway {
1447     stroke-width: 16;
1448 }
1449 path.line.casing.tag-aeroway-taxiway,
1450 path.line.casing.tag-taxiway {
1451     stroke-width: 7;
1452 }
1453 path.line.stroke.tag-aeroway-taxiway,
1454 path.line.stroke.tag-taxiway {
1455     stroke-width: 5;
1456 }
1457 .low-zoom path.line.shadow.tag-aeroway-taxiway,
1458 .low-zoom path.line.shadow.tag-taxiway {
1459     stroke-width: 12;
1460 }
1461 .low-zoom path.line.casing.tag-aeroway-taxiway,
1462 .low-zoom path.line.casing.tag-taxiway {
1463     stroke-width: 5;
1464 }
1465 .low-zoom path.line.stroke.tag-aeroway-taxiway,
1466 .low-zoom path.line.stroke.tag-taxiway {
1467     stroke-width: 3;
1468 }
1469
1470 .preset-icon .icon.tag-aeroway-taxiway,
1471 .preset-icon .icon.tag-taxiway {
1472     color: #ff0;
1473     fill: #666;
1474 }
1475 path.line.stroke.tag-aeroway-taxiway,
1476 path.line.stroke.tag-taxiway {
1477     stroke: #ff0;
1478 }
1479 path.line.casing.tag-aeroway-taxiway,
1480 path.line.casing.tag-taxiway {
1481     stroke: #666;
1482 }
1483
1484 /* wide aeroways (runway) */
1485 .preset-icon .icon.tag-aeroway-runway,
1486 .preset-icon .icon.tag-runway {
1487     color: #444;
1488     fill: #000;
1489 }
1490 path.line.shadow.tag-aeroway-runway {
1491     stroke-width: 20;
1492 }
1493 path.line.casing.tag-aeroway-runway {
1494     stroke-width: 10;
1495     stroke: #000;
1496     stroke-linecap: square;
1497 }
1498 path.line.stroke.tag-aeroway-runway {
1499     stroke: #fff;
1500     stroke-width: 2;
1501     stroke-linecap: butt;
1502     stroke-dasharray: 24, 48;
1503 }
1504 .low-zoom path.line.shadow.tag-aeroway-runway {
1505     stroke-width: 16;
1506 }
1507 .low-zoom path.line.casing.tag-aeroway-runway {
1508     stroke-width: 7;
1509 }
1510 .low-zoom path.line.stroke.tag-aeroway-runway {
1511     stroke-width: 2;
1512     stroke-dasharray: 12, 24;
1513 }
1514
1515 /* railways */
1516
1517 /* defaults */
1518 .preset-icon .icon.tag-railway.other-line {
1519     color: #fff;
1520     fill: #777;
1521 }
1522 .preset-icon .icon.tag-railway {
1523     color: #555;
1524     fill: #eee;
1525 }
1526
1527 /* lines */
1528 /* narrow widths */
1529 path.line.shadow.tag-railway {
1530     stroke-width: 16;
1531 }
1532 path.line.casing.tag-railway {
1533     stroke-width: 7;
1534 }
1535 path.line.stroke.tag-railway {
1536     stroke-width: 2;
1537     stroke-linecap: butt;
1538     stroke-dasharray: 12,12;
1539 }
1540 .low-zoom path.line.shadow.tag-railway {
1541     stroke-width: 12;
1542 }
1543 .low-zoom path.line.casing.tag-railway {
1544     stroke-width: 5;
1545 }
1546 .low-zoom path.line.stroke.tag-railway {
1547     stroke-width: 2;
1548     stroke-dasharray: 6,6;
1549 }
1550
1551
1552 /* styles */
1553 path.line.casing.tag-railway {
1554     stroke: #555;
1555 }
1556 path.line.stroke.tag-railway {
1557     stroke: #eee;
1558 }
1559
1560
1561 .preset-icon .icon.tag-railway-disused,
1562 .preset-icon .icon.tag-railway-abandoned {
1563     color: #999;
1564     fill: #eee;
1565 }
1566 path.line.casing.tag-railway-disused,
1567 path.line.casing.tag-railway-abandoned {
1568     stroke: #999;
1569 }
1570 path.line.stroke.tag-railway-disused,
1571 path.line.stroke.tag-railway-abandoned {
1572     stroke: #eee;
1573 }
1574
1575
1576 .preset-icon .icon.tag-railway-subway {
1577     color: #222;
1578     fill: #bbb;
1579 }
1580 path.line.casing.tag-railway-subway {
1581     stroke: #222;
1582 }
1583 path.line.stroke.tag-railway-subway {
1584     stroke: #bbb;
1585 }
1586 /* waterways */
1587
1588 /* defaults */
1589 .preset-icon .icon.tag-waterway.other-line {
1590     color: #77d3de;
1591     fill: #77d3de;
1592 }
1593 .preset-icon .icon.iD-category-water,
1594 .preset-icon .icon.tag-type-waterway,
1595 .preset-icon .icon.tag-waterway {
1596     color: #77d3de;
1597     fill: #fff;
1598 }
1599
1600 path.fill.tag-waterway {
1601     stroke: rgba(119, 211, 222, 0.3);
1602     fill: rgba(119, 211, 222, 0.3);
1603 }
1604 path.line.casing.tag-waterway {
1605     stroke: #3d6c71;
1606 }
1607 path.line.stroke.tag-waterway {
1608     stroke: #77d3de;
1609 }
1610
1611 /* areas */
1612 path.area.stroke.tag-waterway-dock,
1613 path.area.stroke.tag-waterway-boatyard,
1614 path.area.stroke.tag-waterway-fuel {
1615     stroke: white;
1616     stroke-width: 1;
1617 }
1618 path.area.casing.tag-waterway-dock,
1619 path.area.casing.tag-waterway-boatyard,
1620 path.area.casing.tag-waterway-fuel {
1621     stroke: none;
1622 }
1623 path.area.fill.tag-waterway-dock,
1624 path.area.fill.tag-waterway-boatyard,
1625 path.area.fill.tag-waterway-fuel {
1626     stroke: rgba(255, 255, 255, 0.3);
1627     fill: rgba(255, 255, 255, 0.3);
1628 }
1629
1630 /* lines */
1631 path.fill.tag-waterway {
1632     stroke: rgba(119, 211, 222, 0.3);
1633     fill: rgba(119, 211, 222, 0.3);
1634 }
1635 path.line.casing.tag-waterway {
1636     stroke: #3d6c71;
1637 }
1638 path.line.stroke.tag-waterway {
1639     stroke: #77d3de;
1640 }
1641
1642
1643 /* narrow waterways (default) */
1644 path.line.shadow.tag-waterway {
1645     stroke-width: 16;
1646 }
1647 path.line.casing.tag-waterway {
1648     stroke-width: 7;
1649 }
1650 path.line.stroke.tag-waterway {
1651     stroke-width: 5;
1652 }
1653
1654 .low-zoom path.line.shadow.tag-waterway {
1655     stroke-width: 12;
1656 }
1657 .low-zoom path.line.casing.tag-waterway {
1658     stroke-width: 5;
1659 }
1660 .low-zoom path.line.stroke.tag-waterway {
1661     stroke-width: 3;
1662 }
1663
1664
1665 /* wide waterways (river) */
1666 path.line.shadow.tag-waterway-river {
1667     stroke-width: 20;
1668 }
1669 path.line.casing.tag-waterway-river {
1670     stroke-width: 10;
1671 }
1672 path.line.stroke.tag-waterway-river {
1673     stroke-width: 8;
1674 }
1675
1676 .low-zoom path.line.shadow.tag-waterway-river {
1677     stroke-width: 16;
1678 }
1679 .low-zoom path.line.casing.tag-waterway-river {
1680     stroke-width: 7;
1681 }
1682 .low-zoom path.line.stroke.tag-waterway-river {
1683     stroke-width: 5;
1684 }
1685
1686
1687 /* ditch */
1688 .preset-icon .icon.tag-waterway-ditch {
1689     color: #8eabf3;
1690 }
1691 path.line.stroke.tag-waterway-ditch {
1692     stroke: #8eabf3;
1693 }
1694
1695
1696 /* ferry routes  */
1697 .preset-icon .icon.tag-route-ferry {
1698     color: #58a9ed;
1699     fill: #fff;
1700 }
1701 path.line.shadow.tag-route-ferry {
1702     stroke-width: 16;
1703 }
1704 path.line.stroke.tag-route-ferry {
1705     stroke-width: 3;
1706     stroke-linecap: butt;
1707     stroke-dasharray: 12,8;
1708 }
1709 .low-zoom path.line.shadow.tag-route-ferry {
1710     stroke-width: 12;
1711 }
1712 .low-zoom path.line.stroke.tag-route-ferry {
1713     stroke-width: 2;
1714     stroke-dasharray: 6,4;
1715 }
1716 path.line.stroke.tag-route-ferry {
1717     stroke: #58a9ed;
1718 }
1719
1720
1721 /* power and pipeline */
1722 .preset-icon .icon.tag-man_made-pipeline,
1723 .preset-icon .icon.tag-power {
1724     color: #939393;
1725     fill: #939393;
1726 }
1727
1728 /* power */
1729 path.line.stroke.tag-power {
1730     stroke: #939393;
1731     stroke-width: 2;
1732 }
1733 path.line.casing.tag-power {
1734     stroke: none;
1735 }
1736
1737 /* pipeline */
1738 path.line.stroke.tag-man_made-pipeline {
1739     stroke: #cbd0d8;
1740     stroke-linecap: butt;
1741     stroke-width: 3;
1742     stroke-dasharray: 80, 1.25;
1743 }
1744 path.line.casing.tag-man_made-pipeline {
1745     stroke: #666;
1746     stroke-width: 4.5;
1747 }
1748 .low-zoom path.line.stroke.tag-man_made-pipeline {
1749     stroke-dasharray: 40, 1;
1750 }
1751
1752 /* boundaries */
1753 path.line.stroke.tag-boundary {
1754     stroke: #fff;
1755     stroke-width: 2;
1756     stroke-linecap: butt;
1757     stroke-dasharray: 20, 5, 5, 5;
1758 }
1759 path.line.casing.tag-boundary {
1760     stroke: #82b5fe;
1761     stroke-width: 6;
1762 }
1763
1764 path.line.casing.tag-boundary-protected_area,
1765 path.line.casing.tag-boundary-national_park {
1766     stroke: #b0e298;
1767 }
1768
1769
1770 /* Tree Rows */
1771 path.line.shadow.tag-natural-tree_row {
1772     stroke-width: 16;
1773 }
1774 path.line.casing.tag-natural-tree_row {
1775     stroke-width: 7;
1776 }
1777 path.line.stroke.tag-natural-tree_row {
1778     stroke-width: 5;
1779 }
1780 .low-zoom path.line.shadow.tag-natural-tree_row {
1781     stroke-width: 12;
1782 }
1783 .low-zoom path.line.casing.tag-natural-tree_row {
1784     stroke-width: 5;
1785 }
1786 .low-zoom path.line.stroke.tag-natural-tree_row {
1787     stroke-width: 3;
1788 }
1789
1790
1791 /* barriers and similar */
1792 path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
1793     stroke: #ddd;
1794 }
1795 path.line.stroke.tag-barrier,
1796 path.stroke.tag-man_made-groyne,
1797 path.stroke.tag-man_made-breakwater {
1798     stroke-width: 3px;
1799     stroke-linecap: round;
1800     stroke-dasharray: 15, 5, 1, 5;
1801 }
1802 .low-zoom path.line.stroke.tag-barrier,
1803 .low-zoom path.stroke.tag-man_made-groyne,
1804 .low-zoom path.stroke.tag-man_made-breakwater {
1805     stroke-width: 2px;
1806     stroke-linecap: butt;
1807     stroke-dasharray: 8, 2, 2, 2;
1808 }
1809
1810
1811 /* bridges */
1812 path.line.casing.tag-bridge {
1813     stroke-opacity: 0.6;
1814     stroke: #000 !important;
1815     stroke-linecap: butt;
1816     stroke-dasharray: none;
1817 }
1818 path.line.shadow.tag-bridge {
1819     stroke-width: 24;
1820 }
1821 path.line.casing.tag-bridge {
1822     stroke-width: 16;
1823 }
1824 .low-zoom path.line.shadow.tag-bridge {
1825     stroke-width: 16;
1826 }
1827 .low-zoom path.line.casing.tag-bridge {
1828     stroke-width: 10;
1829 }
1830
1831 path.line.shadow.tag-railway.tag-bridge,
1832 path.line.shadow.tag-highway-living_street.tag-bridge,
1833 path.line.shadow.tag-highway-path.tag-bridge,
1834 path.line.shadow.tag-highway-corridor.tag-bridge,
1835 path.line.shadow.tag-highway-pedestrian.tag-bridge,
1836 path.line.shadow.tag-highway-service.tag-bridge,
1837 path.line.shadow.tag-highway-track.tag-bridge,
1838 path.line.shadow.tag-highway-steps.tag-bridge,
1839 path.line.shadow.tag-highway-footway.tag-bridge,
1840 path.line.shadow.tag-highway-cycleway.tag-bridge,
1841 path.line.shadow.tag-highway-bridleway.tag-bridge {
1842     stroke-width: 18;
1843 }
1844 path.line.casing.tag-railway.tag-bridge,
1845 path.line.casing.tag-highway-living_street.tag-bridge,
1846 path.line.casing.tag-highway-path.tag-bridge,
1847 path.line.casing.tag-highway-corridor.tag-bridge,
1848 path.line.casing.tag-highway-pedestrian.tag-bridge,
1849 path.line.casing.tag-highway-service.tag-bridge,
1850 path.line.casing.tag-highway-track.tag-bridge,
1851 path.line.casing.tag-highway-steps.tag-bridge,
1852 path.line.casing.tag-highway-footway.tag-bridge,
1853 path.line.casing.tag-highway-cycleway.tag-bridge,
1854 path.line.casing.tag-highway-bridleway.tag-bridge {
1855     stroke-width: 10;
1856 }
1857
1858 .low-zoom path.line.shadow.tag-railway.tag-bridge,
1859 .low-zoom path.line.shadow.tag-highway-living_street.tag-bridge,
1860 .low-zoom path.line.shadow.tag-highway-path.tag-bridge,
1861 .low-zoom path.line.shadow.tag-highway-corridor.tag-bridge,
1862 .low-zoom path.line.shadow.tag-highway-pedestrian.tag-bridge,
1863 .low-zoom path.line.shadow.tag-highway-service.tag-bridge,
1864 .low-zoom path.line.shadow.tag-highway-track.tag-bridge,
1865 .low-zoom path.line.shadow.tag-highway-steps.tag-bridge,
1866 .low-zoom path.line.shadow.tag-highway-footway.tag-bridge,
1867 .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge,
1868 .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge {
1869     stroke-width: 14;
1870 }
1871 .low-zoom path.line.casing.tag-railway.tag-bridge,
1872 .low-zoom path.line.casing.tag-highway-living_street.tag-bridge,
1873 .low-zoom path.line.casing.tag-highway-path.tag-bridge,
1874 .low-zoom path.line.casing.tag-highway-corridor.tag-bridge,
1875 .low-zoom path.line.casing.tag-highway-pedestrian.tag-bridge,
1876 .low-zoom path.line.casing.tag-highway-service.tag-bridge,
1877 .low-zoom path.line.casing.tag-highway-track.tag-bridge,
1878 .low-zoom path.line.casing.tag-highway-steps.tag-bridge,
1879 .low-zoom path.line.casing.tag-highway-footway.tag-bridge,
1880 .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge,
1881 .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge {
1882     stroke-width: 6;
1883 }
1884
1885
1886 /* tunnels */
1887 path.line.stroke.tag-tunnel,
1888 path.line.stroke.tag-location-underground,
1889 path.line.stroke.tag-location-underwater {
1890     stroke-opacity: 0.3;
1891 }
1892 path.line.casing.tag-tunnel,
1893 path.line.casing.tag-location-underground,
1894 path.line.stroke.tag-location-underwater {
1895     stroke-opacity: 0.5;
1896     stroke-linecap: butt;
1897     stroke-dasharray: none;
1898 }
1899
1900
1901 /* embankments / cuttings */
1902 path.line.shadow.tag-embankment,
1903 path.line.shadow.tag-cutting {
1904     stroke-width: 28;
1905 }
1906 path.line.casing.tag-embankment,
1907 path.line.casing.tag-cutting {
1908     stroke-opacity: 0.5;
1909     stroke: #000;
1910     stroke-width: 22;
1911     stroke-dasharray: 2, 4;
1912     stroke-linecap: butt;
1913 }
1914
1915 .low-zoom path.line.shadow.tag-embankment,
1916 .low-zoom path.line.shadow.tag-cutting {
1917     stroke-width: 14;
1918 }
1919 .low-zoom path.line.casing.tag-embankment,
1920 .low-zoom path.line.casing.tag-cutting {
1921     stroke-width: 10;
1922 }
1923
1924
1925 /* Surface - unpaved */
1926 path.line.casing.tag-unpaved {
1927     stroke: #ccc;
1928     stroke-linecap: butt;
1929     stroke-dasharray: 4, 3;
1930 }
1931 .low-zoom path.line.casing.tag-unpaved {
1932     stroke-dasharray: 3, 2;
1933 }
1934 path.line.casing.tag-bridge.tag-unpaved {
1935     stroke: #000;
1936     stroke-dasharray: 4, 3;
1937 }
1938 .low-zoom path.line.casing.tag-bridge.tag-unpaved {
1939     stroke: #000;
1940     stroke-dasharray: 3, 2;
1941 }
1942
1943
1944 /* Status (e.g. proposed, abandoned) */
1945 path.area.stroke.tag-status,
1946 path.line.stroke.tag-status,
1947 path.area.casing.tag-status,
1948 path.line.casing.tag-status {
1949     stroke-linecap: butt;
1950     stroke-dasharray: 7, 3;
1951 }
1952 .low-zoom path.area.stroke.tag-status,
1953 .low-zoom path.line.stroke.tag-status,
1954 .low-zoom path.area.casing.tag-status,
1955 .low-zoom path.line.casing.tag-status {
1956     stroke-dasharray: 5, 2;
1957 }
1958
1959 /* Road Closed Status */
1960 .preset-icon .icon.iD-highway-construction {
1961     color: #fc6c14;
1962     fill: #fff;
1963 }
1964 path.line.shadow.tag-status.tag-status-construction {
1965     stroke-width: 20;
1966 }
1967 path.line.casing.tag-status.tag-status-construction {
1968     stroke: #fff;
1969     stroke-width: 10;
1970     stroke-linecap: butt;
1971     stroke-dasharray: none
1972 }
1973 path.line.stroke.tag-status.tag-status-construction {
1974     stroke: #fc6c14;
1975     stroke-width: 8;
1976     stroke-linecap: butt;
1977     stroke-dasharray: 10, 10;
1978 }
1979 .low-zoom path.line.shadow.tag-status.tag-status-construction {
1980     stroke-width: 16;
1981 }
1982 .low-zoom path.line.casing.tag-status.tag-status-construction {
1983     stroke-width: 7;
1984 }
1985 .low-zoom path.line.stroke.tag-status.tag-status-construction {
1986     stroke-width: 5;
1987     stroke-dasharray: 8, 8;
1988 }
1989
1990
1991 /* Buildings */
1992 path.stroke.tag-building {
1993     stroke: rgb(224, 110, 95);
1994 }
1995 path.fill.tag-building {
1996     stroke: rgba(224, 110, 95, 0.3);
1997     fill: rgba(224, 110, 95, 0.3);
1998 }
1999 .preset-icon-fill-area.tag-parking-multi-storey,
2000 .preset-icon-fill-area.tag-building {
2001     border-color: rgb(224, 110, 95);
2002     background-color: rgba(224, 110, 95, 0.3);
2003 }
2004
2005
2006 /* "Special" paths - platforms, piers, crossings */
2007 .preset-icon .icon.tag-public_transport-platform,
2008 .preset-icon .icon.tag-railway-platform,
2009 .preset-icon .icon.tag-man_made-pier,
2010 .preset-icon .icon.tag-footway.tag-footway-crossing,
2011 .preset-icon .icon.tag-crossing {
2012     color: #988;
2013     fill: #dca;
2014 }
2015
2016 .preset-icon-fill-area.tag-public_transport-platform,
2017 .preset-icon-fill-area.tag-railway-platform,
2018 .preset-icon-fill-area.tag-man_made-pier,
2019 .preset-icon-fill-area.tag-footway.tag-footway-crossing,
2020 .preset-icon-fill-area.tag-crossing {
2021     border-color: #988;
2022     background-color: #dca;
2023 }
2024
2025 path.line.shadow.tag-public_transport-platform,
2026 path.line.shadow.tag-railway-platform,
2027 path.line.shadow.tag-man_made-pier,
2028 path.line.shadow.tag-footway.tag-footway-crossing,
2029 path.line.shadow.tag-crossing {
2030     stroke-width: 16;
2031 }
2032 path.line.casing.tag-public_transport-platform,
2033 path.line.casing.tag-railway-platform,
2034 path.line.casing.tag-man_made-pier,
2035 path.line.casing.tag-footway.tag-footway-crossing,
2036 path.line.casing.tag-crossing {
2037     stroke: #dca;
2038     stroke-width: 5;
2039     stroke-linecap: round;
2040     stroke-dasharray: none;
2041 }
2042 path.line.stroke.tag-public_transport-platform,
2043 path.line.stroke.tag-railway-platform,
2044 path.line.stroke.tag-man_made-pier,
2045 path.line.stroke.tag-footway.tag-footway-crossing,
2046 path.line.stroke.tag-crossing {
2047     stroke: #988;
2048     stroke-width: 3;
2049     stroke-linecap: butt;
2050     stroke-dasharray: 6, 6;
2051 }
2052
2053 .low-zoom path.line.shadow.tag-public_transport-platform,
2054 .low-zoom path.line.shadow.tag-railway-platform,
2055 .low-zoom path.line.shadow.tag-man_made-pier,
2056 .low-zoom path.line.shadow.tag-footway.tag-footway-crossing,
2057 .low-zoom path.line.shadow.tag-crossing {
2058     stroke-width: 12;
2059 }
2060 .low-zoom path.line.casing.tag-public_transport-platform,
2061 .low-zoom path.line.casing.tag-railway-platform,
2062 .low-zoom path.line.casing.tag-man_made-pier,
2063 .low-zoom path.line.casing.tag-footway.tag-footway-crossing,
2064 .low-zoom path.line.casing.tag-crossing {
2065     stroke-width: 3;
2066 }
2067 .low-zoom path.line.stroke.tag-public_transport-platform,
2068 .low-zoom path.line.stroke.tag-railway-platform,
2069 .low-zoom path.line.stroke.tag-man_made-pier,
2070 .low-zoom path.line.stroke.tag-footway.tag-footway-crossing,
2071 .low-zoom path.line.stroke.tag-crossing {
2072     stroke-width: 1;
2073     stroke-linecap: butt;
2074     stroke-dasharray: 3, 3;
2075 }
2076
2077 g.midpoint.tag-public_transport-platform .fill,
2078 g.midpoint.tag-railway-platform .fill,
2079 g.midpoint.tag-man_made-pier .fill,
2080 g.midpoint.tag-footway.tag-footway-crossing .fill,
2081 g.midpoint.tag-crossing .fill {
2082     fill: #fff;
2083     stroke: #333;
2084     stroke-opacity: .8;
2085     opacity: .8;
2086 }
2087
2088 /* marked crossings, zebras */
2089 .preset-icon .icon.tag-crossing.tag-crossing-marked,
2090 .preset-icon .icon.tag-crossing.tag-crossing-zebra {
2091     color: #444;
2092     fill: #dca;
2093 }
2094 path.line.casing.tag-crossing.tag-crossing-marked,
2095 path.line.casing.tag-crossing.tag-crossing-zebra {
2096     stroke: #dca;
2097 }
2098 path.line.stroke.tag-crossing.tag-crossing-marked,
2099 path.line.stroke.tag-crossing.tag-crossing-zebra {
2100     stroke: #444;
2101     stroke-dasharray: 6, 4;
2102 }
2103 .low-zoom path.line.stroke.tag-crossing.tag-crossing-marked,
2104 .low-zoom path.line.stroke.tag-crossing.tag-crossing-zebra {
2105     stroke-dasharray: 3, 2;
2106 }
2107
2108 /* Attractions */
2109 path.line.shadow.tag-attraction-summer_toboggan,
2110 path.line.shadow.tag-attraction-water_slide {
2111         stroke-width: 16;
2112 }
2113 path.line.casing.tag-attraction-summer_toboggan,
2114 path.line.casing.tag-attraction-water_slide {
2115         stroke-width: 7;
2116 }
2117 path.line.stroke.tag-attraction-summer_toboggan,
2118 path.line.stroke.tag-attraction-water_slide {
2119         stroke-width: 5;
2120 }
2121 .low-zoom path.line.shadow.tag-attraction-summer_toboggan,
2122 .low-zoom path.line.shadow.tag-attraction-water_slide {
2123     stroke-width: 12;
2124 }
2125 .low-zoom path.line.casing.tag-attraction-summer_toboggan,
2126 .low-zoom path.line.casing.tag-attraction-water_slide {
2127     stroke-width: 5;
2128 }
2129 .low-zoom path.line.stroke.tag-attraction-summer_toboggan,
2130 .low-zoom path.line.stroke.tag-attraction-water_slide {
2131         stroke-width: 3;
2132 }
2133 path.line.stroke.tag-attraction-summer_toboggan {
2134     stroke: #9e9e9e;
2135 }
2136 path.line.casing.tag-attraction-summer_toboggan {
2137     stroke: #666;
2138 }
2139
2140 path.line.stroke.tag-attraction-water_slide {
2141     stroke: #aae0cb;
2142 }
2143 path.line.casing.tag-attraction-water_slide {
2144     stroke: #3d6c71;
2145 }
2146 /* Cursors */
2147
2148 .nope,
2149 .nope * {
2150     cursor: not-allowed !important;
2151 }
2152
2153 .map-in-map,
2154 #map {
2155     cursor: auto; /* Opera */
2156     cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
2157 }
2158
2159 .mode-browse .point,
2160 .mode-select .point {
2161     cursor: pointer; /* Opera */
2162     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
2163 }
2164
2165 .mode-select .vertex,
2166 .mode-browse .vertex {
2167     cursor: pointer; /* Opera */
2168     cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
2169 }
2170
2171 .mode-browse .line,
2172 .mode-select .line {
2173     cursor: pointer; /* Opera */
2174     cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
2175 }
2176
2177 .mode-select .area,
2178 .mode-browse .area {
2179     cursor: pointer; /* Opera */
2180     cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
2181 }
2182
2183 .mode-select .midpoint,
2184 .mode-browse .midpoint {
2185     cursor: pointer; /* Opera */
2186     cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
2187 }
2188
2189 .mode-select .behavior-multiselect .point,
2190 .mode-select .behavior-multiselect .vertex,
2191 .mode-select .behavior-multiselect .line,
2192 .mode-select .behavior-multiselect .area {
2193     cursor: pointer; /* Opera */
2194     cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
2195 }
2196
2197 .mode-select .behavior-multiselect .selected {
2198     cursor: pointer; /* Opera */
2199     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
2200 }
2201
2202 .mode-draw-line #map,
2203 .mode-draw-area #map,
2204 .mode-add-line  #map,
2205 .mode-add-area  #map,
2206 .mode-drag-node #map,
2207 .mode-drag-note #map {
2208     cursor: crosshair; /* Opera */
2209     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
2210 }
2211
2212 .mode-draw-line .way.target,
2213 .mode-draw-area .way.target,
2214 .mode-add-line  .way.target,
2215 .mode-add-area  .way.target,
2216 .mode-drag-node .way.target {
2217     cursor: crosshair; /* Opera */
2218     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
2219 }
2220
2221 .mode-draw-line .vertex.target,
2222 .mode-draw-area .vertex.target,
2223 .mode-add-line  .vertex.target,
2224 .mode-add-area  .vertex.target,
2225 .mode-drag-node .vertex.target {
2226     cursor: crosshair; /* Opera */
2227     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
2228 }
2229
2230 .mode-add-point #map,
2231 .mode-add-note #map,
2232 .mode-browse.lasso #map,
2233 .mode-browse.lasso .way,
2234 .mode-browse.lasso .vertex,
2235 .mode-browse.lasso .midpoint,
2236 .mode-select.lasso #map,
2237 .mode-select.lasso .way,
2238 .mode-select.lasso .vertex,
2239 .mode-select.lasso .midpoint {
2240     cursor: crosshair; /* Opera */
2241     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
2242 }
2243
2244 .mode-browse .note,
2245 .mode-browse .kr_error,
2246 .mode-select .note,
2247 .mode-select .kr_error,
2248 .turn rect,
2249 .turn circle {
2250     cursor: pointer;
2251 }
2252
2253 /* photo viewer div */
2254 #photoviewer {
2255     position: absolute;
2256     bottom: 40px;
2257     left: 10px;
2258     width: 330px;
2259     height: 250px;
2260     padding: 5px;
2261     background-color: #fff;
2262 }
2263 [dir='rtl'] #photoviewer {
2264     left: auto;
2265     right: 10px;
2266 }
2267
2268 @media screen and (min-width: 1600px) {
2269     #photoviewer {
2270         width: 490px;
2271         height: 370px;
2272     }
2273 }
2274
2275 #photoviewer button.thumb-hide {
2276     border-radius: 0;
2277     padding: 5px;
2278     position: absolute;
2279     right: 5px;
2280     top: 5px;
2281     z-index: 50;
2282 }
2283
2284 #photoviewer button.resize-handle-xy {
2285     border-radius: 0;
2286     position: absolute;
2287     top: 0;
2288     right: 0;
2289     z-index: 49;
2290     cursor: nesw-resize;
2291     height: 25px;
2292     width: 25px;
2293 }
2294
2295 #photoviewer button.resize-handle-x {
2296     border-radius: 0;
2297     position: absolute;
2298     top: 0;
2299     right: 0;
2300     bottom: 0;
2301     z-index: 48;
2302     cursor: ew-resize;
2303     height: auto;
2304     width: 6px;
2305 }
2306
2307 #photoviewer button.resize-handle-y {
2308     border-radius: 0;
2309     position: absolute;
2310     top: 0;
2311     right: 0;
2312     z-index: 48;
2313     cursor: ns-resize;
2314     height: 6px;
2315     width: 100%;
2316 }
2317
2318
2319 .photo-wrapper,
2320 .photo-wrapper img {
2321     width: 100%;
2322     height: 100%;
2323     overflow: hidden;
2324     object-fit: cover;
2325 }
2326
2327 .photo-wrapper .photo-attribution {
2328     position: absolute;
2329     bottom: 0;
2330     right: 0;
2331     width: 100%;
2332     font-size: 10px;
2333     text-align: right;
2334     line-height: 1.1em;
2335     padding: 4px 2px;
2336     z-index: 10;
2337 }
2338
2339 .photo-attribution a,
2340 .photo-attribution a:visited,
2341 .photo-attribution span {
2342     padding: 4px 2px;
2343     color: #fff;
2344 }
2345
2346 /* markers and sequences */
2347 .viewfield-group {
2348     pointer-events: none;
2349 }
2350 .mode-browse .viewfield-group,
2351 .mode-select .viewfield-group {
2352     pointer-events: visible;
2353     cursor: pointer;
2354 }
2355
2356 .viewfield-group.selected * {
2357     fill: #ffee00 !important;
2358 }
2359 .viewfield-group.hovered * {
2360     fill: #eebb00 !important;
2361 }
2362
2363 .viewfield-group circle {
2364     stroke: #555;
2365     stroke-width: 1;
2366     stroke-opacity: 0.4;
2367     fill-opacity: 0.4;
2368 }
2369 .viewfield-group.highlighted circle {
2370     stroke: #222;
2371     stroke-opacity: 0.9;
2372     fill-opacity: 0.9;
2373 }
2374 .viewfield-group.highlighted.hovered circle {
2375     stroke: #222;
2376     stroke-width: 2;
2377     stroke-opacity: 0.9;
2378     fill-opacity: 0.9;
2379 }
2380 .viewfield-group.highlighted.selected circle {
2381     stroke: #222;
2382     stroke-width: 2;
2383     stroke-opacity: 1;
2384     fill-opacity: 1;
2385 }
2386
2387 .viewfield-group .viewfield {
2388     stroke-width: 0;
2389     stroke: #222;
2390     fill-opacity: 0.4;
2391 }
2392 .viewfield-group.highlighted .viewfield {
2393     stroke-width: 1;
2394     fill-opacity: 0.8;
2395 }
2396 .viewfield-group.highlighted.hovered .viewfield {
2397     stroke-width: 1;
2398     fill-opacity: 0.8;
2399 }
2400 .viewfield-group.highlighted.selected .viewfield {
2401     stroke-width: 1;
2402     fill-opacity: 0.9;
2403 }
2404
2405 .viewfield-group.selected .viewfield-scale {
2406     transform: scale(2,2);
2407 }
2408
2409 .sequence {
2410     fill: none;
2411     stroke-width: 2;
2412     stroke-opacity: 0.4;
2413 }
2414 .sequence.highlighted,
2415 .sequence.selected {
2416     stroke-width: 4;
2417     stroke-opacity: 1;
2418 }
2419
2420
2421 /* Streetside Image Layer */
2422 .layer-streetside-images {
2423     pointer-events: none;
2424 }
2425 .layer-streetside-images .viewfield-group * {
2426     fill: #0fffc4;
2427 }
2428 .layer-streetside-images .sequence {
2429     stroke: #0fffc4;
2430     stroke-opacity: 0.85;  /* bump opacity - only one per road */
2431 }
2432
2433
2434 /* Mapillary Image Layer */
2435 .layer-mapillary-images {
2436     pointer-events: none;
2437 }
2438 .layer-mapillary-images .viewfield-group * {
2439     fill: #55ff22;
2440 }
2441 .layer-mapillary-images .sequence {
2442     stroke: #55ff22;
2443 }
2444
2445
2446 /* Mapillary Sign Layer */
2447 .layer-mapillary-signs {
2448     pointer-events: none;
2449 }
2450 .layer-mapillary-signs .icon-sign {
2451     outline: 2px solid transparent;
2452     pointer-events: visible;
2453     cursor: pointer;
2454 }
2455 .layer-mapillary-signs .icon-sign:hover {
2456     outline: 5px solid #eebb00;
2457     background-color: #eebb00;
2458 }
2459 .layer-mapillary-signs .icon-sign.selected {
2460     outline: 5px solid #ffee00;
2461     background-color: #ffee00;
2462 }
2463
2464
2465 /* OpenStreetCam Image Layer */
2466 .layer-openstreetcam-images {
2467     pointer-events: none;
2468 }
2469 .layer-openstreetcam-images .viewfield-group * {
2470     fill: #20c4ff;
2471 }
2472 .layer-openstreetcam-images .sequence {
2473     stroke: #20c4ff;
2474 }
2475
2476
2477 /* Streetside Viewer (pannellum) */
2478 .ms-wrapper .photo-attribution .image-link {
2479     display: block;
2480 }
2481 .ms-wrapper .photo-attribution .attribution-row {
2482     display: flex;
2483     flex-flow: row nowrap;
2484     justify-content: space-between;
2485     align-items: center;
2486     padding: 0 5px;
2487 }
2488 .ms-wrapper .photo-attribution .image-view-link {
2489     text-align: left;
2490     margin: 0 5px;
2491 }
2492 .ms-wrapper .photo-attribution .image-report-link {
2493     text-align: right;
2494 }
2495
2496 .ms-wrapper .photo-attribution a:active,
2497 .ms-wrapper .photo-attribution a:hover {
2498     color: #0fffc4;
2499 }
2500
2501 .ms-wrapper .pnlm-compass.pnlm-control {
2502     width: 26px;
2503     height: 26px;
2504     left: 4px;
2505     top: 60px;
2506     background-size: contain;
2507     background-repeat: no-repeat no-repeat;
2508 }
2509
2510 label.streetside-hires {
2511     cursor: pointer;
2512 }
2513 .streetside-hires span {
2514     margin-top: 2px;
2515 }
2516 .streetside-hires input[type="checkbox"] {
2517     float: left;
2518     width: 12px;
2519     height: 12px;
2520     margin: 0 5px;
2521 }
2522
2523
2524 /* Mapillary viewer */
2525 #mly .domRenderer .TagSymbol {
2526     font-size: 10px;
2527     background-color: rgba(0,0,0,0.4);
2528     padding: 0 4px;
2529     border-radius: 4px;
2530     top: -25px;
2531 }
2532 #mly .domRenderer .Attribution {
2533     /* we will roll our own to avoid async update issues like #4526 */
2534     display: none;
2535 }
2536
2537 .mly-wrapper .photo-attribution a:active,
2538 .mly-wrapper .photo-attribution a:hover {
2539     color: #35af6d;
2540 }
2541
2542 .mly-wrapper .mapillary-js-dom {
2543     z-index: 9;
2544 }
2545
2546
2547 /* OpenStreetCam viewer */
2548 .osc-wrapper {
2549     position: relative;
2550     background-color: #000;
2551     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
2552     background-position: center;
2553     background-repeat: no-repeat;
2554 }
2555
2556 .osc-wrapper .photo-attribution a:active,
2557 .osc-wrapper .photo-attribution a:hover {
2558     color: #20c4ff;
2559 }
2560
2561 .osc-image-wrap {
2562     width: 100%;
2563     height: 100%;
2564     transform-origin:0 0;
2565     -ms-transform-origin:0 0;
2566     -webkit-transform-origin:0 0;
2567     -moz-transform-origin:0 0;
2568     -o-transform-origin:0 0;
2569 }
2570
2571
2572 /* photo-controls (step forward, back, rotate) */
2573 .photo-controls-wrap {
2574     text-align: center;
2575     position: absolute;
2576     top: 10px;
2577     width: 100%;
2578     z-index: 10;
2579 }
2580
2581 .photo-controls {
2582     display: inline-block;
2583     z-index: 10;
2584 }
2585
2586 .photo-controls button,
2587 .photo-controls button:focus {
2588     height: 18px;
2589     width: 18px;
2590     background: rgba(0,0,0,0.65);
2591     color: #eee;
2592     border-radius: 0;
2593 }
2594 .photo-controls button:first-of-type {
2595     border-radius: 3px 0 0 3px;
2596 }
2597 .photo-controls button:last-of-type {
2598     border-radius: 0 3px 3px 0;
2599 }
2600 .photo-controls button:hover,
2601 .photo-controls button:active {
2602     background: rgba(0,0,0,0.85);
2603     color: #fff;
2604 }
2605
2606 /* OSM Notes and KeepRight Layers */
2607
2608 .kr_error-header-icon .kr_error-fill,
2609 .layer-keepRight .kr_error .kr_error-fill {
2610     stroke: #333;
2611     stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */
2612 }
2613
2614 .note-header-icon .note-fill,
2615 .layer-notes .note .note-fill {
2616     color: #f30;
2617     stroke: #333;
2618     stroke-width: 40px;
2619 }
2620 .note-header-icon.new .note-fill,
2621 .layer-notes .note.new .note-fill {
2622     color: #fe0;
2623     stroke: #333;
2624     stroke-width: 40px;
2625 }
2626 .note-header-icon.closed .note-fill,
2627 .layer-notes .note.closed .note-fill {
2628     color: #5d0;
2629     stroke: #333;
2630     stroke-width: 40px;
2631 }
2632
2633 /* slight adjustments to preset icon for note icons */
2634 .note-header-icon .preset-icon-28 {
2635     top: 18px;
2636 }
2637 .note-header-icon .note-icon-annotation {
2638     position: absolute;
2639     top: 22px;
2640     left: 22px;
2641     margin: auto;
2642 }
2643 .note-header-icon .note-icon-annotation .icon {
2644     width: 15px;
2645     height: 15px;
2646 }
2647
2648
2649 /* Keep Right Errors
2650 ------------------------------------------------------- */
2651 .kr_error_type_20,     /* multiple nodes on same spot */
2652 .kr_error_type_40,     /* impossible oneways */
2653 .kr_error_type_210,    /* self intersecting ways */
2654 .kr_error_type_270,    /* unusual motorway connection */
2655 .kr_error_type_310,    /* roundabout issues */
2656 .kr_error_type_320,    /* improper _link */
2657 .kr_error_type_350 {   /* improper bridge tag */
2658     color: #ff9;
2659 }
2660
2661 .kr_error_type_50 {    /* almost junctions */
2662     color: #88f;
2663 }
2664
2665 .kr_error_type_60,     /* deprecated tags */
2666 .kr_error_type_70,     /* tagging issues */
2667 .kr_error_type_90,     /* motorway without ref */
2668 .kr_error_type_100,    /* place of worship without religion */
2669 .kr_error_type_110,    /* poi without name */
2670 .kr_error_type_150,    /* railway crossing without tag */
2671 .kr_error_type_220,    /* misspelled tag */
2672 .kr_error_type_380 {   /* non-physical sport tag */
2673     color: #5d0;
2674 }
2675
2676 .kr_error_type_130 {   /* disconnected ways */
2677     color: #fa3;
2678 }
2679
2680 .kr_error_type_170 {   /* FIXME tag */
2681     color: #ff0;
2682 }
2683
2684 .kr_error_type_190 {   /* intersection without junction */
2685     color: #f33;
2686 }
2687
2688 .kr_error_type_200 {   /* overlapping ways */
2689     color: #fdbf6f;
2690 }
2691
2692 .kr_error_type_160,    /* railway layer conflict */
2693 .kr_error_type_230 {   /* layer conflict */
2694     color: #b60;
2695 }
2696
2697 .kr_error_type_280 {   /* boundary issues */
2698     color: #5f47a0;
2699 }
2700
2701 .kr_error_type_180,    /* relation without type */
2702 .kr_error_type_290 {   /* turn restriction issues */
2703     color: #ace;
2704 }
2705
2706 .kr_error_type_300,    /* missing maxspeed */
2707 .kr_error_type_390 {   /* missing tracktype */
2708     color: #090;
2709 }
2710
2711 .kr_error_type_360,    /* language unknown */
2712 .kr_error_type_370,    /* doubled places */
2713 .kr_error_type_410 {   /* website issues */
2714     color: #f9b;
2715 }
2716
2717 .kr_error_type_120,    /* way without nodes */
2718 .kr_error_type_400 {   /* geometry / turn angles */
2719     color: #c35;
2720 }
2721
2722
2723 /* Custom Map Data (geojson, gpx, kml, vector tile) */
2724 .layer-mapdata {
2725     pointer-events: none;
2726 }
2727
2728 .layer-mapdata path.shadow {
2729     pointer-events: stroke;
2730     stroke: #f6634f;
2731     stroke-width: 16;
2732     stroke-opacity: 0;
2733     fill: none;
2734 }
2735 .layer-mapdata path.MultiPoint.shadow,
2736 .layer-mapdata path.Point.shadow {
2737     pointer-events: fill;
2738     fill: #f6634f;
2739     fill-opacity: 0;
2740 }
2741 .layer-mapdata path.shadow.hover:not(.selected) {
2742     stroke-opacity: 0.4;
2743 }
2744 .layer-mapdata path.shadow.selected {
2745     stroke-opacity: 0.7;
2746 }
2747
2748 .layer-mapdata path.stroke {
2749     stroke: #ff26d4;
2750     stroke-width: 2;
2751     fill: none;
2752 }
2753
2754 .layer-mapdata path.fill {
2755     stroke-width: 0;
2756     stroke-opacity: 0.3;
2757     stroke: #ff26d4;
2758     fill: #ff26d4;
2759     fill-opacity: 0.3;
2760     fill-rule: evenodd;
2761 }
2762
2763 .layer-mapdata text.label-halo,
2764 .layer-mapdata text.label {
2765     font-size: 10px;
2766     font-weight: bold;
2767     dominant-baseline: middle;
2768 }
2769 .layer-mapdata text.label {
2770     fill: #ff26d4;
2771 }
2772 .layer-mapdata text.label.hover,
2773 .layer-mapdata text.label.selected {
2774     fill: #f6634f;
2775 }
2776 .layer-mapdata text.label-halo {
2777     opacity: 0.7;
2778     stroke: #000;
2779     stroke-width: 5px;
2780     stroke-miterlimit: 1;
2781 }
2782
2783 /* Fill Styles */
2784
2785 .low-zoom.fill-wireframe path.stroke,
2786 .fill-wireframe path.stroke {
2787     stroke-width: 1 !important;
2788     stroke-opacity: 0.5 !important;
2789     stroke-dasharray: none !important;
2790     fill: none !important;
2791 }
2792 .low-zoom.fill-wireframe .layer-mapdata path.stroke,
2793 .fill-wireframe .layer-mapdata path.stroke {
2794     stroke-width: 2 !important;
2795     stroke-opacity: 1 !important;
2796 }
2797
2798 .low-zoom.fill-wireframe path.shadow,
2799 .fill-wireframe path.shadow {
2800     stroke-width: 12;
2801 }
2802
2803 .fill-wireframe path.shadow.related:not(.selected),
2804 .fill-wireframe path.shadow.hover:not(.selected) {
2805     stroke-opacity: 0.4;
2806 }
2807 .fill-wireframe path.shadow.selected {
2808     stroke-opacity: 0.6;
2809 }
2810
2811 .fill-wireframe .point,
2812 .fill-wireframe .areaicon,
2813 .fill-wireframe .areaicon-halo,
2814 .fill-wireframe path.casing,
2815 .fill-wireframe path.fill,
2816 .fill-wireframe path.oneway {
2817     display: none !important;
2818 }
2819
2820 .fill-partial path.area.fill {
2821     fill-opacity: 0;
2822     stroke-width: 60px;
2823     pointer-events: none;
2824 }
2825 .mode-browse .fill-partial path.area.fill,
2826 .mode-select .fill-partial path.area.fill {
2827     pointer-events: visibleStroke;
2828 }
2829 /* Basics
2830 ------------------------------------------------------- */
2831 /*
2832   Opera misbehaves when the window is resized vertically unless 100% width + height are
2833   applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
2834 */
2835 html, body {
2836     width: 100%;
2837     height: 100%;
2838 }
2839
2840 body {
2841     font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
2842         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
2843         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
2844         sans-serif;
2845     margin: 0;
2846     padding: 0;
2847     color: #333;
2848     overflow: hidden;
2849     -ms-user-select: none;
2850     -ms-content-zooming: none;
2851 }
2852
2853 .unsupported {
2854     text-align: center;
2855     vertical-align: middle;
2856     padding-top: 100px;
2857     font-size: 15px;
2858 }
2859
2860 .id-container {
2861     height: 100%;
2862     width: 100%;
2863 }
2864
2865 #content {
2866     position: relative;
2867     overflow: hidden;
2868     height: 100%;
2869 }
2870
2871 #content.active {
2872     -webkit-filter: none !important;
2873     filter: none !important;
2874     -webkit-duration: 200ms;
2875     transition-duration: 200ms;
2876 }
2877
2878 #content.inactive {
2879     -webkit-filter: grayscale(80%) brightness(80%);
2880     filter: grayscale(80%) brightness(80%);
2881     -webkit-duration: 200ms;
2882     transition-duration: 200ms;
2883 }
2884
2885 #defs {
2886     /* Can't be display: none or the clippaths are ignored. */
2887     position: absolute;
2888     width: 0;
2889     height: 0;
2890 }
2891
2892 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
2893     -moz-box-sizing: border-box;
2894     -webkit-box-sizing: border-box;
2895     box-sizing: border-box;
2896 }
2897
2898 a, button, input, textarea {
2899     -webkit-tap-highlight-color: rgba(0,0,0,0);
2900     -webkit-touch-callout: none;
2901 }
2902
2903 ul li {
2904     list-style: none;
2905 }
2906
2907 a,
2908 button,
2909 .radial-menu-item {
2910     cursor: pointer;
2911 }
2912
2913 h2 {
2914     font-size: 25px;
2915     line-height: 1.25;
2916     font-weight: bold;
2917     margin-bottom: 20px;
2918 }
2919
2920 h3:last-child,
2921 h2:last-child,
2922 h4:last-child { margin-bottom: 0;}
2923
2924 h3 {
2925     font-size: 16px;
2926     line-height: 1.25;
2927     font-weight: bold;
2928     margin-bottom: 10px;
2929 }
2930 h4, h5 {
2931     font-size: 12px;
2932     font-weight: bold;
2933     padding-bottom: 10px;
2934 }
2935
2936 :focus {
2937     outline-color: transparent;
2938     outline-style: none;
2939 }
2940
2941 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
2942     color: #aaa;
2943     opacity: 1; /* Firefox */
2944 }
2945 :-ms-input-placeholder { /* Internet Explorer 10-11 */
2946     color: #aaa;
2947 }
2948 ::-ms-input-placeholder { /* Microsoft Edge */
2949     color: #aaa;
2950 }
2951
2952 p {
2953     font-size: 12px;
2954     margin: 0;
2955     padding: 0;
2956 }
2957 p:last-child {
2958     padding-bottom: 0;
2959 }
2960 em {
2961     font-style: italic;
2962 }
2963 strong {
2964     font-weight: bold;
2965 }
2966 a:visited, a {
2967     color: #7092ff;
2968 }
2969 a:hover {
2970     color: #597be7;
2971 }
2972
2973 /* Forms
2974 ------------------------------------------------------- */
2975 textarea  {
2976     resize: vertical;
2977     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
2978         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
2979         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
2980         sans-serif;
2981 }
2982
2983 textarea,
2984 input[type=text],
2985 input[type=search],
2986 input[type=number],
2987 input[type=url],
2988 input[type=tel],
2989 input[type=email] {
2990     background-color: #fff;
2991     color: #333;
2992     border: 1px solid #ccc;
2993     padding: 5px 20px 5px 10px;
2994     height: 30px;
2995     border-radius: 4px;
2996     text-overflow: ellipsis;
2997 }
2998 [dir='rtl'] textarea,
2999 [dir='rtl'] input[type=text],
3000 [dir='rtl'] input[type=search],
3001 [dir='rtl'] input[type=number],
3002 [dir='rtl'] input[type=url],
3003 [dir='rtl'] input[type=tel],
3004 [dir='rtl'] input[type=email] {
3005     padding: 5px 10px 5px 20px;
3006 }
3007
3008 textarea:focus,
3009 input:focus {
3010     background-color: #f1f1f1;
3011 }
3012
3013 textarea.disabled,
3014 input.disabled {
3015     color: #777;
3016     background-color: #eee;
3017     cursor: not-allowed;
3018 }
3019
3020 input[type="checkbox"],
3021 input[type="radio"] {
3022     float: left;
3023     width: 14px;
3024     height: 14px;
3025     margin-right: 5px;
3026     margin-top: 3px;
3027     cursor: pointer;
3028 }
3029 [dir='rtl'] input[type="checkbox"],
3030 [dir='rtl'] input[type="radio"] {
3031     float: right;
3032     margin-left: 5px;
3033     margin-right: 0;
3034 }
3035
3036 /* tables */
3037 table {
3038     background-color: #fff;
3039     border-collapse: collapse;
3040     width: 100%;
3041     border-spacing: 0;
3042 }
3043 table th {
3044     text-align: left;
3045 }
3046 table.tags, table.tags td, table.tags th {
3047     border: 1px solid #ccc;
3048     padding: 4px;
3049 }
3050
3051 ::-ms-clear {
3052    display: none;
3053 }
3054
3055 /* Grid
3056 ------------------------------------------------------- */
3057 .col6  { float: left; width: 50.0000%; max-width: 600px; }
3058 .col8  { float: left; width: 66.6666%; }
3059 .col12 { float: left; width: 100.0000%; }
3060
3061
3062 /* Utility Classes
3063 ------------------------------------------------------- */
3064 .fillL {
3065     background: #fff;
3066     color: #333;
3067 }
3068 .fillL2 {
3069     background: #f6f6f6;
3070     color: #333;
3071 }
3072 .fillL3 {
3073     background: #ececec;
3074     color: #333;
3075 }
3076 .fillD {
3077     background: rgba(0,0,0,.5);
3078     color: #fff;
3079 }
3080 .fillD2 {
3081     background: rgba(0,0,0,.75);
3082     color: #fff;
3083 }
3084
3085 .fl { float: left;}
3086 .fr { float: right;}
3087 .al { left: 0; }
3088 .ar { right: 0; }
3089
3090 input.hide,
3091 div.hide,
3092 form.hide,
3093 button.hide,
3094 a.hide,
3095 li.hide {
3096     display: none;
3097 }
3098
3099 .deemphasize {
3100     color: #a9a9a9;
3101 }
3102 .content {
3103     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
3104 }
3105 .loading {
3106     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
3107     background-size: 5px 5px;
3108 }
3109
3110
3111 /* Buttons
3112 ------------------------------------------------------- */
3113 button {
3114     text-align: center;
3115     line-height: 20px;
3116     border: 0;
3117     background: #fff;
3118     font-weight: bold;
3119     color: #333;
3120     font-size: 12px;
3121     display: inline-block;
3122     height: 40px;
3123     border-radius: 4px;
3124 }
3125
3126 button:focus,
3127 button:hover {
3128     background-color: #ececec;
3129 }
3130 button.active {
3131     background: #7092ff;
3132 }
3133 button.disabled {
3134     background-color: rgba(255,255,255,.25);
3135     color: rgba(0,0,0,.4);
3136     cursor: not-allowed;
3137 }
3138
3139 .joined button {
3140     border-radius: 0;
3141     border-right: 1px solid rgba(0,0,0,.5);
3142 }
3143 [dir='rtl'] .joined button {
3144     border-left: 1px solid rgba(0,0,0,.5);
3145     border-right: none;
3146 }
3147
3148 .fillL .joined button {
3149     border-right: 1px solid #fff;
3150 }
3151 .joined button:first-child {
3152     border-radius: 4px 0 0 4px;
3153 }
3154 [dir='rtl'] .joined button:first-child {
3155     border-radius: 0 4px 4px 0;
3156 }
3157 .joined button:last-child {
3158     border-right-width: 0;
3159     border-radius: 0 4px 4px 0;
3160 }
3161 [dir='rtl'] .joined button:last-child {
3162     border-radius: 4px 0 0 4px;
3163 }
3164
3165
3166 /* Action buttons */
3167 button.action {
3168     background: #7092ff;
3169     color: #fff;
3170 }
3171 button.action:focus,
3172 button.action:hover {
3173     background: #597be7;
3174 }
3175 button.secondary-action {
3176     background: #ececec;
3177 }
3178 button.secondary-action:focus,
3179 button.secondary-action:hover {
3180     background: #cccccc;
3181 }
3182
3183 button[disabled].action,
3184 button[disabled].action:hover {
3185     background: #cccccc;
3186     color: #888;
3187     cursor: not-allowed;
3188 }
3189
3190
3191 /* Icons
3192 ------------------------------------------------------- */
3193 .icon {
3194     vertical-align: top;
3195     width: 20px;
3196     height: 20px;
3197 }
3198
3199 .icon.inline {
3200     vertical-align: text-top;
3201     width: 14px;
3202     height: 14px;
3203     margin: 0px 3px;
3204 }
3205
3206 .icon.pre-text {
3207     margin-right: 5px;
3208 }
3209 [dir='rtl'] .icon.pre-text {
3210     margin-left: 5px;
3211     margin-right: 0;
3212 }
3213
3214 .icon.pre-text.user-icon {
3215     margin-left: 5px;
3216     margin-right: 5px;
3217 }
3218
3219 .icon.light {
3220     color: #fff;
3221 }
3222 .icon.created {
3223     color: #00ca07;
3224 }
3225 .icon.modified {
3226     color: #666;
3227 }
3228 .icon.deleted {
3229     color: #ea0000;
3230 }
3231
3232 .user-icon {
3233     max-height: 20px;
3234     max-width: 20px;
3235     height: auto;
3236     width: auto;
3237     border-radius: 3px;
3238 }
3239
3240
3241 /* Toolbar / Persistent UI Elements
3242 ------------------------------------------------------- */
3243 #bar {
3244     display: flex;
3245     flex-flow: row nowrap;
3246     justify-content: space-between;
3247     position: absolute;
3248     padding: 10px;
3249     left: 0;
3250     top: 0;
3251     right: 0;
3252     height: 60px;
3253     z-index: 9;
3254 }
3255
3256 .tool-group {
3257     display: flex;
3258     flex: 0 1 auto;
3259     flex-flow: row nowrap;
3260     width: 100%;
3261 }
3262 .tool-group.leading-area {
3263     flex-shrink: 2;
3264     justify-content: flex-start;
3265 }
3266 .tool-group.center-area {
3267     justify-content: center;
3268 }
3269 .tool-group.trailing-area {
3270     justify-content: flex-start;
3271 }
3272
3273 .tool-group > div {
3274     display: flex;
3275     margin: 0 5px;
3276 }
3277 .tool-group button {
3278     flex: 1 1 auto;
3279     flex-flow: row nowrap;
3280     align-items: center;
3281     padding: 0 10px;
3282     min-width: 30px;
3283     white-space: nowrap;
3284 }
3285 .tool-group button .icon {
3286     flex: 0 0 20px;
3287 }
3288 .tool-group button .label {
3289     flex: 0 1 auto;
3290     padding: 0 5px;
3291 }
3292
3293 button.save .count {
3294     display: inline-block;
3295     border: 0px solid #ccc;
3296     border-left-width: 1px;
3297     padding: 0px 0px 0px 8px;
3298     min-width: 32px;
3299     text-align: center;
3300 }
3301 [dir='rtl'] button.save .count {
3302     border-left-width: 0px;
3303     border-right-width: 1px;
3304     padding: 0px 8px 0px 0px;
3305 }
3306 button.save.disabled .count {
3307     border: 0px solid rgba(0,0,0,0.25);
3308     border-left-width: 1px;
3309 }
3310 [dir='rtl'] button.save.disabled .count {
3311     border-left-width: 0px;
3312     border-right-width: 1px;
3313     padding: 0px 8px 0px 0px;
3314 }
3315 #bar.narrow button.save .count {
3316     padding: 0px;
3317 }
3318
3319 button.save .label {
3320     margin-right: 3px;
3321     margin-left: 0;
3322 }
3323 [dir='rtl'] button.save .label {
3324     margin-left: 3px;
3325     margin-right: 0;
3326 }
3327
3328 .help-wrap svg.icon.pre-text.add-note,
3329 button.add-note svg.icon {
3330     height: 15px;
3331     width: 15px;
3332     color: rgba(0,0,0,0.25);
3333     stroke: #333;
3334     stroke-width: 60px;
3335     margin-top: 3px;
3336 }
3337 button.add-note svg.icon {
3338     margin-left: unset;
3339     margin-right: 4px;
3340 }
3341 [dir='rtl'] button.add-note svg.icon {
3342     margin-left: 4px;
3343     margin-right: unset;
3344 }
3345 .help-wrap svg.icon.pre-text.add-note {
3346     margin-left: 3px;
3347     margin-right: 3px;
3348 }
3349
3350 .spinner {
3351     opacity: .5;
3352     display: flex;
3353     flex-shrink: 2;
3354     justify-content: flex-end;
3355 }
3356 .spinner img {
3357     height: 40px;
3358     width: 40px;
3359     border-radius: 4px;
3360     background: black;
3361 }
3362 [dir='rtl'] .spinner img {
3363     -moz-transform: scaleX(-1);
3364     -o-transform: scaleX(-1);
3365     -webkit-transform: scaleX(-1);
3366     transform: scaleX(-1);
3367     filter: FlipH;
3368     -ms-filter: "FlipH";
3369 }
3370
3371
3372 #bar.narrow .tool-group {
3373     width: unset;
3374 }
3375 #bar.narrow .spinner,
3376 #bar.narrow button .label {
3377     display: none;
3378 }
3379 #bar.narrow button .count {
3380     border-left-width: 0;
3381     border-right-width: 0;
3382 }
3383
3384
3385 /* Header for modals / panes
3386 ------------------------------------------------------- */
3387 .header {
3388     border-bottom: 1px solid #ccc;
3389     height: 60px;
3390     position: relative;
3391 }
3392
3393 .header h3 {
3394     text-align: center;
3395     margin-bottom: 0;
3396     white-space: nowrap;
3397     text-overflow: ellipsis;
3398     overflow: hidden;
3399     padding: 20px;
3400 }
3401
3402 .header button,
3403 .modal > button {
3404     border-radius: 0;
3405     width: 40px;
3406     text-align: center;
3407     overflow: hidden;
3408 }
3409
3410 .header button {
3411     position: relative;
3412     height: 100%;
3413 }
3414
3415 .field-help-title button.close,
3416 .sidebar-component .header button.data-editor-close,
3417 .sidebar-component .header button.note-editor-close,
3418 .sidebar-component .header button.keepRight-editor-close,
3419 .entity-editor-pane .header button.preset-close,
3420 .preset-list-pane .header button.preset-choose {
3421     position: absolute;
3422     right: 0;
3423     top: 0;
3424 }
3425 [dir='rtl'] .field-help-title button.close,
3426 [dir='rtl'] .sidebar-component .header button.data-editor-close,
3427 [dir='rtl'] .sidebar-component .header button.note-editor-close,
3428 [dir='rtl'] .sidebar-component .header button.keepRight-editor-close,
3429 [dir='rtl'] .entity-editor-pane .header button.preset-close,
3430 [dir='rtl'] .preset-list-pane .header button.preset-choose {
3431     left: 0;
3432     right: auto;
3433 }
3434
3435 .entity-editor-pane .header button.preset-choose {
3436     position: absolute;
3437     left: 0;
3438     top: 0;
3439 }
3440 [dir='rtl'] .entity-editor-pane .header button.preset-choose {
3441     left: auto;
3442     right: 0;
3443 }
3444
3445 .preset-choose {
3446     font-size: 16px;
3447     line-height: 1.25;
3448     font-weight: bold;
3449 }
3450
3451 .modal > button {
3452     position: absolute;
3453     right: 0;
3454     top: 0;
3455     height: 59px;
3456     z-index: 50;
3457 }
3458 [dir='rtl'] .modal > button {
3459     left: 0;
3460     right: unset;
3461 }
3462
3463 .footer {
3464     position: absolute;
3465     bottom: 0;
3466     margin: 0;
3467     padding: 5px 20px 5px 20px;
3468     border-top: 1px solid #ccc;
3469     background-color: #f6f6f6;
3470     width: 100%;
3471     z-index: 1;
3472     flex-wrap: wrap;
3473     justify-content: space-between;
3474     list-style: none;
3475     display: flex;
3476 }
3477
3478 .footer > a {
3479     justify-content: center;
3480 }
3481
3482 .header-container {
3483     display: flex;
3484     justify-content: space-between;
3485 }
3486
3487 .header-block-outer {
3488     width: 20%;
3489 }
3490
3491 .header-block-close {
3492     display: flex;
3493     justify-content: flex-end;
3494 }
3495
3496 /* Hide/Toggle collapsable sections (aka Disclosure)
3497 ------------------------------------------------------- */
3498 .hide-toggle .icon.pre-text {
3499     vertical-align: text-top;
3500     width: 16px;
3501     height: 16px;
3502     margin-left: -3px;
3503 }
3504 [dir='rtl'] .hide-toggle .icon.pre-text {
3505     margin-left: 0;
3506     margin-right: -3px;
3507 }
3508
3509 a:visited.hide-toggle,
3510 a.hide-toggle {
3511     display: inline-block;
3512     font-size: 14px;
3513     font-weight: bold;
3514     padding-bottom: 5px;
3515 }
3516
3517
3518 /* Sidebar / Inspector
3519 ------------------------------------------------------- */
3520 #sidebar {
3521     position: relative;
3522     float: left;
3523     height: 100%;
3524     z-index: 10;
3525     background: #f6f6f6;
3526     -ms-user-select: element;
3527     border: 0px solid #ccc;
3528     border-right-width: 1px;
3529 }
3530 [dir='rtl'] #sidebar {
3531     float: right;
3532     border-right-width: 0px;
3533     border-left-width: 1px;
3534 }
3535
3536 #sidebar-resizer {
3537     position: absolute;
3538     top: 0;
3539     right: -6px;
3540     height: 100%;
3541     width: 6px;
3542     cursor: col-resize;
3543 }
3544 [dir='rtl'] #sidebar-resizer {
3545     right: auto;
3546     left: -6px;
3547 }
3548
3549 #sidebar.collapsed #sidebar-resizer {
3550     /* make target wider to avoid the user accidentally resizing window */
3551     width: 10px;
3552     right: -10px;
3553 }
3554 [dir='rtl'] #sidebar.collapsed #sidebar-resizer {
3555     left: -10px;
3556 }
3557
3558 .sidebar-component {
3559     position: absolute;
3560     top: 0;
3561     left: 0;
3562     bottom: 0;
3563     right: 0;
3564 }
3565
3566 .sidebar-component .body {
3567     width: 100%;
3568     overflow: auto;
3569     top: 60px;
3570     bottom: 0;
3571     position: absolute;
3572 }
3573
3574 .panewrap {
3575     position: absolute;
3576     width: 200%;
3577     height: 100%;
3578     right: -100%;
3579 }
3580
3581 .pane {
3582     position: absolute;
3583     width: 50%;
3584     top: 0;
3585     bottom: 30px;
3586 }
3587
3588 .pane:first-child {
3589     left: 0;
3590 }
3591
3592 .pane:last-child {
3593     right: 0;
3594 }
3595
3596 .inspector-wrap {
3597     width: 100%;
3598     height: 100%;
3599     overflow: hidden;
3600     position: relative;
3601 }
3602
3603 .inspector-hidden {
3604     display: none;
3605 }
3606
3607 .inspector-body {
3608     overflow-y: scroll;
3609     overflow-x: hidden;
3610     position: absolute;
3611     right: 0;
3612     left: 0;
3613     bottom: 0;
3614 }
3615
3616 .feature-list-pane .inspector-body,
3617 .preset-list-pane .inspector-body {
3618     top: 120px;
3619 }
3620 .entity-editor-pane .inspector-body,
3621 .selection-list-pane .inspector-body {
3622     top: 60px;
3623 }
3624
3625 .inspector-inner {
3626     padding: 20px 20px 5px 20px;
3627     position: relative;
3628 }
3629
3630 #sidebar .search-header .icon {
3631     display: block;
3632     position: absolute;
3633     left: 10px;
3634     top: 80px;
3635     pointer-events: none;
3636 }
3637 [dir='rtl'] #sidebar .search-header .icon {
3638     left: auto;
3639     right: 10px;
3640 }
3641
3642 #sidebar .search-header input {
3643     position: absolute;
3644     top: 60px;
3645     height: 60px;
3646     width: 100%;
3647     padding: 5px 10px;
3648     border-radius: 0;
3649     border-width: 0;
3650     border-bottom-width: 1px;
3651     text-indent: 30px;
3652     font-size: 18px;
3653     font-weight: bold;
3654 }
3655
3656
3657 /* Feature List / Search Results
3658 ------------------------------------------------------- */
3659 .feature-list  {
3660     width: 100%;
3661 }
3662 .no-results-item,
3663 .geocode-item,
3664 .feature-list-item {
3665     width: 100%;
3666     position: relative;
3667     border-bottom: 1px solid #ccc;
3668     border-radius: 0;
3669 }
3670
3671 .geocode-item {
3672     width: 50%;
3673     background-color: #ccc;
3674     left: 25%;
3675     margin-top: 30px;
3676     border-radius: 2px;
3677 }
3678
3679 [dir='rtl'] .geocode-item {
3680     left: -25%;
3681 }
3682
3683 .geocode-item:hover {
3684     background-color: #aaa;
3685 }
3686
3687 .feature-list-item {
3688     background-color: #fff;
3689     font-weight: bold;
3690     height: 40px;
3691     line-height: 20px;
3692 }
3693 .feature-list-item:hover {
3694     background-color: #ececec;
3695 }
3696 .feature-list-item button {
3697     background: transparent;
3698 }
3699 .feature-list-item .label {
3700     text-align: left;
3701     padding: 10px 10px;
3702     white-space: nowrap;
3703     text-overflow: ellipsis;
3704     overflow: hidden;
3705     border-left: 1px solid rgba(0, 0, 0, .1);
3706 }
3707 [dir='rtl'] .feature-list-item .label {
3708     text-align: right;
3709 }
3710
3711 .feature-list-item .label .icon {
3712     opacity: .5;
3713 }
3714 .feature-list-item .close {
3715     float: right;
3716     padding: 10px;
3717 }
3718 .feature-list-item .close .icon {
3719     opacity: 1;
3720 }
3721 .feature-list-item .entity-type {
3722     color: #7092ff;
3723 }
3724 .feature-list-item:hover .entity-type {
3725     color: #597be7;
3726 }
3727 .feature-list-item .entity-name {
3728     font-weight: normal;
3729     color: #666;
3730     padding-left: 10px;
3731 }
3732 [dir='rtl'] .feature-list-item .entity-name {
3733     padding-left: 0;
3734     padding-right: 10px;
3735 }
3736
3737
3738 /* Preset List and Icons
3739 ------------------------------------------------------- */
3740 .preset-list  {
3741     width: 100%;
3742     padding: 20px 20px 10px 20px;
3743     border-bottom: 1px solid #ccc;
3744 }
3745
3746 .preset-list-button-wrap {
3747     position: relative;
3748     margin-bottom: 10px;
3749     height: 60px;
3750 }
3751
3752 .preset-list-button {
3753     width: 100%;
3754     height: 100%;
3755     position: relative;
3756     border: 1px solid #ccc;
3757 }
3758
3759 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
3760     background: #ececec;
3761 }
3762
3763 .preset-icon-fill-area {
3764     cursor: inherit;
3765     height: 40px;
3766     width: 40px;
3767     margin: auto;
3768     position: absolute;
3769     left: 10px;
3770     top: 10px;
3771 }
3772
3773 .preset-icon-fill-vertex {
3774     height: 40px;
3775     width: 40px;
3776     margin: auto;
3777     position: absolute;
3778     left: 10px;
3779     top: 10px;
3780     border: 1.5px solid #333;
3781     border-radius: 20px;
3782     background-color: #efefef;
3783     backface-visibility: hidden;
3784 }
3785
3786 [dir='rtl'] .preset-icon-fill-vertex,
3787 [dir='rtl'] .preset-icon-fill-area {
3788   left: auto;
3789   right: 10px;
3790 }
3791
3792 .preset-icon-frame {
3793     position: absolute;
3794     top: 7px;
3795     left: 7px;
3796     margin: auto;
3797 }
3798 [dir='rtl'] .preset-icon-frame {
3799     left: auto;
3800     right: 7px;
3801 }
3802
3803 .preset-icon-frame .icon {
3804     width: 46px;
3805     height: 46px;
3806 }
3807
3808 .preset-icon-60 {
3809     position: absolute;
3810     top: 0px;
3811     left: 0px;
3812     margin: auto;
3813 }
3814
3815 .preset-icon-60 .icon {
3816     width: 60px;
3817     height: 60px;
3818 }
3819
3820 .preset-icon-44 {
3821     position: absolute;
3822     top: 9px;
3823     left: 8px;
3824     margin: auto;
3825 }
3826
3827 .preset-icon-44 .icon {
3828     width: 44px;
3829     height: 44px;
3830 }
3831
3832 .preset-icon-28 {
3833     position: absolute;
3834     top: 16px;
3835     left: 16px;
3836     margin: auto;
3837 }
3838
3839 .preset-icon-28 .icon {
3840     width: 28px;
3841     height: 28px;
3842 }
3843
3844 .preset-icon-24 {
3845     position: absolute;
3846     top: 18px;
3847     left: 18px;
3848     margin: auto;
3849 }
3850
3851 .preset-icon-24 .icon {
3852     width: 24px;
3853     height: 24px;
3854 }
3855
3856 [dir='rtl'] .preset-list-button-wrap .preset-icon {
3857     left: auto;
3858     right: auto;
3859 }
3860
3861 [dir='rtl'] .preset-list-button-wrap .preset-icon-28 {
3862     right: 16px;
3863 }
3864
3865 [dir='rtl'] .preset-list-button-wrap .preset-icon-24 {
3866     right: 18px;
3867 }
3868
3869 .preset-list-button .label {
3870     display: flex;
3871     flex-flow: row wrap;
3872     align-items: center;
3873     background-color: #f6f6f6;
3874     text-align: left;
3875     position: absolute;
3876     top: 0;
3877     bottom: 0;
3878     right: 0;
3879     padding: 5px 10px;
3880     left: 60px;
3881     border-left: 1px solid rgba(0, 0, 0, .1);
3882     border-radius: 0 3px 3px 0;
3883 }
3884 [dir='rtl'] .preset-list-button .label {
3885     text-align: right;
3886     left: 0;
3887     right: 60px;
3888     border-left: none;
3889     border-right: 1px solid rgba(0, 0, 0, .1);
3890     border-radius: 3px 0 0 3px;
3891 }
3892
3893 .preset-list-button .label-inner {
3894     width: 100%;
3895 }
3896 .preset-list-button .label-inner .namepart {
3897     height: 17px;
3898     white-space: nowrap;
3899     text-overflow: ellipsis;
3900     overflow: hidden;
3901     padding-right: 30px;
3902 }
3903 [dir='rtl'] .preset-list-button .label-inner .namepart {
3904     padding-right: 0;
3905     padding-left: 30px;
3906 }
3907
3908 .preset-list-button:hover .label,
3909 .preset-list-button:focus .label {
3910     background-color: #ececec;
3911 }
3912
3913 .preset-list-item button.tag-reference-button {
3914     height: 100%;
3915     border: 1px solid #ccc;
3916     border-radius: 0 3px 3px 0;
3917     position: absolute;
3918     top: 0;
3919     right: 0;
3920     width: 32px;
3921     background: #f6f6f6;
3922 }
3923 [dir='rtl'] .preset-list-item button.tag-reference-button {
3924     left: 0;
3925     right: auto;
3926     border-radius: 3px 0 0 3px;
3927 }
3928
3929 .preset-list-item button.tag-reference-button:hover {
3930     background: #f1f1f1;
3931 }
3932 .preset-list-item button.tag-reference-button .icon {
3933     opacity: .5;
3934 }
3935
3936 img.tag-reference-wiki-image {
3937     float: right;
3938     width: 33.3333%;
3939     width: -webkit-calc(33.3333% - 10px);
3940     width: calc(33.3333% - 10px);
3941     border-radius: 4px;
3942     max-height: 200px;
3943     margin: 10px 5px 15px 20px;
3944 }
3945
3946
3947 .current .preset-list-button,
3948 .current .preset-list-button .label {
3949     background-color: #e8ebff;
3950 }
3951
3952 .category .preset-list-button:after,
3953 .category .preset-list-button:before {
3954     content: "";
3955     position: absolute;
3956     top: -5px;
3957     left: -1px; right: -1px;
3958     border: 1px solid #ccc;
3959     border-bottom: none;
3960     border-radius: 6px 6px 0 0;
3961     height: 6px;
3962 }
3963
3964 .category .preset-list-button:before {
3965     top: -3px;
3966 }
3967
3968 .subgrid .preset-list {
3969     padding: 10px 10px 0 10px;
3970     margin-top: 0;
3971     border: 0;
3972     border-radius: 8px;
3973     width: -webkit-calc(100% + 20px);
3974     margin-left: -10px;
3975 }
3976
3977 .subgrid .arrow {
3978     border: solid rgba(0, 0, 0, 0);
3979     border-width: 10px;
3980     border-bottom-color: #f1f1f1;
3981     width: 0;
3982     height: 0;
3983     margin-left: 50%;
3984     margin-left: -webkit-calc(50% - 10px);
3985     margin-top: -10px;
3986 }
3987
3988
3989 /* Quick links
3990 ------------------------------------------------------- */
3991 .quick-links {
3992     display: flex;
3993     flex-flow: row wrap;
3994     justify-content: flex-end;
3995     padding: 0 20px;
3996 }
3997 .quick-link {
3998     margin: 0 5px;
3999 }
4000
4001 .data-editor .quick-links,
4002 .keepRight-editor .quick-links,
4003 .note-editor .quick-links {
4004     padding: 5px 0 0 0;
4005 }
4006
4007
4008 /* Entity/Preset Editor
4009 ------------------------------------------------------- */
4010 .preset-editor {
4011     overflow: hidden;
4012     padding: 10px 0px 5px 0px;
4013 }
4014 .preset-editor a.hide-toggle {
4015     margin: 0 20px 5px 20px;
4016 }
4017 .preset-editor .form-fields-container {
4018     padding: 10px;
4019     margin: 0 10px 10px 10px;
4020     border-radius: 8px;
4021 }
4022 .preset-editor .form-fields-container:empty {
4023     display: none;
4024 }
4025 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
4026     margin-bottom: 0;
4027 }
4028
4029 /*
4030     The parts of a field:
4031     - `.form-field` is a `div` wraps the entire thing
4032     - `.form-field-label` is a `label` that wraps the top part, it contains;
4033        - `span` classed `label-text`
4034        - 0..n buttons for "remove", "modified", "tag reference"
4035     - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
4036        - usually an `input`
4037        - sometimes some buttons (translate, increment, decrement)
4038        - or could just be a `div` with anything really
4039     - `.tag-reference-body` at the bottom (usually hidden)
4040
4041    .------------------.                             -
4042    |  Name        | i |  <- .form-field-label        |
4043    +------------------+                               |
4044    |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
4045    '------------------'                               |
4046      tag reference       <- .tag-reference-body      |
4047                                                     -
4048 */
4049
4050 .form-field {
4051     display: flex;
4052     flex-flow: row wrap;
4053     margin-bottom: 10px;
4054     width: 100%;
4055     -webkit-transition: margin-bottom 200ms;
4056        -moz-transition: margin-bottom 200ms;
4057          -o-transition: margin-bottom 200ms;
4058             transition: margin-bottom 200ms;
4059 }
4060
4061 .form-field.nowrap,
4062 .wrap-form-field:last-child .form-field {
4063     margin-bottom: 0;
4064 }
4065
4066 /* A `label` element that wraps the top section */
4067 .form-field-label {
4068     display: flex;
4069     flex-flow: row nowrap;
4070     flex: 1 1 100%;
4071     height: 30px;
4072     position: relative;
4073     font-weight: bold;
4074     color: #333;
4075     background: #f6f6f6;
4076     border: 1px solid #ccc;
4077     border-radius: 4px 4px 0 0;
4078     overflow: hidden;
4079 }
4080 .form-field-label .label-text {
4081     flex: 1 1 auto;
4082     padding: 5px 0 5px 10px;
4083 }
4084 [dir='rtl'] .form-field-label .label-text {
4085     padding: 5px 10px 5px 0;
4086 }
4087
4088 .form-field-label button {
4089     flex: 0 0 32px;
4090     border-left: 1px solid #ccc;
4091     width: 32px;
4092     height: 100%;
4093     border-radius: 0;
4094     background: #f6f6f6;
4095 }
4096 [dir='rtl'] .form-field-label button {
4097     border-left: none;
4098     border-right: 1px solid #ccc;
4099 }
4100 .form-field-label button:hover {
4101     background: #f1f1f1;
4102 }
4103 .form-field-label .icon {
4104     opacity: .5;
4105 }
4106
4107 .form-field-label .modified-icon,
4108 .form-field-label .remove-icon {
4109     display: none;
4110 }
4111 .modified .form-field-label .modified-icon,
4112 .present .form-field-label .remove-icon {
4113     display: inline-block;
4114 }
4115
4116 /* A `div` element that wraps the bottom section */
4117 .form-field-input-wrap {
4118     display: flex;
4119     flex-flow: row nowrap;
4120     flex: 1 1 100%;
4121     min-height: 30px;
4122     border-top: 0;
4123     border-radius: 0 0 4px 4px;
4124 }
4125 .nowrap .form-field-input-wrap {
4126     border-radius: 0;
4127 }
4128
4129
4130 .form-field-input-wrap > input,
4131 .form-field-input-wrap > label,
4132 .form-field-input-wrap > textarea,
4133 .form-field-input-wrap > ul.chiplist {
4134     flex: 1 1 auto;
4135     min-height: 30px;
4136     border: 1px solid #ccc;
4137     border-top: 0;
4138     border-radius: 0;
4139     overflow: hidden;
4140     position: relative;
4141 }
4142 .form-field-input-wrap > textarea {
4143     height: 65px;
4144     border-radius: 0 0 4px 4px;
4145 }
4146
4147 /* Buttons inside fields */
4148 .form-field-button {
4149     flex: 0 0 32px;
4150     height: 30px;
4151     width: 32px;
4152     position: relative;
4153     background-color: #fff;
4154     border: 1px solid #ccc;
4155     border-radius: 0;
4156     border-top-width: 0;
4157     border-left-width: 0;
4158     vertical-align: top;
4159 }
4160 [dir='rtl'] .form-field-button {
4161     border-left-width: 1px;
4162     border-right-width: 0;
4163 }
4164 .form-field-button:hover {
4165     background-color: #f1f1f1;
4166 }
4167 .form-field-button .icon {
4168     fill: #333;
4169     opacity: .5;
4170 }
4171
4172
4173 /* round corners of first/last child elements */
4174 .form-field-input-wrap > button:last-of-type {
4175     border-bottom-right-radius: 4px;
4176 }
4177 [dir='rtl'] .form-field-input-wrap > button:last-of-type {
4178     border-bottom-left-radius: 4px;
4179 }
4180
4181
4182 /* Field - Access, Cycleway
4183 ------------------------------------------------------- */
4184 .form-field-input-access,
4185 .form-field-input-cycleway {
4186     flex: 1 1 auto;
4187     display: flex;
4188     flex-flow: row wrap;
4189 }
4190
4191 /* Field - lists with labeled input items
4192 ------------------------------------------------------- */
4193 .form-field ul.labeled-inputs {
4194     flex: 1 1 auto;
4195     border: 1px solid #ccc;
4196     border-top: 0;
4197     border-radius: 0 0 4px 4px;
4198     overflow: hidden;
4199     width: 100%;
4200 }
4201 .form-field ul.labeled-inputs li {
4202     border-top: 1px solid #ccc;
4203     display: flex;
4204     flex-flow: row nowrap;
4205 }
4206 .form-field ul.labeled-inputs li:first-child {
4207     border-top: 0;
4208 }
4209 .form-field ul.labeled-inputs li > span,
4210 .form-field ul.labeled-inputs li > div {
4211     flex: 1 1 auto;
4212     width: 100%;
4213     border-radius: 0;
4214 }
4215 .form-field ul.labeled-inputs li input {
4216     border-radius: 0;
4217     width: 100%;
4218 }
4219 .form-field ul.labeled-inputs li input,
4220 .form-field ul.labeled-inputs li button {
4221     border-width: 0;
4222     border-left-width: 1px;
4223 }
4224 [dir='rtl'] .form-field ul.labeled-inputs li input,
4225 [dir='rtl'] .form-field ul.labeled-inputs li button {
4226     border-left-width: 0;
4227     border-right-width: 1px;
4228 }
4229
4230
4231 /* Field - Structure
4232 ------------------------------------------------------- */
4233 .structure-extras-wrap {
4234     width: 100%;
4235     padding: 10px 10px;
4236     background: #fff;
4237     border: 1px solid #ccc;
4238     border-top: 0px;
4239     border-radius: 0 0 4px 4px;
4240 }
4241 .structure-extras-wrap > ul.labeled-inputs {
4242     border: 1px solid #ccc;
4243     border-radius: 4px;
4244 }
4245
4246
4247 /* Field - Combo / Multicombo
4248 ------------------------------------------------------- */
4249 .form-field-input-combo > input:only-of-type {
4250     border-radius: 0 0 4px 4px;
4251 }
4252 .form-field-input-combo.empty-combobox input,
4253 .form-field-input-multicombo .empty-combobox input {
4254     padding-right: 10px;
4255     padding-left: 10px;
4256 }
4257 .form-field-input-combo.empty-combobox .combobox-caret,
4258 .form-field-input-multicombo .empty-combobox .combobox-caret {
4259     display: none;
4260 }
4261
4262 .form-field-input-multicombo ul.chiplist {
4263     padding: 5px 7px 5px 7px;
4264     background: #fff;
4265     display: block;
4266     border-radius: 0 0 4px 4px;
4267 }
4268
4269 .form-field-input-multicombo li.chips {
4270     background-color: #eff2f7;
4271     border: 1px solid #ccd5e3;
4272     line-height: 25px;
4273     padding: 2px 0px 2px 5px;
4274 }
4275 .form-field-input-multicombo li {
4276     display: inline-flex;
4277     flex-flow: row nowrap;
4278     align-items: center;
4279     margin: 3px;
4280     border-radius: 4px;
4281 }
4282
4283 .form-field-input-multicombo a {
4284     font-family: Arial, Helvetica, sans-serif !important;
4285     font-size: 16px !important;
4286     line-height: 22px;
4287     float: right;
4288     padding: 0px 5px 0px 5px;
4289     margin: 0;
4290     cursor: pointer;
4291     color: #a6b4ce;
4292 }
4293
4294 .form-field-input-multicombo .input-wrap {
4295     border: 1px solid #ddd;
4296     width: 100px;
4297     height: 31px;
4298 }
4299 .form-field-input-multicombo input {
4300     border: none;
4301     width: 100%;
4302     height: 100%;
4303 }
4304
4305 .form-field-input-multicombo input:focus {
4306     border-radius: 4px !important;
4307 }
4308
4309 .form-field-input-multicombo .full-line-chips li {
4310     display: block;
4311 }
4312 .form-field-input-multicombo .full-line-chips li:not(:last-child) {
4313     margin-bottom: 6px;
4314 }
4315 .form-field-input-multicombo .full-line-chips .input-wrap {
4316     width: auto;
4317 }
4318
4319
4320 /* Field - Text / Numeric
4321 ------------------------------------------------------- */
4322 .form-field-input-text > input:only-of-type,
4323 .form-field-input-tel > input:only-of-type,
4324 .form-field-input-email > input:only-of-type,
4325 .form-field-input-url > input:only-of-type {
4326     border-radius: 0 0 4px 4px;
4327 }
4328 .form-field-input-number > input:only-of-type {
4329     border-radius: 0 0 0 4px;
4330 }
4331 [dir='rtl'] .form-field-input-number > input:only-of-type {
4332     border-radius: 0 0 4px 0;
4333 }
4334 .form-field-input-number > button:last-of-type {
4335     border-radius: 0 0 4px 0;
4336 }
4337 [dir='rtl'] .form-field-input-number > button:last-of-type {
4338     border-radius: 0 0 0 4px;
4339 }
4340
4341 /* draw the up/down on the buttons */
4342 .form-field-input-number button.decrement::after,
4343 .form-field-input-number button.increment::after {
4344     content: "";
4345     height: 0; width: 0;
4346     position: absolute;
4347     left: 0; right: 0; bottom: 0; top: 0;
4348     margin: auto;
4349 }
4350 .form-field-input-number button.decrement::after {
4351     border-top: 5px solid #ccc;
4352     border-left: 5px solid transparent;
4353     border-right: 5px solid transparent;
4354 }
4355 .form-field-input-number button.increment::after {
4356     border-bottom: 5px solid #ccc;
4357     border-left: 5px solid transparent;
4358     border-right: 5px solid transparent;
4359 }
4360
4361
4362 /* Field - Checkbox
4363 ------------------------------------------------------- */
4364 .form-field-input-check {
4365     display: flex;
4366     align-items: end;
4367     background: #fff;
4368     padding: 5px 10px;
4369     color: #7092ff;
4370     border: 1px solid #ccc;
4371     border-top: 0;
4372     cursor: pointer;
4373 }
4374 .form-field-input-check > input[type="checkbox"] {
4375     flex: 0 1 auto;
4376     min-height: 20px;
4377     width: 20px;
4378 }
4379 .form-field-input-check > span {
4380     flex: 1 1 auto;
4381 }
4382 .form-field-input-check > .reverser.button {
4383     flex: 0 1 auto;
4384     background-color: #eff2f7;
4385     border: 1px solid #ccd5e3;
4386     border-radius: 2px;
4387     padding: 0px 8px;
4388 }
4389 .form-field-input-check > .reverser.button.hide {
4390     display: none;
4391 }
4392
4393 .form-field-input-check:hover {
4394     background: #f1f1f1;
4395 }
4396 .form-field-input-check .set {
4397     color: inherit;
4398 }
4399 .form-field-input-check label:not(.set) input[type="checkbox"] {
4400     opacity: .5;
4401 }
4402
4403
4404 /* Field - Radio button
4405 ------------------------------------------------------- */
4406 .form-field-input-radio {
4407     flex: 1 1 auto;
4408     display: flex;
4409     flex-flow: row wrap;
4410 }
4411 .form-field-input-radio > label {
4412     flex: 1 1 auto;
4413     display: flex;
4414     flex-flow: row nowrap;
4415     width: 100%;
4416     padding: 5px 10px;
4417     height: 30px;
4418     background-color: #fff;
4419     color: #7092ff;
4420     cursor: pointer;
4421 }
4422 .form-field-input-radio > label:last-child {
4423     border-radius: 0 0 4px 4px;
4424 }
4425 .form-field-input-radio > label:hover {
4426     background-color: #ececec;
4427 }
4428 .form-field-input-radio > label.active {
4429     background-color: #e8ebff;
4430 }
4431 .form-field-input-radio > label:not(:last-of-type) {
4432     border-bottom: 1px solid #ccc;
4433 }
4434 .form-field-input-radio > label > input[type="radio"] {
4435     flex: 0 1 auto;
4436     width: 20px;
4437 }
4438 .form-field-input-radio > label > span {
4439     flex: 1 1 auto;
4440     overflow: hidden;
4441     white-space: nowrap;
4442     text-overflow: ellipsis;
4443 }
4444
4445 /* Hide placeholder for radio buttons if another is active, or not in hover state */
4446 .form-field-input-radio label.active ~ .placeholder,
4447 .form-field-input-radio .placeholder {
4448     padding: 0;
4449     opacity: 0;
4450     width: 0;
4451     line-height: 0;
4452     display: block;
4453     overflow: hidden;
4454 }
4455
4456
4457 /* Field - Maxspeed
4458 ------------------------------------------------------- */
4459 .form-field-input-maxspeed > input:first-of-type {
4460     border-radius: 0 0 0 4px;
4461 }
4462 [dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
4463     border-radius: 0 0 4px 0;
4464 }
4465 .form-field-input-maxspeed > input:last-of-type {  /* unit field */
4466     flex: 0 1 80px;
4467     width: 80px;
4468     border-left: 0;
4469     border-radius: 0 0 4px 0;
4470 }
4471 [dir='rtl'] .form-field-input-maxspeed > input:last-of-type {
4472     border-right: 0;
4473     border-radius: 0 0 0 4px;
4474 }
4475
4476
4477 /* Field - Localized Name
4478 ------------------------------------------------------- */
4479 .form-field-input-localized > input.localized-main {
4480     border-radius: 0 0 0 4px;
4481 }
4482 [dir='rtl'] .form-field-input-localized > input.localized-main {
4483     border-radius: 0 0 4px 0;
4484 }
4485 .form-field-input-localized > button.localized-add {
4486     border-radius: 0 0 4px 0;
4487 }
4488 [dir='rtl'] .form-field-input-localized > button.localized-add {
4489     border-radius: 0 0 0 4px;
4490 }
4491
4492 .form-field-input-localized button.localized-add.disabled,
4493 .form-field-input-localized input.localized-main.disabled,
4494 .form-field-input-localized input.localized-lang.disabled,
4495 .form-field-input-localized input.localized-value.disabled {
4496     color: #777;
4497     background-color: #eee;
4498     cursor: not-allowed;
4499 }
4500
4501 /* nested subfields for name in different languages */
4502 .localized-multilingual {
4503     padding: 0 10px;
4504     flex-basis: 100%;
4505 }
4506 .localized-multilingual .entry {
4507     position: relative;
4508     overflow: hidden;
4509 }
4510
4511 /* draws a little line connecting the multilingual field up to the name field */
4512 .localized-multilingual .entry::before {
4513     content: "";
4514     display: block;
4515     position: absolute;
4516     background: #ccc;
4517     height: 11px;
4518     width: 1px;
4519     left: 0;
4520     right: 0;
4521     top: -11px;
4522     margin: auto;
4523 }
4524
4525 .localized-multilingual .entry .localized-lang {
4526     border-radius: 0;
4527     border-top-width: 0;
4528     width: 100%;
4529 }
4530 .localized-multilingual .entry .localized-value {
4531     border-top-width: 0;
4532     border-radius: 0 0 4px 4px;
4533     width: 100%;
4534 }
4535
4536
4537 /* Field - Address
4538 ------------------------------------------------------- */
4539 .form-field-input-address {
4540     flex: 1 1 auto;
4541     display: flex;
4542     flex-flow: row wrap;
4543     border: 1px solid #ccc;
4544     border-top: 0px;
4545 }
4546
4547 .addr-row {
4548     flex: 1 1 auto;
4549     display: flex;
4550     width: 100%;
4551     min-height: 30px;
4552 }
4553
4554 .addr-row > input {
4555     flex: 1 1 auto;
4556     border-radius: 0;
4557     border-right: 0;
4558     border-bottom: 0;
4559 }
4560 [dir='rtl'] .addr-row input {
4561     border-right: 1px solid #ccc;
4562     border-left: 0;
4563 }
4564
4565 .addr-row:first-of-type input {
4566     border-top: 0;
4567 }
4568 .addr-row input:first-of-type {
4569     border-left: 0;
4570 }
4571 [dir='rtl'] .addr-row input:first-of-type {
4572     border-right: 0;
4573 }
4574 .addr-row:last-of-type input:first-of-type {
4575     border-radius: 0 0 0 4px;
4576 }
4577 [dir='rtl'] .addr-row:last-of-type input:first-of-type {
4578     border-radius: 0 0 4px 0;
4579 }
4580 .addr-row:last-of-type input:last-of-type {
4581     border-radius: 0 0 4px 0;
4582 }
4583 [dir='rtl'] .addr-row:last-of-type input:last-of-type {
4584     border-radius: 0 0 0 4px;
4585 }
4586
4587
4588 /* Field - Wikipedia
4589 ------------------------------------------------------- */
4590 .form-field-input-wikipedia {
4591     display: flex;
4592     flex-flow: row wrap;
4593     flex: 1 1 auto;
4594 }
4595
4596 .wiki-lang-container,
4597 .wiki-title-container {
4598     display: flex;
4599     flex-flow: row nowrap;
4600     flex: 1 1 auto;
4601     width: 100%;
4602 }
4603
4604 .wiki-lang-container > input.wiki-lang,
4605 .wiki-title-container > input.wiki-title {
4606     flex: 1 1 auto;
4607     border-top: 0;
4608     border-radius: 0;
4609 }
4610 .wiki-title-container > input.wiki-title {
4611     border-radius: 0 0 0 4px;
4612 }
4613 [dir='rtl'] .wiki-title-container > input.wiki-title {
4614     border-radius: 0 0 4px 0;
4615 }
4616 .wiki-title-container > button.wiki-link {
4617     border-radius: 0 0 4px 0;
4618 }
4619 [dir='rtl'] .wiki-title-container > button.wiki-link {
4620     border-radius: 0 0 0 4px;
4621 }
4622
4623
4624 /* Field - Restriction Editor
4625 ------------------------------------------------------- */
4626 .form-field-input-restrictions {
4627     display: block;
4628     border: 1px solid #ccc;
4629     border-top: 0;
4630     border-radius: 0 0 4px 4px;
4631 }
4632
4633 .form-field-input-restrictions .restriction-controls-container {
4634     background-color: #fff;
4635     width: 100%;
4636     padding: 5px;
4637     border-top: 1px solid #ccc;
4638     border-radius: 0 0 4px 4px;
4639 }
4640
4641 .restriction-controls-container .restriction-controls {
4642     display: table;
4643     -moz-user-select: none;
4644     -webkit-user-select: none;
4645     -ms-user-select: none;
4646     user-select: none;
4647 }
4648
4649 .restriction-controls .restriction-control {
4650     display: table-row;
4651     padding: 5px 10px;
4652     height: 25px;
4653 }
4654
4655 .restriction-control input,
4656 .restriction-control span {
4657     display: table-cell;
4658     text-align: start;
4659     padding: 0px 5px;
4660 }
4661
4662 .restriction-control span.restriction-control-label {
4663     text-align: end;
4664 }
4665
4666 .restriction-control input {
4667     width: 60px;
4668     padding: 0;
4669     margin: 0px 5px;
4670     vertical-align: middle;
4671 }
4672
4673 .form-field-input-restrictions .restriction-container {
4674     position: relative;
4675     height: 370px;
4676 }
4677 /* zero width space, so container takes up space */
4678 .form-field-input-restrictions .restriction-container:after {
4679     content: '\200b';
4680 }
4681
4682 .form-field-input-restrictions svg.surface {
4683     width: 100%;
4684     height: 100%;
4685 }
4686
4687 .restriction-container .restriction-help {
4688     z-index: 1;
4689     position: absolute;
4690     top: 0;
4691     left: 0;
4692     right: 0;
4693     padding: 2px 6px;
4694     background-color: rgba(255, 255, 255, .8);
4695     color: #888;
4696     text-align: center;
4697     pointer-events: none;
4698
4699     -moz-user-select: none;
4700     -webkit-user-select: none;
4701     -ms-user-select: none;
4702     user-select: none;
4703 }
4704
4705 .restriction-help span {
4706     margin: 2px;
4707 }
4708
4709 .restriction-help .qualifier {
4710     color: #666;
4711     font-weight: bold;
4712 }
4713 .restriction-help .qualifier.allow {
4714     color: #8b5;
4715 }
4716 .restriction-help .qualifier.restrict {
4717     color: #d53;
4718 }
4719 .restriction-help .qualifier.only {
4720     color: #78f;
4721 }
4722
4723
4724 /* Field - Changeset Comment
4725 ------------------------------------------------------- */
4726 .form-field-comment:not(.present) #preset-input-comment {
4727     border-color: rgb(230, 100, 100);
4728 }
4729 .form-field-comment:not(.present) .form-field-label {
4730     border-color: rgb(230, 100, 100);
4731     background: rgba(230, 100, 100, 0.2);
4732 }
4733 .form-field-comment:not(.present) button {
4734     border-color: rgb(230, 100, 100);
4735 }
4736
4737
4738 /* Field - Combobox
4739 ------------------------------------------------------- */
4740 div.combobox {
4741     z-index: 9999;
4742     display: none;
4743     box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
4744     margin-top: -1px;
4745     background: #fff;
4746     max-height: 245px;
4747     overflow-y: auto;
4748     overflow-x: hidden;
4749     border: 1px solid #ccc;
4750     border-radius: 0 0 4px 4px;
4751 }
4752
4753 .combobox a {
4754     display: block;
4755     padding: 5px 10px;
4756     border-top: 1px solid #ccc;
4757     text-overflow: ellipsis;
4758     white-space: nowrap;
4759     overflow: hidden;
4760 }
4761
4762 .combobox a.selected,
4763 .combobox a:hover {
4764     background: #ececec;
4765 }
4766
4767 .combobox a:first-child {
4768     border-top: 0;
4769     padding: 4px 10px;
4770 }
4771
4772 .combobox-caret {
4773     display: inline-block;
4774     position: relative;
4775     height: 30px;
4776     width: 30px;
4777     margin-left: -30px;
4778     vertical-align: top;
4779     cursor: pointer;
4780     pointer-events: none;
4781 }
4782 [dir='rtl'] .combobox-caret {
4783   margin-left: 0;
4784   margin-right: -30px;
4785 }
4786
4787 .combobox-caret::after {
4788     content: "";
4789     height: 0; width: 0;
4790     position: absolute;
4791     left: 0; right: 0; bottom: 0; top: 0;
4792     margin: auto;
4793     border-top: 5px solid #ccc;
4794     border-left: 5px solid transparent;
4795     border-right: 5px solid transparent;
4796 }
4797
4798 /* Remove the field's bottom border radius when combobox is open */
4799 /* For some reason this stops the combobox from overlapping the bottom of the field */
4800 .combobox + * textarea:focus,
4801 .combobox + * input:focus {
4802     border-bottom-left-radius: 0 !important;
4803     border-bottom-right-radius: 0 !important;
4804 }
4805
4806
4807 /* Field Help
4808 ------------------------------------------------------- */
4809 .field-help-body {
4810     display: block;
4811     position: absolute;
4812     top: 0;
4813     left: 20px;
4814     right: 20px;
4815     margin: 5px;
4816     padding: 8px;
4817     border: 1px solid #ccc;
4818     border-top: 0;
4819     border-radius: 0 0 4px 4px;
4820     z-index: 20;
4821     background: rgba(255,255,255,0.95);
4822     box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
4823 }
4824
4825 .field-help-title h2 {
4826     padding: 10px;
4827     margin-bottom: 0px;
4828     font-size: 17px;
4829 }
4830 .field-help-title button {
4831     width: 45px;
4832     height: 55px;
4833     border-radius: 0;
4834 }
4835
4836 .field-help-nav {
4837     font-size: 13px;
4838     font-weight: bold;
4839     margin-bottom: 10px;
4840 }
4841 .field-help-nav-item {
4842     display: inline-block;
4843     padding: 5px 10px;
4844     cursor: pointer;
4845     color: #666;
4846 }
4847 .field-help-nav-item.active {
4848     color: #7092ff;
4849     border-bottom: 2px solid;
4850 }
4851 .field-help-nav-item:hover {
4852     color: #597be7;
4853     background-color: #efefef;
4854 }
4855
4856 .field-help-content {
4857     padding: 10px;
4858     overflow-y: auto;
4859     overflow-x: hidden;
4860 }
4861 .field-help-content h3 {
4862     font-size: 12px;
4863     margin-bottom: 5px;
4864 }
4865 .field-help-content p {
4866     margin-bottom: 15px;
4867 }
4868 .field-help-content ul li {
4869     list-style: inside;
4870     margin-bottom: 5px;
4871 }
4872
4873 .field-help-content .field-help-image {
4874     width: 100%;
4875     margin-bottom: 15px;
4876 }
4877
4878 .field-help-content svg.turn {
4879     width: 40px;
4880     height: 20px;
4881 }
4882 .field-help-content svg.shadow {
4883     opacity: 0.7;
4884     width: 60px;
4885     height: 20px;
4886 }
4887 .field-help-content svg.from {
4888     color: #777;
4889 }
4890 .field-help-content svg.allow {
4891     color: #5b3;
4892 }
4893 .field-help-content svg.restrict {
4894     color: #d53;
4895 }
4896 .field-help-content svg.only {
4897     color: #68f;
4898 }
4899
4900 .field-help-content p.from_shadow,
4901 .field-help-content p.allow_shadow,
4902 .field-help-content p.restrict_shadow,
4903 .field-help-content p.allow_turn,
4904 .field-help-content p.restrict_turn {
4905     margin-bottom: 5px;
4906 }
4907
4908
4909 /* More Fields dropdown
4910 ------------------------------------------------------- */
4911 .more-fields {
4912     padding: 0 20px 20px 20px;
4913     font-weight: bold;
4914 }
4915 .changeset-editor .more-fields {
4916     padding: 15px 20px 0 20px;
4917 }
4918
4919 .more-fields label {
4920     display: flex;
4921     flex-flow: row nowrap;
4922     justify-content: space-between;
4923     align-items: center;
4924 }
4925
4926 .more-fields input {
4927     margin-left: 10px;
4928     flex: 1 1 50%;
4929 }
4930 [dir='rtl'] .more-fields input {
4931     margin-left: auto;
4932     margin-right: 10px;
4933 }
4934
4935 .form-field-input-wrap .label {
4936     height: 30px;
4937     background: #f6f6f6;
4938     padding: 5px 10px;
4939 }
4940
4941
4942 /* Raw Tag Editor
4943 ------------------------------------------------------- */
4944 .tag-list {
4945     padding-top: 10px;
4946 }
4947 .tag-row {
4948     width: 100%;
4949     position: relative;
4950 }
4951 .tag-row .inner-wrap {
4952     display: flex;
4953     flex-flow: row nowrap;
4954     width: 100%;
4955     position: relative;
4956 }
4957 .tag-row .key-wrap,
4958 .tag-row .value-wrap {
4959     flex: 1 1 50%;
4960 }
4961
4962 .tag-row.readonly,
4963 .tag-row.readonly input.key,
4964 .tag-row.readonly input.value,
4965 .tag-row.readonly button.remove {
4966     color: #777;
4967     background-color: #eee;
4968     cursor: not-allowed;
4969 }
4970
4971 .tag-row input {
4972     height: 31px;
4973     border: 0;
4974     border-radius: 0;
4975     border-bottom: 1px solid #ccc;
4976     border-left: 1px solid #ccc;
4977     width: 100%;
4978 }
4979 [dir='rtl'] .tag-row input {
4980     border-left: none;
4981     border-right: 1px solid #ccc;
4982 }
4983
4984
4985 .tag-row input.key {
4986     font-weight: bold;
4987     background-color: #f6f6f6;
4988 }
4989
4990 .tag-row input.value {
4991     border-right: 1px solid #ccc;
4992 }
4993 [dir='rtl'] .tag-row input.value {
4994     border-left: 1px solid #ccc;
4995 }
4996
4997 .tag-row:first-child input.key {
4998     border-top: 1px solid #ccc;
4999     border-top-left-radius: 4px;
5000 }
5001 [dir='rtl'] .tag-row:first-child input.key {
5002     border-top-left-radius: 0;
5003     border-top-right-radius: 4px;
5004 }
5005
5006 .tag-row:first-child input.value {
5007     border-top: 1px solid #ccc;
5008 }
5009 .tag-row button {
5010     flex: 0 0 32px;
5011     height: 31px;
5012     width: 32px;
5013     border: 1px solid #ccc;
5014     border-top-width: 0;
5015     border-left-width: 0;
5016 }
5017 [dir='rtl'] .tag-row button {
5018     border-left-width: 1px;
5019     border-right-width: 0;
5020 }
5021
5022 .tag-row button:hover {
5023     background: #f1f1f1;
5024 }
5025 .tag-row button .icon {
5026     opacity: .5;
5027 }
5028 .tag-row:first-child button {
5029     border-top-width: 1px;
5030 }
5031
5032 .tag-row:first-child .tag-reference-button {
5033     border-top-right-radius: 4px;
5034 }
5035 [dir='rtl'] .tag-row:first-child .tag-reference-button {
5036     border-top-left-radius: 4px;
5037     border-top-right-radius: 0;
5038 }
5039
5040 .tag-row:last-child .tag-reference-button {
5041     border-bottom-right-radius: 4px;
5042 }
5043 [dir='rtl'] .tag-row:last-child .tag-reference-button {
5044     border-bottom-left-radius: 4px;
5045     border-bottom-right-radius: 0;
5046 }
5047
5048 .tag-row .tag-reference-button {
5049     border-radius: 0;
5050 }
5051 [dir='rtl'] .tag-row .tag-reference-button {
5052     border-left-width: 1px;
5053     border-right-width: 0;
5054 }
5055
5056 /* Tag reference */
5057 .tag-reference-loading {
5058     background-color: #f5f5f5;
5059 }
5060 .tag-reference-loading .icon {
5061     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
5062     background-position: 0 0;
5063 }
5064
5065 .tag-reference-body {
5066     flex: 1 1 auto;
5067     width: 100%;
5068     overflow: hidden;
5069 }
5070 .tag-reference-body .tag-reference-description {
5071     margin: 10px 5px 0 5px;
5072 }
5073 .tag-reference-body a {
5074     display: block;
5075 }
5076 .tag-reference-body .tag-reference-description:last-child,
5077 .tag-reference-body a:last-child {
5078     margin-bottom: 15px;
5079 }
5080
5081 .preset-list .tag-reference-body {
5082     position: relative;
5083     width: 100%;
5084 }
5085 .raw-tag-editor .tag-reference-body {
5086     width: 100%;
5087 }
5088 .raw-tag-editor .tag-row.readonly .tag-reference-body {
5089     background: #f6f6f6;
5090     color: #333;
5091 }
5092 .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
5093     border-bottom: 1px solid #ccc;
5094 }
5095 .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
5096     border-top: 1px solid #ccc;
5097 }
5098
5099
5100 /* Raw Member / Membership Editor
5101 ------------------------------------------------------- */
5102 .raw-member-editor .member-list li:first-child,
5103 .raw-membership-editor .member-list li:first-child {
5104     padding-top: 10px;
5105 }
5106 .raw-member-editor .member-row .member-entity-name,
5107 .raw-membership-editor .member-row .member-entity-name {
5108     font-weight: normal;
5109     padding-left: 10px;
5110 }
5111
5112 [dir='rtl'] .raw-member-editor .member-row .member-entity-name,
5113 [dir='rtl'] .raw-membership-editor .member-row .member-entity-name {
5114     padding-left:0;
5115     padding-right: 10px;
5116 }
5117
5118 .form-field-input-member > input.member-role {
5119     border-radius: 0 0 0 4px;
5120 }
5121 [dir='rtl'] .form-field-input-member > input.member-role {
5122     border-radius: 0 0 4px 0;
5123 }
5124
5125 .member-incomplete .form-field-input-member > input.member-role,
5126 [dir='rtl'] .member-incomplete .form-field-input-member > input.member-role {
5127     border-radius: 0 0 4px 4px;
5128 }
5129
5130 .member-incomplete .member-delete {
5131     display: none;
5132 }
5133
5134 .member-row-new .member-entity-input {
5135     flex: 1 1 100%;
5136     border-radius: 4px 4px 0 0;
5137     border: 0;
5138 }
5139
5140 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
5141 .raw-membership-editor.inspector-inner {
5142     margin-bottom: 150px;
5143 }
5144
5145 /* hidden field to prevent user from tabbing out of the sidebar */
5146 input.key-trap {
5147     height: 0px;
5148     width: 0px;
5149     padding: 0px;
5150     border: 1px solid rgba(0,0,0,0);
5151 }
5152
5153
5154 /* add tag, add relation buttons */
5155 .add-row {
5156     display: flex;
5157     width: 100%;
5158     flex-flow: row nowrap;
5159 }
5160 .add-row .add-tag,
5161 .add-row .add-relation,
5162 .add-row .space-value {
5163     flex: 1 1 50%;
5164 }
5165 .add-row .space-buttons {
5166     flex: 0 0 62px;
5167 }
5168 .add-row button {
5169     height: 30px;
5170     background: rgba(0,0,0,.5);
5171 }
5172 .add-row button:focus,
5173 .add-row button:hover {
5174     background: rgba(0,0,0,.8);
5175 }
5176
5177 .add-tag {
5178     border-radius: 0 0 4px 4px;
5179 }
5180 .add-relation {
5181     margin-top: 10px;
5182     border-radius: 4px;
5183 }
5184
5185
5186 /* Inspector (hover styles)
5187 ------------------------------------------------------- */
5188 .inspector-hover .form-field-input-wrap .label,
5189 .inspector-hover .form-field-input-multicombo .chiplist,
5190 .inspector-hover .form-field-button,
5191 .inspector-hover .structure-extras-wrap,
5192 .inspector-hover .comments-container .comment,
5193 .inspector-hover button,
5194 .inspector-hover input,
5195 .inspector-hover textarea,
5196 .inspector-hover label {
5197     background: #ececec;
5198 }
5199 .inspector-hover .preset-list-button,
5200 .inspector-hover .tag-row input {
5201     background: #f6f6f6;
5202 }
5203
5204 .inspector-hover a,
5205 .inspector-hover .form-field-input-multicombo .chips,
5206 .inspector-hover .form-field-input-check span {
5207     color: #666;
5208 }
5209
5210 .inspector-hover .form-field-input-multicombo .chips {
5211     background: #eee;
5212     border: 1px solid #ccc;
5213 }
5214
5215 /* no scrollbars */
5216 .inspector-hover div {
5217     overflow-x: hidden;
5218     overflow-y: hidden;
5219 }
5220
5221 /* hide and remove from layout */
5222 .inspector-hidden,
5223 .inspector-hover .preset-list-button-wrap .tag-reference-button,
5224 .inspector-hover label input[type="checkbox"],
5225 .inspector-hover label input[type="radio"],
5226 .inspector-hover .form-field-input-multicombo .input-wrap,
5227 .inspector-hover .form-field-input-radio label,
5228 .inspector-hover .form-field-input-radio label span,
5229 .inspector-hover .form-field-input-radio label.remove .icon,
5230 .inspector-hover .inspector-inner .add-row {
5231     display: none;
5232 }
5233
5234 /* hide but preserve in layout */
5235 .inspector-hover .combobox-caret,
5236 .inspector-hover .header button,
5237 .inspector-hover .quick-links,
5238 .inspector-hover .form-field-input-multicombo .chips .remove,
5239 .inspector-hover .hide-toggle:before,
5240 .inspector-hover .more-fields,
5241 .inspector-hover .form-field-label button,
5242 .inspector-hover .tag-row button,
5243 .inspector-hover .footer * {
5244     opacity: 0;
5245 }
5246
5247 /* Styles for raw tag inspector on hover */
5248 .inspector-hover .tag-row .key-wrap,
5249 .inspector-hover .tag-row .value-wrap {
5250     height: 31px;
5251 }
5252
5253 .inspector-hover .tag-row:first-child input.value {
5254     border-top-right-radius: 4px;
5255 }
5256 [dir='rtl'] .inspector-hover .tag-row:first-child input.value {
5257     border-top-right-radius: 0;
5258     border-top-left-radius: 4px;
5259 }
5260
5261 .inspector-hover .tag-row:last-child input.value {
5262     border-bottom-right-radius: 4px;
5263 }
5264 [dir='rtl'] .inspector-hover .tag-row:last-child input.value {
5265     border-bottom-right-radius: 0;
5266     border-bottom-left-radius: 4px;
5267 }
5268
5269 .inspector-hover .tag-row:last-child input.key {
5270     border-bottom-left-radius: 4px;
5271 }
5272 [dir='rtl'] .inspector-hover .tag-row:last-child input.key {
5273     border-bottom-left-radius: 0;
5274     border-bottom-right-radius: 4px;
5275 }
5276
5277 .inspector-hover .more-fields {
5278     max-height: 0;
5279     margin-bottom: -10px;
5280 }
5281
5282 /* Unstyle button fields */
5283 .inspector-hover .form-field-input-radio label.active,
5284 .inspector-hover .entity-editor-pane a.hide-toggle {
5285     opacity: 1;
5286     background-color: transparent;
5287     color: #666;
5288     padding-left: 0;
5289     border-width: 0;
5290 }
5291 .inspector-hover .form-field-input-radio button.active {
5292     padding-left: 10px;
5293 }
5294
5295 /* Show placeholder on hover for radio buttons */
5296 .inspector-hover .form-field-input-radio {
5297     border: 1px solid #ccc;
5298     border-top: 0;
5299     border-radius: 0 0 4px 4px;
5300 }
5301 .inspector-hover .form-field-input-radio .placeholder {
5302     opacity: 1;
5303     color: #666;
5304     padding: 5px 10px;
5305     line-height: 20px;
5306     width: 100%;
5307     border: 0;
5308 }
5309 .inspector-hover .form-field-input-radio .structure-extras-wrap {
5310     border: 0;