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