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