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 .preset-icon .icon.highway-footway.tag-railway-platform {
1497     color: #ae8681;
1498     fill: #dcd9b9;
1499 }
1500 path.shadow.tag-railway-platform {
1501     stroke-width: 16;
1502 }
1503 path.casing.tag-railway-platform {
1504     stroke: #dcd9b9;
1505     stroke-width: 5;
1506     stroke-linecap: round;
1507     stroke-dasharray: none;
1508 }
1509 path.stroke.tag-railway-platform {
1510     stroke: #ae8681;
1511     stroke-width: 3;
1512     stroke-linecap: butt;
1513     stroke-dasharray: 6, 6;
1514 }
1515
1516 .low-zoom path.shadow.tag-railway-platform {
1517     stroke-width: 12;
1518 }
1519 .low-zoom path.casing.tag-railway-platform {
1520     stroke-width: 3;
1521 }
1522 .low-zoom path.stroke.tag-railway-platform {
1523     stroke-width: 1;
1524     stroke-linecap: butt;
1525     stroke-dasharray: 3, 3;
1526 }
1527
1528 g.midpoint.tag-railway-platform .fill {
1529     fill: #fff;
1530     stroke: #333;
1531     stroke-opacity: .8;
1532     opacity: .8;
1533 }
1534 /* waterways */
1535
1536 .preset-icon .icon.tag-waterway.other-line {
1537     color: #77d3de;
1538     fill: #77d3de;
1539 }
1540 .preset-icon .icon.category-water,
1541 .preset-icon .icon.tag-route-ferry,
1542 .preset-icon .icon.tag-type-waterway,
1543 .preset-icon .icon.tag-waterway {
1544     color: #77d3de;
1545     fill: #fff;
1546 }
1547
1548 path.fill.tag-waterway {
1549     stroke: rgba(119, 211, 222, 0.3);
1550     fill: rgba(119, 211, 222, 0.3);
1551 }
1552 path.casing.tag-waterway {
1553     stroke: #3d6c71;
1554 }
1555 path.stroke.tag-waterway {
1556     stroke: #77d3de;
1557 }
1558
1559
1560 /* narrow waterways (default) */
1561
1562 path.shadow.tag-waterway {
1563     stroke-width: 16;
1564 }
1565 path.casing.tag-waterway {
1566     stroke-width: 7;
1567 }
1568 path.stroke.tag-waterway {
1569     stroke-width: 5;
1570 }
1571
1572 .low-zoom path.shadow.tag-waterway {
1573     stroke-width: 12;
1574 }
1575 .low-zoom path.casing.tag-waterway {
1576     stroke-width: 5;
1577 }
1578 .low-zoom path.stroke.tag-waterway {
1579     stroke-width: 3;
1580 }
1581
1582
1583 /* wide waterways (river) */
1584
1585 path.shadow.tag-waterway-river {
1586     stroke-width: 20;
1587 }
1588 path.casing.tag-waterway-river {
1589     stroke-width: 10;
1590 }
1591 path.stroke.tag-waterway-river {
1592     stroke-width: 8;
1593 }
1594
1595 .low-zoom path.shadow.tag-waterway-river {
1596     stroke-width: 16;
1597 }
1598 .low-zoom path.casing.tag-waterway-river {
1599     stroke-width: 7;
1600 }
1601 .low-zoom path.stroke.tag-waterway-river {
1602     stroke-width: 5;
1603 }
1604
1605
1606 /* ditch */
1607
1608 .preset-icon .icon.tag-waterway-ditch {
1609     color: #8eabf3;
1610 }
1611 path.stroke.tag-waterway-ditch {
1612     stroke: #8eabf3;
1613 }
1614
1615
1616 /* waterway areas */
1617
1618 path.area.stroke.tag-waterway-dock,
1619 path.area.stroke.tag-waterway-boatyard,
1620 path.area.stroke.tag-waterway-fuel {
1621     stroke: white;
1622     stroke-width: 1;
1623 }
1624 path.area.casing.tag-waterway-dock,
1625 path.area.casing.tag-waterway-boatyard,
1626 path.area.casing.tag-waterway-fuel {
1627     stroke: none;
1628 }
1629 path.area.fill.tag-waterway-dock,
1630 path.area.fill.tag-waterway-boatyard,
1631 path.area.fill.tag-waterway-fuel {
1632     stroke: rgba(255, 255, 255, 0.3);
1633     fill: rgba(255, 255, 255, 0.3);
1634 }
1635
1636 /* power */
1637 .preset-icon .icon.tag-man_made-pipeline,
1638 .preset-icon .icon.tag-power {
1639     color: #939393;
1640     fill: #939393;
1641 }
1642
1643 path.stroke.tag-power {
1644     stroke: #939393;
1645     stroke-width: 2;
1646 }
1647 path.casing.tag-power {
1648     stroke: none;
1649 }
1650
1651
1652 /* boundaries */
1653 path.stroke.tag-boundary {
1654     stroke: #fff;
1655     stroke-width: 2;
1656     stroke-linecap: butt;
1657     stroke-dasharray: 20, 5, 5, 5;
1658 }
1659 path.casing.tag-boundary {
1660     stroke: #82B5FE;
1661     stroke-width: 6;
1662 }
1663
1664 path.casing.tag-boundary-protected_area,
1665 path.casing.tag-boundary-national_park {
1666     stroke: #b0e298;
1667 }
1668
1669
1670 /* barriers */
1671 path.stroke.tag-barrier {
1672     stroke: #ddd;
1673     stroke-width: 3px;
1674     stroke-linecap: round;
1675     stroke-dasharray: 15, 5, 1, 5;
1676 }
1677 .low-zoom path.stroke.tag-barrier {
1678     stroke-width: 2px;
1679     stroke-linecap: butt;
1680     stroke-dasharray: 8, 2, 2, 2;
1681 }
1682
1683
1684 /* bridges */
1685 path.casing.tag-bridge {
1686     stroke-opacity: 0.6;
1687     stroke: #000;
1688     stroke-linecap: butt;
1689     stroke-dasharray: none;
1690 }
1691
1692 path.shadow.tag-bridge {
1693     stroke-width: 24;
1694 }
1695 path.casing.tag-bridge {
1696     stroke-width: 16;
1697 }
1698 .low-zoom path.shadow.tag-bridge {
1699     stroke-width: 16;
1700 }
1701 .low-zoom path.casing.tag-bridge {
1702     stroke-width: 10;
1703 }
1704
1705 path.shadow.line.tag-railway.tag-bridge,
1706 path.shadow.tag-highway-living_street.tag-bridge,
1707 path.shadow.tag-highway-path.tag-bridge,
1708 path.shadow.tag-highway-corridor.tag-bridge,
1709 path.shadow.line.tag-highway-pedestrian.tag-bridge,
1710 path.shadow.tag-highway-service.tag-bridge,
1711 path.shadow.tag-highway-track.tag-bridge,
1712 path.shadow.tag-highway-steps.tag-bridge,
1713 path.shadow.tag-highway-footway.tag-bridge,
1714 path.shadow.tag-highway-cycleway.tag-bridge,
1715 path.shadow.tag-highway-bridleway.tag-bridge {
1716     stroke-width: 18;
1717 }
1718 path.casing.line.tag-railway.tag-bridge,
1719 path.casing.tag-highway-living_street.tag-bridge,
1720 path.casing.tag-highway-path.tag-bridge,
1721 path.casing.tag-highway-corridor.tag-bridge,
1722 path.casing.line.tag-highway-pedestrian.tag-bridge,
1723 path.casing.tag-highway-service.tag-bridge,
1724 path.casing.tag-highway-track.tag-bridge,
1725 path.casing.tag-highway-steps.tag-bridge,
1726 path.casing.tag-highway-footway.tag-bridge,
1727 path.casing.tag-highway-cycleway.tag-bridge,
1728 path.casing.tag-highway-bridleway.tag-bridge {
1729     stroke-width: 10;
1730 }
1731
1732 .low-zoom path.shadow.line.tag-railway.tag-bridge,
1733 .low-zoom path.shadow.tag-highway-living_street.tag-bridge,
1734 .low-zoom path.shadow.tag-highway-path.tag-bridge,
1735 .low-zoom path.shadow.tag-highway-corridor.tag-bridge,
1736 .low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge,
1737 .low-zoom path.shadow.tag-highway-service.tag-bridge,
1738 .low-zoom path.shadow.tag-highway-track.tag-bridge,
1739 .low-zoom path.shadow.tag-highway-steps.tag-bridge,
1740 .low-zoom path.shadow.tag-highway-footway.tag-bridge,
1741 .low-zoom path.shadow.tag-highway-cycleway.tag-bridge,
1742 .low-zoom path.shadow.tag-highway-bridleway.tag-bridge {
1743     stroke-width: 14;
1744 }
1745 .low-zoom path.casing.line.tag-railway.tag-bridge,
1746 .low-zoom path.casing.tag-highway-living_street.tag-bridge,
1747 .low-zoom path.casing.tag-highway-path.tag-bridge,
1748 .low-zoom path.casing.tag-highway-corridor.tag-bridge,
1749 .low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge,
1750 .low-zoom path.casing.tag-highway-service.tag-bridge,
1751 .low-zoom path.casing.tag-highway-track.tag-bridge,
1752 .low-zoom path.casing.tag-highway-steps.tag-bridge,
1753 .low-zoom path.casing.tag-highway-footway.tag-bridge,
1754 .low-zoom path.casing.tag-highway-cycleway.tag-bridge,
1755 .low-zoom path.casing.tag-highway-bridleway.tag-bridge {
1756     stroke-width: 6;
1757 }
1758
1759
1760 /* tunnels */
1761 path.stroke.tag-tunnel {
1762     stroke-opacity: 0.3;
1763 }
1764 path.casing.tag-tunnel {
1765     stroke-opacity: 0.5;
1766     stroke-linecap: butt;
1767     stroke-dasharray: none;
1768 }
1769
1770
1771 /* embankments / cuttings */
1772 path.shadow.tag-embankment,
1773 path.shadow.tag-cutting {
1774     stroke-width: 28;
1775 }
1776 path.casing.tag-embankment,
1777 path.casing.tag-cutting {
1778     stroke-opacity: 0.5;
1779     stroke: #000;
1780     stroke-width: 22;
1781     stroke-dasharray: 2, 4;
1782     stroke-linecap: butt;
1783 }
1784
1785 .low-zoom path.shadow.tag-embankment,
1786 .low-zoom path.shadow.tag-cutting {
1787     stroke-width: 14;
1788 }
1789 .low-zoom path.casing.tag-embankment,
1790 .low-zoom path.casing.tag-cutting {
1791     stroke-width: 10;
1792 }
1793
1794
1795 /* Surface - unpaved */
1796 path.casing.tag-unpaved {
1797     stroke: #ccc;
1798     stroke-linecap: butt;
1799     stroke-dasharray: 4, 3;
1800 }
1801 .low-zoom path.casing.tag-unpaved {
1802     stroke-dasharray: 3, 2;
1803 }
1804 path.casing.tag-bridge.tag-unpaved {
1805     stroke: #000;
1806     stroke-dasharray: 4, 3;
1807 }
1808 .low-zoom path.casing.tag-bridge.tag-unpaved {
1809     stroke: #000;
1810     stroke-dasharray: 3, 2;
1811 }
1812
1813
1814 /* Status (e.g. construction, proposed, abandoned) */
1815 path.stroke.tag-status,
1816 path.casing.tag-status {
1817     stroke-linecap: butt;
1818     stroke-dasharray: 7, 3;
1819 }
1820 .low-zoom path.stroke.tag-status,
1821 .low-zoom path.casing.tag-status {
1822     stroke-dasharray: 5, 2;
1823 }
1824
1825
1826 /* Buildings */
1827 path.stroke.tag-building,
1828 path.stroke.tag-amenity-shelter {
1829     stroke: rgb(224, 110, 95);
1830 }
1831 path.fill.tag-building,
1832 path.fill.tag-amenity-shelter {
1833     stroke: rgba(224, 110, 95, 0.3);
1834     fill: rgba(224, 110, 95, 0.3);
1835 }
1836 .preset-icon-fill-area.tag-building,
1837 .preset-icon-fill-area.tag-amenity-shelter {
1838     border-color: rgb(224, 110, 95);
1839     background-color: rgba(224, 110, 95, 0.3);
1840 }
1841 /* Cursors */
1842
1843 .map-in-map,
1844 #map {
1845     cursor: auto; /* Opera */
1846     cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
1847 }
1848
1849 .mode-browse .point,
1850 .mode-select .point {
1851     cursor: pointer; /* Opera */
1852     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
1853 }
1854
1855 .mode-select .vertex,
1856 .mode-browse .vertex {
1857     cursor: pointer; /* Opera */
1858     cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
1859 }
1860
1861 .mode-browse .line,
1862 .mode-select .line {
1863     cursor: pointer; /* Opera */
1864     cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
1865 }
1866
1867 .mode-select .area,
1868 .mode-browse .area {
1869     cursor: pointer; /* Opera */
1870     cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
1871 }
1872
1873 .mode-select .midpoint,
1874 .mode-browse .midpoint {
1875     cursor: pointer; /* Opera */
1876     cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
1877 }
1878
1879 .mode-select .behavior-multiselect .point,
1880 .mode-select .behavior-multiselect .vertex,
1881 .mode-select .behavior-multiselect .line,
1882 .mode-select .behavior-multiselect .area {
1883     cursor: pointer; /* Opera */
1884     cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
1885 }
1886
1887 .mode-select .behavior-multiselect .selected {
1888     cursor: pointer; /* Opera */
1889     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
1890 }
1891
1892 #map .point:active,
1893 #map .vertex:active,
1894 #map .line:active,
1895 #map .area:active,
1896 #map .midpoint:active,
1897 #map .mode-select .selected {
1898     cursor: pointer; /* Opera */
1899     cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */
1900 }
1901
1902 .mode-draw-line #map,
1903 .mode-draw-area #map,
1904 .mode-add-line  #map,
1905 .mode-add-area  #map,
1906 .mode-drag-node #map {
1907     cursor: crosshair; /* Opera */
1908     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1909 }
1910
1911 .mode-draw-line .way.hover,
1912 .mode-draw-area .way.hover,
1913 .mode-add-line  .way.hover,
1914 .mode-add-area  .way.hover,
1915 .mode-drag-node .way.hover {
1916     cursor: crosshair; /* Opera */
1917     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
1918 }
1919
1920 .mode-draw-line .vertex.hover,
1921 .mode-draw-area .vertex.hover,
1922 .mode-add-line  .vertex.hover,
1923 .mode-add-area  .vertex.hover,
1924 .mode-drag-node .vertex.hover {
1925     cursor: crosshair; /* Opera */
1926     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
1927 }
1928
1929 .mode-add-point #map,
1930 .mode-browse.lasso #map,
1931 .mode-browse.lasso .way,
1932 .mode-browse.lasso .vertex,
1933 .mode-browse.lasso .midpoint,
1934 .mode-select.lasso #map,
1935 .mode-select.lasso .way,
1936 .mode-select.lasso .vertex,
1937 .mode-select.lasso .midpoint {
1938     cursor: crosshair; /* Opera */
1939     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1940 }
1941
1942 .turn rect,
1943 .turn circle {
1944     cursor: pointer;
1945 }
1946 /* photo viewer div */
1947 #photoviewer {
1948     position: absolute;
1949     bottom: 30px;
1950     width: 330px;
1951     height: 250px;
1952     padding: 5px;
1953     background-color: #fff;
1954 }
1955
1956 #photoviewer button.thumb-hide {
1957     border-radius: 0;
1958     padding: 5px;
1959     position: absolute;
1960     right: 0;
1961     top: 0;
1962     z-index: 500;
1963 }
1964
1965 .photo-wrapper,
1966 .photo-wrapper img {
1967     width: 100%;
1968     height: 100%;
1969     overflow: hidden;
1970 }
1971
1972 /* markers and sequences */
1973 .viewfield-group {
1974     pointer-events: visible;
1975     cursor: pointer;
1976 }
1977
1978 .viewfield-group * {
1979     z-index: 50;
1980 }
1981 .viewfield-group.selected * {
1982     fill: #ffee00 !important;
1983     z-index: 60;
1984 }
1985 .viewfield-group.hovered * {
1986     fill: #eebb00 !important;
1987     z-index: 70;
1988 }
1989 .viewfield-group.highlighted * {
1990     z-index: 60;
1991 }
1992
1993 .viewfield-group circle {
1994     stroke: #555;
1995     stroke-width: 1;
1996     stroke-opacity: 0.4;
1997     fill-opacity: 0.4;
1998 }
1999 .viewfield-group.highlighted circle {
2000     stroke: #222;
2001     stroke-opacity: 0.9;
2002     fill-opacity: 0.9;
2003 }
2004 .viewfield-group.highlighted.hovered circle {
2005     stroke: #222;
2006     stroke-width: 2;
2007     stroke-opacity: 0.9;
2008     fill-opacity: 0.9;
2009 }
2010 .viewfield-group.highlighted.selected circle {
2011     stroke: #222;
2012     stroke-width: 2;
2013     stroke-opacity: 1;
2014     fill-opacity: 1;
2015 }
2016
2017 .viewfield-group .viewfield {
2018     stroke-width: 0;
2019     stroke: #222;
2020     fill-opacity: 0.4;
2021 }
2022 .viewfield-group.highlighted .viewfield {
2023     stroke-width: 1;
2024     fill-opacity: 0.8;
2025 }
2026 .viewfield-group.highlighted.hovered .viewfield {
2027     stroke-width: 1;
2028     fill-opacity: 0.8;
2029 }
2030 .viewfield-group.highlighted.selected .viewfield {
2031     stroke-width: 1;
2032     fill-opacity: 0.9;
2033 }
2034
2035 .viewfield-group.selected .viewfield-scale {
2036     transform: scale(2,2);
2037 }
2038
2039 .sequence {
2040     fill: none;
2041     stroke-width: 2;
2042     stroke-opacity: 0.4;
2043 }
2044 .sequence.highlighted,
2045 .sequence.selected {
2046     stroke-width: 4;
2047     stroke-opacity: 1;
2048 }
2049
2050
2051 /* Mapillary Image Layer */
2052 .layer-mapillary-images {
2053     pointer-events: none;
2054 }
2055 .layer-mapillary-images .viewfield-group * {
2056     fill: #55ff22;
2057 }
2058 .layer-mapillary-images .sequence {
2059     stroke: #55ff22;
2060 }
2061
2062
2063 /* Mapillary Sign Layer */
2064 .layer-mapillary-signs {
2065     pointer-events: none;
2066 }
2067 .layer-mapillary-signs .icon-sign .icon-sign-body {
2068     min-width: 20px;
2069     height: 24px;
2070     width: 24px;
2071     outline: 2px solid transparent;
2072     pointer-events: visible;
2073     cursor: pointer;
2074     z-index: 30;
2075     overflow: visible;
2076 }
2077 .layer-mapillary-signs .icon-sign:hover .icon-sign-body {
2078     outline: 5px solid #eebb00;
2079     background-color: #eebb00;
2080     z-index: 70;
2081 }
2082 .layer-mapillary-signs .icon-sign.selected .icon-sign-body {
2083     outline: 5px solid #ffee00;
2084     background-color: #ffee00;
2085     z-index: 40;
2086 }
2087
2088
2089 /* OpenStreetCam Image Layer */
2090 .layer-openstreetcam-images {
2091     pointer-events: none;
2092 }
2093 .layer-openstreetcam-images .viewfield-group * {
2094     fill: #77ddff;
2095 }
2096 .layer-openstreetcam-images .sequence {
2097     stroke: #77ddff;
2098 }
2099
2100
2101 /* Mapillary viewer */
2102 #mly .domRenderer .TagSymbol {
2103     font-size: 10px;
2104     background-color: rgba(0,0,0,0.4);
2105     padding: 0 4px;
2106     border-radius: 4px;
2107     top: -25px;
2108 }
2109 #mly .domRenderer .Attribution {
2110     width: 100%;
2111     font-size: 10px;
2112     text-align: right;
2113 }
2114
2115
2116 /* OpenStreetCam viewer */
2117 .osc-wrapper {
2118     position: relative;
2119     background-color: #000;
2120     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
2121     background-position: center;
2122     background-repeat: no-repeat;
2123 }
2124
2125 .osc-wrapper .osc-attribution {
2126     width: 100%;
2127     font-size: 10px;
2128     text-align: right;
2129     position: absolute;
2130     bottom: 0;
2131     right: 0;
2132     padding: 4px 2px;
2133     z-index: 10;
2134 }
2135
2136 .osc-attribution a,
2137 .osc-attribution a:visited,
2138 .osc-attribution span {
2139     padding: 4px 2px;
2140     color: #fff;
2141 }
2142 .osc-attribution a:active,
2143 .osc-attribution a:hover {
2144     color: #77ddff;
2145 }
2146
2147 .osc-controls-wrap {
2148     text-align: center;
2149     position: absolute;
2150     top: 10px;
2151     width: 100%;
2152     z-index: 10;
2153 }
2154
2155 .osc-controls {
2156     display: inline-block;
2157     z-index: 10;
2158 }
2159
2160 .osc-controls button {
2161     height: 18px;
2162     width: 18px;
2163     background: rgba(0,0,0,0.65);
2164     color: #eee;
2165     border-radius: 0;
2166 }
2167 .osc-controls button:first-of-type {
2168     border-radius: 3px 0 0 3px;
2169 }
2170 .osc-controls button:last-of-type {
2171     border-radius: 0 3px 3px 0;
2172 }
2173 .osc-controls button:hover,
2174 .osc-controls button:active,
2175 .osc-controls button:focus {
2176     background: rgba(0,0,0,0.85);
2177     color: #fff;
2178 }
2179 /* Fill Styles */
2180
2181 .low-zoom.fill-wireframe path.stroke,
2182 .fill-wireframe path.stroke {
2183     stroke-width: 1 !important;
2184     stroke-opacity: 0.5 !important;
2185     stroke-dasharray: none !important;
2186     fill: none !important;
2187 }
2188
2189 .low-zoom.fill-wireframe path.shadow,
2190 .fill-wireframe path.shadow {
2191     stroke-width: 12;
2192 }
2193
2194 .fill-wireframe path.shadow.related:not(.selected),
2195 .fill-wireframe path.shadow.hover:not(.selected) {
2196     stroke-opacity: 0.4;
2197 }
2198 .fill-wireframe path.shadow.selected {
2199     stroke-opacity: 0.6;
2200 }
2201
2202 .fill-wireframe .point,
2203 .fill-wireframe .areaicon,
2204 .fill-wireframe .areaicon-halo,
2205 .fill-wireframe path.casing,
2206 .fill-wireframe path.fill,
2207 .fill-wireframe path.oneway {
2208     display: none !important;
2209 }
2210
2211 .fill-partial path.area.fill {
2212     fill-opacity: 0;
2213     stroke-width: 60px;
2214     pointer-events: visibleStroke;
2215 }
2216
2217 /* Modes */
2218
2219 .mode-draw-line .vertex.active,
2220 .mode-draw-area .vertex.active,
2221 .mode-drag-node .vertex.active {
2222     display: none;
2223 }
2224
2225 .mode-draw-line .way.active,
2226 .mode-draw-area .way.active,
2227 .mode-drag-node .active {
2228     pointer-events: none;
2229 }
2230
2231 /* Ensure drawing doesn't interact with area fills. */
2232 .mode-add-point path.area.fill,
2233 .mode-draw-line path.area.fill,
2234 .mode-draw-area path.area.fill,
2235 .mode-add-line path.area.fill,
2236 .mode-add-area path.area.fill,
2237 .mode-drag-node path.area.fill {
2238     pointer-events: none;
2239 }
2240 /* Basics
2241 ------------------------------------------------------- */
2242
2243 /*
2244   Opera misbehaves when the window is resized vertically unless 100% width + height are
2245   applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
2246 */
2247 html, body {
2248     width: 100%;
2249     height: 100%;
2250 }
2251
2252 body {
2253     font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
2254         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
2255         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
2256         sans-serif;
2257     margin:0;
2258     padding:0;
2259     min-width: 768px;
2260     color:#333;
2261     overflow: hidden;
2262     -ms-user-select: none;
2263 }
2264
2265 .unsupported {
2266     text-align: center;
2267     vertical-align: middle;
2268     padding-top: 100px;
2269     font-size: 15px;
2270 }
2271
2272 .id-container {
2273     height: 100%;
2274     width: 100%;
2275     min-width: 768px;
2276 }
2277
2278 #content {
2279     position: relative;
2280     overflow: hidden;
2281     height: 100%;
2282 }
2283
2284 #content.active {
2285     -webkit-filter: none !important;
2286     filter: none !important;
2287     -webkit-duration: 200ms;
2288     transition-duration: 200ms;
2289 }
2290
2291 #content.inactive {
2292     -webkit-filter: grayscale(80%) brightness(80%);
2293     filter: grayscale(80%) brightness(80%);
2294     -webkit-duration: 200ms;
2295     transition-duration: 200ms;
2296 }
2297
2298 /* Firefox has its own ideas about fixed positioning when a css filter is active - #4348 */
2299 /* https://stackoverflow.com/questions/37949942/firefox-position-bug-by-parent-with-filter */
2300 @-moz-document url-prefix() {
2301     #content > #bar {
2302         width: 100vw;
2303     }
2304     #content.inactive > #bar > .spacer.col4 {
2305         width: 0px;
2306     }
2307     #content.active > #bar > .spacer.col4 {
2308         width: 33.3333%;
2309         transition-duration: 200ms;
2310         transition-timing-function: step-end;
2311     }
2312 }
2313
2314 #defs {
2315     /* Can't be display: none or the clippaths are ignored. */
2316     position: absolute;
2317     width: 0;
2318     height: 0;
2319 }
2320
2321 .spacer {
2322     height: 40px;
2323     margin-right: 10px;
2324 }
2325
2326 .limiter {
2327     position: relative;
2328     max-width: 1200px;
2329 }
2330
2331 .spinner {
2332     opacity: .5;
2333     float: right;
2334 }
2335 [dir='rtl'] .spinner {
2336     float: left;
2337 }
2338
2339 .spinner img {
2340     height: 40px;
2341     width: 40px;
2342     border-radius: 4px;
2343     margin-right: 10px;
2344     background: black;
2345 }
2346 [dir='rtl'] .spinner img {
2347     margin-left: 10px;
2348     margin-right: auto;
2349     -moz-transform: scaleX(-1);
2350     -o-transform: scaleX(-1);
2351     -webkit-transform: scaleX(-1);
2352     transform: scaleX(-1);
2353     filter: FlipH;
2354     -ms-filter: "FlipH";
2355 }
2356
2357
2358 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
2359     -moz-box-sizing: border-box;
2360     -webkit-box-sizing: border-box;
2361     box-sizing: border-box;
2362 }
2363
2364 a, button, input, textarea {
2365     -webkit-tap-highlight-color:rgba(0,0,0,0);
2366     -webkit-touch-callout:none;
2367 }
2368
2369 a,
2370 button,
2371 .checkselect label:hover,
2372 .opacity-options li,
2373 .radial-menu-item {
2374     cursor: pointer;
2375 }
2376
2377 h2 {
2378     font-size: 25px;
2379     line-height: 1.25;
2380     font-weight: bold;
2381     margin-bottom: 20px;
2382 }
2383
2384 h3:last-child,
2385 h2:last-child,
2386 h4:last-child { margin-bottom: 0;}
2387
2388 h3 {
2389     font-size: 16px;
2390     line-height: 1.25;
2391     font-weight: bold;
2392     margin-bottom: 10px;
2393 }
2394
2395 h4, h5 {
2396     font-size: 12px;
2397     font-weight: bold;
2398     padding-bottom: 10px;
2399 }
2400
2401 :focus {
2402     outline-color: transparent;
2403     outline-style: none;
2404 }
2405
2406 p {
2407     font-size: 12px;
2408     margin:0;
2409     padding:0;
2410 }
2411
2412 p:last-child {
2413     padding-bottom: 0;
2414 }
2415
2416 em {
2417     font-style: italic;
2418 }
2419
2420 strong {
2421     font-weight: bold;
2422 }
2423
2424 a:visited, a {
2425     color: #7092ff;
2426 }
2427
2428 a:hover {
2429     color: #597be7;
2430 }
2431
2432 /* Forms
2433 ------------------------------------------------------- */
2434
2435 textarea  {
2436     resize: vertical;
2437     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
2438         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
2439         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
2440         sans-serif;
2441 }
2442
2443 textarea,
2444 input[type=text],
2445 input[type=search],
2446 input[type=number],
2447 input[type=url],
2448 input[type=tel],
2449 input[type=email] {
2450     background-color: white;
2451     color: #333;
2452     border:1px solid #ccc;
2453     padding:5px 20px 5px 10px;
2454     height:30px;
2455     width: 100%;
2456     border-radius:4px;
2457     text-overflow: ellipsis;
2458 }
2459 [dir='rtl'] textarea,
2460 [dir='rtl'] input[type=text],
2461 [dir='rtl'] input[type=search],
2462 [dir='rtl'] input[type=number],
2463 [dir='rtl'] input[type=url],
2464 [dir='rtl'] input[type=tel],
2465 [dir='rtl'] input[type=email] {
2466     padding:5px 10px 5px 20px;
2467 }
2468
2469 textarea:focus,
2470 input:focus {
2471     background-color: #F1F1F1;
2472 }
2473
2474 input[type="checkbox"],
2475 input[type="radio"] {
2476     float: left;
2477     width: 14px;
2478     height: 14px;
2479     margin-right: 5px;
2480     margin-top: 3px;
2481 }
2482 [dir='rtl'] input[type="checkbox"],
2483 [dir='rtl'] input[type="radio"] {
2484     float: right;
2485     margin-left: 5px;
2486     margin-right: 0;
2487 }
2488
2489 /* remove bottom border radius when combobox is open */
2490 .combobox + * textarea:focus,
2491 .combobox + * input:focus {
2492     border-bottom-left-radius: 0 !important;
2493     border-bottom-right-radius: 0 !important;
2494 }
2495
2496 /* tables */
2497
2498 table {
2499     background-color: white;
2500     border-collapse: collapse;
2501     width:100%;
2502     border-spacing:0;
2503 }
2504
2505 table th {
2506     text-align:left;
2507 }
2508
2509 table.tags, table.tags td, table.tags th {
2510     border: 1px solid #CCC;
2511     padding: 4px;
2512 }
2513
2514 ::-ms-clear {
2515    display: none;
2516 }
2517
2518 /* Grid
2519 ------------------------------------------------------- */
2520
2521 .col0    { float:left; width:04.1666%; }
2522 .col1    { float:left; width:08.3333%; }
2523 .col2    { float:left; width:16.6666%; }
2524 .col3    { float:left; width:25.0000%; max-width: 300px; }
2525 .col4    { float:left; width:33.3333%; max-width: 400px; }
2526 .col5    { float:left; width:41.6666%; max-width: 500px; }
2527 .col6    { float:left; width:50.0000%; max-width: 600px; }
2528 .col7    { float:left; width:58.3333%; }
2529 .col8    { float:left; width:66.6666%; }
2530 .col9    { float:left; width:75.0000%; }
2531 .col10   { float:left; width:83.3333%; }
2532 .col11   { float:left; width:91.6666%; }
2533 .col12   { float:left; width:100.0000%; }
2534
2535 /* UI Lists
2536 ------------------------------------------------------- */
2537
2538 ul li { list-style: none;}
2539
2540 .toggle-list > label {
2541     position: relative;
2542     padding: 5px 10px;
2543     display: block;
2544     height: 30px;
2545     background-color: white;
2546     color: #7092FF;
2547     cursor: pointer;
2548 }
2549
2550 .toggle-list > label:hover {
2551     background-color: #ececec;
2552 }
2553
2554 .toggle-list > label:not(:last-child) {
2555     border-bottom: 1px solid #ccc;
2556 }
2557
2558 .toggle-list > label:last-child {
2559     border-radius: 0 0 3px 3px;
2560 }
2561
2562 .toggle-list label > span {
2563     display: block;
2564     overflow: hidden;
2565     white-space: nowrap;
2566     text-overflow: ellipsis;
2567 }
2568
2569 .toggle-list > label.active {
2570     background: #E8EBFF;
2571 }
2572
2573
2574 /* Utility Classes
2575 ------------------------------------------------------- */
2576 .fillL {
2577     background: white;
2578     color: #333;
2579 }
2580
2581 .fillL2 {
2582     background: #f6f6f6;
2583     color: #333;
2584 }
2585
2586 .fillL3 {
2587     background: #ececec;
2588     color: #333;
2589 }
2590
2591 .fillD {
2592     background:rgba(0,0,0,.5);
2593     color: white;
2594 }
2595
2596 .fillD2 {
2597     background:rgba(0,0,0,.75);
2598     color: white;
2599 }
2600
2601 .fl { float: left;}
2602 .fr { float: right;}
2603 .al { left: 0; }
2604 .ar { right: 0; }
2605
2606 input.hide,
2607 div.hide,
2608 form.hide,
2609 button.hide,
2610 a.hide,
2611 li.hide {
2612     display: none;
2613 }
2614
2615 .deemphasize {
2616     color: #a9a9a9;
2617 }
2618
2619 .content {
2620     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
2621 }
2622
2623 .loading {
2624     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
2625     background-size:5px 5px;
2626 }
2627
2628 .panewrap {
2629     position:absolute;
2630     width:200%;
2631     height:100%;
2632     right: -100%;
2633 }
2634
2635
2636 .pane {
2637     position:absolute;
2638     width:50%;
2639     top: 0;
2640     bottom: 30px;
2641 }
2642
2643 .pane:first-child {
2644     left: 0;
2645 }
2646
2647 .pane:last-child {
2648     right: 0;
2649 }
2650
2651 /* Buttons */
2652
2653 button {
2654     text-align: center;
2655     line-height:20px;
2656     border:0;
2657     background: white;
2658     font-weight: bold;
2659     color:#333;
2660     font-size:12px;
2661     display: inline-block;
2662     height:40px;
2663     border-radius:4px;
2664 }
2665
2666 button:focus,
2667 button:hover {
2668     background-color: #ececec;
2669 }
2670
2671 button[disabled],
2672 button.disabled {
2673     background-color: rgba(255,255,255,.25);
2674     color: rgba(0,0,0,.4);
2675     cursor: auto;
2676 }
2677
2678 button.active {
2679     background: #7092ff;
2680 }
2681
2682 button.minor {
2683     position: absolute;
2684     top: 0;
2685     right: 0;
2686     height: 100%;
2687     width: 10%;
2688     border-radius: 0;
2689     background-color: #fafafa;
2690 }
2691 [dir='rtl'] button.minor {
2692     right: auto;
2693 }
2694
2695 button.minor .icon {
2696     opacity: .5;
2697 }
2698
2699 button.minor:hover {
2700     background-color: #f1f1f1;
2701 }
2702
2703 .button-wrap {
2704     display: inline-block;
2705     padding-right:10px;
2706     margin: 0;
2707 }
2708
2709 .button-wrap button:only-child {
2710     width: 100%;
2711 }
2712
2713 .button-wrap:last-of-type {
2714     padding-right: 0;
2715 }
2716 [dir='rtl'] .button-wrap:last-of-type {
2717     padding-left: 0;
2718     padding-right: 10px;
2719 }
2720
2721 .joined button {
2722     border-radius:0;
2723     border-right: 1px solid rgba(0,0,0,.5);
2724 }
2725 [dir='rtl'] .joined button {
2726     border-left: 1px solid rgba(0,0,0,.5);
2727     border-right: none;
2728 }
2729
2730 .fillL .joined button {
2731     border-right: 1px solid white;
2732 }
2733
2734 .joined button:first-child {
2735     border-radius: 4px 0 0 4px;
2736 }
2737 [dir='rtl'] .joined button:first-child {
2738     border-radius: 0 4px 4px 0;
2739 }
2740
2741 .joined button:last-child {
2742     border-right-width: 0;
2743     border-radius: 0 4px 4px 0;
2744 }
2745 [dir='rtl'] .joined button:last-child {
2746     border-radius: 4px 0 0 4px;
2747 }
2748
2749 button.action {
2750     background: #7092ff;
2751     color: white;
2752 }
2753
2754 button[disabled].action,
2755 button[disabled].action:hover {
2756     background: #cccccc;
2757     color: #888;
2758 }
2759
2760 button.action:focus,
2761 button.action:hover {
2762     background: #597BE7;
2763 }
2764
2765 button.secondary-action {
2766     background: #ececec;
2767 }
2768
2769 button.secondary-action:focus,
2770 button.secondary-action:hover {
2771     background: #cccccc;
2772 }
2773
2774 button.save .count {
2775     display: none;
2776 }
2777
2778 button.save.has-count .count {
2779     display: block;
2780     position: absolute;
2781     top: 5px;
2782     background: #fff;
2783     border-color: #fff;
2784     opacity: 0.5;
2785     color: #333;
2786     padding: 10px;
2787     height: 30px;
2788     line-height: 12px;
2789     border-radius: 4px;
2790     margin: auto;
2791     margin-left: 9.3333%;
2792 }
2793 [dir='rtl'] button.save.has-count .count {
2794     margin-left: auto;
2795     margin-right: 8%;
2796 }
2797
2798 button.save.has-count .count::before {
2799     content: "";
2800     margin: auto;
2801     width: 0;
2802     height: 0;
2803     position: absolute;
2804     left: -6px;
2805     top: 0;
2806     bottom: 0;
2807     border-top:    6px solid transparent;
2808     border-bottom: 6px solid transparent;
2809     border-right-width: 6px;
2810     border-right-style: solid;
2811     border-right-color: inherit;
2812 }
2813 [dir='rtl'] button.save.has-count .count::before {
2814     border-left: 6px solid rgba(255,255,255,.5);
2815     border-right: none;
2816     left: auto;
2817     right: -6px;
2818 }
2819
2820 /* Icons */
2821
2822 .icon {
2823     vertical-align: top;
2824     width: 20px;
2825     height: 20px;
2826 }
2827
2828 .icon.inline {
2829     vertical-align: text-top;
2830     width: 14px;
2831     height: 14px;
2832     margin: 0px 3px;
2833 }
2834
2835 .icon.pre-text {
2836     margin-right: 5px;
2837 }
2838 [dir='rtl'] .icon.pre-text {
2839   margin-left: 5px;
2840   margin-right: 0;
2841 }
2842
2843 .icon.light {
2844     color: #fff;
2845 }
2846
2847 .icon.created {
2848     color: #00ca07;
2849 }
2850
2851 .icon.modified {
2852     color: #666;
2853 }
2854
2855 .icon.deleted {
2856     color: #ea0000;
2857 }
2858
2859 .user-icon {
2860     max-height: 20px;
2861     max-width: 20px;
2862     height: auto;
2863     width: auto;
2864     border-radius: 3px;
2865 }
2866
2867
2868 /* ToolBar / Persistent UI Elements
2869 ------------------------------------------------------- */
2870
2871 #bar {
2872     position: fixed;
2873     padding: 10px 0;
2874     left: 0;
2875     top: 0;
2876     right: 0;
2877     height: 60px;
2878     z-index: 9;
2879     min-width: 768px;
2880 }
2881
2882 [dir='rtl'] #bar .spacer,
2883 [dir='rtl'] #bar .button-wrap,
2884 [dir='rtl'] #bar .button-wrap button {
2885     float: right;
2886 }
2887
2888
2889 /* Header for modals / panes
2890 ------------------------------------------------------- */
2891
2892 .header {
2893     border-bottom: 1px solid #ccc;
2894     height: 60px;
2895     position: relative;
2896 }
2897
2898 .header h3 {
2899     text-align: left;
2900     margin-bottom: 0;
2901     white-space: nowrap;
2902     text-overflow: ellipsis;
2903     overflow: hidden;
2904     padding: 20px 20px 20px 40px;
2905 }
2906 [dir='rtl'] .header h3 {
2907     text-align: right;
2908     padding: 20px 40px 20px 20px;
2909 }
2910
2911 .header button,
2912 .modal > button {
2913     border-radius: 0;
2914     width: 40px;
2915     text-align: center;
2916     overflow: hidden;
2917 }
2918
2919 .header button {
2920     position: relative;
2921     height: 100%;
2922 }
2923
2924 .entity-editor-pane .header button.preset-close,
2925 .preset-list-pane .header button.preset-choose {
2926     position: absolute;
2927     right: 0;
2928     top: 0;
2929 }
2930 [dir='rtl'] .entity-editor-pane .header button.preset-close,
2931 [dir='rtl'] .preset-list-pane .header button.preset-choose {
2932     left: 0;
2933     right: auto;
2934 }
2935
2936 .entity-editor-pane .header button.preset-choose {
2937     position: absolute;
2938     left: 0;
2939     top: 0;
2940 }
2941 [dir='rtl'] .entity-editor-pane .header button.preset-choose {
2942     left: auto;
2943     right: 0;
2944 }
2945
2946 .preset-choose {
2947     font-size: 16px;
2948     line-height: 1.25;
2949     font-weight: bold;
2950 }
2951
2952 .modal > button {
2953     position: absolute;
2954     right: 0;
2955     top: 0;
2956     height: 60px;
2957     z-index: 50;
2958 }
2959 [dir='rtl'] .modal > button {
2960     left: 0;
2961     right: unset;
2962 }
2963
2964 .footer {
2965     position: absolute;
2966     bottom: 0;
2967     padding: 5px 20px 5px 20px;
2968     border-top: 1px solid #ccc;
2969     background-color: #fafafa;
2970     width: 100%;
2971     z-index: 1;
2972 }
2973
2974 .sidebar-component .body {
2975     width: 100%;
2976     overflow: auto;
2977     top: 60px;
2978     bottom: 0;
2979     position: absolute;
2980 }
2981
2982 /* Inspector
2983 ------------------------------------------------------- */
2984
2985 #sidebar {
2986     position: relative;
2987     float: left;
2988     height: 100%;
2989     overflow: hidden;
2990     z-index: 10;
2991     background: #f6f6f6;
2992     -ms-user-select: element;
2993 }
2994 [dir='rtl'] #sidebar {
2995     float: right;
2996 }
2997
2998 .sidebar-component {
2999     position: absolute;
3000     top: 0;
3001     left: 0;
3002     bottom: 0;
3003     right: 0;
3004 }
3005
3006 .inspector-wrap {
3007     width: 100%;
3008     height: 100%;
3009 }
3010
3011 .inspector-hidden {
3012     display: none;
3013 }
3014
3015 .inspector-body {
3016     overflow-y: scroll;
3017     overflow-x: hidden;
3018     position: absolute;
3019     right: 0;
3020     left: 0;
3021     bottom: 0;
3022 }
3023
3024
3025 .feature-list-pane .inspector-body {
3026     top: 120px;
3027 }
3028
3029 .preset-list-pane .inspector-body {
3030     top: 120px;
3031 }
3032
3033 .entity-editor-pane .inspector-body {
3034     top: 60px;
3035 }
3036
3037 .selection-list-pane .inspector-body {
3038     top: 60px;
3039 }
3040
3041 .inspector-inner {
3042     padding: 20px;
3043     position: relative;
3044 }
3045
3046 #sidebar .search-header .icon {
3047     display: block;
3048     position: absolute;
3049     left: 10px;
3050     top: 80px;
3051     pointer-events: none;
3052 }
3053 [dir='rtl'] #sidebar .search-header .icon {
3054     left: auto;
3055     right: 10px;
3056 }
3057
3058 #sidebar .search-header input {
3059     position: absolute;
3060     top: 60px;
3061     height: 60px;
3062     width: 100%;
3063     padding: 5px 10px;
3064     border-radius: 0;
3065     border-width: 0;
3066     border-bottom-width: 1px;
3067     text-indent: 30px;
3068     font-size: 18px;
3069     font-weight: bold;
3070 }
3071
3072 /* Feature list */
3073
3074 .feature-list  {
3075     width:100%;
3076 }
3077
3078 .no-results-item,
3079 .geocode-item,
3080 .feature-list-item {
3081     width: 100%;
3082     position: relative;
3083     border-bottom: 1px solid #ccc;
3084     border-radius: 0;
3085 }
3086
3087 .feature-list-item {
3088     background-color: white;
3089     font-weight: bold;
3090     height: 40px;
3091     line-height: 20px;
3092 }
3093
3094 .feature-list-item:hover {
3095     background-color: #ececec;
3096 }
3097
3098 .feature-list-item button {
3099     background: transparent;
3100 }
3101
3102 .feature-list-item .label {
3103     text-align: left;
3104     padding: 10px 10px;
3105     white-space: nowrap;
3106     text-overflow: ellipsis;
3107     overflow: hidden;
3108     border-left: 1px solid rgba(0, 0, 0, .1);
3109 }
3110 [dir='rtl'] .feature-list-item .label {
3111     text-align: right;
3112 }
3113
3114 .feature-list-item .label .icon {
3115     opacity: .5;
3116 }
3117
3118 .feature-list-item .close {
3119     float: right;
3120     padding: 10px;
3121 }
3122
3123 .feature-list-item .close .icon {
3124     opacity: 1;
3125 }
3126
3127 .feature-list-item .entity-type {
3128     color:#7092ff;
3129 }
3130
3131 .feature-list-item:hover .entity-type {
3132     color:#597be7;
3133 }
3134
3135 .feature-list-item .entity-name {
3136     font-weight: normal;
3137     color: #666;
3138     padding-left: 10px;
3139 }
3140 [dir='rtl'] .feature-list-item .entity-name {
3141     padding-left: 0;
3142     padding-right: 10px;
3143 }
3144
3145
3146 /* Presets
3147 ------------------------------------------------------- */
3148
3149 /* Preset grid  */
3150
3151 .preset-list  {
3152     width:100%;
3153     padding: 20px 20px 10px 20px;
3154     border-bottom: 1px solid #ccc;
3155 }
3156
3157 .preset-list-button-wrap {
3158     position: relative;
3159     margin-bottom: 10px;
3160     height: 60px;
3161 }
3162
3163 .preset-list-button {
3164     width: 100%;
3165     height: 100%;
3166     position: relative;
3167     border: 1px solid #ccc;
3168 }
3169
3170 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
3171     background: #ececec;
3172 }
3173
3174 .preset-icon-fill-area {
3175     cursor: inherit;
3176     height: 40px;
3177     width: 40px;
3178     margin: auto;
3179     position: absolute;
3180     left: 10px;
3181     top: 10px;
3182 }
3183
3184 .preset-icon-fill-vertex {
3185     height: 40px;
3186     width: 40px;
3187     margin: auto;
3188     position: absolute;
3189     left: 10px;
3190     top: 10px;
3191     border: 1.5px solid #333;
3192     border-radius: 20px;
3193     background-color: #efefef;
3194     backface-visibility: hidden;
3195 }
3196
3197 [dir='rtl'] .preset-icon-fill-vertex,
3198 [dir='rtl'] .preset-icon-fill-area {
3199   left: auto;
3200   right: 10px;
3201 }
3202
3203 .preset-icon-frame {
3204     position: absolute;
3205     top: 7px;
3206     left: 7px;
3207     height: 42px;
3208     width: 42px;
3209     margin: auto;
3210 }
3211 [dir='rtl'] .preset-icon-frame {
3212   left: auto;
3213   right: 7px;
3214 }
3215
3216 .preset-icon-frame .icon {
3217     width: 46px;
3218     height: 46px;
3219 }
3220
3221 .preset-icon-60 {
3222     position: absolute;
3223     top: 0px;
3224     left: 0px;
3225     margin: auto;
3226 }
3227
3228 .preset-icon-60 .icon {
3229     width: 60px;
3230     height: 60px;
3231 }
3232
3233 .preset-icon-44 {
3234     position: absolute;
3235     top: 9px;
3236     left: 8px;
3237     margin: auto;
3238 }
3239
3240 .preset-icon-44 .icon {
3241     width: 44px;
3242     height: 44px;
3243 }
3244
3245 .preset-icon-28 {
3246     position: absolute;
3247     top: 16px;
3248     left: 16px;
3249     margin: auto;
3250 }
3251
3252 .preset-icon-28 .icon {
3253     width: 28px;
3254     height: 28px;
3255 }
3256
3257 .preset-icon-24 {
3258     position: absolute;
3259     top: 18px;
3260     left: 18px;
3261     margin: auto;
3262 }
3263
3264 .preset-icon-24 .icon {
3265     width: 24px;
3266     height: 24px;
3267 }
3268
3269 [dir='rtl'] .preset-list-button-wrap .preset-icon {
3270     left: auto;
3271     right: auto;
3272 }
3273
3274 [dir='rtl'] .preset-list-button-wrap .preset-icon-28 {
3275     right: 16px;
3276 }
3277
3278 [dir='rtl'] .preset-list-button-wrap .preset-icon-24 {
3279     right: 18px;
3280 }
3281
3282 .preset-list-button .label {
3283     background-color: #f6f6f6;
3284     text-align: left;
3285     position: absolute;
3286     top: 0;
3287     bottom: 0;
3288     right: 0;
3289     padding: 5px 10px;
3290     left: 60px;
3291     line-height: 50px;
3292     white-space: nowrap;
3293     text-overflow: ellipsis;
3294     overflow: hidden;
3295     border-left: 1px solid rgba(0, 0, 0, .1);
3296     border-radius: 0 3px 3px 0;
3297 }
3298 [dir='rtl'] .preset-list-button .label {
3299     text-align: right;
3300     left: 0;
3301     right: 60px;
3302     border-left: none;
3303     border-right: 1px solid rgba(0, 0, 0, .1);
3304     border-radius: 3px 0 0 3px;
3305 }
3306
3307 .preset-list-button:hover .label {
3308     background-color: #ececec;
3309 }
3310
3311 .preset-list-item button.tag-reference-button {
3312     height: 100%;
3313     border: 1px solid #CCC;
3314     border-radius: 0 3px 3px 0;
3315     position: absolute;
3316     top: 0;
3317     right: 0;
3318     width: 32px;
3319     background: #fafafa;
3320 }
3321 [dir='rtl'] .preset-list-item button.tag-reference-button {
3322     left: 0;
3323     right: auto;
3324     border-radius: 3px 0 0 3px;
3325 }
3326
3327 .preset-list-item button.tag-reference-button:hover {
3328     background: #f1f1f1;
3329 }
3330
3331 .preset-list-item button.tag-reference-button .icon {
3332     opacity: .5;
3333 }
3334
3335 .current .preset-list-button,
3336 .current .preset-list-button .label {
3337     background-color: #E8EBFF;
3338 }
3339
3340 .category .preset-list-button:after,
3341 .category .preset-list-button:before {
3342     content: "";
3343     position: absolute;
3344     top: -5px;
3345     left: -1px; right: -1px;
3346     border: 1px solid #ccc;
3347     border-bottom: none;
3348     border-radius: 6px 6px 0 0;
3349     height: 6px;
3350 }
3351
3352 .category .preset-list-button:before {
3353     top: -3px;
3354 }
3355
3356 .subgrid .preset-list {
3357     padding: 10px 10px 0 10px;
3358     margin-top: 0;
3359     border: 0;
3360     border-radius: 8px;
3361     width: -webkit-calc(100% + 20px);
3362     margin-left: -10px;
3363 }
3364
3365 .subgrid .arrow {
3366     border: solid rgba(0, 0, 0, 0);
3367     border-width: 10px;
3368     border-bottom-color: #f1f1f1;
3369     width: 0;
3370     height: 0;
3371     margin-left: 50%;
3372     margin-left: -webkit-calc(50% - 10px);
3373     margin-top: -10px;
3374 }
3375
3376
3377 /* preset form basics */
3378
3379 .preset-editor {
3380     overflow: hidden;
3381     padding-bottom: 10px;
3382 }
3383
3384 .preset-editor a.hide-toggle {
3385     margin: 0 20px 10px 20px;
3386 }
3387
3388 .preset-editor .form-fields-container {
3389     padding: 10px;
3390     margin: 0 10px 10px 10px;
3391     border-radius: 8px;
3392 }
3393
3394 .preset-editor .form-fields-container:empty {
3395     display: none;
3396 }
3397
3398 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
3399     margin-bottom: 0;
3400 }
3401
3402 .form-field {
3403     margin-bottom: 10px;
3404     width: 100%;
3405     -webkit-transition: margin-bottom 200ms;
3406        -moz-transition: margin-bottom 200ms;
3407          -o-transition: margin-bottom 200ms;
3408             transition: margin-bottom 200ms;
3409 }
3410
3411 .form-field.nowrap,
3412 .wrap-form-field:last-child .form-field {
3413     margin-bottom: 0;
3414 }
3415
3416 .form-label {
3417     position: relative;
3418     font-weight: bold;
3419     border: 1px solid #cfcfcf;
3420     padding: 5px 0 5px 10px;
3421     background: #f6f6f6;
3422     display: block;
3423     border-radius: 4px 4px 0 0;
3424     overflow: hidden;
3425 }
3426 [dir='rtl'] .form-label {
3427     padding: 5px 10px 5px 0;
3428 }
3429
3430 .form-label-button-wrap {
3431     position: absolute;
3432     top: 0;
3433     right: 0;
3434     height: 100%;
3435     width: 100%;
3436     background: transparent;
3437     text-align: right;
3438 }
3439 [dir='rtl'] .form-label-button-wrap {
3440     text-align: left;
3441 }
3442
3443 .form-label-button-wrap .tag-reference-button {
3444     border-radius: 0 3px 0 0;
3445 }
3446
3447 .form-label-button-wrap .icon {
3448     opacity: .5;
3449 }
3450
3451 .form-label button {
3452     border-left: 1px solid #ccc;
3453     width: 32px;
3454     height: 100%;
3455     border-radius: 0;
3456     background: #f6f6f6;
3457 }
3458 [dir='rtl'] .form-label button {
3459     border-left: none;
3460     border-right: 1px solid #CCC;
3461     border-radius: 4px 0 0 0;
3462     width: 31px;
3463 }
3464 .form-label button:hover {
3465     background: #f1f1f1;
3466 }
3467
3468 .form-label .modified-icon,
3469 .form-field .remove-icon {
3470     display: none;
3471 }
3472
3473 .modified .form-label .modified-icon,
3474 .present .form-label .remove-icon {
3475     display: inline-block;
3476 }
3477
3478 .form-field > input,
3479 .form-field > textarea,
3480 .form-field .preset-input-wrap {
3481     border: 1px solid #ccc;
3482     min-height: 30px;
3483     border-top: 0;
3484     border-radius: 0 0 4px 4px;
3485     overflow: hidden;
3486 }
3487
3488 .form-field textarea {
3489     height: 65px;
3490 }
3491
3492 .inspector-border {
3493     border-bottom: 1px solid #ccc
3494 }
3495
3496 /* Preset form (hover mode) */
3497
3498 .inspector-hover .checkselect label:last-of-type,
3499 .inspector-hover .preset-input-wrap .label,
3500 .inspector-hover .form-field-multicombo,
3501 .inspector-hover .structure-extras-wrap,
3502 .inspector-hover input,
3503 .inspector-hover textarea,
3504 .inspector-hover label {
3505     background: #ececec;
3506 }
3507
3508 .inspector-hover a,
3509 .inspector-hover .form-field-multicombo .chips,
3510 .inspector-hover .checkselect label:last-of-type {
3511     color: #666;
3512 }
3513
3514 .inspector-hover .form-field-multicombo .chips {
3515     background: #eee;
3516     border: 1px solid #ccc;
3517 }
3518
3519 /* hide and remove from layout */
3520 .inspector-hidden,
3521 .inspector-hover label input[type="checkbox"],
3522 .inspector-hover label input[type="radio"],
3523 .inspector-hover .toggle-list label,
3524 .inspector-hover .toggle-list label span,
3525 .inspector-hover .inspector-inner .add-tag,
3526 .inspector-hover .inspector-inner .add-relation,
3527 .inspector-hover .form-field-multicombo .combobox-input,
3528 .inspector-hover .toggle-list label.remove .icon {
3529     height: 0;
3530     width: 0;
3531     overflow: hidden;
3532     opacity: 0 !important;
3533     border-width: 0;
3534     margin: 0;
3535     padding: 0;
3536 }
3537
3538 /* hide but preserve in layout */
3539 .inspector-hover .entity-editor-pane button.minor,
3540 .inspector-hover .combobox-caret,
3541 .inspector-hover .entity-editor-pane .header button,
3542 .inspector-hover .spin-control,
3543 .inspector-hover .form-field-multicombo .chips .remove,
3544 .inspector-hover .hide-toggle:before,
3545 .inspector-hover .more-fields,
3546 .inspector-hover .form-label-button-wrap,
3547 .inspector-hover .tag-reference-button,
3548 .inspector-hover .view-on-osm {
3549     opacity: 0;
3550 }
3551
3552 /* Styles for raw tag inspector on hover */
3553 .inspector-hover .tag-row .key-wrap,
3554 .inspector-hover .tag-row .form-field.input-wrap-position {
3555     width: 50%;
3556 }
3557
3558 .inspector-hover .tag-row:first-child input.value {
3559     border-top-right-radius: 4px;
3560 }
3561 [dir='rtl'] .inspector-hover .tag-row:first-child input.value {
3562     border-top-right-radius: 0;
3563     border-top-left-radius: 4px;
3564 }
3565
3566 .inspector-hover .tag-row:last-child input.value {
3567     border-bottom-right-radius: 4px;
3568 }
3569 [dir='rtl'] .inspector-hover .tag-row:last-child input.value {
3570     border-bottom-right-radius: 0;
3571     border-bottom-left-radius: 4px;
3572 }
3573
3574 .inspector-hover .tag-row:last-child input.key {
3575     border-bottom-left-radius: 4px;
3576 }
3577 [dir='rtl'] .inspector-hover .tag-row:last-child input.key {
3578     border-bottom-left-radius: 0;
3579     border-bottom-right-radius: 4px;
3580 }
3581
3582 .inspector-hover .more-fields {
3583     max-height: 0;
3584     margin-bottom: -10px;
3585 }
3586
3587 /* Unstyle button fields */
3588 .inspector-hover .toggle-list label.active,
3589 .inspector-hover .entity-editor-pane a.hide-toggle {
3590     opacity: 1;
3591     background-color: transparent;
3592     color: #666;
3593     padding-left: 0;
3594     border-width: 0;
3595 }
3596
3597 .inspector-hover .toggle-list button.active {
3598     padding-left: 10px;
3599 }
3600
3601 /* Add placeholder only on hover for radio buttons */
3602 .inspector-hover .toggle-list .placeholder {
3603     color: #a9a9a9;
3604     padding: 5px 10px;
3605     opacity: 1;
3606     line-height: 20px;
3607     width: 100%;
3608 }
3609
3610 /* Hide placeholder for radio buttons if another is active, or not in hover state */
3611 .toggle-list label.active ~ .placeholder,
3612 .toggle-list .placeholder {
3613     padding: 0;
3614     opacity: 0;
3615     width: 0;
3616     line-height: 0;
3617     display: block;
3618     overflow: hidden;
3619 }
3620
3621 /* adding additional preset fields */
3622
3623 .more-fields {
3624     padding: 0 20px 20px 20px;
3625     font-weight: bold;
3626 }
3627 .changeset-editor .more-fields {
3628     padding: 15px 20px 0 20px;
3629 }
3630
3631 .more-fields label {
3632     display: flex;
3633     flex-flow: row nowrap;
3634     justify-content: space-between;
3635     align-items: center;
3636 }
3637
3638 .more-fields input {
3639     margin-left: 10px;
3640     flex: 1 1 50%;
3641 }
3642 [dir='rtl'] .more-fields input {
3643     margin-left: auto;
3644     margin-right: 10px;
3645 }
3646
3647 .preset-input-wrap .label {
3648     height: 30px;
3649     background: #F6F6F6;
3650     padding: 5px 10px;
3651 }
3652
3653 [dir='rtl'] .preset-input-wrap .col6 {
3654     float: right;
3655 }
3656
3657
3658 /* preset form access */
3659 /* preset form cycleway */
3660 /* preset form structure extras */
3661
3662 .structure-extras-wrap li,
3663 .form-field-cycleway .preset-input-wrap li,
3664 .form-field-access .preset-input-wrap li {
3665     border-bottom: 1px solid #ccc;
3666 }
3667 .structure-extras-wrap li:last-child,
3668 .form-field-cycleway .preset-input-wrap li:last-child,
3669 .form-field-access .preset-input-wrap li:last-child {
3670     border-bottom: 0;
3671 }
3672 .structure-input-type-wrap input,
3673 .structure-input-layer-wrap input,
3674 .preset-input-cycleway-wrap input,
3675 .preset-input-access-wrap input {
3676     border-radius: 0;
3677     border-width: 0;
3678     border-left-width: 1px;
3679 }
3680 [dir='rtl'] .structure-input-type-wrap input,
3681 [dir='rtl'] .structure-input-layer-wrap input,
3682 [dir='rtl'] .preset-input-cycleway-wrap input,
3683 [dir='rtl'] .preset-input-access-wrap input {
3684     border-left-width: 0;
3685     border-right-width: 1px;
3686 }
3687
3688 .preset-input-wrap li:last-child input {
3689     border-bottom-right-radius: 4px;
3690 }
3691
3692 .structure-extras-wrap {
3693     padding: 10px 10px;
3694     background: #fff;
3695 }
3696 .structure-extras-wrap ul {
3697     border: 1px solid #ccc;
3698     border-radius: 4px;
3699 }
3700 .structure-extras-wrap li:first-child span {
3701     border-top-left-radius: 4px;
3702 }
3703 .structure-extras-wrap li:first-child input {
3704     border-top-right-radius: 4px;
3705 }
3706 .structure-extras-wrap li:last-child span {
3707     border-bottom-left-radius: 4px;
3708 }
3709 .structure-extras-wrap li:last-child input {
3710     border-bottom-right-radius: 4px;
3711 }
3712 [dir='rtl'] .structure-extras-wrap li:first-child span {
3713     border-top-left-radius: 0;
3714     border-top-right-radius: 4px;
3715 }
3716 [dir='rtl'] .structure-extras-wrap li:first-child input {
3717     border-top-right-radius: 0;
3718     border-top-left-radius: 4px;
3719 }
3720 [dir='rtl'] .structure-extras-wrap li:last-child span {
3721     border-bottom-left-radius: 0;
3722     border-bottom-right-radius: 4px;
3723 }
3724 [dir='rtl'] .structure-extras-wrap li:last-child input {
3725     border-bottom-right-radius: 0;
3726     border-bottom-left-radius: 4px;
3727 }
3728
3729
3730 /* preset form multicombo */
3731
3732 .form-field-multicombo {
3733     border: 1px solid #cfcfcf;
3734     border-top: 0px;
3735     padding: 5px 0 5px 10px;
3736     background: #fff;
3737     display: block;
3738     border-radius: 0 0 4px 4px;
3739     overflow: hidden;
3740 }
3741
3742 .form-field-multicombo:focus {
3743     border-bottom: 0px;
3744 }
3745
3746 .form-field-multicombo.active {
3747     border-bottom-left-radius: 0px;
3748     border-bottom-right-radius: 0px;
3749 }
3750
3751 .form-field-multicombo li {
3752     display: inline-flex;
3753     flex-flow: row nowrap;
3754     align-items: center;
3755     background-color: #eff2f7;
3756     border: 1px solid #ccd5e3;
3757     border-radius: 4px;
3758     line-height: 25px;
3759     padding: 2px 5px;
3760     margin: 3px;
3761 }
3762
3763 .form-field-multicombo a {
3764     font-family: Arial, Helvetica, sans-serif !important;
3765     font-size: 16px !important;
3766     line-height: 24px;
3767     float: right;
3768     margin: 1px 0 0 5px;
3769     padding: 0;
3770     cursor: pointer;
3771     color: #a6b4ce;
3772 }
3773
3774 .form-field-multicombo input {
3775     border: 1px solid #ddd;
3776     width: 100px;
3777     margin: 3px;
3778     height: 31px;
3779 }
3780
3781 .form-field-multicombo .combobox-caret {
3782     margin: 3px 3px 3px -30px;
3783 }
3784
3785 .form-field-multicombo input:focus {
3786     border-radius: 4px !important;
3787 }
3788
3789
3790 /* preset form numbers */
3791
3792 input[type=number] {
3793     position: relative;
3794     padding-right: 20%;
3795 }
3796
3797 .spin-control {
3798     width: 64px;
3799     height: 30px;
3800     display: inline-block;
3801     margin-left: -64px;
3802     margin-bottom: -11px;
3803     position: relative;
3804 }
3805 [dir='rtl'] .spin-control{
3806     margin-left: 0;
3807     margin-right: -64px;
3808 }
3809
3810 .spin-control button {
3811     right: 1px;
3812     position: relative;
3813     float: left;
3814     height: 100%;
3815     width: 32px;
3816     border-left: 1px solid #CCC;
3817     border-radius: 0;
3818     background: rgba(0, 0, 0, 0);
3819 }
3820 [dir='rtl'] .spin-control button{
3821     border-left: 0;
3822     border-right: 1px solid #CCC;
3823 }
3824
3825 .spin-control button.decrement {
3826     border-bottom-right-radius: 3px;
3827 }
3828 [dir='rtl'] .spin-control button.decrement {
3829     border-bottom-right-radius: 0;
3830 }
3831 [dir='rtl'] .spin-control button.increment {
3832     border-bottom-left-radius: 3px;
3833     right: 0;
3834 }
3835
3836 .spin-control button.decrement::after,
3837 .spin-control button.increment::after {
3838     content:"";
3839     height: 0; width: 0;
3840     position: absolute;
3841     left: 0; right: 0; bottom: 0; top: 0;
3842     margin: auto;
3843 }
3844
3845 .spin-control button.decrement::after {
3846     border-top: 5px solid #CCC;
3847     border-left: 5px solid transparent;
3848     border-right: 5px solid transparent;
3849 }
3850
3851 .spin-control button.increment::after {
3852     border-bottom: 5px solid #CCC;
3853     border-left: 5px solid transparent;
3854     border-right: 5px solid transparent;
3855 }
3856
3857
3858 /* preset form checkbox */
3859
3860 .checkselect label:last-of-type {
3861     display: block;
3862     background: white;
3863     padding: 5px 10px;
3864     color: #7092FF;
3865 }
3866
3867 .checkselect label:hover {
3868     background: #f1f1f1;
3869 }
3870
3871 .checkselect .set {
3872     color: inherit;
3873 }
3874
3875 .checkselect label:not(.set) input[type="checkbox"] {
3876     opacity: .5;
3877 }
3878
3879 .checkselect .reverser.button {
3880     display: block;
3881     float: right;
3882     background-color: #eff2f7;
3883     border: 1px solid #ccd5e3;
3884     border-radius: 2px;
3885     padding: 0px 8px;
3886 }
3887 [dir='rtl'] .checkselect .reverser.button {
3888     float: left;
3889 }
3890 .checkselect .reverser.button.hide {
3891     display: none;
3892 }
3893
3894 /* Preset form radio button */
3895
3896 .toggle-list button.remove {
3897     border-radius: 0 0 3px 3px;
3898 }
3899
3900 .toggle-list button.remove .icon {
3901     position: absolute;
3902     left: 5px;
3903 }
3904
3905 .toggle-list button.remove::before {
3906     content: none;
3907 }
3908
3909 #preset-input-maxspeed {
3910     border-right: none;
3911     border-radius: 0 0 0 4px;
3912     width: 80%;
3913 }
3914 [dir='rtl'] #preset-input-maxspeed {
3915     border-right: 1px solid #ccc;
3916     border-radius: 0 0 4px 0;
3917 }
3918
3919 .form-field .maxspeed-unit {
3920     border-radius: 0 0 4px 0;
3921     width: 20%;
3922 }
3923 [dir='rtl'] .form-field .maxspeed-unit {
3924     border-right: 0;
3925     border-radius: 0 0 0 4px;
3926 }
3927
3928 /* Wikipedia field */
3929 .form-field .wiki-lang {
3930     border-radius: 0;
3931 }
3932 .form-field .wiki-title {
3933     padding-right: 20%;
3934 }
3935 [dir='rtl'] .form-field .wiki-title {
3936     padding-left: 20%;
3937     padding-right: 10px;
3938 }
3939
3940 .form-field .wiki-title ~ .combobox-caret {
3941     right: 32px;
3942 }
3943 [dir='rtl'] .form-field .wiki-title ~ .combobox-caret {
3944     right: auto;
3945     left: 32px;
3946 }
3947
3948 /* Localized field */
3949 .form-field .localized-main {
3950     padding-right: 12%;
3951 }
3952 [dir='rtl'] .form-field .localized-main {
3953     padding-left: 12%;
3954     padding-right: 10px;
3955 }
3956
3957 .form-field .button-input-action {
3958     position: relative;
3959     right: 1px;
3960     width: 32px;
3961     margin-left: -32px;
3962     border: 1px solid #CCC;
3963     border-top-width: 0;
3964     border-right-width: 0;
3965     border-radius: 0 0 4px 0;
3966     height: 30px;
3967     vertical-align: top;
3968 }
3969 [dir='rtl'] .form-field .button-input-action {
3970     margin-left: 0;
3971     margin-right: -32px;
3972     border-right-width: 1px;
3973     border-radius: 0 0 0 4px;
3974 }
3975
3976 .form-field .localized-wrap {
3977     padding: 0 10px;
3978 }
3979
3980 .form-field .localized-wrap .entry {
3981     position: relative;
3982     overflow: hidden;
3983 }
3984
3985 .form-field .localized-wrap .entry::before {
3986     content: "";
3987     display: block;
3988     position: absolute;
3989     background:#ccc;
3990     height: 11px;
3991     width: 1px;
3992     left: 0;
3993     right: 0;
3994     top: -11px;
3995     margin: auto;
3996 }
3997
3998 .form-field .localized-wrap .entry .localized-lang {
3999     border-radius: 0;
4000     border-top-width: 0;
4001 }
4002
4003 .form-field .localized-wrap .entry .localized-value {
4004     border-top-width: 0;
4005     border-radius: 0 0 4px 4px;
4006 }
4007
4008 .form-field .localized-wrap .form-label button {
4009     border-top-right-radius: 3px;
4010 }
4011
4012 /* Preset form address */
4013
4014 .addr-row input {
4015     border-right: 0;
4016     border-bottom: 0;
4017 }
4018 [dir='rtl'] .addr-row input {
4019     border-right: 1px solid #ccc;
4020     border-left: 0;
4021 }
4022
4023 .addr-row:first-of-type input {
4024     border-top: 0;
4025 }
4026
4027 .addr-row input:first-of-type {
4028     border-left: 0;
4029 }
4030 [dir='rtl'] .addr-row input:first-of-type {
4031     border-right: 0;
4032 }
4033
4034 .addr-row input {
4035     border-radius: 0;
4036 }
4037
4038 .addr-row:last-of-type input:first-of-type {
4039     border-radius: 0 0 0 4px;
4040 }
4041 [dir='rtl'] .addr-row:last-of-type input:first-of-type {
4042     border-radius: 0 0 4px 0;
4043 }
4044
4045 .addr-row:last-of-type input:last-of-type {
4046     border-radius: 0 0 4px 0;
4047 }
4048 [dir='rtl'] .addr-row:last-of-type input:last-of-type {
4049     border-radius: 0 0 0 4px;
4050 }
4051
4052 /* Restrictions editor */
4053
4054 .form-field-restrictions .preset-input-wrap {
4055     position: relative;
4056     height: 300px;
4057 }
4058
4059 .form-field-restrictions svg.surface {
4060     width: 100%;
4061     height: 100%;
4062 }
4063
4064 .form-field-restrictions .restriction-help {
4065     z-index: 1;
4066     position: absolute;
4067     top: 0;
4068     left: 0;
4069     right: 0;
4070     padding: 2px 6px;
4071     background-color: rgba(255, 255, 255, .8);
4072     color: #999;
4073     text-align: center;
4074 }
4075
4076 /* combobox dropdown */
4077
4078 div.combobox {
4079     z-index: 9999;
4080     display: none;
4081     box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
4082     margin-top: -1px;
4083     background: white;
4084     max-height: 120px;
4085     overflow-y: auto;
4086     overflow-x: hidden;
4087     border: 1px solid #ccc;
4088     border-radius: 0 0 4px 4px;
4089 }
4090
4091 .combobox a {
4092     display: block;
4093     padding: 5px 10px;
4094     border-top:1px solid #ccc;
4095     text-overflow: ellipsis;
4096     white-space: nowrap;
4097     overflow: hidden;
4098 }
4099
4100 .combobox a.selected,
4101 .combobox a:hover {
4102     background: #ececec;
4103 }
4104
4105 .combobox a:first-child {
4106     border-top: 0;
4107 }
4108
4109 .combobox-caret {
4110     display: inline-block;
4111     position: relative;
4112     height: 30px;
4113     width: 30px;
4114     margin-left: -30px;
4115     vertical-align: top;
4116 }
4117 [dir='rtl'] .combobox-caret {
4118   margin-left: 0;
4119   margin-right: -30px;
4120 }
4121
4122 .combobox-caret::after {
4123     content:"";
4124     height: 0; width: 0;
4125     position: absolute;
4126     left: 0; right: 0; bottom: 0; top: 0;
4127     margin: auto;
4128     border-top: 5px solid #ccc;
4129     border-left: 5px solid transparent;
4130     border-right: 5px solid transparent;
4131 }
4132
4133 /* Raw Tag Editor */
4134
4135 .tag-list {
4136     padding-top: 10px;
4137 }
4138
4139 .tag-row {
4140     width: 100%;
4141     position: relative;
4142     clear: both;
4143 }
4144
4145 .tag-row.readonly,
4146 .tag-row.readonly input.key,
4147 .tag-row.readonly input.value,
4148 .tag-row.readonly button.remove {
4149     color: #777777;
4150     background-color: #eee;
4151     cursor: not-allowed;
4152 }
4153
4154 .tag-row input {
4155     height: 31px;
4156     border: 0;
4157     border-radius: 0;
4158     border-bottom: 1px solid #CCC;
4159     border-left: 1px solid #CCC;
4160 }
4161 [dir='rtl'] .tag-row input {
4162     border-left: none;
4163     border-right: 1px solid #CCC;
4164 }
4165
4166 .tag-row .key-wrap,
4167 .tag-row .input-wrap-position {
4168     width: 40%;
4169     float: left;
4170     height: 30px;
4171 }
4172 [dir='rtl'] .tag-row .key-wrap,
4173 [dir='rtl'] .tag-row .input-wrap-position {
4174     float: right;
4175 }
4176
4177 .tag-row input.key {
4178     font-weight: bold;
4179     background-color: #f6f6f6;
4180 }
4181
4182 .tag-row input.value {
4183     border-right: 1px solid #CCC;
4184 }
4185 [dir='rtl'] .tag-row input.value {
4186     border-left: 1px solid #CCC;
4187 }
4188
4189 .tag-row:first-child input.key {
4190     border-top: 1px solid #CCC;
4191     border-top-left-radius: 4px;
4192 }
4193 [dir='rtl'] .tag-row:first-child input.key {
4194     border-top-left-radius: 0;
4195     border-top-right-radius: 4px;
4196 }
4197
4198 .tag-row:first-child input.value {
4199     border-top: 1px solid #CCC;
4200 }
4201
4202 .tag-row button {
4203     position: absolute;
4204     height: 31px;
4205     right: 10%;
4206     border: 1px solid #CCC;
4207     border-top-width: 0;
4208     border-left-width: 0;
4209 }
4210 [dir='rtl'] .tag-row button {
4211     left: 10%;
4212     border-left-width: 1px;
4213     border-right-width: 0;
4214 }
4215
4216 .tag-row button:hover {
4217     background: #f1f1f1;
4218 }
4219
4220 .tag-row button .icon {
4221     opacity: .5;
4222 }
4223
4224 .tag-row:first-child button {
4225     border-top-width: 1px;
4226 }
4227
4228 .tag-row:first-child .tag-reference-button {
4229     border-top-right-radius: 4px;
4230 }
4231 [dir='rtl'] .tag-row:first-child .tag-reference-button {
4232     border-top-left-radius: 4px;
4233     border-top-right-radius: 0;
4234 }
4235
4236 .tag-row:last-child .tag-reference-button {
4237     border-bottom-right-radius: 4px;
4238 }
4239 [dir='rtl'] .tag-row:last-child .tag-reference-button {
4240     border-bottom-left-radius: 4px;
4241     border-bottom-right-radius: 0;
4242 }
4243
4244 .tag-row .tag-reference-button {
4245     right: 0;
4246     border-radius: 0;
4247     width: 10%;
4248     top: 0;
4249     background: #fafafa;
4250 }
4251 [dir='rtl'] .tag-row .tag-reference-button {
4252     left: auto;
4253     right: auto;
4254     margin-right: 35px;
4255     border-left-width: 1px;
4256     border-right-width: 0;
4257 }
4258
4259 /* Adding form fields to tag editor */
4260
4261 .raw-tag-editor .add-tag {
4262     width: 40%;
4263     height: 30px;
4264     border-top: 0;
4265     background: rgba(0,0,0,.5);
4266     border-radius: 0 0 4px 4px;
4267 }
4268
4269 .raw-tag-editor .add-tag:hover {
4270     background: rgba(0,0,0,.8);
4271 }
4272
4273 .raw-tag-editor .add-tag .label {
4274     display: none;
4275 }
4276
4277 /* Tag reference */
4278
4279 button.minor.tag-reference-loading {
4280     background-color: #f5f5f5;
4281 }
4282
4283 .tag-reference-loading .icon {
4284     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
4285     background-position: 0 0;
4286 }
4287
4288 .tag-reference-body {
4289     overflow: hidden;
4290     clear: both;
4291 }
4292
4293 .tag-reference-body .tag-reference-description {
4294     margin: 10px 5px 0 5px;
4295 }
4296
4297 .tag-reference-body a {
4298     display: block;
4299 }
4300
4301 .tag-reference-body .tag-reference-description:last-child,
4302 .tag-reference-body a:last-child {
4303     margin-bottom: 15px;
4304 }
4305
4306 .preset-list .tag-reference-body {
4307     position: relative;
4308     width: 100%;
4309 }
4310
4311 .raw-tag-editor .tag-reference-body {
4312     float: left;
4313     width: 100%;
4314 }
4315
4316 .raw-tag-editor .tag-row.readonly .tag-reference-body {
4317     background: #f6f6f6;
4318     color: #333;
4319 }
4320
4321 .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body {
4322     border-bottom: 1px solid #ccc;
4323 }
4324
4325 .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
4326     border-top: 1px solid #ccc;
4327 }
4328
4329 img.tag-reference-wiki-image {
4330     float: right;
4331     width: 33.3333%;
4332     width: -webkit-calc(33.3333% - 10px);
4333     width: calc(33.3333% - 10px);
4334     border-radius: 4px;
4335     max-height: 200px;
4336     margin: 10px 5px 15px 20px;
4337 }
4338
4339
4340 /* Raw relation membership editor */
4341
4342 .raw-member-editor .member-list li:first-child,
4343 .raw-membership-editor .member-list li:first-child {
4344     padding-top: 10px;
4345 }
4346
4347 .raw-member-editor .member-row,
4348 .raw-membership-editor .member-row {
4349     position: relative;
4350 }
4351
4352 .raw-member-editor .member-row .member-entity-name,
4353 .raw-membership-editor .member-row .member-entity-name {
4354     font-weight: normal;
4355     padding-left: 10px;
4356 }
4357
4358 .member-incomplete .member-delete {
4359     display: none;
4360 }
4361
4362 .member-row-new .member-entity-input {
4363     border-radius: 4px 4px 0 0;
4364     border: 1px solid #cfcfcf;
4365 }
4366
4367 .add-relation {
4368     width: 40%;
4369     height: 30px;
4370     background: rgba(0,0,0,.5);
4371     border-radius: 4px;
4372     margin-top: 10px;
4373 }
4374
4375 .add-relation:hover {
4376     background: rgba(0,0,0,.8);
4377 }
4378
4379 /* hidden field to prevent user from tabbing out of the sidebar */
4380 input.key-trap {
4381     height: 0px;
4382     width: 0px;
4383     padding: 0px;
4384     border: 1px solid rgba(0,0,0,0);
4385 }
4386
4387 /* Fullscreen button */
4388 div.full-screen {
4389     float: right;
4390     width: 40px;
4391     margin-right: 10px;
4392 }
4393
4394 div.full-screen .tooltip {
4395     min-width: 160px;
4396 }
4397
4398 div.full-screen > button, div.full-screen > button.active {
4399     width: 40px;
4400     height: 40px;
4401     background: transparent;
4402 }
4403
4404 div.full-screen > button:hover {
4405     background-color: rgba(0, 0, 0, .8);
4406 }
4407
4408 /* Map Controls */
4409
4410 .map-controls {
4411     right: 0;
4412     top: 70px;
4413     width: 40px;
4414     position: fixed;
4415     z-index: 100;
4416 }
4417 [dir='rtl'] .map-controls {
4418     left: 0;
4419     right: auto;
4420 }
4421
4422 .map-control > button {
4423     width: 40px;
4424     background: rgba(0,0,0,.5);
4425     border-radius: 0;
4426 }
4427
4428 .map-control > button:hover {
4429     background: rgba(0, 0, 0, .8);
4430 }
4431
4432 .map-control > button.active,
4433 .map-control > button.active:hover {
4434     background: #7092ff;
4435 }
4436
4437 /* Zoomer */
4438
4439 .zoombuttons button.zoom-in {
4440     border-radius: 4px 0 0 0;
4441 }
4442 [dir='rtl'] .zoombuttons button.zoom-in {
4443     border-radius: 0 4px 0 0;
4444 }
4445
4446 /* Background / Map Data Settings */
4447
4448 .map-data-control button {
4449     border-radius: 0;
4450 }
4451
4452 .background-control button {
4453     border-radius: 4px 0 0 0;
4454 }
4455 [dir='rtl'] .background-control button {
4456     border-radius: 0 4px 0 0;
4457 }
4458
4459 .map-data-control,
4460 .background-control {
4461     position: relative;
4462 }
4463
4464 .imagery-faq {
4465     margin-bottom: 10px;
4466 }
4467
4468 .map-data-control .hide-toggle,
4469 .background-control .hide-toggle {
4470     padding-bottom: 10px;
4471 }
4472
4473 .layer-list, .controls-list {
4474     margin-bottom: 10px;
4475     border: 1px solid #CCC;
4476     border-radius: 4px;
4477 }
4478
4479 .layer-list li {
4480     position: relative;
4481     height: 30px;
4482     background-color: white;
4483     color: #7092FF;
4484 }
4485
4486 .layer-list:empty {
4487     display: none;
4488 }
4489
4490 .layer-list > li:first-child {
4491     border-radius: 3px 3px 0 0;
4492 }
4493
4494 .layer-list > li:last-child {
4495     border-radius: 0 0 3px 3px;
4496 }
4497
4498 .layer-list > li:only-child {
4499     border-radius: 3px;
4500 }
4501
4502 .layer-list li:not(:last-child) {
4503     border-bottom: 1px solid #ccc;
4504 }
4505
4506 .layer-list li:hover {
4507     background-color: #ececec;
4508 }
4509
4510 .layer-list li.active,
4511 .layer-list li.switch {
4512     background: #E8EBFF;
4513 }
4514
4515 .layer-list li.best > div.best {
4516     display: inline-block;
4517     padding: 5px;
4518     float: right;
4519 }
4520
4521 [dir='rtl'] .list-item-gpx-browse svg {
4522     transform: rotateY(180deg);
4523 }
4524
4525 /* make sure tooltip fits in map-control panel */
4526 /* if too wide, placement will be wrong the first time it displays */
4527 .layer-list li.best .tooltip-inner {
4528     max-width: 160px;
4529 }
4530
4531 .layer-list label {
4532     display: block;
4533     padding: 5px 10px;
4534     cursor: pointer;
4535 }
4536
4537 .layer-list label > span {
4538     display: block;
4539     overflow: hidden;
4540     white-space: nowrap;
4541     text-overflow: ellipsis;
4542 }
4543
4544 .minimap-toggle {
4545     display: block;
4546     padding: 5px 10px;
4547     cursor: pointer;
4548     color: #7092FF;
4549     border-radius: 3px;
4550 }
4551
4552 .minimap-toggle.active {
4553     background: #E8EBFF;
4554 }
4555
4556 .minimap-toggle:hover {
4557     background-color: #ececec;
4558 }
4559
4560 .hide-toggle {
4561     display: block;
4562     padding-left: 12px;
4563     position: relative;
4564 }
4565 [dir='rtl'] .hide-toggle {
4566     padding-left: 0;
4567     padding-right: 12px;
4568 }
4569
4570 .hide-toggle:before {
4571     content: '';
4572     display: block;
4573     position: absolute;
4574     height: 0;
4575     width: 0;
4576     left: 0;
4577     top: 5px;
4578     border-top:  4px solid transparent;
4579     border-bottom:  4px solid transparent;
4580     border-left:  8px solid #7092ff;
4581 }
4582 [dir='rtl'] .hide-toggle:before {
4583     left: auto;
4584     right: 0;
4585     border-left: none;
4586     border-right: 8px solid #7092ff;
4587 }
4588
4589 .hide-toggle.expanded:before {
4590     border-top:  8px solid #7092ff;
4591     border-bottom: 0;
4592     border-right:  4px solid transparent;
4593     border-left:  4px solid transparent;
4594 }
4595 [dir='rtl'] .hide-toggle.expanded:before {
4596     border-left: 4px solid transparent;
4597     border-right: 4px solid transparent;
4598 }
4599
4600
4601 /* Adjust Alignment controls */
4602
4603 .background-control .nudge-container {
4604     border: 1px solid #ccc;
4605     border-radius: 4px;
4606     padding: 10px;
4607 }
4608
4609 .nudge-container .nudge-instructions {
4610     padding-bottom: 15px;
4611 }
4612
4613 .nudge-container .nudge-outer-rect {
4614     background-color: #eee;
4615     border: 1px solid #ccc;
4616     border-radius: 2px;
4617     padding: 20px 0;
4618     width: 70%;
4619     display: flex;
4620     justify-content: center;
4621     align-items: center;
4622     margin: 0 auto;
4623     margin-top: 20px;
4624     cursor: move;
4625 }
4626
4627 .nudge-container .nudge-inner-rect {
4628     background-color: #fff;
4629     border: 1px solid #ccc;
4630     border-radius: 2px;
4631     width: 65%;
4632     min-height: 20px;
4633 }
4634
4635 .nudge-container .nudge::after {
4636     content: '';
4637     display: block;
4638     position: absolute;
4639     margin: auto;
4640     left: 0; right: 0; top: 0; bottom: 0;
4641     height: 0;
4642     width: 0;
4643 }
4644
4645 .nudge-container input {
4646     width: 100%;
4647     height: 20px;
4648     text-align: center;
4649     border: 0;
4650 }
4651
4652 .nudge-container input.error {
4653     border: 1px solid #FF7878;
4654     border-radius: 2px;
4655     background: #ffb;
4656 }
4657
4658 .nudge-container input:focus {
4659     background-color: transparent;
4660 }
4661
4662 .nudge-container button {
4663     float: left;
4664     display: block;
4665     width: 20%;
4666     position: relative;
4667     background-color: transparent;
4668 }
4669
4670 .nudge-container button.right {
4671     top: -50px;
4672     right: -85%;
4673 }
4674
4675 .nudge-container button.left {
4676     top: -50px;
4677     right: 45%;
4678 }
4679
4680 .nudge-container button.top {
4681     left: 20%;
4682     top: -104px;
4683 }
4684
4685 .nudge-container button.bottom {
4686     left: -20%;
4687 }
4688
4689 .nudge-container button.nudge-reset {
4690     right: -10px;
4691 }
4692
4693 .nudge-surface {
4694    position: absolute;
4695    z-index: 5000;
4696    left: 0;
4697    top: 0;
4698    width: 100%;
4699    height: 100%;
4700    background-color: transparent;
4701    cursor: move;
4702 }
4703
4704 .background-control .nudge.right::after {
4705     border-top:  5px solid transparent;
4706     border-bottom:  5px solid transparent;
4707     border-left:  5px solid #222;
4708 }
4709
4710 .background-control .nudge.left::after {
4711     border-top:  5px solid transparent;
4712     border-bottom:  5px solid transparent;
4713     border-right:  5px solid #222;
4714 }
4715
4716 .background-control .nudge.top::after {
4717     border-right:  5px solid transparent;
4718     border-left:  5px solid transparent;
4719     border-bottom:  5px solid #222;
4720 }
4721
4722 .background-control .nudge.bottom::after {
4723     border-right:  5px solid transparent;
4724     border-left:  5px solid transparent;
4725     border-top:  5px solid #222;
4726 }
4727
4728 .opacity-options {
4729     background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
4730     height: 20px;
4731     width: 82px;
4732     position: absolute;
4733     right: 50px;
4734     top: 20px;
4735     border: 1px solid #ccc;
4736 }
4737 [dir='rtl'] .opacity-options {
4738     left: 50px;
4739     right: auto;
4740 }
4741
4742 .opacity-options li {
4743     height: 100%;
4744     display: block;
4745     float: left;
4746 }
4747
4748 .opacity-options li .select-box{
4749     position: absolute;
4750     width: 20px;
4751     height: 18px;
4752     z-index: 9999;
4753 }
4754
4755 .map-data-control li:hover .select-box,
4756 .map-data-control li.selected .select-box,
4757 .background-control li:hover .select-box,
4758 .background-control li.selected .select-box {
4759     border: 2px solid #7092ff;
4760     background: rgba(89, 123, 231, .5);
4761     opacity: .5;
4762 }
4763
4764 .map-data-control li.selected:hover .select-box,
4765 .map-data-control li.selected .select-box,
4766 .background-control li.selected:hover .select-box,
4767 .background-control li.selected .select-box {
4768     opacity: 1;
4769 }
4770
4771 .background-control .opacity {
4772     background:#222;
4773     display:inline-block;
4774     width:20px;
4775     height:18px;
4776 }
4777
4778 .map-data-control .layer-list button,
4779 .background-control .layer-list button {
4780     float: right;
4781     height: 100%;
4782     width: 10%;
4783     border-left: 1px solid #CCC;
4784     border-radius: 0;
4785 }
4786 [dir='rtl'] .map-data-control .layer-list button,
4787 [dir='rtl'] .background-control .layer-list button {
4788     float: left;
4789     border-left: none;
4790     border-right: 1px solid #CCC;
4791 }
4792
4793 .map-data-control .layer-list button .icon,
4794 .background-control .layer-list button .icon {
4795     opacity: 0.5;
4796 }
4797
4798 .map-data-control .layer-list button:first-of-type,
4799 .background-control .layer-list button:first-of-type {
4800     border-radius: 0 3px 3px 0;
4801 }
4802 [dir='rtl'] .map-data-control .layer-list button:first-of-type,
4803 [dir='rtl'] .background-control .layer-list button:first-of-type {
4804     border-radius: 3px 0 0 3px;
4805 }
4806
4807 .map-data-control .map-overlay,
4808 .background-control .map-overlay,
4809 .help-control .map-overlay {
4810     z-index: -1;
4811 }
4812
4813 /* Geolocator */
4814
4815 .geolocate-control {
4816     margin-bottom: 10px;
4817 }
4818
4819 .geolocate-control button {
4820     border-radius: 0 0 0 4px;
4821 }
4822 [dir='rtl'] .geolocate-control button {
4823   border-radius: 0 0 4px 0;
4824 }
4825
4826 .map-overlay.content {
4827     position: fixed;
4828     top:60px;
4829     bottom: 30px;
4830     padding: 20px 50px 20px 20px;
4831     right: 0;
4832     overflow: auto;
4833 }
4834 [dir='rtl'] .map-overlay.content {
4835     padding: 20px 20px 20px 50px;
4836     left: 0;
4837     right: auto !important;
4838 }
4839
4840 /* Help */
4841
4842 .help-control button {
4843     border-radius: 0 0 0 4px;
4844 }
4845 [dir='rtl'] .help-control button {
4846   border-radius: 0 0 4px 0;
4847 }
4848
4849 .help-wrap p {
4850     font-size: 15px;
4851     margin-bottom: 20px;
4852 }
4853
4854 .help-wrap .left-content .body p code {
4855     padding:2px 4px;
4856     background:#eee;
4857 }
4858
4859 .help-wrap .toc {
4860     /* This is two columns, 41.66666 x .4 = 16.6666 */
4861     width:40%;
4862     float:right;
4863     margin-left: 20px;
4864     margin-bottom: 20px;
4865     padding-left: 5px;
4866 }
4867
4868 .help-wrap .toc li a,
4869 .help-wrap .nav a {
4870     display: block;
4871     border: 1px solid #CCC;
4872     padding: 5px 10px;
4873 }
4874
4875 .help-wrap .toc li a {
4876     border-bottom: 0;
4877 }
4878
4879 .help-wrap .toc li a:hover,
4880 .help-wrap .nav a:hover  {
4881     background: #ececec;
4882 }
4883
4884 .help-wrap .toc li a.selected {
4885     background: #E8EBFF;
4886 }
4887
4888 .help-wrap .toc li:first-child a {
4889     border-radius: 4px 4px 0 0;
4890 }
4891
4892 .help-wrap .toc li:nth-last-child(3) a {
4893     border-bottom: 1px solid #CCC;
4894     border-radius: 0 0 4px 4px
4895 }
4896
4897 .help-wrap .toc li.shortcuts a,
4898 .help-wrap .toc li.walkthrough a {
4899     overflow: hidden;
4900     margin-top: 10px;
4901     border-bottom: 1px solid #ccc;
4902     border-radius: 4px;
4903 }
4904
4905 .help-wrap .toc li.walkthrough a {
4906     text-align: center;
4907 }
4908
4909 .help-wrap .nav {
4910     position: relative;
4911 }
4912
4913 .help-wrap .nav a {
4914     float: left;
4915     width: 50%;
4916     text-align: center;
4917 }
4918
4919 .help-wrap .nav a:first-child {
4920     border-radius: 4px 0 0 4px;
4921 }
4922
4923 .help-wrap .nav a:last-child:not(:only-child) {
4924     border-radius: 0 4px 4px 0;
4925     border-left: 0;
4926 }
4927
4928 .help-wrap .nav a:only-child {
4929     width: 100%;
4930     border-radius: 4px;
4931 }
4932
4933
4934 /* Tiles
4935 ------------------------------------------------------- */
4936
4937 img.tile {
4938     position:absolute;
4939     transform-origin:0 0;
4940     -ms-transform-origin:0 0;
4941     -webkit-transform-origin:0 0;
4942     -moz-transform-origin:0 0;
4943     -o-transform-origin:0 0;
4944
4945     -moz-user-select: none;
4946     -webkit-user-select: none;
4947     -ms-user-select: none;
4948     user-select: none;
4949
4950     opacity: 0;
4951
4952     -webkit-transition: opacity 200ms linear;
4953     transition: opacity 200ms linear;
4954     -moz-transition: opacity 200ms linear;
4955 }
4956
4957 .tile-label-debug {
4958     font-size: 10px;
4959     background: rgba(0, 0, 0, 0.7);
4960     color: #fff;
4961     position: absolute;
4962     text-align: center;
4963     padding: 5px;
4964     border-radius: 3px;
4965     z-index: 2;
4966     margin-left: -50px;
4967     margin-top: -20px;
4968
4969     transform-origin:0 0;
4970     -ms-transform-origin:0 0;
4971     -webkit-transform-origin:0 0;
4972     -moz-transform-origin:0 0;
4973     -o-transform-origin:0 0;
4974
4975     -moz-user-select: none;
4976     -webkit-user-select: none;
4977     -ms-user-select: none;
4978     user-select: none;
4979 }
4980
4981 img.tile-debug {
4982     outline: 1px solid red;
4983 }
4984
4985 img.tile-loaded {
4986     opacity: 1;
4987 }
4988
4989 img.tile-removing {
4990     opacity: 0;
4991 }
4992
4993
4994 /* Map
4995 ------------------------------------------------------- */
4996
4997 #map {
4998     position:relative;
4999     overflow:hidden;
5000     height:100%;
5001     background:#000;
5002     -moz-user-select: none;
5003     -webkit-user-select: none;
5004     -ms-user-select: none;
5005     user-select: none;
5006 }
5007
5008 #supersurface {
5009     transform-origin:0 0;
5010     -ms-transform-origin:0 0;
5011     -webkit-transform-origin:0 0;
5012     -moz-transform-origin:0 0;
5013     -o-transform-origin:0 0;
5014 }
5015
5016 #supersurface, .layer {
5017     position: absolute;
5018     top: 0;
5019     left: 0;
5020     right: 0;
5021     bottom: 0;
5022 }
5023
5024 /* Map-In-Map
5025 ------------------------------------------------------- */
5026 .map-in-map {
5027     position: absolute;
5028     overflow: hidden;
5029     top: 60px;
5030     width: 200px;
5031     height: 150px;
5032     z-index: 5;
5033     background: #000;
5034     border: #aaa 1px solid;
5035     box-shadow: 0 0 2em black;
5036 }
5037
5038 .map-in-map-tiles {
5039     transform-origin:0 0;
5040     -ms-transform-origin:0 0;
5041     -webkit-transform-origin:0 0;
5042     -moz-transform-origin:0 0;
5043     -o-transform-origin:0 0;
5044
5045     -moz-user-select: none;
5046     -webkit-user-select: none;
5047     -ms-user-select: none;
5048     user-select: none;
5049 }
5050
5051 .map-in-map-viewport,
5052 .map-in-map-data {
5053     top: 0;
5054     left: 0;
5055     overflow: hidden;
5056     height: 100%;
5057     width: 100%;
5058 }
5059
5060 .map-in-map-viewport {
5061     position: absolute;
5062 }
5063
5064 .map-in-map-data {
5065     position: relative;
5066     z-index: 10;
5067 }
5068
5069 .map-in-map-bbox {
5070     fill: none;
5071     stroke: rgba(255, 255, 0, 0.75);
5072     stroke-width: 1;
5073     shape-rendering: crispEdges;
5074 }
5075
5076 .map-in-map-bbox.thick {
5077     stroke-width: 5;
5078 }
5079
5080
5081 /* Debug
5082 ------------------------------------------------------- */
5083 .debug {
5084     stroke: currentColor;
5085     fill: none;
5086     stroke-width: 2;
5087 }
5088 .map-in-map-data .debug {
5089     stroke-width: 1;
5090 }
5091
5092 .red     { color: rgba(255, 0, 0, 0.75); }
5093 .green   { color: rgba(0, 255, 0, 0.75); }
5094 .blue    { color: rgba(0, 0, 255, 0.75); }
5095 .yellow  { color: rgba(255, 255, 0, 0.75); }
5096 .cyan    { color: rgba(0, 255, 255, 0.75); }
5097 .magenta { color: rgba(255, 0, 255, 0.75); }
5098 .orange  { color: rgba(255, 153, 0, 0.75); }
5099 .pink    { color: rgba(255, 0, 153, 0.75); }
5100 .purple  { color: rgba(153, 0, 255, 0.75); }
5101
5102 .debug-legend {
5103     position: absolute;
5104     top: 70px;
5105     right: 80px;
5106     padding: 5px;
5107     border-radius: 4px;
5108     pointer-events: none;
5109 }
5110
5111 .debug-legend-item {
5112     padding-right: 5px;
5113 }
5114 .debug-legend-item:before {
5115     content: "\25A0";
5116     padding: 0 5px;
5117 }
5118
5119 /* Info Box
5120 ------------------------------------------------------- */
5121 .info-panels {
5122     display: flex;
5123     flex-flow: row-reverse wrap-reverse;
5124     position: absolute;
5125     z-index: 1;
5126     right: 0;
5127     bottom: 30px;
5128     -ms-user-select: element;
5129 }
5130
5131 .info-panels h1,
5132 .info-panels h2,
5133 .info-panels h3,
5134 .info-panels h4,
5135 .info-panels h5 {
5136     display: inline-block;
5137     margin-bottom: 0;
5138 }
5139
5140 .info-panels h1,
5141 .info-panels h2,
5142 .info-panels h3 {
5143     color: #ff8;
5144 }
5145
5146 .panel-container {
5147     flex: 0 0 auto;
5148     margin: 2px 0 0 2px;
5149     border-radius: 4px;
5150     border: 1px solid rgba(0, 0, 0, 0.75);
5151     padding-bottom: 10px;
5152     width: 250px;
5153 }
5154
5155 .panel-container .panel-title {
5156     border-radius: 4px 4px 0 0;
5157 }
5158
5159 .panel-title {
5160     padding: 5px 10px;
5161 }
5162
5163 .panel-title button.close {
5164     float: right;
5165     height: 20px;
5166     background: none;
5167     color: #ddd;
5168 }
5169 [dir='rtl'] .panel-title button.close {
5170     float: left;
5171 }
5172
5173 .panel-title button.close:hover {
5174     color: #fff;
5175 }
5176
5177 .panel-title button.close .icon {
5178     height: 20px;
5179     width: 16px;
5180 }
5181
5182 .panel-content {
5183     padding: 5px 10px;
5184     position: relative;
5185 }
5186
5187 .panel-content .button {
5188     display: inline-block;
5189     background: #7092ff;
5190     border-radius: 2px;
5191     padding: 0 4px;
5192     margin-top: 10px;
5193     margin-right: 10px;
5194     color: white;
5195 }
5196 [dir='rtl'] .panel-content .button {
5197     margin-right: auto;
5198     margin-left: 10px;
5199 }
5200
5201 .panel-content-history .links a {
5202     margin-left: 10px;
5203 }
5204 [dir='rtl'] .panel-content-history .links a {
5205     margin-left: auto;
5206     margin-right: 10px;
5207 }
5208
5209 .panel-content-history .view-history-on-osm {
5210     display: block;
5211     margin-top: 10px;
5212 }
5213
5214 .panel-content-location .location-info {
5215     margin-top: 10px;
5216 }
5217
5218
5219 /* About Section
5220 ------------------------------------------------------- */
5221
5222 #about {
5223     width: 100%;
5224     position: absolute;
5225     right:0;
5226     bottom:0;
5227     border-radius: 0;
5228     pointer-events: none;
5229     display: flex;
5230     flex-direction: column;
5231     -ms-user-select: element;
5232 }
5233
5234 #attrib {
5235     width: 100%;
5236     height: 20px;
5237     margin-bottom: 5px;
5238 }
5239
5240 #attrib * { pointer-events: all; }
5241
5242 .base-layer-attribution,
5243 .overlay-layer-attribution {
5244     position: absolute;
5245     color: #ccc;
5246     font-size: 10px;
5247 }
5248
5249 .base-layer-attribution {
5250     left: 10px;
5251 }
5252
5253 .overlay-layer-attribution {
5254     right: 10px;
5255 }
5256
5257 .overlay-layer-attribution .attribution:not(:last-child):after {
5258     content: '; ';
5259 }
5260
5261 .attribution a,
5262 .attribution a:visited {
5263     color: #ccf;
5264 }
5265
5266 .attribution a:hover {
5267     color: #aaf;
5268 }
5269
5270 .attribution .source-image {
5271     height: 20px;
5272     vertical-align: middle;
5273     border-radius: 3px;
5274 }
5275
5276 .attribution span {
5277     margin: 0 3px;
5278 }
5279
5280
5281 #footer {
5282     pointer-events: all;
5283     display: block;
5284     height: 30px;
5285 }
5286
5287
5288 #flash-wrap {
5289     display: flex;
5290     flex: 0 0 100%;
5291     flex-flow: row nowrap;
5292     justify-content: space-between;
5293     max-height: 30px;
5294     position: absolute;
5295     right: 0;
5296     left: 0;
5297 }
5298
5299 #flash-wrap .content {
5300     display: flex;
5301     flex: 1 0 auto;
5302     flex-flow: row nowrap;
5303     align-items: center;
5304     padding: 2px;
5305     height: 30px;
5306 }
5307
5308
5309 #flash-wrap svg.operation-icon {
5310     flex: 0 0 auto;
5311     width: 20px;
5312     height: 20px;
5313     margin: 0 8px;
5314 }
5315
5316 #flash-wrap div.operation-tip {
5317     flex: 1 1 auto;
5318 }
5319
5320 #footer-wrap {
5321     display: flex;
5322     flex: 0 0 100%;
5323     flex-flow: row nowrap;
5324     justify-content: space-between;
5325     max-height: 30px;
5326     position: absolute;
5327     right: 0;
5328     left: 0;
5329 }
5330
5331 .footer-show {
5332     bottom: 0px;
5333     transition: bottom 75ms linear;
5334     -moz-transition: bottom 75ms linear;
5335     -webkit-transition: bottom 75ms linear;
5336 }
5337
5338 .footer-hide {
5339     bottom: -35px;
5340     transition: bottom 75ms linear;
5341     -moz-transition: bottom 75ms linear;
5342     -webkit-transition: bottom 75ms linear;
5343 }
5344
5345
5346 #scale-block {
5347     vertical-align: bottom;
5348     width: 250px;
5349     max-height: 30px;
5350     flex: 0 0 250px;
5351     -moz-user-select: none;
5352     -webkit-user-select: none;
5353     -ms-user-select: none;
5354     user-select: none;
5355 }
5356
5357 #info-block {
5358     max-height: 30px;
5359     flex: 1 1 auto;
5360 }
5361
5362 #scale {
5363     height: 30px;
5364     width: 100%;
5365 }
5366 [dir='rtl'] #scale {
5367     transform: scaleX(-1);
5368 }
5369
5370 #scale:hover {
5371     cursor: pointer;
5372 }
5373
5374 #scale text {
5375     font: 12px sans-serif;
5376     stroke: none;
5377     fill: #ccc;
5378     text-anchor: start;
5379 }
5380 [dir='rtl'] #scale text {
5381     transform: scaleX(-1);
5382 }
5383
5384 #scale path {
5385     fill: none;
5386     stroke: #ccc;
5387     stroke-width: 1;
5388     shape-rendering: crispEdges;
5389 }
5390
5391
5392 #about-list {
5393     text-align: right;
5394     margin-right: 10px;
5395     clear: right;
5396     overflow: hidden;
5397 }
5398 [dir='rtl'] #about-list {
5399     text-align: left;
5400     clear: left;
5401     margin-left: 10px;
5402     margin-right: 0;
5403 }
5404
5405 #about-list li {
5406     float: right;
5407     border-left: 1px solid rgba(255,255,255,.5);
5408     padding: 5px 0 5px 5px;
5409     margin-left: 5px;
5410 }
5411 [dir='rtl'] #about-list li {
5412     float: left;
5413     border-left: none;
5414     border-right: 1px solid rgba(255,255,255,.5);
5415     margin-left: 0;
5416     margin-right: 5px;
5417     padding: 5px 5px 5px 0;
5418 }
5419
5420
5421 #about-list li:last-child {
5422     border-left: 0;
5423     margin-left: 0;
5424     padding-left: 0;
5425 }
5426 [dir='rtl'] #about-list li:last-child {
5427     border-right: none;
5428 }
5429
5430 .source-switch a {
5431     padding: 2px 4px 4px 4px;
5432     border-radius: 2px;
5433 }
5434 .source-switch a.live {
5435     background: #d32232;
5436     color:#fff;
5437 }
5438
5439 .feature-warning a {
5440     background: #1e90ff;
5441     padding: 2px 4px 4px 4px;
5442     border-radius: 2px;
5443     color: #eee;
5444 }
5445
5446 .user-list a:not(:last-child):after {
5447     content: ', ';
5448 }
5449
5450 .api-status {
5451     text-align: right;
5452     padding: 0px 10px;
5453     color: #eee;
5454     flex: 1 1 auto;
5455 }
5456 [dir='rtl'] .api-status {
5457     text-align: left;
5458 }
5459
5460 .api-status.offline,
5461 .api-status.readonly,
5462 .api-status.error {
5463     background: #a22;
5464 }
5465
5466 .api-status-login {
5467     color: #aaf;
5468 }
5469 .api-status-login:hover {
5470     color: #ccf;
5471 }
5472
5473 .badge {
5474     display: inline-block;
5475     background: #d32232;
5476     width: 21px;
5477     height: 20px;
5478     border-radius: 11px;
5479     margin-left: 6px;
5480 }
5481 [dir='rtl'] .badge {
5482     margin-left: 0;
5483     margin-right: 6px;
5484 }
5485 .badge a {
5486     margin-right: 5px;
5487 }
5488 [dir='rtl'] .badge a {
5489     margin-right: 0;
5490     margin-left: 5px;
5491 }
5492 .badge .icon {
5493     vertical-align: baseline;
5494     width: 11px;
5495     height: 11px;
5496     fill: white;
5497 }
5498
5499
5500 /* Modals
5501 ------------------------------------------------------- */
5502
5503 .modal {
5504     top: 40px;
5505     display: inline-block;
5506     position:absolute;
5507     border-radius: 3px;
5508     overflow: hidden;
5509     left: 0;
5510     right: 0;
5511     margin: auto;
5512     z-index: 50;
5513 }
5514
5515 .modal .loader {
5516     margin-bottom: 10px;
5517 }
5518
5519 .modal .description {
5520     text-align: center;
5521 }
5522
5523 .shaded {
5524     z-index: 49;
5525     position: absolute;
5526     top: 0;
5527     bottom: 0;
5528     left: 0;
5529     right: 0;
5530     overflow: auto;
5531 }
5532
5533 .shaded:before {
5534     content:'';
5535     background:rgba(0,0,0,0.5);
5536     position:fixed;
5537     left:0px; right:0px; top:0px; bottom:0px;
5538 }
5539
5540 .modal-section {
5541     padding: 20px;
5542     border-bottom: 1px solid #CCC;
5543 }
5544
5545 .modal-section.header h3 {
5546     padding: 0;
5547 }
5548
5549 .modal-section.buttons {
5550     text-align: center;
5551 }
5552
5553 .modal-section.buttons .action {
5554     display: inline-block;
5555     margin: 0 10px;
5556     text-align: center;
5557     vertical-align: middle;
5558 }
5559
5560 .save-section .buttons .action,
5561 .save-section .buttons .secondary-action {
5562     display: inline-block;
5563     margin: 0 20px 0 0;
5564     text-align: center;
5565     vertical-align: middle;
5566 }
5567
5568 .loading-modal {
5569     text-align: center;
5570 }
5571
5572 .modal-actions button,
5573 .save-success a.button {
5574     font-weight: normal;
5575     color: #7092FF;
5576     border-bottom: 1px solid #CCC;
5577     border-radius: 0;
5578     height: 160px;
5579     text-align: center;
5580     display: inline-block;
5581 }
5582
5583 .modal-actions button:hover
5584 .save-success a.button:hover {
5585     background-color: #ececec;
5586 }
5587
5588 .logo {
5589     height: 100px;
5590     width: 100%;
5591     max-width: 100px;
5592     margin: auto;
5593 }
5594
5595 .modal-actions > :first-child {
5596     border-right: 1px solid #CCC;
5597 }
5598
5599 .modal-section:last-child {
5600     border-bottom: 0;
5601 }
5602
5603 /* Restore Modal
5604 ------------------------------------------------------- */
5605 .modal-actions .logo-restore {
5606     color: #7092FF;
5607 }
5608 .modal-actions .logo-reset {
5609     color: #E06C5E;
5610 }
5611
5612 /* Success Modal
5613 ------------------------------------------------------- */
5614 .save-success p {
5615     padding: 15px 15px 0 15px;
5616 }
5617 .save-success a.details {
5618     padding-left: 15px;
5619 }
5620 .save-success .button {
5621     padding-top: 15px;
5622 }
5623 .save-success .logo-osm {
5624     color: #7092FF;
5625     margin-bottom: 10px;
5626 }
5627 .save-success a.button.social {
5628     height: auto;
5629     border-bottom: none;
5630 }
5631 .save-success .icon.social {
5632     height: 80px;
5633     width: 80px;
5634     color: #7092FF;
5635 }
5636
5637 /* Splash Modal
5638 ------------------------------------------------------- */
5639 .modal-actions .logo-walkthrough,
5640 .modal-actions .logo-features {
5641     color: #7092FF;
5642 }
5643
5644
5645 /* Shortcuts Modal
5646 ------------------------------------------------------- */
5647 .modal-shortcuts {
5648     width: 90%;
5649     max-width: 950px;
5650 }
5651
5652 .modal-shortcuts .modal-section:last-child {
5653     padding-top: 10px;
5654     min-height: 275px;
5655 }
5656
5657 .modal-shortcuts .tabs-bar {
5658     text-align: center;
5659     padding-bottom: 5px;
5660     font-size: 16px;
5661     font-weight: bold;
5662 }
5663
5664 .modal-shortcuts .tab {
5665     display: inline-block;
5666     padding: 5px 10px;
5667     margin: 0 5px;
5668     cursor: pointer;
5669     color: #666;
5670 }
5671 .modal-shortcuts .tab.active {
5672     color: #7092ff;
5673 }
5674 .modal-shortcuts .tab:hover {
5675     color: #597be7;
5676     background-color: #efefef;
5677 }
5678
5679 .modal-shortcuts .shortcut-tab {
5680     display: flex;
5681     flex-flow: row wrap;
5682 }
5683
5684 .modal-shortcuts .shortcut-column {
5685     flex: 1 1 50%;
5686     width: 50%;
5687 }
5688
5689 .modal-shortcuts .shortcut-tab-tools .shortcut-column {
5690     flex: 1 1 100%;
5691     width: 100%;
5692 }
5693
5694 .modal-shortcuts td {
5695     padding-bottom: 5px;
5696 }
5697
5698 .modal-shortcuts .shortcut-section {
5699     padding: 20px 0 10px 0;
5700 }
5701
5702 .modal-shortcuts .shortcut-keys {
5703     padding-right: 10px;
5704     color: #767676;
5705     text-align: right;
5706 }
5707 [dir='rtl'] .modal-shortcuts .shortcut-keys {
5708     padding-right: auto;
5709     padding-left: 10px;
5710     text-align: left;
5711 }
5712
5713 .modal-shortcuts .shortcut-keys kbd {
5714     display: inline-block;
5715     text-align: center;
5716     padding: 3px 5px;
5717     font-size: 11px;
5718     line-height: 12px;
5719     min-width: 12px;
5720     color: #555;
5721     vertical-align: baseline;
5722     background-color: #fcfcfc;
5723     border: solid 1px #ccc;
5724     margin: 0 2px;
5725     border-bottom-color: #bbb;
5726     border-radius: 3px;
5727     box-shadow: inset 0 -1px 0 #bbb;
5728 }
5729
5730 .modal-shortcuts .shortcut-keys svg.mouseclick use.left {
5731     fill: rgba(112, 146, 255, 1);
5732     color: rgba(112, 146, 255, 0);
5733 }
5734 .modal-shortcuts .shortcut-keys svg.mouseclick use.right {
5735     fill: rgba(112, 146, 255, 0);
5736     color: rgba(112, 146, 255, 1);
5737 }
5738
5739 .modal-shortcuts .shortcut-keys .gesture {
5740     color: #333;
5741     padding: 3px;
5742 }
5743
5744
5745
5746 /* Save Mode
5747 ------------------------------------------------------- */
5748 .mode-save a.user-info {
5749     display: inline-block;
5750 }
5751
5752 .mode-save .commit-form {
5753     margin-bottom: 0;
5754 }
5755
5756 .mode-save .user-info img {
5757     float: left;
5758 }
5759
5760 .mode-save h3 small.count {
5761     margin-right: 10px;
5762     text-align: center;
5763     float: left;
5764     height: 12px;
5765     min-width: 12px;
5766     font-size: 12px;
5767     line-height: 12px;
5768     border-radius: 24px;
5769     padding: 5px;
5770     background: #7092ff;
5771     color: #fff;
5772 }
5773
5774 .mode-save .field-warning {
5775     background: #ffb;
5776     border: 1px solid #ccc;
5777     border-radius: 4px;
5778     padding: 10px;
5779 }
5780
5781 .mode-save .field-warning:empty {
5782     display: none;
5783 }
5784
5785 .mode-save .field-warning,
5786 .mode-save .changeset-info,
5787 .mode-save .request-review,
5788 .mode-save .commit-info {
5789     margin-bottom: 10px;
5790 }
5791
5792 .mode-save .request-review label {
5793     cursor: pointer;
5794 }
5795
5796 .mode-save .changeset-list {
5797     border: 1px solid #ccc;
5798     border-radius: 4px;
5799     background: #fff;
5800     margin-bottom: 10px;
5801 }
5802
5803 .mode-save .warning-section {
5804     background: #ffb;
5805 }
5806
5807 .mode-save .warning-section .changeset-list button {
5808     border-left: 1px solid #ccc;
5809 }
5810
5811 .mode-save .changeset-list li {
5812     position: relative;
5813     border-top: 1px solid #ccc;
5814     padding: 5px 10px;
5815     cursor: pointer;
5816 }
5817
5818 .mode-save .changeset-list li:hover {
5819     background-color: #ececec;
5820 }
5821
5822 .mode-save .changeset-list .alert {
5823     opacity: 0.5;
5824 }
5825
5826 .changeset-list li span.count {
5827     font-size: 10px;
5828     color: #555;
5829 }
5830
5831 .mode-save .commit-section .changeset-list button {
5832     border-left: 1px solid #CCC;
5833 }
5834
5835 .changeset-list li span.count:before { content: '('; }
5836
5837 .changeset-list li span.count:after { content: ')'; }
5838
5839 .changeset-list li:first-child { border-top: 0;}
5840
5841 /* Conflict resolution
5842 ------------------------------------------------------- */
5843
5844 .conflicts-help {
5845     padding: 20px;
5846     background-color: #ffffbb;
5847     border-bottom: 1px solid #ccc;
5848 }
5849
5850 .conflicts-buttons {
5851     padding: 20px;
5852 }
5853
5854 .mode-save button.conflicts-button {
5855     float: left;
5856 }
5857
5858 .conflict-container {
5859     border-bottom: 1px solid #ccc;
5860 }
5861
5862 .conflict-description {
5863     padding: 5px 20px;
5864     display: block;
5865 }
5866
5867 .conflicts-done {
5868     padding: 20px 20px 0 20px;
5869 }
5870
5871 .conflict-detail-container {
5872     padding: 10px 20px;
5873 }
5874
5875 .conflict-count {
5876     padding: 10px 20px;
5877 }
5878
5879 .conflict-choices {
5880     margin-top: 10px;
5881 }
5882
5883 .conflict-nav-buttons {
5884     padding: 10px 0 20px 0;
5885 }
5886
5887 .conflict-nav-button {
5888     height: 30px;
5889 }
5890
5891 /* Notices
5892 ------------------------------------------------------- */
5893
5894 .notice {
5895     position: absolute;
5896     top: 45px;
5897     left: 0;
5898     right: 0;
5899     text-align: center;
5900 }
5901
5902 .notice .zoom-to {
5903     margin: auto;
5904     width: 300px;
5905     height: 70px;
5906     font-size: 150%;
5907     border-radius: 8px;
5908 }
5909
5910 .notice .zoom-to:hover {
5911     background: rgba(0,0,0,0.6);
5912 }
5913
5914 .notice .zoom-to .icon {
5915     width: 30px;
5916     height: 30px;
5917     vertical-align: middle;
5918     margin-right: 10px;
5919 }
5920 [dir='rtl'] .notice .zoom-to .icon {
5921     margin-left: 10px;
5922     margin-right: 0;
5923 }
5924
5925 /* Tooltips
5926 ------------------------------------------------------- */
5927
5928 .tooltip {
5929     position: absolute;
5930     display: none;
5931     color:#333;
5932     font-size: 12px;
5933 }
5934
5935 .tooltip.in {
5936     opacity: 0.9;
5937     z-index: 1030;
5938     height: auto;
5939     display: block;
5940 }
5941
5942 .tooltip.top {
5943     margin-top: -20px;
5944     text-align: center;
5945 }
5946
5947 .tooltip.right {
5948     margin-left: 20px;
5949     text-align: left;
5950 }
5951
5952 .tooltip.bottom {
5953     margin-top: 20px;
5954     text-align: center;
5955 }
5956
5957 .tooltip.left {
5958     margin-left: -20px;
5959     text-align: right;
5960 }
5961
5962 .tooltip-inner {
5963     display: inline-block;
5964     border-radius: 3px;
5965     max-width: 200px;
5966     min-width: 80px;
5967     padding: 10px;
5968     font-weight: normal;
5969     background-color: white;
5970 }
5971
5972 .tail {
5973     width: 200px;
5974     height: 400px;
5975     pointer-events: none;
5976     opacity: .8;
5977     margin-top: -200px;
5978     position: absolute;
5979     background: transparent;
5980 }
5981
5982 .tail::after {
5983     content: "";
5984     position: absolute;
5985     width: 0;
5986     height: 0;
5987     border-color: transparent;
5988     border-style: solid;
5989     top: 50%;
5990     right: -5px;
5991     margin-top: -5px;
5992     border-left-color: white;
5993     border-width: 5px 0 5px 5px;
5994 }
5995
5996 .tail div {
5997     border-radius: 3px;
5998     padding: 10px;
5999     background: white;
6000     position: absolute;
6001     top: 180px;
6002     left: 0;
6003     right: 0;
6004     margin: auto;
6005 }
6006
6007 .left.tail::after {
6008     content: "";
6009     position: absolute;
6010     width: 0;
6011     height: 0;
6012     border-color: transparent;
6013     border-style: solid;
6014     top: 50%;
6015     left: -5px;
6016     margin-top: -5px;
6017     border-right-color: white;
6018     border-width: 5px 5px 5px 0;
6019 }
6020
6021 .tooltip-arrow {
6022     position: absolute;
6023     width: 0;
6024     height: 0;
6025     border-color: transparent;
6026     border-style: solid;
6027 }
6028
6029 .tooltip.top .tooltip-arrow {
6030     bottom: -5px;
6031     left: 50%;
6032     margin-left: -5px;
6033     border-top-color: white;
6034     border-width: 5px 5px 0;
6035 }
6036
6037 .tooltip.right .tooltip-arrow {
6038     top: 50%;
6039     left: -5px;
6040     margin-top: -5px;
6041     border-right-color: white;
6042     border-width: 5px 5px 5px 0;
6043 }
6044
6045 .tooltip.left .tooltip-arrow {
6046     top: 50%;
6047     right: -5px;
6048     margin-top: -5px;
6049     border-left-color: white;
6050     border-width: 5px 0 5px 5px;
6051 }
6052
6053 .tooltip.bottom .tooltip-arrow {
6054     top: -5px;
6055     left: 50%;
6056     margin-left: -5px;
6057     border-bottom-color: white;
6058     border-width: 0 5px 5px;
6059 }
6060
6061 .tooltip-heading {
6062     font-weight: bold;
6063     background: #F6F6F6;
6064     padding: 10px;
6065     margin: -10px -10px 10px -10px;
6066     border-radius: 3px 3px 0 0;
6067     font-size: 14px;
6068 }
6069
6070 .keyhint-wrap {
6071     background: #F6F6F6;
6072     padding: 10px;
6073     margin: 10px -10px -10px -10px;
6074     border-radius: 0 0 3px 3px;
6075 }
6076
6077 .tooltip-inner .keyhint {
6078     font-weight: bold;
6079     margin-left: 5px;
6080 }
6081
6082 /* Exceptions for tooltip layouts */
6083
6084 /* make tooltips in panels dark */
6085 .map-overlay .tooltip.top .tooltip-arrow,
6086 .entity-editor-pane .tooltip.top .tooltip-arrow,
6087 .warning-section .tooltip.top .tooltip-arrow {
6088     border-top-color: #000;
6089 }
6090
6091 .map-overlay .tooltip.bottom .tooltip-arrow,
6092 .entity-editor-pane .tooltip.bottom .tooltip-arrow,
6093 .warning-section .tooltip.bottom .tooltip-arrow {
6094     border-bottom-color: #000;
6095 }
6096
6097 .map-overlay .tooltip.left .tooltip-arrow,
6098 .entity-editor-pane .tooltip.left .tooltip-arrow,
6099 .warning-section .tooltip.left .tooltip-arrow {
6100     border-left-color: #000;
6101 }
6102
6103 .map-overlay .tooltip.right .tooltip-arrow,
6104 .entity-editor-pane .tooltip.right .tooltip-arrow,
6105 .warning-section .tooltip.right .tooltip-arrow {
6106     border-right-color: #000;
6107 }
6108
6109 .map-overlay .tooltip-inner,
6110 .map-overlay .tooltip-heading,
6111 .map-overlay .keyhint-wrap,
6112 .entity-editor-pane .tooltip-inner,
6113 .warning-section .tooltip-inner {
6114     background: #000;
6115     color: #ccc;
6116 }
6117 /* commit warning tooltips need to be closer */
6118 .warning-section .tooltip.top {
6119     margin-top: -5px;
6120 }
6121
6122 /* Uncramp map-control tooltips */
6123 .map-control .tooltip {
6124     min-width: 160px;
6125 }
6126 .map-control .shortcuts .tooltip {
6127     max-width: 160px;
6128 }
6129
6130 /* Move over tooltips that are near the edge of screen */
6131 .add-point .tooltip {
6132     left: 33.3333% !important;
6133 }
6134 [dir='rtl'] .add-point .tooltip {
6135     left: inherit !important;
6136 }
6137
6138 .add-point .tooltip .tooltip-arrow {
6139     left: 60px;
6140 }
6141 [dir='rtl'] .add-point .tooltip .tooltip-arrow {
6142     left: auto;
6143     right: 60px;
6144 }
6145
6146 li:first-of-type .badge .tooltip,
6147 li.hide + li.version .badge .tooltip {
6148     left: auto !important;
6149     right: 5px !important;
6150 }
6151 [dir='rtl'] li:first-of-type .badge .tooltip,
6152 [dir='rtl'] li.hide + li.version .badge .tooltip {
6153     left: 5px !important;
6154     right: auto !important;
6155 }
6156 li:first-of-type .badge .tooltip .tooltip-arrow,
6157 li.hide + li.version .badge .tooltip .tooltip-arrow {
6158     right: 15px !important;
6159     left: auto !important;
6160 }
6161 [dir='rtl'] li:first-of-type .badge .tooltip .tooltip-arrow,
6162 [dir='rtl'] li.hide + li.version .badge .tooltip .tooltip-arrow {
6163     left: 15px !important;
6164     right: auto !important;
6165 }
6166
6167
6168 /* radial menu (deprecated) */
6169
6170 .radial-menu-tooltip {
6171     opacity: 0.8;
6172     display: none;
6173     position: absolute;
6174     width: 200px;
6175 }
6176
6177 .radial-menu-background {
6178     fill: none;
6179     stroke: black;
6180     stroke-opacity: 0.5;
6181 }
6182
6183 .radial-menu-item circle {
6184     fill: #eee;
6185 }
6186
6187 .radial-menu-item circle:active,
6188 .radial-menu-item circle:hover {
6189     fill: #fff;
6190 }
6191
6192 .radial-menu-item.disabled circle {
6193     cursor: auto;
6194     fill: rgba(255,255,255,.5);
6195 }
6196
6197 .radial-menu-item use {
6198     fill: #222;
6199     color: #79f;
6200 }
6201
6202 .radial-menu-item.disabled use {
6203     fill: rgba(32,32,32,.5);
6204     color: rgba(40,40,40,.5);
6205 }
6206
6207 /* edit menu */
6208
6209 .edit-menu-tooltip {
6210     display: none;
6211     position: absolute;
6212     width: 200px;
6213 }
6214
6215 .edit-menu-background {
6216     fill: #eee;
6217 }
6218
6219 .edit-menu-item rect {
6220     fill: #eee;
6221 }
6222
6223 .edit-menu-item rect:active,
6224 .edit-menu-item rect:hover {
6225     fill: #ccc;
6226 }
6227
6228 .edit-menu-item.disabled rect {
6229     cursor: not-allowed;
6230 }
6231 .edit-menu-item.disabled rect:hover {
6232     cursor: not-allowed;
6233     fill: #eee;
6234 }
6235
6236 .edit-menu-item use {
6237     fill: #222;
6238     color: #79f;
6239 }
6240
6241 .edit-menu-item.disabled use {
6242     fill: rgba(32,32,32,.2);
6243     color: rgba(40,40,40,.2);
6244 }
6245
6246
6247 .lasso-path {
6248     fill-opacity:0.3;
6249     stroke: #fff;
6250     stroke-width: 1;
6251     stroke-opacity: 1;
6252     stroke-dasharray: 5, 5;
6253 }
6254
6255 /* Media Queries
6256 ------------------------------------------------------- */
6257
6258 @media only screen and (max-width: 840px) {
6259     /* override hide for save button */
6260     #bar .save .label { display: block;}
6261 }
6262
6263 @media screen and (max-width: 1200px) {
6264     .user-list { display: none !important; }
6265 }
6266
6267 @media screen and (max-width: 1000px) {
6268     #userLink { display: none !important; }
6269 }
6270
6271 @media screen and (max-width: 900px) {
6272     #scale-block { display: none !important; }
6273 }
6274
6275
6276 /* Scrollbars
6277  ----------------------------------------------------- */
6278
6279 ::-webkit-scrollbar {
6280     height: 20px;
6281     overflow: visible;
6282     width: 10px;
6283     background: white;
6284     border-left: 1px solid #DDD;
6285 }
6286
6287 ::-webkit-scrollbar-track {
6288     background-clip: padding-box;
6289     border: solid transparent;
6290     border-width: 0;
6291 }
6292
6293 ::-webkit-scrollbar-thumb {
6294     background-color: rgba(0,0,0,.2);
6295     background-clip: padding-box;
6296     border: solid transparent;
6297     border-width: 3px 3px 3px 4px;
6298     border-radius: 6px;
6299 }
6300 ::-webkit-scrollbar-track:hover,
6301 ::-webkit-scrollbar-track:active {
6302     background-color: rgba(0,0,0,.05);
6303 }
6304
6305 /* Intro walkthrough
6306  ----------------------------------------------------- */
6307
6308 .curtain-darkness {
6309     pointer-events: all;
6310     fill-opacity: 0.7;
6311     fill: #222;
6312     fill-rule: evenodd;
6313 }
6314
6315 .intro-nav-wrap {
6316     display: flex;
6317     flex-direction: row;
6318     position: absolute;
6319     left: 0;
6320     right: 0;
6321     bottom: 30px;
6322     padding: 10px;
6323     z-index: 1001;
6324 }
6325
6326 .intro-nav-wrap .intro-nav-wrap-logo {
6327     flex: 0 0 auto;
6328     height: 40px;
6329     width: 40px;
6330     color: white;
6331     margin: 0px 20px;
6332     vertical-align: middle;
6333 }
6334
6335 .intro-nav-wrap .joined {
6336     flex: 1 1 auto;
6337     display: flex;
6338     flex-direction: row;
6339 }
6340
6341 .intro-nav-wrap button.chapter {
6342     flex: 1 1 100%;
6343     padding: 0px 20px;
6344 }
6345
6346 .intro-nav-wrap button.chapter.next {
6347     animation-duration: 1s;
6348     animation-name: pulse;
6349     animation-iteration-count: infinite;
6350     animation-direction: alternate;
6351 }
6352 @keyframes pulse {
6353     from  { background: #7092ff; }
6354     to    { background: #c6d4ff; }
6355 }
6356
6357 .intro-nav-wrap button.chapter.finished {
6358     background: #8cd05f;
6359 }
6360
6361 .intro-nav-wrap button.chapter .status {
6362     display: none;
6363 }
6364
6365 .intro-nav-wrap button.chapter.finished .status {
6366     display: inline-block;
6367 }
6368
6369 .curtain-tooltip.tooltip.in {
6370     opacity: 1;
6371 }
6372 .curtain-tooltip.tooltip {
6373     text-align: left;
6374 }
6375 [dir='rtl'] .curtain-tooltip.tooltip {
6376     text-align: right;
6377 }
6378
6379 .curtain-tooltip .tooltip-inner {
6380     font-size: 15px;
6381     position: relative;
6382     padding: 20px;
6383 }
6384
6385 .curtain-tooltip .tooltip-inner .button-section,
6386 .curtain-tooltip .tooltip-inner .instruction {
6387     font-weight: bold;
6388     display: block;
6389     border-top: 1px solid #CCC;
6390     margin-top: 10px;
6391     margin-left: -20px;
6392     margin-right: -20px;
6393     padding: 10px 20px 0 20px;
6394 }
6395
6396 [dir='rtl'] .curtain-tooltip .tooltip-inner .button-section button.col8 {
6397     float: right;
6398 }
6399
6400 .curtain-tooltip .tooltip-inner .instruction:only-child {
6401     border: 0;
6402     padding: 0;
6403     margin: 0;
6404 }
6405
6406 .curtain-tooltip .tooltip-inner .icon.pre-text {
6407     vertical-align: text-top;
6408     margin-right: 0;
6409     margin-left: 0;
6410     display: inline-block;
6411 }
6412
6413 .curtain-tooltip.intro-points-describe ,
6414 .curtain-tooltip.intro-lines-name_road {
6415     top: 133px !important;
6416 }
6417
6418 .tooltip-illustration {
6419     height: 80px;
6420     width: 200px;
6421     margin-left: -20px;
6422     margin-top: -10px;
6423 }
6424 [dir='rtl'] .tooltip-illustration {
6425     margin-left: auto;
6426     margin-right: -20px;
6427 }
6428
6429 .curtain-tooltip.intro-mouse {
6430     -moz-user-select: none;
6431     -webkit-user-select: none;
6432     -ms-user-select: none;
6433     user-select: none;
6434 }
6435
6436 .curtain-tooltip.intro-mouse .counter {
6437     position: absolute;
6438     display: block;
6439     top: 50px;
6440     width: 100%;
6441     text-align: center;
6442     font-weight: bold;
6443     font-size: 14px;
6444     z-index: 1003;
6445 }
6446
6447 .curtain-tooltip.intro-mouse .tooltip-illustration use {
6448     fill: rgba(112, 146, 255, 0);
6449     color: rgba(112, 146, 255, 0);
6450 }
6451 .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
6452     fill: rgba(112, 146, 255, 1);
6453 }
6454 .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
6455     color: rgba(112, 146, 255, 1);
6456 }
6457
6458 .huge-modal-button {
6459     width: 100%;
6460     height: auto;
6461     padding: 20px;
6462 }
6463
6464 .huge-modal-button .illustration {
6465     height: 100px;
6466     width: 100px;
6467     color: #7092FF;
6468 }