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