vendor/assets/iD/iD.css.erb

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