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