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 /* tiles */
 165 img.tile {
 166     position:absolute;
 167     transform-origin:0 0;
 168     -ms-transform-origin:0 0;
 169     -webkit-transform-origin:0 0;
 170     -moz-transform-origin:0 0;
 171     -o-transform-origin:0 0;
 172
 173     opacity: 0;
 174
 175     -webkit-transition: opacity 200ms linear;
 176     transition: opacity 200ms linear;
 177     -moz-transition: opacity 200ms linear;
 178 }
 179
 180 img.tile-loaded {
 181     opacity: 1;
 182 }
 183 img.tile-removing {
 184     opacity: 0;
 185 }
 186
 187 /* base styles */
 188 path {
 189     fill: none;
 190 }
 191
 192 use {
 193     pointer-events: none;
 194 }
 195
 196 g.point .shadow,
 197 g.vertex .shadow,
 198 g.midpoint .shadow {
 199     pointer-events: all;
 200 }
 201
 202 path.shadow {
 203     pointer-events: stroke;
 204 }
 205
 206 .shadow {
 207     -webkit-transition: 200ms;
 208        -moz-transition: 200ms;
 209             transition: 200ms;
 210 }
 211
 212 /* points */
 213
 214 g.point .stroke {
 215     stroke: #444;
 216     stroke-width: 1;
 217     fill: #fff;
 218 }
 219
 220 g.point .shadow {
 221     fill: none;
 222     stroke: #f6634f;
 223     stroke-width: 8;
 224     stroke-opacity: 0;
 225 }
 226
 227 g.point.hover:not(.selected) .shadow {
 228     stroke-opacity: 0.5;
 229 }
 230
 231 g.point.selected .shadow {
 232     stroke-opacity: 0.7;
 233 }
 234
 235 g.point.active, g.point.active * {
 236     pointer-events: none;
 237 }
 238
 239 /* vertices and midpoints */
 240
 241 g.vertex .fill {
 242     fill: #000;
 243 }
 244
 245 g.vertex .stroke {
 246     stroke: #666;
 247     stroke-width: 1;
 248     fill: white;
 249 }
 250
 251 g.vertex.shared .stroke {
 252     fill: #aaa;
 253 }
 254
 255 g.midpoint .fill {
 256     fill: #eee;
 257     stroke: #444;
 258     stroke-opacity: .6;
 259     opacity: .7;
 260 }
 261
 262 g.midpoint.tag-highway-pedestrian .fill,
 263 g.midpoint.tag-highway-steps .fill,
 264 g.midpoint.tag-highway-path .fill,
 265 g.midpoint.tag-highway-footway .fill,
 266 g.midpoint.tag-highway-cycleway .fill,
 267 g.midpoint.tag-highway-bridleway .fill {
 268     fill: #fff;
 269     stroke: #333;
 270     stroke-opacity: .8;
 271     opacity: .8;
 272 }
 273
 274 g.vertex .shadow,
 275 g.midpoint .shadow {
 276     fill: #f6634f;
 277     fill-opacity: 0;
 278 }
 279
 280 g.vertex.vertex-hover {
 281     display: none;
 282 }
 283
 284 .mode-draw-area g.vertex.vertex-hover,
 285 .mode-draw-line g.vertex.vertex-hover,
 286 .mode-add-area  g.vertex.vertex-hover,
 287 .mode-add-line  g.vertex.vertex-hover,
 288 .mode-add-point g.vertex.vertex-hover,
 289 .mode-drag-node g.vertex.vertex-hover {
 290     display: block;
 291 }
 292
 293 g.vertex.hover:not(.selected) .shadow,
 294 g.midpoint.hover:not(.selected) .shadow {
 295     fill-opacity: 0.3;
 296 }
 297
 298 g.vertex.selected .shadow {
 299     fill-opacity: 0.5;
 300 }
 301
 302 .mode-draw-area g.midpoint,
 303 .mode-draw-line g.midpoint,
 304 .mode-add-area g.midpoint,
 305 .mode-add-line g.midpoint,
 306 .mode-add-point g.midpoint {
 307   display: none;
 308 }
 309
 310 /* lines */
 311
 312 path.line {
 313     stroke-linecap: round;
 314     stroke-linejoin: bevel;
 315 }
 316
 317 path.stroke {
 318     stroke: black;
 319     stroke-width: 4;
 320 }
 321
 322 path.shadow {
 323     stroke: #f6634f;
 324     stroke-width: 10;
 325     stroke-opacity: 0;
 326 }
 327
 328 path.shadow.hover:not(.selected) {
 329     stroke-opacity: 0.3;
 330 }
 331
 332 path.shadow.selected {
 333     stroke-opacity: 0.7;
 334 }
 335
 336 path.line.stroke {
 337     stroke: white;
 338     stroke-width: 2;
 339 }
 340
 341 path.area.stroke {
 342     stroke: white;
 343     stroke-width: 1;
 344 }
 345 path.area.fill {
 346     fill: rgba(255, 255, 255, 0.3);
 347     fill-rule: evenodd;
 348 }
 349 .preset-icon-fill-area {
 350     border: 1px solid rgb(170, 170, 170);
 351     background-color: rgba(170, 170, 170, 0.3);
 352 }
 353
 354 path.stroke.tag-natural {
 355     stroke: rgb(182, 225, 153);
 356 }
 357 path.fill.tag-natural {
 358     fill: rgba(182, 225, 153, 0.3);
 359 }
 360 .preset-icon-fill-area.tag-natural {
 361     border-color: rgb(182, 225, 153);
 362     background-color: rgba(182, 225, 153, 0.3);
 363 }
 364
 365 path.stroke.tag-natural-water {
 366     stroke: rgb(119, 211, 222);
 367 }
 368 path.fill.tag-natural-water {
 369     fill: rgba(119, 211, 222, 0.3);
 370 }
 371 .preset-icon-fill-area.tag-natural-water {
 372     border-color: rgb(119, 211, 222);
 373     background-color: rgba(119, 211, 222, 0.3);
 374 }
 375
 376 path.stroke.tag-amenity-childcare,
 377 path.stroke.tag-amenity-kindergarten,
 378 path.stroke.tag-amenity-school,
 379 path.stroke.tag-amenity-college,
 380 path.stroke.tag-amenity-university {
 381     stroke: rgb(255, 255, 148);
 382 }
 383 path.fill.tag-amenity-childcare,
 384 path.fill.tag-amenity-kindergarten,
 385 path.fill.tag-amenity-school,
 386 path.fill.tag-amenity-college,
 387 path.fill.tag-amenity-university {
 388     fill: rgba(255, 255, 148, 0.15);
 389 }
 390 .preset-icon-fill-area.tag-amenity-childcare,
 391 .preset-icon-fill-area.tag-amenity-kindergarten,
 392 .preset-icon-fill-area.tag-amenity-school,
 393 .preset-icon-fill-area.tag-amenity-college,
 394 .preset-icon-fill-area.tag-amenity-university {
 395     border-color: rgb(255, 255, 148);
 396     background-color: rgba(255, 255, 148, 0.15);
 397 }
 398
 399 path.stroke.tag-landuse,
 400 path.stroke.tag-natural-wood,
 401 path.stroke.tag-natural-tree,
 402 path.stroke.tag-natural-grassland,
 403 path.stroke.tag-natural-grass,
 404 path.stroke.tag-leisure-pitch,
 405 path.stroke.tag-leisure-park {
 406     stroke: rgb(140, 208, 95);
 407 }
 408 path.fill.tag-landuse,
 409 path.fill.tag-natural-wood,
 410 path.fill.tag-natural-tree,
 411 path.fill.tag-natural-grassland,
 412 path.fill.tag-natural-grass,
 413 path.fill.tag-leisure-pitch,
 414 path.fill.tag-leisure-park {
 415     fill: rgba(140, 208, 95, 0.2);
 416 }
 417 .preset-icon-fill-area.tag-landuse,
 418 .preset-icon-fill-area.tag-natural-wood,
 419 .preset-icon-fill-area.tag-natural-tree,
 420 .preset-icon-fill-area.tag-natural-grassland,
 421 .preset-icon-fill-area.tag-natural-grass,
 422 .preset-icon-fill-area.tag-leisure-pitch,
 423 .preset-icon-fill-area.tag-leisure-park {
 424     border-color: rgb(140, 208, 95);
 425     background-color: rgba(140, 208, 95, 0.2);
 426 }
 427
 428 path.fill.tag-landuse-residential,
 429 path.fill.tag-landuse-retail,
 430 path.fill.tag-landuse-commercial,
 431 path.fill.tag-landuse-industrial {
 432     fill: none;
 433     stroke-width: 60px;
 434 }
 435
 436 path.stroke.tag-landuse-residential {
 437     stroke: rgb(196, 189, 25);
 438 }
 439 path.fill.tag-landuse-residential {
 440     stroke: rgba(196, 189, 25, 0.3);
 441 }
 442 .preset-icon-fill-area.tag-landuse-residential {
 443     border-color: rgb(196, 189, 25);
 444     background: none;
 445     box-shadow: inset 0 0 0 5px rgba(196, 189, 25, 0.3);
 446 }
 447
 448 path.stroke.tag-landuse-retail,
 449 path.stroke.tag-landuse-commercial {
 450     stroke: rgb(214, 136, 26);
 451 }
 452 path.fill.tag-landuse-retail,
 453 path.fill.tag-landuse-commercial {
 454     stroke: rgba(214, 136, 26, 0.3);
 455 }
 456 .preset-icon-fill-area.tag-landuse-retail,
 457 .preset-icon-fill-area.tag-landuse-commercial {
 458     border-color: rgb(214, 136, 26);
 459     background: none;
 460     box-shadow: inset 0 0 0 5px rgba(214, 136, 26, 0.3);
 461 }
 462
 463 path.stroke.tag-landuse-industrial {
 464     stroke: rgb(228, 164, 245);
 465 }
 466 path.fill.tag-landuse-industrial {
 467     stroke: rgba(228, 164, 245, 0.3);
 468 }
 469 .preset-icon-fill-area.tag-landuse-industrial {
 470     border-color: rgb(228, 164, 245);
 471     background: none;
 472     box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3);
 473 }
 474
 475 path.stroke.tag-landuse-basin,
 476 path.stroke.tag-landuse-reservoir {
 477     stroke: rgb(119, 211, 222);
 478 }
 479 path.fill.tag-landuse-basin,
 480 path.fill.tag-landuse-reservoir {
 481     fill: rgba(119, 211, 222, 0.3);
 482 }
 483 .preset-icon-fill-area.tag-landuse-basin,
 484 .preset-icon-fill-area.tag-landuse-reservoir {
 485     border-color: rgb(119, 211, 222);
 486     background-color: rgba(119, 211, 222, 0.3);
 487 }
 488
 489 path.stroke.tag-landuse-quarry {
 490     stroke: rgb(166, 149, 123);
 491 }
 492 path.fill.tag-landuse-quarry {
 493     fill: rgba(166, 149, 123, 0.2);
 494 }
 495 .preset-icon-fill-area.tag-landuse-quarry {
 496     border-color: rgb(166, 149, 123);
 497     background-color: rgba(166, 149, 123, 0.2);
 498 }
 499
 500 path.stroke.tag-landuse-landfill {
 501     stroke: rgb(255, 153, 51);
 502 }
 503 path.fill.tag-landuse-landfill {
 504     fill: rgba(255, 153, 51, 0.2);
 505 }
 506 .preset-icon-fill-area.tag-landuse-landfill {
 507     border-color: rgb(255, 153, 51);
 508     background-color: rgba(255, 153, 51, 0.2);
 509 }
 510
 511 path.stroke.tag-landuse-construction {
 512     stroke: rgb(196, 189, 25);
 513 }
 514 .pattern-color-construction {
 515     fill: rgba(196, 189, 25, 0.2);
 516 }
 517 .preset-icon-fill-area.tag-landuse-construction {
 518     border-color: rgb(196, 189, 25);
 519     background-color: rgba(196, 189, 25, 0.2);
 520 }
 521
 522 path.stroke.tag-landuse-military {
 523     stroke: rgb(214, 136, 26);
 524 }
 525 .preset-icon-fill-area.tag-landuse-military {
 526     border-color: rgb(214, 136, 26);
 527     background-color: rgba(214, 136, 26, 0.2);
 528 }
 529
 530 path.stroke.tag-natural-wetland {
 531     stroke: rgb(182, 225, 153);
 532 }
 533 .pattern-color-wetland {
 534     fill: rgba(182, 225, 153, 0.2);
 535 }
 536 .preset-icon-fill-area.tag-natural-wetland {
 537     border-color: rgb(182, 225, 153);
 538     background-color: rgba(182, 225, 153, 0.2);
 539 }
 540
 541 path.stroke.tag-landuse-meadow {
 542     stroke: rgb(182, 225, 153);
 543 }
 544 .pattern-color-meadow {
 545     fill: rgba(182, 225, 153, 0.2);
 546 }
 547 .preset-icon-fill-area.tag-landuse-meadow {
 548     border-color: rgb(182, 225, 153);
 549     background-color: rgba(182, 225, 153, 0.2);
 550 }
 551
 552 path.stroke.tag-natural-beach {
 553     stroke: rgb(255, 255, 126);
 554 }
 555 .pattern-color-beach {
 556     fill: rgba(255, 255, 126, 0.2);
 557 }
 558 .preset-icon-fill-area.tag-natural-beach {
 559     border-color: rgb(255, 255, 126);
 560     background-color: rgba(255, 255, 126, 0.2);
 561 }
 562
 563 path.stroke.tag-natural-scrub {
 564     stroke: rgb(219, 240, 139);
 565 }
 566 .pattern-color-scrub {
 567     fill: rgba(219, 240, 139, 0.2);
 568 }
 569 .preset-icon-fill-area.tag-natural-scrub {
 570     border-color: rgb(219, 240, 139);
 571     background-color: rgba(219, 240, 139, 0.2);
 572 }
 573
 574 .pattern-color-farm,
 575 .pattern-color-farmland {
 576     fill: rgba(140, 208, 95, 0.2);
 577 }
 578 .preset-icon-fill-area.tag-landuse-farm,
 579 .preset-icon-fill-area.tag-landuse-farmland {
 580     background-color: rgba(140, 208, 95, 0.2);
 581 }
 582
 583 .pattern-color-cemetery {
 584     fill: rgba(140, 208, 95, 0.2)
 585 }
 586 .preset-icon-fill-area.tag-landuse-cemetery {
 587     background-color: rgba(140, 208, 95, 0.2);
 588 }
 589
 590 .pattern-color-orchard {
 591     fill: rgba(140, 208, 95, 0.2)
 592 }
 593 .preset-icon-fill-area.tag-landuse-orchard {
 594     background-color: rgba(140, 208, 95, 0.8);
 595 }
 596
 597 path.stroke.tag-amenity-parking {
 598     stroke: rgb(170, 170, 170);
 599 }
 600 path.fill.tag-amenity-parking {
 601     fill: rgba(170, 170, 170, 0.3);
 602 }
 603 .preset-icon-fill-area.tag-amenity-parking {
 604     border-color: rgb(170, 170, 170);
 605     background-color: rgba(170, 170, 170, 0.3);
 606 }
 607
 608 path.fill.tag-place,
 609 path.fill.tag-boundary {
 610     fill: none;
 611 }
 612
 613 /* highways */
 614
 615 path.shadow.tag-highway {
 616     stroke-width:16;
 617 }
 618 path.casing.tag-highway {
 619     stroke:#444;
 620     stroke-width:10;
 621 }
 622 path.stroke.tag-highway {
 623     stroke:#ccc;
 624     stroke-width:8;
 625 }
 626
 627 .low-zoom path.shadow.tag-highway {
 628     stroke-width:12;
 629 }
 630 .low-zoom path.casing.tag-highway {
 631     stroke-width:6;
 632 }
 633 .low-zoom path.stroke.tag-highway {
 634     stroke-width:4;
 635 }
 636
 637 path.stroke.tag-highway-motorway,
 638 path.stroke.tag-highway-motorway_link,
 639 path.stroke.tag-construction-motorway {
 640     stroke:#58a9ed;
 641 }
 642
 643 path.casing.tag-highway-motorway,
 644 path.casing.tag-highway-motorway_link,
 645 path.casing.tag-construction-motorway {
 646     stroke:#2c5476;
 647 }
 648
 649 path.stroke.tag-highway-trunk,
 650 path.stroke.tag-highway-trunk_link,
 651 path.stroke.tag-construction-trunk {
 652     stroke:#8cd05f;
 653 }
 654 path.casing.tag-highway-trunk,
 655 path.casing.tag-highway-trunk_link,
 656 path.casing.tag-construction-trunk {
 657     stroke:#46682f;
 658 }
 659
 660 path.stroke.tag-highway-primary,
 661 path.stroke.tag-highway-primary_link,
 662 path.stroke.tag-construction-primary {
 663     stroke:#e06d5f;
 664 }
 665 path.casing.tag-highway-primary,
 666 path.casing.tag-highway-primary_link,
 667 path.casing.tag-construction-primary {
 668     stroke:#70372f;
 669 }
 670
 671 path.stroke.tag-highway-secondary,
 672 path.stroke.tag-highway-secondary_link,
 673 path.stroke.tag-construction-secondary {
 674     stroke:#eab056;
 675 }
 676 path.casing.tag-highway-secondary,
 677 path.casing.tag-highway-secondary_link,
 678 path.casing.tag-construction-secondary {
 679     stroke:#75582b;
 680 }
 681
 682 path.stroke.tag-highway-tertiary,
 683 path.stroke.tag-highway-tertiary_link,
 684 path.stroke.tag-construction-tertiary {
 685     stroke:#ffff7e;
 686 }
 687 path.casing.tag-highway-tertiary,
 688 path.casing.tag-highway-tertiary_link,
 689 path.casing.tag-construction-tertiary {
 690     stroke:#7f7f3f;
 691 }
 692
 693 path.stroke.tag-highway-unclassified,
 694 path.stroke.tag-construction-unclassified {
 695     stroke:#eaeaea;
 696 }
 697 path.casing.tag-highway-unclassified,
 698 path.casing.tag-construction-unclassified {
 699     stroke:#444;
 700 }
 701
 702 path.stroke.tag-highway-residential,
 703 path.stroke.tag-construction-residential {
 704     stroke:#fff;
 705 }
 706 path.casing.tag-highway-residential,
 707 path.casing.tag-construction-residential {
 708     stroke:#444;
 709 }
 710
 711 path.stroke.tag-highway-living_street {
 712     stroke:#ccc;
 713     stroke-width:4;
 714 }
 715 path.casing.tag-highway-living_street {
 716     stroke:#fff;
 717     stroke-width:6;
 718 }
 719
 720 path.stroke.line.tag-highway-pedestrian {
 721     stroke:#fff;
 722     stroke-dasharray: 2, 8;
 723     stroke-width:4 !important;
 724     shapeRendering: auto;
 725 }
 726 path.casing.line.tag-highway-pedestrian {
 727     stroke:#8cd05f;
 728     stroke-width:6 !important;
 729 }
 730 path.stroke.area.tag-highway-pedestrian {
 731     stroke:#fff;
 732     stroke-width: 2;
 733 }
 734
 735 path.stroke.tag-highway-service {
 736     stroke:#fff;
 737     stroke-width:4;
 738 }
 739 path.casing.tag-highway-service {
 740     stroke:#666;
 741     stroke-width:6;
 742 }
 743 .low-zoom path.stroke.tag-highway-service {
 744     stroke-width:2;
 745 }
 746 .low-zoom path.casing.tag-highway-service {
 747     stroke-width:4;
 748 }
 749
 750 path.stroke.tag-highway-track {
 751     stroke: #fff;
 752     stroke-width: 4;
 753 }
 754 path.casing.tag-highway-track {
 755     stroke: #996600;
 756     stroke-width: 6;
 757     stroke-linecap: butt;
 758     stroke-dasharray: 6, 6;
 759 }
 760 .low-zoom path.stroke.tag-highway-track {
 761     stroke-width:2;
 762 }
 763 .low-zoom path.casing.tag-highway-track {
 764     stroke-width:4;
 765 }
 766
 767 path.stroke.tag-highway-path {
 768     stroke: #000;
 769     stroke-width: 1 !important;
 770     stroke-linecap: butt;
 771     stroke-dasharray: 8, 4;
 772 }
 773 path.casing.tag-highway-path {
 774     stroke-width: 1 !important;
 775     stroke: #fff;
 776 }
 777
 778 path.stroke.tag-highway-footway,
 779 path.stroke.tag-highway-cycleway,
 780 path.stroke.tag-highway-bridleway {
 781     stroke-width: 4;
 782     stroke-linecap: butt;
 783     stroke-dasharray: 6, 6;
 784 }
 785 path.casing.tag-highway-footway,
 786 path.casing.tag-highway-cycleway,
 787 path.casing.tag-highway-bridleway {
 788     stroke-width: 6;
 789     stroke: #fff;
 790 }
 791
 792 .low-zoom path.stroke.tag-highway-footway,
 793 .low-zoom path.stroke.tag-highway-cycleway,
 794 .low-zoom path.stroke.tag-highway-bridleway {
 795     stroke-width: 2;
 796 }
 797 .low-zoom path.casing.tag-highway-footway,
 798 .low-zoom path.casing.tag-highway-cycleway,
 799 .low-zoom path.casing.tag-highway-bridleway {
 800     stroke-width: 4;
 801 }
 802
 803 path.stroke.tag-highway-footway {
 804     stroke: #ae8681;
 805 }
 806 path.stroke.tag-highway-cycleway {
 807     stroke: #58a9ed;
 808 }
 809 path.stroke.tag-highway-bridleway {
 810     stroke: #e06d5f;
 811 }
 812
 813 path.stroke.tag-highway-steps {
 814     stroke: #81d25c;
 815     stroke-width: 4;
 816     stroke-linecap: butt;
 817     stroke-dasharray: 3, 3;
 818 }
 819 path.casing.tag-highway-steps {
 820     stroke-width: 6;
 821     stroke: #fff;
 822 }
 823
 824 /* aeroways */
 825
 826 path.stroke.tag-aeroway-taxiway {
 827     stroke: #805C80;
 828     stroke-width: 4;
 829 }
 830 path.shadow.tag-aeroway-runway {
 831     stroke-width: 20;
 832 }
 833 path.stroke.tag-aeroway-runway {
 834     stroke: #fff;
 835     stroke-width: 2;
 836     stroke-linecap: butt;
 837     stroke-dasharray: 24, 48;
 838 }
 839 path.casing.tag-aeroway-runway {
 840     stroke-width: 10;
 841     stroke: #000;
 842     stroke-linecap: square;
 843 }
 844 path.fill.tag-aeroway-runway {
 845     fill: rgba(0, 0, 0, 0.6);
 846 }
 847 path.stroke.tag-aeroway-apron {
 848     stroke: #805C80;
 849 }
 850 path.fill.tag-aeroway-apron {
 851     fill: rgba(128, 92, 128, 0.2);
 852 }
 853
 854
 855 /* railways */
 856
 857 path.stroke.tag-railway {
 858     stroke: #eee;
 859     stroke-width: 2;
 860     stroke-linecap: butt;
 861     stroke-dasharray: 12,12;
 862 }
 863
 864 path.casing.tag-railway {
 865     stroke: #555;
 866     stroke-width: 4;
 867 }
 868
 869 path.stroke.tag-railway-abandoned {
 870     stroke: #eee;
 871 }
 872 path.casing.tag-railway-abandoned {
 873     stroke: #999;
 874 }
 875
 876 path.stroke.tag-railway-subway {
 877     stroke: #666;
 878 }
 879 path.casing.tag-railway-subway {
 880     stroke: #222;
 881 }
 882
 883 path.stroke.tag-railway-platform {
 884     stroke: #999;
 885     stroke-width: 4;
 886     stroke-dasharray: none;
 887 }
 888 path.casing.tag-railway-platform {
 889     stroke: none;
 890 }
 891
 892 .area.stroke.tag-railway {
 893     stroke: white;
 894     stroke-width: 1;
 895     stroke-dasharray: none;
 896 }
 897 .area.casing.tag-railway {
 898     stroke: none;
 899 }
 900
 901 /* waterways */
 902
 903 path.fill.tag-waterway {
 904     fill: rgba(119, 211, 222, 0.3);
 905 }
 906
 907 path.stroke.tag-waterway {
 908     stroke: #77d3de;
 909     stroke-width: 2;
 910 }
 911 path.casing.tag-waterway {
 912     stroke: #77d3de;
 913     stroke-width: 4;
 914 }
 915
 916 path.stroke.tag-waterway-river {
 917     stroke-width: 4;
 918 }
 919 path.casing.tag-waterway-river {
 920     stroke-width: 6;
 921 }
 922
 923 path.stroke.tag-waterway-ditch {
 924     stroke: #6591ff;
 925     stroke-width: 1;
 926 }
 927 path.casing.tag-waterway-ditch {
 928     stroke: #6591ff;
 929     stroke-width: 3;
 930 }
 931
 932 /* power */
 933
 934 path.stroke.tag-power {
 935     stroke: #939393;
 936     stroke-width: 2;
 937 }
 938 path.casing.tag-power {
 939     stroke: none;
 940 }
 941
 942 /* boundary */
 943
 944 path.stroke.tag-boundary {
 945     stroke: #fff;
 946     stroke-width: 2;
 947     stroke-linecap: butt;
 948     stroke-dasharray: 20, 5, 5, 5;
 949 }
 950 path.casing.tag-boundary {
 951     stroke: #82B5FE;
 952     stroke-width: 6;
 953 }
 954
 955 path.casing.tag-boundary-protected_area,
 956 path.casing.tag-boundary-national_park {
 957     stroke: #b0e298;
 958 }
 959
 960
 961 /* bridges */
 962
 963 path.casing.tag-bridge {
 964     stroke-width: 16;
 965     stroke-opacity: 0.6;
 966     stroke: #000;
 967     stroke-linecap: butt;
 968 }
 969
 970 path.shadow.tag-bridge {
 971     stroke-width: 22;
 972 }
 973
 974 path.casing.line.tag-railway.tag-bridge,
 975 path.casing.tag-highway-living_street.tag-bridge,
 976 path.casing.tag-highway-path.tag-bridge,
 977 path.casing.line.tag-highway-pedestrian.tag-bridge,
 978 path.casing.tag-highway-service.tag-bridge,
 979 path.casing.tag-highway-track.tag-bridge,
 980 path.casing.tag-highway-steps.tag-bridge,
 981 path.casing.tag-highway-footway.tag-bridge,
 982 path.casing.tag-highway-cycleway.tag-bridge,
 983 path.casing.tag-highway-bridleway.tag-bridge {
 984     stroke-width: 10;
 985 }
 986
 987 path.shadow.line.tag-railway.tag-bridge,
 988 path.shadow.tag-highway-living_street.tag-bridge,
 989 path.shadow.tag-highway-path.tag-bridge,
 990 path.shadow.line.tag-highway-pedestrian.tag-bridge,
 991 path.shadow.tag-highway-service.tag-bridge,
 992 path.shadow.tag-highway-track.tag-bridge,
 993 path.shadow.tag-highway-steps.tag-bridge,
 994 path.shadow.tag-highway-footway.tag-bridge,
 995 path.shadow.tag-highway-cycleway.tag-bridge,
 996 path.shadow.tag-highway-bridleway.tag-bridge {
 997     stroke-width: 17;
 998 }
 999
1000
1001 .low-zoom path.casing.tag-bridge {
1002     stroke-width: 10;
1003     stroke-opacity: 0.6;
1004     stroke: #000;
1005     stroke-linecap: butt;
1006 }
1007
1008 .low-zoom path.shadow.tag-bridge {
1009     stroke-width: 14;
1010 }
1011
1012 .low-zoom path.casing.line.tag-railway.tag-bridge,
1013 .low-zoom path.casing.tag-highway-living_street.tag-bridge,
1014 .low-zoom path.casing.tag-highway-path.tag-bridge,
1015 .low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge,
1016 .low-zoom path.casing.tag-highway-service.tag-bridge,
1017 .low-zoom path.casing.tag-highway-track.tag-bridge,
1018 .low-zoom path.casing.tag-highway-steps.tag-bridge,
1019 .low-zoom path.casing.tag-highway-footway.tag-bridge,
1020 .low-zoom path.casing.tag-highway-cycleway.tag-bridge,
1021 .low-zoom path.casing.tag-highway-bridleway.tag-bridge {
1022     stroke-width: 6;
1023 }
1024
1025 .low-zoom path.shadow.line.tag-railway.tag-bridge,
1026 .low-zoom path.shadow.tag-highway-living_street.tag-bridge,
1027 .low-zoom path.shadow.tag-highway-path.tag-bridge,
1028 .low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge,
1029 .low-zoom path.shadow.tag-highway-service.tag-bridge,
1030 .low-zoom path.shadow.tag-highway-track.tag-bridge,
1031 .low-zoom path.shadow.tag-highway-steps.tag-bridge,
1032 .low-zoom path.shadow.tag-highway-footway.tag-bridge,
1033 .low-zoom path.shadow.tag-highway-cycleway.tag-bridge,
1034 .low-zoom path.shadow.tag-highway-bridleway.tag-bridge {
1035     stroke-width: 13;
1036 }
1037
1038
1039
1040 /* tunnels */
1041
1042 path.stroke.tag-tunnel {
1043     stroke-opacity: 0.3;
1044 }
1045
1046 path.casing.tag-tunnel {
1047     stroke-opacity: 0.5;
1048 }
1049
1050 /* embankments / cuttings */
1051
1052 path.casing.tag-embankment,
1053 path.casing.tag-cutting {
1054     stroke-opacity: 0.5;
1055     stroke: #000;
1056     stroke-width: 22;
1057     stroke-dasharray: 2, 4;
1058     stroke-linecap: butt;
1059 }
1060
1061 path.shadow.tag-embankment,
1062 path.shadow.tag-cutting {
1063     stroke-width: 28;
1064 }
1065
1066 .low-zoom path.casing.tag-embankment,
1067 .low-zoom path.casing.tag-cutting {
1068     stroke-width: 10;
1069 }
1070
1071 .low-zoom path.shadow.tag-embankment,
1072 .low-zoom path.shadow.tag-cutting {
1073     stroke-width: 14;
1074 }
1075
1076
1077 /* construction */
1078
1079 path.stroke.tag-highway-construction,
1080 path.casing.tag-highway-construction {
1081     stroke-linecap: butt;
1082     stroke-dasharray: 7, 7;
1083 }
1084
1085 .low-zoom path.stroke.tag-highway-construction,
1086 .low-zoom path.casing.tag-highway-construction {
1087     stroke-linecap: butt;
1088     stroke-dasharray: 5, 5;
1089 }
1090
1091 text {
1092     font-size:10px;
1093     pointer-events: none;
1094     color: #222;
1095     opacity: 1;
1096 }
1097
1098 .oneway .textpath.tag-waterway {
1099     fill: #002F35;
1100 }
1101
1102 marker#oneway-marker path {
1103     fill:#000;
1104     opacity: .5;
1105 }
1106
1107 path.oneway {
1108     stroke-width: 6px;
1109 }
1110
1111 /* Buildings */
1112
1113 path.stroke.tag-building,
1114 path.stroke.tag-amenity-shelter {
1115     stroke: rgb(224, 110, 95);
1116 }
1117 path.fill.tag-building,
1118 path.fill.tag-amenity-shelter {
1119     fill: rgba(224, 110, 95, 0.3);
1120 }
1121 .preset-icon-fill-area.tag-building,
1122 .preset-icon-fill-area.tag-amenity-shelter {
1123     border-color: rgb(224, 110, 95);
1124     background-color: rgba(224, 110, 95, 0.3);
1125 }
1126
1127
1128 /*
1129  * Labels
1130  */
1131
1132 text.arealabel-halo,
1133 text.linelabel-halo,
1134 text.pointlabel-halo,
1135 text.arealabel,
1136 text.linelabel,
1137 text.pointlabel {
1138     font-size: 12px;
1139     font-weight: bold;
1140     fill: #333;
1141     text-anchor: middle;
1142     pointer-events: none;
1143     -webkit-transition: opacity 100ms linear;
1144     transition: opacity 100ms linear;
1145     -moz-transition: opacity 100ms linear;
1146 }
1147
1148 .linelabel-halo .textpath,
1149 .linelabel .textpath {
1150   dominant-baseline: middle;
1151 }
1152
1153 /* Opera doesn't support dominant-baseline. See #715 */
1154 .opera .linelabel-halo .textpath,
1155 .opera .linelabel .textpath {
1156   baseline-shift: -33%;
1157   dominant-baseline: auto;
1158 }
1159
1160 .layer-halo text {
1161     opacity: 0.7;
1162     stroke: #fff;
1163     stroke-width: 5px;
1164     stroke-miterlimit: 1;
1165 }
1166
1167 text.proximate {
1168     opacity: 0;
1169 }
1170
1171 text.point {
1172   font-size: 10px;
1173 }
1174
1175 /* Turns */
1176
1177 g.turn rect,
1178 g.turn circle {
1179     fill: none;
1180     pointer-events: all;
1181 }
1182
1183 .form-field-restrictions .vertex {
1184     pointer-events: none;
1185     cursor: auto !important;
1186 }
1187
1188 /* Cursors */
1189
1190 #map {
1191     cursor: auto; /* Opera */
1192     cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
1193 }
1194
1195 .mode-browse .point,
1196 .mode-select .point {
1197     cursor: pointer; /* Opera */
1198     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
1199 }
1200
1201 .mode-select .vertex,
1202 .mode-browse .vertex {
1203     cursor: pointer; /* Opera */
1204     cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
1205 }
1206
1207 .mode-browse .line,
1208 .mode-select .line {
1209     cursor: pointer; /* Opera */
1210     cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
1211 }
1212
1213 .mode-select .area,
1214 .mode-browse .area {
1215     cursor: pointer; /* Opera */
1216     cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
1217 }
1218
1219 .mode-select .midpoint,
1220 .mode-browse .midpoint {
1221     cursor: pointer; /* Opera */
1222     cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
1223 }
1224
1225 .mode-select .behavior-multiselect .point,
1226 .mode-select .behavior-multiselect .vertex,
1227 .mode-select .behavior-multiselect .line,
1228 .mode-select .behavior-multiselect .area {
1229     cursor: pointer; /* Opera */
1230     cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
1231 }
1232
1233 .mode-select .behavior-multiselect .selected {
1234     cursor: pointer; /* Opera */
1235     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
1236 }
1237
1238 #map .point:active,
1239 #map .vertex:active,
1240 #map .line:active,
1241 #map .area:active,
1242 #map .midpoint:active,
1243 #map .mode-select .selected {
1244     cursor: pointer; /* Opera */
1245     cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */
1246 }
1247
1248 .mode-draw-line #map,
1249 .mode-draw-area #map,
1250 .mode-add-line  #map,
1251 .mode-add-area  #map,
1252 .mode-drag-node #map {
1253     cursor: crosshair; /* Opera */
1254     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1255 }
1256
1257 .mode-draw-line .way.hover,
1258 .mode-draw-area .way.hover,
1259 .mode-add-line  .way.hover,
1260 .mode-add-area  .way.hover,
1261 .mode-drag-node .way.hover {
1262     cursor: crosshair; /* Opera */
1263     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
1264 }
1265
1266 .mode-draw-line .vertex.hover,
1267 .mode-draw-area .vertex.hover,
1268 .mode-add-line  .vertex.hover,
1269 .mode-add-area  .vertex.hover,
1270 .mode-drag-node .vertex.hover {
1271     cursor: crosshair; /* Opera */
1272     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
1273 }
1274
1275 .mode-add-point #map,
1276 .lasso #map,
1277 .lasso .way,
1278 .lasso .vertex {
1279     cursor: crosshair; /* Opera */
1280     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
1281 }
1282
1283 .turn rect,
1284 .turn circle {
1285     cursor: pointer; /* Opera */
1286     cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
1287 }
1288
1289 .lasso #map {
1290     pointer-events: visibleStroke;
1291 }
1292
1293 /* GPX Paths */
1294 path.gpx {
1295     stroke: #FF26D4;
1296     stroke-width: 2;
1297     fill: none;
1298     pointer-events: none;
1299 }
1300
1301 /* GPS Labels */
1302 text.gpx {
1303     fill:#FF26D4;
1304 }
1305
1306 /* Mapillary Layer */
1307
1308 .layer-mapillary {
1309     pointer-events: none;
1310 }
1311
1312 .layer-mapillary g {
1313     pointer-events: visible;
1314     cursor: pointer; /* Opera */
1315     cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */
1316 }
1317
1318 .layer-mapillary g * {
1319     stroke-width: 2;
1320     stroke: #ffc600;
1321     fill: #ffc600;
1322 }
1323
1324 .layer-mapillary g:hover * {
1325     stroke-width: 2;
1326     stroke: #ff9900;
1327     fill: #ff9900;
1328 }
1329
1330 .layer-mapillary g.selected * {
1331     stroke-width: 4;
1332     stroke: #ff5800;
1333     fill: #ff5800;
1334 }
1335
1336 /* Modes */
1337
1338 .mode-draw-line .vertex.active,
1339 .mode-draw-area .vertex.active,
1340 .mode-drag-node .vertex.active {
1341     display: none;
1342 }
1343
1344 .mode-draw-line .way.active,
1345 .mode-draw-area .way.active,
1346 .mode-drag-node .active {
1347     pointer-events: none;
1348 }
1349
1350 /* Ensure drawing doesn't interact with area fills. */
1351 .mode-add-point .area.fill,
1352 .mode-draw-line .area.fill,
1353 .mode-draw-area .area.fill,
1354 .mode-add-line .area.fill,
1355 .mode-add-area .area.fill,
1356 .mode-drag-node .area.fill {
1357     pointer-events: none;
1358 }
1359 /* Basics
1360 ------------------------------------------------------- */
1361
1362 /*
1363   Opera misbehaves when the window is resized vertically unless 100% width + height are
1364   applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
1365 */
1366 html, body {
1367     width: 100%;
1368     height: 100%;
1369 }
1370
1371 body {
1372     font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif;
1373     margin:0;
1374     padding:0;
1375     min-width: 768px;
1376     color:#333;
1377     overflow: hidden;
1378 }
1379
1380 .unsupported {
1381     text-align: center;
1382     vertical-align: middle;
1383     padding-top: 100px;
1384     font-size: 15px;
1385 }
1386
1387 .id-container {
1388     height: 100%;
1389     width: 100%;
1390     position: fixed;
1391     min-width: 768px;
1392 }
1393
1394 #content {
1395     position: relative;
1396     overflow: hidden;
1397     height: 100%;
1398 }
1399
1400 #defs {
1401     /* Can't be display: none or the clippaths are ignored. */
1402     position: absolute;
1403     width: 0;
1404     height: 0;
1405 }
1406
1407 .spacer {
1408     height: 40px;
1409     margin-right: 10px;
1410 }
1411
1412 .limiter {
1413     position: relative;
1414     max-width: 1200px;
1415 }
1416
1417 .spinner {
1418     opacity: .5;
1419 }
1420
1421 .spinner img {
1422     position: absolute;
1423     height: 40px;
1424     width: 40px;
1425     right: 10px;
1426     top: 10px;
1427     border-radius: 4px;
1428     margin-right: 10px;
1429     background: black;
1430 }
1431
1432 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
1433     -moz-box-sizing: border-box;
1434     -webkit-box-sizing: border-box;
1435     box-sizing: border-box;
1436 }
1437
1438 a, button, input, textarea {
1439     -webkit-tap-highlight-color:rgba(0,0,0,0);
1440     -webkit-touch-callout:none;
1441 }
1442
1443 a,
1444 button,
1445 .checkselect label:hover,
1446 .opacity-options li,
1447 .radial-menu-item {
1448     cursor: pointer; /* Opera */
1449     cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */
1450 }
1451
1452 h2 {
1453     font-size: 25px;
1454     line-height: 1.25;
1455     font-weight: bold;
1456     margin-bottom: 20px;
1457 }
1458
1459 h3:last-child,
1460 h2:last-child,
1461 h4:last-child { margin-bottom: 0;}
1462
1463 h3 {
1464     font-size: 16px;
1465     line-height: 1.25;
1466     font-weight: bold;
1467     margin-bottom: 10px;
1468 }
1469
1470 h4, h5 {
1471     font-size: 12px;
1472     font-weight: bold;
1473     padding-bottom: 10px;
1474 }
1475
1476 :focus {
1477     outline-color: transparent;
1478     outline-style: none;
1479 }
1480
1481 p {
1482     font-size: 12px;
1483     margin:0;
1484     padding:0;
1485 }
1486
1487 p:last-child {
1488     padding-bottom: 0;
1489 }
1490
1491 em {
1492     font-style: italic;
1493 }
1494
1495 strong {
1496     font-weight: bold;
1497 }
1498
1499 a:visited, a {
1500     color: #7092ff;
1501     -webkit-transition: all 100ms;
1502        -moz-transition: all 100ms;
1503          -o-transition: all 100ms;
1504             transition: all 100ms;
1505 }
1506
1507 a:hover {
1508     color:#597be7;
1509 }
1510
1511 /* Forms
1512 ------------------------------------------------------- */
1513
1514 textarea  {
1515     resize: vertical;
1516     font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
1517 }
1518
1519 textarea,
1520 input[type=text],
1521 input[type=search],
1522 input[type=number],
1523 input[type=url],
1524 input[type=tel],
1525 input[type=email] {
1526     background-color: white;
1527     border:1px solid #ccc;
1528     padding:5px 10px;
1529     height:30px;
1530     width: 100%;
1531     border-radius:4px;
1532     text-overflow: ellipsis;
1533     -webkit-transition: all 200ms;
1534        -moz-transition: all 200ms;
1535          -o-transition: all 200ms;
1536             transition: all 200ms;
1537 }
1538
1539 textarea:focus,
1540 input:focus {
1541     background-color: #F1F1F1;
1542 }
1543
1544 input[type="checkbox"],
1545 input[type="radio"] {
1546     float: left;
1547     width: 14px;
1548     height: 14px;
1549     margin-right: 5px;
1550     margin-top: 3px;
1551 }
1552
1553 /* remove bottom border radius when combobox is open */
1554 .combobox + * textarea:focus,
1555 .combobox + * input:focus {
1556     border-bottom-left-radius: 0 !important;
1557     border-bottom-right-radius: 0 !important;
1558 }
1559
1560 /* tables */
1561
1562 table {
1563     background-color: white;
1564     border-collapse: collapse;
1565     width:100%;
1566     border-spacing:0;
1567 }
1568
1569 table th {
1570     text-align:left;
1571 }
1572
1573 table.tags, table.tags td, table.tags th {
1574     border: 1px solid #CCC;
1575     padding: 4px;
1576 }
1577
1578 /* Grid
1579 ------------------------------------------------------- */
1580
1581 .col0    { float:left; width:04.1666%; }
1582 .col1    { float:left; width:08.3333%; }
1583 .col2    { float:left; width:16.6666%; }
1584 .col3    { float:left; width:25.0000%; max-width: 300px; }
1585 .col4    { float:left; width:33.3333%; max-width: 400px; }
1586 .col5    { float:left; width:41.6666%; max-width: 500px; }
1587 .col6    { float:left; width:50.0000%; max-width: 600px; }
1588 .col7    { float:left; width:58.3333%; }
1589 .col8    { float:left; width:66.6666%; }
1590 .col9    { float:left; width:75.0000%; }
1591 .col10   { float:left; width:83.3333%; }
1592 .col11   { float:left; width:91.6666%; }
1593 .col12   { float:left; width:100.0000%; }
1594
1595 /* UI Lists
1596 ------------------------------------------------------- */
1597
1598 ul li { list-style: none;}
1599
1600 .toggle-list > label {
1601     position: relative;
1602     padding: 5px 10px;
1603     display: block;
1604     height: 30px;
1605     background-color: white;
1606     color: #7092FF;
1607     cursor: pointer;
1608        -moz-transition: all 100ms;
1609          -o-transition: all 100ms;
1610             transition: all 100ms;
1611 }
1612
1613 .toggle-list > label:hover {
1614     background-color: #ececec;
1615 }
1616
1617 .toggle-list > label:not(:last-child) {
1618     border-bottom: 1px solid #ccc;
1619 }
1620
1621 .toggle-list > label:last-child {
1622     border-radius: 0 0 3px 3px;
1623 }
1624
1625 .toggle-list label > span {
1626     display: block;
1627     overflow: hidden;
1628     white-space: nowrap;
1629     text-overflow: ellipsis;
1630 }
1631
1632 .toggle-list > label.active {
1633     background: #E8EBFF;
1634 }
1635
1636 .link-list li {
1637     float: right;
1638     border-left: 1px solid rgba(255,255,255,.5);
1639     padding: 5px 0 5px 5px;
1640     margin-left: 5px;
1641 }
1642
1643 ul.link-list li:last-child {
1644     border-left: 0;
1645     margin-left: 0;
1646     padding-left: 0;
1647 }
1648
1649 /* Utility Classes
1650 ------------------------------------------------------- */
1651 .fillL {
1652     background: white;
1653     color: #333;
1654 }
1655
1656 .fillL2 {
1657     background: #f6f6f6;
1658     color: #333;
1659 }
1660
1661 .fillL3 {
1662     background: #ececec;
1663     color: #333;
1664 }
1665
1666 .fillD {
1667     background:rgba(0,0,0,.5);
1668     color: white;
1669 }
1670
1671 .fl { float: left;}
1672 .fr { float: right;}
1673
1674 div.hide,
1675 form.hide,
1676 button.hide,
1677 a.hide {
1678     display: none;
1679 }
1680
1681 .deemphasize {
1682     color: #a9a9a9;
1683 }
1684
1685 .content {
1686     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
1687 }
1688
1689 .loading {
1690     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
1691     background-size:5px 5px;
1692 }
1693
1694 .panewrap {
1695     position:absolute;
1696     width:200%;
1697     height:100%;
1698     right: -100%;
1699 }
1700
1701
1702 .pane {
1703     position:absolute;
1704     width:50%;
1705     top: 0;
1706     bottom: 30px;
1707 }
1708
1709 .pane:first-child {
1710     left: 0;
1711 }
1712
1713 .pane:last-child {
1714     right: 0;
1715 }
1716
1717 /* Buttons */
1718
1719 button {
1720     text-align: center;
1721     line-height:20px;
1722     border:0;
1723     background: white;
1724     font-weight: bold;
1725     color:#333;
1726     font-size:12px;
1727     display: inline-block;
1728     height:40px;
1729     border-radius:4px;
1730     /* Crashes Safari: https://github.com/openstreetmap/iD/issues/1188 */
1731     /*-webkit-transition: all 100ms;*/
1732        -moz-transition: all 100ms;
1733          -o-transition: all 100ms;
1734             transition: all 100ms;
1735 }
1736
1737 button:focus,
1738 button:hover {
1739     background-color: #ececec;
1740 }
1741
1742 button[disabled],
1743 button.disabled {
1744     background-color: rgba(255,255,255,.25);
1745     color: rgba(0,0,0,.5);
1746     cursor: auto;
1747 }
1748
1749 button.active {
1750     background: #7092ff;
1751 }
1752
1753 button.minor {
1754     position: absolute;
1755     top: 0;
1756     right: 0;
1757     height: 100%;
1758     width: 10%;
1759     border-radius: 0;
1760     background-color: #fafafa;
1761 }
1762
1763 button.minor .icon {
1764     opacity: .5;
1765 }
1766
1767 button.minor:hover {
1768     background-color: #f1f1f1;
1769 }
1770
1771 .button-wrap {
1772     display: inline-block;
1773     padding-right:10px;
1774     margin: 0;
1775 }
1776
1777 .button-wrap button:only-child {
1778     width: 100%;
1779 }
1780
1781 .button-wrap:last-of-type {
1782     padding-right: 0;
1783 }
1784
1785 .joined button {
1786     border-radius:0;
1787     border-right: 1px solid rgba(0,0,0,.5);
1788 }
1789
1790 .joined button:first-child {
1791     border-radius:4px 0 0 4px;
1792 }
1793
1794 .joined button:last-child {
1795     border-right-width: 0;
1796     border-radius:0 4px 4px 0;
1797 }
1798
1799 button.action {
1800     background: #7092ff;
1801 }
1802
1803 button.action:focus,
1804 button.action:hover {
1805     background: #597BE7;
1806 }
1807
1808 button.save.has-count {
1809     padding: 9px;
1810 }
1811
1812 button.save .count {
1813     display: none;
1814 }
1815
1816 button.save.has-count .count {
1817     display: block;
1818     position: absolute;
1819     top: 5px;
1820     background: rgba(255, 255, 255, .5);
1821     color: #333;
1822     padding: 10px;
1823     height: 30px;
1824     line-height: 12px;
1825     border-radius: 4px;
1826     margin: auto;
1827     margin-left: 8.3333%;
1828 }
1829
1830 button.save.has-count .count::before {
1831     content: "";
1832     margin: auto;
1833     width: 0;
1834     height: 0;
1835     position: absolute;
1836     left: -6px;
1837     top: 0;
1838     bottom: 0;
1839     border-top:    6px solid transparent;
1840     border-bottom: 6px solid transparent;
1841     border-right:  6px solid rgba(255,255,255,.5);
1842 }
1843
1844 /* Icons */
1845
1846 .icon {
1847   display:inline-block;
1848   vertical-align:top;
1849   width:20px;
1850   height:20px;
1851   background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 0;
1852   text-indent:-9999px;
1853   overflow:hidden;
1854   }
1855
1856 .icon-pre-text {
1857     margin-right: 3px;
1858 }
1859
1860 .user-icon {
1861     max-height: 20px;
1862     max-width: 20px;
1863     height: auto;
1864     width: auto;
1865     border-radius: 3px;
1866 }
1867
1868 /* Definitions for every icon */
1869 .icon.alert     { background-position:   0 0;}
1870 .icon.point,
1871 .icon.add-point  { background-position: -20px 0;}
1872 .icon.line,
1873 .icon.add-line   { background-position: -40px 0;}
1874 .icon.area,
1875 .icon.add-area   { background-position: -60px 0;}
1876 .icon.undo       { background-position: -80px 0;}
1877 .icon.redo       { background-position: -100px 0;}
1878 .icon.apply      { background-position: -120px 0;}
1879 .icon.save       { background-position: -140px 0;}
1880 .icon.close      { background-position: -160px 0;}
1881 .icon.delete     { background-position: -180px 0;}
1882 .icon.remove     { background-position: -200px 0;}
1883 .icon.inspect    { background-position: -220px 0;}
1884 .icon.plus       { background-position: -240px 0;}
1885 .icon.search     { background-position: -280px 0;}
1886 .icon.geocode    { background-position: -280px 0;}
1887 .icon.layers     { background-position: -300px 0;}
1888 .icon.avatar     { background-position: -320px 0;}
1889 .icon.nearby     { background-position: -340px 0;}
1890 .icon.geolocate  { background-position: -360px 0;}
1891 .icon.warning    { background-position: -380px 0;}
1892 .icon.bug        { background-position: -400px 0;}
1893 .icon.back       { background-position: -420px 0;}
1894 .icon.forward    { background-position: -440px 0;}
1895 .icon.help       { background-position: -460px 0;}
1896 .icon.relation    { background-position: -520px 0;}
1897 .icon.relation.route         { background-position: -540px 0;}
1898 .icon.relation.multipolygon  { background-position: -560px 0;}
1899 .icon.vertex     { background-position: -580px 0;}
1900
1901 .icon.inspect.light    { background-position: -220px -20px;}
1902 .icon.plus.light       { background-position: -240px -20px;}
1903 .icon.zoom-in          { background-position: -240px -20px;}
1904 .icon.zoom-out         { background-position: -260px -20px;}
1905 .icon.geocode.light    { background-position: -280px -20px;}
1906 .icon.layers.light     { background-position: -300px -20px;}
1907 .icon.avatar.light     { background-position: -320px -20px;}
1908 .icon.nearby.light     { background-position: -340px -20px;}
1909 .icon.geolocate.light  { background-position: -360px -20px;}
1910 .icon.bug.light        { background-position: -400px -20px;}
1911 .icon.help.light       { background-position: -460px -20px;}
1912
1913 .icon.back.blue        { background-position: -420px -20px;}
1914 .icon.forward.blue     { background-position: -440px -20px;}
1915
1916 button[disabled] .icon.alert      { background-position:   0 -40px;}
1917 button[disabled] .icon.add-point  { background-position: -20px -40px;}
1918 button[disabled] .icon.add-line   { background-position: -40px -40px;}
1919 button[disabled] .icon.add-area   { background-position: -60px -40px;}
1920 button.disabled  .icon.undo       { background-position: -80px -40px;}
1921 button.disabled  .icon.redo       { background-position: -100px -40px;}
1922 button[disabled] .apply.icon      { background-position: -120px -40px;}
1923 button[disabled] .close.icon      { background-position: -160px -40px;}
1924 button[disabled] .delete.icon     { background-position: -180px -40px;}
1925 button[disabled] .icon.remove     { background-position: -200px -40px;}
1926 button[disabled] .icon.inspect    { background-position: -220px -40px;}
1927 button[disabled] .icon.zoom-in    { background-position: -240px -40px;}
1928 button[disabled] .icon.zoom-out   { background-position: -260px -40px;}
1929 button[disabled] .icon.geocode    { background-position: -280px -40px;}
1930 button[disabled] .icon.layers     { background-position: -300px -40px;}
1931 button[disabled] .icon.avatar     { background-position: -320px -40px;}
1932 button[disabled] .icon.nearby     { background-position: -340px -40px;}
1933
1934 .icon.point.deleted  { background-position: -302px -80px;}
1935 .icon.line.deleted   { background-position: -320px -80px;}
1936 .icon.area.deleted   { background-position: -340px -80px;}
1937
1938 .icon.point.created  { background-position: -302px -100px;}
1939 .icon.line.created   { background-position: -320px -100px;}
1940 .icon.area.created   { background-position: -340px -100px;}
1941
1942 .icon.point.modified  { background-position: -22px 0; }
1943
1944 .icon.modified { opacity: .5; }
1945
1946 /* Out link is special */
1947
1948 .icon.out-link   { height: 14px; width: 14px; background-position: -500px 0;}
1949 a:hover .icon.out-link   { background-position: -500px -14px;}
1950
1951 .icon.plus-dark    { background-position: -240px -40px;}
1952
1953 /* Universal preset icons */
1954
1955 .icon.source     { background-position:   0 -200px;}
1956 .icon.address    { background-position: -20px -200px;}
1957 .icon.telephone  { background-position: -40px -200px;}
1958 .icon.website    { background-position: -60px -200px;}
1959 .icon.elevation  { background-position: -80px -200px;}
1960 .icon.wikipedia  { background-position: -100px -200px;}
1961 .icon.note       { background-position: -120px -200px;}
1962 .icon.wheelchair { background-position: -140px -200px;}
1963
1964 /* ToolBar / Persistent UI Elements
1965 ------------------------------------------------------- */
1966
1967 #bar {
1968     position: fixed;
1969     padding: 10px 0;
1970     left:0;
1971     top:0;
1972     right:0;
1973     height:60px;
1974     z-index: 1;
1975     min-width: 768px;
1976 }
1977
1978 /* Header for modals / panes
1979 ------------------------------------------------------- */
1980
1981 .header {
1982     border-bottom: 1px solid #ccc;
1983     height: 60px;
1984     position: relative;
1985 }
1986
1987 .header h3 {
1988     text-align: center;
1989     margin-bottom: 0;
1990     white-space: nowrap;
1991     text-overflow: ellipsis;
1992     overflow: hidden;
1993     padding: 20px;
1994 }
1995
1996 .header button,
1997 .modal > button {
1998     border-radius: 0;
1999     width: 40px;
2000     text-align: center;
2001     overflow: hidden;
2002 }
2003
2004 .header button {
2005     position: relative;
2006     height: 100%;
2007 }
2008
2009 .preset-list-pane .header button {
2010     position: absolute;
2011     right: 0;
2012     top: 0;
2013 }
2014
2015 .modal > button {
2016     position: absolute;
2017     right: 0;
2018     top: 0;
2019     height: 59px;
2020     z-index: 3;
2021 }
2022
2023 .footer {
2024     position: absolute;
2025     bottom: 0;
2026     padding: 5px 30px 5px 30px;
2027     border-top: 1px solid #ccc;
2028     background-color: #fafafa;
2029     width: 100%;
2030 }
2031
2032 .sidebar-component .body {
2033     width: 100%;
2034     overflow: auto;
2035     top: 60px;
2036     bottom: 0;
2037     position: absolute;
2038 }
2039
2040 /* Inspector
2041 ------------------------------------------------------- */
2042
2043 #sidebar {
2044     position: relative;
2045     float: left;
2046     height: 100%;
2047     overflow: hidden;
2048     z-index: 2;
2049     background: #f6f6f6;
2050 }
2051
2052 .sidebar-component {
2053     position: absolute;
2054     top: 0;
2055     left: 0;
2056     bottom: 0;
2057     right: 0;
2058 }
2059
2060 .inspector-wrap {
2061     width: 100%;
2062     height: 100%;
2063 }
2064
2065 .inspector-hidden {
2066     display: none;
2067 }
2068
2069 .inspector-body {
2070     overflow-y: scroll;
2071     overflow-x: hidden;
2072     position: absolute;
2073     right: 0;
2074     left: 0;
2075     bottom: 0;
2076 }
2077
2078 .mapillary-image {
2079     position: absolute;
2080     right: 0;
2081     bottom: 30px;
2082     width: 330px;
2083     height: 250px;
2084     padding: 5px;
2085     background-color: #fff;
2086 }
2087
2088 .mapillary-image a {
2089     display: block;
2090     position: absolute;
2091     height: auto;
2092     background-color: rgba(0,0,0,.5);
2093     bottom: 0;
2094     right: 0;
2095     padding: 5px 10px;
2096 }
2097
2098 .mapillary-image img {
2099     width: 100%;
2100     height: auto;
2101     display: block;
2102 }
2103
2104 .mapillary-image.hidden {
2105     visibility: hidden;
2106 }
2107
2108 .mapillary-image.temp button {
2109     display: none;
2110 }
2111
2112 .mapillary-image button {
2113     border-radius: 0;
2114     padding: 5px;
2115     position: absolute;
2116     right: 0;
2117     top: 0;
2118 }
2119
2120 .feature-list-pane .inspector-body {
2121     top: 120px;
2122 }
2123
2124 .preset-list-pane .inspector-body {
2125     top: 120px;
2126 }
2127
2128 .entity-editor-pane .inspector-body {
2129     top: 60px;
2130 }
2131
2132 .selection-list-pane .inspector-body {
2133     top: 60px;
2134 }
2135
2136 .inspector-inner {
2137     padding: 20px;
2138     position: relative;
2139 }
2140
2141 #sidebar .search-header .icon {
2142     display: block;
2143     position: absolute;
2144     left: 10px;
2145     top: 80px;
2146     pointer-events: none;
2147 }
2148
2149 #sidebar .search-header input {
2150     position: absolute;
2151     top: 60px;
2152     height: 60px;
2153     width: 100%;
2154     padding: 5px 10px;
2155     border-radius: 0;
2156     border-width: 0;
2157     border-bottom-width: 1px;
2158     text-indent: 30px;
2159     font-size: 18px;
2160     font-weight: bold;
2161 }
2162
2163 /* Feature list */
2164
2165 .feature-list  {
2166     width:100%;
2167 }
2168
2169 .no-results-item,
2170 .geocode-item,
2171 .feature-list-item {
2172     width: 100%;
2173     position: relative;
2174     border-bottom: 1px solid #ccc;
2175     border-radius: 0;
2176 }
2177
2178 .feature-list-item .label {
2179     text-align: left;
2180     padding: 5px 10px;
2181     white-space: nowrap;
2182     text-overflow: ellipsis;
2183     overflow: hidden;
2184     border-left: 1px solid rgba(0, 0, 0, .1);
2185     -moz-transition: all 100ms;
2186     -o-transition: all 100ms;
2187     transition: all 100ms;
2188 }
2189
2190 .feature-list-item .label .icon {
2191     opacity: .5;
2192 }
2193
2194 .feature-list-item:hover .label {
2195     background-color: #ececec;
2196 }
2197
2198 .feature-list-item .entity-type {
2199     color:#7092ff;
2200 }
2201
2202 .feature-list-item:hover .entity-type {
2203     color:#597be7;
2204 }
2205
2206 .feature-list-item .entity-name {
2207     font-weight: normal;
2208     color: #666;
2209     padding-left: 10px;
2210 }
2211
2212 /* Presets
2213 ------------------------------------------------------- */
2214
2215 /* Preset grid  */
2216
2217 .preset-list  {
2218     width:100%;
2219     padding: 20px 20px 10px 20px;
2220     border-bottom: 1px solid #ccc;
2221 }
2222
2223 .preset-list-button-wrap {
2224     position: relative;
2225     margin-bottom: 10px;
2226     height: 60px;
2227 }
2228
2229 .preset-list-button {
2230     width: 100%;
2231     height: 100%;
2232     position: relative;
2233     border: 1px solid #ccc;
2234 }
2235
2236 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
2237     background: #ececec;
2238 }
2239
2240 .preset-icon {
2241     position: absolute;
2242     top: 17px;
2243     left: 17px;
2244     margin: auto;
2245 }
2246
2247 .preset-icon-line,
2248 .preset-icon-relation {
2249     top: 0;
2250     left: 0;
2251 }
2252
2253 .preset-list-button .label {
2254     background-color: #f6f6f6;
2255     text-align: left;
2256     position: absolute;
2257     top: 0;
2258     bottom: 0;
2259     right: 0;
2260     padding: 5px 10px;
2261     left: 60px;
2262     line-height: 50px;
2263     white-space: nowrap;
2264     text-overflow: ellipsis;
2265     overflow: hidden;
2266     border-left: 1px solid rgba(0, 0, 0, .1);
2267     -moz-transition: all 100ms;
2268     -o-transition: all 100ms;
2269     transition: all 100ms;
2270     border-radius: 0 3px 3px 0;
2271     }
2272
2273 .preset-list-button:hover .label {
2274     background-color: #ececec;
2275 }
2276
2277 .preset-list-item button.tag-reference-button {
2278     height: 100%;
2279     border: 1px solid #CCC;
2280     border-radius: 0 3px 3px 0;
2281     position: absolute;
2282     top: 0;
2283     right: 0;
2284     width: 10%;
2285     background: #fafafa;
2286 }
2287
2288 .preset-list-item button.tag-reference-button .icon {
2289     opacity: .5;
2290 }
2291
2292 .current .preset-list-button,
2293 .current .preset-list-button .label {
2294     background-color: #E8EBFF;
2295 }
2296
2297 .category .preset-list-button:after,
2298 .category .preset-list-button:before {
2299     content: "";
2300     position: absolute;
2301     top: -5px;
2302     left: -1px; right: -1px;
2303     border: 1px solid #ccc;
2304     border-bottom: none;
2305     border-radius: 6px 6px 0 0;
2306     height: 6px;
2307 }
2308
2309 .category .preset-list-button:before {
2310     top: -3px;
2311 }
2312
2313 .subgrid .preset-list {
2314     padding: 10px 10px 0 10px;
2315     margin-top: 0;
2316     border: 0;
2317     border-radius: 8px;
2318     width: -webkit-calc(100% + 20px);
2319     margin-left: -10px;
2320 }
2321
2322 .subgrid .arrow {
2323     border: solid rgba(0, 0, 0, 0);
2324     border-width: 10px;
2325     border-bottom-color: #f1f1f1;
2326     width: 0;
2327     height: 0;
2328     margin-left: 50%;
2329     margin-left: -webkit-calc(50% - 10px);
2330     margin-top: -10px;
2331 }
2332
2333 /* Preset icon colors */
2334
2335 .preset-icon-fill-area {
2336     cursor: inherit;
2337     height: 39px;
2338     width: 39px;
2339     margin: auto;
2340     position: absolute;
2341     left: 10px;
2342     top: 10px;
2343 }
2344
2345 .preset-icon-fill-area:after {
2346     content: '';
2347     left: -4px;
2348     top: -4px;
2349     height: 45px;
2350     width: 45px;
2351     position: absolute;
2352     background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px;
2353 }
2354
2355 /* preset form basics */
2356
2357 .inspector-preset {
2358     overflow: hidden;
2359 }
2360
2361 .inspector-preset .preset-form {
2362     padding: 10px;
2363     margin: 0 10px 20px 10px;
2364     border-radius: 8px;
2365 }
2366
2367 .entity-editor-pane .preset-list-item::after {
2368     content: "";
2369     position: absolute;
2370     height: 0;
2371     width: 0;
2372     bottom: 0;
2373     left: 0;
2374     right: 0;
2375     margin: auto;
2376     border: solid rgba(0, 0, 0, 0);
2377     border-width: 10px;
2378     border-bottom-color: #ececec;
2379 }
2380
2381 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
2382     margin-bottom: 0;
2383 }
2384
2385
2386 .form-field {
2387     margin-bottom: 10px;
2388     width: 100%;
2389     -webkit-transition: margin-bottom 200ms;
2390        -moz-transition: margin-bottom 200ms;
2391          -o-transition: margin-bottom 200ms;
2392             transition: margin-bottom 200ms;
2393 }
2394
2395 .form-field:last-child {
2396     margin-bottom: 0;
2397 }
2398
2399 .form-label {
2400     position: relative;
2401     font-weight: bold;
2402     border: 1px solid #cfcfcf;
2403     padding: 5px 0 5px 10px;
2404     background: #f6f6f6;
2405     display: block;
2406     border-radius: 4px 4px 0 0;
2407     overflow: hidden;
2408 }
2409
2410 .form-label-button-wrap {
2411     position: absolute;
2412     top: 0;
2413     right: 0;
2414     height: 100%;
2415     width: 100%;
2416     background: transparent;
2417     text-align: right;
2418 }
2419
2420 .form-label-button-wrap .icon {
2421     opacity: .5;
2422 }
2423
2424 .form-label button {
2425     border-left: 1px solid #CCC;
2426     width: 10%;
2427     height: 100%;
2428     border-radius: 0;
2429     background: #fafafa;
2430 }
2431
2432 .form-label .modified-icon,
2433 .form-field .remove-icon {
2434     display: none;
2435 }
2436
2437 .modified .form-label .modified-icon,
2438 .present .form-label .remove-icon {
2439     display: inline-block;
2440 }
2441
2442 .form-field > input,
2443 .form-field > textarea,
2444 .form-field .preset-input-wrap {
2445     border: 1px solid #CCC;
2446     min-height: 30px;
2447     border-top: 0;
2448     border-radius: 0 0 4px 4px;
2449 }
2450
2451 .form-field textarea {
2452     height: 65px;
2453 }
2454
2455 .inspector-border {
2456     border-bottom: 1px solid #CCC
2457 }
2458
2459 /* Preset form (hover mode) */
2460
2461 .inspector-hover .checkselect label:last-of-type,
2462 .inspector-hover .preset-input-wrap .label,
2463 .inspector-hover input,
2464 .inspector-hover label {
2465     background: #ececec;
2466 }
2467
2468 .inspector-hover a,
2469 .inspector-hover .checkselect label:last-of-type {
2470     color: #666;
2471 }
2472
2473 /* hide and remove from layout */
2474 .inspector-hidden,
2475 .inspector-hover label input[type="checkbox"],
2476 .inspector-hover label input[type="radio"],
2477 .inspector-hover .toggle-list label,
2478 .inspector-hover .toggle-list label span,
2479 .inspector-hover .inspector-inner .add-tag,
2480 .inspector-hover .inspector-inner .add-relation,
2481 .inspector-hover .toggle-list label.remove .icon {
2482     height: 0;
2483     width: 0;
2484     overflow: hidden;
2485     opacity: 0 !important;
2486     border-width: 0;
2487     margin: 0;
2488     padding: 0;
2489 }
2490
2491 /* hide but preserve in layout */
2492 .inspector-hover .entity-editor-pane button.minor,
2493 .inspector-hover .combobox-caret,
2494 .inspector-hover .entity-editor-pane .header button,
2495 .inspector-hover .spin-control,
2496 .inspector-hover .hide-toggle:before,
2497 .inspector-hover .more-buttons,
2498 .inspector-hover .form-label-button-wrap,
2499 .inspector-hover .tag-reference-button,
2500 .inspector-hover .view-on-osm {
2501     opacity: 0;
2502 }
2503
2504 /* Styles for raw tag inspector on hover */
2505 .inspector-hover .tag-row .key-wrap,
2506 .inspector-hover .tag-row .input-wrap-position {
2507     width: 50%;
2508 }
2509
2510 .inspector-hover .tag-row:first-child input.value {
2511     border-top-right-radius: 4px;
2512 }
2513
2514 .inspector-hover .tag-row:last-child input.value {
2515     border-bottom-right-radius: 4px;
2516 }
2517
2518 .inspector-hover .tag-row:last-child input.key {
2519     border-bottom-left-radius: 4px;
2520 }
2521
2522 .inspector-hover .inspector-body .more-buttons {
2523     max-height: 0;
2524     padding-bottom: 0;
2525 }
2526
2527 /* Unstyle button fields */
2528 .inspector-hover .toggle-list label.active,
2529 .inspector-hover .entity-editor-pane a.hide-toggle {
2530     opacity: 1;
2531     background-color: transparent;
2532     color: #666;
2533     padding-left: 0;
2534     border-width: 0;
2535 }
2536
2537 .inspector-hover .toggle-list button.active {
2538     padding-left: 10px;
2539 }
2540
2541 /* Add placeholder only on hover for radio buttons */
2542 .inspector-hover .toggle-list .placeholder {
2543     color: #a9a9a9;
2544     padding: 5px 10px;
2545     opacity: 1;
2546     line-height: 20px;
2547     width: 100%;
2548 }
2549
2550 /* Hide placeholder for radio buttons if another is active, or not in hover state */
2551 .toggle-list label.active ~ .placeholder,
2552 .toggle-list .placeholder {
2553     padding: 0;
2554     opacity: 0;
2555     width: 0;
2556     line-height: 0;
2557     display: block;
2558     overflow: hidden;
2559     -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2560        -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2561          -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2562             transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms;
2563 }
2564
2565 /* first phase hover-to-active animations */
2566
2567 textarea,
2568 .form-label,
2569 .preset-input-wrap,
2570 .preset-input-wrap .label {
2571     -webkit-transition: all 200ms;
2572        -moz-transition: all 200ms;
2573          -o-transition: all 200ms;
2574             transition: all 200ms;
2575 }
2576
2577 /* second phase hover-to-active animations */
2578
2579 input,
2580 .checkselect label:last-of-type {
2581     -webkit-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2582        -moz-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2583          -o-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2584             transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms;
2585 }
2586
2587 .entity-editor-pane button.minor,
2588 .combobox-caret,
2589 .entity-editor-pane .header button,
2590 .toggle-list label span,
2591 .spin-control,
2592 .more-buttons,
2593 .view-on-osm,
2594 .hide-toggle:before,
2595 .entity-editor-pane .toggle-list label::before,
2596 .entity-editor-pane .toggle-list label.remove .icon {
2597     -webkit-transition: opacity 200ms 200ms;
2598        -moz-transition: opacity 200ms 200ms;
2599          -o-transition: opacity 200ms 200ms;
2600             transition: opacity 200ms 200ms;
2601 }
2602
2603 .entity-editor-pane a.hide-toggle {
2604     -webkit-transition: padding-left 200ms 200ms, color 200ms 200ms;
2605        -moz-transition: padding-left 200ms 200ms, color 200ms 200ms;
2606          -o-transition: padding-left 200ms 200ms, color 200ms 200ms;
2607             transition: padding-left 200ms 200ms, color 200ms 200ms;
2608 }
2609
2610 .entity-editor-pane .toggle-list label:not(.active) {
2611     -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2612        -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2613          -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2614             transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms;
2615 }
2616
2617 .entity-editor-pane .toggle-list label {
2618     -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2619        -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2620          -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2621             transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms;
2622 }
2623
2624 /* adding additional preset fields */
2625
2626 .inspector-body .more-buttons {
2627     max-height: 100px;
2628     padding-top: 0;
2629     -webkit-transition: padding 200ms 200ms, max-height 200ms 200ms;
2630        -moz-transition: padding 200ms 200ms, max-height 200ms 200ms;
2631          -o-transition: padding 200ms 200ms, max-height 200ms 200ms;
2632             transition: padding 200ms 200ms, max-height 200ms 200ms;
2633 }
2634
2635 button.preset-add-field {
2636     background: #f6f6f6;
2637     width: 25%;
2638     height: 40px;
2639     -webkit-transition: width 200ms;
2640        -moz-transition: width 200ms;
2641          -o-transition: width 200ms;
2642             transition: width 200ms;
2643 }
2644
2645 button.preset-add-field:hover {
2646     background: #ececec;
2647 }
2648
2649 /* set width based on # of buttons */
2650
2651 button.preset-add-field:only-child {
2652     width: 100%;
2653 }
2654
2655 button.preset-add-field:nth-last-child(2),
2656 button.preset-add-field:nth-last-child(2) ~ button.preset-add-field {
2657     width: 50%;
2658 }
2659
2660 button.preset-add-field:nth-last-child(3),
2661 button.preset-add-field:nth-last-child(3) ~ button.preset-add-field {
2662     width: 33.3333%;
2663 }
2664
2665 button.preset-add-field:nth-last-child(4),
2666 button.preset-add-field:nth-last-child(4) ~ button.preset-add-field {
2667     width: 25%;
2668 }
2669
2670 button.preset-add-field:nth-last-child(5),
2671 button.preset-add-field:nth-last-child(5) ~ button.preset-add-field {
2672     width: 20%;
2673 }
2674
2675 button.preset-add-field:nth-last-child(6),
2676 button.preset-add-field:nth-last-child(6) ~ button.preset-add-field {
2677     width: 16.6666%;
2678 }
2679
2680 button.preset-add-field:nth-last-child(7),
2681 button.preset-add-field:nth-last-child(7) ~ button.preset-add-field {
2682     width: 14.2857%;
2683 }
2684
2685 button.preset-add-field:nth-last-child(8),
2686 button.preset-add-field:nth-last-child(8) ~ button.preset-add-field {
2687     width: 12.5%;
2688 }
2689
2690 .preset-fav button.fav {
2691     height: 30px;
2692     margin: 5px;
2693     padding: 0 10px;
2694 }
2695
2696 /* preset form access */
2697
2698 .preset-input-wrap .label {
2699     height: 30px;
2700     background: #F6F6F6;
2701     padding: 5px 10px;
2702 }
2703
2704 .form-field-access .preset-input-wrap li {
2705     border-bottom: 1px solid #CCC;
2706 }
2707 .form-field-access .preset-input-wrap li:last-child {
2708     border-bottom: 0;
2709 }
2710
2711 .preset-input-access-wrap input {
2712     border-radius: 0;
2713     border-width: 0;
2714     border-left-width: 1px;
2715 }
2716
2717 .preset-input-wrap li:last-child input {
2718     border-bottom-right-radius: 4px;
2719 }
2720
2721 /* preset form numbers */
2722
2723 input[type=number] {
2724     position: relative;
2725     padding-right: 20%;
2726 }
2727
2728 .spin-control {
2729     width: 20%;
2730     height: 29px;
2731     display: inline-block;
2732     margin-left: -20%;
2733     margin-bottom: -11px;
2734     position: relative;
2735 }
2736
2737 .spin-control button {
2738     right: 1px;
2739     position: relative;
2740     float: left;
2741     height: 100%;
2742     width: 50%;
2743     border-left: 1px solid #CCC;
2744     border-radius: 0;
2745     background: rgba(0, 0, 0, 0);
2746 }
2747
2748 .spin-control button.decrement {
2749     border-bottom-right-radius: 3px;
2750 }
2751
2752 .spin-control button.decrement::after,
2753 .spin-control button.increment::after {
2754     content:"";
2755     height: 0; width: 0;
2756     position: absolute;
2757     left: 0; right: 0; bottom: 0; top: 0;
2758     margin: auto;
2759 }
2760
2761 .spin-control button.decrement::after {
2762     border-top: 5px solid #CCC;
2763     border-left: 5px solid transparent;
2764     border-right: 5px solid transparent;
2765 }
2766
2767 .spin-control button.increment::after {
2768     border-bottom: 5px solid #CCC;
2769     border-left: 5px solid transparent;
2770     border-right: 5px solid transparent;
2771 }
2772
2773 /* preset form checkbox */
2774
2775 .checkselect label:last-of-type {
2776     display: block;
2777     background: white;
2778     padding: 5px 10px;
2779     color: #7092FF;
2780 }
2781
2782 .checkselect label:hover {
2783     background: #f1f1f1;
2784 }
2785
2786 .checkselect .set {
2787     color: inherit;
2788 }
2789
2790 .checkselect label:not(.set) input[type="checkbox"] {
2791     opacity: .5;
2792 }
2793
2794 /* Preset form radio button */
2795
2796 .toggle-list button.remove {
2797     border-radius: 0 0 3px 3px;
2798 }
2799
2800 .toggle-list button.remove .icon {
2801     position: absolute;
2802     left: 5px;
2803 }
2804
2805 .toggle-list button.remove::before {
2806     content: none;
2807 }
2808
2809 .form-field .wiki-lang {
2810     border-radius: 0;
2811 }
2812
2813 .form-field .wiki-title {
2814     padding-right: 10%;
2815 }
2816
2817 .form-field .wiki-title ~ .combobox-caret {
2818     margin-left: -18%;
2819     margin-right: 9%;
2820 }
2821
2822 .form-field .wiki-link {
2823     float: right;
2824     background: #fafafa;
2825     padding: 5px;
2826     text-align: center;
2827 }
2828
2829 .form-field .wiki-link:hover {
2830     background: #f1f1f1;
2831 }
2832
2833 #preset-input-maxspeed {
2834     border-right: none;
2835     border-radius: 0 0 0 4px;
2836     width: 80%;
2837 }
2838
2839 .form-field .maxspeed-unit {
2840     border-radius: 0 0 4px 0;
2841     width: 20%;
2842 }
2843
2844 /* Name + translate form */
2845
2846 .form-field .localized-main {
2847     padding-right: 10%;
2848 }
2849
2850 .form-field .button-input-action {
2851     position: relative;
2852     right: 1px;
2853     width: 10%;
2854     margin-left: -10%;
2855     border: 1px solid #CCC;
2856     border-top-width: 0;
2857     border-right-width: 0;
2858     border-radius: 0 0 4px 0;
2859     height: 30px;
2860     vertical-align: top;
2861 }
2862
2863 .form-field .localized-wrap {
2864     padding: 0 10px;
2865 }
2866
2867 .form-field .localized-wrap .entry {
2868     position: relative;
2869     overflow: hidden;
2870 }
2871
2872 .form-field .localized-wrap .entry::before {
2873     content: "";
2874     display: block;
2875     position: absolute;
2876     background:#ccc;
2877     height: 11px;
2878     width: 1px;
2879     left: 0;
2880     right: 0;
2881     top: -11px;
2882     margin: auto;
2883 }
2884
2885 .form-field .localized-wrap .entry .localized-lang {
2886     border-radius: 0;
2887     border-top-width: 0;
2888 }
2889
2890 .form-field .localized-wrap .entry .localized-value {
2891     border-top-width: 0;
2892     border-radius: 0 0 4px 4px;
2893 }
2894
2895 .form-field .localized-wrap .form-label button {
2896     border-top-right-radius: 3px;
2897 }
2898
2899 /* Preset form address */
2900
2901 .addr-row input {
2902     border-right: 0;
2903     border-bottom: 0;
2904 }
2905
2906 .addr-row:first-of-type input {
2907     border-top: 0;
2908 }
2909
2910 .addr-row input:first-of-type {
2911     border-left: 0;
2912 }
2913
2914 .addr-row input {
2915     border-radius: 0;
2916 }
2917
2918 .addr-row:last-of-type input:first-of-type {
2919     border-radius: 0 0 0 4px;
2920 }
2921
2922 .addr-row:last-of-type input:last-of-type {
2923     border-radius: 0 0 4px 0;
2924 }
2925
2926 /* Restrictions editor */
2927
2928 .form-field-restrictions .preset-input-wrap {
2929     position: relative;
2930     height: 300px;
2931 }
2932
2933 .form-field-restrictions svg {
2934     width: 100%;
2935     height: 100%;
2936 }
2937
2938 .form-field-restrictions .restriction-help {
2939     z-index: 1;
2940     position: absolute;
2941     top: 0;
2942     left: 0;
2943     right: 0;
2944     padding: 2px 6px;
2945     background-color: rgba(255, 255, 255, .8);
2946     color: #999;
2947     text-align: center;
2948 }
2949
2950 /* combobox dropdown */
2951
2952 div.combobox {
2953     z-index: 9999;
2954     display: none;
2955     box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
2956     margin-top: -1px;
2957     background: white;
2958     max-height: 120px;
2959     overflow-y: auto;
2960     overflow-x: hidden;
2961     border: 1px solid #ccc;
2962     border-radius: 0 0 4px 4px;
2963 }
2964
2965 .combobox a {
2966     display: block;
2967     padding: 5px 10px;
2968     border-top:1px solid #ccc;
2969     text-overflow: ellipsis;
2970     white-space: nowrap;
2971     overflow: hidden;
2972 }
2973
2974 .combobox a.selected,
2975 .combobox a:hover {
2976     background: #ececec;
2977 }
2978
2979 .combobox a:first-child {
2980     border-top: 0;
2981 }
2982
2983 .combobox-caret {
2984     display: inline-block;
2985     position: relative;
2986     height: 30px;
2987     width: 30px;
2988     margin-left: -30px;
2989     vertical-align: top;
2990 }
2991
2992 .combobox-caret::after {
2993     content:"";
2994     height: 0; width: 0;
2995     position: absolute;
2996     left: 0; right: 0; bottom: 0; top: 0;
2997     margin: auto;
2998     border-top: 5px solid #ccc;
2999     border-left: 5px solid transparent;
3000     border-right: 5px solid transparent;
3001 }
3002
3003 /* Raw Tag Editor */
3004
3005 .tag-list {
3006     padding-top: 10px;
3007 }
3008
3009 .tag-row {
3010     width: 100%;
3011     position: relative;
3012     clear: both;
3013 }
3014
3015 .tag-row input {
3016     height: 31px;
3017     border: 0;
3018     border-radius: 0;
3019     border-bottom: 1px solid #CCC;
3020     border-left: 1px solid #CCC;
3021 }
3022
3023 .tag-row .key-wrap,
3024 .tag-row .input-wrap-position {
3025     width: 40%;
3026     float: left;
3027     height: 30px;
3028     -webkit-transition: width 200ms;
3029        -moz-transition: width 200ms;
3030          -o-transition: width 200ms;
3031             transition: width 200ms;
3032 }
3033
3034 .tag-row input.key {
3035     font-weight: bold;
3036     background-color: #f6f6f6;
3037 }
3038
3039 .tag-row input.value {
3040     border-right: 1px solid #CCC;
3041 }
3042
3043 .tag-row:first-child input.key {
3044     border-top: 1px solid #CCC;
3045     border-top-left-radius: 4px;
3046 }
3047
3048 .tag-row:first-child input.value {
3049     border-top: 1px solid #CCC;
3050 }
3051
3052 .tag-row button {
3053     position: absolute;
3054     height: 31px;
3055     right: 10%;
3056     border: 1px solid #CCC;
3057     border-top-width: 0;
3058     border-left-width: 0;
3059 }
3060
3061 .tag-row button:hover {
3062     background: #f1f1f1;
3063 }
3064
3065 .tag-row button .icon {
3066     opacity: .5;
3067 }
3068
3069 .tag-row:first-child button {
3070     border-top-width: 1px;
3071 }
3072
3073 .tag-row:first-child .tag-reference-button {
3074     border-top-right-radius: 4px;
3075 }
3076
3077 .tag-row:last-child .tag-reference-button {
3078     border-bottom-right-radius: 4px;
3079 }
3080
3081 .tag-row .tag-reference-button {
3082     right: 0;
3083     border-radius: 0;
3084     width: 10%;
3085     top: 0;
3086     background: #fafafa;
3087 }
3088
3089 /* Adding form fields to tag editor */
3090
3091 .inspector-inner .add-tag {
3092     width: 40%;
3093     height: 30px;
3094     border-top: 0;
3095     background: rgba(0,0,0,.5);
3096     border-radius: 0 0 4px 4px;
3097 }
3098
3099 .inspector-inner .add-tag:hover {
3100     background: rgba(0,0,0,.8);
3101 }
3102
3103 .inspector-inner .add-tag .label {
3104     display: none;
3105 }
3106
3107 /* Tag reference */
3108
3109 button.minor.tag-reference-loading {
3110     background-color: #f5f5f5;
3111 }
3112
3113 .tag-reference-loading .icon {
3114     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
3115     background-position: 0 0;
3116 }
3117
3118 .tag-reference-body {
3119     overflow: hidden;
3120     clear: both;
3121 }
3122
3123 .tag-reference-body p,
3124 .tag-reference-body img {
3125     margin-top: 20px;
3126 }
3127
3128 .tag-reference-body p:last-child {
3129     padding-bottom: 10px;
3130 }
3131
3132 .tag-reference-body a {
3133     display: block;
3134     padding-bottom: 10px;
3135 }
3136
3137 .preset-list .tag-reference-body {
3138     position: relative;
3139     width: 100%;
3140 }
3141
3142 .preset-list .tag-reference-body a {
3143     padding-bottom: 20px;
3144 }
3145
3146 .preset-list .tag-reference-body p,
3147 .preset-list .tag-reference-body img {
3148     margin-top: 10px;
3149 }
3150
3151 .raw-tag-editor .tag-reference-body {
3152     border-bottom: 1px solid #ccc;
3153     float: left;
3154     width: 100%;
3155 }
3156
3157 .raw-tag-editor .tag-reference-body p:last-child {
3158     padding-bottom: 20px;
3159 }
3160
3161 .raw-tag-editor .tag-reference-body a {
3162     padding-bottom: 20px;
3163 }
3164
3165 img.wiki-image {
3166     float: right;
3167     width: 33.3333%;
3168     width: -webkit-calc(33.3333% - 10px);
3169     width: calc(33.3333% - 10px);
3170     margin-left: 20px;
3171     margin-right: 10px;
3172     border-radius: 4px;
3173     max-height: 200px;
3174     margin-bottom: 20px;
3175 }
3176
3177 /* Raw relation membership editor */
3178
3179 .raw-member-editor .member-list li:first-child,
3180 .raw-membership-editor .member-list li:first-child {
3181     padding-top: 10px;
3182 }
3183
3184 .raw-member-editor .member-row,
3185 .raw-membership-editor .member-row {
3186     position: relative;
3187 }
3188
3189 .raw-member-editor .member-row .member-entity-name,
3190 .raw-membership-editor .member-row .member-entity-name {
3191     font-weight: normal;
3192     padding-left: 10px;
3193 }
3194
3195 .member-incomplete .member-delete {
3196     display: none;
3197 }
3198
3199 .member-row-new .member-entity-input {
3200     border-radius: 4px 4px 0 0;
3201     border: 1px solid #cfcfcf;
3202 }
3203
3204 .add-relation {
3205     width: 40%;
3206     height: 30px;
3207     background: rgba(0,0,0,.5);
3208     border-radius: 4px;
3209     margin-top: 10px;
3210 }
3211
3212 .add-relation:hover {
3213     background: rgba(0,0,0,.8);
3214 }
3215
3216 /* Map Controls */
3217
3218 .map-controls {
3219     right: 0;
3220     top: 70px;
3221     width: 40px;
3222     position: fixed;
3223     z-index: 100;
3224 }
3225
3226 .map-control > button {
3227     width: 40px;
3228     background: rgba(0,0,0,.5);
3229     border-radius: 0;
3230 }
3231
3232 .map-control > button:hover {
3233     background: rgba(0, 0, 0, .8);
3234 }
3235
3236 .map-control > button.active,
3237 .map-control > button.active:hover {
3238     background: #7092ff;
3239 }
3240
3241 /* Zoomer */
3242
3243 .zoombuttons button.zoom-in {
3244     border-radius: 4px 0 0 0;
3245 }
3246
3247 /* Background Settings */
3248
3249 .background-control button {
3250     border-radius: 4px 0 0 0;
3251 }
3252
3253 .background-control {
3254     position: relative;
3255 }
3256
3257 .nudge-container {
3258     border: 1px solid #CCC;
3259 }
3260
3261 .background-control .adjustments button:last-child {
3262     border: 0;
3263 }
3264
3265 .background-control .hide-toggle  {
3266     padding-bottom: 10px;
3267 }
3268
3269 .layer-list {
3270     margin-bottom: 10px;
3271     border: 1px solid #CCC;
3272     border-radius: 4px;
3273 }
3274
3275 .layer-list li {
3276     position: relative;
3277     height: 30px;
3278     background-color: white;
3279     color: #7092FF;
3280 }
3281
3282 .layer-list > li:first-child {
3283     border-radius: 3px 3px 0 0;
3284 }
3285
3286 .layer-list > li:last-child {
3287     border-radius: 0 0 3px 3px;
3288 }
3289
3290 .layer-list > li:only-child {
3291     border-radius: 3px;
3292 }
3293
3294 .layer-list li:not(:last-child) {
3295     border-bottom: 1px solid #ccc;
3296 }
3297
3298 .layer-list li:hover {
3299     background-color: #ececec;
3300 }
3301
3302 .layer-list li.active {
3303     background: #E8EBFF;
3304 }
3305
3306 .layer-list label {
3307     display: block;
3308     padding: 5px 10px;
3309     cursor: pointer;
3310 }
3311
3312 .layer-list label > span {
3313     display: block;
3314     overflow: hidden;
3315     white-space: nowrap;
3316     text-overflow: ellipsis;
3317 }
3318
3319 .hide-toggle {
3320     display: block;
3321     padding-left:12px;
3322     position: relative;
3323 }
3324
3325 .hide-toggle:before {
3326     content: '';
3327     display: block;
3328     position: absolute;
3329     height: 0;
3330     width: 0;
3331     left: 0;
3332     top: 5px;
3333     border-top:  4px solid transparent;
3334     border-bottom:  4px solid transparent;
3335     border-left:  8px solid #7092ff;
3336 }
3337
3338 .hide-toggle.expanded:before {
3339     border-top:  8px solid #7092ff;
3340     border-bottom: 0;
3341     border-right:  4px solid transparent;
3342     border-left:  4px solid transparent;
3343 }
3344
3345 .background-control .nudge-container button {
3346     float: left;
3347     display: block;
3348     width:20%;
3349     border-right: 1px solid #CCC;
3350     position: relative;
3351 }
3352
3353 .background-control .nudge::after {
3354     content: '';
3355     display: block;
3356     position: absolute;
3357     margin: auto;
3358     left: 0; right: 0; top: 0; bottom: 0;
3359     height: 0;
3360     width: 0;
3361 }
3362
3363 .background-control .nudge.left::after {
3364     border-top:  5px solid transparent;
3365     border-bottom:  5px solid transparent;
3366     border-left:  5px solid #222;
3367 }
3368
3369 .background-control .nudge.right::after {
3370     border-top:  5px solid transparent;
3371     border-bottom:  5px solid transparent;
3372     border-right:  5px solid #222;
3373 }
3374
3375 .background-control .nudge.top::after {
3376     border-right:  5px solid transparent;
3377     border-left:  5px solid transparent;
3378     border-bottom:  5px solid #222;
3379 }
3380
3381 .background-control .nudge.bottom::after {
3382     border-right:  5px solid transparent;
3383     border-left:  5px solid transparent;
3384     border-top:  5px solid #222;
3385 }
3386
3387 .opacity-options {
3388     background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
3389     height:20px;
3390     width:82px;
3391     position: absolute;
3392     right: 50px;
3393     top: 20px;
3394     border: 1px solid #ccc;
3395 }
3396
3397 .opacity-options li {
3398     height: 100%;
3399     display: block;
3400     float: left;
3401 }
3402
3403 .opacity-options li .select-box{
3404     position: absolute;
3405     width:20px;
3406     height:18px;
3407     z-index: 9999;
3408 }
3409
3410 .background-control li:hover .select-box,
3411 .background-control li.selected .select-box {
3412     border: 2px solid #7092ff;
3413     background: rgba(89, 123, 231, .5);
3414     opacity: .5;
3415 }
3416
3417 .background-control li.selected:hover .select-box,
3418 .background-control li.selected .select-box {
3419     opacity: 1;
3420 }
3421
3422 .background-control .opacity {
3423     background:#222;
3424     display:inline-block;
3425     width:20px;
3426     height:18px;
3427 }
3428
3429 .background-control .layer-list button {
3430     float: right;
3431     height: 100%;
3432     width: 10%;
3433     border-left: 1px solid #CCC;
3434     border-radius: 0;
3435 }
3436
3437 .background-control .layer-list button .icon {
3438     opacity: 0.5;
3439 }
3440
3441 .background-control .layer-list button:first-of-type {
3442     border-radius: 0 3px 3px 0;
3443 }
3444
3445 /* Geolocator */
3446
3447 .geolocate-control {
3448     margin-bottom: 10px;
3449 }
3450
3451 .geolocate-control button {
3452     border-radius: 0 0 0 4px;
3453 }
3454
3455 .map-overlay.content {
3456     position: fixed;
3457     top:60px;
3458     bottom: 30px;
3459     padding: 20px 50px 20px 20px;
3460     right: 0;
3461     overflow: auto;
3462 }
3463
3464 .background-control .map-overlay {
3465     z-index: -1;
3466 }
3467 /* Help */
3468
3469 .help-control button {
3470     border-radius: 0 0 0 4px;
3471 }
3472
3473 .help-wrap p {
3474     font-size: 15px;
3475     margin-bottom: 20px;
3476 }
3477
3478 .help-wrap .left-content .body p code {
3479     padding:2px 4px;
3480     background:#eee;
3481 }
3482
3483 .help-wrap .toc {
3484     /* This is two columns, 41.66666 x .4 = 16.6666 */
3485     width:40%;
3486     float:right;
3487     margin-left: 20px;
3488     margin-bottom: 20px;
3489     padding-left: 5px
3490 }
3491
3492 .help-wrap .toc li a,
3493 .help-wrap .nav a {
3494     display: block;
3495     border: 1px solid #CCC;
3496     padding: 5px 10px;
3497 }
3498
3499 .help-wrap .toc li a {
3500     border-bottom: 0;
3501 }
3502
3503 .help-wrap .toc li a:hover,
3504 .help-wrap .nav a:hover  {
3505     background: #ececec;
3506 }
3507
3508 .help-wrap .toc li a.selected {
3509     background: #E8EBFF;
3510 }
3511
3512 .help-wrap .toc li:first-child a {
3513     border-radius: 4px 4px 0 0;
3514 }
3515
3516 .help-wrap .toc li:nth-last-child(2) a {
3517     border-bottom: 1px solid #CCC;
3518     border-radius: 0 0 4px 4px
3519 }
3520
3521 .help-wrap .toc li.walkthrough a {
3522     overflow: hidden;
3523     margin-top: 10px;
3524     border-bottom: 1px solid #ccc;
3525     border-radius: 4px;
3526 }
3527
3528 .help-wrap .nav {
3529     position: relative;
3530 }
3531
3532 .help-wrap .nav a {
3533     float: left;
3534     width: 50%;
3535     text-align: center;
3536 }
3537
3538 .help-wrap .nav a:first-child {
3539     border-radius: 4px 0 0 4px;
3540 }
3541
3542 .help-wrap .nav a:last-child:not(:only-child) {
3543     border-radius: 0 4px 4px 0;
3544     border-left: 0;
3545 }
3546
3547 .help-wrap .nav a:only-child {
3548     width: 100%;
3549     border-radius: 4px;
3550 }
3551
3552 /* Map
3553 ------------------------------------------------------- */
3554
3555 #map {
3556     position:relative;
3557     overflow:hidden;
3558     height:100%;
3559     background:#000;
3560 }
3561
3562 #supersurface {
3563     transform-origin:0 0;
3564     -ms-transform-origin:0 0;
3565     -webkit-transform-origin:0 0;
3566     -moz-transform-origin:0 0;
3567     -o-transform-origin:0 0;
3568     -moz-user-select: none;
3569     -webkit-user-select: none;
3570     -ms-user-select: none;
3571     user-select: none;
3572 }
3573
3574 #supersurface, .layer-layer {
3575     position: absolute;
3576     top: 0;
3577     left: 0;
3578     right: 0;
3579     bottom: 0;
3580 }
3581
3582 /* About Section
3583 ------------------------------------------------------- */
3584
3585 #footer {
3586     width: 100%;
3587     position: absolute;
3588     right:0;
3589     bottom:0;
3590     border-radius: 0;
3591     opacity: .625;
3592     -webkit-transition: opacity 200ms;
3593     -moz-transition: opacity 200ms;
3594     transition: opacity 200ms;
3595 }
3596
3597 #footer:hover {
3598     opacity: 1;
3599 }
3600
3601 #scale-block {
3602     display: table-cell;
3603     vertical-align: bottom;
3604     width: 250px;
3605     height: 30px;
3606     float: left;
3607     clear: left;
3608 }
3609
3610 #info-block {
3611     float: right;
3612     clear: right;
3613 }
3614
3615 #scale {
3616     height: 30px;
3617     width: 100%;
3618 }
3619
3620 #scale text {
3621     font: 12px sans-serif;
3622     stroke: none;
3623     fill: #ccc;
3624     text-anchor: start;
3625 }
3626
3627 #scale path {
3628     fill: none;
3629     stroke: #ccc;
3630     stroke-width: 1;
3631     shape-rendering: crispEdges;
3632 }
3633
3634 #about-list {
3635     text-align: right;
3636     margin-right: 10px;
3637     clear: right;
3638 }
3639
3640 .source-switch a {
3641     padding: 2px 4px 4px 4px;
3642     border-radius: 2px;
3643 }
3644 .source-switch a.live {
3645     background: #d32232;
3646     color:#fff;
3647 }
3648
3649 /* Attribution overlay */
3650 .base-layer-attribution,
3651 .overlay-layer-attribution {
3652     position: absolute;
3653     bottom: 35px;
3654     color: #888;
3655     font-size: 10px;
3656 }
3657
3658 .base-layer-attribution {
3659     left: 10px;
3660 }
3661
3662 .overlay-layer-attribution {
3663     right: 10px;
3664 }
3665
3666 .overlay-layer-attribution .attribution:not(:last-child):after {
3667     content: '; ';
3668 }
3669
3670 .source-image {
3671     height:20px;
3672     vertical-align:top;
3673 }
3674
3675 .user-list a:not(:last-child):after {
3676     content: ', ';
3677 }
3678
3679 .api-status {
3680     float: right;
3681     clear: both;
3682     text-align: right;
3683     width: 100%;
3684 }
3685
3686 .api-status.offline,
3687 .api-status.readonly,
3688 .api-status.error {
3689     background: red;
3690     padding: 0px 5px;
3691 }
3692
3693 /* Modals
3694 ------------------------------------------------------- */
3695
3696 .modal {
3697     display: inline-block;
3698     position:absolute;
3699     left: 0;
3700     right: 0;
3701     margin: auto;
3702     z-index: 3;
3703 }
3704
3705 .modal .loader {
3706     margin-bottom: 10px;
3707 }
3708
3709 .modal .description {
3710     text-align: center;
3711 }
3712
3713 .shaded {
3714     z-index: 2;
3715     position: absolute;
3716     top: 0;
3717     bottom: 0;
3718     left: 0;
3719     right: 0;
3720     overflow: auto;
3721 }
3722
3723 .shaded:before {
3724     content:'';
3725     background:rgba(0,0,0,0.5);
3726     position:fixed;
3727     left:0px; right:0px; top:0px; bottom:0px;
3728 }
3729
3730 .modal-section {
3731     padding: 20px;
3732     border-bottom: 1px solid #CCC;
3733 }
3734
3735 .modal-section:last-child {
3736     border-bottom: 0;
3737 }
3738
3739 .loading-modal {
3740     text-align: center;
3741 }
3742
3743 .modal-actions button,
3744 .save-success a.button {
3745     font-weight: normal;
3746     color: #7092FF;
3747     border-bottom: 1px solid #CCC;
3748     border-radius: 0;
3749     height: 160px;
3750     text-align: center;
3751     display: inline-block;
3752 }
3753
3754 .modal-actions button:hover
3755 .save-success a.button:hover {
3756     background-color: #ececec;
3757 }
3758
3759 .modal-actions button:before,
3760 .save-success a.button:before,
3761 .walkthrough a:before {
3762     display: block;
3763     content: '';
3764     height: 100px;
3765     width: 100px;
3766     margin: auto;
3767     margin-bottom: 10px;
3768     background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px;
3769 }
3770
3771 .modal-actions :first-child {
3772     border-right: 1px solid #CCC;
3773 }
3774
3775 /* Restore Modal
3776 ------------------------------------------------------- */
3777
3778 .modal-actions .restore:before {
3779     background-position: -600px -220px;
3780 }
3781
3782 .modal-actions .reset:before {
3783     background-position: -700px -220px;
3784 }
3785
3786 /* Success Modal
3787 ------------------------------------------------------- */
3788
3789 .save-success p {
3790     padding: 15px;
3791 }
3792
3793 .save-success .button {
3794     padding-top: 15px;
3795 }
3796
3797 .save-success .button.social {
3798     height: 80px;
3799 }
3800
3801 .save-success .button.social:before {
3802     height: 50px;
3803 }
3804
3805 .save-success .button.osm:before {
3806     background-position: 0px -220px;
3807 }
3808
3809 .save-success .button.twitter:before {
3810     background-position: -100px -245px;
3811 }
3812
3813 .save-success .button.facebook:before {
3814     background-position: -200px -245px;
3815 }
3816
3817 .save-success .button.google:before {
3818     background-position: -300px -245px;
3819 }
3820
3821 /* Splash Modal
3822 ------------------------------------------------------- */
3823
3824 .modal-actions .walkthrough:before,
3825 .walkthrough a:before {
3826     background-position: -400px -220px;
3827 }
3828
3829 .modal-actions .start:before {
3830     background-position: -500px -220px;
3831 }
3832
3833 /* Commit Modal
3834 ------------------------------------------------------- */
3835
3836 .mode-save a.user-info {
3837     display: inline-block;
3838 }
3839
3840 .mode-save .commit-form {
3841     margin-bottom: 0;
3842 }
3843
3844 .mode-save button.action {
3845     float: none;
3846     margin: auto;
3847     display: block;
3848     color: white;
3849     font-size: 14px;
3850 }
3851
3852 .mode-save .user-info img {
3853     float: left;
3854 }
3855
3856 .mode-save h3 small.count {
3857     margin-right: 10px;
3858     text-align: center;
3859     float: left;
3860     height: 12px;
3861     min-width: 12px;
3862     font-size:12px;
3863     line-height: 12px;
3864     border-radius:24px;
3865     padding:5px;
3866     background:#7092ff;
3867     color:#fff;
3868 }
3869
3870 .mode-save .commit-info {
3871     margin-bottom: 10px;
3872 }
3873
3874 .mode-save .changeset-list {
3875     border:1px solid #ccc;
3876     border-radius: 4px;
3877     background:#fff;
3878 }
3879
3880 .mode-save .warning-section .changeset-list button {
3881     border-left: 1px solid #CCC;
3882 }
3883
3884 .mode-save .changeset-list li {
3885     position: relative;
3886     border-top:1px solid #ccc;
3887     padding:5px 10px;
3888     cursor: pointer;
3889 }
3890
3891 .mode-save .changeset-list li:hover {
3892     background-color: #ececec;
3893 }
3894
3895 .mode-save .changeset-list .alert {
3896     opacity: 0.5;
3897 }
3898
3899 .changeset-list li span.count {
3900     font-size:10px;
3901     color:#555;
3902 }
3903
3904 .mode-save .commit-section .changeset-list button {
3905     border-left: 1px solid #CCC;
3906 }
3907
3908 .changeset-list li span.count:before { content: '('; }
3909
3910 .changeset-list li span.count:after { content: ')'; }
3911
3912 .changeset-list li:first-child { border-top: 0;}
3913
3914 /* Notices
3915 ------------------------------------------------------- */
3916
3917 .notice {
3918     position: absolute;
3919     top: 0;
3920     bottom: 0;
3921     left: 0;
3922     right: 0;
3923     text-align: center;
3924     background: #fff;
3925 }
3926
3927 .notice .zoom-to {
3928     margin: auto;
3929     width: 80%;
3930     height: 100px;
3931     border-radius: 5px;
3932     line-height: 40px;
3933     color: #000;
3934     opacity: 0.9;
3935 }
3936
3937 .notice .zoom-to:hover {
3938     background: #d8e1ff;
3939 }
3940
3941 .notice .zoom-to .icon {
3942     margin-top:10px;
3943     margin-right:10px;
3944 }
3945
3946 .icon.zoom-in-invert {
3947     background-position: -240px -40px;
3948 }
3949
3950 /* Tooltips
3951 ------------------------------------------------------- */
3952
3953 .tooltip {
3954     position: absolute;
3955     display: none;
3956     color:#333;
3957     text-align: left;
3958     font-size: 12px;
3959 }
3960
3961 .tooltip.in {
3962     opacity: 0.8;
3963     z-index: 1030;
3964     height: auto;
3965     display: block;
3966 }
3967
3968 .tooltip.top {
3969     margin-top: -20px;
3970     text-align: center;
3971 }
3972
3973 .tooltip.right {
3974     margin-left: 20px;
3975 }
3976
3977 .tooltip.bottom {
3978     margin-top: 20px;
3979     text-align: center;
3980 }
3981
3982 .tooltip.left {
3983     margin-left: -20px;
3984     text-align: right;
3985 }
3986
3987 .tooltip-inner {
3988     display: inline-block;
3989     max-width: 200px;
3990     min-width: 80px;
3991     padding: 10px;
3992     font-weight: normal;
3993     background-color: white;
3994 }
3995
3996 .tail {
3997     width: 200px;
3998     height: 400px;
3999     pointer-events: none;
4000     opacity: .8;
4001     margin-top: -200px;
4002     position: absolute;
4003     background: transparent;
4004 }
4005
4006 .tail::after {
4007     content: "";
4008     position: absolute;
4009     width: 0;
4010     height: 0;
4011     border-color: transparent;
4012     border-style: solid;
4013     top: 50%;
4014     right: -5px;
4015     margin-top: -5px;
4016     border-left-color: white;
4017     border-width: 5px 0 5px 5px;
4018 }
4019
4020 .tail div {
4021     padding: 10px;
4022     background: white;
4023     position: absolute;
4024     top: 180px;
4025     left: 0;
4026     right: 0;
4027     margin: auto;
4028 }
4029
4030 .left.tail::after {
4031     content: "";
4032     position: absolute;
4033     width: 0;
4034     height: 0;
4035     border-color: transparent;
4036     border-style: solid;
4037     top: 50%;
4038     left: -5px;
4039     margin-top: -5px;
4040     border-right-color: white;
4041     border-width: 5px 5px 5px 0;
4042 }
4043
4044 .tooltip-arrow {
4045     position: absolute;
4046     width: 0;
4047     height: 0;
4048     border-color: transparent;
4049     border-style: solid;
4050 }
4051
4052 .tooltip.top .tooltip-arrow {
4053     bottom: -5px;
4054     left: 50%;
4055     margin-left: -5px;
4056     border-top-color: white;
4057     border-width: 5px 5px 0;
4058 }
4059
4060 .tooltip.right .tooltip-arrow {
4061     top: 50%;
4062     left: -5px;
4063     margin-top: -5px;
4064     border-right-color: white;
4065     border-width: 5px 5px 5px 0;
4066 }
4067
4068 .tooltip.left .tooltip-arrow {
4069     top: 50%;
4070     right: -5px;
4071     margin-top: -5px;
4072     border-left-color: white;
4073     border-width: 5px 0 5px 5px;
4074 }
4075
4076 .tooltip.bottom .tooltip-arrow {
4077     top: -5px;
4078     left: 50%;
4079     margin-left: -5px;
4080     border-bottom-color: white;
4081     border-width: 0 5px 5px;
4082 }
4083
4084 .keyhint-wrap {
4085     background: #F6F6F6;
4086     padding: 10px;
4087     margin: 10px -10px -10px;
4088 }
4089
4090 .tooltip-inner .keyhint {
4091     font-size: 10px;
4092     padding: 0 7px;
4093     font-weight: bold;
4094     display: inline-block;
4095     border-radius: 2px;
4096     border: 1px solid #CCC;
4097     position: relative;
4098     z-index: 1;
4099     text-align: left;
4100 }
4101
4102 .tooltip-inner .keyhint::after {
4103     content: "";
4104     position: absolute;
4105     border-radius: 2px;
4106     height: 10px;
4107     width: 100%;
4108     z-index: 0;
4109     bottom: -4px;
4110     left: -1px;
4111     border: 1px solid #CCC;
4112     border-top: 0;
4113 }
4114
4115 /* Exceptions for tooltip layouts */
4116
4117 /* make tooltips in panels dark */
4118 .map-overlay .tooltip.top .tooltip-arrow,
4119 .entity-editor-pane .tooltip.top .tooltip-arrow,
4120 .warning-section .tooltip.top .tooltip-arrow {
4121     border-top-color: #000;
4122 }
4123
4124 .map-overlay .tooltip.bottom .tooltip-arrow,
4125 .entity-editor-pane .tooltip.bottom .tooltip-arrow,
4126 .warning-section .tooltip.bottom .tooltip-arrow {
4127     border-bottom-color: #000;
4128 }
4129
4130 .map-overlay .tooltip.left .tooltip-arrow,
4131 .entity-editor-pane .tooltip.left .tooltip-arrow,
4132 .warning-section .tooltip.left .tooltip-arrow {
4133     border-left-color: #000;
4134 }
4135
4136 .map-overlay .tooltip.right .tooltip-arrow,
4137 .entity-editor-pane .tooltip.right .tooltip-arrow,
4138 .warning-section .tooltip.right .tooltip-arrow {
4139     border-right-color: #000;
4140 }
4141
4142 .map-overlay .tooltip-inner,
4143 .entity-editor-pane .tooltip-inner,
4144 .warning-section .tooltip-inner {
4145     background: #000;
4146     color: #ccc;
4147 }
4148 /* commit warning tooltips need to be closer */
4149 .warning-section .tooltip.top {
4150     margin-top: -5px;
4151 }
4152
4153 /* Uncramp map-control tooltips */
4154 .map-control .tooltip {
4155     min-width: 160px;
4156 }
4157 /* Move over tooltips that are near the edge of screen */
4158 .add-point .tooltip {
4159     left: 33.3333% !important;
4160 }
4161
4162 .curtain-tooltip.intro-points-add .tooltip-arrow,
4163 .add-point .tooltip .tooltip-arrow {
4164     left: 60px;
4165 }
4166
4167 .radial-menu-tooltip {
4168     opacity: 0.8;
4169     display: none;
4170     position: absolute;
4171     width: 200px;
4172 }
4173
4174 .radial-menu-background {
4175     stroke: black;
4176     stroke-opacity: 0.5;
4177 }
4178
4179 .radial-menu-item {
4180     fill: white;
4181 }
4182
4183 .radial-menu-item:hover {
4184     fill: #ececec;
4185 }
4186
4187 .radial-menu-item:active {
4188     fill: #ececec;
4189 }
4190
4191 .radial-menu-item.disabled {
4192     cursor: auto;
4193     fill: rgba(255,255,255,.5);
4194 }
4195
4196 .lasso-box {
4197     fill-opacity:0.1;
4198     stroke: #fff;
4199     stroke-width: 1;
4200     stroke-opacity: 1;
4201     stroke-dasharray: 5, 5;
4202 }
4203
4204 /* Media Queries
4205 ------------------------------------------------------- */
4206
4207 @media only screen and (max-width: 840px) {
4208     #bar .icon.icon-pre-text { margin-right: 0;}
4209     /* override hide for save button */
4210     #bar .save .label { display: block;}
4211 }
4212
4213 /* Scrollbars
4214  ----------------------------------------------------- */
4215
4216 ::-webkit-scrollbar {
4217     height: 20px;
4218     overflow: visible;
4219     width: 10px;
4220     background: white;
4221     border-left: 1px solid #DDD;
4222 }
4223
4224 ::-webkit-scrollbar-track {
4225     background-clip: padding-box;
4226     border: solid transparent;
4227     border-width: 0;
4228 }
4229
4230 ::-webkit-scrollbar-thumb {
4231     background-color: rgba(0,0,0,.2);
4232     background-clip: padding-box;
4233     border: solid transparent;
4234     border-width: 3px 3px 3px 4px;
4235     border-radius: 6px;
4236 }
4237 ::-webkit-scrollbar-track:hover,
4238 ::-webkit-scrollbar-track:active {
4239     background-color: rgba(0,0,0,.05);
4240 }
4241
4242 /* Intro walkthrough
4243  ----------------------------------------------------- */
4244
4245 .curtain-darkness {
4246     pointer-events: all;
4247     fill-opacity: 0.7;
4248     fill: #222;
4249     fill-rule: evenodd;
4250 }
4251
4252 .intro-nav-wrap {
4253     position: absolute;
4254     left: 0;
4255     right: 0;
4256     bottom: 30px;
4257     padding: 10px;
4258     z-index: 1001;
4259 }
4260
4261 .intro-nav-wrap button.step {
4262     width: 20%;
4263 }
4264
4265 .intro-nav-wrap button.step.finished {
4266     background: #8cd05f;
4267 }
4268
4269 .intro-nav-wrap button.step .icon {
4270     display: none;
4271 }
4272
4273 .intro-nav-wrap button.step.finished .icon {
4274     display: inline-block;
4275 }
4276
4277
4278 .curtain-tooltip .tooltip-inner {
4279     text-align: left;
4280     padding: 20px;
4281 }
4282
4283 .curtain-tooltip .tooltip-inner {
4284     font-size: 15px;
4285 }
4286
4287 .curtain-tooltip .tooltip-inner .bold {
4288     font-weight: bold;
4289     display: block;
4290     border-top: 1px solid #CCC;
4291     margin-top: 10px;
4292     margin-left: -20px;
4293     margin-right: -20px;
4294     padding: 10px 20px 0 20px;
4295 }
4296
4297 .curtain-tooltip .tooltip-inner .bold:only-child {
4298     border: 0;
4299     padding: 0;
4300     margin: 0;
4301 }
4302
4303 .curtain-tooltip.intro-points-describe {
4304     top: 133px !important;
4305 }
4306
4307 /* Tooltip illustrations */
4308
4309 .intro-points-add .tooltip-inner::before,
4310 .intro-areas-add .tooltip-inner::before,
4311 .intro-lines-add .tooltip-inner::before {
4312     margin-left: -20px;
4313     display: block;
4314     content: "";
4315     height: 80px;
4316     width: 200px;
4317     background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -320px;
4318 }
4319
4320 .intro-areas-add .tooltip-inner::before {
4321     background-position: 0 -400px;
4322 }
4323
4324 .intro-lines-add .tooltip-inner::before {
4325     background-position: 0 -480px;
4326 }
4327
4328 .huge-modal-button {
4329     width: 100%;
4330     height: auto;
4331     padding: 20px;
4332 }
4333
4334 .huge-modal-button .illustration {
4335     height: 100px;
4336     width: 100px;
4337     background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -400px -220px;
4338     margin: auto;
4339 }
4340 /* This file is generated by make. Do NOT edit manually. */
4341
4342 .preset-icon{background-image:url(<%= asset_path("iD/img/maki-sprite.png") %>);background-repeat:no-repeat;width:24px;height:24px;}
4343 .preset-icon-line{background-image:url(<%= asset_path("iD/img/line-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
4344 .preset-icon-relation{background-image:url(<%= asset_path("iD/img/relation-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
4345 .feature-circle-stroked{background-position:-0px -0px;}
4346 .feature-circle{background-position:-54px -0px;}
4347 .feature-square-stroked{background-position:-108px -0px;}
4348 .feature-square{background-position:-162px -0px;}
4349 .feature-triangle-stroked{background-position:-216px -0px;}
4350 .feature-triangle{background-position:-0px -24px;}
4351 .feature-star-stroked{background-position:-54px -24px;}
4352 .feature-star{background-position:-108px -24px;}
4353 .feature-cross{background-position:-162px -24px;}
4354 .feature-marker-stroked{background-position:-216px -24px;}
4355 .feature-marker{background-position:-0px -48px;}
4356 .feature-religious-jewish{background-position:-54px -48px;}
4357 .feature-religious-christian{background-position:-108px -48px;}
4358 .feature-religious-muslim{background-position:-162px -48px;}
4359 .feature-cemetery{background-position:-216px -48px;}
4360 .feature-rocket{background-position:-0px -72px;}
4361 .feature-airport{background-position:-54px -72px;}
4362 .feature-heliport{background-position:-108px -72px;}
4363 .feature-rail{background-position:-162px -72px;}
4364 .feature-rail-metro{background-position:-216px -72px;}
4365 .feature-rail-light{background-position:-0px -96px;}
4366 .feature-bus{background-position:-54px -96px;}
4367 .feature-fuel{background-position:-108px -96px;}
4368 .feature-parking{background-position:-162px -96px;}
4369 .feature-parking-garage{background-position:-216px -96px;}
4370 .feature-airfield{background-position:-0px -120px;}
4371 .feature-roadblock{background-position:-54px -120px;}
4372 .feature-ferry{background-position:-108px -120px;}
4373 .feature-harbor{background-position:-162px -120px;}
4374 .feature-bicycle{background-position:-216px -120px;}
4375 .feature-park{background-position:-0px -144px;}
4376 .feature-park2{background-position:-54px -144px;}
4377 .feature-museum{background-position:-108px -144px;}
4378 .feature-lodging{background-position:-162px -144px;}
4379 .feature-monument{background-position:-216px -144px;}
4380 .feature-zoo{background-position:-0px -168px;}
4381 .feature-garden{background-position:-54px -168px;}
4382 .feature-campsite{background-position:-108px -168px;}
4383 .feature-theatre{background-position:-162px -168px;}
4384 .feature-art-gallery{background-position:-216px -168px;}
4385 .feature-pitch{background-position:-0px -192px;}
4386 .feature-soccer{background-position:-54px -192px;}
4387 .feature-america-football{background-position:-108px -192px;}
4388 .feature-tennis{background-position:-162px -192px;}
4389 .feature-basketball{background-position:-216px -192px;}
4390 .feature-baseball{background-position:-0px -216px;}
4391 .feature-golf{background-position:-54px -216px;}
4392 .feature-swimming{background-position:-108px -216px;}
4393 .feature-cricket{background-position:-162px -216px;}
4394 .feature-skiing{background-position:-216px -216px;}
4395 .feature-school{background-position:-0px -240px;}
4396 .feature-college{background-position:-54px -240px;}
4397 .feature-library{background-position:-108px -240px;}
4398 .feature-post{background-position:-162px -240px;}
4399 .feature-fire-station{background-position:-216px -240px;}
4400 .feature-town-hall{background-position:-0px -264px;}
4401 .feature-police{background-position:-54px -264px;}
4402 .feature-prison{background-position:-108px -264px;}
4403 .feature-embassy{background-position:-162px -264px;}
4404 .feature-beer{background-position:-216px -264px;}
4405 .feature-restaurant{background-position:-0px -288px;}
4406 .feature-cafe{background-position:-54px -288px;}
4407 .feature-shop{background-position:-108px -288px;}
4408 .feature-fast-food{background-position:-162px -288px;}
4409 .feature-bar{background-position:-216px -288px;}
4410 .feature-bank{background-position:-0px -312px;}
4411 .feature-grocery{background-position:-54px -312px;}
4412 .feature-cinema{background-position:-108px -312px;}
4413 .feature-pharmacy{background-position:-162px -312px;}
4414 .feature-hospital{background-position:-216px -312px;}
4415 .feature-danger{background-position:-0px -336px;}
4416 .feature-industrial{background-position:-54px -336px;}
4417 .feature-warehouse{background-position:-108px -336px;}
4418 .feature-commercial{background-position:-162px -336px;}
4419 .feature-building{background-position:-216px -336px;}
4420 .feature-place-of-worship{background-position:-0px -360px;}
4421 .feature-alcohol-shop{background-position:-54px -360px;}
4422 .feature-logging{background-position:-108px -360px;}
4423 .feature-oil-well{background-position:-162px -360px;}
4424 .feature-slaughterhouse{background-position:-216px -360px;}
4425 .feature-dam{background-position:-0px -384px;}
4426 .feature-water{background-position:-54px -384px;}
4427 .feature-wetland{background-position:-108px -384px;}
4428 .feature-disability{background-position:-162px -384px;}
4429 .feature-telephone{background-position:-216px -384px;}
4430 .feature-emergency-telephone{background-position:-0px -408px;}
4431 .feature-toilets{background-position:-54px -408px;}
4432 .feature-waste-basket{background-position:-108px -408px;}
4433 .feature-music{background-position:-162px -408px;}
4434 .feature-land-use{background-position:-216px -408px;}
4435 .feature-city{background-position:-0px -432px;}
4436 .feature-town{background-position:-54px -432px;}
4437 .feature-village{background-position:-108px -432px;}
4438 .feature-farm{background-position:-162px -432px;}
4439 .feature-bakery{background-position:-216px -432px;}
4440 .feature-dog-park{background-position:-0px -456px;}
4441 .feature-lighthouse{background-position:-54px -456px;}
4442 .feature-clothing-store{background-position:-108px -456px;}
4443 .feature-polling-place{background-position:-162px -456px;}
4444 .feature-playground{background-position:-216px -456px;}
4445 .feature-entrance{background-position:-0px -480px;}
4446 .feature-heart{background-position:-54px -480px;}
4447 .feature-london-underground{background-position:-108px -480px;}
4448 .feature-minefield{background-position:-162px -480px;}
4449 .feature-rail-underground{background-position:-216px -480px;}
4450 .feature-rail-above{background-position:-0px -504px;}
4451 .feature-camera{background-position:-54px -504px;}
4452 .feature-laundry{background-position:-108px -504px;}
4453 .feature-car{background-position:-162px -504px;}
4454 .feature-suitcase{background-position:-216px -504px;}
4455 .feature-hairdresser{background-position:-0px -528px;}
4456 .feature-chemist{background-position:-54px -528px;}
4457 .feature-mobilephone{background-position:-108px -528px;}
4458 .feature-scooter{background-position:-162px -528px;}
4459 .feature-gift{background-position:-216px -528px;}
4460 .feature-ice-cream{background-position:-0px -552px;}
4461 .preset-icon-line.feature-highway-motorway{background-position:-20px -25px;}
4462 .preset-icon-line.feature-highway-trunk{background-position:-80px -25px;}
4463 .preset-icon-line.feature-highway-primary{background-position:-140px -25px;}
4464 .preset-icon-line.feature-highway-secondary{background-position:-200px -25px;}
4465 .preset-icon-line.feature-highway-tertiary{background-position:-260px -25px;}
4466 .preset-icon-line.feature-highway-motorway-link{background-position:-320px -25px;}
4467 .preset-icon-line.feature-highway-trunk-link{background-position:-380px -25px;}
4468 .preset-icon-line.feature-highway-primary-link{background-position:-440px -25px;}
4469 .preset-icon-line.feature-highway-secondary-link{background-position:-500px -25px;}
4470 .preset-icon-line.feature-highway-tertiary-link{background-position:-560px -25px;}
4471 .preset-icon-line.feature-highway-residential{background-position:-620px -25px;}
4472 .preset-icon-line.feature-highway-unclassified{background-position:-680px -25px;}
4473 .preset-icon-line.feature-highway-service{background-position:-740px -25px;}
4474 .preset-icon-line.feature-highway-road{background-position:-800px -25px;}
4475 .preset-icon-line.feature-highway-track{background-position:-860px -25px;}
4476 .preset-icon-line.feature-highway-living-street{background-position:-920px -25px;}
4477 .preset-icon-line.feature-highway-path{background-position:-980px -25px;}
4478 .preset-icon-line.feature-highway-cycleway{background-position:-1040px -25px;}
4479 .preset-icon-line.feature-highway-footway{background-position:-1100px -25px;}
4480 .preset-icon-line.feature-highway-bridleway{background-position:-1160px -25px;}
4481 .preset-icon-line.feature-highway-steps{background-position:-1220px -25px;}
4482 .preset-icon-line.feature-railway-rail{background-position:-1280px -25px;}
4483 .preset-icon-line.feature-railway-disused{background-position:-1340px -25px;}
4484 .preset-icon-line.feature-railway-abandoned{background-position:-1400px -25px;}
4485 .preset-icon-line.feature-railway-subway{background-position:-1460px -25px;}
4486 .preset-icon-line.feature-railway-light-rail{background-position:-1520px -25px;}
4487 .preset-icon-line.feature-railway-monorail{background-position:-1580px -25px;}
4488 .preset-icon-line.feature-waterway-river{background-position:-1640px -25px;}
4489 .preset-icon-line.feature-waterway-stream{background-position:-1700px -25px;}
4490 .preset-icon-line.feature-waterway-canal{background-position:-1760px -25px;}
4491 .preset-icon-line.feature-waterway-ditch{background-position:-1820px -25px;}
4492 .preset-icon-line.feature-power-line{background-position:-1880px -25px;}
4493 .preset-icon-line.feature-other-line{background-position:-1940px -25px;}
4494 .preset-icon-line.feature-category-roads{background-position:-2000px -25px;}
4495 .preset-icon-line.feature-category-rail{background-position:-2060px -25px;}
4496 .preset-icon-line.feature-category-path{background-position:-2120px -25px;}
4497 .preset-icon-line.feature-category-water{background-position:-2180px -25px;}
4498 .preset-icon-line.feature-ferry{background-position:-2240px -25px;}
4499 .preset-icon-line.feature-pipeline{background-position:-2300px -25px;}
4500 .preset-icon-relation.feature-relation{background-position:-20px -25px;}
4501 .preset-icon-relation.feature-restriction{background-position:-80px -25px;}
4502 .preset-icon-relation.feature-multipolygon{background-position:-140px -25px;}
4503 .preset-icon-relation.feature-boundary{background-position:-200px -25px;}
4504 .preset-icon-relation.feature-route{background-position:-260px -25px;}
4505 .preset-icon-relation.feature-route-road{background-position:-320px -25px;}
4506 .preset-icon-relation.feature-route-bicycle{background-position:-380px -25px;}
4507 .preset-icon-relation.feature-route-foot{background-position:-440px -25px;}
4508 .preset-icon-relation.feature-route-bus{background-position:-500px -25px;}
4509 .preset-icon-relation.feature-route-train{background-position:-560px -25px;}
4510 .preset-icon-relation.feature-route-detour{background-position:-620px -25px;}
4511 .preset-icon-relation.feature-route-tram{background-position:-680px -25px;}
4512 .preset-icon-relation.feature-route-ferry{background-position:-740px -25px;}
4513 .preset-icon-relation.feature-route-power{background-position:-800px -25px;}
4514 .preset-icon-relation.feature-route-pipeline{background-position:-860px -25px;}
4515 .preset-icon-relation.feature-route-master{background-position:-920px -25px;}
4516 .preset-icon-relation.feature-restriction-no-straight-on{background-position:-980px -25px;}
4517 .preset-icon-relation.feature-restriction-no-u-turn{background-position:-1040px -25px;}
4518 .preset-icon-relation.feature-restriction-no-left-turn{background-position:-1100px -25px;}
4519 .preset-icon-relation.feature-restriction-no-right-turn{background-position:-1160px -25px;}
4520 .preset-icon-relation.feature-restriction-only-straight-on{background-position:-1220px -25px;}
4521 .preset-icon-relation.feature-restriction-only-left-turn{background-position:-1280px -25px;}
4522 .preset-icon-relation.feature-restriction-only-right-turn{background-position:-1340px -25px;}