Update to iD v1.6.1
[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 /* tiles */
165 img.tile {
166     position:absolute;
167     transform-origin:0 0;
168     -ms-transform-origin:0 0;
169     -webkit-transform-origin:0 0;
170     -moz-transform-origin:0 0;
171     -o-transform-origin:0 0;
172
173     opacity: 0;
174
175     -webkit-transition: opacity 200ms linear;
176     transition: opacity 200ms linear;
177     -moz-transition: opacity 200ms linear;
178 }
179
180 img.tile-loaded {
181     opacity: 1;
182 }
183 img.tile-removing {
184     opacity: 0;
185 }
186
187 /* base styles */
188 path {
189     fill: none;
190 }
191
192 use {
193     pointer-events: none;
194 }
195
196 g.point .shadow,
197 g.vertex .shadow,
198 g.midpoint .shadow {
199     pointer-events: all;
200 }
201
202 path.shadow {
203     pointer-events: stroke;
204 }
205
206 .shadow {
207     -webkit-transition: 200ms;
208        -moz-transition: 200ms;
209             transition: 200ms;
210 }
211
212 /* points */
213
214 g.point .stroke {
215     stroke: #444;
216     stroke-width: 1;
217     fill: #fff;
218 }
219
220 g.point .shadow {
221     fill: none;
222     stroke: #f6634f;
223     stroke-width: 8;
224     stroke-opacity: 0;
225 }
226
227 g.point.hover:not(.selected) .shadow {
228     stroke-opacity: 0.5;
229 }
230
231 g.point.selected .shadow {
232     stroke-opacity: 0.7;
233 }
234
235 g.point.active, g.point.active * {
236     pointer-events: none;
237 }
238
239 /* vertices and midpoints */
240
241 g.vertex .fill {
242     fill: #000;
243 }
244
245 g.vertex .stroke {
246     stroke: #666;
247     stroke-width: 1;
248     fill: white;
249 }
250
251 g.vertex.shared .stroke {
252     fill: #aaa;
253 }
254
255 g.midpoint .fill {
256     fill: #eee;
257     stroke: #444;
258     stroke-opacity: .6;
259     opacity: .7;
260 }
261
262 g.midpoint.tag-highway-pedestrian .fill,
263 g.midpoint.tag-highway-steps .fill,
264 g.midpoint.tag-highway-path .fill,
265 g.midpoint.tag-highway-footway .fill,
266 g.midpoint.tag-highway-cycleway .fill,
267 g.midpoint.tag-highway-bridleway .fill {
268     fill: #fff;
269     stroke: #333;
270     stroke-opacity: .8;
271     opacity: .8;
272 }
273
274 g.vertex .shadow,
275 g.midpoint .shadow {
276     fill: #f6634f;
277     fill-opacity: 0;
278 }
279
280 g.vertex.vertex-hover {
281     display: none;
282 }
283
284 .mode-draw-area g.vertex.vertex-hover,
285 .mode-draw-line g.vertex.vertex-hover,
286 .mode-add-area  g.vertex.vertex-hover,
287 .mode-add-line  g.vertex.vertex-hover,
288 .mode-add-point g.vertex.vertex-hover,
289 .mode-drag-node g.vertex.vertex-hover {
290     display: block;
291 }
292
293 g.vertex.hover:not(.selected) .shadow,
294 g.midpoint.hover:not(.selected) .shadow {
295     fill-opacity: 0.3;
296 }
297
298 g.vertex.selected .shadow {
299     fill-opacity: 0.5;
300 }
301
302 .mode-draw-area g.midpoint,
303 .mode-draw-line g.midpoint,
304 .mode-add-area g.midpoint,
305 .mode-add-line g.midpoint,
306 .mode-add-point g.midpoint {
307   display: none;
308 }
309
310 /* lines */
311
312 path.line {
313     stroke-linecap: round;
314     stroke-linejoin: bevel;
315 }
316
317 path.stroke {
318     stroke: black;
319     stroke-width: 4;
320 }
321
322 path.shadow {
323     stroke: #f6634f;
324     stroke-width: 10;
325     stroke-opacity: 0;
326 }
327
328 path.shadow.hover:not(.selected) {
329     stroke-opacity: 0.3;
330 }
331
332 path.shadow.selected {
333     stroke-opacity: 0.7;
334 }
335
336 path.line.stroke {
337     stroke: white;
338     stroke-width: 2;
339 }
340
341 path.area.stroke {
342     stroke: white;
343     stroke-width: 1;
344 }
345 path.area.fill {
346     fill: rgba(255, 255, 255, 0.3);
347     fill-rule: evenodd;
348 }
349 .preset-icon-fill-area {
350     border: 1px solid rgb(170, 170, 170);
351     background-color: rgba(170, 170, 170, 0.3);
352 }
353
354 path.stroke.tag-natural {
355     stroke: rgb(182, 225, 153);
356 }
357 path.fill.tag-natural {
358     fill: rgba(182, 225, 153, 0.3);
359 }
360 .preset-icon-fill-area.tag-natural {
361     border-color: rgb(182, 225, 153);
362     background-color: rgba(182, 225, 153, 0.3);
363 }
364
365 path.stroke.tag-natural-water {
366     stroke: rgb(119, 211, 222);
367 }
368 path.fill.tag-natural-water {
369     fill: rgba(119, 211, 222, 0.3);
370 }
371 .preset-icon-fill-area.tag-natural-water {
372     border-color: rgb(119, 211, 222);
373     background-color: rgba(119, 211, 222, 0.3);
374 }
375
376 path.stroke.tag-amenity-childcare,
377 path.stroke.tag-amenity-kindergarten,
378 path.stroke.tag-amenity-school,
379 path.stroke.tag-amenity-college,
380 path.stroke.tag-amenity-university {
381     stroke: rgb(255, 255, 148);
382 }
383 path.fill.tag-amenity-childcare,
384 path.fill.tag-amenity-kindergarten,
385 path.fill.tag-amenity-school,
386 path.fill.tag-amenity-college,
387 path.fill.tag-amenity-university {
388     fill: rgba(255, 255, 148, 0.15);
389 }
390 .preset-icon-fill-area.tag-amenity-childcare,
391 .preset-icon-fill-area.tag-amenity-kindergarten,
392 .preset-icon-fill-area.tag-amenity-school,
393 .preset-icon-fill-area.tag-amenity-college,
394 .preset-icon-fill-area.tag-amenity-university {
395     border-color: rgb(255, 255, 148);
396     background-color: rgba(255, 255, 148, 0.15);
397 }
398
399 path.stroke.tag-landuse,
400 path.stroke.tag-natural-wood,
401 path.stroke.tag-natural-tree,
402 path.stroke.tag-natural-grassland,
403 path.stroke.tag-natural-grass,
404 path.stroke.tag-leisure-pitch,
405 path.stroke.tag-leisure-park {
406     stroke: rgb(140, 208, 95);
407 }
408 path.fill.tag-landuse,
409 path.fill.tag-natural-wood,
410 path.fill.tag-natural-tree,
411 path.fill.tag-natural-grassland,
412 path.fill.tag-natural-grass,
413 path.fill.tag-leisure-pitch,
414 path.fill.tag-leisure-park {
415     fill: rgba(140, 208, 95, 0.2);
416 }
417 .preset-icon-fill-area.tag-landuse,
418 .preset-icon-fill-area.tag-natural-wood,
419 .preset-icon-fill-area.tag-natural-tree,
420 .preset-icon-fill-area.tag-natural-grassland,
421 .preset-icon-fill-area.tag-natural-grass,
422 .preset-icon-fill-area.tag-leisure-pitch,
423 .preset-icon-fill-area.tag-leisure-park {
424     border-color: rgb(140, 208, 95);
425     background-color: rgba(140, 208, 95, 0.2);
426 }
427
428 path.fill.tag-landuse-residential,
429 path.fill.tag-landuse-retail,
430 path.fill.tag-landuse-commercial,
431 path.fill.tag-landuse-industrial {
432     fill: none;
433     stroke-width: 60px;
434 }
435
436 path.stroke.tag-landuse-residential {
437     stroke: rgb(196, 189, 25);
438 }
439 path.fill.tag-landuse-residential {
440     stroke: rgba(196, 189, 25, 0.3);
441 }
442 .preset-icon-fill-area.tag-landuse-residential {
443     border-color: rgb(196, 189, 25);
444     background: none;
445     box-shadow: inset 0 0 0 5px rgba(196, 189, 25, 0.3);
446 }
447
448 path.stroke.tag-landuse-retail,
449 path.stroke.tag-landuse-commercial {
450     stroke: rgb(214, 136, 26);
451 }
452 path.fill.tag-landuse-retail,
453 path.fill.tag-landuse-commercial {
454     stroke: rgba(214, 136, 26, 0.3);
455 }
456 .preset-icon-fill-area.tag-landuse-retail,
457 .preset-icon-fill-area.tag-landuse-commercial {
458     border-color: rgb(214, 136, 26);
459     background: none;
460     box-shadow: inset 0 0 0 5px rgba(214, 136, 26, 0.3);
461 }
462
463 path.stroke.tag-landuse-industrial {
464     stroke: rgb(228, 164, 245);
465 }
466 path.fill.tag-landuse-industrial {
467     stroke: rgba(228, 164, 245, 0.3);
468 }
469 .preset-icon-fill-area.tag-landuse-industrial {
470     border-color: rgb(228, 164, 245);
471     background: none;
472     box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3);
473 }
474
475 path.stroke.tag-landuse-basin,
476 path.stroke.tag-landuse-reservoir {
477     stroke: rgb(119, 211, 222);
478 }
479 path.fill.tag-landuse-basin,
480 path.fill.tag-landuse-reservoir {
481     fill: rgba(119, 211, 222, 0.3);
482 }
483 .preset-icon-fill-area.tag-landuse-basin,
484 .preset-icon-fill-area.tag-landuse-reservoir {
485     border-color: rgb(119, 211, 222);
486     background-color: rgba(119, 211, 222, 0.3);
487 }
488
489 path.stroke.tag-landuse-quarry {
490     stroke: rgb(166, 149, 123);
491 }
492 path.fill.tag-landuse-quarry {
493     fill: rgba(166, 149, 123, 0.2);
494 }
495 .preset-icon-fill-area.tag-landuse-quarry {
496     border-color: rgb(166, 149, 123);
497     background-color: rgba(166, 149, 123, 0.2);
498 }
499
500 path.stroke.tag-landuse-landfill {
501     stroke: rgb(255, 153, 51);
502 }
503 path.fill.tag-landuse-landfill {
504     fill: rgba(255, 153, 51, 0.2);
505 }
506 .preset-icon-fill-area.tag-landuse-landfill {
507     border-color: rgb(255, 153, 51);
508     background-color: rgba(255, 153, 51, 0.2);
509 }
510
511 path.stroke.tag-landuse-construction {
512     stroke: rgb(196, 189, 25);
513 }
514 .pattern-color-construction {
515     fill: rgba(196, 189, 25, 0.2);
516 }
517 .preset-icon-fill-area.tag-landuse-construction {
518     border-color: rgb(196, 189, 25);
519     background-color: rgba(196, 189, 25, 0.2);
520 }
521
522 path.stroke.tag-landuse-military {
523     stroke: rgb(214, 136, 26);
524 }
525 .preset-icon-fill-area.tag-landuse-military {
526     border-color: rgb(214, 136, 26);
527     background-color: rgba(214, 136, 26, 0.2);
528 }
529
530 path.stroke.tag-natural-wetland {
531     stroke: rgb(182, 225, 153);
532 }
533 .pattern-color-wetland {
534     fill: rgba(182, 225, 153, 0.2);
535 }
536 .preset-icon-fill-area.tag-natural-wetland {
537     border-color: rgb(182, 225, 153);
538     background-color: rgba(182, 225, 153, 0.2);
539 }
540
541 path.stroke.tag-landuse-meadow {
542     stroke: rgb(182, 225, 153);
543 }
544 .pattern-color-meadow {
545     fill: rgba(182, 225, 153, 0.2);
546 }
547 .preset-icon-fill-area.tag-landuse-meadow {
548     border-color: rgb(182, 225, 153);
549     background-color: rgba(182, 225, 153, 0.2);
550 }
551
552 path.stroke.tag-natural-beach {
553     stroke: rgb(255, 255, 126);
554 }
555 .pattern-color-beach {
556     fill: rgba(255, 255, 126, 0.2);
557 }
558 .preset-icon-fill-area.tag-natural-beach {
559     border-color: rgb(255, 255, 126);
560     background-color: rgba(255, 255, 126, 0.2);
561 }
562
563 path.stroke.tag-natural-scrub {
564     stroke: rgb(219, 240, 139);
565 }
566 .pattern-color-scrub {
567     fill: rgba(219, 240, 139, 0.2);
568 }
569 .preset-icon-fill-area.tag-natural-scrub {
570     border-color: rgb(219, 240, 139);
571     background-color: rgba(219, 240, 139, 0.2);
572 }
573
574 .pattern-color-farm,
575 .pattern-color-farmland {
576     fill: rgba(140, 208, 95, 0.2);
577 }
578 .preset-icon-fill-area.tag-landuse-farm,
579 .preset-icon-fill-area.tag-landuse-farmland {
580     background-color: rgba(140, 208, 95, 0.2);
581 }
582
583 .pattern-color-cemetery {
584     fill: rgba(140, 208, 95, 0.2)
585 }
586 .preset-icon-fill-area.tag-landuse-cemetery {
587     background-color: rgba(140, 208, 95, 0.2);
588 }
589
590 .pattern-color-orchard {
591     fill: rgba(140, 208, 95, 0.2)
592 }
593 .preset-icon-fill-area.tag-landuse-orchard {
594     background-color: rgba(140, 208, 95, 0.8);
595 }
596
597 path.stroke.tag-amenity-parking {
598     stroke: rgb(170, 170, 170);
599 }
600 path.fill.tag-amenity-parking {
601     fill: rgba(170, 170, 170, 0.3);
602 }
603 .preset-icon-fill-area.tag-amenity-parking {
604     border-color: rgb(170, 170, 170);
605     background-color: rgba(170, 170, 170, 0.3);
606 }
607
608 path.fill.tag-place,
609 path.fill.tag-boundary {
610     fill: none;
611 }
612
613 /* highways */
614
615 path.shadow.tag-highway {
616     stroke-width:16;
617 }
618 path.casing.tag-highway {
619     stroke:#444;
620     stroke-width:10;
621 }
622 path.stroke.tag-highway {
623     stroke:#ccc;
624     stroke-width:8;
625 }
626
627 .low-zoom path.shadow.tag-highway {
628     stroke-width:12;
629 }
630 .low-zoom path.casing.tag-highway {
631     stroke-width:6;
632 }
633 .low-zoom path.stroke.tag-highway {
634     stroke-width:4;
635 }
636
637 path.stroke.tag-highway-motorway,
638 path.stroke.tag-highway-motorway_link,
639 path.stroke.tag-construction-motorway {
640     stroke:#58a9ed;
641 }
642
643 path.casing.tag-highway-motorway,
644 path.casing.tag-highway-motorway_link,
645 path.casing.tag-construction-motorway {
646     stroke:#2c5476;
647 }
648
649 path.stroke.tag-highway-trunk,
650 path.stroke.tag-highway-trunk_link,
651 path.stroke.tag-construction-trunk {
652     stroke:#8cd05f;
653 }
654 path.casing.tag-highway-trunk,
655 path.casing.tag-highway-trunk_link,
656 path.casing.tag-construction-trunk {
657     stroke:#46682f;
658 }
659
660 path.stroke.tag-highway-primary,
661 path.stroke.tag-highway-primary_link,
662 path.stroke.tag-construction-primary {
663     stroke:#e06d5f;
664 }
665 path.casing.tag-highway-primary,
666 path.casing.tag-highway-primary_link,
667 path.casing.tag-construction-primary {
668     stroke:#70372f;
669 }
670
671 path.stroke.tag-highway-secondary,
672 path.stroke.tag-highway-secondary_link,
673 path.stroke.tag-construction-secondary {
674     stroke:#eab056;
675 }
676 path.casing.tag-highway-secondary,
677 path.casing.tag-highway-secondary_link,
678 path.casing.tag-construction-secondary {
679     stroke:#75582b;
680 }
681
682 path.stroke.tag-highway-tertiary,
683 path.stroke.tag-highway-tertiary_link,
684 path.stroke.tag-construction-tertiary {
685     stroke:#ffff7e;
686 }
687 path.casing.tag-highway-tertiary,
688 path.casing.tag-highway-tertiary_link,
689 path.casing.tag-construction-tertiary {
690     stroke:#7f7f3f;
691 }
692
693 path.stroke.tag-highway-unclassified,
694 path.stroke.tag-construction-unclassified {
695     stroke:#eaeaea;
696 }
697 path.casing.tag-highway-unclassified,
698 path.casing.tag-construction-unclassified {
699     stroke:#444;
700 }
701
702 path.stroke.tag-highway-residential,
703 path.stroke.tag-construction-residential {
704     stroke:#fff;
705 }
706 path.casing.tag-highway-residential,
707 path.casing.tag-construction-residential {
708     stroke:#444;
709 }
710
711 path.stroke.tag-highway-living_street {
712     stroke:#ccc;
713     stroke-width:4;
714 }
715 path.casing.tag-highway-living_street {
716     stroke:#fff;
717     stroke-width:6;
718 }
719
720 path.stroke.line.tag-highway-pedestrian {
721     stroke:#fff;
722     stroke-dasharray: 2, 8;
723     stroke-width:4 !important;
724     shapeRendering: auto;
725 }
726 path.casing.line.tag-highway-pedestrian {
727     stroke:#8cd05f;
728     stroke-width:6 !important;
729 }
730 path.stroke.area.tag-highway-pedestrian {
731     stroke:#fff;
732     stroke-width: 2;
733 }
734
735 path.stroke.tag-highway-service {
736     stroke:#fff;
737     stroke-width:4;
738 }
739 path.casing.tag-highway-service {
740     stroke:#666;
741     stroke-width:6;
742 }
743 .low-zoom path.stroke.tag-highway-service {
744     stroke-width:2;
745 }
746 .low-zoom path.casing.tag-highway-service {
747     stroke-width:4;
748 }
749
750 path.stroke.tag-highway-track {
751     stroke: #fff;
752     stroke-width: 4;
753 }
754 path.casing.tag-highway-track {
755     stroke: #996600;
756     stroke-width: 6;
757     stroke-linecap: butt;
758     stroke-dasharray: 6, 6;
759 }
760 .low-zoom path.stroke.tag-highway-track {
761     stroke-width:2;
762 }
763 .low-zoom path.casing.tag-highway-track {
764     stroke-width:4;
765 }
766
767 path.stroke.tag-highway-path {
768     stroke: #000;
769     stroke-width: 1 !important;
770     stroke-linecap: butt;
771     stroke-dasharray: 8, 4;
772 }
773 path.casing.tag-highway-path {
774     stroke-width: 1 !important;
775     stroke: #fff;
776 }
777
778 path.stroke.tag-highway-footway,
779 path.stroke.tag-highway-cycleway,
780 path.stroke.tag-highway-bridleway {
781     stroke-width: 4;
782     stroke-linecap: butt;
783     stroke-dasharray: 6, 6;
784 }
785 path.casing.tag-highway-footway,
786 path.casing.tag-highway-cycleway,
787 path.casing.tag-highway-bridleway {
788     stroke-width: 6;
789     stroke: #fff;
790 }
791
792 .low-zoom path.stroke.tag-highway-footway,
793 .low-zoom path.stroke.tag-highway-cycleway,
794 .low-zoom path.stroke.tag-highway-bridleway {
795     stroke-width: 2;
796 }
797 .low-zoom path.casing.tag-highway-footway,
798 .low-zoom path.casing.tag-highway-cycleway,
799 .low-zoom path.casing.tag-highway-bridleway {
800     stroke-width: 4;
801 }
802
803 path.stroke.tag-highway-footway {
804     stroke: #ae8681;
805 }
806 path.stroke.tag-highway-cycleway {
807     stroke: #58a9ed;
808 }
809 path.stroke.tag-highway-bridleway {
810     stroke: #e06d5f;
811 }
812
813 path.stroke.tag-highway-steps {
814     stroke: #81d25c;
815     stroke-width: 4;
816     stroke-linecap: butt;
817     stroke-dasharray: 3, 3;
818 }
819 path.casing.tag-highway-steps {
820     stroke-width: 6;
821     stroke: #fff;
822 }
823
824 /* aeroways */
825
826 path.stroke.tag-aeroway-taxiway {
827     stroke: #805C80;
828     stroke-width: 4;
829 }
830 path.shadow.tag-aeroway-runway {
831     stroke-width: 20;
832 }
833 path.stroke.tag-aeroway-runway {
834     stroke: #fff;
835     stroke-width: 2;
836     stroke-linecap: butt;
837     stroke-dasharray: 24, 48;
838 }
839 path.casing.tag-aeroway-runway {
840     stroke-width: 10;
841     stroke: #000;
842     stroke-linecap: square;
843 }
844 path.fill.tag-aeroway-runway {
845     fill: rgba(0, 0, 0, 0.6);
846 }
847 path.stroke.tag-aeroway-apron {
848     stroke: #805C80;
849 }
850 path.fill.tag-aeroway-apron {
851     fill: rgba(128, 92, 128, 0.2);
852 }
853
854
855 /* railways */
856
857 path.stroke.tag-railway {
858     stroke: #eee;
859     stroke-width: 2;
860     stroke-linecap: butt;
861     stroke-dasharray: 12,12;
862 }
863
864 path.casing.tag-railway {
865     stroke: #555;
866     stroke-width: 4;
867 }
868
869 path.stroke.tag-railway-abandoned {
870     stroke: #eee;
871 }
872 path.casing.tag-railway-abandoned {
873     stroke: #999;
874 }
875
876 path.stroke.tag-railway-subway {
877     stroke: #666;
878 }
879 path.casing.tag-railway-subway {
880     stroke: #222;
881 }
882
883 path.stroke.tag-railway-platform {
884     stroke: #999;
885     stroke-width: 4;
886     stroke-dasharray: none;
887 }
888 path.casing.tag-railway-platform {
889     stroke: none;
890 }
891
892 .area.stroke.tag-railway {
893     stroke: white;
894     stroke-width: 1;
895     stroke-dasharray: none;
896 }
897 .area.casing.tag-railway {
898     stroke: none;
899 }
900
901 /* waterways */
902
903 path.fill.tag-waterway {
904     fill: rgba(119, 211, 222, 0.3);
905 }
906
907 path.stroke.tag-waterway {
908     stroke: #77d3de;
909     stroke-width: 2;
910 }
911 path.casing.tag-waterway {
912     stroke: #77d3de;
913     stroke-width: 4;
914 }
915
916 path.stroke.tag-waterway-river {
917     stroke-width: 4;
918 }
919 path.casing.tag-waterway-river {
920     stroke-width: 6;
921 }
922
923 path.stroke.tag-waterway-ditch {
924     stroke: #6591ff;
925     stroke-width: 1;
926 }
927 path.casing.tag-waterway-ditch {
928     stroke: #6591ff;
929     stroke-width: 3;
930 }
931
932 /* power */
933
934 path.stroke.tag-power {
935     stroke: #939393;
936     stroke-width: 2;
937 }
938 path.casing.tag-power {
939     stroke: none;
940 }
941
942 /* boundary */
943
944 path.stroke.tag-boundary {
945     stroke: #fff;
946     stroke-width: 2;
947     stroke-linecap: butt;
948     stroke-dasharray: 20, 5, 5, 5;
949 }
950 path.casing.tag-boundary {
951     stroke: #82B5FE;
952     stroke-width: 6;
953 }
954
955 path.casing.tag-boundary-protected_area,
956 path.casing.tag-boundary-national_park {
957     stroke: #b0e298;
958 }
959
960
961 /* bridges */
962
963 path.casing.tag-bridge {
964     stroke-width: 16;
965     stroke-opacity: 0.6;
966     stroke: #000;
967     stroke-linecap: butt;
968 }
969
970 path.shadow.tag-bridge {
971     stroke-width: 22;
972 }
973
974 path.casing.line.tag-railway.tag-bridge,
975 path.casing.tag-highway-living_street.tag-bridge,
976 path.casing.tag-highway-path.tag-bridge,
977 path.casing.line.tag-highway-pedestrian.tag-bridge,
978 path.casing.tag-highway-service.tag-bridge,
979 path.casing.tag-highway-track.tag-bridge,
980 path.casing.tag-highway-steps.tag-bridge,
981 path.casing.tag-highway-footway.tag-bridge,
982 path.casing.tag-highway-cycleway.tag-bridge,
983 path.casing.tag-highway-bridleway.tag-bridge {
984     stroke-width: 10;
985 }
986
987 path.shadow.line.tag-railway.tag-bridge,
988 path.shadow.tag-highway-living_street.tag-bridge,
989 path.shadow.tag-highway-path.tag-bridge,
990 path.shadow.line.tag-highway-pedestrian.tag-bridge,
991 path.shadow.tag-highway-service.tag-bridge,
992 path.shadow.tag-highway-track.tag-bridge,
993 path.shadow.tag-highway-steps.tag-bridge,
994 path.shadow.tag-highway-footway.tag-bridge,
995 path.shadow.tag-highway-cycleway.tag-bridge,
996 path.shadow.tag-highway-bridleway.tag-bridge {
997     stroke-width: 17;
998 }
999
1000
1001 .low-zoom path.casing.tag-bridge {
1002     stroke-width: 10;
1003     stroke-opacity: 0.6;
1004     stroke: #000;
1005     stroke-linecap: butt;
1006 }
1007
1008 .low-zoom path.shadow.tag-bridge {
1009     stroke-width: 14;
1010 }
1011
1012 .low-zoom path.casing.line.tag-railway.tag-bridge,
1013 .low-zoom path.casing.tag-highway-living_street.tag-bridge,
1014 .low-zoom path.casing.tag-highway-path.tag-bridge,
1015 .low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge,
1016 .low-zoom path.casing.tag-highway-service.tag-bridge,
1017 .low-zoom path.casing.tag-highway-track.tag-bridge,
1018 .low-zoom path.casing.tag-highway-steps.tag-bridge,
1019 .low-zoom path.casing.tag-highway-footway.tag-bridge,
1020 .low-zoom path.casing.tag-highway-cycleway.tag-bridge,
1021 .low-zoom path.casing.tag-highway-bridleway.tag-bridge {
1022     stroke-width: 6;
1023 }
1024
1025 .low-zoom path.shadow.line.tag-railway.tag-bridge,
1026 .low-zoom path.shadow.tag-highway-living_street.tag-bridge,
1027 .low-zoom path.shadow.tag-highway-path.tag-bridge,
1028 .low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge,
1029 .low-zoom path.shadow.tag-highway-service.tag-bridge,
1030 .low-zoom path.shadow.tag-highway-track.tag-bridge,
1031 .low-zoom path.shadow.tag-highway-steps.tag-bridge,
1032 .low-zoom path.shadow.tag-highway-footway.tag-bridge,
1033 .low-zoom path.shadow.tag-highway-cycleway.tag-bridge,
1034 .low-zoom path.shadow.tag-highway-bridleway.tag-bridge {
1035     stroke-width: 13;
1036 }
1037
1038
1039
1040 /* tunnels */
1041
1042 path.stroke.tag-tunnel {
1043     stroke-opacity: 0.3;
1044 }
1045
1046 path.casing.tag-tunnel {
1047     stroke-opacity: 0.5;
1048 }
1049
1050 /* embankments / cuttings */
1051
1052 path.casing.tag-embankment,
1053 path.casing.tag-cutting {
1054     stroke-opacity: 0.5;
1055     stroke: #000;
1056     stroke-width: 22;
1057     stroke-dasharray: 2, 4;
1058     stroke-linecap: butt;
1059 }
1060
1061 path.shadow.tag-embankment,
1062 path.shadow.tag-cutting {
1063     stroke-width: 28;
1064 }
1065
1066 .low-zoom path.casing.tag-embankment,
1067 .low-zoom path.casing.tag-cutting {
1068     stroke-width: 10;
1069 }
1070
1071 .low-zoom path.shadow.tag-embankment,
1072 .low-zoom path.shadow.tag-cutting {
1073     stroke-width: 14;
1074 }
1075
1076
1077 /* construction */
1078
1079 path.stroke.tag-highway-construction,
1080 path.casing.tag-highway-construction {
1081     stroke-linecap: butt;
1082     stroke-dasharray: 7, 7;
1083 }
1084
1085 .low-zoom path.stroke.tag-highway-construction,
1086 .low-zoom path.casing.tag-highway-construction {
1087     stroke-linecap: butt;
1088     stroke-dasharray: 5, 5;
1089 }
1090
1091 text {
1092     font-size:10px;
1093     pointer-events: none;
1094     color: #222;
1095     opacity: 1;
1096 }
1097
1098 .oneway .textpath.tag-waterway {
1099     fill: #002F35;
1100 }
1101
1102 marker#oneway-marker path {
1103     fill:#000;
1104     opacity: .5;
1105 }
1106
1107 path.oneway {
1108     stroke-width: 6px;
1109 }
1110
1111 /* Buildings */
1112
1113 path.stroke.tag-building,
1114 path.stroke.tag-amenity-shelter {
1115     stroke: rgb(224, 110, 95);
1116 }
1117 path.fill.tag-building,
1118 path.fill.tag-amenity-shelter {
1119     fill: rgba(224, 110, 95, 0.3);
1120 }
1121 .preset-icon-fill-area.tag-building,
1122 .preset-icon-fill-area.tag-amenity-shelter {
1123     border-color: rgb(224, 110, 95);
1124     background-color: rgba(224, 110, 95, 0.3);
1125 }
1126
1127
1128 /*
1129  * Labels
1130  */
1131
1132 text.arealabel-halo,
1133 text.linelabel-halo,
1134 text.pointlabel-halo,
1135 text.arealabel,
1136 text.linelabel,
1137 text.pointlabel {
1138     font-size: 12px;
1139     font-weight: bold;
1140     fill: #333;
1141     text-anchor: middle;
1142     pointer-events: none;
1143     -webkit-transition: opacity 100ms linear;
1144     transition: opacity 100ms linear;
1145     -moz-transition: opacity 100ms linear;
1146 }
1147
1148 .linelabel-halo .textpath,
1149 .linelabel .textpath {
1150   dominant-baseline: middle;
1151 }
1152
1153 /* Opera doesn't support dominant-baseline. See #715 */
1154 .opera .linelabel-halo .textpath,
1155 .opera .linelabel .textpath {
1156   baseline-shift: -33%;
1157   dominant-baseline: auto;
1158 }
1159
1160 .layer-halo text {
1161     opacity: 0.7;
1162     stroke: #fff;
1163     stroke-width: 5px;
1164     stroke-miterlimit: 1;
1165 }
1166
1167 text.proximate {
1168     opacity: 0;
1169 }
1170
1171 text.point {
1172   font-size: 10px;
1173 }
1174
1175 /* Turns */
1176
1177 g.turn rect,
1178 g.turn circle {
1179     fill: none;
1180     pointer-events: all;
1181 }
1182
1183 .form-field-restrictions .vertex {
1184     pointer-events: none;
1185     cursor: auto !important;
1186 }
1187
1188 /* Cursors */
1189
1190 #map {
1191     cursor: auto; /* Opera */
1192     cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
1193 }
1194
1195 .mode-browse .point,
1196 .mode-select .point {
1197     cursor: pointer; /* Opera */
1198     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
1199 }
1200
1201 .mode-select .vertex,
1202 .mode-browse .vertex {
1203     cursor: pointer; /* Opera */
1204     cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
1205 }
1206
1207 .mode-browse .line,
1208 .mode-select .line {
1209     cursor: pointer; /* Opera */
1210     cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
1211 }
1212
1213 .mode-select .area,
1214 .mode-browse .area {
1215     cursor: pointer; /* Opera */
1216     cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
1217 }
1218
1219 .mode-select .midpoint,
1220 .mode-browse .midpoint {
1221     cursor: pointer; /* Opera */
1222     cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
1223 }
1224
1225 .mode-select .behavior-multiselect .point,
1226 .mode-select .behavior-multiselect .vertex,
1227 .mode-select .behavior-multiselect .line,
1228 .mode-select .behavior-multiselect .area {
1229     cursor: pointer; /* Opera */
1230     cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
1231 }
1232
1233 .mode-select .behavior-multiselect .selected {
1234     cursor: pointer; /* Opera */
1235     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
1236 }
1237
1238 #map .point:active,
1239 #map .vertex:active,
1240 #map .line:active,
1241 #map .area:active,
1242 #map .midpoint:active,
1243 #map .mode-select .selected {
1244     cursor: pointer; /* Opera */
1245     cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */
1246 }
1247
1248 .mode-draw-line #map,
1249 .mode-draw-area #map,
1250 .mode-add-line  #map,
1251 .mode-add-area  #map,
1252 .mode-drag-node #map {
1253     cursor: crosshair; /* Opera */
1254     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1255 }
1256
1257 .mode-draw-line .way.hover,
1258 .mode-draw-area .way.hover,
1259 .mode-add-line  .way.hover,
1260 .mode-add-area  .way.hover,
1261 .mode-drag-node .way.hover {
1262     cursor: crosshair; /* Opera */
1263     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
1264 }
1265
1266 .mode-draw-line .vertex.hover,
1267 .mode-draw-area .vertex.hover,
1268 .mode-add-line  .vertex.hover,
1269 .mode-add-area  .vertex.hover,
1270 .mode-drag-node .vertex.hover {
1271     cursor: crosshair; /* Opera */
1272     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
1273 }
1274
1275 .mode-add-point #map,
1276 .lasso #map,
1277 .lasso .way,
1278 .lasso .vertex {
1279     cursor: crosshair; /* Opera */
1280     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1281 }
1282
1283 .turn rect,
1284 .turn circle {
1285     cursor: pointer; /* Opera */
1286     cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
1287 }
1288
1289 .lasso #map {
1290     pointer-events: visibleStroke;
1291 }
1292
1293 /* GPX Paths */
1294 path.gpx {
1295     stroke: #FF26D4;
1296     stroke-width: 2;
1297     fill: none;
1298     pointer-events: none;
1299 }
1300
1301 /* GPS Labels */
1302 text.gpx {
1303     fill:#FF26D4;
1304 }
1305
1306 /* Mapillary Layer */
1307
1308 .layer-mapillary {
1309     pointer-events: none;
1310 }
1311
1312 .layer-mapillary g {
1313     pointer-events: visible;
1314     cursor: pointer; /* Opera */
1315     cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */
1316 }
1317
1318 .layer-mapillary g * {
1319     stroke-width: 2;
1320     stroke: #ffc600;
1321     fill: #ffc600;
1322 }
1323
1324 .layer-mapillary g:hover * {
1325     stroke-width: 2;
1326     stroke: #ff9900;
1327     fill: #ff9900;
1328 }
1329
1330 .layer-mapillary g.selected * {
1331     stroke-width: 4;
1332     stroke: #ff5800;
1333     fill: #ff5800;
1334 }
1335
1336 /* Modes */
1337
1338 .mode-draw-line .vertex.active,
1339 .mode-draw-area .vertex.active,
1340 .mode-drag-node .vertex.active {
1341     display: none;
1342 }
1343
1344 .mode-draw-line .way.active,
1345 .mode-draw-area .way.active,
1346 .mode-drag-node .active {
1347     pointer-events: none;
1348 }
1349
1350 /* Ensure drawing doesn't interact with area fills. */
1351 .mode-add-point .area.fill,
1352 .mode-draw-line .area.fill,
1353 .mode-draw-area .area.fill,
1354 .mode-add-line .area.fill,
1355 .mode-add-area .area.fill,
1356 .mode-drag-node .area.fill {
1357     pointer-events: none;
1358 }
1359 /* Basics
1360 ------------------------------------------------------- */
1361
1362 /*
1363   Opera misbehaves when the window is resized vertically unless 100% width + height are
1364   applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
1365 */
1366 html, body {
1367     width: 100%;
1368     height: 100%;
1369 }
1370
1371 body {
1372     font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif;
1373     margin:0;
1374     padding:0;
1375     min-width: 768px;
1376     color:#333;
1377     overflow: hidden;
1378 }
1379
1380 .unsupported {
1381     text-align: center;
1382     vertical-align: middle;
1383     padding-top: 100px;
1384     font-size: 15px;
1385 }
1386
1387 .id-container {
1388     height: 100%;
1389     width: 100%;
1390     position: fixed;
1391     min-width: 768px;
1392 }
1393
1394 #content {
1395     position: relative;
1396     overflow: hidden;
1397     height: 100%;
1398 }
1399
1400 #defs {
1401     /* Can't be display: none or the clippaths are ignored. */
1402     position: absolute;
1403     width: 0;
1404     height: 0;
1405 }
1406
1407 .spacer {
1408     height: 40px;
1409     margin-right: 10px;
1410 }
1411
1412 .limiter {
1413     position: relative;
1414     max-width: 1200px;
1415 }
1416
1417 .spinner {
1418     opacity: .5;
1419 }
1420
1421 .spinner img {
1422     position: absolute;
1423     height: 40px;
1424     width: 40px;
1425     right: 10px;
1426     top: 10px;
1427     border-radius: 4px;
1428     margin-right: 10px;
1429     background: black;
1430 }
1431
1432 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
1433     -moz-box-sizing: border-box;
1434     -webkit-box-sizing: border-box;
1435     box-sizing: border-box;
1436 }
1437
1438 a, button, input, textarea {
1439     -webkit-tap-highlight-color:rgba(0,0,0,0);
1440     -webkit-touch-callout:none;
1441 }
1442
1443 a,
1444 button,
1445 .checkselect label:hover,
1446 .opacity-options li,
1447 .radial-menu-item {
1448     cursor: pointer; /* Opera */
1449     cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
1450 }
1451
1452 h2 {
1453     font-size: 25px;
1454     line-height: 1.25;
1455     font-weight: bold;
1456     margin-bottom: 20px;
1457 }
1458
1459 h3:last-child,
1460 h2:last-child,
1461 h4:last-child { margin-bottom: 0;}
1462
1463 h3 {
1464     font-size: 16px;
1465     line-height: 1.25;
1466     font-weight: bold;
1467     margin-bottom: 10px;
1468 }
1469
1470 h4, h5 {
1471     font-size: 12px;
1472     font-weight: bold;
1473     padding-bottom: 10px;
1474 }
1475
1476 :focus {
1477     outline-color: transparent;
1478     outline-style: none;
1479 }
1480
1481 p {
1482     font-size: 12px;
1483     margin:0;
1484     padding:0;
1485 }
1486
1487 p:last-child {
1488     padding-bottom: 0;
1489 }
1490
1491 em {
1492     font-style: italic;
1493 }
1494
1495 strong {
1496     font-weight: bold;
1497 }
1498
1499 a:visited, a {
1500     color: #7092ff;
1501     -webkit-transition: all 100ms;
1502        -moz-transition: all 100ms;
1503          -o-transition: all 100ms;
1504             transition: all 100ms;
1505 }
1506
1507 a:hover {
1508     color:#597be7;
1509 }
1510
1511 /* Forms
1512 ------------------------------------------------------- */
1513
1514 textarea  {
1515     resize: vertical;
1516     font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
1517 }
1518
1519 textarea,
1520 input[type=text],
1521 input[type=search],
1522 input[type=number],
1523 input[type=url],
1524 input[type=tel],
1525 input[type=email] {
1526     background-color: white;
1527     border:1px solid #ccc;
1528     padding:5px 10px;
1529     height:30px;
1530     width: 100%;
1531     border-radius:4px;
1532     text-overflow: ellipsis;
1533     -webkit-transition: all 200ms;
1534        -moz-transition: all 200ms;
1535          -o-transition: all 200ms;
1536             transition: all 200ms;
1537 }
1538
1539 textarea:focus,
1540 input:focus {
1541     background-color: #F1F1F1;
1542 }
1543
1544 input[type="checkbox"],
1545 input[type="radio"] {
1546     float: left;
1547     width: 14px;
1548     height: 14px;
1549     margin-right: 5px;
1550     margin-top: 3px;
1551 }
1552
1553 /* remove bottom border radius when combobox is open */
1554 .combobox + * textarea:focus,
1555 .combobox + * input:focus {
1556     border-bottom-left-radius: 0 !important;
1557     border-bottom-right-radius: 0 !important;
1558 }
1559
1560 /* tables */
1561
1562 table {
1563     background-color: white;
1564     border-collapse: collapse;
1565     width:100%;
1566     border-spacing:0;
1567 }
1568
1569 table th {
1570     text-align:left;
1571 }
1572
1573 table.tags, table.tags td, table.tags th {
1574     border: 1px solid #CCC;
1575     padding: 4px;
1576 }
1577
1578 /* Grid
1579 ------------------------------------------------------- */
1580
1581 .col0    { float:left; width:04.1666%; }
1582 .col1    { float:left; width:08.3333%; }
1583 .col2    { float:left; width:16.6666%; }
1584 .col3    { float:left; width:25.0000%; max-width: 300px; }
1585 .col4    { float:left; width:33.3333%; max-width: 400px; }
1586 .col5    { float:left; width:41.6666%; max-width: 500px; }
1587 .col6    { float:left; width:50.0000%; max-width: 600px; }
1588 .col7    { float:left; width:58.3333%; }
1589 .col8    { float:left; width:66.6666%; }
1590 .col9    { float:left; width:75.0000%; }
1591 .col10   { float:left; width:83.3333%; }
1592 .col11   { float:left; width:91.6666%; }
1593 .col12   { float:left; width:100.0000%; }
1594
1595 /* UI Lists
1596 ------------------------------------------------------- */
1597
1598 ul li { list-style: none;}
1599
1600 .toggle-list > label {
1601     position: relative;
1602     padding: 5px 10px;
1603     display: block;
1604     height: 30px;
1605     background-color: white;
1606     color: #7092FF;
1607     cursor: pointer;
1608        -moz-transition: all 100ms;
1609          -o-transition: all 100ms;
1610             transition: all 100ms;
1611 }
1612
1613 .toggle-list > label:hover {
1614     background-color: #ececec;
1615 }
1616
1617 .toggle-list > label:not(:last-child) {
1618     border-bottom: 1px solid #ccc;
1619 }
1620
1621 .toggle-list > label:last-child {
1622     border-radius: 0 0 3px 3px;
1623 }
1624
1625 .toggle-list label > span {
1626     display: block;
1627     overflow: hidden;
1628     white-space: nowrap;
1629     text-overflow: ellipsis;
1630 }
1631
1632 .toggle-list > label.active {
1633     background: #E8EBFF;
1634 }
1635
1636 .link-list li {
1637     float: right;
1638     border-left: 1px solid rgba(255,255,255,.5);
1639     padding: 5px 0 5px 5px;
1640     margin-left: 5px;
1641 }
1642
1643 ul.link-list li:last-child {
1644     border-left: 0;
1645     margin-left: 0;
1646     padding-left: 0;
1647 }
1648
1649 /* Utility Classes
1650 ------------------------------------------------------- */
1651 .fillL {
1652     background: white;
1653     color: #333;
1654 }
1655
1656 .fillL2 {
1657     background: #f6f6f6;
1658     color: #333;
1659 }
1660
1661 .fillL3 {
1662     background: #ececec;
1663     color: #333;
1664 }
1665
1666 .fillD {
1667     background:rgba(0,0,0,.5);
1668     color: white;
1669 }
1670
1671 .fl { float: left;}
1672 .fr { float: right;}
1673
1674 div.hide,
1675 form.hide,
1676 button.hide,
1677 a.hide {
1678     display: none;
1679 }
1680
1681 .deemphasize {
1682     color: #a9a9a9;
1683 }
1684
1685 .content {
1686     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
1687 }
1688
1689 .loading {
1690     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
1691     background-size:5px 5px;
1692 }
1693
1694 .panewrap {
1695     position:absolute;
1696     width:200%;
1697     height:100%;
1698     right: -100%;
1699 }
1700
1701
1702 .pane {
1703     position:absolute;
1704     width:50%;
1705     top: 0;
1706     bottom: 30px;
1707 }
1708
1709 .pane:first-child {
1710     left: 0;
1711 }
1712
1713 .pane:last-child {
1714     right: 0;
1715 }
1716
1717 /* Buttons */
1718
1719 button {
1720     text-align: center;
1721     line-height:20px;
1722     border:0;
1723     background: white;
1724     font-weight: bold;
1725     color:#333;
1726     font-size:12px;
1727     display: inline-block;
1728     height:40px;
1729     border-radius:4px;
1730     /* Crashes Safari: https://github.com/openstreetmap/iD/issues/1188 */
1731     /*-webkit-transition: all 100ms;*/
1732        -moz-transition: all 100ms;
1733          -o-transition: all 100ms;
1734             transition: all 100ms;
1735 }
1736
1737 button:focus,
1738 button:hover {
1739     background-color: #ececec;
1740 }
1741
1742 button[disabled],
1743 button.disabled {
1744     background-color: rgba(255,255,255,.25);
1745     color: rgba(0,0,0,.5);
1746     cursor: auto;
1747 }
1748
1749 button.active {
1750     background: #7092ff;
1751 }
1752
1753 button.minor {
1754     position: absolute;
1755     top: 0;
1756     right: 0;
1757     height: 100%;
1758     width: 10%;
1759     border-radius: 0;
1760     background-color: #fafafa;
1761 }
1762
1763 button.minor .icon {
1764     opacity: .5;
1765 }
1766
1767 button.minor:hover {
1768     background-color: #f1f1f1;
1769 }
1770
1771 .button-wrap {
1772     display: inline-block;
1773     padding-right:10px;
1774     margin: 0;
1775 }
1776
1777 .button-wrap button:only-child {
1778     width: 100%;
1779 }
1780
1781 .button-wrap:last-of-type {
1782     padding-right: 0;
1783 }
1784
1785 .joined button {
1786     border-radius:0;
1787     border-right: 1px solid rgba(0,0,0,.5);
1788 }
1789
1790 .joined button:first-child {
1791     border-radius:4px 0 0 4px;
1792 }
1793
1794 .joined button:last-child {
1795     border-right-width: 0;
1796     border-radius:0 4px 4px 0;
1797 }
1798
1799 button.action {
1800     background: #7092ff;
1801 }
1802
1803 button.action:focus,
1804 button.action:hover {
1805     background: #597BE7;
1806 }
1807
1808 button.save.has-count {
1809     padding: 9px;
1810 }
1811
1812 button.save .count {
1813     display: none;
1814 }
1815
1816 button.save.has-count .count {
1817     display: block;
1818     position: absolute;
1819     top: 5px;
1820     background: rgba(255, 255, 255, .5);
1821     color: #333;
1822     padding: 10px;
1823     height: 30px;
1824     line-height: 12px;
1825     border-radius: 4px;
1826     margin: auto;
1827     margin-left: 8.3333%;
1828 }
1829
1830 button.save.has-count .count::before {
1831     content: "";
1832     margin: auto;
1833     width: 0;
1834     height: 0;
1835     position: absolute;
1836     left: -6px;
1837     top: 0;
1838     bottom: 0;
1839     border-top:    6px solid transparent;
1840     border-bottom: 6px solid transparent;
1841     border-right:  6px solid rgba(255,255,255,.5);
1842 }
1843
1844 /* Icons */
1845
1846 .icon {
1847   display:inline-block;
1848   vertical-align:top;
1849   width:20px;
1850   height:20px;
1851   background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 0;
1852   text-indent:-9999px;
1853   overflow:hidden;
1854   }
1855
1856 .icon-pre-text {
1857     margin-right: 3px;
1858 }
1859
1860 .user-icon {
1861     max-height: 20px;
1862     max-width: 20px;
1863     height: auto;
1864     width: auto;
1865     border-radius: 3px;
1866 }
1867
1868 /* Definitions for every icon */
1869 .icon.alert     { background-position:   0 0;}
1870 .icon.point,
1871 .icon.add-point  { background-position: -20px 0;}
1872 .icon.line,
1873 .icon.add-line   { background-position: -40px 0;}
1874 .icon.area,
1875 .icon.add-area   { background-position: -60px 0;}
1876 .icon.undo       { background-position: -80px 0;}
1877 .icon.redo       { background-position: -100px 0;}
1878 .icon.apply      { background-position: -120px 0;}
1879 .icon.save       { background-position: -140px 0;}
1880 .icon.close      { background-position: -160px 0;}
1881 .icon.delete     { background-position: -180px 0;}
1882 .icon.remove     { background-position: -200px 0;}
1883 .icon.inspect    { background-position: -220px 0;}
1884 .icon.plus       { background-position: -240px 0;}
1885 .icon.search     { background-position: -280px 0;}
1886 .icon.geocode    { background-position: -280px 0;}
1887 .icon.layers     { background-position: -300px 0;}
1888 .icon.avatar     { background-position: -320px 0;}
1889 .icon.nearby     { background-position: -340px 0;}
1890 .icon.geolocate  { background-position: -360px 0;}
1891 .icon.warning    { background-position: -380px 0;}
1892 .icon.bug        { background-position: -400px 0;}
1893 .icon.back       { background-position: -420px 0;}
1894 .icon.forward    { background-position: -440px 0;}
1895 .icon.help       { background-position: -460px 0;}
1896 .icon.relation    { background-position: -520px 0;}
1897 .icon.relation.route         { background-position: -540px 0;}
1898 .icon.relation.multipolygon  { background-position: -560px 0;}
1899 .icon.vertex     { background-position: -580px 0;}
1900
1901 .icon.inspect.light    { background-position: -220px -20px;}
1902 .icon.plus.light       { background-position: -240px -20px;}
1903 .icon.zoom-in          { background-position: -240px -20px;}
1904 .icon.zoom-out         { background-position: -260px -20px;}
1905 .icon.geocode.light    { background-position: -280px -20px;}
1906 .icon.layers.light     { background-position: -300px -20px;}
1907 .icon.avatar.light     { background-position: -320px -20px;}
1908 .icon.nearby.light     { background-position: -340px -20px;}
1909 .icon.geolocate.light  { background-position: -360px -20px;}
1910 .icon.bug.light        { background-position: -400px -20px;}
1911 .icon.help.light       { background-position: -460px -20px;}
1912
1913 .icon.back.blue        { background-position: -420px -20px;}
1914 .icon.forward.blue     { background-position: -440px -20px;}
1915
1916 button[disabled] .icon.alert      { background-position:   0 -40px;}
1917 button[disabled] .icon.add-point  { background-position: -20px -40px;}
1918 button[disabled] .icon.add-line   { background-position: -40px -40px;}
1919 button[disabled] .icon.add-area   { background-position: -60px -40px;}
1920 button.disabled  .icon.undo       { background-position: -80px -40px;}
1921 button.disabled  .icon.redo       { background-position: -100px -40px;}
1922 button[disabled] .apply.icon      { background-position: -120px -40px;}
1923 button[disabled] .close.icon      { background-position: -160px -40px;}
1924 button[disabled] .delete.icon     { background-position: -180px -40px;}
1925 button[disabled] .icon.remove     { background-position: -200px -40px;}
1926 button[disabled] .icon.inspect    { background-position: -220px -40px;}
1927 button[disabled] .icon.zoom-in    { background-position: -240px -40px;}
1928 button[disabled] .icon.zoom-out   { background-position: -260px -40px;}
1929 button[disabled] .icon.geocode    { background-position: -280px -40px;}
1930 button[disabled] .icon.layers     { background-position: -300px -40px;}
1931 button[disabled] .icon.avatar     { background-position: -320px -40px;}
1932 button[disabled] .icon.nearby     { background-position: -340px -40px;}
1933
1934 .icon.point.deleted  { background-position: -302px -80px;}
1935 .icon.line.deleted   { background-position: -320px -80px;}
1936 .icon.area.deleted   { background-position: -340px -80px;}
1937
1938 .icon.point.created  { background-position: -302px -100px;}
1939 .icon.line.created   { background-position: -320px -100px;}
1940 .icon.area.created   { background-position: -340px -100px;}
1941
1942 .icon.point.modified  { background-position: -22px 0; }
1943
1944 .icon.modified { opacity: .5; }
1945
1946 /* Out link is special */
1947
1948 .icon.out-link   { height: 14px; width: 14px; background-position: -500px 0;}
1949 a:hover .icon.out-link   { background-position: -500px -14px;}
1950
1951 .icon.plus-dark    { background-position: -240px -40px;}
1952
1953 /* Universal preset icons */
1954
1955 .icon.source     { background-position:   0 -200px;}
1956 .icon.address    { background-position: -20px -200px;}
1957 .icon.telephone  { background-position: -40px -200px;}
1958 .icon.website    { background-position: -60px -200px;}
1959 .icon.elevation  { background-position: -80px -200px;}
1960 .icon.wikipedia  { background-position: -100px -200px;}
1961 .icon.note       { background-position: -120px -200px;}
1962 .icon.wheelchair { background-position: -140px -200px;}
1963
1964 /* ToolBar / Persistent UI Elements
1965 ------------------------------------------------------- */
1966
1967 #bar {
1968     position: fixed;
1969     padding: 10px 0;
1970     left:0;
1971     top:0;
1972     right:0;
1973     height:60px;
1974     z-index: 1;
1975     min-width: 768px;
1976 }
1977
1978 /* Header for modals / panes
1979 ------------------------------------------------------- */
1980
1981 .header {
1982     border-bottom: 1px solid #ccc;
1983     height: 60px;
1984     position: relative;
1985 }
1986
1987 .header h3 {
1988     text-align: center;
1989     margin-bottom: 0;
1990     white-space: nowrap;
1991     text-overflow: ellipsis;
1992     overflow: hidden;
1993     padding: 20px;
1994 }
1995
1996 .header button,
1997 .modal > button {
1998     border-radius: 0;
1999     width: 40px;
2000     text-align: center;
2001     overflow: hidden;
2002 }
2003
2004 .header button {
2005     position: relative;
2006     height: 100%;
2007 }
2008
2009 .preset-list-pane .header button {
2010     position: absolute;
2011     right: 0;
2012     top: 0;
2013 }
2014
2015 .modal > button {
2016     position: absolute;
2017     right: 0;
2018     top: 0;
2019     height: 59px;
2020     z-index: 3;
2021 }
2022
2023 .footer {
2024     position: absolute;
2025     bottom: 0;
2026     padding: 5px 30px 5px 30px;
2027     border-top: 1px solid #ccc;
2028     background-color: #fafafa;
2029     width: 100%;
2030 }
2031
2032 .sidebar-component .body {
2033     width: 100%;
2034     overflow: auto;
2035     top: 60px;
2036     bottom: 0;
2037     position: absolute;
2038 }
2039
2040 /* Inspector
2041 ------------------------------------------------------- */
2042
2043 #sidebar {
2044     position: relative;
2045     float: left;
2046     height: 100%;
2047     overflow: hidden;
2048     z-index: 2;
2049     background: #f6f6f6;
2050 }
2051
2052 .sidebar-component {
2053     position: absolute;
2054     top: 0;
2055     left: 0;
2056     bottom: 0;
2057     right: 0;
2058 }
2059
2060 .inspector-wrap {
2061     width: 100%;
2062     height: 100%;
2063 }
2064
2065 .inspector-hidden {
2066     display: none;
2067 }
2068
2069 .inspector-body {
2070     overflow-y: scroll;
2071     overflow-x: hidden;
2072     position: absolute;
2073     right: 0;
2074     left: 0;
2075     bottom: 0;
2076 }
2077
2078 .mapillary-image {
2079     position: absolute;
2080     right: 0;
2081     bottom: 30px;
2082     width: 330px;
2083     height: 250px;
2084     padding: 5px;
2085     background-color: #fff;
2086 }
2087
2088 .mapillary-image a {
2089     display: block;
2090     position: absolute;
2091     height: auto;
2092     background-color: rgba(0,0,0,.5);
2093     bottom: 0;
2094     right: 0;
2095     padding: 5px 10px;
2096 }
2097
2098 .mapillary-image img {
2099     width: 100%;
2100     height: auto;
2101     display: block;
2102 }
2103
2104 .mapillary-image.hidden {
2105     visibility: hidden;
2106 }
2107
2108 .mapillary-image.temp button {
2109     display: none;
2110 }
2111
2112 .mapillary-image button {
2113     border-radius: 0;
2114     padding: 5px;
2115     position: absolute;
2116     right: 0;
2117     top: 0;
2118 }
2119
2120 .feature-list-pane .inspector-body {
2121     top: 120px;
2122 }
2123
2124 .preset-list-pane .inspector-body {
2125     top: 120px;
2126 }
2127
2128 .entity-editor-pane .inspector-body {
2129     top: 60px;
2130 }
2131
2132 .selection-list-pane .inspector-body {
2133     top: 60px;
2134 }
2135
2136 .inspector-inner {
2137     padding: 20px;
2138     position: relative;
2139 }
2140
2141 #sidebar .search-header .icon {
2142     display: block;
2143     position: absolute;
2144     left: 10px;
2145     top: 80px;
2146     pointer-events: none;
2147 }
2148
2149 #sidebar .search-header input {
2150     position: absolute;
2151     top: 60px;
2152     height: 60px;
2153     width: 100%;
2154     padding: 5px 10px;
2155     border-radius: 0;
2156     border-width: 0;
2157     border-bottom-width: 1px;
2158     text-indent: 30px;
2159     font-size: 18px;
2160     font-weight: bold;
2161 }
2162
2163 /* Feature list */
2164
2165 .feature-list  {
2166     width:100%;
2167 }
2168
2169 .no-results-item,
2170 .geocode-item,
2171 .feature-list-item {
2172     width: 100%;
2173     position: relative;
2174     border-bottom: 1px solid #ccc;
2175     border-radius: 0;
2176 }
2177
2178 .feature-list-item .label {
2179     text-align: left;
2180     padding: 5px 10px;
2181     white-space: nowrap;
2182     text-overflow: ellipsis;
2183     overflow: hidden;
2184     border-left: 1px solid rgba(0, 0, 0, .1);
2185     -moz-transition: all 100ms;
2186     -o-transition: all 100ms;
2187     transition: all 100ms;
2188 }
2189
2190 .feature-list-item .label .icon {
2191     opacity: .5;
2192 }
2193
2194 .feature-list-item:hover .label {
2195     background-color: #ececec;
2196 }
2197
2198 .feature-list-item .entity-type {
2199     color:#7092ff;
2200 }
2201
2202 .feature-list-item:hover .entity-type {
2203     color:#597be7;
2204 }
2205
2206 .feature-list-item .entity-name {
2207     font-weight: normal;
2208     color: #666;
2209     padding-left: 10px;
2210 }
2211
2212 /* Presets
2213 ------------------------------------------------------- */
2214
2215 /* Preset grid  */
2216
2217 .preset-list  {
2218     width:100%;
2219     padding: 20px 20px 10px 20px;
2220     border-bottom: 1px solid #ccc;
2221 }
2222
2223 .preset-list-button-wrap {
2224     position: relative;
2225     margin-bottom: 10px;
2226     height: 60px;
2227 }
2228
2229 .preset-list-button {
2230     width: 100%;
2231     height: 100%;
2232     position: relative;
2233     border: 1px solid #ccc;
2234 }
2235
2236 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
2237     background: #ececec;
2238 }
2239
2240 .preset-icon {
2241     position: absolute;
2242     top: 17px;
2243     left: 17px;
2244     margin: auto;
2245 }
2246
2247 .preset-icon-line,
2248 .preset-icon-relation {
2249     top: 0;
2250     left: 0;
2251 }
2252
2253 .preset-list-button .label {
2254     background-color: #f6f6f6;
2255     text-align: left;
2256     position: absolute;
2257     top: 0;
2258     bottom: 0;
2259     right: 0;
2260     padding: 5px 10px;
2261     left: 60px;
2262     line-height: 50px;
2263     white-space: nowrap;
2264     text-overflow: ellipsis;
2265     overflow: hidden;
2266     border-left: 1px solid rgba(0, 0, 0, .1);
2267     -moz-transition: all 100ms;
2268     -o-transition: all 100ms;
2269     transition: all 100ms;
2270     border-radius: 0 3px 3px 0;
2271     }
2272
2273 .preset-list-button:hover .label {
2274     background-color: #ececec;
2275 }
2276
2277 .preset-list-item button.tag-reference-button {
2278     height: 100%;
2279     border: 1px solid #CCC;
2280     border-radius: 0 3px 3px 0;
2281     position: absolute;
2282     top: 0;
2283     right: 0;
2284     width: 10%;
2285     background: #fafafa;
2286 }
2287
2288 .preset-list-item button.tag-reference-button .icon {
2289     opacity: .5;
2290 }
2291
2292 .current .preset-list-button,
2293 .current .preset-list-button .label {
2294     background-color: #E8EBFF;
2295 }
2296
2297 .category .preset-list-button:after,
2298 .category .preset-list-button:before {
2299     content: "";
2300     position: absolute;
2301     top: -5px;
2302     left: -1px; right: -1px;
2303     border: 1px solid #ccc;
2304     border-bottom: none;
2305     border-radius: 6px 6px 0 0;
2306     height: 6px;
2307 }
2308
2309 .category .preset-list-button:before {
2310     top: -3px;
2311 }
2312
2313 .subgrid .preset-list {
2314     padding: 10px 10px 0 10px;
2315     margin-top: 0;
2316     border: 0;
2317     border-radius: 8px;
2318     width: -webkit-calc(100% + 20px);
2319     margin-left: -10px;
2320 }
2321
2322 .subgrid .arrow {
2323     border: solid rgba(0, 0, 0, 0);
2324     border-width: 10px;
2325     border-bottom-color: #f1f1f1;
2326     width: 0;
2327     height: 0;
2328     margin-left: 50%;
2329     margin-left: -webkit-calc(50% - 10px);
2330     margin-top: -10px;
2331 }
2332
2333 /* Preset icon colors */
2334
2335 .preset-icon-fill-area {
2336     cursor: inherit;
2337     height: 39px;
2338     width: 39px;
2339     margin: auto;
2340     position: absolute;
2341     left: 10px;
2342     top: 10px;
2343 }
2344
2345 .preset-icon-fill-area:after {
2346     content: '';
2347     left: -4px;
2348     top: -4px;
2349     height: 45px;
2350     width: 45px;
2351     position: absolute;
2352     background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px;
2353 }
2354
2355 /* preset form basics */
2356
2357 .inspector-preset {
2358     overflow: hidden;
2359 }
2360
2361 .inspector-preset .preset-form {
2362     padding: 10px;
2363     margin: 0 10px 20px 10px;
2364     border-radius: 8px;
2365 }
2366
2367 .entity-editor-pane .preset-list-item::after {
2368     content: "";
2369     position: absolute;
2370     height: 0;
2371     width: 0;
2372     bottom: 0;
2373     left: 0;
2374     right: 0;
2375     margin: auto;
2376     border: solid rgba(0, 0, 0, 0);
2377     border-width: 10px;
2378     border-bottom-color: #ececec;
2379 }
2380
2381 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
2382     margin-bottom: 0;
2383 }
2384
2385
2386 .form-field {
2387     margin-bottom: 10px;
2388     width: 100%;
2389     -webkit-transition: margin-bottom 200ms;
2390        -moz-transition: margin-bottom 200ms;
2391          -o-transition: margin-bottom 200ms;
2392             transition: margin-bottom 200ms;
2393 }
2394
2395 .form-field:last-child {
2396     margin-bottom: 0;
2397 }
2398
2399 .form-label {
2400     position: relative;
2401     font-weight: bold;
2402     border: 1px solid #cfcfcf;
2403     padding: 5px 0 5px 10px;
2404     background: #f6f6f6;
2405     display: block;
2406     border-radius: 4px 4px 0 0;
2407     overflow: hidden;
2408 }
2409
2410 .form-label-button-wrap {
2411     position: absolute;
2412     top: 0;
2413     right: 0;
2414     height: 100%;
2415     width: 100%;
2416     background: transparent;
2417     text-align: right;
2418 }
2419
2420 .form-label-button-wrap .icon {
2421     opacity: .5;
2422 }
2423
2424 .form-label button {
2425     border-left: 1px solid #CCC;
2426     width: 10%;
2427     height: 100%;
2428     border-radius: 0;
2429     background: #fafafa;
2430 }
2431
2432 .form-label .modified-icon,
2433 .form-field .remove-icon {
2434     display: none;
2435 }
2436
2437 .modified .form-label .modified-icon,
2438 .present .form-label .remove-icon {
2439     display: inline-block;
2440 }
2441
2442 .form-field > input,
2443 .form-field > textarea,
2444 .form-field .preset-input-wrap {
2445     border: 1px solid #CCC;
2446     min-height: 30px;
2447     border-top: 0;
2448     border-radius: 0 0 4px 4px;
2449 }
2450
2451 .form-field textarea {
2452     height: 65px;
2453 }
2454
2455 .inspector-border {
2456     border-bottom: 1px solid #CCC
2457 }
2458
2459 /* Preset form (hover mode) */
2460
2461 .inspector-hover .checkselect label:last-of-type,
2462 .inspector-hover .preset-input-wrap .label,
2463 .inspector-hover input,
2464 .inspector-hover label {
2465     background: #ececec;
2466 }
2467
2468 .inspector-hover a,
2469 .inspector-hover .checkselect label:last-of-type {
2470     color: #666;
2471 }
2472
2473 /* hide and remove from layout */
2474 .inspector-hidden,
2475 .inspector-hover label input[type="checkbox"],
2476 .inspector-hover label input[type="radio"],
2477 .inspector-hover .toggle-list label,
2478 .inspector-hover .toggle-list label span,
2479 .inspector-hover .inspector-inner .add-tag,
2480 .inspector-hover .inspector-inner .add-relation,
2481 .inspector-hover .toggle-list label.remove .icon {
2482     height: 0;
2483     width: 0;
2484     overflow: hidden;
2485     opacity: 0 !important;
2486     border-width: 0;
2487     margin: 0;
2488     padding: 0;
2489 }
2490
2491 /* hide but preserve in layout */
2492 .inspector-hover .entity-editor-pane button.minor,
2493 .inspector-hover .combobox-caret,
2494 .inspector-hover .entity-editor-pane .header button,
2495 .inspector-hover .spin-control,
2496 .inspector-hover .hide-toggle:before,
2497 .inspector-hover .more-buttons,
2498 .inspector-hover .form-label-button-wrap,
2499 .inspector-hover .tag-reference-button,
2500 .inspector-hover .view-on-osm {
2501     opacity: 0;
2502 }
2503
2504 /* Styles for raw tag inspector on hover */
2505 .inspector-hover .tag-row .key-wrap,
2506 .inspector-hover .tag-row .input-wrap-position {
2507     width: 50%;
2508 }
2509
2510 .inspector-hover .tag-row:first-child input.value {
2511     border-top-right-radius: 4px;
2512 }
2513
2514 .inspector-hover .tag-row:last-child input.value {
2515     border-bottom-right-radius: 4px;
2516 }
2517
2518 .inspector-hover .tag-row:last-child input.key {
2519     border-bottom-left-radius: 4px;
2520 }
2521
2522 .inspector-hover .inspector-body .more-buttons {
2523     max-height: 0;
2524     padding-bottom: 0;
2525 }
2526
2527 /* Unstyle button fields */
2528 .inspector-hover .toggle-list label.active,
2529 .inspector-hover .entity-editor-pane a.hide-toggle {
2530     opacity: 1;
2531     background-color: transparent;
2532     color: #666;
2533     padding-left: 0;
2534     border-width: 0;
2535 }
2536
2537 .inspector-hover .toggle-list button.active {
2538     padding-left: 10px;
2539 }
2540
2541 /* Add placeholder only on hover for radio buttons */
2542 .inspector-hover .toggle-list .placeholder {
2543     color: #a9a9a9;
2544     padding: 5px 10px;
2545     opacity: 1;
2546     line-height: 20px;
2547     width: 100%;
2548 }
2549
2550 /* Hide placeholder for radio buttons if another is active, or not in hover state */
2551 .toggle-list label.active ~ .placeholder,
2552 .toggle-list .placeholder {
2553     padding: 0;
2554     opacity: 0;
2555     width: 0;
2556     line-height: 0;
2557     display: block;
2558     overflow: hidden;
2559     -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2560        -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2561          -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2562             transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2563 }
2564
2565 /* first phase hover-to-active animations */
2566
2567 textarea,
2568 .form-label,
2569 .preset-input-wrap,
2570 .preset-input-wrap .label {
2571     -webkit-transition: all 200ms;
2572        -moz-transition: all 200ms;
2573          -o-transition: all 200ms;
2574             transition: all 200ms;
2575 }
2576
2577 /* second phase hover-to-active animations */
2578
2579 input,
2580 .checkselect label:last-of-type {
2581     -webkit-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2582        -moz-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2583          -o-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2584             transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2585 }
2586
2587 .entity-editor-pane button.minor,
2588 .combobox-caret,
2589 .entity-editor-pane .header button,
2590 .toggle-list label span,
2591 .spin-control,
2592 .more-buttons,
2593 .view-on-osm,
2594 .hide-toggle:before,
2595 .entity-editor-pane .toggle-list label::before,
2596 .entity-editor-pane .toggle-list label.remove .icon {
2597     -webkit-transition: opacity 200ms 200ms;
2598        -moz-transition: opacity 200ms 200ms;
2599          -o-transition: opacity 200ms 200ms;
2600             transition: opacity 200ms 200ms;
2601 }
2602
2603 .entity-editor-pane a.hide-toggle {
2604     -webkit-transition: padding-left 200ms 200ms, color 200ms 200ms;
2605        -moz-transition: padding-left 200ms 200ms, color 200ms 200ms;
2606          -o-transition: padding-left 200ms 200ms, color 200ms 200ms;
2607             transition: padding-left 200ms 200ms, color 200ms 200ms;
2608 }
2609
2610 .entity-editor-pane .toggle-list label:not(.active) {
2611     -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2612        -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2613          -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2614             transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2615 }
2616
2617 .entity-editor-pane .toggle-list label {
2618     -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2619        -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2620          -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2621             transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2622 }
2623
2624 /* adding additional preset fields */
2625
2626 .inspector-body .more-buttons {
2627     max-height: 100px;
2628     padding-top: 0;
2629     -webkit-transition: padding 200ms 200ms, max-height 200ms 200ms;
2630        -moz-transition: padding 200ms 200ms, max-height 200ms 200ms;
2631          -o-transition: padding 200ms 200ms, max-height 200ms 200ms;
2632             transition: padding 200ms 200ms, max-height 200ms 200ms;
2633 }
2634
2635 button.preset-add-field {
2636     background: #f6f6f6;
2637     width: 25%;
2638     height: 40px;
2639     -webkit-transition: width 200ms;
2640        -moz-transition: width 200ms;
2641          -o-transition: width 200ms;
2642             transition: width 200ms;
2643 }
2644
2645 button.preset-add-field:hover {
2646     background: #ececec;
2647 }
2648
2649 /* set width based on # of buttons */
2650
2651 button.preset-add-field:only-child {
2652     width: 100%;
2653 }
2654
2655 button.preset-add-field:nth-last-child(2),
2656 button.preset-add-field:nth-last-child(2) ~ button.preset-add-field {
2657     width: 50%;
2658 }
2659
2660 button.preset-add-field:nth-last-child(3),
2661 button.preset-add-field:nth-last-child(3) ~ button.preset-add-field {
2662     width: 33.3333%;
2663 }
2664
2665 button.preset-add-field:nth-last-child(4),
2666 button.preset-add-field:nth-last-child(4) ~ button.preset-add-field {
2667     width: 25%;
2668 }
2669
2670 button.preset-add-field:nth-last-child(5),
2671 button.preset-add-field:nth-last-child(5) ~ button.preset-add-field {
2672     width: 20%;
2673 }
2674
2675 button.preset-add-field:nth-last-child(6),
2676 button.preset-add-field:nth-last-child(6) ~ button.preset-add-field {
2677     width: 16.6666%;
2678 }
2679
2680 button.preset-add-field:nth-last-child(7),
2681 button.preset-add-field:nth-last-child(7) ~ button.preset-add-field {
2682     width: 14.2857%;
2683 }
2684
2685 button.preset-add-field:nth-last-child(8),
2686 button.preset-add-field:nth-last-child(8) ~ button.preset-add-field {
2687     width: 12.5%;
2688 }
2689
2690 .preset-fav button.fav {
2691     height: 30px;
2692     margin: 5px;
2693     padding: 0 10px;
2694 }
2695
2696 /* preset form access */
2697
2698 .preset-input-wrap .label {
2699     height: 30px;
2700     background: #F6F6F6;
2701     padding: 5px 10px;
2702 }
2703
2704 .form-field-access .preset-input-wrap li {
2705     border-bottom: 1px solid #CCC;
2706 }
2707 .form-field-access .preset-input-wrap li:last-child {
2708     border-bottom: 0;
2709 }
2710
2711 .preset-input-access-wrap input {
2712     border-radius: 0;
2713     border-width: 0;
2714     border-left-width: 1px;
2715 }
2716
2717 .preset-input-wrap li:last-child input {
2718     border-bottom-right-radius: 4px;
2719 }
2720
2721 /* preset form numbers */
2722
2723 input[type=number] {
2724     position: relative;
2725     padding-right: 20%;
2726 }
2727
2728 .spin-control {
2729     width: 20%;
2730     height: 29px;
2731     display: inline-block;
2732     margin-left: -20%;
2733     margin-bottom: -11px;
2734     position: relative;
2735 }
2736
2737 .spin-control button {
2738     right: 1px;
2739     position: relative;
2740     float: left;
2741     height: 100%;
2742     width: 50%;
2743     border-left: 1px solid #CCC;
2744     border-radius: 0;
2745     background: rgba(0, 0, 0, 0);
2746 }
2747
2748 .spin-control button.decrement {
2749     border-bottom-right-radius: 3px;
2750 }
2751
2752 .spin-control button.decrement::after,
2753 .spin-control button.increment::after {
2754     content:"";
2755     height: 0; width: 0;
2756     position: absolute;
2757     left: 0; right: 0; bottom: 0; top: 0;
2758     margin: auto;
2759 }
2760
2761 .spin-control button.decrement::after {
2762     border-top: 5px solid #CCC;
2763     border-left: 5px solid transparent;
2764     border-right: 5px solid transparent;
2765 }
2766
2767 .spin-control button.increment::after {
2768     border-bottom: 5px solid #CCC;
2769     border-left: 5px solid transparent;
2770     border-right: 5px solid transparent;
2771 }
2772
2773 /* preset form checkbox */
2774
2775 .checkselect label:last-of-type {
2776     display: block;
2777     background: white;
2778     padding: 5px 10px;
2779     color: #7092FF;
2780 }
2781
2782 .checkselect label:hover {
2783     background: #f1f1f1;
2784 }
2785
2786 .checkselect .set {
2787     color: inherit;
2788 }
2789
2790 .checkselect label:not(.set) input[type="checkbox"] {
2791     opacity: .5;
2792 }
2793
2794 /* Preset form radio button */
2795
2796 .toggle-list button.remove {
2797     border-radius: 0 0 3px 3px;
2798 }
2799
2800 .toggle-list button.remove .icon {
2801     position: absolute;
2802     left: 5px;
2803 }
2804
2805 .toggle-list button.remove::before {
2806     content: none;
2807 }
2808
2809 .form-field .wiki-lang {
2810     border-radius: 0;
2811 }
2812
2813 .form-field .wiki-title {
2814     padding-right: 10%;
2815 }
2816
2817 .form-field .wiki-title ~ .combobox-caret {
2818     margin-left: -18%;
2819     margin-right: 9%;
2820 }
2821
2822 .form-field .wiki-link {
2823     float: right;
2824     background: #fafafa;
2825     padding: 5px;
2826     text-align: center;
2827 }
2828
2829 .form-field .wiki-link:hover {
2830     background: #f1f1f1;
2831 }
2832
2833 #preset-input-maxspeed {
2834     border-right: none;
2835     border-radius: 0 0 0 4px;
2836     width: 80%;
2837 }
2838
2839 .form-field .maxspeed-unit {
2840     border-radius: 0 0 4px 0;
2841     width: 20%;
2842 }
2843
2844 /* Name + translate form */
2845
2846 .form-field .localized-main {
2847     padding-right: 10%;
2848 }
2849
2850 .form-field .button-input-action {
2851     position: relative;
2852     right: 1px;
2853     width: 10%;
2854     margin-left: -10%;
2855     border: 1px solid #CCC;
2856     border-top-width: 0;
2857     border-right-width: 0;
2858     border-radius: 0 0 4px 0;
2859     height: 30px;
2860     vertical-align: top;
2861 }
2862
2863 .form-field .localized-wrap {
2864     padding: 0 10px;
2865 }
2866
2867 .form-field .localized-wrap .entry {
2868     position: relative;
2869     overflow: hidden;
2870 }
2871
2872 .form-field .localized-wrap .entry::before {
2873     content: "";
2874     display: block;
2875     position: absolute;
2876     background:#ccc;
2877     height: 11px;
2878     width: 1px;
2879     left: 0;
2880     right: 0;
2881     top: -11px;
2882     margin: auto;
2883 }
2884
2885 .form-field .localized-wrap .entry .localized-lang {
2886     border-radius: 0;
2887     border-top-width: 0;
2888 }
2889
2890 .form-field .localized-wrap .entry .localized-value {
2891     border-top-width: 0;
2892     border-radius: 0 0 4px 4px;
2893 }
2894
2895 .form-field .localized-wrap .form-label button {
2896     border-top-right-radius: 3px;
2897 }
2898
2899 /* Preset form address */
2900
2901 .addr-row input {
2902     border-right: 0;
2903     border-bottom: 0;
2904 }
2905
2906 .addr-row:first-of-type input {
2907     border-top: 0;
2908 }
2909
2910 .addr-row input:first-of-type {
2911     border-left: 0;
2912 }
2913
2914 .addr-row input {
2915     border-radius: 0;
2916 }
2917
2918 .addr-row:last-of-type input:first-of-type {
2919     border-radius: 0 0 0 4px;
2920 }
2921
2922 .addr-row:last-of-type input:last-of-type {
2923     border-radius: 0 0 4px 0;
2924 }
2925
2926 /* Restrictions editor */
2927
2928 .form-field-restrictions .preset-input-wrap {
2929     position: relative;
2930     height: 300px;
2931 }
2932
2933 .form-field-restrictions svg {
2934     width: 100%;
2935     height: 100%;
2936 }
2937
2938 .form-field-restrictions .restriction-help {
2939     z-index: 1;
2940     position: absolute;
2941     top: 0;
2942     left: 0;
2943     right: 0;
2944     padding: 2px 6px;
2945     background-color: rgba(255, 255, 255, .8);
2946     color: #999;
2947     text-align: center;
2948 }
2949
2950 /* combobox dropdown */
2951
2952 div.combobox {
2953     z-index: 9999;
2954     display: none;
2955     box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
2956     margin-top: -1px;
2957     background: white;
2958     max-height: 120px;
2959     overflow-y: auto;
2960     overflow-x: hidden;
2961     border: 1px solid #ccc;
2962     border-radius: 0 0 4px 4px;
2963 }
2964
2965 .combobox a {
2966     display: block;
2967     padding: 5px 10px;
2968     border-top:1px solid #ccc;
2969     text-overflow: ellipsis;
2970     white-space: nowrap;
2971     overflow: hidden;
2972 }
2973
2974 .combobox a.selected,
2975 .combobox a:hover {
2976     background: #ececec;
2977 }
2978
2979 .combobox a:first-child {
2980     border-top: 0;
2981 }
2982
2983 .combobox-caret {
2984     display: inline-block;
2985     position: relative;
2986     height: 30px;
2987     width: 30px;
2988     margin-left: -30px;
2989     vertical-align: top;
2990 }
2991
2992 .combobox-caret::after {
2993     content:"";
2994     height: 0; width: 0;
2995     position: absolute;
2996     left: 0; right: 0; bottom: 0; top: 0;
2997     margin: auto;
2998     border-top: 5px solid #ccc;
2999     border-left: 5px solid transparent;
3000     border-right: 5px solid transparent;
3001 }
3002
3003 /* Raw Tag Editor */
3004
3005 .tag-list {
3006     padding-top: 10px;
3007 }
3008
3009 .tag-row {
3010     width: 100%;
3011     position: relative;
3012     clear: both;
3013 }
3014
3015 .tag-row input {
3016     height: 31px;
3017     border: 0;
3018     border-radius: 0;
3019     border-bottom: 1px solid #CCC;
3020     border-left: 1px solid #CCC;
3021 }
3022
3023 .tag-row .key-wrap,
3024 .tag-row .input-wrap-position {
3025     width: 40%;
3026     float: left;
3027     height: 30px;
3028     -webkit-transition: width 200ms;
3029        -moz-transition: width 200ms;
3030          -o-transition: width 200ms;
3031             transition: width 200ms;
3032 }
3033
3034 .tag-row input.key {
3035     font-weight: bold;
3036     background-color: #f6f6f6;
3037 }
3038
3039 .tag-row input.value {
3040     border-right: 1px solid #CCC;
3041 }
3042
3043 .tag-row:first-child input.key {
3044     border-top: 1px solid #CCC;
3045     border-top-left-radius: 4px;
3046 }
3047
3048 .tag-row:first-child input.value {
3049     border-top: 1px solid #CCC;
3050 }
3051
3052 .tag-row button {
3053     position: absolute;
3054     height: 31px;
3055     right: 10%;
3056     border: 1px solid #CCC;
3057     border-top-width: 0;
3058     border-left-width: 0;
3059 }
3060
3061 .tag-row button:hover {
3062     background: #f1f1f1;
3063 }
3064
3065 .tag-row button .icon {
3066     opacity: .5;
3067 }
3068
3069 .tag-row:first-child button {
3070     border-top-width: 1px;
3071 }
3072
3073 .tag-row:first-child .tag-reference-button {
3074     border-top-right-radius: 4px;
3075 }
3076
3077 .tag-row:last-child .tag-reference-button {
3078     border-bottom-right-radius: 4px;
3079 }
3080
3081 .tag-row .tag-reference-button {
3082     right: 0;
3083     border-radius: 0;
3084     width: 10%;
3085     top: 0;
3086     background: #fafafa;
3087 }
3088
3089 /* Adding form fields to tag editor */
3090
3091 .inspector-inner .add-tag {
3092     width: 40%;
3093     height: 30px;
3094     border-top: 0;
3095     background: rgba(0,0,0,.5);
3096     border-radius: 0 0 4px 4px;
3097 }
3098
3099 .inspector-inner .add-tag:hover {
3100     background: rgba(0,0,0,.8);
3101 }
3102
3103 .inspector-inner .add-tag .label {
3104     display: none;
3105 }
3106
3107 /* Tag reference */
3108
3109 button.minor.tag-reference-loading {
3110     background-color: #f5f5f5;
3111 }
3112
3113 .tag-reference-loading .icon {
3114     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
3115     background-position: 0 0;
3116 }
3117
3118 .tag-reference-body {
3119     overflow: hidden;
3120     clear: both;
3121 }
3122
3123 .tag-reference-body p,
3124 .tag-reference-body img {
3125     margin-top: 20px;
3126 }
3127
3128 .tag-reference-body p:last-child {
3129     padding-bottom: 10px;
3130 }
3131
3132 .tag-reference-body a {
3133     display: block;
3134     padding-bottom: 10px;
3135 }
3136
3137 .preset-list .tag-reference-body {
3138     position: relative;
3139     width: 100%;
3140 }
3141
3142 .preset-list .tag-reference-body a {
3143     padding-bottom: 20px;
3144 }
3145
3146 .preset-list .tag-reference-body p,
3147 .preset-list .tag-reference-body img {
3148     margin-top: 10px;
3149 }
3150
3151 .raw-tag-editor .tag-reference-body {
3152     border-bottom: 1px solid #ccc;
3153     float: left;
3154     width: 100%;
3155 }
3156
3157 .raw-tag-editor .tag-reference-body p:last-child {
3158     padding-bottom: 20px;
3159 }
3160
3161 .raw-tag-editor .tag-reference-body a {
3162     padding-bottom: 20px;
3163 }
3164
3165 img.wiki-image {
3166     float: right;
3167     width: 33.3333%;
3168     width: -webkit-calc(33.3333% - 10px);
3169     width: calc(33.3333% - 10px);
3170     margin-left: 20px;
3171     margin-right: 10px;
3172     border-radius: 4px;
3173     max-height: 200px;
3174     margin-bottom: 20px;
3175 }
3176
3177 /* Raw relation membership editor */
3178
3179 .raw-member-editor .member-list li:first-child,
3180 .raw-membership-editor .member-list li:first-child {
3181     padding-top: 10px;
3182 }
3183
3184 .raw-member-editor .member-row,
3185 .raw-membership-editor .member-row {
3186     position: relative;
3187 }
3188
3189 .raw-member-editor .member-row .member-entity-name,
3190 .raw-membership-editor .member-row .member-entity-name {
3191     font-weight: normal;
3192     padding-left: 10px;
3193 }
3194
3195 .member-incomplete .member-delete {
3196     display: none;
3197 }
3198
3199 .member-row-new .member-entity-input {
3200     border-radius: 4px 4px 0 0;
3201     border: 1px solid #cfcfcf;
3202 }
3203
3204 .add-relation {
3205     width: 40%;
3206     height: 30px;
3207     background: rgba(0,0,0,.5);
3208     border-radius: 4px;
3209     margin-top: 10px;
3210 }
3211
3212 .add-relation:hover {
3213     background: rgba(0,0,0,.8);
3214 }
3215
3216 /* Map Controls */
3217
3218 .map-controls {
3219     right: 0;
3220     top: 70px;
3221     width: 40px;
3222     position: fixed;
3223     z-index: 100;
3224 }
3225
3226 .map-control > button {
3227     width: 40px;
3228     background: rgba(0,0,0,.5);
3229     border-radius: 0;
3230 }
3231
3232 .map-control > button:hover {
3233     background: rgba(0, 0, 0, .8);
3234 }
3235
3236 .map-control > button.active,
3237 .map-control > button.active:hover {
3238     background: #7092ff;
3239 }
3240
3241 /* Zoomer */
3242
3243 .zoombuttons button.zoom-in {
3244     border-radius: 4px 0 0 0;
3245 }
3246
3247 /* Background Settings */
3248
3249 .background-control button {
3250     border-radius: 4px 0 0 0;
3251 }
3252
3253 .background-control {
3254     position: relative;
3255 }
3256
3257 .nudge-container {
3258     border: 1px solid #CCC;
3259 }
3260
3261 .background-control .adjustments button:last-child {
3262     border: 0;
3263 }
3264
3265 .background-control .hide-toggle  {
3266     padding-bottom: 10px;
3267 }
3268
3269 .layer-list {
3270     margin-bottom: 10px;
3271     border: 1px solid #CCC;
3272     border-radius: 4px;
3273 }
3274
3275 .layer-list li {
3276     position: relative;
3277     height: 30px;
3278     background-color: white;
3279     color: #7092FF;
3280 }
3281
3282 .layer-list > li:first-child {
3283     border-radius: 3px 3px 0 0;
3284 }
3285
3286 .layer-list > li:last-child {
3287     border-radius: 0 0 3px 3px;
3288 }
3289
3290 .layer-list > li:only-child {
3291     border-radius: 3px;
3292 }
3293
3294 .layer-list li:not(:last-child) {
3295     border-bottom: 1px solid #ccc;
3296 }
3297
3298 .layer-list li:hover {
3299     background-color: #ececec;
3300 }
3301
3302 .layer-list li.active {
3303     background: #E8EBFF;
3304 }
3305
3306 .layer-list label {
3307     display: block;
3308     padding: 5px 10px;
3309     cursor: pointer;
3310 }
3311
3312 .layer-list label > span {
3313     display: block;
3314     overflow: hidden;
3315     white-space: nowrap;
3316     text-overflow: ellipsis;
3317 }
3318
3319 .hide-toggle {
3320     display: block;
3321     padding-left:12px;
3322     position: relative;
3323 }
3324
3325 .hide-toggle:before {
3326     content: '';
3327     display: block;
3328     position: absolute;
3329     height: 0;
3330     width: 0;
3331     left: 0;
3332     top: 5px;
3333     border-top:  4px solid transparent;
3334     border-bottom:  4px solid transparent;
3335     border-left:  8px solid #7092ff;
3336 }
3337
3338 .hide-toggle.expanded:before {
3339     border-top:  8px solid #7092ff;
3340     border-bottom: 0;
3341     border-right:  4px solid transparent;
3342     border-left:  4px solid transparent;
3343 }
3344
3345 .background-control .nudge-container button {
3346     float: left;
3347     display: block;
3348     width:20%;
3349     border-right: 1px solid #CCC;
3350     position: relative;
3351 }
3352
3353 .background-control .nudge::after {
3354     content: '';
3355     display: block;
3356     position: absolute;
3357     margin: auto;
3358     left: 0; right: 0; top: 0; bottom: 0;
3359     height: 0;
3360     width: 0;
3361 }
3362
3363 .background-control .nudge.left::after {
3364     border-top:  5px solid transparent;
3365     border-bottom:  5px solid transparent;
3366     border-left:  5px solid #222;
3367 }
3368
3369 .background-control .nudge.right::after {
3370     border-top:  5px solid transparent;
3371     border-bottom:  5px solid transparent;
3372     border-right:  5px solid #222;
3373 }
3374
3375 .background-control .nudge.top::after {
3376     border-right:  5px solid transparent;
3377     border-left:  5px solid transparent;
3378     border-bottom:  5px solid #222;
3379 }
3380
3381 .background-control .nudge.bottom::after {
3382     border-right:  5px solid transparent;
3383     border-left:  5px solid transparent;
3384     border-top:  5px solid #222;
3385 }
3386
3387 .opacity-options {
3388     background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
3389     height:20px;
3390     width:82px;
3391     position: absolute;
3392     right: 50px;
3393     top: 20px;
3394     border: 1px solid #ccc;
3395 }
3396
3397 .opacity-options li {
3398     height: 100%;
3399     display: block;
3400     float: left;
3401 }
3402
3403 .opacity-options li .select-box{
3404     position: absolute;
3405     width:20px;
3406     height:18px;
3407     z-index: 9999;
3408 }
3409
3410 .background-control li:hover .select-box,
3411 .background-control li.selected .select-box {
3412     border: 2px solid #7092ff;
3413     background: rgba(89, 123, 231, .5);
3414     opacity: .5;
3415 }
3416
3417 .background-control li.selected:hover .select-box,
3418 .background-control li.selected .select-box {
3419     opacity: 1;
3420 }
3421
3422 .background-control .opacity {
3423     background:#222;
3424     display:inline-block;
3425     width:20px;
3426     height:18px;
3427 }
3428
3429 .background-control .layer-list button {
3430     float: right;
3431     height: 100%;
3432     width: 10%;
3433     border-left: 1px solid #CCC;
3434     border-radius: 0;
3435 }
3436
3437 .background-control .layer-list button .icon {
3438     opacity: 0.5;
3439 }
3440
3441 .background-control .layer-list button:first-of-type {
3442     border-radius: 0 3px 3px 0;
3443 }
3444
3445 /* Geolocator */
3446
3447 .geolocate-control {
3448     margin-bottom: 10px;
3449 }
3450
3451 .geolocate-control button {
3452     border-radius: 0 0 0 4px;
3453 }
3454
3455 .map-overlay.content {
3456     position: fixed;
3457     top:60px;
3458     bottom: 30px;
3459     padding: 20px 50px 20px 20px;
3460     right: 0;
3461     overflow: auto;
3462 }
3463
3464 .background-control .map-overlay {
3465     z-index: -1;
3466 }
3467 /* Help */
3468
3469 .help-control button {
3470     border-radius: 0 0 0 4px;
3471 }
3472
3473 .help-wrap p {
3474     font-size: 15px;
3475     margin-bottom: 20px;
3476 }
3477
3478 .help-wrap .left-content .body p code {
3479     padding:2px 4px;
3480     background:#eee;
3481 }
3482
3483 .help-wrap .toc {
3484     /* This is two columns, 41.66666 x .4 = 16.6666 */
3485     width:40%;
3486     float:right;
3487     margin-left: 20px;
3488     margin-bottom: 20px;
3489     padding-left: 5px
3490 }
3491
3492 .help-wrap .toc li a,
3493 .help-wrap .nav a {
3494     display: block;
3495     border: 1px solid #CCC;
3496     padding: 5px 10px;
3497 }
3498
3499 .help-wrap .toc li a {
3500     border-bottom: 0;
3501 }
3502
3503 .help-wrap .toc li a:hover,
3504 .help-wrap .nav a:hover  {
3505     background: #ececec;
3506 }
3507
3508 .help-wrap .toc li a.selected {
3509     background: #E8EBFF;
3510 }
3511
3512 .help-wrap .toc li:first-child a {
3513     border-radius: 4px 4px 0 0;
3514 }
3515
3516 .help-wrap .toc li:nth-last-child(2) a {
3517     border-bottom: 1px solid #CCC;
3518     border-radius: 0 0 4px 4px
3519 }
3520
3521 .help-wrap .toc li.walkthrough a {
3522     overflow: hidden;
3523     margin-top: 10px;
3524     border-bottom: 1px solid #ccc;
3525     border-radius: 4px;
3526 }
3527
3528 .help-wrap .nav {
3529     position: relative;
3530 }
3531
3532 .help-wrap .nav a {
3533     float: left;
3534     width: 50%;
3535     text-align: center;
3536 }
3537
3538 .help-wrap .nav a:first-child {
3539     border-radius: 4px 0 0 4px;
3540 }
3541
3542 .help-wrap .nav a:last-child:not(:only-child) {
3543     border-radius: 0 4px 4px 0;
3544     border-left: 0;
3545 }
3546
3547 .help-wrap .nav a:only-child {
3548     width: 100%;
3549     border-radius: 4px;
3550 }
3551
3552 /* Map
3553 ------------------------------------------------------- */
3554
3555 #map {
3556     position:relative;
3557     overflow:hidden;
3558     height:100%;
3559     background:#000;
3560 }
3561
3562 #supersurface {
3563     transform-origin:0 0;
3564     -ms-transform-origin:0 0;
3565     -webkit-transform-origin:0 0;
3566     -moz-transform-origin:0 0;
3567     -o-transform-origin:0 0;
3568     -moz-user-select: none;
3569     -webkit-user-select: none;
3570     -ms-user-select: none;
3571     user-select: none;
3572 }
3573
3574 #supersurface, .layer-layer {
3575     position: absolute;
3576     top: 0;
3577     left: 0;
3578     right: 0;
3579     bottom: 0;
3580 }
3581
3582 /* About Section
3583 ------------------------------------------------------- */
3584
3585 #footer {
3586     width: 100%;
3587     position: absolute;
3588     right:0;
3589     bottom:0;
3590     border-radius: 0;
3591     opacity: .625;
3592     -webkit-transition: opacity 200ms;
3593     -moz-transition: opacity 200ms;
3594     transition: opacity 200ms;
3595 }
3596
3597 #footer:hover {
3598     opacity: 1;
3599 }
3600
3601 #scale-block {
3602     display: table-cell;
3603     vertical-align: bottom;
3604     width: 250px;
3605     height: 30px;
3606     float: left;
3607     clear: left;
3608 }
3609
3610 #info-block {
3611     float: right;
3612     clear: right;
3613 }
3614
3615 #scale {
3616     height: 30px;
3617     width: 100%;
3618 }
3619
3620 #scale text {
3621     font: 12px sans-serif;
3622     stroke: none;
3623     fill: #ccc;
3624     text-anchor: start;
3625 }
3626
3627 #scale path {
3628     fill: none;
3629     stroke: #ccc;
3630     stroke-width: 1;
3631     shape-rendering: crispEdges;
3632 }
3633
3634 #about-list {
3635     text-align: right;
3636     margin-right: 10px;
3637     clear: right;
3638 }
3639
3640 .source-switch a {
3641     padding: 2px 4px 4px 4px;
3642     border-radius: 2px;
3643 }
3644 .source-switch a.live {
3645     background: #d32232;
3646     color:#fff;
3647 }
3648
3649 /* Attribution overlay */
3650 .base-layer-attribution,
3651 .overlay-layer-attribution {
3652     position: absolute;
3653     bottom: 35px;
3654     color: #888;
3655     font-size: 10px;
3656 }
3657
3658 .base-layer-attribution {
3659     left: 10px;
3660 }
3661
3662 .overlay-layer-attribution {
3663     right: 10px;
3664 }
3665
3666 .overlay-layer-attribution .attribution:not(:last-child):after {
3667     content: '; ';
3668 }
3669
3670 .source-image {
3671     height:20px;
3672     vertical-align:top;
3673 }
3674
3675 .user-list a:not(:last-child):after {
3676     content: ', ';
3677 }
3678
3679 .api-status {
3680     float: right;
3681     clear: both;
3682     text-align: right;
3683     width: 100%;
3684 }
3685
3686 .api-status.offline,
3687 .api-status.readonly,
3688 .api-status.error {
3689     background: red;
3690     padding: 0px 5px;
3691 }
3692
3693 /* Modals
3694 ------------------------------------------------------- */
3695
3696 .modal {
3697     display: inline-block;
3698     position:absolute;
3699     left: 0;
3700     right: 0;
3701     margin: auto;
3702     z-index: 3;
3703 }
3704
3705 .modal .loader {
3706     margin-bottom: 10px;
3707 }
3708
3709 .modal .description {
3710     text-align: center;
3711 }
3712
3713 .shaded {
3714     z-index: 2;
3715     position: absolute;
3716     top: 0;
3717     bottom: 0;
3718     left: 0;
3719     right: 0;
3720     overflow: auto;
3721 }
3722
3723 .shaded:before {
3724     content:'';
3725     background:rgba(0,0,0,0.5);
3726     position:fixed;
3727     left:0px; right:0px; top:0px; bottom:0px;
3728 }
3729
3730 .modal-section {
3731     padding: 20px;
3732     border-bottom: 1px solid #CCC;
3733 }
3734
3735 .modal-section:last-child {
3736     border-bottom: 0;
3737 }
3738
3739 .loading-modal {
3740     text-align: center;
3741 }
3742
3743 .modal-actions button,
3744 .save-success a.button {
3745     font-weight: normal;
3746     color: #7092FF;
3747     border-bottom: 1px solid #CCC;
3748     border-radius: 0;
3749     height: 160px;
3750     text-align: center;
3751     display: inline-block;
3752 }
3753
3754 .modal-actions button:hover
3755 .save-success a.button:hover {
3756     background-color: #ececec;
3757 }
3758
3759 .modal-actions button:before,
3760 .save-success a.button:before,
3761 .walkthrough a:before {
3762     display: block;
3763     content: '';
3764     height: 100px;
3765     width: 100px;
3766     margin: auto;
3767     margin-bottom: 10px;
3768     background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px;
3769 }
3770
3771 .modal-actions :first-child {
3772     border-right: 1px solid #CCC;
3773 }
3774
3775 /* Restore Modal
3776 ------------------------------------------------------- */
3777
3778 .modal-actions .restore:before {
3779     background-position: -600px -220px;
3780 }
3781
3782 .modal-actions .reset:before {
3783     background-position: -700px -220px;
3784 }
3785
3786 /* Success Modal
3787 ------------------------------------------------------- */
3788
3789 .save-success p {
3790     padding: 15px;
3791 }
3792
3793 .save-success .button {
3794     padding-top: 15px;
3795 }
3796
3797 .save-success .button.social {
3798     height: 80px;
3799 }
3800
3801 .save-success .button.social:before {
3802     height: 50px;
3803 }
3804
3805 .save-success .button.osm:before {
3806     background-position: 0px -220px;
3807 }
3808
3809 .save-success .button.twitter:before {
3810     background-position: -100px -245px;
3811 }
3812
3813 .save-success .button.facebook:before {
3814     background-position: -200px -245px;
3815 }
3816
3817 .save-success .button.google:before {
3818     background-position: -300px -245px;
3819 }
3820
3821 /* Splash Modal
3822 ------------------------------------------------------- */
3823
3824 .modal-actions .walkthrough:before,
3825 .walkthrough a:before {
3826     background-position: -400px -220px;
3827 }
3828
3829 .modal-actions .start:before {
3830     background-position: -500px -220px;
3831 }
3832
3833 /* Commit Modal
3834 ------------------------------------------------------- */
3835
3836 .mode-save a.user-info {
3837     display: inline-block;
3838 }
3839
3840 .mode-save .commit-form {
3841     margin-bottom: 0;
3842 }
3843
3844 .mode-save button.action {
3845     float: none;
3846     margin: auto;
3847     display: block;
3848     color: white;
3849     font-size: 14px;
3850 }
3851
3852 .mode-save .user-info img {
3853     float: left;
3854 }
3855
3856 .mode-save h3 small.count {
3857     margin-right: 10px;
3858     text-align: center;
3859     float: left;
3860     height: 12px;
3861     min-width: 12px;
3862     font-size:12px;
3863     line-height: 12px;
3864     border-radius:24px;
3865     padding:5px;
3866     background:#7092ff;
3867     color:#fff;
3868 }
3869
3870 .mode-save .commit-info {
3871     margin-bottom: 10px;
3872 }
3873
3874 .mode-save .changeset-list {
3875     border:1px solid #ccc;
3876     border-radius: 4px;
3877     background:#fff;
3878 }
3879
3880 .mode-save .warning-section .changeset-list button {
3881     border-left: 1px solid #CCC;
3882 }
3883
3884 .mode-save .changeset-list li {
3885     position: relative;
3886     border-top:1px solid #ccc;
3887     padding:5px 10px;
3888     cursor: pointer;
3889 }
3890
3891 .mode-save .changeset-list li:hover {
3892     background-color: #ececec;
3893 }
3894
3895 .mode-save .changeset-list .alert {
3896     opacity: 0.5;
3897 }
3898
3899 .changeset-list li span.count {
3900     font-size:10px;
3901     color:#555;
3902 }
3903
3904 .mode-save .commit-section .changeset-list button {
3905     border-left: 1px solid #CCC;
3906 }
3907
3908 .changeset-list li span.count:before { content: '('; }
3909
3910 .changeset-list li span.count:after { content: ')'; }
3911
3912 .changeset-list li:first-child { border-top: 0;}
3913
3914 /* Notices
3915 ------------------------------------------------------- */
3916
3917 .notice {
3918     position: absolute;
3919     top: 0;
3920     bottom: 0;
3921     left: 0;
3922     right: 0;
3923     text-align: center;
3924     background: #fff;
3925 }
3926
3927 .notice .zoom-to {
3928     margin: auto;
3929     width: 80%;
3930     height: 100px;
3931     border-radius: 5px;
3932     line-height: 40px;
3933     color: #000;
3934     opacity: 0.9;
3935 }
3936
3937 .notice .zoom-to:hover {
3938     background: #d8e1ff;
3939 }
3940
3941 .notice .zoom-to .icon {
3942     margin-top:10px;
3943     margin-right:10px;
3944 }
3945
3946 .icon.zoom-in-invert {
3947     background-position: -240px -40px;
3948 }
3949
3950 /* Tooltips
3951 ------------------------------------------------------- */
3952
3953 .tooltip {
3954     position: absolute;
3955     display: none;
3956     color:#333;
3957     text-align: left;
3958     font-size: 12px;
3959 }
3960
3961 .tooltip.in {
3962     opacity: 0.8;
3963     z-index: 1030;
3964     height: auto;
3965     display: block;
3966 }
3967
3968 .tooltip.top {
3969     margin-top: -20px;
3970     text-align: center;
3971 }
3972
3973 .tooltip.right {
3974     margin-left: 20px;
3975 }
3976
3977 .tooltip.bottom {
3978     margin-top: 20px;
3979     text-align: center;
3980 }
3981
3982 .tooltip.left {
3983     margin-left: -20px;
3984     text-align: right;
3985 }
3986
3987 .tooltip-inner {
3988     display: inline-block;
3989     max-width: 200px;
3990     min-width: 80px;
3991     padding: 10px;
3992     font-weight: normal;
3993     background-color: white;
3994 }
3995
3996 .tail {
3997     width: 200px;
3998     height: 400px;
3999     pointer-events: none;
4000     opacity: .8;
4001     margin-top: -200px;
4002     position: absolute;
4003     background: transparent;
4004 }
4005
4006 .tail::after {
4007     content: "";
4008     position: absolute;
4009     width: 0;
4010     height: 0;
4011     border-color: transparent;
4012     border-style: solid;
4013     top: 50%;
4014     right: -5px;
4015     margin-top: -5px;
4016     border-left-color: white;
4017     border-width: 5px 0 5px 5px;
4018 }
4019
4020 .tail div {
4021     padding: 10px;
4022     background: white;
4023     position: absolute;
4024     top: 180px;
4025     left: 0;
4026     right: 0;
4027     margin: auto;
4028 }
4029
4030 .left.tail::after {
4031     content: "";
4032     position: absolute;
4033     width: 0;
4034     height: 0;
4035     border-color: transparent;
4036     border-style: solid;
4037     top: 50%;
4038     left: -5px;
4039     margin-top: -5px;
4040     border-right-color: white;
4041     border-width: 5px 5px 5px 0;
4042 }
4043
4044 .tooltip-arrow {
4045     position: absolute;
4046     width: 0;
4047     height: 0;
4048     border-color: transparent;
4049     border-style: solid;
4050 }
4051
4052 .tooltip.top .tooltip-arrow {
4053     bottom: -5px;
4054     left: 50%;
4055     margin-left: -5px;
4056     border-top-color: white;
4057     border-width: 5px 5px 0;
4058 }
4059
4060 .tooltip.right .tooltip-arrow {
4061     top: 50%;
4062     left: -5px;
4063     margin-top: -5px;
4064     border-right-color: white;
4065     border-width: 5px 5px 5px 0;
4066 }
4067
4068 .tooltip.left .tooltip-arrow {
4069     top: 50%;
4070     right: -5px;
4071     margin-top: -5px;
4072     border-left-color: white;
4073     border-width: 5px 0 5px 5px;
4074 }
4075
4076 .tooltip.bottom .tooltip-arrow {
4077     top: -5px;
4078     left: 50%;
4079     margin-left: -5px;
4080     border-bottom-color: white;
4081     border-width: 0 5px 5px;
4082 }
4083
4084 .keyhint-wrap {
4085     background: #F6F6F6;
4086     padding: 10px;
4087     margin: 10px -10px -10px;
4088 }
4089
4090 .tooltip-inner .keyhint {
4091     font-size: 10px;
4092     padding: 0 7px;
4093     font-weight: bold;
4094     display: inline-block;
4095     border-radius: 2px;
4096     border: 1px solid #CCC;
4097     position: relative;
4098     z-index: 1;
4099     text-align: left;
4100 }
4101
4102 .tooltip-inner .keyhint::after {
4103     content: "";
4104     position: absolute;
4105     border-radius: 2px;
4106     height: 10px;
4107     width: 100%;
4108     z-index: 0;
4109     bottom: -4px;
4110     left: -1px;
4111     border: 1px solid #CCC;
4112     border-top: 0;
4113 }
4114
4115 /* Exceptions for tooltip layouts */
4116
4117 /* make tooltips in panels dark */
4118 .map-overlay .tooltip.top .tooltip-arrow,
4119 .entity-editor-pane .tooltip.top .tooltip-arrow,
4120 .warning-section .tooltip.top .tooltip-arrow {
4121     border-top-color: #000;
4122 }
4123
4124 .map-overlay .tooltip.bottom .tooltip-arrow,
4125 .entity-editor-pane .tooltip.bottom .tooltip-arrow,
4126 .warning-section .tooltip.bottom .tooltip-arrow {
4127     border-bottom-color: #000;
4128 }
4129
4130 .map-overlay .tooltip.left .tooltip-arrow,
4131 .entity-editor-pane .tooltip.left .tooltip-arrow,
4132 .warning-section .tooltip.left .tooltip-arrow {
4133     border-left-color: #000;
4134 }
4135
4136 .map-overlay .tooltip.right .tooltip-arrow,
4137 .entity-editor-pane .tooltip.right .tooltip-arrow,
4138 .warning-section .tooltip.right .tooltip-arrow {
4139     border-right-color: #000;
4140 }
4141
4142 .map-overlay .tooltip-inner,
4143 .entity-editor-pane .tooltip-inner,
4144 .warning-section .tooltip-inner {
4145     background: #000;
4146     color: #ccc;
4147 }
4148 /* commit warning tooltips need to be closer */
4149 .warning-section .tooltip.top {
4150     margin-top: -5px;
4151 }
4152
4153 /* Uncramp map-control tooltips */
4154 .map-control .tooltip {
4155     min-width: 160px;
4156 }
4157 /* Move over tooltips that are near the edge of screen */
4158 .add-point .tooltip {
4159     left: 33.3333% !important;
4160 }
4161
4162 .curtain-tooltip.intro-points-add .tooltip-arrow,
4163 .add-point .tooltip .tooltip-arrow {
4164     left: 60px;
4165 }
4166
4167 .radial-menu-tooltip {
4168     opacity: 0.8;
4169     display: none;
4170     position: absolute;
4171     width: 200px;
4172 }
4173
4174 .radial-menu-background {
4175     stroke: black;
4176     stroke-opacity: 0.5;
4177 }
4178
4179 .radial-menu-item {
4180     fill: white;
4181 }
4182
4183 .radial-menu-item:hover {
4184     fill: #ececec;
4185 }
4186
4187 .radial-menu-item:active {
4188     fill: #ececec;
4189 }
4190
4191 .radial-menu-item.disabled {
4192     cursor: auto;
4193     fill: rgba(255,255,255,.5);
4194 }
4195
4196 .lasso-box {
4197     fill-opacity:0.1;
4198     stroke: #fff;
4199     stroke-width: 1;
4200     stroke-opacity: 1;
4201     stroke-dasharray: 5, 5;
4202 }
4203
4204 /* Media Queries
4205 ------------------------------------------------------- */
4206
4207 @media only screen and (max-width: 840px) {
4208     #bar .icon.icon-pre-text { margin-right: 0;}
4209     /* override hide for save button */
4210     #bar .save .label { display: block;}
4211 }
4212
4213 /* Scrollbars
4214  ----------------------------------------------------- */
4215
4216 ::-webkit-scrollbar {
4217     height: 20px;
4218     overflow: visible;
4219     width: 10px;
4220     background: white;
4221     border-left: 1px solid #DDD;
4222 }
4223
4224 ::-webkit-scrollbar-track {
4225     background-clip: padding-box;
4226     border: solid transparent;
4227     border-width: 0;
4228 }
4229
4230 ::-webkit-scrollbar-thumb {
4231     background-color: rgba(0,0,0,.2);
4232     background-clip: padding-box;
4233     border: solid transparent;
4234     border-width: 3px 3px 3px 4px;
4235     border-radius: 6px;
4236 }
4237 ::-webkit-scrollbar-track:hover,
4238 ::-webkit-scrollbar-track:active {
4239     background-color: rgba(0,0,0,.05);
4240 }
4241
4242 /* Intro walkthrough
4243  ----------------------------------------------------- */
4244
4245 .curtain-darkness {
4246     pointer-events: all;
4247     fill-opacity: 0.7;
4248     fill: #222;
4249     fill-rule: evenodd;
4250 }
4251
4252 .intro-nav-wrap {
4253     position: absolute;
4254     left: 0;
4255     right: 0;
4256     bottom: 30px;
4257     padding: 10px;
4258     z-index: 1001;
4259 }
4260
4261 .intro-nav-wrap button.step {
4262     width: 20%;
4263 }
4264
4265 .intro-nav-wrap button.step.finished {
4266     background: #8cd05f;
4267 }
4268
4269 .intro-nav-wrap button.step .icon {
4270     display: none;
4271 }
4272
4273 .intro-nav-wrap button.step.finished .icon {
4274     display: inline-block;
4275 }
4276
4277
4278 .curtain-tooltip .tooltip-inner {
4279     text-align: left;
4280     padding: 20px;
4281 }
4282
4283 .curtain-tooltip .tooltip-inner {
4284     font-size: 15px;
4285 }
4286
4287 .curtain-tooltip .tooltip-inner .bold {
4288     font-weight: bold;
4289     display: block;
4290     border-top: 1px solid #CCC;
4291     margin-top: 10px;
4292     margin-left: -20px;
4293     margin-right: -20px;
4294     padding: 10px 20px 0 20px;
4295 }
4296
4297 .curtain-tooltip .tooltip-inner .bold:only-child {
4298     border: 0;
4299     padding: 0;
4300     margin: 0;
4301 }
4302
4303 .curtain-tooltip.intro-points-describe {
4304     top: 133px !important;
4305 }
4306
4307 /* Tooltip illustrations */
4308
4309 .intro-points-add .tooltip-inner::before,
4310 .intro-areas-add .tooltip-inner::before,
4311 .intro-lines-add .tooltip-inner::before {
4312     margin-left: -20px;
4313     display: block;
4314     content: "";
4315     height: 80px;
4316     width: 200px;
4317     background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -320px;
4318 }
4319
4320 .intro-areas-add .tooltip-inner::before {
4321     background-position: 0 -400px;
4322 }
4323
4324 .intro-lines-add .tooltip-inner::before {
4325     background-position: 0 -480px;
4326 }
4327
4328 .huge-modal-button {
4329     width: 100%;
4330     height: auto;
4331     padding: 20px;
4332 }
4333
4334 .huge-modal-button .illustration {
4335     height: 100px;
4336     width: 100px;
4337     background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -400px -220px;
4338     margin: auto;
4339 }
4340 /* This file is generated by make. Do NOT edit manually. */
4341
4342 .preset-icon{background-image:url(<%= asset_path("iD/img/maki-sprite.png") %>);background-repeat:no-repeat;width:24px;height:24px;}
4343 .preset-icon-line{background-image:url(<%= asset_path("iD/img/line-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
4344 .preset-icon-relation{background-image:url(<%= asset_path("iD/img/relation-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
4345 .feature-circle-stroked{background-position:-0px -0px;}
4346 .feature-circle{background-position:-54px -0px;}
4347 .feature-square-stroked{background-position:-108px -0px;}
4348 .feature-square{background-position:-162px -0px;}
4349 .feature-triangle-stroked{background-position:-216px -0px;}
4350 .feature-triangle{background-position:-0px -24px;}
4351 .feature-star-stroked{background-position:-54px -24px;}
4352 .feature-star{background-position:-108px -24px;}
4353 .feature-cross{background-position:-162px -24px;}
4354 .feature-marker-stroked{background-position:-216px -24px;}
4355 .feature-marker{background-position:-0px -48px;}
4356 .feature-religious-jewish{background-position:-54px -48px;}
4357 .feature-religious-christian{background-position:-108px -48px;}
4358 .feature-religious-muslim{background-position:-162px -48px;}
4359 .feature-cemetery{background-position:-216px -48px;}
4360 .feature-rocket{background-position:-0px -72px;}
4361 .feature-airport{background-position:-54px -72px;}
4362 .feature-heliport{background-position:-108px -72px;}
4363 .feature-rail{background-position:-162px -72px;}
4364 .feature-rail-metro{background-position:-216px -72px;}
4365 .feature-rail-light{background-position:-0px -96px;}
4366 .feature-bus{background-position:-54px -96px;}
4367 .feature-fuel{background-position:-108px -96px;}
4368 .feature-parking{background-position:-162px -96px;}
4369 .feature-parking-garage{background-position:-216px -96px;}
4370 .feature-airfield{background-position:-0px -120px;}
4371 .feature-roadblock{background-position:-54px -120px;}
4372 .feature-ferry{background-position:-108px -120px;}
4373 .feature-harbor{background-position:-162px -120px;}
4374 .feature-bicycle{background-position:-216px -120px;}
4375 .feature-park{background-position:-0px -144px;}
4376 .feature-park2{background-position:-54px -144px;}
4377 .feature-museum{background-position:-108px -144px;}
4378 .feature-lodging{background-position:-162px -144px;}
4379 .feature-monument{background-position:-216px -144px;}
4380 .feature-zoo{background-position:-0px -168px;}
4381 .feature-garden{background-position:-54px -168px;}
4382 .feature-campsite{background-position:-108px -168px;}
4383 .feature-theatre{background-position:-162px -168px;}
4384 .feature-art-gallery{background-position:-216px -168px;}
4385 .feature-pitch{background-position:-0px -192px;}
4386 .feature-soccer{background-position:-54px -192px;}
4387 .feature-america-football{background-position:-108px -192px;}
4388 .feature-tennis{background-position:-162px -192px;}
4389 .feature-basketball{background-position:-216px -192px;}
4390 .feature-baseball{background-position:-0px -216px;}
4391 .feature-golf{background-position:-54px -216px;}
4392 .feature-swimming{background-position:-108px -216px;}
4393 .feature-cricket{background-position:-162px -216px;}
4394 .feature-skiing{background-position:-216px -216px;}
4395 .feature-school{background-position:-0px -240px;}
4396 .feature-college{background-position:-54px -240px;}
4397 .feature-library{background-position:-108px -240px;}
4398 .feature-post{background-position:-162px -240px;}
4399 .feature-fire-station{background-position:-216px -240px;}
4400 .feature-town-hall{background-position:-0px -264px;}
4401 .feature-police{background-position:-54px -264px;}
4402 .feature-prison{background-position:-108px -264px;}
4403 .feature-embassy{background-position:-162px -264px;}
4404 .feature-beer{background-position:-216px -264px;}
4405 .feature-restaurant{background-position:-0px -288px;}
4406 .feature-cafe{background-position:-54px -288px;}
4407 .feature-shop{background-position:-108px -288px;}
4408 .feature-fast-food{background-position:-162px -288px;}
4409 .feature-bar{background-position:-216px -288px;}
4410 .feature-bank{background-position:-0px -312px;}
4411 .feature-grocery{background-position:-54px -312px;}
4412 .feature-cinema{background-position:-108px -312px;}
4413 .feature-pharmacy{background-position:-162px -312px;}
4414 .feature-hospital{background-position:-216px -312px;}
4415 .feature-danger{background-position:-0px -336px;}
4416 .feature-industrial{background-position:-54px -336px;}
4417 .feature-warehouse{background-position:-108px -336px;}
4418 .feature-commercial{background-position:-162px -336px;}
4419 .feature-building{background-position:-216px -336px;}
4420 .feature-place-of-worship{background-position:-0px -360px;}
4421 .feature-alcohol-shop{background-position:-54px -360px;}
4422 .feature-logging{background-position:-108px -360px;}
4423 .feature-oil-well{background-position:-162px -360px;}
4424 .feature-slaughterhouse{background-position:-216px -360px;}
4425 .feature-dam{background-position:-0px -384px;}
4426 .feature-water{background-position:-54px -384px;}
4427 .feature-wetland{background-position:-108px -384px;}
4428 .feature-disability{background-position:-162px -384px;}
4429 .feature-telephone{background-position:-216px -384px;}
4430 .feature-emergency-telephone{background-position:-0px -408px;}
4431 .feature-toilets{background-position:-54px -408px;}
4432 .feature-waste-basket{background-position:-108px -408px;}
4433 .feature-music{background-position:-162px -408px;}
4434 .feature-land-use{background-position:-216px -408px;}
4435 .feature-city{background-position:-0px -432px;}
4436 .feature-town{background-position:-54px -432px;}
4437 .feature-village{background-position:-108px -432px;}
4438 .feature-farm{background-position:-162px -432px;}
4439 .feature-bakery{background-position:-216px -432px;}
4440 .feature-dog-park{background-position:-0px -456px;}
4441 .feature-lighthouse{background-position:-54px -456px;}
4442 .feature-clothing-store{background-position:-108px -456px;}
4443 .feature-polling-place{background-position:-162px -456px;}
4444 .feature-playground{background-position:-216px -456px;}
4445 .feature-entrance{background-position:-0px -480px;}
4446 .feature-heart{background-position:-54px -480px;}
4447 .feature-london-underground{background-position:-108px -480px;}
4448 .feature-minefield{background-position:-162px -480px;}
4449 .feature-rail-underground{background-position:-216px -480px;}
4450 .feature-rail-above{background-position:-0px -504px;}
4451 .feature-camera{background-position:-54px -504px;}
4452 .feature-laundry{background-position:-108px -504px;}
4453 .feature-car{background-position:-162px -504px;}
4454 .feature-suitcase{background-position:-216px -504px;}
4455 .feature-hairdresser{background-position:-0px -528px;}
4456 .feature-chemist{background-position:-54px -528px;}
4457 .feature-mobilephone{background-position:-108px -528px;}
4458 .feature-scooter{background-position:-162px -528px;}
4459 .feature-gift{background-position:-216px -528px;}
4460 .feature-ice-cream{background-position:-0px -552px;}
4461 .preset-icon-line.feature-highway-motorway{background-position:-20px -25px;}
4462 .preset-icon-line.feature-highway-trunk{background-position:-80px -25px;}
4463 .preset-icon-line.feature-highway-primary{background-position:-140px -25px;}
4464 .preset-icon-line.feature-highway-secondary{background-position:-200px -25px;}
4465 .preset-icon-line.feature-highway-tertiary{background-position:-260px -25px;}
4466 .preset-icon-line.feature-highway-motorway-link{background-position:-320px -25px;}
4467 .preset-icon-line.feature-highway-trunk-link{background-position:-380px -25px;}
4468 .preset-icon-line.feature-highway-primary-link{background-position:-440px -25px;}
4469 .preset-icon-line.feature-highway-secondary-link{background-position:-500px -25px;}
4470 .preset-icon-line.feature-highway-tertiary-link{background-position:-560px -25px;}
4471 .preset-icon-line.feature-highway-residential{background-position:-620px -25px;}
4472 .preset-icon-line.feature-highway-unclassified{background-position:-680px -25px;}
4473 .preset-icon-line.feature-highway-service{background-position:-740px -25px;}
4474 .preset-icon-line.feature-highway-road{background-position:-800px -25px;}
4475 .preset-icon-line.feature-highway-track{background-position:-860px -25px;}
4476 .preset-icon-line.feature-highway-living-street{background-position:-920px -25px;}
4477 .preset-icon-line.feature-highway-path{background-position:-980px -25px;}
4478 .preset-icon-line.feature-highway-cycleway{background-position:-1040px -25px;}
4479 .preset-icon-line.feature-highway-footway{background-position:-1100px -25px;}
4480 .preset-icon-line.feature-highway-bridleway{background-position:-1160px -25px;}
4481 .preset-icon-line.feature-highway-steps{background-position:-1220px -25px;}
4482 .preset-icon-line.feature-railway-rail{background-position:-1280px -25px;}
4483 .preset-icon-line.feature-railway-disused{background-position:-1340px -25px;}
4484 .preset-icon-line.feature-railway-abandoned{background-position:-1400px -25px;}
4485 .preset-icon-line.feature-railway-subway{background-position:-1460px -25px;}
4486 .preset-icon-line.feature-railway-light-rail{background-position:-1520px -25px;}
4487 .preset-icon-line.feature-railway-monorail{background-position:-1580px -25px;}
4488 .preset-icon-line.feature-waterway-river{background-position:-1640px -25px;}
4489 .preset-icon-line.feature-waterway-stream{background-position:-1700px -25px;}
4490 .preset-icon-line.feature-waterway-canal{background-position:-1760px -25px;}
4491 .preset-icon-line.feature-waterway-ditch{background-position:-1820px -25px;}
4492 .preset-icon-line.feature-power-line{background-position:-1880px -25px;}
4493 .preset-icon-line.feature-other-line{background-position:-1940px -25px;}
4494 .preset-icon-line.feature-category-roads{background-position:-2000px -25px;}
4495 .preset-icon-line.feature-category-rail{background-position:-2060px -25px;}
4496 .preset-icon-line.feature-category-path{background-position:-2120px -25px;}
4497 .preset-icon-line.feature-category-water{background-position:-2180px -25px;}
4498 .preset-icon-line.feature-ferry{background-position:-2240px -25px;}
4499 .preset-icon-line.feature-pipeline{background-position:-2300px -25px;}
4500 .preset-icon-relation.feature-relation{background-position:-20px -25px;}
4501 .preset-icon-relation.feature-restriction{background-position:-80px -25px;}
4502 .preset-icon-relation.feature-multipolygon{background-position:-140px -25px;}
4503 .preset-icon-relation.feature-boundary{background-position:-200px -25px;}
4504 .preset-icon-relation.feature-route{background-position:-260px -25px;}
4505 .preset-icon-relation.feature-route-road{background-position:-320px -25px;}
4506 .preset-icon-relation.feature-route-bicycle{background-position:-380px -25px;}
4507 .preset-icon-relation.feature-route-foot{background-position:-440px -25px;}
4508 .preset-icon-relation.feature-route-bus{background-position:-500px -25px;}
4509 .preset-icon-relation.feature-route-train{background-position:-560px -25px;}
4510 .preset-icon-relation.feature-route-detour{background-position:-620px -25px;}
4511 .preset-icon-relation.feature-route-tram{background-position:-680px -25px;}
4512 .preset-icon-relation.feature-route-ferry{background-position:-740px -25px;}
4513 .preset-icon-relation.feature-route-power{background-position:-800px -25px;}
4514 .preset-icon-relation.feature-route-pipeline{background-position:-860px -25px;}
4515 .preset-icon-relation.feature-route-master{background-position:-920px -25px;}
4516 .preset-icon-relation.feature-restriction-no-straight-on{background-position:-980px -25px;}
4517 .preset-icon-relation.feature-restriction-no-u-turn{background-position:-1040px -25px;}
4518 .preset-icon-relation.feature-restriction-no-left-turn{background-position:-1100px -25px;}
4519 .preset-icon-relation.feature-restriction-no-right-turn{background-position:-1160px -25px;}
4520 .preset-icon-relation.feature-restriction-only-straight-on{background-position:-1220px -25px;}
4521 .preset-icon-relation.feature-restriction-only-left-turn{background-position:-1280px -25px;}
4522 .preset-icon-relation.feature-restriction-only-right-turn{background-position:-1340px -25px;}