vendor/assets/iD/iD.css.erb

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