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