vendor/assets/iD/iD.css.erb

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