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