vendor/assets/iD/iD.css.erb

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