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