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