vendor/assets/iD/iD.css.erb

   1 /* http://meyerweb.com/eric/tools/css/reset/
   2    v2.0 | 20110126
   3    License: none (public domain)
   4 */
   5
   6 html, body, div, span, applet, object, iframe,
   7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   8 a, abbr, acronym, address, big, cite, code,
   9 del, dfn, em, img, ins, kbd, q, s, samp,
  10 small, strike, strong, sub, sup, tt, var,
  11 b, u, i, center,
  12 dl, dt, dd, ol, ul, li,
  13 fieldset, form, label, legend,
  14 table, caption, tbody, tfoot, thead, tr, th, td,
  15 article, aside, canvas, details, embed,
  16 figure, figcaption, footer, header, hgroup,
  17 menu, nav, output, ruby, section, summary,
  18 time, mark, audio, video {
  19         margin: 0;
  20         padding: 0;
  21         border: 0;
  22         font-size: 100%;
  23         font: inherit;
  24         vertical-align: baseline;
  25 }
  26 /* HTML5 display-role reset for older browsers */
  27 article, aside, details, figcaption, figure,
  28 footer, header, hgroup, menu, nav, section {
  29         display: block;
  30 }
  31 body {
  32         line-height: 1;
  33 }
  34 ol, ul {
  35         list-style: none;
  36 }
  37 blockquote, q {
  38         quotes: none;
  39 }
  40 blockquote:before, blockquote:after,
  41 q:before, q:after {
  42         content: '';
  43         content: none;
  44 }
  45 table {
  46         border-collapse: collapse;
  47         border-spacing: 0;
  48 }
  49 a { text-decoration: none;}
  50 /*
  51  * 1. Corrects font family not being inherited in all browsers.
  52  * 2. Corrects font size not being inherited in all browsers.
  53  * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
  54  */
  55
  56 button,
  57 input,
  58 select,
  59 textarea {
  60     font-family: inherit; /* 1 */
  61     font-size: 100%; /* 2 */
  62     margin: 0; /* 3 */
  63     padding: 0;
  64 }
  65
  66 /*
  67  * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
  68  * the UA stylesheet.
  69  */
  70
  71 button,
  72 input {
  73     line-height: normal;
  74 }
  75
  76 /* Hide default number spinner controls */
  77 input[type="number"]::-webkit-inner-spin-button,
  78 input[type="number"]::-webkit-outer-spin-button {
  79 display: none;
  80 }
  81
  82 /*
  83  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  84  *    and `video` controls.
  85  * 2. Corrects inability to style clickable `input` types in iOS.
  86  * 3. Improves usability and consistency of cursor style between image-type
  87  *    `input` and others.
  88  */
  89
  90 button,
  91 html input[type="button"], /* 1 */
  92 input[type="reset"],
  93 input[type="submit"] {
  94     -webkit-appearance: button; /* 2 */
  95     cursor: pointer; /* 3 */
  96 }
  97
  98 /*
  99  * Re-set default cursor for disabled elements.
 100  */
 101
 102 button[disabled],
 103 input[disabled] {
 104     cursor: default;
 105 }
 106
 107 /*
 108  * 1. Addresses box sizing set to `content-box` in IE 8/9.
 109  * 2. Removes excess padding in IE 8/9.
 110  */
 111
 112 input[type="checkbox"],
 113 input[type="radio"] {
 114     box-sizing: border-box; /* 1 */
 115     padding: 0; /* 2 */
 116 }
 117
 118 /*
 119  * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 120  * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 121  *    (include `-moz` to future-proof).
 122  */
 123
 124 input[type="search"] {
 125     -webkit-appearance: textfield; /* 1 */
 126     -moz-box-sizing: border-box;
 127     -webkit-box-sizing: border-box; /* 2 */
 128     box-sizing: border-box;
 129 }
 130
 131 /*
 132  * Removes inner padding and search cancel button in Safari 5 and Chrome
 133  * on OS X.
 134  */
 135
 136 input[type="search"]::-webkit-search-cancel-button,
 137 input[type="search"]::-webkit-search-decoration {
 138     -webkit-appearance: none;
 139 }
 140
 141 /*
 142  * Removes inner padding and border in Firefox 4+.
 143  */
 144
 145 button::-moz-focus-inner,
 146 input::-moz-focus-inner {
 147     border: 0;
 148     padding: 0;
 149 }
 150
 151 /*
 152 ** Markup free clearing
 153 ** Details: http://www.positioniseverything.net/easyclearing.html
 154 */
 155 .cf:before,
 156 .cf:after {
 157     content: " "; /* 1 */
 158     display: table; /* 2 */
 159 }
 160
 161 .cf:after {
 162     clear: both;
 163 }
 164 /* base styles */
 165 .layer-osm path:not(.oneway-marker-path) {                /* IE/Edge needs :not(.oneway) */
 166     fill: none;
 167 }
 168 .layer-osm path.viewfield-marker-path {                   /* IE/Edge rule for <use> marker style */
 169     fill: #333;
 170     fill-opacity: 0.75;
 171     stroke: #fff;
 172     stroke-width: 0.5px;
 173     stroke-opacity: 0.75;
 174 }
 175 .fill-wireframe .layer-osm path.viewfield-marker-path {   /* IE/Edge rule for <use> marker style */
 176     fill: none;
 177 }
 178
 179 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
 180 .layer-osm use.icon path { fill: #333; }                       /* FF svg Maki icons */
 181 .layer-osm .turn use path { fill: #000; }                      /* FF turn restriction icons */
 182 #turn-only-shape2, #turn-only-u-shape2 { fill: #7092ff; }      /* FF turn-only, turn-only-u */
 183 #turn-no-shape2, #turn-no-u-shape2     { fill: #e06d5f; }      /* FF turn-no, turn-no-u */
 184 #turn-yes-shape2, #turn-yes-u-shape2   { fill: #8cd05f; }      /* FF turn-yes, turn-yes-u */
 185
 186
 187 /* No interactivity except what we specifically allow */
 188 .layer-osm * {
 189     pointer-events: none;
 190 }
 191
 192 .lasso #map {
 193     pointer-events: visibleStroke;
 194 }
 195
 196
 197 /* `.target` objects are interactive */
 198 /* They can be picked up, clicked, hovered, or things can connect to them */
 199 .node.target {
 200     pointer-events: fill;
 201     fill-opacity: 0.8;
 202     fill: currentColor;
 203     stroke: none;
 204 }
 205
 206 .way.target {
 207     pointer-events: stroke;
 208     fill: none;
 209     stroke-width: 12;
 210     stroke-opacity: 0.8;
 211     stroke: currentColor;
 212     stroke-linecap: round;
 213     stroke-linejoin: round;
 214 }
 215
 216 /* `.target-nope` objects are explicitly forbidden to join to */
 217 .surface:not(.nope-disabled) .node.target.target-nope,
 218 .surface:not(.nope-disabled) .way.target.target-nope {
 219     cursor: not-allowed;
 220 }
 221
 222
 223 /* `.active` objects (currently being drawn or dragged) are not interactive */
 224 /* This is important to allow the events to drop through to whatever is */
 225 /* below them on the map, so you can still hover and connect to other things. */
 226 .layer-osm .active {
 227     pointer-events: none !important;
 228 }
 229
 230
 231 /* points & notes */
 232
 233 g.note .stroke {
 234     stroke: #222;
 235     stroke-width: 1;
 236     fill: #222;
 237     opacity: 0.6;
 238 }
 239
 240 g.note.active .stroke {
 241     stroke: #222;
 242     stroke-width: 1;
 243     fill: #222;
 244     opacity: 0.8;
 245 }
 246
 247 g.point .stroke {
 248     stroke: #444;
 249     stroke-width: 1;
 250     fill: #fff;
 251 }
 252
 253 g.point .shadow,
 254 g.note .shadow {
 255     fill: none;
 256     stroke: #f6634f;
 257     stroke-width: 16;
 258     stroke-opacity: 0;
 259 }
 260
 261 g.note.related:not(.selected) .shadow,
 262 g.note.hover:not(.selected) .shadow,
 263 g.point.related:not(.selected) .shadow,
 264 g.point.hover:not(.selected) .shadow {
 265     stroke-opacity: 0.5;
 266 }
 267
 268 g.note.selected .shadow,
 269 g.point.selected .shadow {
 270     stroke-opacity: 0.7;
 271 }
 272
 273 /* g.note ellipse.stroke, */
 274 g.point ellipse.stroke {
 275     display: none;
 276 }
 277 .mode-drag-note g.note.active ellipse.stroke,
 278 .mode-drag-node g.point.active ellipse.stroke {
 279     display: block;
 280 }
 281
 282
 283 /* vertices and midpoints */
 284
 285 g.vertex .fill {
 286     fill: #000;
 287 }
 288
 289 g.vertex .stroke {
 290     stroke: #666;
 291     stroke-width: 1;
 292     fill: white;
 293 }
 294
 295 g.vertex.shared .stroke {
 296     fill: #bbb;
 297 }
 298
 299 g.midpoint .fill {
 300     fill: #eee;
 301     stroke: #444;
 302     stroke-opacity: .6;
 303     opacity: .7;
 304 }
 305
 306 g.vertex .shadow,
 307 g.midpoint .shadow {
 308     stroke-width: 6;
 309     fill: #f6634f;
 310     fill-opacity: 0;
 311 }
 312
 313 g.vertex.related:not(.selected) .shadow,
 314 g.vertex.hover:not(.selected) .shadow,
 315 g.midpoint.related:not(.selected) .shadow,
 316 g.midpoint.hover:not(.selected) .shadow {
 317     fill-opacity: 0.5;
 318 }
 319
 320 g.vertex.selected .shadow {
 321     fill-opacity: 0.7;
 322 }
 323
 324
 325 /* lines */
 326
 327 .preset-icon .icon.iD-other-line {
 328     color: #fff;
 329     fill: #777;
 330 }
 331
 332 path.line {
 333     stroke-linecap: round;
 334     stroke-linejoin: round;
 335 }
 336
 337 path.stroke {
 338     stroke: #000;
 339     stroke-width: 4;
 340 }
 341
 342 path.shadow {
 343     stroke: #f6634f;
 344     stroke-width: 16;
 345     stroke-opacity: 0;
 346 }
 347
 348 path.shadow.related:not(.selected),
 349 path.shadow.hover:not(.selected) {
 350     stroke-opacity: 0.4;
 351 }
 352
 353 path.shadow.selected {
 354     stroke-opacity: 0.7;
 355 }
 356
 357 path.line.stroke {
 358     stroke: #fff;
 359     stroke-width: 2;
 360 }
 361
 362
 363 /* Labels / Markers */
 364
 365 text {
 366     font-size: 10px;
 367     color: #222;
 368     opacity: 1;
 369 }
 370
 371 .oneway .textpath.tag-waterway {
 372     fill: #002F35;
 373 }
 374
 375 .onewaygroup path.oneway,
 376 .viewfieldgroup path.viewfield {
 377     stroke-width: 6px;
 378 }
 379
 380 text.arealabel-halo,
 381 text.linelabel-halo,
 382 text.pointlabel-halo,
 383 text.arealabel,
 384 text.linelabel,
 385 text.pointlabel {
 386     dominant-baseline: middle;
 387     text-anchor: middle;
 388     font-size: 12px;
 389     font-weight: bold;
 390     fill: #333;
 391     -webkit-transition: opacity 100ms linear;
 392     transition: opacity 100ms linear;
 393     -moz-transition: opacity 100ms linear;
 394 }
 395
 396 /* Opera doesn't support dominant-baseline. See #715 */
 397 /* Safari 10 seems to have regressed too */
 398 .linelabel-halo .textpath,
 399 .linelabel .textpath {
 400   baseline-shift: -33%;
 401   dominant-baseline: auto;
 402 }
 403
 404 .layer-labels-halo text {
 405     opacity: 0.7;
 406     stroke: #fff;
 407     stroke-width: 5px;
 408     stroke-miterlimit: 1;
 409 }
 410
 411 text.nolabel {
 412     opacity: 0;
 413 }
 414
 415 text.point {
 416     font-size: 10px;
 417 }
 418
 419 .icon.areaicon-halo {
 420     opacity: 0.6;
 421     stroke: #999;
 422     stroke-width: 2px;
 423     stroke-miterlimit: 1;
 424 }
 425
 426 .icon.areaicon {
 427     fill: #222;
 428     opacity: 0.8;
 429 }
 430
 431
 432 /* Turn Restrictions */
 433
 434 g.turn rect,
 435 g.turn circle {
 436     fill: none;
 437     pointer-events: all;
 438 }
 439
 440 .form-field-restrictions .vertex {
 441     cursor: auto !important;
 442     pointer-events: none;
 443 }
 444
 445 /* Turn restriction paths and vertices */
 446 .surface.tr .way.target,
 447 .surface.tr path.shadow.selected,
 448 .surface.tr path.shadow.related {
 449     stroke-width: 25px;
 450 }
 451
 452 .surface.tr path.shadow.selected,
 453 .surface.tr path.shadow.related,
 454 .surface.tr g.vertex.selected .shadow,
 455 .surface.tr g.vertex.related .shadow {
 456     stroke-opacity: 0.7;
 457     stroke: #777;
 458 }
 459 .surface.tr path.shadow.related.allow,
 460 .surface.tr g.vertex.related.allow .shadow {
 461     stroke: #5b3;
 462 }
 463 .surface.tr path.shadow.related.restrict,
 464 .surface.tr g.vertex.related.restrict .shadow {
 465     stroke: #d53;
 466 }
 467 .surface.tr path.shadow.related.only,
 468 .surface.tr g.vertex.related.only .shadow {
 469     stroke: #68f;
 470 }
 471
 472
 473 /* GPX Paths */
 474
 475 .layer-gpx {
 476     pointer-events: none;
 477 }
 478
 479 path.gpx {
 480     stroke: #ff26d4;
 481     stroke-width: 2;
 482     fill: none;
 483 }
 484
 485 text.gpxlabel-halo,
 486 text.gpxlabel {
 487     font-size: 10px;
 488     font-weight: bold;
 489     dominant-baseline: middle;
 490 }
 491
 492 text.gpxlabel {
 493     fill: #ff26d4;
 494 }
 495
 496 text.gpxlabel-halo {
 497     opacity: 0.7;
 498     stroke: #000;
 499     stroke-width: 5px;
 500     stroke-miterlimit: 1;
 501 }
 502
 503 /* MVT Paths */
 504
 505 .layer-mvt {
 506     pointer-events: none;
 507 }
 508
 509 path.mvt {
 510     stroke: #ff26d4;
 511     stroke-width: 2;
 512     fill: none;
 513 }
 514
 515 text.mvtlabel-halo,
 516 text.mvtlabel {
 517     font-size: 10px;
 518     font-weight: bold;
 519     dominant-baseline: middle;
 520 }
 521
 522 text.mvtlabel {
 523     fill: #ff26d4;
 524 }
 525
 526 text.mvtlabel-halo {
 527     opacity: 0.7;
 528     stroke: #000;
 529     stroke-width: 5px;
 530     stroke-miterlimit: 1;
 531 }
 532
 533 /* Default - light gray */
 534 path.area.stroke {
 535     stroke: #ddd;
 536     stroke-width: 1;
 537 }
 538 path.area.fill {
 539     stroke-width: 0;
 540     stroke: rgba(255, 255, 255, 0.3);
 541     fill: rgba(255, 255, 255, 0.3);
 542     fill-rule: evenodd;
 543 }
 544 .preset-icon-fill-area {
 545     border: 1px solid rgb(170, 170, 170);
 546     background-color: rgba(170, 170, 170, 0.3);
 547 }
 548
 549 path.shadow.old-multipolygon,
 550 path.stroke.old-multipolygon {
 551     stroke-dasharray: 100, 5;
 552     stroke-linecap: butt;
 553 }
 554
 555 /* Green things */
 556 path.stroke.tag-landuse,
 557 path.stroke.tag-natural,
 558 path.stroke.tag-leisure-nature_reserve,
 559 path.stroke.tag-leisure-pitch,
 560 path.stroke.tag-leisure-park {
 561     stroke: rgb(140, 208, 95);
 562 }
 563 path.fill.tag-landuse,
 564 path.fill.tag-natural,
 565 path.fill.tag-leisure-nature_reserve,
 566 path.fill.tag-leisure-pitch,
 567 path.fill.tag-leisure-park {
 568     stroke: rgba(140, 208, 95, 0.3);
 569     fill: rgba(140, 208, 95, 0.3);
 570 }
 571 .preset-icon-fill-area.tag-landuse,
 572 .preset-icon-fill-area.tag-natural,
 573 .preset-icon-fill-area.tag-leisure-nature_reserve,
 574 .preset-icon-fill-area.tag-leisure-pitch,
 575 .preset-icon-fill-area.tag-leisure-park {
 576     border-color: rgb(140, 208, 95);
 577     background-color: rgba(140, 208, 95, 0.3);
 578 }
 579
 580 /* Blue things */
 581 path.stroke.tag-amenity-swimming_pool,
 582 path.stroke.tag-leisure-swimming_pool,
 583 path.stroke.tag-natural-water,
 584 path.stroke.tag-landuse-aquaculture,
 585 path.stroke.tag-landuse-basin,
 586 path.stroke.tag-landuse-harbour,
 587 path.stroke.tag-landuse-reservoir {
 588     stroke: rgb(119, 211, 222);
 589 }
 590 path.fill.tag-amenity-swimming_pool,
 591 path.fill.tag-leisure-swimming_pool,
 592 path.fill.tag-landuse-aquaculture,
 593 path.fill.tag-landuse-basin,
 594 path.fill.tag-landuse-harbour,
 595 path.fill.tag-landuse-reservoir,
 596 path.fill.tag-natural-water {
 597     stroke: rgba(119, 211, 222, 0.3);
 598     fill: rgba(119, 211, 222, 0.3);
 599 }
 600 .preset-icon-fill-area.tag-amenity-swimming_pool,
 601 .preset-icon-fill-area.tag-leisure-swimming_pool,
 602 .preset-icon-fill-area.tag-landuse-aquaculture,
 603 .preset-icon-fill-area.tag-landuse-basin,
 604 .preset-icon-fill-area.tag-landuse-harbour,
 605 .preset-icon-fill-area.tag-landuse-reservoir,
 606 .preset-icon-fill-area.tag-natural-water {
 607     border-color: rgb(119, 211, 222);
 608     background-color: rgba(119, 211, 222, 0.3);
 609 }
 610
 611 /* Yellow things */
 612 .pattern-color-beach,
 613 .pattern-color-sand,
 614 .pattern-color-scrub {
 615     fill: rgba(255, 255, 148, 0.2);
 616 }
 617 path.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
 618 path.stroke.tag-natural-beach,
 619 path.stroke.tag-natural-sand,
 620 path.stroke.tag-natural-scrub,
 621 path.stroke.tag-amenity-childcare,
 622 path.stroke.tag-amenity-kindergarten,
 623 path.stroke.tag-amenity-school,
 624 path.stroke.tag-amenity-college,
 625 path.stroke.tag-amenity-university {
 626     stroke: rgba(255, 255, 148, 0.75);
 627 }
 628 path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
 629 path.fill.tag-natural-beach,
 630 path.fill.tag-natural-sand,
 631 path.fill.tag-natural-scrub,
 632 path.fill.tag-amenity-childcare,
 633 path.fill.tag-amenity-kindergarten,
 634 path.fill.tag-amenity-school,
 635 path.fill.tag-amenity-college,
 636 path.fill.tag-amenity-university {
 637     stroke: rgba(255, 255, 148, 0.15);
 638     fill: rgba(255, 255, 148, 0.15);
 639 }
 640 .preset-icon-fill-area.tag-leisure-pitch.tag-sport-beachvolleyball,
 641 .preset-icon-fill-area.tag-natural-beach,
 642 .preset-icon-fill-area.tag-natural-sand,
 643 .preset-icon-fill-area.tag-natural-scrub,
 644 .preset-icon-fill-area.tag-amenity-childcare,
 645 .preset-icon-fill-area.tag-amenity-kindergarten,
 646 .preset-icon-fill-area.tag-amenity-school,
 647 .preset-icon-fill-area.tag-amenity-college,
 648 .preset-icon-fill-area.tag-amenity-university {
 649     border-color: rgb(232, 232, 0);
 650     background-color: rgba(255, 255, 148, 0.15);
 651 }
 652
 653 /* Gold things */
 654 .pattern-color-construction {
 655     fill: rgba(196, 189, 25, 0.3);
 656 }
 657 path.stroke.tag-landuse-residential,
 658 path.stroke.tag-landuse.tag-status,
 659 path.stroke.tag-landuse-construction {
 660     stroke: rgb(196, 189, 25);
 661 }
 662 path.fill.tag-landuse-residential {
 663     stroke: rgba(196, 189, 25, 0.3);
 664     fill: rgba(196, 189, 25, 0.3);
 665 }
 666 .preset-icon-fill-area.tag-landuse-residential,
 667 .preset-icon-fill-area.tag-landuse.tag-status,
 668 .preset-icon-fill-area.tag-landuse-construction {
 669     border-color: rgb(196, 189, 25);
 670     background: rgba(196, 189, 25, 0.3);
 671 }
 672
 673 /* Orange things */
 674 path.stroke.tag-landuse-retail,
 675 path.stroke.tag-landuse-commercial,
 676 path.stroke.tag-landuse-landfill,
 677 path.stroke.tag-military,
 678 path.stroke.tag-landuse-military {
 679     stroke: rgb(214, 136, 26);
 680 }
 681 path.fill.tag-landuse-retail,
 682 path.fill.tag-landuse-commercial,
 683 path.fill.tag-landuse-landfill,
 684 path.fill.tag-military,
 685 path.fill.tag-landuse-military {
 686     stroke: rgba(214, 136, 26, 0.3);
 687     fill: rgba(214, 136, 26, 0.3);
 688 }
 689 .preset-icon-fill-area.tag-landuse-retail,
 690 .preset-icon-fill-area.tag-landuse-commercial,
 691 .preset-icon-fill-area.tag-landuse-landfill,
 692 .preset-icon-fill-area.tag-military,
 693 .preset-icon-fill-area.tag-landuse-military {
 694     border-color: rgb(214, 136, 26);
 695     background-color: rgba(214, 136, 26, 0.3);
 696 }
 697
 698 /* Pink things */
 699 path.stroke.tag-landuse-industrial,
 700 path.stroke.tag-power-plant {
 701     stroke: rgb(228, 164, 245);
 702 }
 703 path.fill.tag-landuse-industrial,
 704 path.fill.tag-power-plant {
 705     stroke: rgba(228, 164, 245, 0.3);
 706     fill: rgba(228, 164, 245, 0.3);
 707 }
 708 .preset-icon-fill-area.tag-landuse-industrial,
 709 .preset-icon-fill-area.tag-power-plant {
 710     border-color: rgb(228, 164, 245);
 711     background-color: rgba(228, 164, 245, 0.3);
 712 }
 713
 714 /* Teal things */
 715 .pattern-color-wetland {
 716     fill: rgba(153, 225, 170, 0.3);
 717 }
 718 path.stroke.tag-natural-wetland {
 719     stroke: rgb(153, 225, 170);
 720 }
 721 .preset-icon-fill-area.tag-natural-wetland {
 722     border-color: rgb(153, 225, 170);
 723     background-color: rgba(153, 225, 170, 0.2);
 724 }
 725
 726 /* Light Green things */
 727 .pattern-color-cemetery,
 728 .pattern-color-orchard,
 729 .pattern-color-meadow,
 730 .pattern-color-farm,
 731 .pattern-color-farmland {
 732     fill: rgba(191, 232, 63, 0.2);
 733 }
 734 path.stroke.tag-landuse-cemetery,
 735 path.stroke.tag-landuse-orchard,
 736 path.stroke.tag-landuse-meadow,
 737 path.stroke.tag-landuse-farm,
 738 path.stroke.tag-landuse-farmland {
 739     stroke: rgb(191, 232, 63);
 740 }
 741 .preset-icon-fill-area.tag-landuse-cemetery,
 742 .preset-icon-fill-area.tag-landuse-orchard,
 743 .preset-icon-fill-area.tag-landuse-meadow,
 744 .preset-icon-fill-area.tag-landuse-farm,
 745 .preset-icon-fill-area.tag-landuse-farmland {
 746     background-color: rgba(191, 232, 63, 0.2);
 747 }
 748
 749 /* Tan things */
 750 path.stroke.tag-landuse-farmyard {
 751     stroke: rgb(245, 220, 186);
 752 }
 753 path.fill.tag-landuse-farmyard {
 754     stroke: rgba(245, 220, 186, 0.3);
 755     fill: rgba(245, 220, 186, 0.3);
 756 }
 757 .preset-icon-fill-area.tag-landuse-farmyard {
 758     border-color: rgb(226, 177, 111);
 759     background: rgba(245, 220, 186, 0.3);
 760 }
 761
 762 /* Dark Gray things */
 763 path.stroke.tag-amenity-parking,
 764 path.stroke.tag-leisure-pitch.tag-sport-basketball,
 765 path.stroke.tag-leisure-pitch.tag-sport-skateboard,
 766 path.stroke.tag-natural-bare_rock,
 767 path.stroke.tag-natural-scree,
 768 path.stroke.tag-landuse-railway,
 769 path.stroke.tag-landuse-quarry {
 770     stroke: #bbb;
 771 }
 772 path.fill.tag-amenity-parking,
 773 path.fill.tag-leisure-pitch.tag-sport-basketball,
 774 path.fill.tag-leisure-pitch.tag-sport-skateboard,
 775 path.fill.tag-natural-bare_rock,
 776 path.fill.tag-natural-scree,
 777 path.fill.tag-landuse-railway,
 778 path.fill.tag-landuse-quarry {
 779     stroke: rgba(140, 140, 140, 0.5);
 780     fill: rgba(140, 140, 140, 0.5);
 781 }
 782 .preset-icon-fill-area.tag-amenity-parking,
 783 .preset-icon-fill-area.tag-leisure-pitch.tag-sport-basketball,
 784 .preset-icon-fill-area.tag-leisure-pitch.tag-sport-skateboard,
 785 .preset-icon-fill-area.tag-natural-bare_rock,
 786 .preset-icon-fill-area.tag-natural-scree,
 787 .preset-icon-fill-area.tag-landuse-railway,
 788 .preset-icon-fill-area.tag-landuse-quarry {
 789     border-color: rgb(170, 170, 170);
 790     background-color: rgba(140, 140, 140, 0.5);
 791 }
 792
 793 /* Light gray overrides */
 794 path.stroke.tag-natural-cave_entrance,
 795 path.stroke.tag-natural-glacier {
 796     stroke: #ddd;
 797 }
 798 path.fill.tag-natural-cave_entrance,
 799 path.fill.tag-natural-glacier {
 800     stroke: rgba(255, 255, 255, 0.3);
 801     fill: rgba(255, 255, 255, 0.3);
 802 }
 803 .preset-icon-fill-area.tag-natural-cave_entrance,
 804 .preset-icon-fill-area.tag-natural-glacier {
 805     border-color: rgb(170, 170, 170);
 806     background: rgba(170, 170, 170, 0.3);
 807 }
 808
 809 /* highways */
 810
 811 .preset-icon .icon.tag-highway.other-line {
 812     color: #fff;
 813     fill: #777;
 814 }
 815 path.casing.tag-highway {
 816     stroke: #444;
 817 }
 818 path.stroke.tag-highway {
 819     stroke: #ccc;
 820 }
 821
 822 /* highway areas */
 823
 824 path.stroke.area.tag-highway,
 825 .low-zoom path.stroke.area.tag-highway {
 826     stroke: #fff;
 827     stroke-dasharray: none;
 828     stroke-width: 1;
 829 }
 830
 831 /* wide highways */
 832
 833 path.shadow.tag-highway {
 834     stroke-width: 20;
 835 }
 836 path.casing.tag-highway {
 837     stroke-width: 10;
 838 }
 839 path.stroke.tag-highway {
 840     stroke-width: 8;
 841 }
 842
 843 .low-zoom path.shadow.tag-highway {
 844     stroke-width: 16;
 845 }
 846 .low-zoom path.casing.tag-highway {
 847     stroke-width: 7;
 848 }
 849 .low-zoom path.stroke.tag-highway {
 850     stroke-width: 5;
 851 }
 852
 853 .preset-icon .icon.iD-highway-motorway,
 854 .preset-icon .icon.iD-highway-motorway-link {
 855     color: #CF2081;
 856     fill: #70372f;
 857 }
 858 path.stroke.tag-highway-motorway,
 859 path.stroke.tag-highway-motorway_link,
 860 path.stroke.tag-motorway {
 861     stroke: #CF2081;
 862 }
 863 path.casing.tag-highway-motorway,
 864 path.casing.tag-highway-motorway_link,
 865 path.casing.tag-motorway {
 866     stroke: #70372f;
 867 }
 868
 869 .preset-icon .icon.iD-highway-trunk,
 870 .preset-icon .icon.iD-highway-trunk-link {
 871     color: #DD2F22;
 872     fill: #70372f;
 873 }
 874 path.stroke.tag-highway-trunk,
 875 path.stroke.tag-highway-trunk_link,
 876 path.stroke.tag-trunk {
 877     stroke: #DD2F22;
 878 }
 879 path.casing.tag-highway-trunk,
 880 path.casing.tag-highway-trunk_link,
 881 path.casing.tag-trunk {
 882     stroke: #70372f;
 883 }
 884
 885 .preset-icon .icon.iD-highway-primary,
 886 .preset-icon .icon.iD-highway-primary-link {
 887     color: #F99806;
 888     fill: #70372f;
 889 }
 890 path.stroke.tag-highway-primary,
 891 path.stroke.tag-highway-primary_link,
 892 path.stroke.tag-primary {
 893     stroke: #F99806;
 894 }
 895 path.casing.tag-highway-primary,
 896 path.casing.tag-highway-primary_link,
 897 path.casing.tag-primary {
 898     stroke: #70372f;
 899 }
 900
 901 .preset-icon .icon.iD-highway-secondary,
 902 .preset-icon .icon.iD-highway-secondary-link {
 903     color: #F3F312;
 904     fill: #70372f;
 905 }
 906 path.stroke.tag-highway-secondary,
 907 path.stroke.tag-highway-secondary_link,
 908 path.stroke.tag-secondary {
 909     stroke: #F3F312;
 910 }
 911 path.casing.tag-highway-secondary,
 912 path.casing.tag-highway-secondary_link,
 913 path.casing.tag-secondary {
 914     stroke: #70372f;
 915 }
 916
 917 .preset-icon .icon.iD-highway-tertiary,
 918 .preset-icon .icon.iD-highway-tertiary-link {
 919     color: #FFF9B3;
 920     fill: #70372f;
 921 }
 922 path.stroke.tag-highway-tertiary,
 923 path.stroke.tag-highway-tertiary_link,
 924 path.stroke.tag-tertiary {
 925     stroke: #FFF9B3;
 926 }
 927 path.casing.tag-highway-tertiary,
 928 path.casing.tag-highway-tertiary_link,
 929 path.casing.tag-tertiary {
 930     stroke: #70372f;
 931 }
 932
 933 .legacy-carto .preset-icon .icon.iD-highway-motorway,
 934 .legacy-carto .preset-icon .icon.iD-highway-motorway-link {
 935     color: #58a9ed;
 936     fill: #2c5476;
 937 }
 938 .legacy-carto path.stroke.tag-highway-motorway,
 939 .legacy-carto path.stroke.tag-highway-motorway_link,
 940 .legacy-carto path.stroke.tag-motorway {
 941     stroke: #58a9ed;
 942 }
 943 .legacy-carto path.casing.tag-highway-motorway,
 944 .legacy-carto path.casing.tag-highway-motorway_link,
 945 .legacy-carto path.casing.tag-motorway {
 946     stroke: #2c5476;
 947 }
 948
 949 .legacy-carto .preset-icon .icon.iD-highway-trunk,
 950 .legacy-carto .preset-icon .icon.iD-highway-trunk-link {
 951     color: #8cd05f;
 952     fill: #46682f;
 953 }
 954 .legacy-carto path.stroke.tag-highway-trunk,
 955 .legacy-carto path.stroke.tag-highway-trunk_link,
 956 .legacy-carto path.stroke.tag-trunk {
 957     stroke: #8cd05f;
 958 }
 959 .legacy-carto path.casing.tag-highway-trunk,
 960 .legacy-carto path.casing.tag-highway-trunk_link,
 961 .legacy-carto path.casing.tag-trunk {
 962     stroke: #46682f;
 963 }
 964
 965 .legacy-carto .preset-icon .icon.iD-highway-primary,
 966 .legacy-carto .preset-icon .icon.iD-highway-primary-link {
 967     color: #e06d5f;
 968     fill: #70372f;
 969 }
 970 .legacy-carto path.stroke.tag-highway-primary,
 971 .legacy-carto path.stroke.tag-highway-primary_link,
 972 .legacy-carto path.stroke.tag-primary {
 973     stroke: #e06d5f;
 974 }
 975 .legacy-carto path.casing.tag-highway-primary,
 976 .legacy-carto path.casing.tag-highway-primary_link,
 977 .legacy-carto path.casing.tag-primary {
 978     stroke: #70372f;
 979 }
 980
 981 .legacy-carto .preset-icon .icon.iD-highway-secondary,
 982 .legacy-carto .preset-icon .icon.iD-highway-secondary-link {
 983     color: #eab056;
 984     fill: #75582b;
 985 }
 986 .legacy-carto path.stroke.tag-highway-secondary,
 987 .legacy-carto path.stroke.tag-highway-secondary_link,
 988 .legacy-carto path.stroke.tag-secondary {
 989     stroke: #eab056;
 990 }
 991 .legacy-carto path.casing.tag-highway-secondary,
 992 .legacy-carto path.casing.tag-highway-secondary_link,
 993 .legacy-carto path.casing.tag-secondary {
 994     stroke: #75582b;
 995 }
 996
 997 .legacy-carto .preset-icon .icon.iD-highway-tertiary,
 998 .legacy-carto .preset-icon .icon.iD-highway-tertiary-link {
 999     color: #ffff7e;
1000     fill: #7f7f3f;
1001 }
1002 .legacy-carto path.stroke.tag-highway-tertiary,
1003 .legacy-carto path.stroke.tag-highway-tertiary_link,
1004 .legacy-carto path.stroke.tag-tertiary {
1005     stroke: #ffff7e;
1006 }
1007 .legacy-carto path.casing.tag-highway-tertiary,
1008 .legacy-carto path.casing.tag-highway-tertiary_link,
1009 .legacy-carto path.casing.tag-tertiary {
1010     stroke: #7f7f3f;
1011 }
1012
1013 .preset-icon .icon.iD-highway-residential {
1014     color: #fff;
1015     fill: #444;
1016 }
1017 path.stroke.tag-highway-residential,
1018 path.stroke.tag-residential {
1019     stroke: #fff;
1020 }
1021 path.casing.tag-highway-residential,
1022 path.casing.tag-residential {
1023     stroke: #444;
1024 }
1025
1026 .preset-icon .icon.iD-highway-unclassified {
1027     color: #dca;
1028     fill: #444;
1029 }
1030 path.stroke.tag-highway-unclassified,
1031 path.stroke.tag-unclassified {
1032     stroke: #dca;
1033 }
1034 path.casing.tag-highway-unclassified,
1035 path.casing.tag-unclassified {
1036     stroke: #444;
1037 }
1038
1039
1040 /* narrow highways */
1041
1042 path.shadow.tag-highway-living_street,
1043 path.shadow.tag-highway-bus_guideway,
1044 path.shadow.tag-highway-service,
1045 path.shadow.tag-highway-track,
1046 path.shadow.tag-highway-road,
1047 path.shadow.tag-living_street,
1048 path.shadow.tag-service,
1049 path.shadow.tag-track,
1050 path.shadow.tag-road {
1051     stroke-width: 16;
1052 }
1053 path.casing.tag-highway-living_street,
1054 path.casing.tag-highway-bus_guideway,
1055 path.casing.tag-highway-service,
1056 path.casing.tag-highway-track,
1057 path.casing.tag-highway-road,
1058 path.casing.tag-living_street,
1059 path.casing.tag-service,
1060 path.casing.tag-track,
1061 path.casing.tag-road {
1062     stroke-width: 7;
1063 }
1064 path.stroke.tag-highway-living_street,
1065 path.stroke.tag-highway-bus_guideway,
1066 path.stroke.tag-highway-service,
1067 path.stroke.tag-highway-track,
1068 path.stroke.tag-highway-road,
1069 path.stroke.tag-living_street,
1070 path.stroke.tag-service,
1071 path.stroke.tag-track,
1072 path.stroke.tag-road {
1073     stroke-width: 5;
1074 }
1075
1076 path.shadow.tag-highway-path,
1077 path.shadow.tag-highway-footway,
1078 path.shadow.tag-highway-cycleway,
1079 path.shadow.tag-highway-bridleway,
1080 path.shadow.tag-highway-corridor,
1081 path.shadow.tag-highway-pedestrian,
1082 path.shadow.tag-highway-steps,
1083 path.shadow.tag-path,
1084 path.shadow.tag-footway,
1085 path.shadow.tag-cycleway,
1086 path.shadow.tag-bridleway,
1087 path.shadow.tag-corridor,
1088 path.shadow.tag-pedestrian,
1089 path.shadow.tag-steps {
1090     stroke-width: 16;
1091 }
1092 path.casing.tag-highway-path,
1093 path.casing.tag-highway-footway,
1094 path.casing.tag-highway-cycleway,
1095 path.casing.tag-highway-bridleway,
1096 path.casing.tag-highway-corridor,
1097 path.casing.tag-highway-pedestrian,
1098 path.casing.tag-highway-steps,
1099 path.casing.tag-path,
1100 path.casing.tag-footway,
1101 path.casing.tag-cycleway,
1102 path.casing.tag-bridleway,
1103 path.casing.tag-corridor,
1104 path.casing.tag-pedestrian,
1105 path.casing.tag-steps {
1106     stroke-width: 5;
1107 }
1108 path.stroke.tag-highway-path,
1109 path.stroke.tag-highway-footway,
1110 path.stroke.tag-highway-cycleway,
1111 path.stroke.tag-highway-bridleway,
1112 path.stroke.tag-highway-corridor,
1113 path.stroke.tag-highway-pedestrian,
1114 path.stroke.tag-highway-steps,
1115 path.stroke.tag-path,
1116 path.stroke.tag-footway,
1117 path.stroke.tag-cycleway,
1118 path.stroke.tag-bridleway,
1119 path.stroke.tag-corridor,
1120 path.stroke.tag-pedestrian,
1121 path.stroke.tag-steps {
1122     stroke-width: 3;
1123 }
1124
1125 .low-zoom path.shadow.tag-highway-living_street,
1126 .low-zoom path.shadow.tag-highway-bus_guideway,
1127 .low-zoom path.shadow.tag-highway-service,
1128 .low-zoom path.shadow.tag-highway-track,
1129 .low-zoom path.shadow.tag-highway-road,
1130 .low-zoom path.shadow.tag-living_street,
1131 .low-zoom path.shadow.tag-service,
1132 .low-zoom path.shadow.tag-track,
1133 .low-zoom path.shadow.tag-road {
1134     stroke-width: 12;
1135 }
1136 .low-zoom path.casing.tag-highway-living_street,
1137 .low-zoom path.casing.tag-highway-bus_guideway,
1138 .low-zoom path.casing.tag-highway-service,
1139 .low-zoom path.casing.tag-highway-track,
1140 .low-zoom path.casing.tag-highway-road,
1141 .low-zoom path.casing.tag-living_street,
1142 .low-zoom path.casing.tag-service,
1143 .low-zoom path.casing.tag-track,
1144 .low-zoom path.casing.tag-road {
1145     stroke-width: 5;
1146 }
1147 .low-zoom path.stroke.tag-highway-living_street,
1148 .low-zoom path.stroke.tag-highway-bus_guideway,
1149 .low-zoom path.stroke.tag-highway-service,
1150 .low-zoom path.stroke.tag-highway-track,
1151 .low-zoom path.stroke.tag-highway-road,
1152 .low-zoom path.stroke.tag-living_street,
1153 .low-zoom path.stroke.tag-service,
1154 .low-zoom path.stroke.tag-track,
1155 .low-zoom path.stroke.tag-road {
1156     stroke-width: 3;
1157 }
1158
1159 .low-zoom path.shadow.tag-highway-path,
1160 .low-zoom path.shadow.tag-highway-footway,
1161 .low-zoom path.shadow.tag-highway-cycleway,
1162 .low-zoom path.shadow.tag-highway-bridleway,
1163 .low-zoom path.shadow.tag-highway-corridor,
1164 .low-zoom path.shadow.tag-highway-pedestrian,
1165 .low-zoom path.shadow.tag-highway-steps,
1166 .low-zoom path.shadow.tag-path,
1167 .low-zoom path.shadow.tag-footway,
1168 .low-zoom path.shadow.tag-cycleway,
1169 .low-zoom path.shadow.tag-bridleway,
1170 .low-zoom path.shadow.tag-corridor,
1171 .low-zoom path.shadow.tag-pedestrian,
1172 .low-zoom path.shadow.tag-steps {
1173     stroke-width: 12;
1174 }
1175 .low-zoom path.casing.tag-highway-path,
1176 .low-zoom path.casing.tag-highway-footway,
1177 .low-zoom path.casing.tag-highway-cycleway,
1178 .low-zoom path.casing.tag-highway-bridleway,
1179 .low-zoom path.casing.tag-highway-corridor,
1180 .low-zoom path.casing.tag-highway-pedestrian,
1181 .low-zoom path.casing.tag-highway-steps,
1182 .low-zoom path.casing.tag-path,
1183 .low-zoom path.casing.tag-footway,
1184 .low-zoom path.casing.tag-cycleway,
1185 .low-zoom path.casing.tag-bridleway,
1186 .low-zoom path.casing.tag-corridor,
1187 .low-zoom path.casing.tag-pedestrian,
1188 .low-zoom path.casing.tag-steps {
1189     stroke-width: 3;
1190 }
1191 .low-zoom path.stroke.tag-highway-path,
1192 .low-zoom path.stroke.tag-highway-footway,
1193 .low-zoom path.stroke.tag-highway-cycleway,
1194 .low-zoom path.stroke.tag-highway-bridleway,
1195 .low-zoom path.stroke.tag-highway-corridor,
1196 .low-zoom path.stroke.tag-highway-pedestrian,
1197 .low-zoom path.stroke.tag-highway-steps,
1198 .low-zoom path.stroke.tag-path,
1199 .low-zoom path.stroke.tag-footway,
1200 .low-zoom path.stroke.tag-cycleway,
1201 .low-zoom path.stroke.tag-bridleway,
1202 .low-zoom path.stroke.tag-corridor,
1203 .low-zoom path.stroke.tag-pedestrian,
1204 .low-zoom path.stroke.tag-steps {
1205     stroke-width: 1;
1206 }
1207
1208
1209 .preset-icon .icon.iD-highway-living-street {
1210     color: #bbb;
1211     fill: #ddd;
1212 }
1213 path.stroke.tag-highway-living_street,
1214 path.stroke.tag-living_street {
1215     stroke: #ccc;
1216 }
1217 path.casing.tag-highway-living_street,
1218 path.casing.tag-living_street {
1219     stroke: #fff;
1220 }
1221
1222 .preset-icon .icon.iD-highway-footway.tag-highway-corridor,
1223 .preset-icon .icon.iD-highway-footway.tag-highway-pedestrian {
1224     color: #8cd05f;
1225     fill: #fff;
1226 }
1227 path.stroke.tag-highway-corridor,
1228 path.stroke.tag-highway-pedestrian,
1229 path.stroke.tag-corridor,
1230 path.stroke.tag-pedestrian {
1231     stroke: #fff;
1232     stroke-dasharray: 2, 8;
1233 }
1234 .low-zoom path.stroke.tag-highway-corridor,
1235 .low-zoom path.stroke.tag-highway-pedestrian,
1236 .low-zoom path.stroke.tag-corridor,
1237 .low-zoom path.stroke.tag-pedestrian {
1238     stroke-dasharray: 1, 4;
1239 }
1240 path.casing.tag-highway-corridor,
1241 path.casing.tag-highway-pedestrian,
1242 path.casing.tag-corridor,
1243 path.casing.tag-pedestrian,
1244 path.casing.tag-highway-corridor.tag-unpaved,
1245 path.casing.tag-highway-pedestrian.tag-unpaved,
1246 path.casing.tag-corridor.tag-unpaved,
1247 path.casing.tag-pedestrian.tag-unpaved {
1248     stroke: #8cd05f;
1249     stroke-linecap: round;
1250     stroke-dasharray: none;
1251 }
1252
1253 .preset-icon .icon.iD-highway-road {
1254     color: #9e9e9e;
1255     fill: #666;
1256 }
1257 path.stroke.tag-highway-road,
1258 path.stroke.tag-road {
1259     stroke: #9e9e9e;
1260 }
1261 path.casing.tag-highway-road,
1262 path.casing.tag-road {
1263     stroke: #666;
1264 }
1265
1266 .preset-icon .icon.iD-highway-service {
1267     color: #fff;
1268     fill: #666;
1269 }
1270 path.stroke.tag-highway-service,
1271 path.stroke.tag-service {
1272     stroke: #fff;
1273 }
1274 path.casing.tag-highway-service,
1275 path.casing.tag-service {
1276     stroke: #666;
1277 }
1278
1279 /* special service roads and bus guideways */
1280 /* with `service=* tag`  (e.g. parking_aisle, alley, drive-through */
1281 .preset-icon .icon.iD-highway-bus_guideway,
1282 .preset-icon .icon.iD-highway-service.tag-service {
1283     color: #dca;
1284     fill: #666;
1285 }
1286 path.stroke.tag-highway-bus_guideway,
1287 path.stroke.tag-highway-service.tag-service,
1288 path.stroke.tag-service.tag-service {
1289     stroke: #dca;
1290 }
1291 path.casing.tag-highway-bus_guideway,
1292 path.casing.tag-highway-service.tag-service,
1293 path.casing.tag-service.tag-service {
1294     stroke: #666;
1295 }
1296
1297 .preset-icon .icon.iD-highway-track {
1298     color: #eaeaea;
1299     fill: #c5b59f;
1300 }
1301 path.stroke.tag-highway-track,
1302 path.stroke.tag-track {
1303     stroke: #c5b59f;
1304 }
1305 path.casing.tag-highway-track,
1306 path.casing.tag-track {
1307     stroke: #746f6f;
1308 }
1309
1310 path.stroke.tag-highway-path,
1311 path.stroke.tag-highway-footway,
1312 path.stroke.tag-highway-cycleway,
1313 path.stroke.tag-highway-bridleway {
1314     stroke-linecap: butt;
1315     stroke-dasharray: 6, 6;
1316 }
1317 .low-zoom path.stroke.tag-highway-path,
1318 .low-zoom path.stroke.tag-highway-footway,
1319 .low-zoom path.stroke.tag-highway-cycleway,
1320 .low-zoom path.stroke.tag-highway-bridleway {
1321     stroke-linecap: butt;
1322     stroke-dasharray: 3, 3;
1323 }
1324
1325 path.casing.tag-highway-path,
1326 path.casing.tag-highway-path.tag-unpaved {
1327     stroke: #dca;
1328     stroke-linecap: round;
1329     stroke-dasharray: none;
1330 }
1331 path.casing.tag-highway-footway,
1332 path.casing.tag-highway-cycleway,
1333 path.casing.tag-highway-bridleway,
1334 path.casing.tag-highway-footway.tag-unpaved,
1335 path.casing.tag-highway-cycleway.tag-unpaved,
1336 path.casing.tag-highway-bridleway.tag-unpaved {
1337     stroke: #fff;
1338     stroke-linecap: round;
1339     stroke-dasharray: none;
1340 }
1341
1342 .preset-icon .icon.iD-category-path,
1343 .preset-icon .icon.iD-highway-path {
1344     color: #988;
1345     fill: #dca;
1346 }
1347 path.stroke.tag-highway-path {
1348     stroke: #988;
1349 }
1350
1351 .preset-icon .icon.tag-route-foot,
1352 .preset-icon .icon.tag-route-hiking,
1353 .preset-icon .icon.iD-highway-footway {
1354     color: #988;
1355     fill: #fff;
1356 }
1357 path.stroke.tag-highway-footway {
1358     stroke: #988;
1359 }
1360
1361
1362 .preset-icon .icon.tag-route-bicycle,
1363 .preset-icon .icon.iD-highway-cycleway {
1364     color: #58a9ed;
1365     fill: #fff;
1366 }
1367 path.stroke.tag-highway-cycleway {
1368     stroke: #58a9ed;
1369 }
1370
1371 .preset-icon .icon.tag-route-horse,
1372 .preset-icon .icon.iD-highway-bridleway {
1373     color: #e06d5f;
1374     fill: #fff;
1375 }
1376 path.stroke.tag-highway-bridleway {
1377     stroke: #e06d5f;
1378 }
1379
1380 .preset-icon .icon.iD-highway-steps {
1381     color: #81d25c;
1382     fill: #fff;
1383 }
1384 path.stroke.tag-highway-steps {
1385     stroke: #81d25c;
1386     stroke-linecap: butt;
1387     stroke-dasharray: 3, 3;
1388 }
1389 .low-zoom path.stroke.tag-highway-steps {
1390     stroke-dasharray: 2, 2;
1391 }
1392 path.casing.tag-highway-steps,
1393 path.casing.tag-highway-steps.tag-unpaved {
1394     stroke: #fff;
1395     stroke-linecap: round;
1396     stroke-dasharray: none;
1397 }
1398
1399 /* highway midpoints */
1400 g.midpoint.tag-highway-corridor .fill,
1401 g.midpoint.tag-highway-pedestrian .fill,
1402 g.midpoint.tag-highway-steps .fill,
1403 g.midpoint.tag-highway-path .fill,
1404 g.midpoint.tag-highway-footway .fill,
1405 g.midpoint.tag-highway-cycleway .fill,
1406 g.midpoint.tag-highway-bridleway .fill {
1407     fill: #fff;
1408     stroke: #333;
1409     stroke-opacity: .8;
1410     opacity: .8;
1411 }
1412 /* aeroways */
1413
1414 /* areas */
1415 path.stroke.area.tag-aeroway,
1416 .low-zoom path.stroke.area.tag-aeroway {
1417     stroke: #fff;
1418     stroke-dasharray: none;
1419     stroke-width: 1;
1420 }
1421
1422 /* narrow aeroways (taxiway) */
1423 path.shadow.tag-aeroway-taxiway,
1424 path.shadow.tag-taxiway {
1425     stroke-width: 16;
1426 }
1427 path.casing.tag-aeroway-taxiway,
1428 path.casing.tag-taxiway {
1429     stroke-width: 7;
1430 }
1431 path.stroke.tag-aeroway-taxiway,
1432 path.stroke.tag-taxiway {
1433     stroke-width: 5;
1434 }
1435
1436 .low-zoom path.shadow.tag-aeroway-taxiway,
1437 .low-zoom path.shadow.tag-taxiway {
1438     stroke-width: 12;
1439 }
1440 .low-zoom path.casing.tag-aeroway-taxiway,
1441 .low-zoom path.casing.tag-taxiway {
1442     stroke-width: 5;
1443 }
1444 .low-zoom path.stroke.tag-aeroway-taxiway,
1445 .low-zoom path.stroke.tag-taxiway {
1446     stroke-width: 3;
1447 }
1448
1449 .preset-icon .icon.tag-aeroway-taxiway,
1450 .preset-icon .icon.tag-taxiway {
1451     color: #ff0;
1452     fill: #666;
1453 }
1454 path.stroke.tag-aeroway-taxiway,
1455 path.stroke.tag-taxiway {
1456     stroke: #ff0;
1457 }
1458 path.casing.tag-aeroway-taxiway,
1459 path.casing.tag-taxiway {
1460     stroke: #666;
1461 }
1462
1463
1464 /* wide aeroways (runway) */
1465 .preset-icon .icon.tag-aeroway-runway,
1466 .preset-icon .icon.tag-runway {
1467     color: #444;
1468     fill: #000;
1469 }
1470 path.shadow.tag-aeroway-runway {
1471     stroke-width: 20;
1472 }
1473 path.casing.tag-aeroway-runway {
1474     stroke-width: 10;
1475     stroke: #000;
1476     stroke-linecap: square;
1477 }
1478 path.stroke.tag-aeroway-runway {
1479     stroke: #fff;
1480     stroke-width: 2;
1481     stroke-linecap: butt;
1482     stroke-dasharray: 24, 48;
1483 }
1484
1485 .low-zoom path.shadow.tag-aeroway-runway {
1486     stroke-width: 16;
1487 }
1488 .low-zoom path.casing.tag-aeroway-runway {
1489     stroke-width: 7;
1490 }
1491 .low-zoom path.stroke.tag-aeroway-runway {
1492     stroke-width: 2;
1493     stroke-dasharray: 12, 24;
1494 }
1495
1496 path.fill.tag-aeroway-runway {
1497     stroke: rgba(0, 0, 0, 0.6);
1498     fill: rgba(0, 0, 0, 0.6);
1499 }
1500
1501 /* railways */
1502 .preset-icon .icon.tag-railway.other-line {
1503     color: #fff;
1504     fill: #777;
1505 }
1506 .preset-icon .icon.tag-railway {
1507     color: #555;
1508     fill: #eee;
1509 }
1510
1511 /* railway areas */
1512 path.stroke.area.tag-railway,
1513 .low-zoom path.stroke.area.tag-railway {
1514     stroke: white;
1515     stroke-width: 1;
1516     stroke-dasharray: none;
1517 }
1518
1519 path.casing.area.tag-railway,
1520 .low-zoom path.casing.area.tag-railway {
1521     stroke: none;
1522 }
1523
1524 /* narrow widths */
1525 path.shadow.tag-railway {
1526     stroke-width: 16;
1527 }
1528 path.casing.tag-railway {
1529     stroke-width: 7;
1530 }
1531 path.stroke.tag-railway {
1532     stroke-width: 2;
1533     stroke-linecap: butt;
1534     stroke-dasharray: 12,12;
1535 }
1536
1537 .low-zoom path.shadow.tag-railway {
1538     stroke-width: 12;
1539 }
1540 .low-zoom path.casing.tag-railway {
1541     stroke-width: 5;
1542 }
1543 .low-zoom path.stroke.tag-railway {
1544     stroke-width: 2;
1545     stroke-dasharray: 6,6;
1546 }
1547
1548
1549 /* styles */
1550 path.casing.tag-railway {
1551     stroke: #555;
1552 }
1553 path.stroke.tag-railway {
1554     stroke: #eee;
1555 }
1556
1557
1558 .preset-icon .icon.tag-railway-disused,
1559 .preset-icon .icon.tag-railway-abandoned {
1560     color: #999;
1561     fill: #eee;
1562 }
1563 path.casing.tag-railway-disused,
1564 path.casing.tag-railway-abandoned {
1565     stroke: #999;
1566 }
1567 path.stroke.tag-railway-disused,
1568 path.stroke.tag-railway-abandoned {
1569     stroke: #eee;
1570 }
1571
1572
1573 .preset-icon .icon.tag-railway-subway {
1574     color: #222;
1575     fill: #bbb;
1576 }
1577 path.casing.tag-railway-subway {
1578     stroke: #222;
1579 }
1580 path.stroke.tag-railway-subway {
1581     stroke: #bbb;
1582 }
1583 /* waterways */
1584 .preset-icon .icon.tag-waterway.other-line {
1585     color: #77d3de;
1586     fill: #77d3de;
1587 }
1588 .preset-icon .icon.iD-category-water,
1589 .preset-icon .icon.tag-route-ferry,
1590 .preset-icon .icon.tag-type-waterway,
1591 .preset-icon .icon.tag-waterway {
1592     color: #77d3de;
1593     fill: #fff;
1594 }
1595
1596 path.fill.tag-waterway {
1597     stroke: rgba(119, 211, 222, 0.3);
1598     fill: rgba(119, 211, 222, 0.3);
1599 }
1600 path.casing.tag-waterway {
1601     stroke: #3d6c71;
1602 }
1603 path.stroke.tag-waterway {
1604     stroke: #77d3de;
1605 }
1606
1607
1608 /* narrow waterways (default) */
1609 path.shadow.tag-waterway {
1610     stroke-width: 16;
1611 }
1612 path.casing.tag-waterway {
1613     stroke-width: 7;
1614 }
1615 path.stroke.tag-waterway {
1616     stroke-width: 5;
1617 }
1618
1619 .low-zoom path.shadow.tag-waterway {
1620     stroke-width: 12;
1621 }
1622 .low-zoom path.casing.tag-waterway {
1623     stroke-width: 5;
1624 }
1625 .low-zoom path.stroke.tag-waterway {
1626     stroke-width: 3;
1627 }
1628
1629
1630 /* wide waterways (river) */
1631 path.shadow.tag-waterway-river {
1632     stroke-width: 20;
1633 }
1634 path.casing.tag-waterway-river {
1635     stroke-width: 10;
1636 }
1637 path.stroke.tag-waterway-river {
1638     stroke-width: 8;
1639 }
1640
1641 .low-zoom path.shadow.tag-waterway-river {
1642     stroke-width: 16;
1643 }
1644 .low-zoom path.casing.tag-waterway-river {
1645     stroke-width: 7;
1646 }
1647 .low-zoom path.stroke.tag-waterway-river {
1648     stroke-width: 5;
1649 }
1650
1651
1652 /* ditch */
1653 .preset-icon .icon.tag-waterway-ditch {
1654     color: #8eabf3;
1655 }
1656 path.stroke.tag-waterway-ditch {
1657     stroke: #8eabf3;
1658 }
1659
1660
1661 /* waterway areas */
1662 path.area.stroke.tag-waterway-dock,
1663 path.area.stroke.tag-waterway-boatyard,
1664 path.area.stroke.tag-waterway-fuel {
1665     stroke: white;
1666     stroke-width: 1;
1667 }
1668 path.area.casing.tag-waterway-dock,
1669 path.area.casing.tag-waterway-boatyard,
1670 path.area.casing.tag-waterway-fuel {
1671     stroke: none;
1672 }
1673 path.area.fill.tag-waterway-dock,
1674 path.area.fill.tag-waterway-boatyard,
1675 path.area.fill.tag-waterway-fuel {
1676     stroke: rgba(255, 255, 255, 0.3);
1677     fill: rgba(255, 255, 255, 0.3);
1678 }
1679
1680 /* power */
1681 .preset-icon .icon.tag-man_made-pipeline,
1682 .preset-icon .icon.tag-power {
1683     color: #939393;
1684     fill: #939393;
1685 }
1686
1687 path.stroke.tag-power {
1688     stroke: #939393;
1689     stroke-width: 2;
1690 }
1691 path.casing.tag-power {
1692     stroke: none;
1693 }
1694
1695
1696 /* boundaries */
1697 path.stroke.tag-boundary {
1698     stroke: #fff;
1699     stroke-width: 2;
1700     stroke-linecap: butt;
1701     stroke-dasharray: 20, 5, 5, 5;
1702 }
1703 path.casing.tag-boundary {
1704     stroke: #82B5FE;
1705     stroke-width: 6;
1706 }
1707
1708 path.casing.tag-boundary-protected_area,
1709 path.casing.tag-boundary-national_park {
1710     stroke: #b0e298;
1711 }
1712
1713
1714 /* Tree Rows */
1715 path.shadow.tag-natural-tree_row {
1716     stroke-width: 16;
1717 }
1718 path.casing.tag-natural-tree_row {
1719     stroke-width: 7;
1720 }
1721 path.stroke.tag-natural-tree_row {
1722     stroke-width: 5;
1723 }
1724
1725 .low-zoom path.shadow.tag-natural-tree_row {
1726     stroke-width: 12;
1727 }
1728 .low-zoom path.casing.tag-natural-tree_row {
1729     stroke-width: 5;
1730 }
1731 .low-zoom path.stroke.tag-natural-tree_row {
1732     stroke-width: 3;
1733 }
1734
1735
1736 /* barriers */
1737 path.stroke.tag-barrier {
1738     stroke: #ddd;
1739     stroke-width: 3px;
1740     stroke-linecap: round;
1741     stroke-dasharray: 15, 5, 1, 5;
1742 }
1743 .low-zoom path.stroke.tag-barrier {
1744     stroke-width: 2px;
1745     stroke-linecap: butt;
1746     stroke-dasharray: 8, 2, 2, 2;
1747 }
1748
1749
1750 /* bridges */
1751 path.casing.tag-bridge {
1752     stroke-opacity: 0.6;
1753     stroke: #000 !important;
1754     stroke-linecap: butt;
1755     stroke-dasharray: none;
1756 }
1757
1758 path.shadow.tag-bridge {
1759     stroke-width: 24;
1760 }
1761 path.casing.tag-bridge {
1762     stroke-width: 16;
1763 }
1764 .low-zoom path.shadow.tag-bridge {
1765     stroke-width: 16;
1766 }
1767 .low-zoom path.casing.tag-bridge {
1768     stroke-width: 10;
1769 }
1770
1771 path.shadow.line.tag-railway.tag-bridge,
1772 path.shadow.tag-highway-living_street.tag-bridge,
1773 path.shadow.tag-highway-path.tag-bridge,
1774 path.shadow.tag-highway-corridor.tag-bridge,
1775 path.shadow.line.tag-highway-pedestrian.tag-bridge,
1776 path.shadow.tag-highway-service.tag-bridge,
1777 path.shadow.tag-highway-track.tag-bridge,
1778 path.shadow.tag-highway-steps.tag-bridge,
1779 path.shadow.tag-highway-footway.tag-bridge,
1780 path.shadow.tag-highway-cycleway.tag-bridge,
1781 path.shadow.tag-highway-bridleway.tag-bridge {
1782     stroke-width: 18;
1783 }
1784 path.casing.line.tag-railway.tag-bridge,
1785 path.casing.tag-highway-living_street.tag-bridge,
1786 path.casing.tag-highway-path.tag-bridge,
1787 path.casing.tag-highway-corridor.tag-bridge,
1788 path.casing.line.tag-highway-pedestrian.tag-bridge,
1789 path.casing.tag-highway-service.tag-bridge,
1790 path.casing.tag-highway-track.tag-bridge,
1791 path.casing.tag-highway-steps.tag-bridge,
1792 path.casing.tag-highway-footway.tag-bridge,
1793 path.casing.tag-highway-cycleway.tag-bridge,
1794 path.casing.tag-highway-bridleway.tag-bridge {
1795     stroke-width: 10;
1796 }
1797
1798 .low-zoom path.shadow.line.tag-railway.tag-bridge,
1799 .low-zoom path.shadow.tag-highway-living_street.tag-bridge,
1800 .low-zoom path.shadow.tag-highway-path.tag-bridge,
1801 .low-zoom path.shadow.tag-highway-corridor.tag-bridge,
1802 .low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge,
1803 .low-zoom path.shadow.tag-highway-service.tag-bridge,
1804 .low-zoom path.shadow.tag-highway-track.tag-bridge,
1805 .low-zoom path.shadow.tag-highway-steps.tag-bridge,
1806 .low-zoom path.shadow.tag-highway-footway.tag-bridge,
1807 .low-zoom path.shadow.tag-highway-cycleway.tag-bridge,
1808 .low-zoom path.shadow.tag-highway-bridleway.tag-bridge {
1809     stroke-width: 14;
1810 }
1811 .low-zoom path.casing.line.tag-railway.tag-bridge,
1812 .low-zoom path.casing.tag-highway-living_street.tag-bridge,
1813 .low-zoom path.casing.tag-highway-path.tag-bridge,
1814 .low-zoom path.casing.tag-highway-corridor.tag-bridge,
1815 .low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge,
1816 .low-zoom path.casing.tag-highway-service.tag-bridge,
1817 .low-zoom path.casing.tag-highway-track.tag-bridge,
1818 .low-zoom path.casing.tag-highway-steps.tag-bridge,
1819 .low-zoom path.casing.tag-highway-footway.tag-bridge,
1820 .low-zoom path.casing.tag-highway-cycleway.tag-bridge,
1821 .low-zoom path.casing.tag-highway-bridleway.tag-bridge {
1822     stroke-width: 6;
1823 }
1824
1825
1826 /* tunnels */
1827 path.stroke.tag-tunnel {
1828     stroke-opacity: 0.3;
1829 }
1830 path.casing.tag-tunnel {
1831     stroke-opacity: 0.5;
1832     stroke-linecap: butt;
1833     stroke-dasharray: none;
1834 }
1835
1836
1837 /* embankments / cuttings */
1838 path.shadow.tag-embankment,
1839 path.shadow.tag-cutting {
1840     stroke-width: 28;
1841 }
1842 path.casing.tag-embankment,
1843 path.casing.tag-cutting {
1844     stroke-opacity: 0.5;
1845     stroke: #000;
1846     stroke-width: 22;
1847     stroke-dasharray: 2, 4;
1848     stroke-linecap: butt;
1849 }
1850
1851 .low-zoom path.shadow.tag-embankment,
1852 .low-zoom path.shadow.tag-cutting {
1853     stroke-width: 14;
1854 }
1855 .low-zoom path.casing.tag-embankment,
1856 .low-zoom path.casing.tag-cutting {
1857     stroke-width: 10;
1858 }
1859
1860
1861 /* Surface - unpaved */
1862 path.casing.tag-unpaved {
1863     stroke: #ccc;
1864     stroke-linecap: butt;
1865     stroke-dasharray: 4, 3;
1866 }
1867 .low-zoom path.casing.tag-unpaved {
1868     stroke-dasharray: 3, 2;
1869 }
1870 path.casing.tag-bridge.tag-unpaved {
1871     stroke: #000;
1872     stroke-dasharray: 4, 3;
1873 }
1874 .low-zoom path.casing.tag-bridge.tag-unpaved {
1875     stroke: #000;
1876     stroke-dasharray: 3, 2;
1877 }
1878
1879
1880 /* Status (e.g. construction, proposed, abandoned) */
1881 path.stroke.tag-status,
1882 path.casing.tag-status {
1883     stroke-linecap: butt;
1884     stroke-dasharray: 7, 3;
1885 }
1886 .low-zoom path.stroke.tag-status,
1887 .low-zoom path.casing.tag-status {
1888     stroke-dasharray: 5, 2;
1889 }
1890
1891
1892 /* Buildings */
1893 path.stroke.tag-building {
1894     stroke: rgb(224, 110, 95);
1895 }
1896 path.fill.tag-building {
1897     stroke: rgba(224, 110, 95, 0.3);
1898     fill: rgba(224, 110, 95, 0.3);
1899 }
1900 .preset-icon-fill-area.tag-building {
1901     border-color: rgb(224, 110, 95);
1902     background-color: rgba(224, 110, 95, 0.3);
1903 }
1904
1905
1906 /* "Special" paths - platforms, piers, crossings */
1907 .preset-icon .icon.tag-public_transport-platform,
1908 .preset-icon .icon.tag-railway-platform,
1909 .preset-icon .icon.tag-man_made-pier,
1910 .preset-icon .icon.tag-footway.tag-footway-crossing,
1911 .preset-icon .icon.tag-crossing {
1912     color: #988;
1913     fill: #dca;
1914 }
1915
1916 .preset-icon-fill-area.tag-public_transport-platform,
1917 .preset-icon-fill-area.tag-railway-platform,
1918 .preset-icon-fill-area.tag-man_made-pier,
1919 .preset-icon-fill-area.tag-footway.tag-footway-crossing,
1920 .preset-icon-fill-area.tag-crossing {
1921     border-color: #988;
1922     background-color: #dca;
1923 }
1924
1925 path.shadow.tag-public_transport-platform,
1926 path.shadow.tag-railway-platform,
1927 path.shadow.tag-man_made-pier,
1928 path.shadow.tag-footway.tag-footway-crossing,
1929 path.shadow.tag-crossing {
1930     stroke-width: 16;
1931 }
1932 path.casing.tag-public_transport-platform,
1933 path.casing.tag-railway-platform,
1934 path.casing.tag-man_made-pier,
1935 path.casing.tag-footway.tag-footway-crossing,
1936 path.casing.tag-crossing {
1937     stroke: #dca;
1938     stroke-width: 5;
1939     stroke-linecap: round;
1940     stroke-dasharray: none;
1941 }
1942 path.stroke.tag-public_transport-platform,
1943 path.stroke.tag-railway-platform,
1944 path.stroke.tag-man_made-pier,
1945 path.stroke.tag-footway.tag-footway-crossing,
1946 path.stroke.tag-crossing {
1947     stroke: #988;
1948     stroke-width: 3;
1949     stroke-linecap: butt;
1950     stroke-dasharray: 6, 6;
1951 }
1952
1953 .low-zoom path.shadow.tag-public_transport-platform,
1954 .low-zoom path.shadow.tag-railway-platform,
1955 .low-zoom path.shadow.tag-man_made-pier,
1956 .low-zoom path.shadow.tag-footway.tag-footway-crossing,
1957 .low-zoom path.shadow.tag-crossing {
1958     stroke-width: 12;
1959 }
1960 .low-zoom path.casing.tag-public_transport-platform,
1961 .low-zoom path.casing.tag-railway-platform,
1962 .low-zoom path.casing.tag-man_made-pier,
1963 .low-zoom path.casing.tag-footway.tag-footway-crossing,
1964 .low-zoom path.casing.tag-crossing {
1965     stroke-width: 3;
1966 }
1967 .low-zoom path.stroke.tag-public_transport-platform,
1968 .low-zoom path.stroke.tag-railway-platform,
1969 .low-zoom path.stroke.tag-man_made-pier,
1970 .low-zoom path.stroke.tag-footway.tag-footway-crossing,
1971 .low-zoom path.stroke.tag-crossing {
1972     stroke-width: 1;
1973     stroke-linecap: butt;
1974     stroke-dasharray: 3, 3;
1975 }
1976
1977 g.midpoint.tag-public_transport-platform .fill,
1978 g.midpoint.tag-railway-platform .fill,
1979 g.midpoint.tag-man_made-pier .fill,
1980 g.midpoint.tag-footway.tag-footway-crossing .fill,
1981 g.midpoint.tag-crossing .fill {
1982     fill: #fff;
1983     stroke: #333;
1984     stroke-opacity: .8;
1985     opacity: .8;
1986 }
1987
1988 /* marked crossings, zebras */
1989 .preset-icon .icon.tag-crossing.tag-crossing-marked,
1990 .preset-icon .icon.tag-crossing.tag-crossing-zebra {
1991     color: #444;
1992     fill: #dca;
1993 }
1994 path.casing.tag-crossing.tag-crossing-marked,
1995 path.casing.tag-crossing.tag-crossing-zebra {
1996     stroke: #dca;
1997 }
1998 path.stroke.tag-crossing.tag-crossing-marked,
1999 path.stroke.tag-crossing.tag-crossing-zebra {
2000     stroke: #444;
2001     stroke-dasharray: 6, 4;
2002 }
2003 .low-zoom path.stroke.tag-crossing.tag-crossing-marked,
2004 .low-zoom path.stroke.tag-crossing.tag-crossing-zebra {
2005     stroke-dasharray: 3, 2;
2006 }
2007
2008 /* Cursors */
2009
2010 .nope,
2011 .nope * {
2012     cursor: not-allowed !important;
2013 }
2014
2015 .map-in-map,
2016 #map {
2017     cursor: auto; /* Opera */
2018     cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
2019 }
2020
2021 .mode-browse .point,
2022 .mode-select .point {
2023     cursor: pointer; /* Opera */
2024     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
2025 }
2026
2027 .mode-select .vertex,
2028 .mode-browse .vertex {
2029     cursor: pointer; /* Opera */
2030     cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
2031 }
2032
2033 .mode-browse .line,
2034 .mode-select .line {
2035     cursor: pointer; /* Opera */
2036     cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
2037 }
2038
2039 .mode-select .area,
2040 .mode-browse .area {
2041     cursor: pointer; /* Opera */
2042     cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
2043 }
2044
2045 .mode-select .midpoint,
2046 .mode-browse .midpoint {
2047     cursor: pointer; /* Opera */
2048     cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
2049 }
2050
2051 .mode-select .behavior-multiselect .point,
2052 .mode-select .behavior-multiselect .vertex,
2053 .mode-select .behavior-multiselect .line,
2054 .mode-select .behavior-multiselect .area {
2055     cursor: pointer; /* Opera */
2056     cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
2057 }
2058
2059 .mode-select .behavior-multiselect .selected {
2060     cursor: pointer; /* Opera */
2061     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
2062 }
2063
2064 .mode-draw-line #map,
2065 .mode-draw-area #map,
2066 .mode-add-line  #map,
2067 .mode-add-area  #map,
2068 .mode-drag-node #map,
2069 .mode-drag-note #map {
2070     cursor: crosshair; /* Opera */
2071     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
2072 }
2073
2074 .mode-draw-line .way.target,
2075 .mode-draw-area .way.target,
2076 .mode-add-line  .way.target,
2077 .mode-add-area  .way.target,
2078 .mode-drag-node .way.target {
2079     cursor: crosshair; /* Opera */
2080     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
2081 }
2082
2083 .mode-draw-line .vertex.target,
2084 .mode-draw-area .vertex.target,
2085 .mode-add-line  .vertex.target,
2086 .mode-add-area  .vertex.target,
2087 .mode-drag-node .vertex.target {
2088     cursor: crosshair; /* Opera */
2089     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
2090 }
2091
2092 .mode-add-point #map,
2093 .mode-add-note #map,
2094 .mode-browse.lasso #map,
2095 .mode-browse.lasso .way,
2096 .mode-browse.lasso .vertex,
2097 .mode-browse.lasso .midpoint,
2098 .mode-select.lasso #map,
2099 .mode-select.lasso .way,
2100 .mode-select.lasso .vertex,
2101 .mode-select.lasso .midpoint {
2102     cursor: crosshair; /* Opera */
2103     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
2104 }
2105
2106 .turn rect,
2107 .turn circle {
2108     cursor: pointer;
2109 }
2110 /* photo viewer div */
2111 #photoviewer {
2112     position: absolute;
2113     bottom: 30px;
2114     width: 330px;
2115     height: 250px;
2116     padding: 5px;
2117     background-color: #fff;
2118 }
2119
2120 @media screen and (min-width: 1600px) {
2121     #photoviewer {
2122         width: 490px;
2123         height: 370px;
2124     }
2125 }
2126
2127 #photoviewer button.thumb-hide {
2128     border-radius: 0;
2129     padding: 5px;
2130     position: absolute;
2131     right: 5px;
2132     top: 5px;
2133     z-index: 50;
2134 }
2135
2136 #photoviewer button.resize-handle-xy {
2137     border-radius: 0;
2138     position: absolute;
2139     top: 0;
2140     right: 0;
2141     z-index: 49;
2142     cursor: nesw-resize;
2143     height: 25px;
2144     width: 25px;
2145 }
2146
2147 #photoviewer button.resize-handle-x {
2148     border-radius: 0;
2149     position: absolute;
2150     top: 0;
2151     right: 0;
2152     bottom: 0;
2153     z-index: 48;
2154     cursor: ew-resize;
2155     height: auto;
2156     width: 6px;
2157 }
2158
2159 #photoviewer button.resize-handle-y {
2160     border-radius: 0;
2161     position: absolute;
2162     top: 0;
2163     right: 0;
2164     z-index: 48;
2165     cursor: ns-resize;
2166     height: 6px;
2167     width: 100%;
2168 }
2169
2170
2171 .photo-wrapper,
2172 .photo-wrapper img {
2173     width: 100%;
2174     height: 100%;
2175     overflow: hidden;
2176     object-fit: cover;
2177 }
2178
2179 .photo-wrapper .photo-attribution {
2180     position: absolute;
2181     bottom: 0;
2182     right: 0;
2183     width: 100%;
2184     font-size: 10px;
2185     text-align: right;
2186     line-height: 1.1em;
2187     padding: 4px 2px;
2188     z-index: 10;
2189 }
2190
2191 .photo-attribution a,
2192 .photo-attribution a:visited,
2193 .photo-attribution span {
2194     padding: 4px 2px;
2195     color: #fff;
2196 }
2197
2198 /* markers and sequences */
2199 .viewfield-group {
2200     pointer-events: visible;
2201     cursor: pointer;
2202 }
2203
2204 .viewfield-group.selected * {
2205     fill: #ffee00 !important;
2206 }
2207 .viewfield-group.hovered * {
2208     fill: #eebb00 !important;
2209 }
2210
2211 .viewfield-group circle {
2212     stroke: #555;
2213     stroke-width: 1;
2214     stroke-opacity: 0.4;
2215     fill-opacity: 0.4;
2216 }
2217 .viewfield-group.highlighted circle {
2218     stroke: #222;
2219     stroke-opacity: 0.9;
2220     fill-opacity: 0.9;
2221 }
2222 .viewfield-group.highlighted.hovered circle {
2223     stroke: #222;
2224     stroke-width: 2;
2225     stroke-opacity: 0.9;
2226     fill-opacity: 0.9;
2227 }
2228 .viewfield-group.highlighted.selected circle {
2229     stroke: #222;
2230     stroke-width: 2;
2231     stroke-opacity: 1;
2232     fill-opacity: 1;
2233 }
2234
2235 .viewfield-group .viewfield {
2236     stroke-width: 0;
2237     stroke: #222;
2238     fill-opacity: 0.4;
2239 }
2240 .viewfield-group.highlighted .viewfield {
2241     stroke-width: 1;
2242     fill-opacity: 0.8;
2243 }
2244 .viewfield-group.highlighted.hovered .viewfield {
2245     stroke-width: 1;
2246     fill-opacity: 0.8;
2247 }
2248 .viewfield-group.highlighted.selected .viewfield {
2249     stroke-width: 1;
2250     fill-opacity: 0.9;
2251 }
2252
2253 .viewfield-group.selected .viewfield-scale {
2254     transform: scale(2,2);
2255 }
2256
2257 .sequence {
2258     fill: none;
2259     stroke-width: 2;
2260     stroke-opacity: 0.4;
2261 }
2262 .sequence.highlighted,
2263 .sequence.selected {
2264     stroke-width: 4;
2265     stroke-opacity: 1;
2266 }
2267
2268
2269 /* Streetside Image Layer */
2270 .layer-streetside-images {
2271     pointer-events: none;
2272 }
2273 .layer-streetside-images .viewfield-group * {
2274     fill: #0fffc4;
2275 }
2276 .layer-streetside-images .sequence {
2277     stroke: #0fffc4;
2278     stroke-opacity: 0.85;  /* bump opacity - only one per road */
2279 }
2280
2281
2282 /* Mapillary Image Layer */
2283 .layer-mapillary-images {
2284     pointer-events: none;
2285 }
2286 .layer-mapillary-images .viewfield-group * {
2287     fill: #55ff22;
2288 }
2289 .layer-mapillary-images .sequence {
2290     stroke: #55ff22;
2291 }
2292
2293
2294 /* Mapillary Sign Layer */
2295 .layer-mapillary-signs {
2296     pointer-events: none;
2297 }
2298 .layer-mapillary-signs .icon-sign {
2299     outline: 2px solid transparent;
2300     pointer-events: visible;
2301     cursor: pointer;
2302 }
2303 .layer-mapillary-signs .icon-sign:hover {
2304     outline: 5px solid #eebb00;
2305     background-color: #eebb00;
2306 }
2307 .layer-mapillary-signs .icon-sign.selected {
2308     outline: 5px solid #ffee00;
2309     background-color: #ffee00;
2310 }
2311
2312
2313 /* OpenStreetCam Image Layer */
2314 .layer-openstreetcam-images {
2315     pointer-events: none;
2316 }
2317 .layer-openstreetcam-images .viewfield-group * {
2318     fill: #20c4ff;
2319 }
2320 .layer-openstreetcam-images .sequence {
2321     stroke: #20c4ff;
2322 }
2323
2324
2325 /* Streetside Viewer (pannellum) */
2326 .ms-wrapper .photo-attribution .image-link {
2327     display: block;
2328 }
2329 .ms-wrapper .photo-attribution .attribution-row {
2330     display: flex;
2331     flex-flow: row nowrap;
2332     justify-content: space-between;
2333     align-items: center;
2334     padding: 0 5px;
2335 }
2336 .ms-wrapper .photo-attribution .image-view-link {
2337     text-align: left;
2338     margin: 0 5px;
2339 }
2340 .ms-wrapper .photo-attribution .image-report-link {
2341     text-align: right;
2342 }
2343
2344 .ms-wrapper .photo-attribution a:active,
2345 .ms-wrapper .photo-attribution a:hover {
2346     color: #0fffc4;
2347 }
2348
2349 .ms-wrapper .pnlm-compass.pnlm-control {
2350     width: 26px;
2351     height: 26px;
2352     left: 4px;
2353     top: 60px;
2354     background-size: contain;
2355     background-repeat: no-repeat no-repeat;
2356 }
2357
2358 label.streetside-hires {
2359     cursor: pointer;
2360 }
2361 .streetside-hires span {
2362     margin-top: 2px;
2363 }
2364 .streetside-hires input[type="checkbox"] {
2365     float: left;
2366     width: 12px;
2367     height: 12px;
2368     margin: 0 5px;
2369 }
2370
2371
2372 /* Mapillary viewer */
2373 #mly .domRenderer .TagSymbol {
2374     font-size: 10px;
2375     background-color: rgba(0,0,0,0.4);
2376     padding: 0 4px;
2377     border-radius: 4px;
2378     top: -25px;
2379 }
2380 #mly .domRenderer .Attribution {
2381     /* we will roll our own to avoid async update issues like #4526 */
2382     display: none;
2383 }
2384
2385 .mly-wrapper .photo-attribution a:active,
2386 .mly-wrapper .photo-attribution a:hover {
2387     color: #35af6d;
2388 }
2389
2390 .mly-wrapper .mapillary-js-dom {
2391     z-index: 9;
2392 }
2393
2394
2395 /* OpenStreetCam viewer */
2396 .osc-wrapper {
2397     position: relative;
2398     background-color: #000;
2399     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
2400     background-position: center;
2401     background-repeat: no-repeat;
2402 }
2403
2404 .osc-wrapper .photo-attribution a:active,
2405 .osc-wrapper .photo-attribution a:hover {
2406     color: #20c4ff;
2407 }
2408
2409 .osc-image-wrap {
2410     width: 100%;
2411     height: 100%;
2412     transform-origin:0 0;
2413     -ms-transform-origin:0 0;
2414     -webkit-transform-origin:0 0;
2415     -moz-transform-origin:0 0;
2416     -o-transform-origin:0 0;
2417 }
2418
2419
2420 /* photo-controls (step forward, back, rotate) */
2421 .photo-controls-wrap {
2422     text-align: center;
2423     position: absolute;
2424     top: 10px;
2425     width: 100%;
2426     z-index: 10;
2427 }
2428
2429 .photo-controls {
2430     display: inline-block;
2431     z-index: 10;
2432 }
2433
2434 .photo-controls button,
2435 .photo-controls button:focus {
2436     height: 18px;
2437     width: 18px;
2438     background: rgba(0,0,0,0.65);
2439     color: #eee;
2440     border-radius: 0;
2441 }
2442 .photo-controls button:first-of-type {
2443     border-radius: 3px 0 0 3px;
2444 }
2445 .photo-controls button:last-of-type {
2446     border-radius: 0 3px 3px 0;
2447 }
2448 .photo-controls button:hover,
2449 .photo-controls button:active {
2450     background: rgba(0,0,0,0.85);
2451     color: #fff;
2452 }
2453
2454
2455 /* OSM Notes Layer */
2456 .layer-notes {
2457     pointer-events: none;
2458 }
2459 .layer-notes .note * {
2460     pointer-events: none;
2461 }
2462 .layer-notes .note .note-fill {
2463     pointer-events: visible;
2464     cursor: pointer; /* Opera */
2465     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
2466 }
2467
2468 .note-header-icon .note-shadow,
2469 .layer-notes .note .note-shadow {
2470     color: #000;
2471 }
2472 .note-header-icon .note-fill,
2473 .layer-notes .note .note-fill {
2474     color: #ff3300;
2475     stroke: #333;
2476     stroke-width: 40px;
2477 }
2478 .note-header-icon.new .note-fill,
2479 .layer-notes .note.new .note-fill {
2480     color: #ffee00;
2481     stroke: #333;
2482     stroke-width: 40px;
2483 }
2484 .note-header-icon.closed .note-fill,
2485 .layer-notes .note.closed .note-fill {
2486     color: #55dd00;
2487     stroke: #333;
2488     stroke-width: 40px;
2489 }
2490
2491 /* slight adjustments to preset icon for note icons */
2492 .note-header-icon .preset-icon-28 {
2493     top: 18px;
2494 }
2495
2496 .note-header-icon .note-icon-annotation {
2497     position: absolute;
2498     top: 22px;
2499     left: 22px;
2500     margin: auto;
2501 }
2502
2503 .note-header-icon .note-icon-annotation .icon {
2504     width: 15px;
2505     height: 15px;
2506 }
2507
2508
2509 /* OSM Note UI */
2510 .note-header {
2511     background-color: #f6f6f6;
2512     border-radius: 5px;
2513     border: 1px solid #ccc;
2514     display: flex;
2515     flex-flow: row nowrap;
2516     align-items: center;
2517 }
2518
2519 .note-header-icon {
2520     background-color: #fff;
2521     padding: 10px;
2522     flex: 0 0 62px;
2523     position: relative;
2524     width: 60px;
2525     height: 60px;
2526     border-right: 1px solid #ccc;
2527     border-radius: 5px 0 0 5px;
2528 }
2529 [dir='rtl'] .note-header-icon {
2530     border-right: unset;
2531     border-left: 1px solid #ccc;
2532     border-radius: 0 5px 5px 0;
2533 }
2534
2535 .note-header-icon .icon-wrap {
2536     position: absolute;
2537     top: 0px;
2538 }
2539
2540 .note-header-label {
2541     background-color: #f6f6f6;
2542     padding: 0 15px;
2543     flex: 1 1 100%;
2544     font-size: 14px;
2545     font-weight: bold;
2546     border-radius: 0 5px 5px 0;
2547 }
2548 [dir='rtl'] .note-header-label {
2549     border-radius: 5px 0 0 5px;
2550 }
2551
2552 .note-category {
2553     margin: 20px 0px;
2554 }
2555
2556 .comments-container {
2557     background: #ececec;
2558     padding: 1px 10px;
2559     border-radius: 8px;
2560     margin-top: 20px;
2561 }
2562
2563 .comment {
2564     background-color: #fff;
2565     border-radius: 5px;
2566     border: 1px solid #ccc;
2567     margin: 10px auto;
2568     display: flex;
2569     flex-flow: row nowrap;
2570 }
2571 .comment-avatar {
2572     padding: 10px;
2573     flex: 0 0 62px;
2574 }
2575 .comment-avatar .icon.comment-avatar-icon {
2576     width: 40px;
2577     height: 40px;
2578     object-fit: cover;
2579     border: 1px solid #ccc;
2580     border-radius: 20px;
2581 }
2582 .comment-main {
2583     padding: 10px 10px 10px 0;
2584     flex: 1 1 100%;
2585     flex-flow: column nowrap;
2586     overflow: hidden;
2587     overflow-wrap: break-word;
2588 }
2589 [dir='rtl'] .comment-main {
2590     padding: 10px 0 10px 10px;
2591 }
2592
2593 .comment-metadata {
2594     flex-flow: row nowrap;
2595     justify-content: space-between;
2596 }
2597 .comment-author {
2598     font-weight: bold;
2599     color: #333;
2600 }
2601 .comment-date {
2602     color: #aaa;
2603 }
2604 .comment-text {
2605     color: #333;
2606     margin-top: 10px;
2607     overflow-y: auto;
2608     max-height: 250px;
2609 }
2610 .comment-text::-webkit-scrollbar {
2611     border-left: none;
2612 }
2613
2614 .note-save {
2615     padding: 10px;
2616 }
2617
2618 .note-save #new-comment-input {
2619     width: 100%;
2620     height: 100px;
2621     max-height: 300px;
2622     min-height: 100px;
2623 }
2624
2625 .note-save .detail-section {
2626     margin: 10px 0;
2627 }
2628
2629 .note-report {
2630     float: right;
2631 }
2632 /* Fill Styles */
2633
2634 .low-zoom.fill-wireframe path.stroke,
2635 .fill-wireframe path.stroke {
2636     stroke-width: 1 !important;
2637     stroke-opacity: 0.5 !important;
2638     stroke-dasharray: none !important;
2639     fill: none !important;
2640 }
2641
2642 .low-zoom.fill-wireframe path.shadow,
2643 .fill-wireframe path.shadow {
2644     stroke-width: 12;
2645 }
2646
2647 .fill-wireframe path.shadow.related:not(.selected),
2648 .fill-wireframe path.shadow.hover:not(.selected) {
2649     stroke-opacity: 0.4;
2650 }
2651 .fill-wireframe path.shadow.selected {
2652     stroke-opacity: 0.6;
2653 }
2654
2655 .fill-wireframe .point,
2656 .fill-wireframe .vertex.active,
2657 .fill-wireframe .areaicon,
2658 .fill-wireframe .areaicon-halo,
2659 .fill-wireframe path.casing,
2660 .fill-wireframe path.fill,
2661 .fill-wireframe path.oneway {
2662     display: none !important;
2663 }
2664
2665 .fill-partial path.area.fill {
2666     fill-opacity: 0;
2667     stroke-width: 60px;
2668     pointer-events: none;
2669 }
2670 .mode-browse .fill-partial path.area.fill,
2671 .mode-select .fill-partial path.area.fill {
2672     pointer-events: visibleStroke;
2673 }
2674 /* Basics
2675 ------------------------------------------------------- */
2676
2677 /*
2678   Opera misbehaves when the window is resized vertically unless 100% width + height are
2679   applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
2680 */
2681 html, body {
2682     width: 100%;
2683     height: 100%;
2684 }
2685
2686 body {
2687     font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
2688         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
2689         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
2690         sans-serif;
2691     margin: 0;
2692     padding: 0;
2693     min-width: 768px;
2694     color: #333;
2695     overflow: hidden;
2696     -ms-user-select: none;
2697 }
2698
2699 .unsupported {
2700     text-align: center;
2701     vertical-align: middle;
2702     padding-top: 100px;
2703     font-size: 15px;
2704 }
2705
2706 .id-container {
2707     height: 100%;
2708     width: 100%;
2709     min-width: 768px;
2710 }
2711
2712 #content {
2713     position: relative;
2714     overflow: hidden;
2715     height: 100%;
2716 }
2717
2718 #content.active {
2719     -webkit-filter: none !important;
2720     filter: none !important;
2721     -webkit-duration: 200ms;
2722     transition-duration: 200ms;
2723 }
2724
2725 #content.inactive {
2726     -webkit-filter: grayscale(80%) brightness(80%);
2727     filter: grayscale(80%) brightness(80%);
2728     -webkit-duration: 200ms;
2729     transition-duration: 200ms;
2730 }
2731
2732 /* Firefox has its own ideas about fixed positioning when a css filter is active - #4348 */
2733 /* https://stackoverflow.com/questions/37949942/firefox-position-bug-by-parent-with-filter */
2734 @-moz-document url-prefix() {
2735     #content > #bar {
2736         width: 100vw;
2737     }
2738     #content.inactive > #bar > .spacer.col4 {
2739         width: 0px;
2740     }
2741     #content.active > #bar > .spacer.col4 {
2742         width: 33.3333%;
2743         transition-duration: 200ms;
2744         transition-timing-function: step-end;
2745     }
2746 }
2747
2748 #defs {
2749     /* Can't be display: none or the clippaths are ignored. */
2750     position: absolute;
2751     width: 0;
2752     height: 0;
2753 }
2754
2755 .spacer {
2756     height: 40px;
2757     margin-right: 10px;
2758 }
2759
2760 .limiter {
2761     position: relative;
2762     max-width: 1200px;
2763 }
2764
2765 .spinner {
2766     opacity: .5;
2767     float: right;
2768 }
2769 [dir='rtl'] .spinner {
2770     float: left;
2771 }
2772
2773 .spinner img {
2774     height: 40px;
2775     width: 40px;
2776     border-radius: 4px;
2777     margin-right: 10px;
2778     background: black;
2779 }
2780 [dir='rtl'] .spinner img {
2781     margin-left: 10px;
2782     margin-right: auto;
2783     -moz-transform: scaleX(-1);
2784     -o-transform: scaleX(-1);
2785     -webkit-transform: scaleX(-1);
2786     transform: scaleX(-1);
2787     filter: FlipH;
2788     -ms-filter: "FlipH";
2789 }
2790
2791
2792 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
2793     -moz-box-sizing: border-box;
2794     -webkit-box-sizing: border-box;
2795     box-sizing: border-box;
2796 }
2797
2798 a, button, input, textarea {
2799     -webkit-tap-highlight-color: rgba(0,0,0,0);
2800     -webkit-touch-callout: none;
2801 }
2802
2803 a,
2804 button,
2805 .checkselect label:hover,
2806 .radial-menu-item {
2807     cursor: pointer;
2808 }
2809
2810 h2 {
2811     font-size: 25px;
2812     line-height: 1.25;
2813     font-weight: bold;
2814     margin-bottom: 20px;
2815 }
2816
2817 h3:last-child,
2818 h2:last-child,
2819 h4:last-child { margin-bottom: 0;}
2820
2821 h3 {
2822     font-size: 16px;
2823     line-height: 1.25;
2824     font-weight: bold;
2825     margin-bottom: 10px;
2826 }
2827
2828 h4, h5 {
2829     font-size: 12px;
2830     font-weight: bold;
2831     padding-bottom: 10px;
2832 }
2833
2834 :focus {
2835     outline-color: transparent;
2836     outline-style: none;
2837 }
2838
2839 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
2840     color: #aaa;
2841     opacity: 1; /* Firefox */
2842 }
2843 :-ms-input-placeholder { /* Internet Explorer 10-11 */
2844     color: #aaa;
2845 }
2846 ::-ms-input-placeholder { /* Microsoft Edge */
2847     color: #aaa;
2848 }
2849
2850 p {
2851     font-size: 12px;
2852     margin: 0;
2853     padding: 0;
2854 }
2855
2856 p:last-child {
2857     padding-bottom: 0;
2858 }
2859
2860 em {
2861     font-style: italic;
2862 }
2863
2864 strong {
2865     font-weight: bold;
2866 }
2867
2868 a:visited, a {
2869     color: #7092ff;
2870 }
2871
2872 a:hover {
2873     color: #597be7;
2874 }
2875
2876 /* Forms
2877 ------------------------------------------------------- */
2878
2879 textarea  {
2880     resize: vertical;
2881     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
2882         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
2883         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
2884         sans-serif;
2885 }
2886
2887 textarea,
2888 input[type=text],
2889 input[type=search],
2890 input[type=number],
2891 input[type=url],
2892 input[type=tel],
2893 input[type=email] {
2894     background-color: #fff;
2895     color: #333;
2896     border: 1px solid #ccc;
2897     padding: 5px 20px 5px 10px;
2898     height: 30px;
2899     width: 100%;
2900     border-radius: 4px;
2901     text-overflow: ellipsis;
2902 }
2903 [dir='rtl'] textarea,
2904 [dir='rtl'] input[type=text],
2905 [dir='rtl'] input[type=search],
2906 [dir='rtl'] input[type=number],
2907 [dir='rtl'] input[type=url],
2908 [dir='rtl'] input[type=tel],
2909 [dir='rtl'] input[type=email] {
2910     padding: 5px 10px 5px 20px;
2911 }
2912
2913 textarea:focus,
2914 input:focus {
2915     background-color: #F1F1F1;
2916 }
2917
2918 input[type="checkbox"],
2919 input[type="radio"] {
2920     float: left;
2921     width: 14px;
2922     height: 14px;
2923     margin-right: 5px;
2924     margin-top: 3px;
2925 }
2926 [dir='rtl'] input[type="checkbox"],
2927 [dir='rtl'] input[type="radio"] {
2928     float: right;
2929     margin-left: 5px;
2930     margin-right: 0;
2931 }
2932
2933 /* remove bottom border radius when combobox is open */
2934 .combobox + * textarea:focus,
2935 .combobox + * input:focus {
2936     border-bottom-left-radius: 0 !important;
2937     border-bottom-right-radius: 0 !important;
2938 }
2939
2940 /* tables */
2941
2942 table {
2943     background-color: #fff;
2944     border-collapse: collapse;
2945     width: 100%;
2946     border-spacing: 0;
2947 }
2948
2949 table th {
2950     text-align: left;
2951 }
2952
2953 table.tags, table.tags td, table.tags th {
2954     border: 1px solid #ccc;
2955     padding: 4px;
2956 }
2957
2958 ::-ms-clear {
2959    display: none;
2960 }
2961
2962 /* Grid
2963 ------------------------------------------------------- */
2964
2965 .col0    { float: left; width: 04.1666%; }
2966 .col1    { float: left; width: 08.3333%; }
2967 .col2    { float: left; width: 16.6666%; }
2968 .col3    { float: left; width: 25.0000%; max-width: 300px; }
2969 .col4    { float: left; width: 33.3333%; max-width: 400px; }
2970 .col5    { float: left; width: 41.6666%; max-width: 500px; }
2971 .col6    { float: left; width: 50.0000%; max-width: 600px; }
2972 .col7    { float: left; width: 58.3333%; }
2973 .col8    { float: left; width: 66.6666%; }
2974 .col9    { float: left; width: 75.0000%; }
2975 .col10   { float: left; width: 83.3333%; }
2976 .col11   { float: left; width: 91.6666%; }
2977 .col12   { float: left; width: 100.0000%; }
2978
2979 /* UI Lists
2980 ------------------------------------------------------- */
2981
2982 ul li { list-style: none;}
2983
2984 .toggle-list > label {
2985     position: relative;
2986     padding: 5px 10px;
2987     display: block;
2988     height: 30px;
2989     background-color: #fff;
2990     color: #7092ff;
2991     cursor: pointer;
2992 }
2993
2994 .toggle-list > label:hover {
2995     background-color: #ececec;
2996 }
2997
2998 .toggle-list > label:not(:last-child) {
2999     border-bottom: 1px solid #ccc;
3000 }
3001
3002 .toggle-list > label:last-child {
3003     border-radius: 0 0 3px 3px;
3004 }
3005
3006 .toggle-list label > span {
3007     display: block;
3008     overflow: hidden;
3009     white-space: nowrap;
3010     text-overflow: ellipsis;
3011 }
3012
3013 .toggle-list > label.active {
3014     background: #E8EBFF;
3015 }
3016
3017
3018 /* Utility Classes
3019 ------------------------------------------------------- */
3020 .fillL {
3021     background: #fff;
3022     color: #333;
3023 }
3024
3025 .fillL2 {
3026     background: #f6f6f6;
3027     color: #333;
3028 }
3029
3030 .fillL3 {
3031     background: #ececec;
3032     color: #333;
3033 }
3034
3035 .fillD {
3036     background: rgba(0,0,0,.5);
3037     color: #fff;
3038 }
3039
3040 .fillD2 {
3041     background: rgba(0,0,0,.75);
3042     color: #fff;
3043 }
3044
3045 .fl { float: left;}
3046 .fr { float: right;}
3047 .al { left: 0; }
3048 .ar { right: 0; }
3049
3050 input.hide,
3051 div.hide,
3052 form.hide,
3053 button.hide,
3054 a.hide,
3055 li.hide {
3056     display: none;
3057 }
3058
3059 .deemphasize {
3060     color: #a9a9a9;
3061 }
3062
3063 .content {
3064     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
3065 }
3066
3067 .loading {
3068     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
3069     background-size: 5px 5px;
3070 }
3071
3072 .panewrap {
3073     position: absolute;
3074     width: 200%;
3075     height: 100%;
3076     right: -100%;
3077 }
3078
3079
3080 .pane {
3081     position: absolute;
3082     width: 50%;
3083     top: 0;
3084     bottom: 30px;
3085 }
3086
3087 .pane:first-child {
3088     left: 0;
3089 }
3090
3091 .pane:last-child {
3092     right: 0;
3093 }
3094
3095 /* Buttons */
3096
3097 button {
3098     text-align: center;
3099     line-height: 20px;
3100     border: 0;
3101     background: #fff;
3102     font-weight: bold;
3103     color: #333;
3104     font-size: 12px;
3105     display: inline-block;
3106     height: 40px;
3107     border-radius: 4px;
3108 }
3109
3110 button:focus,
3111 button:hover {
3112     background-color: #ececec;
3113 }
3114
3115 button[disabled],
3116 button.disabled {
3117     background-color: rgba(255,255,255,.25);
3118     color: rgba(0,0,0,.4);
3119     cursor: auto;
3120 }
3121
3122 button.active {
3123     background: #7092ff;
3124 }
3125
3126 button.minor {
3127     position: absolute;
3128     top: 0;
3129     right: 0;
3130     height: 100%;
3131     width: 10%;
3132     border-radius: 0;
3133     background-color: #fafafa;
3134 }
3135 [dir='rtl'] button.minor {
3136     right: auto;
3137 }
3138
3139 button.minor .icon {
3140     opacity: .5;
3141 }
3142
3143 button.minor:hover {
3144     background-color: #f1f1f1;
3145 }
3146
3147 .button-wrap {
3148     display: inline-block;
3149     padding-right: 10px;
3150     margin: 0;
3151 }
3152
3153 .button-wrap button:only-child {
3154     width: 100%;
3155 }
3156
3157 .button-wrap:last-of-type {
3158     padding-right: 0;
3159 }
3160 [dir='rtl'] .button-wrap:last-of-type {
3161     padding-left: 0;
3162     padding-right: 10px;
3163 }
3164
3165 .joined button {
3166     border-radius: 0;
3167     border-right: 1px solid rgba(0,0,0,.5);
3168 }
3169 [dir='rtl'] .joined button {
3170     border-left: 1px solid rgba(0,0,0,.5);
3171     border-right: none;
3172 }
3173
3174 .fillL .joined button {
3175     border-right: 1px solid #fff;
3176 }
3177
3178 .joined button:first-child {
3179     border-radius: 4px 0 0 4px;
3180 }
3181 [dir='rtl'] .joined button:first-child {
3182     border-radius: 0 4px 4px 0;
3183 }
3184
3185 .joined button:last-child {
3186     border-right-width: 0;
3187     border-radius: 0 4px 4px 0;
3188 }
3189 [dir='rtl'] .joined button:last-child {
3190     border-radius: 4px 0 0 4px;
3191 }
3192
3193 button.action {
3194     background: #7092ff;
3195     color: #fff;
3196 }
3197
3198 button[disabled].action,
3199 button[disabled].action:hover {
3200     background: #cccccc;
3201     color: #888;
3202 }
3203
3204 button.action:focus,
3205 button.action:hover {
3206     background: #597BE7;
3207 }
3208
3209 button.secondary-action {
3210     background: #ececec;
3211 }
3212
3213 button.secondary-action:focus,
3214 button.secondary-action:hover {
3215     background: #cccccc;
3216 }
3217
3218 button.save .count {
3219     display: none;
3220 }
3221
3222 button.save.has-count .count {
3223     display: block;
3224     position: absolute;
3225     top: 5px;
3226     background: #fff;
3227     border-color: #fff;
3228     opacity: 0.5;
3229     color: #333;
3230     padding: 10px;
3231     height: 30px;
3232     line-height: 12px;
3233     border-radius: 4px;
3234     margin: auto;
3235     margin-left: 9.3333%;
3236 }
3237 [dir='rtl'] button.save.has-count .count {
3238     margin-left: auto;
3239     margin-right: 8%;
3240 }
3241
3242 button.save.has-count .count::before {
3243     content: "";
3244     margin: auto;
3245     width: 0;
3246     height: 0;
3247     position: absolute;
3248     left: -6px;
3249     top: 0;
3250     bottom: 0;
3251     border-top:    6px solid transparent;
3252     border-bottom: 6px solid transparent;
3253     border-right-width: 6px;
3254     border-right-style: solid;
3255     border-right-color: inherit;
3256 }
3257 [dir='rtl'] button.save.has-count .count::before {
3258     border-left: 6px solid rgba(255,255,255,.5);
3259     border-right: none;
3260     left: auto;
3261     right: -6px;
3262 }
3263
3264 .help-wrap svg.icon.pre-text.add-note,
3265 button.add-note svg.icon {
3266     height: 15px;
3267     width: 15px;
3268     color: rgba(0,0,0,0.25);
3269     stroke: #333;
3270     stroke-width: 60px;
3271     margin-top: 3px;
3272 }
3273 button.add-note svg.icon {
3274     margin-left: unset;
3275     margin-right: 7px;
3276 }
3277 [dir='rtl'] button.add-note svg.icon {
3278     margin-left: 7px;
3279     margin-right: unset;
3280 }
3281 .help-wrap svg.icon.pre-text.add-note {
3282     margin-left: 3px;
3283     margin-right: 3px;
3284 }
3285
3286
3287 /* Icons */
3288
3289 .icon {
3290     vertical-align: top;
3291     width: 20px;
3292     height: 20px;
3293 }
3294
3295 .icon.inline {
3296     vertical-align: text-top;
3297     width: 14px;
3298     height: 14px;
3299     margin: 0px 3px;
3300 }
3301
3302 .icon.pre-text {
3303     margin-right: 5px;
3304 }
3305 [dir='rtl'] .icon.pre-text {
3306     margin-left: 5px;
3307     margin-right: 0;
3308 }
3309
3310 .icon.pre-text.user-icon {
3311     margin-left: 5px;
3312     margin-right: 5px;
3313 }
3314
3315 .icon.light {
3316     color: #fff;
3317 }
3318
3319 .icon.created {
3320     color: #00ca07;
3321 }
3322
3323 .icon.modified {
3324     color: #666;
3325 }
3326
3327 .icon.deleted {
3328     color: #ea0000;
3329 }
3330
3331 .user-icon {
3332     max-height: 20px;
3333     max-width: 20px;
3334     height: auto;
3335     width: auto;
3336     border-radius: 3px;
3337 }
3338
3339
3340 /* ToolBar / Persistent UI Elements
3341 ------------------------------------------------------- */
3342
3343 #bar {
3344     position: fixed;
3345     padding: 10px 0;
3346     left: 0;
3347     top: 0;
3348     right: 0;
3349     height: 60px;
3350     z-index: 9;
3351     min-width: 768px;
3352 }
3353
3354 [dir='rtl'] #bar .spacer,
3355 [dir='rtl'] #bar .button-wrap,
3356 [dir='rtl'] #bar .button-wrap button {
3357     float: right;
3358 }
3359
3360
3361 /* Header for modals / panes
3362 ------------------------------------------------------- */
3363
3364 .header {
3365     border-bottom: 1px solid #ccc;
3366     height: 60px;
3367     position: relative;
3368 }
3369
3370 .header h3 {
3371     text-align: center;
3372     margin-bottom: 0;
3373     white-space: nowrap;
3374     text-overflow: ellipsis;
3375     overflow: hidden;
3376     padding: 20px;
3377 }
3378
3379 .header button,
3380 .modal > button {
3381     border-radius: 0;
3382     width: 40px;
3383     text-align: center;
3384     overflow: hidden;
3385 }
3386
3387 .header button {
3388     position: relative;
3389     height: 100%;
3390 }
3391
3392 .field-help-title button.close,
3393 .sidebar-component .header button.note-editor-close,
3394 .entity-editor-pane .header button.preset-close,
3395 .preset-list-pane .header button.preset-choose {
3396     position: absolute;
3397     right: 0;
3398     top: 0;
3399 }
3400 [dir='rtl'] .field-help-title button.close,
3401 [dir='rtl'] .sidebar-component .header button.note-editor-close,
3402 [dir='rtl'] .entity-editor-pane .header button.preset-close,
3403 [dir='rtl'] .preset-list-pane .header button.preset-choose {
3404     left: 0;
3405     right: auto;
3406 }
3407
3408 .entity-editor-pane .header button.preset-choose {
3409     position: absolute;
3410     left: 0;
3411     top: 0;
3412 }
3413 [dir='rtl'] .entity-editor-pane .header button.preset-choose {
3414     left: auto;
3415     right: 0;
3416 }
3417
3418 .preset-choose {
3419     font-size: 16px;
3420     line-height: 1.25;
3421     font-weight: bold;
3422 }
3423
3424 .modal > button {
3425     position: absolute;
3426     right: 0;
3427     top: 0;
3428     height: 59px;
3429     z-index: 50;
3430 }
3431 [dir='rtl'] .modal > button {
3432     left: 0;
3433     right: unset;
3434 }
3435
3436 .footer {
3437     position: absolute;
3438     bottom: 0;
3439     margin: 0;
3440     padding: 5px 20px 5px 20px;
3441     border-top: 1px solid #ccc;
3442     background-color: #fafafa;
3443     width: 100%;
3444     z-index: 1;
3445     flex-wrap: wrap;
3446     justify-content: space-between;
3447     list-style: none;
3448     display: flex;
3449
3450 }
3451
3452 .footer > a {
3453     justify-content: center;
3454 }
3455
3456 .sidebar-component .body {
3457     width: 100%;
3458     overflow: auto;
3459     top: 60px;
3460     bottom: 0;
3461     position: absolute;
3462 }
3463
3464
3465 /* Hide-Toggle
3466 ------------------------------------------------------- */
3467
3468 .hide-toggle .icon.pre-text {
3469     vertical-align: text-top;
3470     width: 16px;
3471     height: 16px;
3472     margin-left: -3px;
3473 }
3474 [dir='rtl'] .hide-toggle .icon.pre-text {
3475     margin-left: 0;
3476     margin-right: -3px;
3477 }
3478
3479 a:visited.hide-toggle,
3480 a.hide-toggle {
3481     display: inline-block;
3482     font-size: 14px;
3483     font-weight: bold;
3484     padding-bottom: 5px;
3485 }
3486
3487
3488 /* Inspector
3489 ------------------------------------------------------- */
3490
3491 #sidebar {
3492     position: relative;
3493     float: left;
3494     height: 100%;
3495     overflow: hidden;
3496     z-index: 10;
3497     background: #f6f6f6;
3498     -ms-user-select: element;
3499 }
3500 [dir='rtl'] #sidebar {
3501     float: right;
3502 }
3503
3504 .sidebar-component {
3505     position: absolute;
3506     top: 0;
3507     left: 0;
3508     bottom: 0;
3509     right: 0;
3510 }
3511
3512 .inspector-wrap {
3513     width: 100%;
3514     height: 100%;
3515 }
3516
3517 .inspector-hidden {
3518     display: none;
3519 }
3520
3521 .inspector-body {
3522     overflow-y: scroll;
3523     overflow-x: hidden;
3524     position: absolute;
3525     right: 0;
3526     left: 0;
3527     bottom: 0;
3528 }
3529
3530 .feature-list-pane .inspector-body {
3531     top: 120px;
3532 }
3533
3534 .preset-list-pane .inspector-body {
3535     top: 120px;
3536 }
3537
3538 .entity-editor-pane .inspector-body {
3539     top: 60px;
3540 }
3541
3542 .selection-list-pane .inspector-body {
3543     top: 60px;
3544 }
3545
3546 .inspector-inner {
3547     padding: 20px;
3548     position: relative;
3549 }
3550
3551 #sidebar .search-header .icon {
3552     display: block;
3553     position: absolute;
3554     left: 10px;
3555     top: 80px;
3556     pointer-events: none;
3557 }
3558 [dir='rtl'] #sidebar .search-header .icon {
3559     left: auto;
3560     right: 10px;
3561 }
3562
3563 #sidebar .search-header input {
3564     position: absolute;
3565     top: 60px;
3566     height: 60px;
3567     width: 100%;
3568     padding: 5px 10px;
3569     border-radius: 0;
3570     border-width: 0;
3571     border-bottom-width: 1px;
3572     text-indent: 30px;
3573     font-size: 18px;
3574     font-weight: bold;
3575 }
3576
3577 /* Feature list */
3578
3579 .feature-list  {
3580     width: 100%;
3581 }
3582
3583 .no-results-item,
3584 .geocode-item,
3585 .feature-list-item {
3586     width: 100%;
3587     position: relative;
3588     border-bottom: 1px solid #ccc;
3589     border-radius: 0;
3590 }
3591
3592 .feature-list-item {
3593     background-color: #fff;
3594     font-weight: bold;
3595     height: 40px;
3596     line-height: 20px;
3597 }
3598
3599 .feature-list-item:hover {
3600     background-color: #ececec;
3601 }
3602
3603 .feature-list-item button {
3604     background: transparent;
3605 }
3606
3607 .feature-list-item .label {
3608     text-align: left;
3609     padding: 10px 10px;
3610     white-space: nowrap;
3611     text-overflow: ellipsis;
3612     overflow: hidden;
3613     border-left: 1px solid rgba(0, 0, 0, .1);
3614 }
3615 [dir='rtl'] .feature-list-item .label {
3616     text-align: right;
3617 }
3618
3619 .feature-list-item .label .icon {
3620     opacity: .5;
3621 }
3622
3623 .feature-list-item .close {
3624     float: right;
3625     padding: 10px;
3626 }
3627
3628 .feature-list-item .close .icon {
3629     opacity: 1;
3630 }
3631
3632 .feature-list-item .entity-type {
3633     color: #7092ff;
3634 }
3635
3636 .feature-list-item:hover .entity-type {
3637     color: #597be7;
3638 }
3639
3640 .feature-list-item .entity-name {
3641     font-weight: normal;
3642     color: #666;
3643     padding-left: 10px;
3644 }
3645 [dir='rtl'] .feature-list-item .entity-name {
3646     padding-left: 0;
3647     padding-right: 10px;
3648 }
3649
3650
3651 /* Presets
3652 ------------------------------------------------------- */
3653
3654 /* Preset grid  */
3655
3656 .preset-list  {
3657     width: 100%;
3658     padding: 20px 20px 10px 20px;
3659     border-bottom: 1px solid #ccc;
3660 }
3661
3662 .preset-list-button-wrap {
3663     position: relative;
3664     margin-bottom: 10px;
3665     height: 60px;
3666 }
3667
3668 .preset-list-button {
3669     width: 100%;
3670     height: 100%;
3671     position: relative;
3672     border: 1px solid #ccc;
3673 }
3674
3675 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
3676     background: #ececec;
3677 }
3678
3679 .preset-icon-fill-area {
3680     cursor: inherit;
3681     height: 40px;
3682     width: 40px;
3683     margin: auto;
3684     position: absolute;
3685     left: 10px;
3686     top: 10px;
3687 }
3688
3689 .preset-icon-fill-vertex {
3690     height: 40px;
3691     width: 40px;
3692     margin: auto;
3693     position: absolute;
3694     left: 10px;
3695     top: 10px;
3696     border: 1.5px solid #333;
3697     border-radius: 20px;
3698     background-color: #efefef;
3699     backface-visibility: hidden;
3700 }
3701
3702 [dir='rtl'] .preset-icon-fill-vertex,
3703 [dir='rtl'] .preset-icon-fill-area {
3704   left: auto;
3705   right: 10px;
3706 }
3707
3708 .preset-icon-frame {
3709     position: absolute;
3710     top: 7px;
3711     left: 7px;
3712     margin: auto;
3713 }
3714 [dir='rtl'] .preset-icon-frame {
3715     left: auto;
3716     right: 7px;
3717 }
3718
3719 .preset-icon-frame .icon {
3720     width: 46px;
3721     height: 46px;
3722 }
3723
3724 .preset-icon-60 {
3725     position: absolute;
3726     top: 0px;
3727     left: 0px;
3728     margin: auto;
3729 }
3730
3731 .preset-icon-60 .icon {
3732     width: 60px;
3733     height: 60px;
3734 }
3735
3736 .preset-icon-44 {
3737     position: absolute;
3738     top: 9px;
3739     left: 8px;
3740     margin: auto;
3741 }
3742
3743 .preset-icon-44 .icon {
3744     width: 44px;
3745     height: 44px;
3746 }
3747
3748 .preset-icon-28 {
3749     position: absolute;
3750     top: 16px;
3751     left: 16px;
3752     margin: auto;
3753 }
3754
3755 .preset-icon-28 .icon {
3756     width: 28px;
3757     height: 28px;
3758 }
3759
3760 .preset-icon-24 {
3761     position: absolute;
3762     top: 18px;
3763     left: 18px;
3764     margin: auto;
3765 }
3766
3767 .preset-icon-24 .icon {
3768     width: 24px;
3769     height: 24px;
3770 }
3771
3772 [dir='rtl'] .preset-list-button-wrap .preset-icon {
3773     left: auto;
3774     right: auto;
3775 }
3776
3777 [dir='rtl'] .preset-list-button-wrap .preset-icon-28 {
3778     right: 16px;
3779 }
3780
3781 [dir='rtl'] .preset-list-button-wrap .preset-icon-24 {
3782     right: 18px;
3783 }
3784
3785 .preset-list-button .label {
3786     background-color: #f6f6f6;
3787     text-align: left;
3788     position: absolute;
3789     top: 0;
3790     bottom: 0;
3791     right: 0;
3792     padding: 5px 10px;
3793     left: 60px;
3794     line-height: 50px;
3795     white-space: nowrap;
3796     text-overflow: ellipsis;
3797     overflow: hidden;
3798     border-left: 1px solid rgba(0, 0, 0, .1);
3799     border-radius: 0 3px 3px 0;
3800 }
3801 [dir='rtl'] .preset-list-button .label {
3802     text-align: right;
3803     left: 0;
3804     right: 60px;
3805     border-left: none;
3806     border-right: 1px solid rgba(0, 0, 0, .1);
3807     border-radius: 3px 0 0 3px;
3808 }
3809
3810 .preset-list-button:hover .label {
3811     background-color: #ececec;
3812 }
3813
3814 .preset-list-item button.tag-reference-button {
3815     height: 100%;
3816     border: 1px solid #ccc;
3817     border-radius: 0 3px 3px 0;
3818     position: absolute;
3819     top: 0;
3820     right: 0;
3821     width: 32px;
3822     background: #fafafa;
3823 }
3824 [dir='rtl'] .preset-list-item button.tag-reference-button {
3825     left: 0;
3826     right: auto;
3827     border-radius: 3px 0 0 3px;
3828 }
3829
3830 .preset-list-item button.tag-reference-button:hover {
3831     background: #f1f1f1;
3832 }
3833
3834 .preset-list-item button.tag-reference-button .icon {
3835     opacity: .5;
3836 }
3837
3838 .current .preset-list-button,
3839 .current .preset-list-button .label {
3840     background-color: #E8EBFF;
3841 }
3842
3843 .category .preset-list-button:after,
3844 .category .preset-list-button:before {
3845     content: "";
3846     position: absolute;
3847     top: -5px;
3848     left: -1px; right: -1px;
3849     border: 1px solid #ccc;
3850     border-bottom: none;
3851     border-radius: 6px 6px 0 0;
3852     height: 6px;
3853 }
3854
3855 .category .preset-list-button:before {
3856     top: -3px;
3857 }
3858
3859 .subgrid .preset-list {
3860     padding: 10px 10px 0 10px;
3861     margin-top: 0;
3862     border: 0;
3863     border-radius: 8px;
3864     width: -webkit-calc(100% + 20px);
3865     margin-left: -10px;
3866 }
3867
3868 .subgrid .arrow {
3869     border: solid rgba(0, 0, 0, 0);
3870     border-width: 10px;
3871     border-bottom-color: #f1f1f1;
3872     width: 0;
3873     height: 0;
3874     margin-left: 50%;
3875     margin-left: -webkit-calc(50% - 10px);
3876     margin-top: -10px;
3877 }
3878
3879
3880 /* preset form basics */
3881
3882 .preset-editor {
3883     overflow: hidden;
3884     padding-bottom: 10px;
3885 }
3886
3887 .preset-editor a.hide-toggle {
3888     margin: 0 20px 5px 20px;
3889 }
3890
3891 .preset-editor .form-fields-container {
3892     padding: 10px;
3893     margin: 0 10px 10px 10px;
3894     border-radius: 8px;
3895 }
3896
3897 .preset-editor .form-fields-container:empty {
3898     display: none;
3899 }
3900
3901 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
3902     margin-bottom: 0;
3903 }
3904
3905 .form-field {
3906     margin-bottom: 10px;
3907     width: 100%;
3908     -webkit-transition: margin-bottom 200ms;
3909        -moz-transition: margin-bottom 200ms;
3910          -o-transition: margin-bottom 200ms;
3911             transition: margin-bottom 200ms;
3912 }
3913
3914 .form-field.nowrap,
3915 .wrap-form-field:last-child .form-field {
3916     margin-bottom: 0;
3917 }
3918
3919 .form-label {
3920     position: relative;
3921     font-weight: bold;
3922     border: 1px solid #cfcfcf;
3923     padding: 5px 0 5px 10px;
3924     background: #f6f6f6;
3925     display: block;
3926     border-radius: 4px 4px 0 0;
3927     overflow: hidden;
3928 }
3929 [dir='rtl'] .form-label {
3930     padding: 5px 10px 5px 0;
3931 }
3932
3933 .form-label-button-wrap {
3934     position: absolute;
3935     top: 0;
3936     right: 0;
3937     height: 100%;
3938     width: 100%;
3939     background: transparent;
3940     text-align: right;
3941 }
3942 [dir='rtl'] .form-label-button-wrap {
3943     text-align: left;
3944 }
3945
3946 .form-label-button-wrap .tag-reference-button {
3947     border-radius: 0 3px 0 0;
3948 }
3949
3950 .form-label-button-wrap .icon {
3951     opacity: .5;
3952 }
3953
3954 .form-label button {
3955     border-left: 1px solid #ccc;
3956     width: 32px;
3957     height: 100%;
3958     border-radius: 0;
3959     background: #f6f6f6;
3960 }
3961 [dir='rtl'] .form-label button {
3962     border-left: none;
3963     border-right: 1px solid #ccc;
3964     border-radius: 4px 0 0 0;
3965     width: 31px;
3966 }
3967 .form-label button:hover {
3968     background: #f1f1f1;
3969 }
3970
3971 .form-label .modified-icon,
3972 .form-field .remove-icon {
3973     display: none;
3974 }
3975
3976 .modified .form-label .modified-icon,
3977 .present .form-label .remove-icon {
3978     display: inline-block;
3979 }
3980
3981 .form-field > input,
3982 .form-field > textarea,
3983 .form-field .preset-input-wrap {
3984     border: 1px solid #ccc;
3985     min-height: 30px;
3986     border-top: 0;
3987     border-radius: 0 0 4px 4px;
3988     overflow: hidden;
3989     position: relative;
3990 }
3991
3992 .form-field textarea {
3993     height: 65px;
3994 }
3995
3996 .inspector-border {
3997     border-bottom: 1px solid #ccc
3998 }
3999
4000 /* Preset form (hover mode) */
4001
4002 .inspector-hover .checkselect label:last-of-type,
4003 .inspector-hover .preset-input-wrap .label,
4004 .inspector-hover .form-field-multicombo,
4005 .inspector-hover .structure-extras-wrap,
4006 .inspector-hover .comments-container .comment,
4007 .inspector-hover input,
4008 .inspector-hover textarea,
4009 .inspector-hover label {
4010     background: #ececec;
4011 }
4012
4013 .inspector-hover a,
4014 .inspector-hover .form-field-multicombo .chips,
4015 .inspector-hover .checkselect label:last-of-type {
4016     color: #666;
4017 }
4018
4019 .inspector-hover .form-field-multicombo .chips {
4020     background: #eee;
4021     border: 1px solid #ccc;
4022 }
4023
4024 /* no scrollbars */
4025 .inspector-hover div {
4026     overflow-x: hidden;
4027     overflow-y: hidden;
4028 }
4029
4030 /* hide and remove from layout */
4031 .inspector-hidden,
4032 .inspector-hover label input[type="checkbox"],
4033 .inspector-hover label input[type="radio"],
4034 .inspector-hover .toggle-list label,
4035 .inspector-hover .toggle-list label span,
4036 .inspector-hover .inspector-inner .add-tag,
4037 .inspector-hover .inspector-inner .add-relation,
4038 .inspector-hover .form-field-multicombo .combobox-input,
4039 .inspector-hover .toggle-list label.remove .icon {
4040     height: 0;
4041     width: 0;
4042     overflow: hidden;
4043     opacity: 0 !important;
4044     border-width: 0;
4045     margin: 0;
4046     padding: 0;
4047 }
4048
4049 /* hide but preserve in layout */
4050 .inspector-hover .entity-editor-pane button.minor,
4051 .inspector-hover .combobox-caret,
4052 .inspector-hover .header button,
4053 .inspector-hover .spin-control,
4054 .inspector-hover .form-field-multicombo .chips .remove,
4055 .inspector-hover .hide-toggle:before,
4056 .inspector-hover .more-fields,
4057 .inspector-hover .form-label-button-wrap,
4058 .inspector-hover .tag-reference-button,
4059 .inspector-hover .footer * {
4060     opacity: 0;
4061 }
4062
4063 /* Styles for raw tag inspector on hover */
4064 .inspector-hover .tag-row .key-wrap,
4065 .inspector-hover .tag-row .form-field.input-wrap-position {
4066     width: 50%;
4067 }
4068
4069 .inspector-hover .tag-row:first-child input.value {
4070     border-top-right-radius: 4px;
4071 }
4072 [dir='rtl'] .inspector-hover .tag-row:first-child input.value {
4073     border-top-right-radius: 0;
4074     border-top-left-radius: 4px;
4075 }
4076
4077 .inspector-hover .tag-row:last-child input.value {
4078     border-bottom-right-radius: 4px;
4079 }
4080 [dir='rtl'] .inspector-hover .tag-row:last-child input.value {
4081     border-bottom-right-radius: 0;
4082     border-bottom-left-radius: 4px;
4083 }
4084
4085 .inspector-hover .tag-row:last-child input.key {
4086     border-bottom-left-radius: 4px;
4087 }
4088 [dir='rtl'] .inspector-hover .tag-row:last-child input.key {
4089     border-bottom-left-radius: 0;
4090     border-bottom-right-radius: 4px;
4091 }
4092
4093 .inspector-hover .more-fields {
4094     max-height: 0;
4095     margin-bottom: -10px;
4096 }
4097
4098 /* Unstyle button fields */
4099 .inspector-hover .toggle-list label.active,
4100 .inspector-hover .entity-editor-pane a.hide-toggle {
4101     opacity: 1;
4102     background-color: transparent;
4103     color: #666;
4104     padding-left: 0;
4105     border-width: 0;
4106 }
4107
4108 .inspector-hover .toggle-list button.active {
4109     padding-left: 10px;
4110 }
4111
4112 /* Add placeholder only on hover for radio buttons */
4113 .inspector-hover .toggle-list .placeholder {
4114     color: #a9a9a9;
4115     padding: 5px 10px;
4116     opacity: 1;
4117     line-height: 20px;
4118     width: 100%;
4119 }
4120
4121 /* Hide placeholder for radio buttons if another is active, or not in hover state */
4122 .toggle-list label.active ~ .placeholder,
4123 .toggle-list .placeholder {
4124     padding: 0;
4125     opacity: 0;
4126     width: 0;
4127     line-height: 0;
4128     display: block;
4129     overflow: hidden;
4130 }
4131
4132 /* adding additional preset fields */
4133
4134 .more-fields {
4135     padding: 0 20px 20px 20px;
4136     font-weight: bold;
4137 }
4138 .changeset-editor .more-fields {
4139     padding: 15px 20px 0 20px;
4140 }
4141
4142 .more-fields label {
4143     display: flex;
4144     flex-flow: row nowrap;
4145     justify-content: space-between;
4146     align-items: center;
4147 }
4148
4149 .more-fields input {
4150     margin-left: 10px;
4151     flex: 1 1 50%;
4152 }
4153 [dir='rtl'] .more-fields input {
4154     margin-left: auto;
4155     margin-right: 10px;
4156 }
4157
4158 .preset-input-wrap .label {
4159     height: 30px;
4160     background: #F6F6F6;
4161     padding: 5px 10px;
4162 }
4163
4164 [dir='rtl'] .preset-input-wrap .col6 {
4165     float: right;
4166 }
4167
4168
4169 /* preset form access */
4170 /* preset form cycleway */
4171 /* preset form structure extras */
4172
4173 .structure-extras-wrap li,
4174 .form-field-cycleway .preset-input-wrap li,
4175 .form-field-access .preset-input-wrap li {
4176     border-bottom: 1px solid #ccc;
4177 }
4178 .structure-extras-wrap li:last-child,
4179 .form-field-cycleway .preset-input-wrap li:last-child,
4180 .form-field-access .preset-input-wrap li:last-child {
4181     border-bottom: 0;
4182 }
4183 .structure-input-type-wrap input,
4184 .structure-input-layer-wrap input,
4185 .preset-input-cycleway-wrap input,
4186 .preset-input-access-wrap input {
4187     border-radius: 0;
4188     border-width: 0;
4189     border-left-width: 1px;
4190 }
4191 [dir='rtl'] .structure-input-type-wrap input,
4192 [dir='rtl'] .structure-input-layer-wrap input,
4193 [dir='rtl'] .preset-input-cycleway-wrap input,
4194 [dir='rtl'] .preset-input-access-wrap input {
4195     border-left-width: 0;
4196     border-right-width: 1px;
4197 }
4198
4199 .preset-input-wrap li:last-child input {
4200     border-bottom-right-radius: 4px;
4201 }
4202
4203 .structure-extras-wrap {
4204     padding: 10px 10px;
4205     background: #fff;
4206 }
4207 .structure-extras-wrap ul {
4208     border: 1px solid #ccc;
4209     border-radius: 4px;
4210 }
4211 .structure-extras-wrap li:first-child span {
4212     border-top-left-radius: 4px;
4213 }
4214 .structure-extras-wrap li:first-child input {
4215     border-top-right-radius: 4px;
4216 }
4217 .structure-extras-wrap li:last-child span {
4218     border-bottom-left-radius: 4px;
4219 }
4220 .structure-extras-wrap li:last-child input {
4221     border-bottom-right-radius: 4px;
4222 }
4223 [dir='rtl'] .structure-extras-wrap li:first-child span {
4224     border-top-left-radius: 0;
4225     border-top-right-radius: 4px;
4226 }
4227 [dir='rtl'] .structure-extras-wrap li:first-child input {
4228     border-top-right-radius: 0;
4229     border-top-left-radius: 4px;
4230 }
4231 [dir='rtl'] .structure-extras-wrap li:last-child span {
4232     border-bottom-left-radius: 0;
4233     border-bottom-right-radius: 4px;
4234 }
4235 [dir='rtl'] .structure-extras-wrap li:last-child input {
4236     border-bottom-right-radius: 0;
4237     border-bottom-left-radius: 4px;
4238 }
4239
4240
4241 /* preset form multicombo */
4242
4243 .form-field-multicombo {
4244     border: 1px solid #cfcfcf;
4245     border-top: 0px;
4246     padding: 5px 0 5px 10px;
4247     background: #fff;
4248     display: block;
4249     border-radius: 0 0 4px 4px;
4250     overflow: hidden;
4251 }
4252
4253 .form-field-multicombo:focus {
4254     border-bottom: 0px;
4255 }
4256
4257 .form-field-multicombo.active {
4258     border-bottom-left-radius: 0px;
4259     border-bottom-right-radius: 0px;
4260 }
4261
4262 .form-field-multicombo li {
4263     display: inline-flex;
4264     flex-flow: row nowrap;
4265     align-items: center;
4266     background-color: #eff2f7;
4267     border: 1px solid #ccd5e3;
4268     border-radius: 4px;
4269     line-height: 25px;
4270     padding: 2px 5px;
4271     margin: 3px;
4272 }
4273
4274 .form-field-multicombo a {
4275     font-family: Arial, Helvetica, sans-serif !important;
4276     font-size: 16px !important;
4277     line-height: 24px;
4278     float: right;
4279     margin: 1px 0 0 5px;
4280     padding: 0;
4281     cursor: pointer;
4282     color: #a6b4ce;
4283 }
4284
4285 .form-field-multicombo input {
4286     border: 1px solid #ddd;
4287     width: 100px;
4288     margin: 3px;
4289     height: 31px;
4290 }
4291
4292 .form-field-multicombo .combobox-caret {
4293     margin: 3px 3px 3px -30px;
4294 }
4295
4296 .form-field-multicombo input:focus {
4297     border-radius: 4px !important;
4298 }
4299
4300
4301 /* preset form numbers */
4302
4303 input[type=number] {
4304     position: relative;
4305     padding-right: 20%;
4306 }
4307
4308 .spin-control {
4309     width: 64px;
4310     height: 30px;
4311     display: inline-block;
4312     margin-left: -64px;
4313     margin-bottom: -11px;
4314     position: relative;
4315 }
4316 [dir='rtl'] .spin-control{
4317     margin-left: 0;
4318     margin-right: -64px;
4319 }
4320
4321 .spin-control button {
4322     right: 1px;
4323     position: relative;
4324     float: left;
4325     height: 100%;
4326     width: 32px;
4327     border-left: 1px solid #ccc;
4328     border-radius: 0;
4329     background: rgba(0, 0, 0, 0);
4330 }
4331 [dir='rtl'] .spin-control button{
4332     border-left: 0;
4333     border-right: 1px solid #ccc;
4334 }
4335
4336 .spin-control button.decrement {
4337     border-bottom-right-radius: 3px;
4338 }
4339 [dir='rtl'] .spin-control button.decrement {
4340     border-bottom-right-radius: 0;
4341 }
4342 [dir='rtl'] .spin-control button.increment {
4343     border-bottom-left-radius: 3px;
4344     right: 0;
4345 }
4346
4347 .spin-control button.decrement::after,
4348 .spin-control button.increment::after {
4349     content:"";
4350     height: 0; width: 0;
4351     position: absolute;
4352     left: 0; right: 0; bottom: 0; top: 0;
4353     margin: auto;
4354 }
4355
4356 .spin-control button.decrement::after {
4357     border-top: 5px solid #ccc;
4358     border-left: 5px solid transparent;
4359     border-right: 5px solid transparent;
4360 }
4361
4362 .spin-control button.increment::after {
4363     border-bottom: 5px solid #ccc;
4364     border-left: 5px solid transparent;
4365     border-right: 5px solid transparent;
4366 }
4367
4368
4369 /* preset form checkbox */
4370
4371 .checkselect label:last-of-type {
4372     display: block;
4373     background: #fff;
4374     padding: 5px 10px;
4375     color: #7092ff;
4376 }
4377
4378 .checkselect label:hover {
4379     background: #f1f1f1;
4380 }
4381
4382 .checkselect .set {
4383     color: inherit;
4384 }
4385
4386 .checkselect label:not(.set) input[type="checkbox"] {
4387     opacity: .5;
4388 }
4389
4390 .checkselect .reverser.button {
4391     display: block;
4392     float: right;
4393     background-color: #eff2f7;
4394     border: 1px solid #ccd5e3;
4395     border-radius: 2px;
4396     padding: 0px 8px;
4397 }
4398 [dir='rtl'] .checkselect .reverser.button {
4399     float: left;
4400 }
4401 .checkselect .reverser.button.hide {
4402     display: none;
4403 }
4404
4405 /* Preset form radio button */
4406
4407 .toggle-list button.remove {
4408     border-radius: 0 0 3px 3px;
4409 }
4410
4411 .toggle-list button.remove .icon {
4412     position: absolute;
4413     left: 5px;
4414 }
4415
4416 .toggle-list button.remove::before {
4417     content: none;
4418 }
4419
4420 #preset-input-maxspeed_advisory,
4421 #preset-input-maxspeed {
4422     border-right: none;
4423     border-radius: 0 0 0 4px;
4424     width: 80%;
4425 }
4426 [dir='rtl'] #preset-input-maxspeed_advisory,
4427 [dir='rtl'] #preset-input-maxspeed {
4428     border-right: 1px solid #ccc;
4429     border-radius: 0 0 4px 0;
4430 }
4431
4432 .form-field .maxspeed-unit {
4433     border-radius: 0 0 4px 0;
4434     width: 20%;
4435 }
4436 [dir='rtl'] .form-field .maxspeed-unit {
4437     border-right: 0;
4438     border-radius: 0 0 0 4px;
4439 }
4440
4441 /* Wikipedia field */
4442 .form-field .wiki-lang {
4443     border-radius: 0;
4444 }
4445 .form-field .wiki-title {
4446     padding-right: 20%;
4447 }
4448 [dir='rtl'] .form-field .wiki-title {
4449     padding-left: 20%;
4450     padding-right: 10px;
4451 }
4452
4453 .form-field .wiki-title ~ .combobox-caret {
4454     right: 32px;
4455 }
4456 [dir='rtl'] .form-field .wiki-title ~ .combobox-caret {
4457     right: auto;
4458     left: 32px;
4459 }
4460
4461 /* Localized field */
4462 .form-field .localized-main {
4463     padding-right: 12%;
4464 }
4465 [dir='rtl'] .form-field .localized-main {
4466     padding-left: 12%;
4467     padding-right: 10px;
4468 }
4469
4470 .form-field .button-input-action {
4471     position: relative;
4472     right: 1px;
4473     width: 32px;
4474     margin-left: -32px;
4475     border: 1px solid #ccc;
4476     border-top-width: 0;
4477     border-right-width: 0;
4478     border-radius: 0 0 4px 0;
4479     height: 30px;
4480     vertical-align: top;
4481 }
4482 [dir='rtl'] .form-field .button-input-action {
4483     margin-left: 0;
4484     margin-right: -32px;
4485     border-right-width: 1px;
4486     border-radius: 0 0 0 4px;
4487 }
4488
4489 .form-field .localized-wrap {
4490     padding: 0 10px;
4491 }
4492
4493 .form-field .localized-wrap .entry {
4494     position: relative;
4495     overflow: hidden;
4496 }
4497
4498 .form-field .localized-wrap .entry::before {
4499     content: "";
4500     display: block;
4501     position: absolute;
4502     background: #ccc;
4503     height: 11px;
4504     width: 1px;
4505     left: 0;
4506     right: 0;
4507     top: -11px;
4508     margin: auto;
4509 }
4510
4511 .form-field .localized-wrap .entry .localized-lang {
4512     border-radius: 0;
4513     border-top-width: 0;
4514 }
4515
4516 .form-field .localized-wrap .entry .localized-value {
4517     border-top-width: 0;
4518     border-radius: 0 0 4px 4px;
4519 }
4520
4521 .form-field .localized-wrap .form-label button {
4522     border-top-right-radius: 3px;
4523 }
4524
4525 /* Preset form address */
4526
4527 .addr-row input {
4528     border-right: 0;
4529     border-bottom: 0;
4530 }
4531 [dir='rtl'] .addr-row input {
4532     border-right: 1px solid #ccc;
4533     border-left: 0;
4534 }
4535
4536 .addr-row:first-of-type input {
4537     border-top: 0;
4538 }
4539
4540 .addr-row input:first-of-type {
4541     border-left: 0;
4542 }
4543 [dir='rtl'] .addr-row input:first-of-type {
4544     border-right: 0;
4545 }
4546
4547 .addr-row input {
4548     border-radius: 0;
4549 }
4550
4551 .addr-row:last-of-type input:first-of-type {
4552     border-radius: 0 0 0 4px;
4553 }
4554 [dir='rtl'] .addr-row:last-of-type input:first-of-type {
4555     border-radius: 0 0 4px 0;
4556 }
4557
4558 .addr-row:last-of-type input:last-of-type {
4559     border-radius: 0 0 4px 0;
4560 }
4561 [dir='rtl'] .addr-row:last-of-type input:last-of-type {
4562     border-radius: 0 0 0 4px;
4563 }
4564
4565 /* Restrictions editor */
4566
4567 .form-field-restrictions .restriction-controls-container {
4568     background-color: #fff;
4569     border-top: 1px solid #ccc;
4570     width: 100%;
4571     padding: 5px;
4572 }
4573
4574 .restriction-controls-container .restriction-controls {
4575     display: table;
4576     -moz-user-select: none;
4577     -webkit-user-select: none;
4578     -ms-user-select: none;
4579     user-select: none;
4580 }
4581
4582 .restriction-controls .restriction-control {
4583     display: table-row;
4584     padding: 5px 10px;
4585     height: 25px;
4586 }
4587
4588 .restriction-control input,
4589 .restriction-control span {
4590     display: table-cell;
4591     text-align: start;
4592     padding: 0px 5px;
4593 }
4594
4595 .restriction-control span.restriction-control-label {
4596     text-align: end;
4597 }
4598
4599 .restriction-control input {
4600     width: 60px;
4601     padding: 0;
4602     margin: 0px 5px;
4603     vertical-align: middle;
4604 }
4605
4606 .form-field-restrictions .restriction-container {
4607     position: relative;
4608     height: 370px;
4609 }
4610 /* zero width space, so container takes up space */
4611 .form-field-restrictions .restriction-container:after {
4612     content: '\200b';
4613 }
4614
4615 .form-field-restrictions svg.surface {
4616     width: 100%;
4617     height: 100%;
4618 }
4619
4620 .restriction-container .restriction-help {
4621     z-index: 1;
4622     position: absolute;
4623     top: 0;
4624     left: 0;
4625     right: 0;
4626     padding: 2px 6px;
4627     background-color: rgba(255, 255, 255, .8);
4628     color: #888;
4629     text-align: center;
4630     pointer-events: none;
4631
4632     -moz-user-select: none;
4633     -webkit-user-select: none;
4634     -ms-user-select: none;
4635     user-select: none;
4636 }
4637
4638 .restriction-help span {
4639     margin: 2px;
4640 }
4641
4642 .restriction-help .qualifier {
4643     color: #666;
4644     font-weight: bold;
4645 }
4646 .restriction-help .qualifier.allow {
4647     color: #8b5;
4648 }
4649 .restriction-help .qualifier.restrict {
4650     color: #d53;
4651 }
4652 .restriction-help .qualifier.only {
4653     color: #78f;
4654 }
4655
4656 /* Changeset editor while comment text is empty */
4657
4658 .form-field-comment:not(.present) #preset-input-comment {
4659     border-color: rgb(230, 100, 100);
4660 }
4661
4662 .form-field-comment:not(.present) .form-label {
4663     border-color: rgb(230, 100, 100);
4664     background: rgba(230, 100, 100, 0.2);
4665 }
4666
4667 .form-field-comment:not(.present) .form-label {
4668 }
4669
4670 .form-field-comment:not(.present) .form-label-button-wrap {
4671     border-color: rgb(230, 100, 100);
4672 }
4673
4674 .form-field-comment:not(.present) button {
4675     border-color: rgb(230, 100, 100);
4676 }
4677
4678 /* combobox dropdown */
4679
4680 div.combobox {
4681     z-index: 9999;
4682     display: none;
4683     box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
4684     margin-top: -1px;
4685     background: #fff;
4686     max-height: 245px;
4687     overflow-y: auto;
4688     overflow-x: hidden;
4689     border: 1px solid #ccc;
4690     border-radius: 0 0 4px 4px;
4691 }
4692
4693 .combobox a {
4694     display: block;
4695     padding: 5px 10px;
4696     border-top: 1px solid #ccc;
4697     text-overflow: ellipsis;
4698     white-space: nowrap;
4699     overflow: hidden;
4700 }
4701
4702 .combobox a.selected,
4703 .combobox a:hover {
4704     background: #ececec;
4705 }
4706
4707 .combobox a:first-child {
4708     border-top: 0;
4709     padding: 4px 10px;
4710 }
4711
4712 .combobox-caret {
4713     display: inline-block;
4714     position: relative;
4715     height: 30px;
4716     width: 30px;
4717     margin-left: -30px;
4718     vertical-align: top;
4719 }
4720 [dir='rtl'] .combobox-caret {
4721   margin-left: 0;
4722   margin-right: -30px;
4723 }
4724
4725 .combobox-caret::after {
4726     content: "";
4727     height: 0; width: 0;
4728     position: absolute;
4729     left: 0; right: 0; bottom: 0; top: 0;
4730     margin: auto;
4731     border-top: 5px solid #ccc;
4732     border-left: 5px solid transparent;
4733     border-right: 5px solid transparent;
4734 }
4735
4736 /* Field Help */
4737
4738 .field-help-body {
4739     display: block;
4740     position: absolute;
4741     top: 0;
4742     left: 20px;
4743     right: 20px;
4744     margin: 5px;
4745     padding: 8px;
4746     border: 1px solid #ccc;
4747     border-top: 0;
4748     border-radius: 0 0 4px 4px;
4749     z-index: 20;
4750     background: rgba(255,255,255,0.95);
4751     box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
4752 }
4753
4754 .field-help-title h2 {
4755     padding: 10px;
4756     margin-bottom: 0px;
4757     font-size: 17px;
4758 }
4759 .field-help-title button {
4760     width: 45px;
4761     height: 55px;
4762     border-radius: 0;
4763 }
4764
4765 .field-help-nav {
4766     font-size: 13px;
4767     font-weight: bold;
4768     margin-bottom: 10px;
4769 }
4770 .field-help-nav-item {
4771     display: inline-block;
4772     padding: 5px 10px;
4773     cursor: pointer;
4774     color: #666;
4775 }
4776 .field-help-nav-item.active {
4777     color: #7092ff;
4778 }
4779 .field-help-nav-item:hover {
4780     color: #597be7;
4781     background-color: #efefef;
4782 }
4783
4784 .field-help-content {
4785     padding: 10px;
4786     overflow-y: auto;
4787     overflow-x: hidden;
4788 }
4789 .field-help-content h3 {
4790     font-size: 12px;
4791     margin-bottom: 5px;
4792 }
4793 .field-help-content p {
4794     margin-bottom: 15px;
4795 }
4796 .field-help-content ul li {
4797     list-style: inside;
4798     margin-bottom: 5px;
4799 }
4800
4801 .field-help-content .field-help-image {
4802     width: 100%;
4803     margin-bottom: 15px;
4804 }
4805
4806 .field-help-content svg.turn {
4807     width: 40px;
4808     height: 20px;
4809 }
4810 .field-help-content svg.shadow {
4811     opacity: 0.7;
4812     width: 60px;
4813     height: 20px;
4814 }
4815 .field-help-content svg.from {
4816     color: #777;
4817 }
4818 .field-help-content svg.allow {
4819     color: #5b3;
4820 }
4821 .field-help-content svg.restrict {
4822     color: #d53;
4823 }
4824 .field-help-content svg.only {
4825     color: #68f;
4826 }
4827
4828 .field-help-content p.from_shadow,
4829 .field-help-content p.allow_shadow,
4830 .field-help-content p.restrict_shadow,
4831 .field-help-content p.allow_turn,
4832 .field-help-content p.restrict_turn {
4833     margin-bottom: 5px;
4834 }
4835
4836
4837 /* Raw Tag Editor */
4838
4839 .tag-list {
4840     padding-top: 10px;
4841 }
4842
4843 .tag-row {
4844     width: 100%;
4845     position: relative;
4846     clear: both;
4847 }
4848
4849 .tag-row.readonly,
4850 .tag-row.readonly input.key,
4851 .tag-row.readonly input.value,
4852 .tag-row.readonly button.remove {
4853     color: #777777;
4854     background-color: #eee;
4855     cursor: not-allowed;
4856 }
4857
4858 .tag-row input {
4859     height: 31px;
4860     border: 0;
4861     border-radius: 0;
4862     border-bottom: 1px solid #ccc;
4863     border-left: 1px solid #ccc;
4864 }
4865 [dir='rtl'] .tag-row input {
4866     border-left: none;
4867     border-right: 1px solid #ccc;
4868 }
4869
4870 .tag-row .key-wrap,
4871 .tag-row .input-wrap-position {
4872     width: 40%;
4873     float: left;
4874     height: 30px;
4875 }
4876 [dir='rtl'] .tag-row .key-wrap,
4877 [dir='rtl'] .tag-row .input-wrap-position {
4878     float: right;
4879 }
4880
4881 .tag-row input.key {
4882     font-weight: bold;
4883     background-color: #f6f6f6;
4884 }
4885
4886 .tag-row input.value {
4887     border-right: 1px solid #ccc;
4888 }
4889 [dir='rtl'] .tag-row input.value {
4890     border-left: 1px solid #ccc;
4891 }
4892
4893 .tag-row:first-child input.key {
4894     border-top: 1px solid #ccc;
4895     border-top-left-radius: 4px;
4896 }
4897 [dir='rtl'] .tag-row:first-child input.key {
4898     border-top-left-radius: 0;
4899     border-top-right-radius: 4px;
4900 }
4901
4902 .tag-row:first-child input.value {
4903     border-top: 1px solid #ccc;
4904 }
4905
4906 .tag-row button {
4907     position: absolute;
4908     height: 31px;
4909     right: 10%;
4910     border: 1px solid #ccc;
4911     border-top-width: 0;
4912     border-left-width: 0;
4913 }
4914 [dir='rtl'] .tag-row button {
4915     left: 10%;
4916     border-left-width: 1px;
4917     border-right-width: 0;
4918 }
4919
4920 .tag-row button:hover {
4921     background: #f1f1f1;
4922 }
4923
4924 .tag-row button .icon {
4925     opacity: .5;
4926 }
4927
4928 .tag-row:first-child button {
4929     border-top-width: 1px;
4930 }
4931
4932 .tag-row:first-child .tag-reference-button {
4933     border-top-right-radius: 4px;
4934 }
4935 [dir='rtl'] .tag-row:first-child .tag-reference-button {
4936     border-top-left-radius: 4px;
4937     border-top-right-radius: 0;
4938 }
4939
4940 .tag-row:last-child .tag-reference-button {
4941     border-bottom-right-radius: 4px;
4942 }
4943 [dir='rtl'] .tag-row:last-child .tag-reference-button {
4944     border-bottom-left-radius: 4px;
4945     border-bottom-right-radius: 0;
4946 }
4947
4948 .tag-row .tag-reference-button {
4949     right: 0;
4950     border-radius: 0;
4951     width: 10%;
4952     top: 0;
4953     background: #fafafa;
4954 }
4955 [dir='rtl'] .tag-row .tag-reference-button {
4956     left: auto;
4957     right: auto;
4958     margin-right: 35px;
4959     border-left-width: 1px;
4960     border-right-width: 0;
4961 }
4962
4963 /* Adding form fields to tag editor */
4964
4965 .raw-tag-editor .add-tag {
4966     width: 40%;
4967     height: 30px;
4968     border-top: 0;
4969     background: rgba(0,0,0,.5);
4970     border-radius: 0 0 4px 4px;
4971 }
4972
4973 .raw-tag-editor .add-tag:hover {
4974     background: rgba(0,0,0,.8);
4975 }
4976
4977 .raw-tag-editor .add-tag .label {
4978     display: none;
4979 }
4980
4981 /* Tag reference */
4982
4983 button.minor.tag-reference-loading {
4984     background-color: #f5f5f5;
4985 }
4986
4987 .tag-reference-loading .icon {
4988     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
4989     background-position: 0 0;
4990 }
4991
4992 .tag-reference-body {
4993     overflow: hidden;
4994     clear: both;
4995 }
4996
4997 .tag-reference-body .tag-reference-description {
4998     margin: 10px 5px 0 5px;
4999 }
5000
5001 .tag-reference-body a {
5002     display: block;
5003 }
5004
5005 .tag-reference-body .tag-reference-description:last-child,
5006 .tag-reference-body a:last-child {
5007     margin-bottom: 15px;
5008 }
5009
5010 .preset-list .tag-reference-body {
5011     position: relative;
5012     width: 100%;
5013 }
5014
5015 .raw-tag-editor .tag-reference-body {
5016     float: left;
5017     width: 100%;
5018 }
5019
5020 .raw-tag-editor .tag-row.readonly .tag-reference-body {
5021     background: #f6f6f6;
5022     color: #333;
5023 }
5024
5025 .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body {
5026     border-bottom: 1px solid #ccc;
5027 }
5028
5029 .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
5030     border-top: 1px solid #ccc;
5031 }
5032
5033 img.tag-reference-wiki-image {
5034     float: right;
5035     width: 33.3333%;
5036     width: -webkit-calc(33.3333% - 10px);
5037     width: calc(33.3333% - 10px);
5038     border-radius: 4px;
5039     max-height: 200px;
5040     margin: 10px 5px 15px 20px;
5041 }
5042
5043
5044 /* Raw relation membership editor */
5045
5046 .raw-member-editor .member-list li:first-child,
5047 .raw-membership-editor .member-list li:first-child {
5048     padding-top: 10px;
5049 }
5050
5051 .raw-member-editor .member-row,
5052 .raw-membership-editor .member-row {
5053     position: relative;
5054 }
5055
5056 .raw-member-editor .member-row .member-entity-name,
5057 .raw-membership-editor .member-row .member-entity-name {
5058     font-weight: normal;
5059     padding-left: 10px;
5060 }
5061
5062 .member-incomplete .member-delete {
5063     display: none;
5064 }
5065
5066 .member-row-new .member-entity-input {
5067     border-radius: 4px 4px 0 0;
5068     border: 1px solid #cfcfcf;
5069 }
5070
5071 .add-relation {
5072     width: 40%;
5073     height: 30px;
5074     background: rgba(0,0,0,.5);
5075     border-radius: 4px;
5076     margin-top: 10px;
5077 }
5078
5079 .add-relation:hover {
5080     background: rgba(0,0,0,.8);
5081 }
5082
5083 /* hidden field to prevent user from tabbing out of the sidebar */
5084 input.key-trap {
5085     height: 0px;
5086     width: 0px;
5087     padding: 0px;
5088     border: 1px solid rgba(0,0,0,0);
5089 }
5090
5091 /* Fullscreen button */
5092 div.full-screen {
5093     float: right;
5094     width: 40px;
5095     margin-right: 10px;
5096 }
5097
5098 div.full-screen .tooltip {
5099     min-width: 160px;
5100 }
5101
5102 div.full-screen > button, div.full-screen > button.active {
5103     width: 40px;
5104     height: 40px;
5105     background: transparent;
5106 }
5107
5108 div.full-screen > button:hover {
5109     background-color: rgba(0, 0, 0, .8);
5110 }
5111
5112 /* Map Controls */
5113
5114 .map-controls {
5115     right: 0;
5116     top: 132px;
5117     width: 40px;
5118     position: fixed;
5119     z-index: 100;
5120 }
5121 [dir='rtl'] .map-controls {
5122     left: 0;
5123     right: auto;
5124 }
5125
5126 .map-control > button {
5127     width: 40px;
5128     background: rgba(0,0,0,.5);
5129     border-radius: 0;
5130 }
5131
5132 .map-control > button:hover {
5133     background: rgba(0, 0, 0, .8);
5134 }
5135
5136 .map-control > button.active,
5137 .map-control > button.active:hover {
5138     background: #7092ff;
5139 }
5140
5141 /* Zoomer */
5142 .zoombuttons > button.zoom-in {
5143     border-radius: 4px 0 0 0;
5144 }
5145 [dir='rtl'] .zoombuttons > button.zoom-in {
5146     border-radius: 0 4px 0 0;
5147 }
5148
5149 /* Geolocator */
5150 .geolocate-control {
5151     margin-bottom: 10px;
5152 }
5153 .geolocate-control > button {
5154     border-radius: 0 0 0 4px;
5155 }
5156 [dir='rtl'] .geolocate-control > button {
5157     border-radius: 0 0 4px 0;
5158 }
5159
5160 /* Pane Buttons */
5161 .help-control > button {
5162     border-radius: 0 0 0 4px;
5163 }
5164 [dir='rtl'] .help-control > button {
5165     border-radius: 0 0 4px 0;
5166 }
5167
5168 .map-data-control button {
5169     border-radius: 0;
5170 }
5171
5172 .background-control > button {
5173     border-radius: 4px 0 0 0;
5174 }
5175 [dir='rtl'] .background-control > button {
5176     border-radius: 0 4px 0 0;
5177 }
5178
5179
5180 /* Background / Map Data Settings */
5181
5182 .map-data-control,
5183 .background-control {
5184     position: relative;
5185 }
5186
5187 .imagery-faq {
5188     margin-bottom: 10px;
5189     white-space: nowrap;
5190 }
5191
5192 .layer-list, .controls-list {
5193     margin-bottom: 10px;
5194     border: 1px solid #ccc;
5195     border-radius: 4px;
5196 }
5197
5198 .layer-list li {
5199     position: relative;
5200     height: 30px;
5201     background-color: #fff;
5202     color: #7092ff;
5203 }
5204
5205 .layer-list:empty {
5206     display: none;
5207 }
5208
5209 .layer-list > li:first-child {
5210     border-radius: 3px 3px 0 0;
5211 }
5212
5213 .layer-list > li:last-child {
5214     border-radius: 0 0 3px 3px;
5215 }
5216
5217 .layer-list > li:only-child {
5218     border-radius: 3px;
5219 }
5220
5221 .layer-list li:not(:last-child) {
5222     border-bottom: 1px solid #ccc;
5223 }
5224
5225 .layer-list li:hover {
5226     background-color: #ececec;
5227 }
5228
5229 .layer-list li.active,
5230 .layer-list li.switch {
5231     background: #e8ebff;
5232 }
5233
5234 .layer-list li.best > div.best {
5235     display: inline-block;
5236     padding: 5px;
5237     float: right;
5238 }
5239
5240 [dir='rtl'] .list-item-gpx-browse svg {
5241     transform: rotateY(180deg);
5242 }
5243
5244 [dir='rtl'] .list-item-mvt-browse svg {
5245     transform: rotateY(180deg);
5246 }
5247
5248 /* make sure tooltip fits in map-control panel */
5249 /* if too wide, placement will be wrong the first time it displays */
5250 .layer-list li.best .tooltip-inner {
5251     max-width: 160px;
5252 }
5253
5254 .layer-list label {
5255     display: block;
5256     padding: 5px 10px;
5257     cursor: pointer;
5258 }
5259
5260 .layer-list label > span {
5261     display: block;
5262     overflow: hidden;
5263     white-space: nowrap;
5264     text-overflow: ellipsis;
5265 }
5266
5267
5268 /* Background Display Options */
5269
5270 .display-options-container {
5271     padding: 10px;
5272 }
5273
5274 .display-control h5 {
5275     padding-bottom: 0;
5276     padding-top: 10px;
5277 }
5278
5279 .display-control h5 span {
5280     margin: 5px;
5281 }
5282
5283 .display-control .display-option-input {
5284     height: 20px;
5285     width: 155px;
5286 }
5287
5288 .display-control button {
5289     height: 30px;
5290     width: 30px;
5291     margin-left: 5px;
5292     margin-right: 0px;
5293     vertical-align: text-bottom;
5294     border-radius: 4px;
5295 }
5296 [dir='rtl'] .display-control button {
5297     margin-left: 0px;
5298     margin-right: 5px;
5299 }
5300
5301
5302 /* Adjust Alignment controls */
5303
5304 .background-control .nudge-container {
5305     border: 1px solid #ccc;
5306     border-radius: 4px;
5307     padding: 10px;
5308 }
5309
5310 .nudge-container .nudge-instructions {
5311     padding-bottom: 15px;
5312 }
5313
5314 .nudge-container .nudge-outer-rect {
5315     background-color: #eee;
5316     border: 1px solid #ccc;
5317     border-radius: 2px;
5318     padding: 20px 0;
5319     width: 70%;
5320     display: flex;
5321     justify-content: center;
5322     align-items: center;
5323     margin: 0 auto;
5324     margin-top: 20px;
5325     cursor: move;
5326 }
5327
5328 .nudge-container .nudge-inner-rect {
5329     background-color: #fff;
5330     border: 1px solid #ccc;
5331     border-radius: 2px;
5332     width: 65%;
5333     min-height: 20px;
5334 }
5335
5336 .nudge-container .nudge::after {
5337     content: '';
5338     display: block;
5339     position: absolute;
5340     margin: auto;
5341     left: 0; right: 0; top: 0; bottom: 0;
5342     height: 0;
5343     width: 0;
5344 }
5345
5346 .nudge-container input {
5347     width: 100%;
5348     height: 20px;
5349     text-align: center;
5350     border: 0;
5351 }
5352
5353 .nudge-container input.error {
5354     border: 1px solid #ff7878;
5355     border-radius: 2px;
5356     background: #ffb;
5357 }
5358
5359 .nudge-container input:focus {
5360     background-color: transparent;
5361 }
5362
5363 .nudge-container button {
5364     float: left;
5365     display: block;
5366     width: 20%;
5367     position: relative;
5368     background-color: transparent;
5369 }
5370
5371 .nudge-container button.right {
5372     top: -50px;
5373     right: -85%;
5374 }
5375
5376 .nudge-container button.left {
5377     top: -50px;
5378     right: 45%;
5379 }
5380
5381 .nudge-container button.top {
5382     left: 20%;
5383     top: -104px;
5384 }
5385
5386 .nudge-container button.bottom {
5387     left: -20%;
5388 }
5389
5390 .nudge-container button.nudge-reset {
5391     right: -10px;
5392 }
5393
5394 .nudge-surface {
5395    position: absolute;
5396    z-index: 5000;
5397    left: 0;
5398    top: 0;
5399    width: 100%;
5400    height: 100%;
5401    background-color: transparent;
5402    cursor: move;
5403 }
5404
5405 .background-control .nudge.right::after {
5406     border-top: 5px solid transparent;
5407     border-bottom: 5px solid transparent;
5408     border-left: 5px solid #222;
5409 }
5410
5411 .background-control .nudge.left::after {
5412     border-top: 5px solid transparent;
5413     border-bottom: 5px solid transparent;
5414     border-right: 5px solid #222;
5415 }
5416
5417 .background-control .nudge.top::after {
5418     border-right: 5px solid transparent;
5419     border-left: 5px solid transparent;
5420     border-bottom: 5px solid #222;
5421 }
5422
5423 .background-control .nudge.bottom::after {
5424     border-right: 5px solid transparent;
5425     border-left: 5px solid transparent;
5426     border-top: 5px solid #222;
5427 }
5428
5429
5430 .map-data-control .layer-list button,
5431 .background-control .layer-list button {
5432     float: right;
5433     height: 100%;
5434     width: 10%;
5435     border-left: 1px solid #ccc;
5436     border-radius: 0;
5437 }
5438 [dir='rtl'] .map-data-control .layer-list button,
5439 [dir='rtl'] .background-control .layer-list button {
5440     float: left;
5441     border-left: none;
5442     border-right: 1px solid #ccc;
5443 }
5444
5445 .map-data-control .layer-list button .icon,
5446 .background-control .layer-list button .icon {
5447     opacity: 0.5;
5448 }
5449
5450 .map-data-control .layer-list button:first-of-type,
5451 .background-control .layer-list button:first-of-type {
5452     border-radius: 0 3px 3px 0;
5453 }
5454 [dir='rtl'] .map-data-control .layer-list button:first-of-type,
5455 [dir='rtl'] .background-control .layer-list button:first-of-type {
5456     border-radius: 3px 0 0 3px;
5457 }
5458
5459 /* Side panes */
5460 .map-pane {
5461     position: fixed;
5462     top: 60px;
5463     bottom: 30px;
5464     right: 0;
5465     padding-bottom: 50px;
5466     overflow: hidden;
5467     z-index: -1;
5468 }
5469 [dir='rtl'] .map-pane {
5470     left: 0;
5471     right: auto !important;
5472 }
5473
5474 .pane-heading {
5475     display: flex;
5476     flex-flow: row nowrap;
5477     justify-content: space-between;
5478     border-bottom: 1px solid #ccc;
5479 }
5480
5481 .pane-heading h2 {
5482     margin: 15px 20px;
5483 }
5484
5485 .pane-heading button {
5486     width: 40px;
5487     height: 61px;
5488     border-radius: 0;
5489 }
5490
5491 .pane-content {
5492     height: 100%;
5493     padding: 10px 50px 20px 20px;
5494     overflow-x: hidden;
5495     overflow-y: scroll;
5496 }
5497 [dir='rtl'] .pane-content {
5498     padding: 10px 20px 20px 50px;
5499 }
5500
5501 .pane-content > div {
5502     padding-bottom: 15px;
5503 }
5504
5505 /* Help */
5506
5507
5508 .help-wrap p {
5509     font-size: 15px;
5510     margin-bottom: 20px;
5511 }
5512
5513 .help-wrap .left-content .body p code {
5514     padding: 3px 4px;
5515     font-size: 12px;
5516     color: #555;
5517     vertical-align: baseline;
5518     background-color: #f6f6f6;
5519     border: solid 1px #ccc;
5520     margin: 0 2px;
5521     border-bottom-color: #bbb;
5522     border-radius: 3px;
5523     box-shadow: inset 0 -1px 0 #bbb;
5524 }
5525
5526 .help-wrap .left-content .icon.pre-text {
5527     vertical-align: text-top;
5528     margin-right: 0;
5529     margin-left: 0;
5530     display: inline-block;
5531 }
5532
5533 .help-wrap .toc {
5534     width: 40%;
5535     float: right;
5536     margin-left: 20px;
5537     margin-bottom: 20px;
5538     padding-left: 5px;
5539 }
5540
5541 .help-wrap .toc li a,
5542 .help-wrap .nav a {
5543     display: block;
5544     border: 1px solid #ccc;
5545     padding: 5px 10px;
5546 }
5547
5548 .help-wrap .toc li a {
5549     border-bottom: 0;
5550 }
5551
5552 .help-wrap .toc li a:hover,
5553 .help-wrap .nav a:hover {
5554     background: #ececec;
5555 }
5556
5557 .help-wrap .toc li a.selected {
5558     background: #e8ebff;
5559 }
5560
5561 .help-wrap .toc li:first-child a {
5562     border-radius: 4px 4px 0 0;
5563 }
5564
5565 .help-wrap .toc li:nth-last-child(3) a {
5566     border-bottom: 1px solid #ccc;
5567     border-radius: 0 0 4px 4px
5568 }
5569
5570 .help-wrap .toc li.shortcuts a,
5571 .help-wrap .toc li.walkthrough a {
5572     overflow: hidden;
5573     margin-top: 10px;
5574     border-bottom: 1px solid #ccc;
5575     border-radius: 4px;
5576 }
5577
5578 .help-wrap .toc li.walkthrough a {
5579     text-align: center;
5580 }
5581
5582 .help-wrap .nav {
5583     position: relative;
5584     padding-bottom: 30px;
5585 }
5586
5587 .help-wrap .nav a {
5588     float: left;
5589     width: 50%;
5590     text-align: center;
5591 }
5592
5593 .help-wrap .nav a:first-child {
5594     border-radius: 4px 0 0 4px;
5595 }
5596
5597 .help-wrap .nav a:last-child:not(:only-child) {
5598     border-radius: 0 4px 4px 0;
5599     border-left: 0;
5600 }
5601
5602 .help-wrap .nav a:only-child {
5603     width: 100%;
5604     border-radius: 4px;
5605 }
5606
5607
5608 /* Tiles
5609 ------------------------------------------------------- */
5610
5611 img.tile {
5612     position: absolute;
5613     transform-origin: 0 0;
5614     -ms-transform-origin: 0 0;
5615     -webkit-transform-origin: 0 0;
5616     -moz-transform-origin: 0 0;
5617     -o-transform-origin: 0 0;
5618
5619     -moz-user-select: none;
5620     -webkit-user-select: none;
5621     -ms-user-select: none;
5622     user-select: none;
5623
5624     opacity: 0;
5625
5626     -webkit-transition: opacity 200ms linear;
5627     -moz-transition: opacity 200ms linear;
5628     transition: opacity 200ms linear;
5629 }
5630
5631 img.tile-loaded {
5632     opacity: 1;
5633 }
5634
5635 img.tile-removing {
5636     opacity: 0;
5637 }
5638
5639 .tile-label-debug {
5640     font-size: 10px;
5641     background: rgba(0, 0, 0, 0.7);
5642     color: #fff;
5643     position: absolute;
5644     text-align: center;
5645     padding: 5px;
5646     border-radius: 3px;
5647     z-index: 2;
5648     margin-left: -70px;
5649     margin-top: -20px;
5650
5651     transform-origin: 0 0;
5652     -ms-transform-origin: 0 0;
5653     -webkit-transform-origin: 0 0;
5654     -moz-transform-origin: 0 0;
5655     -o-transform-origin: 0 0;
5656
5657     -moz-user-select: none;
5658     -webkit-user-select: none;
5659     -ms-user-select: none;
5660     user-select: none;
5661 }
5662
5663 img.tile-debug {
5664     outline: 1px solid red;
5665 }
5666
5667
5668 /* Map
5669 ------------------------------------------------------- */
5670
5671 #map {
5672     position: relative;
5673     overflow: hidden;
5674     height: 100%;
5675     background: #000;
5676     -moz-user-select: none;
5677     -webkit-user-select: none;
5678     -ms-user-select: none;
5679     user-select: none;
5680 }
5681
5682 #supersurface {
5683     transform-origin: 0 0;
5684     -ms-transform-origin: 0 0;
5685     -webkit-transform-origin: 0 0;
5686     -moz-transform-origin: 0 0;
5687     -o-transform-origin: 0 0;
5688 }
5689
5690 #supersurface, .layer {
5691     position: absolute;
5692     top: 0;
5693     left: 0;
5694     right: 0;
5695     bottom: 0;
5696 }
5697
5698 /* Map-In-Map
5699 ------------------------------------------------------- */
5700 .map-in-map {
5701     position: absolute;
5702     overflow: hidden;
5703     top: 60px;
5704     width: 200px;
5705     height: 150px;
5706     z-index: 5;
5707     background: #000;
5708     border: #aaa 1px solid;
5709     box-shadow: 0 0 2em black;
5710 }
5711
5712 .map-in-map-tiles {
5713     transform-origin: 0 0;
5714     -ms-transform-origin: 0 0;
5715     -webkit-transform-origin: 0 0;
5716     -moz-transform-origin: 0 0;
5717     -o-transform-origin: 0 0;
5718
5719     -moz-user-select: none;
5720     -webkit-user-select: none;
5721     -ms-user-select: none;
5722     user-select: none;
5723 }
5724
5725 .map-in-map-viewport,
5726 .map-in-map-data {
5727     top: 0;
5728     left: 0;
5729     overflow: hidden;
5730     height: 100%;
5731     width: 100%;
5732 }
5733
5734 .map-in-map-viewport {
5735     position: absolute;
5736 }
5737
5738 .map-in-map-data {
5739     position: relative;
5740     z-index: 10;
5741 }
5742
5743 .map-in-map-bbox {
5744     fill: none;
5745     stroke: rgba(255, 255, 0, 0.75);
5746     stroke-width: 1;
5747     shape-rendering: crispEdges;
5748 }
5749
5750 .map-in-map-bbox.thick {
5751     stroke-width: 5;
5752 }
5753
5754
5755 /* Debug
5756 ------------------------------------------------------- */
5757 .debug {
5758     stroke: currentColor;
5759     fill: none;
5760     stroke-width: 2;
5761 }
5762 .map-in-map-data .debug {
5763     stroke-width: 1;
5764 }
5765
5766 .nocolor { color: rgba(0, 0, 0, 0); }
5767 .red     { color: rgba(255, 0, 0, 0.75); }
5768 .green   { color: rgba(0, 255, 0, 0.75); }
5769 .blue    { color: rgba(176, 176, 255, 0.75); }
5770 .yellow  { color: rgba(255, 255, 0, 0.75); }
5771 .cyan    { color: rgba(0, 255, 255, 0.75); }
5772 .magenta { color: rgba(255, 0, 255, 0.75); }
5773 .orange  { color: rgba(255, 153, 0, 0.75); }
5774 .pink    { color: rgba(255, 0, 153, 0.75); }
5775 .purple  { color: rgba(153, 0, 255, 0.75); }
5776
5777 .debug-legend {
5778     position: absolute;
5779     top: 70px;
5780     right: 80px;
5781     padding: 5px;
5782     border-radius: 4px;
5783     pointer-events: none;
5784 }
5785
5786 .debug-legend-item {
5787     padding-right: 5px;
5788 }
5789 .debug-legend-item:before {
5790     content: "\25A0";
5791     padding: 0 5px;
5792 }
5793
5794 /* Info Box
5795 ------------------------------------------------------- */
5796 .info-panels {
5797     display: flex;
5798     flex-flow: row-reverse wrap-reverse;
5799     position: absolute;
5800     z-index: 1;
5801     right: 0;
5802     bottom: 30px;
5803     -ms-user-select: element;
5804 }
5805
5806 .info-panels h1,
5807 .info-panels h2,
5808 .info-panels h3,
5809 .info-panels h4,
5810 .info-panels h5 {
5811     display: inline-block;
5812     margin-bottom: 0;
5813 }
5814
5815 .info-panels h1,
5816 .info-panels h2,
5817 .info-panels h3 {
5818     color: #ff8;
5819 }
5820
5821 .panel-container {
5822     flex: 0 0 auto;
5823     margin: 2px 0 0 2px;
5824     border-radius: 4px;
5825     border: 1px solid rgba(0, 0, 0, 0.75);
5826     padding-bottom: 10px;
5827     width: 250px;
5828 }
5829
5830 .panel-container .panel-title {
5831     border-radius: 4px 4px 0 0;
5832 }
5833
5834 .panel-title {
5835     padding: 5px 10px;
5836 }
5837
5838 .panel-title button.close {
5839     float: right;
5840     height: 20px;
5841     background: none;
5842     color: #ddd;
5843 }
5844 [dir='rtl'] .panel-title button.close {
5845     float: left;
5846 }
5847
5848 .panel-title button.close:hover {
5849     color: #fff;
5850 }
5851
5852 .panel-title button.close .icon {
5853     height: 20px;
5854     width: 16px;
5855 }
5856
5857 .panel-content {
5858     padding: 5px 10px;
5859     position: relative;
5860 }
5861
5862 .panel-content li span {
5863     display: inline-block;
5864     white-space: nowrap;
5865     margin: 0 8px;
5866 }
5867
5868 .panel-content .button {
5869     display: inline-block;
5870     background: #7092ff;
5871     border-radius: 2px;
5872     padding: 0 4px;
5873     margin-top: 10px;
5874     margin-right: 10px;
5875     color: #fff;
5876 }
5877 [dir='rtl'] .panel-content .button {
5878     margin-right: auto;
5879     margin-left: 10px;
5880 }
5881
5882 .panel-content-history .links a {
5883     margin-left: 8px;
5884 }
5885 [dir='rtl'] .panel-content-history .links a {
5886     margin-left: auto;
5887     margin-right: 8px;
5888 }
5889
5890 .panel-content-history .view-history-on-osm {
5891     display: block;
5892     margin-top: 10px;
5893 }
5894
5895 .panel-content-location .location-info {
5896     margin-top: 10px;
5897 }
5898
5899
5900 /* About Section
5901 ------------------------------------------------------- */
5902
5903 #about {
5904     width: 100%;
5905     position: absolute;
5906     right: 0;
5907     bottom: 0;
5908     border-radius: 0;
5909     pointer-events: none;
5910     display: flex;
5911     flex-direction: column;
5912     -ms-user-select: element;
5913 }
5914
5915 #attrib {
5916     width: 100%;
5917     height: 20px;
5918     margin-bottom: 5px;
5919 }
5920
5921 #attrib * { pointer-events: all; }
5922
5923 .base-layer-attribution,
5924 .overlay-layer-attribution {
5925     position: absolute;
5926     color: #ccc;
5927     font-size: 10px;
5928 }
5929
5930 .base-layer-attribution {
5931     left: 10px;
5932 }
5933
5934 .overlay-layer-attribution {
5935     right: 10px;
5936 }
5937
5938 .overlay-layer-attribution .attribution:not(:last-child):after {
5939     content: '; ';
5940 }
5941
5942 .attribution a,
5943 .attribution a:visited {
5944     color: #ccf;
5945 }
5946
5947 .attribution a:hover {
5948     color: #aaf;
5949 }
5950
5951 .attribution .source-image {
5952     height: 20px;
5953     vertical-align: middle;
5954     border-radius: 3px;
5955 }
5956
5957 .attribution span {
5958     margin: 0 3px;
5959 }
5960
5961 #footer {
5962     pointer-events: all;
5963     display: block;
5964     height: 30px;
5965 }
5966
5967 /* footer flash message */
5968
5969 #flash-wrap {
5970     display: flex;
5971     flex: 0 0 100%;
5972     flex-flow: row nowrap;
5973     justify-content: space-between;
5974     max-height: 30px;
5975     position: absolute;
5976     right: 0;
5977     left: 0;
5978 }
5979
5980 .flash-content {
5981     display: flex;
5982     flex: 1 0 auto;
5983     flex-flow: row nowrap;
5984     align-items: center;
5985     padding: 2px;
5986     height: 30px;
5987 }
5988
5989 .flash-icon {
5990     flex: 0 0 auto;
5991     width: 20px;
5992     height: 20px;
5993     margin: 0 8px;
5994 }
5995
5996 .flash-icon circle {
5997     fill: #eee;
5998 }
5999 .flash-icon.disabled circle {
6000     cursor: auto;
6001     fill: rgba(255,255,255,0.7);
6002 }
6003
6004 .flash-icon use {
6005     color: #222;
6006 }
6007 .flash-icon.disabled use {
6008     color: rgba(32,32,32,0.7);
6009 }
6010
6011 .flash-icon.operation use {
6012     fill: #222;
6013     color: #79f;
6014 }
6015 .flash-icon.operation.disabled use {
6016     fill: rgba(32,32,32,0.7);
6017     color: rgba(40,40,40,0.7);
6018 }
6019
6020 .flash-text {
6021     flex: 1 1 auto;
6022 }
6023
6024 #footer-wrap {
6025     display: flex;
6026     flex: 0 0 100%;
6027     flex-flow: row nowrap;
6028     justify-content: space-between;
6029     max-height: 30px;
6030     position: absolute;
6031     right: 0;
6032     left: 0;
6033 }
6034
6035 .footer-show {
6036     bottom: 0px;
6037     transition: bottom 75ms linear;
6038     -moz-transition: bottom 75ms linear;
6039     -webkit-transition: bottom 75ms linear;
6040 }
6041
6042 .footer-hide {
6043     bottom: -35px;
6044     transition: bottom 75ms linear;
6045     -moz-transition: bottom 75ms linear;
6046     -webkit-transition: bottom 75ms linear;
6047 }
6048
6049
6050 /* footer scale */
6051
6052 #scale-block {
6053     vertical-align: bottom;
6054     width: 250px;
6055     max-height: 30px;
6056     flex: 0 0 250px;
6057     -moz-user-select: none;
6058     -webkit-user-select: none;
6059     -ms-user-select: none;
6060     user-select: none;
6061 }
6062
6063 #info-block {
6064     max-height: 30px;
6065     flex: 1 1 auto;
6066 }
6067
6068 #scale {
6069     height: 30px;
6070     width: 100%;
6071 }
6072 [dir='rtl'] #scale {
6073     transform: scaleX(-1);
6074 }
6075
6076 #scale:hover {
6077     cursor: pointer;
6078 }
6079
6080 #scale text {
6081     font: 12px sans-serif;
6082     stroke: none;
6083     fill: #ccc;
6084     text-anchor: start;
6085 }
6086 [dir='rtl'] #scale text {
6087     transform: scaleX(-1);
6088 }
6089
6090 #scale path {
6091     fill: none;
6092     stroke: #ccc;
6093     stroke-width: 1;
6094     shape-rendering: crispEdges;
6095 }
6096
6097
6098 #about-list {
6099     text-align: right;
6100     margin-right: 10px;
6101     clear: right;
6102     overflow: hidden;
6103 }
6104 [dir='rtl'] #about-list {
6105     text-align: left;
6106     clear: left;
6107     margin-left: 10px;
6108     margin-right: 0;
6109 }
6110
6111 #about-list li {
6112     float: right;
6113     border-left: 1px solid rgba(255,255,255,.5);
6114     padding: 5px 0 5px 5px;
6115     margin-left: 5px;
6116 }
6117 [dir='rtl'] #about-list li {
6118     float: left;
6119     border-left: none;
6120     border-right: 1px solid rgba(255,255,255,.5);
6121     margin-left: 0;
6122     margin-right: 5px;
6123     padding: 5px 5px 5px 0;
6124 }
6125
6126
6127 #about-list li:last-child {
6128     border-left: 0;
6129     margin-left: 0;
6130     padding-left: 0;
6131 }
6132 [dir='rtl'] #about-list li:last-child {
6133     border-right: none;
6134 }
6135
6136 .source-switch a {
6137     padding: 2px 4px 4px 4px;
6138     border-radius: 2px;
6139 }
6140 .source-switch a.live {
6141     background: #d32232;
6142     color: #fff;
6143 }
6144
6145 .feature-warning a {
6146     background: #1e90ff;
6147     padding: 2px 4px 4px 4px;
6148     border-radius: 2px;
6149     color: #eee;
6150 }
6151
6152 .user-list a:not(:last-child):after {
6153     content: ', ';
6154 }
6155
6156 .api-status {
6157     text-align: right;
6158     padding: 0px 10px;
6159     color: #eee;
6160     flex: 1 1 auto;
6161 }
6162 [dir='rtl'] .api-status {
6163     text-align: left;
6164 }
6165
6166 .api-status.offline,
6167 .api-status.readonly,
6168 .api-status.error {
6169     background: #a22;
6170 }
6171
6172 .api-status-login {
6173     color: #aaf;
6174 }
6175 .api-status-login:hover {
6176     color: #ccf;
6177 }
6178
6179 /* Notification Badges */
6180
6181 /* For an icon (e.g. new version) */
6182 .badge {
6183     display: inline-block;
6184     background: #d32232;
6185     width: 21px;
6186     height: 20px;
6187     border-radius: 11px;
6188     margin-left: 6px;
6189 }
6190 [dir='rtl'] .badge {
6191     margin-left: 0;
6192     margin-right: 6px;
6193 }
6194 .badge a {
6195     margin-right: 5px;
6196 }
6197 [dir='rtl'] .badge a {
6198     margin-right: 0;
6199     margin-left: 5px;
6200 }
6201 .badge .icon {
6202     vertical-align: baseline;
6203     width: 11px;
6204     height: 11px;
6205     fill: #fff;
6206 }
6207
6208 /* For text (e.g. upcoming events) */
6209 .badge-text {
6210     display: inline-block;
6211     color: #fff;
6212     text-align: center;
6213     width: 16px;
6214     height: 16px;
6215     font-size: 10px;
6216     font-weight: bold;
6217     margin-left: 5px;
6218     background: #f00;
6219     border-radius: 9px;
6220 }
6221 [dir='rtl'] .badge-text {
6222     margin-left: 0;
6223     margin-right: 5px;
6224 }
6225
6226
6227 /* Modals
6228 ------------------------------------------------------- */
6229
6230 .modal {
6231     top: 40px;
6232     display: inline-block;
6233     position: absolute;
6234     border-radius: 3px;
6235     overflow: hidden;
6236     left: 0;
6237     right: 0;
6238     margin: auto;
6239     z-index: 50;
6240 }
6241
6242 .modal .loader {
6243     margin-bottom: 10px;
6244 }
6245
6246 .modal .description {
6247     text-align: center;
6248 }
6249
6250 .shaded {
6251     z-index: 49;
6252     position: absolute;
6253     top: 0;
6254     bottom: 0;
6255     left: 0;
6256     right: 0;
6257     overflow: auto;
6258 }
6259
6260 .shaded:before {
6261     content:'';
6262     background: rgba(0,0,0,0.5);
6263     position: fixed;
6264     left: 0px; right: 0px; top: 0px; bottom: 0px;
6265 }
6266
6267 .modal-section {
6268     padding: 20px;
6269     border-bottom: 1px solid #ccc;
6270 }
6271
6272 .modal-section.header h3 {
6273     padding: 0;
6274 }
6275
6276 .modal-section.buttons {
6277     text-align: center;
6278 }
6279
6280 .modal-section.buttons .action {
6281     display: inline-block;
6282     margin: 0 10px;
6283     text-align: center;
6284     vertical-align: middle;
6285 }
6286
6287 .save-section .buttons {
6288     display: flex;
6289     flex-wrap: wrap;
6290     justify-content: space-around;
6291     margin-bottom: 30px;
6292 }
6293
6294 .save-section .buttons .action,
6295 .save-section .buttons .secondary-action {
6296     width: 45%;
6297     margin: 10px auto;
6298     text-align: center;
6299     vertical-align: middle;
6300 }
6301
6302 .loading-modal {
6303     text-align: center;
6304 }
6305
6306 .modal-actions button {
6307     font-weight: normal;
6308     color: #7092ff;
6309     border-bottom: 1px solid #ccc;
6310     border-radius: 0;
6311     height: 160px;
6312     text-align: center;
6313     display: inline-block;
6314 }
6315 .modal-actions button:hover {
6316     background-color: #ececec;
6317 }
6318
6319 .logo-small {
6320     height: 40px;
6321     width: 40px;
6322     margin: auto;
6323 }
6324
6325 .logo {
6326     height: 100px;
6327     width: 100%;
6328     max-width: 100px;
6329     margin: auto;
6330 }
6331
6332 .modal-actions > :first-child {
6333     border-right: 1px solid #ccc;
6334 }
6335
6336 .modal-section:last-child {
6337     border-bottom: 0;
6338 }
6339
6340 /* Restore Modal
6341 ------------------------------------------------------- */
6342 .modal-actions .logo-restore {
6343     color: #7092ff;
6344 }
6345 .modal-actions .logo-reset {
6346     color: #e06c5e;
6347 }
6348
6349 /* Success Modal
6350 ------------------------------------------------------- */
6351 .save-success.body {
6352     overflow-y: scroll;
6353     overflow-x: hidden;
6354 }
6355
6356 .save-success .link-out {
6357     margin: 0px 5px;
6358     white-space: nowrap;
6359 }
6360
6361 .save-summary,
6362 .save-communityLinks {
6363     padding: 0px 20px 15px 20px;
6364 }
6365
6366 .save-communityLinks {
6367     border-top: 1px solid #ccc;
6368 }
6369
6370 .save-success table,
6371 .save-success p {
6372     margin-top: 15px;
6373 }
6374 .save-success h3 {
6375     font-size: 14px;
6376     margin-top: 15px;
6377     line-height: 1.5;
6378     padding-bottom: 0;
6379 }
6380 .save-success td {
6381     vertical-align: top;
6382 }
6383 .save-success td.cell-icon {
6384     width: 40px;
6385 }
6386 .save-success td.cell-detail {
6387     padding: 0 10px;
6388 }
6389 .save-success td.community-detail {
6390     padding-bottom: 15px;
6391 }
6392
6393 .summary-view-on-osm,
6394 .community-name {
6395     font-size: 14px;
6396     font-weight: bold;
6397 }
6398 .community-languages {
6399     margin-top: 5px;
6400     font-style: italic;
6401 }
6402 .community-languages:only-child {
6403     margin-top: 0;
6404 }
6405
6406 .community-detail a.hide-toggle,
6407 .community-detail a:visited.hide-toggle {
6408     font-size: 12px;
6409     font-weight: normal;
6410     padding-bottom: 0;
6411 }
6412 .community-detail .hide-toggle svg.icon.pre-text {
6413     width: 12px;
6414     height: 15px;
6415 }
6416
6417 .community-events {
6418     margin-top: 5px;
6419 }
6420
6421 .community-event,
6422 .community-more {
6423     background-color: #efefef;
6424     padding: 8px;
6425     border-radius: 4px;
6426     margin-bottom: 5px;
6427 }
6428
6429 .community-event-name {
6430     font-size: 14px;
6431     font-weight: bold;
6432 }
6433 .community-event-when {
6434     font-weight: bold;
6435 }
6436
6437 .community-missing {
6438     padding: 10px;
6439     text-align: center;
6440 }
6441
6442
6443 /* Splash Modal
6444 ------------------------------------------------------- */
6445 .modal-actions .logo-walkthrough,
6446 .modal-actions .logo-features {
6447     color: #7092ff;
6448 }
6449
6450
6451 /* Shortcuts Modal
6452 ------------------------------------------------------- */
6453 .modal-shortcuts {
6454     width: 90%;
6455     max-width: 950px;
6456 }
6457
6458 .modal-shortcuts .modal-section:last-child {
6459     padding-top: 10px;
6460     min-height: 275px;
6461 }
6462
6463 .modal-shortcuts .tabs-bar {
6464     text-align: center;
6465     padding-bottom: 5px;
6466     font-size: 16px;
6467     font-weight: bold;
6468 }
6469
6470 .modal-shortcuts .tab {
6471     display: inline-block;
6472     padding: 5px 10px;
6473     margin: 0 5px;
6474     cursor: pointer;
6475     color: #666;
6476 }
6477 .modal-shortcuts .tab.active {
6478     color: #7092ff;
6479 }
6480 .modal-shortcuts .tab:hover {
6481     color: #597be7;
6482     background-color: #efefef;
6483 }
6484
6485 .modal-shortcuts .shortcut-tab {
6486     display: flex;
6487     flex-flow: row wrap;
6488 }
6489
6490 .modal-shortcuts .shortcut-column {
6491     flex: 1 1 50%;
6492     width: 50%;
6493 }
6494
6495 .modal-shortcuts .shortcut-tab-tools .shortcut-column {
6496     flex: 1 1 100%;
6497     width: 100%;
6498 }
6499
6500 .modal-shortcuts td {
6501     padding-bottom: 5px;
6502 }
6503
6504 .modal-shortcuts .shortcut-section {
6505     padding: 20px 0 10px 0;
6506 }
6507
6508 .modal-shortcuts .shortcut-keys {
6509     padding-right: 10px;
6510     color: #767676;
6511     text-align: right;
6512 }
6513 [dir='rtl'] .modal-shortcuts .shortcut-keys {
6514     padding-right: auto;
6515     padding-left: 10px;
6516     text-align: left;
6517 }
6518
6519 .modal-shortcuts .shortcut-keys kbd {
6520     display: inline-block;
6521     text-align: center;
6522     padding: 3px 5px;
6523     font-size: 11px;
6524     line-height: 12px;
6525     min-width: 12px;
6526     color: #555;
6527     vertical-align: baseline;
6528     background-color: #fcfcfc;
6529     border: solid 1px #ccc;
6530     margin: 0 2px;
6531     border-bottom-color: #bbb;
6532     border-radius: 3px;
6533     box-shadow: inset 0 -1px 0 #bbb;
6534 }
6535
6536 svg.mouseclick use.left {
6537     fill: rgba(112, 146, 255, 1);
6538     color: rgba(112, 146, 255, 0);
6539 }
6540 svg.mouseclick use.right {
6541     fill: rgba(112, 146, 255, 0);
6542     color: rgba(112, 146, 255, 1);
6543 }
6544
6545 .modal-shortcuts .shortcut-keys .gesture {
6546     color: #333;
6547     padding: 3px;
6548 }
6549
6550
6551 /* Save Mode
6552 ------------------------------------------------------- */
6553 .mode-save a.user-info {
6554     display: inline-block;
6555 }
6556
6557 .mode-save .commit-form {
6558     margin-bottom: 0;
6559 }
6560
6561 .mode-save .user-info img {
6562     float: left;
6563 }
6564
6565 .mode-save h3 small.count {
6566     margin-right: 10px;
6567     text-align: center;
6568     float: left;
6569     height: 12px;
6570     min-width: 12px;
6571     font-size: 12px;
6572     line-height: 12px;
6573     border-radius: 24px;
6574     padding: 5px;
6575     background: #7092ff;
6576     color: #fff;
6577 }
6578
6579 .note-save .field-warning,
6580 .mode-save .field-warning {
6581     background: #ffb;
6582     border: 1px solid #ccc;
6583     border-radius: 4px;
6584     padding: 10px;
6585 }
6586
6587 .note-save .field-warning:empty,
6588 .mode-save .field-warning:empty {
6589     display: none;
6590 }
6591
6592 .mode-save .field-warning,
6593 .mode-save .changeset-info,
6594 .mode-save .request-review,
6595 .mode-save .commit-info {
6596     margin-bottom: 10px;
6597 }
6598
6599 .mode-save .request-review label {
6600     cursor: pointer;
6601 }
6602
6603 .mode-save .changeset-list {
6604     border: 1px solid #ccc;
6605     border-radius: 4px;
6606     background: #fff;
6607     margin-bottom: 10px;
6608 }
6609
6610 .mode-save .warning-section {
6611     background: #ffb;
6612 }
6613
6614 .mode-save .warning-section .changeset-list button {
6615     border-left: 1px solid #ccc;
6616 }
6617
6618 .mode-save .changeset-list li {
6619     position: relative;
6620     border-top: 1px solid #ccc;
6621     padding: 5px 10px;
6622     cursor: pointer;
6623 }
6624
6625 .mode-save .changeset-list li:hover {
6626     background-color: #ececec;
6627 }
6628
6629 .mode-save .changeset-list .alert {
6630     opacity: 0.5;
6631 }
6632
6633 .changeset-list li span.count {
6634     font-size: 10px;
6635     color: #555;
6636 }
6637
6638 .mode-save .commit-section .changeset-list button {
6639     border-left: 1px solid #ccc;
6640 }
6641
6642 .changeset-list li span.count:before { content: '('; }
6643
6644 .changeset-list li span.count:after { content: ')'; }
6645
6646 .changeset-list li:first-child { border-top: 0;}
6647
6648 /* Conflict resolution
6649 ------------------------------------------------------- */
6650
6651 .conflicts-help {
6652     padding: 20px;
6653     background-color: #ffffbb;
6654     border-bottom: 1px solid #ccc;
6655 }
6656
6657 .conflicts-buttons {
6658     padding: 20px;
6659 }
6660
6661 .mode-save button.conflicts-button {
6662     float: left;
6663 }
6664
6665 .conflict-container {
6666     border-bottom: 1px solid #ccc;
6667 }
6668
6669 .conflict-description {
6670     padding: 5px 20px;
6671     display: block;
6672 }
6673
6674 .conflicts-done {
6675     padding: 20px 20px 0 20px;
6676 }
6677
6678 .conflict-detail-container {
6679     padding: 10px 20px;
6680 }
6681
6682 .conflict-count {
6683     padding: 10px 20px;
6684 }
6685
6686 .conflict-choices {
6687     margin-top: 10px;
6688 }
6689
6690 .conflict-nav-buttons {
6691     padding: 10px 0 20px 0;
6692 }
6693
6694 .conflict-nav-button {
6695     height: 30px;
6696 }
6697
6698 /* Notices
6699 ------------------------------------------------------- */
6700
6701 .notice {
6702     position: absolute;
6703     top: 45px;
6704     left: 0;
6705     right: 0;
6706     text-align: center;
6707 }
6708
6709 .notice .zoom-to {
6710     margin: auto;
6711     width: 300px;
6712     height: 70px;
6713     font-size: 150%;
6714     border-radius: 8px;
6715 }
6716
6717 .notice .zoom-to:hover {
6718     background: rgba(0,0,0,0.6);
6719 }
6720
6721 .notice .zoom-to .icon {
6722     width: 30px;
6723     height: 30px;
6724     vertical-align: middle;
6725     margin-right: 10px;
6726 }
6727 [dir='rtl'] .notice .zoom-to .icon {
6728     margin-left: 10px;
6729     margin-right: 0;
6730 }
6731
6732 /* Tooltips
6733 ------------------------------------------------------- */
6734
6735 .tooltip {
6736     position: absolute;
6737     display: none;
6738     color: #333;
6739     font-size: 12px;
6740 }
6741
6742 .tooltip.in {
6743     opacity: 0.9;
6744     z-index: 1030;
6745     height: auto;
6746     display: block;
6747 }
6748
6749 .tooltip.top {
6750     margin-top: -20px;
6751     text-align: center;
6752 }
6753
6754 .tooltip.right {
6755     margin-left: 20px;
6756     text-align: left;
6757 }
6758
6759 .tooltip.bottom {
6760     margin-top: 20px;
6761     text-align: center;
6762 }
6763
6764 .tooltip.left {
6765     margin-left: -20px;
6766     text-align: right;
6767 }
6768
6769 .tooltip-inner {
6770     display: inline-block;
6771     border-radius: 3px;
6772     max-width: 200px;
6773     min-width: 80px;
6774     padding: 10px;
6775     font-weight: normal;
6776     background-color: #fff;
6777 }
6778
6779 .tail {
6780     width: 200px;
6781     height: 400px;
6782     pointer-events: none;
6783     opacity: .8;
6784     margin-top: -200px;
6785     position: absolute;
6786     background: transparent;
6787 }
6788
6789 .tail::after {
6790     content: "";
6791     position: absolute;
6792     width: 0;
6793     height: 0;
6794     border-color: transparent;
6795     border-style: solid;
6796     top: 50%;
6797     right: -5px;
6798     margin-top: -5px;
6799     border-left-color: #fff;
6800     border-width: 5px 0 5px 5px;
6801 }
6802
6803 .tail div {
6804     border-radius: 3px;
6805     padding: 10px;
6806     background: #fff;
6807     position: absolute;
6808     top: 180px;
6809     left: 0;
6810     right: 0;
6811     margin: auto;
6812 }
6813
6814 .left.tail::after {
6815     content: "";
6816     position: absolute;
6817     width: 0;
6818     height: 0;
6819     border-color: transparent;
6820     border-style: solid;
6821     top: 50%;
6822     left: -5px;
6823     margin-top: -5px;
6824     border-right-color: #fff;
6825     border-width: 5px 5px 5px 0;
6826 }
6827
6828 .tooltip-arrow {
6829     position: absolute;
6830     width: 0;
6831     height: 0;
6832     border-color: transparent;
6833     border-style: solid;
6834 }
6835
6836 .tooltip.top .tooltip-arrow {
6837     bottom: -5px;
6838     left: 50%;
6839     margin-left: -5px;
6840     border-top-color: #fff;
6841     border-width: 5px 5px 0;
6842 }
6843
6844 .tooltip.right .tooltip-arrow {
6845     top: 50%;
6846     left: -5px;
6847     margin-top: -5px;
6848     border-right-color: #fff;
6849     border-width: 5px 5px 5px 0;
6850 }
6851
6852 .tooltip.left .tooltip-arrow {
6853     top: 50%;
6854     right: -5px;
6855     margin-top: -5px;
6856     border-left-color: #fff;
6857     border-width: 5px 0 5px 5px;
6858 }
6859
6860 .tooltip.bottom .tooltip-arrow {
6861     top: -5px;
6862     left: 50%;
6863     margin-left: -5px;
6864     border-bottom-color: #fff;
6865     border-width: 0 5px 5px;
6866 }
6867
6868 .tooltip-heading {
6869     font-weight: bold;
6870     background: #F6F6F6;
6871     padding: 10px;
6872     margin: -10px -10px 10px -10px;
6873     border-radius: 3px 3px 0 0;
6874     font-size: 14px;
6875 }
6876
6877 .keyhint-wrap {
6878     background: #F6F6F6;
6879     padding: 10px;
6880     margin: 10px -10px -10px -10px;
6881     border-radius: 0 0 3px 3px;
6882 }
6883
6884 .tooltip-inner .keyhint {
6885     font-weight: bold;
6886     margin-left: 5px;
6887 }
6888
6889 /* Exceptions for tooltip layouts */
6890
6891 /* make tooltips in panels dark */
6892 .map-pane .tooltip.top .tooltip-arrow,
6893 .entity-editor-pane .tooltip.top .tooltip-arrow,
6894 .warning-section .tooltip.top .tooltip-arrow {
6895     border-top-color: #000;
6896 }
6897
6898 .map-pane .tooltip.bottom .tooltip-arrow,
6899 .entity-editor-pane .tooltip.bottom .tooltip-arrow,
6900 .warning-section .tooltip.bottom .tooltip-arrow {
6901     border-bottom-color: #000;
6902 }
6903
6904 .map-pane .tooltip.left .tooltip-arrow,
6905 .entity-editor-pane .tooltip.left .tooltip-arrow,
6906 .warning-section .tooltip.left .tooltip-arrow {
6907     border-left-color: #000;
6908 }
6909
6910 .map-pane .tooltip.right .tooltip-arrow,
6911 .entity-editor-pane .tooltip.right .tooltip-arrow,
6912 .warning-section .tooltip.right .tooltip-arrow {
6913     border-right-color: #000;
6914 }
6915
6916 .map-pane .tooltip-inner,
6917 .map-pane .tooltip-heading,
6918 .map-pane .keyhint-wrap,
6919 .entity-editor-pane .tooltip-inner,
6920 .warning-section .tooltip-inner {
6921     background: #000;
6922     color: #ccc;
6923 }
6924 /* commit warning tooltips need to be closer */
6925 .warning-section .tooltip.top {
6926     margin-top: -5px;
6927 }
6928
6929 /* Uncramp map-control tooltips */
6930 .map-control .tooltip {
6931     min-width: 160px;
6932 }
6933 .map-control .shortcuts .tooltip {
6934     max-width: 160px;
6935 }
6936
6937 /* Move over tooltips that are near the edge of screen */
6938 .add-point .tooltip {
6939     left: 33.3333% !important;
6940 }
6941 [dir='rtl'] .add-point .tooltip {
6942     left: inherit !important;
6943 }
6944
6945 .add-point .tooltip .tooltip-arrow {
6946     left: 60px;
6947 }
6948 [dir='rtl'] .add-point .tooltip .tooltip-arrow {
6949     left: auto;
6950     right: 60px;
6951 }
6952
6953 li:first-of-type .badge .tooltip,
6954 li.hide + li.version .badge .tooltip {
6955     left: auto !important;
6956     right: 5px !important;
6957 }
6958 [dir='rtl'] li:first-of-type .badge .tooltip,
6959 [dir='rtl'] li.hide + li.version .badge .tooltip {
6960     left: 5px !important;
6961     right: auto !important;
6962 }
6963 li:first-of-type .badge .tooltip .tooltip-arrow,
6964 li.hide + li.version .badge .tooltip .tooltip-arrow {
6965     right: 15px !important;
6966     left: auto !important;
6967 }
6968 [dir='rtl'] li:first-of-type .badge .tooltip .tooltip-arrow,
6969 [dir='rtl'] li.hide + li.version .badge .tooltip .tooltip-arrow {
6970     left: 15px !important;
6971     right: auto !important;
6972 }
6973
6974
6975 /* radial menu (deprecated) */
6976
6977 .radial-menu-tooltip {
6978     opacity: 0.8;
6979     display: none;
6980     position: absolute;
6981     width: 200px;
6982 }
6983
6984 .radial-menu-background {
6985     fill: none;
6986     stroke: black;
6987     stroke-opacity: 0.5;
6988 }
6989
6990 .radial-menu-item circle {
6991     fill: #eee;
6992 }
6993
6994 .radial-menu-item circle:active,
6995 .radial-menu-item circle:hover {
6996     fill: #fff;
6997 }
6998
6999 .radial-menu-item.disabled circle {
7000     cursor: auto;
7001     fill: rgba(255,255,255,.5);
7002 }
7003
7004 .radial-menu-item use {
7005     fill: #222;
7006     color: #79f;
7007 }
7008
7009 .radial-menu-item.disabled use {
7010     fill: rgba(32,32,32,.5);
7011     color: rgba(40,40,40,.5);
7012 }
7013
7014 /* edit menu */
7015
7016 .edit-menu-tooltip {
7017     display: none;
7018     position: absolute;
7019     width: 200px;
7020 }
7021
7022 .edit-menu-background {
7023     fill: #eee;
7024 }
7025
7026 .edit-menu-item rect {
7027     fill: #eee;
7028     cursor: default;
7029 }
7030
7031 .edit-menu-item rect:active,
7032 .edit-menu-item rect:hover {
7033     fill: #ccc;
7034 }
7035
7036 .edit-menu-item.disabled rect {
7037     cursor: not-allowed;
7038 }
7039 .edit-menu-item.disabled rect:hover {
7040     cursor: not-allowed;
7041     fill: #eee;
7042 }
7043
7044 .edit-menu-item use {
7045     fill: #222;
7046     color: #79f;
7047     pointer-events: none;
7048 }
7049
7050 .edit-menu-item.disabled use {
7051     fill: rgba(32,32,32,.2);
7052     color: rgba(40,40,40,.2);
7053 }
7054
7055
7056 .lasso-path {
7057     fill-opacity: 0.3;
7058     stroke: #fff;
7059     stroke-width: 1;
7060     stroke-opacity: 1;
7061     stroke-dasharray: 5, 5;
7062 }
7063
7064 /* Media Queries
7065 ------------------------------------------------------- */
7066
7067 @media only screen and (max-width: 840px) {
7068     /* override hide for save button */
7069     #bar .save .label { display: block;}
7070 }
7071
7072 @media screen and (max-width: 1200px) {
7073     .user-list { display: none !important; }
7074 }
7075
7076 @media screen and (max-width: 1000px) {
7077     #userLink { display: none !important; }
7078 }
7079
7080 @media screen and (max-width: 900px) {
7081     #scale-block { display: none !important; }
7082 }
7083
7084
7085 /* Scrollbars
7086  ----------------------------------------------------- */
7087
7088 ::-webkit-scrollbar {
7089     height: 20px;
7090     overflow: visible;
7091     width: 10px;
7092     background: #fff;
7093     border-left: 1px solid #DDD;
7094 }
7095
7096 ::-webkit-scrollbar-track {
7097     background-clip: padding-box;
7098     border: solid transparent;
7099     border-width: 0;
7100 }
7101
7102 ::-webkit-scrollbar-thumb {
7103     background-color: rgba(0,0,0,.2);
7104     background-clip: padding-box;
7105     border: solid transparent;
7106     border-width: 3px 3px 3px 4px;
7107     border-radius: 6px;
7108 }
7109 ::-webkit-scrollbar-track:hover,
7110 ::-webkit-scrollbar-track:active {
7111     background-color: rgba(0,0,0,.05);
7112 }
7113
7114 /* Intro walkthrough
7115  ----------------------------------------------------- */
7116
7117 .curtain-darkness {
7118     pointer-events: all;
7119     fill-opacity: 0.7;
7120     fill: #222;
7121     fill-rule: evenodd;
7122 }
7123
7124 .intro-nav-wrap {
7125     display: flex;
7126     flex-direction: row;
7127     position: absolute;
7128     left: 0;
7129     right: 0;
7130     bottom: 30px;
7131     padding: 10px;
7132     z-index: 1001;
7133 }
7134
7135 .intro-nav-wrap .intro-nav-wrap-logo {
7136     flex: 0 0 auto;
7137     height: 40px;
7138     width: 40px;
7139     color: #fff;
7140     margin: 0px 20px;
7141     vertical-align: middle;
7142 }
7143
7144 .intro-nav-wrap .joined {
7145     flex: 1 1 auto;
7146     display: flex;
7147     flex-direction: row;
7148 }
7149
7150 .intro-nav-wrap button.chapter {
7151     flex: 1 1 100%;
7152     padding: 0px 20px;
7153 }
7154
7155 .intro-nav-wrap button.chapter.next {
7156     animation-duration: 1s;
7157     animation-name: pulse;
7158     animation-iteration-count: infinite;
7159     animation-direction: alternate;
7160 }
7161 @keyframes pulse {
7162     from  { background: #7092ff; }
7163     to    { background: #c6d4ff; }
7164 }
7165
7166 .intro-nav-wrap button.chapter.finished {
7167     background: #8cd05f;
7168 }
7169
7170 .intro-nav-wrap button.chapter .status {
7171     display: none;
7172 }
7173
7174 .intro-nav-wrap button.chapter.finished .status {
7175     display: inline-block;
7176 }
7177
7178 .curtain-tooltip.tooltip.in {
7179     opacity: 1;
7180 }
7181 .curtain-tooltip.tooltip {
7182     text-align: left;
7183 }
7184 [dir='rtl'] .curtain-tooltip.tooltip {
7185     text-align: right;
7186 }
7187
7188 .curtain-tooltip .tooltip-inner {
7189     font-size: 15px;
7190     position: relative;
7191     padding: 20px;
7192 }
7193
7194 .curtain-tooltip .tooltip-inner .button-section,
7195 .curtain-tooltip .tooltip-inner .instruction {
7196     font-weight: bold;
7197     display: block;
7198     border-top: 1px solid #ccc;
7199     margin-top: 10px;
7200     margin-left: -20px;
7201     margin-right: -20px;
7202     padding: 10px 20px 0 20px;
7203 }
7204
7205 [dir='rtl'] .curtain-tooltip .tooltip-inner .button-section button.col8 {
7206     float: right;
7207 }
7208
7209 .curtain-tooltip .tooltip-inner .instruction:only-child {
7210     border: 0;
7211     padding: 0;
7212     margin: 0;
7213 }
7214
7215 .curtain-tooltip .tooltip-inner .icon.pre-text {
7216     vertical-align: text-top;
7217     margin-right: 0;
7218     margin-left: 0;
7219     display: inline-block;
7220 }
7221
7222 .curtain-tooltip.intro-points-describe ,
7223 .curtain-tooltip.intro-lines-name_road {
7224     top: 133px !important;
7225 }
7226
7227 .tooltip-illustration {
7228     height: 80px;
7229     width: 200px;
7230     margin-left: -20px;
7231     margin-top: -10px;
7232 }
7233 [dir='rtl'] .tooltip-illustration {
7234     margin-left: auto;
7235     margin-right: -20px;
7236 }
7237
7238 .curtain-tooltip.intro-mouse {
7239     -moz-user-select: none;
7240     -webkit-user-select: none;
7241     -ms-user-select: none;
7242     user-select: none;
7243 }
7244
7245 .curtain-tooltip.intro-mouse .counter {
7246     position: absolute;
7247     display: block;
7248     top: 50px;
7249     width: 100%;
7250     text-align: center;
7251     font-weight: bold;
7252     font-size: 14px;
7253     z-index: 1003;
7254 }
7255
7256 .curtain-tooltip.intro-mouse .tooltip-illustration use {
7257     fill: rgba(112, 146, 255, 0);
7258     color: rgba(112, 146, 255, 0);
7259 }
7260 .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
7261     fill: rgba(112, 146, 255, 1);
7262 }
7263 .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
7264     color: rgba(112, 146, 255, 1);
7265 }
7266
7267 .huge-modal-button {
7268     width: 100%;
7269     height: auto;
7270     padding: 20px;
7271 }
7272
7273 .huge-modal-button .illustration {
7274     height: 100px;
7275     width: 100px;
7276     color: #7092ff;
7277 }