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