vendor/assets/iD/iD.css.erb

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