vendor/assets/iD/iD.css.erb

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