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