vendor/assets/iD/iD.css.erb

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