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