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     border:1px solid #ccc;
1951     padding:5px 10px;
1952     height:30px;
1953     width: 100%;
1954     border-radius:4px;
1955     text-overflow: ellipsis;
1956 }
1957
1958 textarea:focus,
1959 input:focus {
1960     background-color: #F1F1F1;
1961 }
1962
1963 input[type="checkbox"],
1964 input[type="radio"] {
1965     float: left;
1966     width: 14px;
1967     height: 14px;
1968     margin-right: 5px;
1969     margin-top: 3px;
1970 }
1971
1972 /* remove bottom border radius when combobox is open */
1973 .combobox + * textarea:focus,
1974 .combobox + * input:focus {
1975     border-bottom-left-radius: 0 !important;
1976     border-bottom-right-radius: 0 !important;
1977 }
1978
1979 /* tables */
1980
1981 table {
1982     background-color: white;
1983     border-collapse: collapse;
1984     width:100%;
1985     border-spacing:0;
1986 }
1987
1988 table th {
1989     text-align:left;
1990 }
1991
1992 table.tags, table.tags td, table.tags th {
1993     border: 1px solid #CCC;
1994     padding: 4px;
1995 }
1996
1997 ::-ms-clear {
1998    display: none;
1999 }
2000
2001 /* Grid
2002 ------------------------------------------------------- */
2003
2004 .col0    { float:left; width:04.1666%; }
2005 .col1    { float:left; width:08.3333%; }
2006 .col2    { float:left; width:16.6666%; }
2007 .col3    { float:left; width:25.0000%; max-width: 300px; }
2008 .col4    { float:left; width:33.3333%; max-width: 400px; }
2009 .col5    { float:left; width:41.6666%; max-width: 500px; }
2010 .col6    { float:left; width:50.0000%; max-width: 600px; }
2011 .col7    { float:left; width:58.3333%; }
2012 .col8    { float:left; width:66.6666%; }
2013 .col9    { float:left; width:75.0000%; }
2014 .col10   { float:left; width:83.3333%; }
2015 .col11   { float:left; width:91.6666%; }
2016 .col12   { float:left; width:100.0000%; }
2017
2018 /* UI Lists
2019 ------------------------------------------------------- */
2020
2021 ul li { list-style: none;}
2022
2023 .toggle-list > label {
2024     position: relative;
2025     padding: 5px 10px;
2026     display: block;
2027     height: 30px;
2028     background-color: white;
2029     color: #7092FF;
2030     cursor: pointer;
2031 }
2032
2033 .toggle-list > label:hover {
2034     background-color: #ececec;
2035 }
2036
2037 .toggle-list > label:not(:last-child) {
2038     border-bottom: 1px solid #ccc;
2039 }
2040
2041 .toggle-list > label:last-child {
2042     border-radius: 0 0 3px 3px;
2043 }
2044
2045 .toggle-list label > span {
2046     display: block;
2047     overflow: hidden;
2048     white-space: nowrap;
2049     text-overflow: ellipsis;
2050 }
2051
2052 .toggle-list > label.active {
2053     background: #E8EBFF;
2054 }
2055
2056
2057 /* Utility Classes
2058 ------------------------------------------------------- */
2059 .fillL {
2060     background: white;
2061     color: #333;
2062 }
2063
2064 .fillL2 {
2065     background: #f6f6f6;
2066     color: #333;
2067 }
2068
2069 .fillL3 {
2070     background: #ececec;
2071     color: #333;
2072 }
2073
2074 .fillD {
2075     background:rgba(0,0,0,.5);
2076     color: white;
2077 }
2078
2079 .fillD2 {
2080     background:rgba(0,0,0,.75);
2081     color: white;
2082 }
2083
2084 .fl { float: left;}
2085 .fr { float: right;}
2086 .al { left: 0; }
2087 .ar { right: 0; }
2088
2089 input.hide,
2090 div.hide,
2091 form.hide,
2092 button.hide,
2093 a.hide,
2094 li.hide {
2095     display: none;
2096 }
2097
2098 .deemphasize {
2099     color: #a9a9a9;
2100 }
2101
2102 .content {
2103     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
2104 }
2105
2106 .loading {
2107     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
2108     background-size:5px 5px;
2109 }
2110
2111 .panewrap {
2112     position:absolute;
2113     width:200%;
2114     height:100%;
2115     right: -100%;
2116 }
2117
2118
2119 .pane {
2120     position:absolute;
2121     width:50%;
2122     top: 0;
2123     bottom: 30px;
2124 }
2125
2126 .pane:first-child {
2127     left: 0;
2128 }
2129
2130 .pane:last-child {
2131     right: 0;
2132 }
2133
2134 /* Buttons */
2135
2136 button {
2137     text-align: center;
2138     line-height:20px;
2139     border:0;
2140     background: white;
2141     font-weight: bold;
2142     color:#333;
2143     font-size:12px;
2144     display: inline-block;
2145     height:40px;
2146     border-radius:4px;
2147 }
2148
2149 button:focus,
2150 button:hover {
2151     background-color: #ececec;
2152 }
2153
2154 button[disabled],
2155 button.disabled {
2156     background-color: rgba(255,255,255,.25);
2157     color: rgba(0,0,0,.4);
2158     cursor: auto;
2159 }
2160
2161 button.active {
2162     background: #7092ff;
2163 }
2164
2165 button.minor {
2166     position: absolute;
2167     top: 0;
2168     right: 0;
2169     height: 100%;
2170     width: 10%;
2171     border-radius: 0;
2172     background-color: #fafafa;
2173 }
2174
2175 button.minor .icon {
2176     opacity: .5;
2177 }
2178
2179 button.minor:hover {
2180     background-color: #f1f1f1;
2181 }
2182
2183 .button-wrap {
2184     display: inline-block;
2185     padding-right:10px;
2186     margin: 0;
2187 }
2188
2189 .button-wrap button:only-child {
2190     width: 100%;
2191 }
2192
2193 .button-wrap:last-of-type {
2194     padding-right: 0;
2195 }
2196
2197 .joined button {
2198     border-radius:0;
2199     border-right: 1px solid rgba(0,0,0,.5);
2200 }
2201
2202 .fillL .joined button {
2203     border-right: 1px solid white;
2204 }
2205
2206 .joined button:first-child {
2207     border-radius:4px 0 0 4px;
2208 }
2209
2210 .joined button:last-child {
2211     border-right-width: 0;
2212     border-radius:0 4px 4px 0;
2213 }
2214
2215 button.action {
2216     background: #7092ff;
2217     color: white;
2218 }
2219
2220 button[disabled].action,
2221 button[disabled].action:hover {
2222     background: #cccccc;
2223     color: #888;
2224 }
2225
2226 button.action:focus,
2227 button.action:hover {
2228     background: #597BE7;
2229 }
2230
2231 button.secondary-action {
2232     background: #ececec;
2233 }
2234
2235 button.secondary-action:focus,
2236 button.secondary-action:hover {
2237     background: #cccccc;
2238 }
2239
2240 button.save.has-count {
2241     padding: 9px;
2242 }
2243
2244 button.save .count {
2245     display: none;
2246 }
2247
2248 button.save.has-count .count {
2249     display: block;
2250     position: absolute;
2251     top: 5px;
2252     background: #fff;
2253     border-color: #fff;
2254     opacity: 0.5;
2255     color: #333;
2256     padding: 10px;
2257     height: 30px;
2258     line-height: 12px;
2259     border-radius: 4px;
2260     margin: auto;
2261     margin-left: 8.3333%;
2262 }
2263
2264 button.save.has-count .count::before {
2265     content: "";
2266     margin: auto;
2267     width: 0;
2268     height: 0;
2269     position: absolute;
2270     left: -6px;
2271     top: 0;
2272     bottom: 0;
2273     border-top:    6px solid transparent;
2274     border-bottom: 6px solid transparent;
2275     border-right-width: 6px;
2276     border-right-style: solid;
2277     border-right-color: inherit;
2278 }
2279
2280 /* Icons */
2281
2282 .icon {
2283     vertical-align: top;
2284     width: 20px;
2285     height: 20px;
2286 }
2287
2288 .icon.inline {
2289     vertical-align: text-top;
2290     width: 14px;
2291     height: 14px;
2292     margin: 0px 3px;
2293 }
2294
2295 .icon.pre-text {
2296     margin-right: 3px;
2297 }
2298
2299 .icon.light {
2300     color: #fff;
2301 }
2302
2303 .icon.created {
2304     color: #00ca07;
2305 }
2306
2307 .icon.modified {
2308     color: #666;
2309 }
2310
2311 .icon.deleted {
2312     color: #ea0000;
2313 }
2314
2315 .user-icon {
2316     max-height: 20px;
2317     max-width: 20px;
2318     height: auto;
2319     width: auto;
2320     border-radius: 3px;
2321 }
2322
2323
2324 /* ToolBar / Persistent UI Elements
2325 ------------------------------------------------------- */
2326
2327 #bar {
2328     position: fixed;
2329     padding: 10px 0;
2330     left:0;
2331     top:0;
2332     right:0;
2333     height:60px;
2334     z-index: 9;
2335     min-width: 768px;
2336 }
2337
2338 /* Header for modals / panes
2339 ------------------------------------------------------- */
2340
2341 .header {
2342     border-bottom: 1px solid #ccc;
2343     height: 60px;
2344     position: relative;
2345 }
2346
2347 .header h3 {
2348     text-align: left;
2349     margin-bottom: 0;
2350     white-space: nowrap;
2351     text-overflow: ellipsis;
2352     overflow: hidden;
2353     padding: 20px 20px 20px 40px;
2354 }
2355
2356 .header button,
2357 .modal > button {
2358     border-radius: 0;
2359     width: 40px;
2360     text-align: center;
2361     overflow: hidden;
2362 }
2363
2364 .header button {
2365     position: relative;
2366     height: 100%;
2367 }
2368
2369 .entity-editor-pane .header button.preset-close,
2370 .preset-list-pane .header button.preset-choose {
2371     position: absolute;
2372     right: 0;
2373     top: 0;
2374 }
2375
2376 .entity-editor-pane .header button.preset-choose {
2377     position: absolute;
2378     left: 0;
2379     top: 0;
2380 }
2381
2382 .preset-choose {
2383     font-size: 16px;
2384     line-height: 1.25;
2385     font-weight: bold;
2386 }
2387
2388 .modal > button {
2389     position: absolute;
2390     right: 0;
2391     top: 0;
2392     height: 59px;
2393     z-index: 50;
2394 }
2395
2396 .footer {
2397     position: absolute;
2398     bottom: 0;
2399     padding: 5px 20px 5px 20px;
2400     border-top: 1px solid #ccc;
2401     background-color: #fafafa;
2402     width: 100%;
2403 }
2404
2405 .sidebar-component .body {
2406     width: 100%;
2407     overflow: auto;
2408     top: 60px;
2409     bottom: 0;
2410     position: absolute;
2411 }
2412
2413 /* Inspector
2414 ------------------------------------------------------- */
2415
2416 #sidebar {
2417     position: relative;
2418     float: left;
2419     height: 100%;
2420     overflow: hidden;
2421     z-index: 10;
2422     background: #f6f6f6;
2423 }
2424
2425 .sidebar-component {
2426     position: absolute;
2427     top: 0;
2428     left: 0;
2429     bottom: 0;
2430     right: 0;
2431 }
2432
2433 .inspector-wrap {
2434     width: 100%;
2435     height: 100%;
2436 }
2437
2438 .inspector-hidden {
2439     display: none;
2440 }
2441
2442 .inspector-body {
2443     overflow-y: scroll;
2444     overflow-x: hidden;
2445     position: absolute;
2446     right: 0;
2447     left: 0;
2448     bottom: 0;
2449 }
2450
2451
2452
2453
2454 .feature-list-pane .inspector-body {
2455     top: 120px;
2456 }
2457
2458 .preset-list-pane .inspector-body {
2459     top: 120px;
2460 }
2461
2462 .entity-editor-pane .inspector-body {
2463     top: 60px;
2464 }
2465
2466 .selection-list-pane .inspector-body {
2467     top: 60px;
2468 }
2469
2470 .inspector-inner {
2471     padding: 20px;
2472     position: relative;
2473 }
2474
2475 #sidebar .search-header .icon {
2476     display: block;
2477     position: absolute;
2478     left: 10px;
2479     top: 80px;
2480     pointer-events: none;
2481 }
2482
2483 #sidebar .search-header input {
2484     position: absolute;
2485     top: 60px;
2486     height: 60px;
2487     width: 100%;
2488     padding: 5px 10px;
2489     border-radius: 0;
2490     border-width: 0;
2491     border-bottom-width: 1px;
2492     text-indent: 30px;
2493     font-size: 18px;
2494     font-weight: bold;
2495 }
2496
2497 /* Feature list */
2498
2499 .feature-list  {
2500     width:100%;
2501 }
2502
2503 .no-results-item,
2504 .geocode-item,
2505 .feature-list-item {
2506     width: 100%;
2507     position: relative;
2508     border-bottom: 1px solid #ccc;
2509     border-radius: 0;
2510 }
2511
2512 .feature-list-item .label {
2513     text-align: left;
2514     padding: 5px 10px;
2515     white-space: nowrap;
2516     text-overflow: ellipsis;
2517     overflow: hidden;
2518     border-left: 1px solid rgba(0, 0, 0, .1);
2519 }
2520
2521 .feature-list-item .label .icon {
2522     opacity: .5;
2523 }
2524
2525 .feature-list-item:hover .label {
2526     background-color: #ececec;
2527 }
2528
2529 .feature-list-item .entity-type {
2530     color:#7092ff;
2531 }
2532
2533 .feature-list-item:hover .entity-type {
2534     color:#597be7;
2535 }
2536
2537 .feature-list-item .entity-name {
2538     font-weight: normal;
2539     color: #666;
2540     padding-left: 10px;
2541 }
2542
2543 /* Presets
2544 ------------------------------------------------------- */
2545
2546 /* Preset grid  */
2547
2548 .preset-list  {
2549     width:100%;
2550     padding: 20px 20px 10px 20px;
2551     border-bottom: 1px solid #ccc;
2552 }
2553
2554 .preset-list-button-wrap {
2555     position: relative;
2556     margin-bottom: 10px;
2557     height: 60px;
2558 }
2559
2560 .preset-list-button {
2561     width: 100%;
2562     height: 100%;
2563     position: relative;
2564     border: 1px solid #ccc;
2565 }
2566
2567 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
2568     background: #ececec;
2569 }
2570
2571 .preset-icon-fill-area {
2572     cursor: inherit;
2573     height: 40px;
2574     width: 40px;
2575     margin: auto;
2576     position: absolute;
2577     left: 10px;
2578     top: 10px;
2579 }
2580
2581 .preset-icon-frame {
2582     position: absolute;
2583     top: 7px;
2584     left: 7px;
2585     height: 42px;
2586     width: 42px;
2587     margin: auto;
2588 }
2589
2590 .preset-icon-frame .icon {
2591     width: 46px;
2592     height: 46px;
2593 }
2594
2595 .preset-icon-60 {
2596     position: absolute;
2597     top: 0px;
2598     left: 0px;
2599     margin: auto;
2600 }
2601
2602 .preset-icon-60 .icon {
2603     width: 60px;
2604     height: 60px;
2605 }
2606
2607 .preset-icon-44 {
2608     position: absolute;
2609     top: 9px;
2610     left: 8px;
2611     margin: auto;
2612 }
2613
2614 .preset-icon-44 .icon {
2615     width: 44px;
2616     height: 44px;
2617 }
2618
2619 .preset-icon-32 {
2620     position: absolute;
2621     top: 14px;
2622     left: 13px;   /* Maki icons off center? */
2623     margin: auto;
2624 }
2625
2626 .preset-icon-32 .icon {
2627     width: 32px;
2628     height: 32px;
2629 }
2630
2631 .preset-list-button .label {
2632     background-color: #f6f6f6;
2633     text-align: left;
2634     position: absolute;
2635     top: 0;
2636     bottom: 0;
2637     right: 0;
2638     padding: 5px 10px;
2639     left: 60px;
2640     line-height: 50px;
2641     white-space: nowrap;
2642     text-overflow: ellipsis;
2643     overflow: hidden;
2644     border-left: 1px solid rgba(0, 0, 0, .1);
2645     border-radius: 0 3px 3px 0;
2646     }
2647
2648 .preset-list-button:hover .label {
2649     background-color: #ececec;
2650 }
2651
2652 .preset-list-item button.tag-reference-button {
2653     height: 100%;
2654     border: 1px solid #CCC;
2655     border-radius: 0 3px 3px 0;
2656     position: absolute;
2657     top: 0;
2658     right: 0;
2659     width: 10%;
2660     background: #fafafa;
2661 }
2662
2663 .preset-list-item button.tag-reference-button:hover {
2664     background: #f1f1f1;
2665 }
2666
2667 .preset-list-item button.tag-reference-button .icon {
2668     opacity: .5;
2669 }
2670
2671 .current .preset-list-button,
2672 .current .preset-list-button .label {
2673     background-color: #E8EBFF;
2674 }
2675
2676 .category .preset-list-button:after,
2677 .category .preset-list-button:before {
2678     content: "";
2679     position: absolute;
2680     top: -5px;
2681     left: -1px; right: -1px;
2682     border: 1px solid #ccc;
2683     border-bottom: none;
2684     border-radius: 6px 6px 0 0;
2685     height: 6px;
2686 }
2687
2688 .category .preset-list-button:before {
2689     top: -3px;
2690 }
2691
2692 .subgrid .preset-list {
2693     padding: 10px 10px 0 10px;
2694     margin-top: 0;
2695     border: 0;
2696     border-radius: 8px;
2697     width: -webkit-calc(100% + 20px);
2698     margin-left: -10px;
2699 }
2700
2701 .subgrid .arrow {
2702     border: solid rgba(0, 0, 0, 0);
2703     border-width: 10px;
2704     border-bottom-color: #f1f1f1;
2705     width: 0;
2706     height: 0;
2707     margin-left: 50%;
2708     margin-left: -webkit-calc(50% - 10px);
2709     margin-top: -10px;
2710 }
2711
2712
2713 /* preset form basics */
2714
2715 .inspector-preset {
2716     overflow: hidden;
2717     padding-bottom: 10px;
2718 }
2719
2720 .inspector-preset a.hide-toggle {
2721     margin: 0 20px 10px 20px;
2722 }
2723
2724 .inspector-preset .preset-form {
2725     padding: 10px;
2726     margin: 0 10px 10px 10px;
2727     border-radius: 8px;
2728 }
2729
2730 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
2731     margin-bottom: 0;
2732 }
2733
2734 .form-field {
2735     margin-bottom: 10px;
2736     width: 100%;
2737     -webkit-transition: margin-bottom 200ms;
2738        -moz-transition: margin-bottom 200ms;
2739          -o-transition: margin-bottom 200ms;
2740             transition: margin-bottom 200ms;
2741 }
2742
2743 .form-field:last-child {
2744     margin-bottom: 0;
2745 }
2746
2747 .form-label {
2748     position: relative;
2749     font-weight: bold;
2750     border: 1px solid #cfcfcf;
2751     padding: 5px 0 5px 10px;
2752     background: #f6f6f6;
2753     display: block;
2754     border-radius: 4px 4px 0 0;
2755     overflow: hidden;
2756 }
2757
2758 .form-label-button-wrap {
2759     position: absolute;
2760     top: 0;
2761     right: 0;
2762     height: 100%;
2763     width: 100%;
2764     background: transparent;
2765     text-align: right;
2766 }
2767
2768 .form-label-button-wrap .tag-reference-button {
2769     border-radius: 0 3px 0 0;
2770 }
2771
2772 .form-label-button-wrap .icon {
2773     opacity: .5;
2774 }
2775
2776 .form-label button {
2777     border-left: 1px solid #ccc;
2778     width: 10%;
2779     height: 100%;
2780     border-radius: 0;
2781     background: #f6f6f6;
2782 }
2783 .form-label button:hover {
2784     background: #f1f1f1;
2785 }
2786
2787 .form-label .modified-icon,
2788 .form-field .remove-icon {
2789     display: none;
2790 }
2791
2792 .modified .form-label .modified-icon,
2793 .present .form-label .remove-icon {
2794     display: inline-block;
2795 }
2796
2797 .form-field > input,
2798 .form-field > textarea,
2799 .form-field .preset-input-wrap {
2800     border: 1px solid #ccc;
2801     min-height: 30px;
2802     border-top: 0;
2803     border-radius: 0 0 4px 4px;
2804     overflow: hidden;
2805 }
2806
2807 .form-field textarea {
2808     height: 65px;
2809 }
2810
2811 .inspector-border {
2812     border-bottom: 1px solid #ccc
2813 }
2814
2815 /* Preset form (hover mode) */
2816
2817 .inspector-hover .checkselect label:last-of-type,
2818 .inspector-hover .preset-input-wrap .label,
2819 .inspector-hover .form-field-multicombo,
2820 .inspector-hover input,
2821 .inspector-hover label {
2822     background: #ececec;
2823 }
2824
2825 .inspector-hover a,
2826 .inspector-hover .form-field-multicombo .chips,
2827 .inspector-hover .checkselect label:last-of-type {
2828     color: #666;
2829 }
2830
2831 .inspector-hover .form-field-multicombo .chips {
2832     background: #eee;
2833     border: 1px solid #ccc;
2834 }
2835
2836 /* hide and remove from layout */
2837 .inspector-hidden,
2838 .inspector-hover label input[type="checkbox"],
2839 .inspector-hover label input[type="radio"],
2840 .inspector-hover .toggle-list label,
2841 .inspector-hover .toggle-list label span,
2842 .inspector-hover .inspector-inner .add-tag,
2843 .inspector-hover .inspector-inner .add-relation,
2844 .inspector-hover .form-field-multicombo .combobox-input,
2845 .inspector-hover .toggle-list label.remove .icon {
2846     height: 0;
2847     width: 0;
2848     overflow: hidden;
2849     opacity: 0 !important;
2850     border-width: 0;
2851     margin: 0;
2852     padding: 0;
2853 }
2854
2855 /* hide but preserve in layout */
2856 .inspector-hover .entity-editor-pane button.minor,
2857 .inspector-hover .combobox-caret,
2858 .inspector-hover .entity-editor-pane .header button,
2859 .inspector-hover .spin-control,
2860 .inspector-hover .form-field-multicombo .chips .remove,
2861 .inspector-hover .hide-toggle:before,
2862 .inspector-hover .more-fields,
2863 .inspector-hover .form-label-button-wrap,
2864 .inspector-hover .tag-reference-button,
2865 .inspector-hover .view-on-osm {
2866     opacity: 0;
2867 }
2868
2869 /* Styles for raw tag inspector on hover */
2870 .inspector-hover .tag-row .key-wrap,
2871 .inspector-hover .tag-row .form-field.input-wrap-position {
2872     width: 50%;
2873 }
2874
2875 .inspector-hover .tag-row:first-child input.value {
2876     border-top-right-radius: 4px;
2877 }
2878
2879 .inspector-hover .tag-row:last-child input.value {
2880     border-bottom-right-radius: 4px;
2881 }
2882
2883 .inspector-hover .tag-row:last-child input.key {
2884     border-bottom-left-radius: 4px;
2885 }
2886
2887 .inspector-hover .more-fields {
2888     max-height: 0;
2889     margin-bottom: -10px;
2890 }
2891
2892 /* Unstyle button fields */
2893 .inspector-hover .toggle-list label.active,
2894 .inspector-hover .entity-editor-pane a.hide-toggle {
2895     opacity: 1;
2896     background-color: transparent;
2897     color: #666;
2898     padding-left: 0;
2899     border-width: 0;
2900 }
2901
2902 .inspector-hover .toggle-list button.active {
2903     padding-left: 10px;
2904 }
2905
2906 /* Add placeholder only on hover for radio buttons */
2907 .inspector-hover .toggle-list .placeholder {
2908     color: #a9a9a9;
2909     padding: 5px 10px;
2910     opacity: 1;
2911     line-height: 20px;
2912     width: 100%;
2913 }
2914
2915 /* Hide placeholder for radio buttons if another is active, or not in hover state */
2916 .toggle-list label.active ~ .placeholder,
2917 .toggle-list .placeholder {
2918     padding: 0;
2919     opacity: 0;
2920     width: 0;
2921     line-height: 0;
2922     display: block;
2923     overflow: hidden;
2924 }
2925
2926 /* adding additional preset fields */
2927
2928 .more-fields {
2929     padding: 0 20px 20px 20px;
2930     font-weight: bold;
2931 }
2932
2933 .more-fields label { padding: 5px 10px 5px 0; }
2934 .more-fields input { width: 50%;}
2935
2936 /* preset form access */
2937
2938 .preset-input-wrap .label {
2939     height: 30px;
2940     background: #F6F6F6;
2941     padding: 5px 10px;
2942 }
2943
2944 .form-field-access .preset-input-wrap li {
2945     border-bottom: 1px solid #CCC;
2946 }
2947 .form-field-access .preset-input-wrap li:last-child {
2948     border-bottom: 0;
2949 }
2950
2951 .preset-input-access-wrap input {
2952     border-radius: 0;
2953     border-width: 0;
2954     border-left-width: 1px;
2955 }
2956
2957 .preset-input-wrap li:last-child input {
2958     border-bottom-right-radius: 4px;
2959 }
2960
2961 /* preset form multicombo */
2962
2963 .form-field-multicombo {
2964     border: 1px solid #cfcfcf;
2965     border-top: 0px;
2966     padding: 5px 0 5px 10px;
2967     background: #fff;
2968     display: block;
2969     border-radius: 0 0 4px 4px;
2970     overflow: hidden;
2971 }
2972
2973 .form-field-multicombo:focus {
2974     border-bottom: 0px;
2975 }
2976
2977 .form-field-multicombo.active {
2978     border-bottom-left-radius: 0px;
2979     border-bottom-right-radius: 0px;
2980 }
2981
2982 .form-field-multicombo li {
2983     background-color: #eff2f7;
2984     border: 1px solid #ccd5e3;
2985     border-radius: 4px;
2986     line-height: 25px;
2987     display: inline-block;
2988     padding: 2px 5px;
2989     margin: 3px;
2990     height: 30px;
2991 }
2992
2993 .form-field-multicombo a {
2994     font-family: Arial, Helvetica, sans-serif !important;
2995     font-size: 16px !important;
2996     line-height: 24px;
2997     float: right;
2998     margin: 1px 0 0 5px;
2999     padding: 0;
3000     cursor: pointer;
3001     color: #a6b4ce;
3002 }
3003
3004 .form-field-multicombo input {
3005     border: 1px solid #ddd;
3006     width: 100px;
3007     margin: 3px;
3008 }
3009
3010 .form-field-multicombo .combobox-caret {
3011     margin: 3px 3px 3px -30px;
3012 }
3013
3014 .form-field-multicombo input:focus {
3015     border-radius: 4px !important;
3016 }
3017
3018 /* preset form cycleway */
3019
3020 .form-field-cycleway .preset-input-wrap li {
3021     border-bottom: 1px solid #CCC;
3022 }
3023 .form-field-cycleway .preset-input-wrap li:last-child {
3024     border-bottom: 0;
3025 }
3026
3027 .preset-input-cycleway-wrap input {
3028     border-radius: 0;
3029     border-width: 0;
3030     border-left-width: 1px;
3031 }
3032
3033 /* preset form numbers */
3034
3035 input[type=number] {
3036     position: relative;
3037     padding-right: 20%;
3038 }
3039
3040 .spin-control {
3041     width: 20%;
3042     height: 29px;
3043     display: inline-block;
3044     margin-left: -20%;
3045     margin-bottom: -11px;
3046     position: relative;
3047 }
3048
3049 .spin-control button {
3050     right: 1px;
3051     position: relative;
3052     float: left;
3053     height: 100%;
3054     width: 50%;
3055     border-left: 1px solid #CCC;
3056     border-radius: 0;
3057     background: rgba(0, 0, 0, 0);
3058 }
3059
3060 .spin-control button.decrement {
3061     border-bottom-right-radius: 3px;
3062 }
3063
3064 .spin-control button.decrement::after,
3065 .spin-control button.increment::after {
3066     content:"";
3067     height: 0; width: 0;
3068     position: absolute;
3069     left: 0; right: 0; bottom: 0; top: 0;
3070     margin: auto;
3071 }
3072
3073 .spin-control button.decrement::after {
3074     border-top: 5px solid #CCC;
3075     border-left: 5px solid transparent;
3076     border-right: 5px solid transparent;
3077 }
3078
3079 .spin-control button.increment::after {
3080     border-bottom: 5px solid #CCC;
3081     border-left: 5px solid transparent;
3082     border-right: 5px solid transparent;
3083 }
3084
3085 /* preset form checkbox */
3086
3087 .checkselect label:last-of-type {
3088     display: block;
3089     background: white;
3090     padding: 5px 10px;
3091     color: #7092FF;
3092 }
3093
3094 .checkselect label:hover {
3095     background: #f1f1f1;
3096 }
3097
3098 .checkselect .set {
3099     color: inherit;
3100 }
3101
3102 .checkselect label:not(.set) input[type="checkbox"] {
3103     opacity: .5;
3104 }
3105
3106 /* Preset form radio button */
3107
3108 .toggle-list button.remove {
3109     border-radius: 0 0 3px 3px;
3110 }
3111
3112 .toggle-list button.remove .icon {
3113     position: absolute;
3114     left: 5px;
3115 }
3116
3117 .toggle-list button.remove::before {
3118     content: none;
3119 }
3120
3121 .form-field .wiki-lang {
3122     border-radius: 0;
3123 }
3124
3125 .form-field .wiki-title {
3126     padding-right: 10%;
3127 }
3128
3129 .form-field .wiki-title ~ .combobox-caret {
3130     margin-left: -18%;
3131     margin-right: 9%;
3132 }
3133
3134 .form-field .wiki-link {
3135     float: right;
3136     background: #fafafa;
3137     padding: 5px;
3138     text-align: center;
3139 }
3140
3141 .form-field .wiki-link:hover {
3142     background: #f1f1f1;
3143 }
3144
3145 #preset-input-maxspeed {
3146     border-right: none;
3147     border-radius: 0 0 0 4px;
3148     width: 80%;
3149 }
3150
3151 .form-field .maxspeed-unit {
3152     border-radius: 0 0 4px 0;
3153     width: 20%;
3154 }
3155
3156 /* Name + translate form */
3157
3158 .form-field .localized-main {
3159     padding-right: 10%;
3160 }
3161
3162 .form-field .button-input-action {
3163     position: relative;
3164     right: 1px;
3165     width: 10%;
3166     margin-left: -10%;
3167     border: 1px solid #CCC;
3168     border-top-width: 0;
3169     border-right-width: 0;
3170     border-radius: 0 0 4px 0;
3171     height: 30px;
3172     vertical-align: top;
3173 }
3174
3175 .form-field .localized-wrap {
3176     padding: 0 10px;
3177 }
3178
3179 .form-field .localized-wrap .entry {
3180     position: relative;
3181     overflow: hidden;
3182 }
3183
3184 .form-field .localized-wrap .entry::before {
3185     content: "";
3186     display: block;
3187     position: absolute;
3188     background:#ccc;
3189     height: 11px;
3190     width: 1px;
3191     left: 0;
3192     right: 0;
3193     top: -11px;
3194     margin: auto;
3195 }
3196
3197 .form-field .localized-wrap .entry .localized-lang {
3198     border-radius: 0;
3199     border-top-width: 0;
3200 }
3201
3202 .form-field .localized-wrap .entry .localized-value {
3203     border-top-width: 0;
3204     border-radius: 0 0 4px 4px;
3205 }
3206
3207 .form-field .localized-wrap .form-label button {
3208     border-top-right-radius: 3px;
3209 }
3210
3211 /* Preset form address */
3212
3213 .addr-row input {
3214     border-right: 0;
3215     border-bottom: 0;
3216 }
3217
3218 .addr-row:first-of-type input {
3219     border-top: 0;
3220 }
3221
3222 .addr-row input:first-of-type {
3223     border-left: 0;
3224 }
3225
3226 .addr-row input {
3227     border-radius: 0;
3228 }
3229
3230 .addr-row:last-of-type input:first-of-type {
3231     border-radius: 0 0 0 4px;
3232 }
3233
3234 .addr-row:last-of-type input:last-of-type {
3235     border-radius: 0 0 4px 0;
3236 }
3237
3238 /* Restrictions editor */
3239
3240 .form-field-restrictions .preset-input-wrap {
3241     position: relative;
3242     height: 300px;
3243 }
3244
3245 .form-field-restrictions svg {
3246     width: 100%;
3247     height: 100%;
3248 }
3249
3250 .form-field-restrictions .restriction-help {
3251     z-index: 1;
3252     position: absolute;
3253     top: 0;
3254     left: 0;
3255     right: 0;
3256     padding: 2px 6px;
3257     background-color: rgba(255, 255, 255, .8);
3258     color: #999;
3259     text-align: center;
3260 }
3261
3262 /* combobox dropdown */
3263
3264 div.combobox {
3265     z-index: 9999;
3266     display: none;
3267     box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
3268     margin-top: -1px;
3269     background: white;
3270     max-height: 120px;
3271     overflow-y: auto;
3272     overflow-x: hidden;
3273     border: 1px solid #ccc;
3274     border-radius: 0 0 4px 4px;
3275 }
3276
3277 .combobox a {
3278     display: block;
3279     padding: 5px 10px;
3280     border-top:1px solid #ccc;
3281     text-overflow: ellipsis;
3282     white-space: nowrap;
3283     overflow: hidden;
3284 }
3285
3286 .combobox a.selected,
3287 .combobox a:hover {
3288     background: #ececec;
3289 }
3290
3291 .combobox a:first-child {
3292     border-top: 0;
3293 }
3294
3295 .combobox-caret {
3296     display: inline-block;
3297     position: relative;
3298     height: 30px;
3299     width: 30px;
3300     margin-left: -30px;
3301     vertical-align: top;
3302 }
3303
3304 .combobox-caret::after {
3305     content:"";
3306     height: 0; width: 0;
3307     position: absolute;
3308     left: 0; right: 0; bottom: 0; top: 0;
3309     margin: auto;
3310     border-top: 5px solid #ccc;
3311     border-left: 5px solid transparent;
3312     border-right: 5px solid transparent;
3313 }
3314
3315 /* Raw Tag Editor */
3316
3317 .tag-list {
3318     padding-top: 10px;
3319 }
3320
3321 .tag-row {
3322     width: 100%;
3323     position: relative;
3324     clear: both;
3325 }
3326
3327 .tag-row input {
3328     height: 31px;
3329     border: 0;
3330     border-radius: 0;
3331     border-bottom: 1px solid #CCC;
3332     border-left: 1px solid #CCC;
3333 }
3334
3335 .tag-row .key-wrap,
3336 .tag-row .input-wrap-position {
3337     width: 40%;
3338     float: left;
3339     height: 30px;
3340 }
3341
3342 .tag-row input.key {
3343     font-weight: bold;
3344     background-color: #f6f6f6;
3345 }
3346
3347 .tag-row input.value {
3348     border-right: 1px solid #CCC;
3349 }
3350
3351 .tag-row:first-child input.key {
3352     border-top: 1px solid #CCC;
3353     border-top-left-radius: 4px;
3354 }
3355
3356 .tag-row:first-child input.value {
3357     border-top: 1px solid #CCC;
3358 }
3359
3360 .tag-row button {
3361     position: absolute;
3362     height: 31px;
3363     right: 10%;
3364     border: 1px solid #CCC;
3365     border-top-width: 0;
3366     border-left-width: 0;
3367 }
3368
3369 .tag-row button:hover {
3370     background: #f1f1f1;
3371 }
3372
3373 .tag-row button .icon {
3374     opacity: .5;
3375 }
3376
3377 .tag-row:first-child button {
3378     border-top-width: 1px;
3379 }
3380
3381 .tag-row:first-child .tag-reference-button {
3382     border-top-right-radius: 4px;
3383 }
3384
3385 .tag-row:last-child .tag-reference-button {
3386     border-bottom-right-radius: 4px;
3387 }
3388
3389 .tag-row .tag-reference-button {
3390     right: 0;
3391     border-radius: 0;
3392     width: 10%;
3393     top: 0;
3394     background: #fafafa;
3395 }
3396
3397 /* Adding form fields to tag editor */
3398
3399 .inspector-inner .add-tag {
3400     width: 40%;
3401     height: 30px;
3402     border-top: 0;
3403     background: rgba(0,0,0,.5);
3404     border-radius: 0 0 4px 4px;
3405 }
3406
3407 .inspector-inner .add-tag:hover {
3408     background: rgba(0,0,0,.8);
3409 }
3410
3411 .inspector-inner .add-tag .label {
3412     display: none;
3413 }
3414
3415 /* Tag reference */
3416
3417 button.minor.tag-reference-loading {
3418     background-color: #f5f5f5;
3419 }
3420
3421 .tag-reference-loading .icon {
3422     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
3423     background-position: 0 0;
3424 }
3425
3426 .tag-reference-body {
3427     overflow: hidden;
3428     clear: both;
3429 }
3430
3431 .tag-reference-body p,
3432 .tag-reference-body img {
3433     margin-top: 20px;
3434 }
3435
3436 .tag-reference-body p:last-child {
3437     padding-bottom: 10px;
3438 }
3439
3440 .tag-reference-body a {
3441     display: block;
3442     padding-bottom: 10px;
3443 }
3444
3445 .preset-list .tag-reference-body {
3446     position: relative;
3447     width: 100%;
3448 }
3449
3450 .preset-list .tag-reference-body a {
3451     padding-bottom: 20px;
3452 }
3453
3454 .preset-list .tag-reference-body p,
3455 .preset-list .tag-reference-body img {
3456     margin-top: 10px;
3457 }
3458
3459 .raw-tag-editor .tag-reference-body {
3460     border-bottom: 1px solid #ccc;
3461     float: left;
3462     width: 100%;
3463 }
3464
3465 .raw-tag-editor .tag-reference-body p:last-child {
3466     padding-bottom: 20px;
3467 }
3468
3469 .raw-tag-editor .tag-reference-body a {
3470     padding-bottom: 20px;
3471 }
3472
3473 img.wiki-image {
3474     float: right;
3475     width: 33.3333%;
3476     width: -webkit-calc(33.3333% - 10px);
3477     width: calc(33.3333% - 10px);
3478     margin-left: 20px;
3479     margin-right: 10px;
3480     border-radius: 4px;
3481     max-height: 200px;
3482     margin-bottom: 20px;
3483 }
3484
3485 /* Raw relation membership editor */
3486
3487 .raw-member-editor .member-list li:first-child,
3488 .raw-membership-editor .member-list li:first-child {
3489     padding-top: 10px;
3490 }
3491
3492 .raw-member-editor .member-row,
3493 .raw-membership-editor .member-row {
3494     position: relative;
3495 }
3496
3497 .raw-member-editor .member-row .member-entity-name,
3498 .raw-membership-editor .member-row .member-entity-name {
3499     font-weight: normal;
3500     padding-left: 10px;
3501 }
3502
3503 .member-incomplete .member-delete {
3504     display: none;
3505 }
3506
3507 .member-row-new .member-entity-input {
3508     border-radius: 4px 4px 0 0;
3509     border: 1px solid #cfcfcf;
3510 }
3511
3512 .add-relation {
3513     width: 40%;
3514     height: 30px;
3515     background: rgba(0,0,0,.5);
3516     border-radius: 4px;
3517     margin-top: 10px;
3518 }
3519
3520 .add-relation:hover {
3521     background: rgba(0,0,0,.8);
3522 }
3523
3524 /* Fullscreen button */
3525 div.full-screen {
3526     float: right;
3527     width: 40px;
3528     margin-right: 10px;
3529 }
3530
3531 div.full-screen .tooltip {
3532     min-width: 160px;
3533 }
3534
3535 div.full-screen > button, div.full-screen > button.active {
3536     width: 40px;
3537     height: 40px;
3538     background: transparent;
3539 }
3540
3541 div.full-screen > button:hover {
3542     background-color: rgba(0, 0, 0, .8);
3543 }
3544
3545 /* Map Controls */
3546
3547 .map-controls {
3548     right: 0;
3549     top: 70px;
3550     width: 40px;
3551     position: fixed;
3552     z-index: 100;
3553 }
3554
3555 .map-control > button {
3556     width: 40px;
3557     background: rgba(0,0,0,.5);
3558     border-radius: 0;
3559 }
3560
3561 .map-control > button:hover {
3562     background: rgba(0, 0, 0, .8);
3563 }
3564
3565 .map-control > button.active,
3566 .map-control > button.active:hover {
3567     background: #7092ff;
3568 }
3569
3570 /* Zoomer */
3571
3572 .zoombuttons button.zoom-in {
3573     border-radius: 4px 0 0 0;
3574 }
3575
3576 /* Background / Map Data Settings */
3577
3578 .map-data-control button {
3579     border-radius: 0;
3580 }
3581
3582 .background-control button {
3583     border-radius: 4px 0 0 0;
3584 }
3585
3586 .map-data-control,
3587 .background-control {
3588     position: relative;
3589 }
3590
3591 .imagery-faq {
3592     margin-bottom: 10px;
3593 }
3594
3595 .map-data-control .hide-toggle,
3596 .background-control .hide-toggle {
3597     padding-bottom: 10px;
3598 }
3599
3600 .layer-list, .controls-list {
3601     margin-bottom: 10px;
3602     border: 1px solid #CCC;
3603     border-radius: 4px;
3604 }
3605
3606 .layer-list li {
3607     position: relative;
3608     height: 30px;
3609     background-color: white;
3610     color: #7092FF;
3611 }
3612
3613 .layer-list:empty {
3614     display: none;
3615 }
3616
3617 .layer-list > li:first-child {
3618     border-radius: 3px 3px 0 0;
3619 }
3620
3621 .layer-list > li:last-child {
3622     border-radius: 0 0 3px 3px;
3623 }
3624
3625 .layer-list > li:only-child {
3626     border-radius: 3px;
3627 }
3628
3629 .layer-list li:not(:last-child) {
3630     border-bottom: 1px solid #ccc;
3631 }
3632
3633 .layer-list li:hover {
3634     background-color: #ececec;
3635 }
3636
3637 .layer-list li.active,
3638 .layer-list li.switch {
3639     background: #E8EBFF;
3640 }
3641
3642 .layer-list li.best > div.best {
3643     display: inline-block;
3644     padding: 5px;
3645     float: right;
3646 }
3647
3648 /* make sure tooltip fits in map-control panel */
3649 /* if too wide, placement will be wrong the first time it displays */
3650 .layer-list li.best .tooltip-inner {
3651     max-width: 160px;
3652 }
3653
3654 .layer-list label {
3655     display: block;
3656     padding: 5px 10px;
3657     cursor: pointer;
3658 }
3659
3660 .layer-list label > span {
3661     display: block;
3662     overflow: hidden;
3663     white-space: nowrap;
3664     text-overflow: ellipsis;
3665 }
3666
3667 .minimap-toggle {
3668     display: block;
3669     padding: 5px 10px;
3670     cursor: pointer;
3671     color: #7092FF;
3672     border-radius: 3px;
3673 }
3674
3675 .minimap-toggle.active {
3676     background: #E8EBFF;
3677 }
3678
3679 .minimap-toggle:hover {
3680     background-color: #ececec;
3681 }
3682
3683 .hide-toggle {
3684     display: block;
3685     padding-left:12px;
3686     position: relative;
3687 }
3688
3689 .hide-toggle:before {
3690     content: '';
3691     display: block;
3692     position: absolute;
3693     height: 0;
3694     width: 0;
3695     left: 0;
3696     top: 5px;
3697     border-top:  4px solid transparent;
3698     border-bottom:  4px solid transparent;
3699     border-left:  8px solid #7092ff;
3700 }
3701
3702 .hide-toggle.expanded:before {
3703     border-top:  8px solid #7092ff;
3704     border-bottom: 0;
3705     border-right:  4px solid transparent;
3706     border-left:  4px solid transparent;
3707 }
3708
3709 /* Adjust Alignment controls */
3710
3711 .background-control .nudge-container {
3712     border: 1px solid #ccc;
3713     border-radius: 4px;
3714     padding: 10px;
3715 }
3716
3717 .nudge-container .nudge-instructions {
3718     padding-bottom: 15px;
3719 }
3720
3721 .nudge-container .nudge-outer-rect {
3722     background-color: #eee;
3723     border: 1px solid #ccc;
3724     border-radius: 2px;
3725     padding: 20px 0;
3726     width: 70%;
3727     display: flex;
3728     justify-content: center;
3729     align-items: center;
3730     margin: 0 auto;
3731     margin-top: 20px;
3732     cursor: move;
3733 }
3734
3735 .nudge-container .nudge-inner-rect {
3736     background-color: #fff;
3737     border: 1px solid #ccc;
3738     border-radius: 2px;
3739     width: 65%;
3740     min-height: 20px;
3741 }
3742
3743 .nudge-container .nudge::after {
3744     content: '';
3745     display: block;
3746     position: absolute;
3747     margin: auto;
3748     left: 0; right: 0; top: 0; bottom: 0;
3749     height: 0;
3750     width: 0;
3751 }
3752
3753 .nudge-container input {
3754     width: 100%;
3755     height: 20px;
3756     text-align: center;
3757     border: 0;
3758 }
3759
3760 .nudge-container input.error {
3761     border: 1px solid #FF7878;
3762     border-radius: 2px;
3763     background: #ffb;
3764 }
3765
3766 .nudge-container input:focus {
3767     background-color: transparent;
3768 }
3769
3770 .nudge-container button {
3771     float: left;
3772     display: block;
3773     width: 20%;
3774     position: relative;
3775     background-color: transparent;
3776 }
3777
3778 .nudge-container button.right {
3779     top: -50px;
3780     right: -85%;
3781 }
3782
3783 .nudge-container button.left {
3784     top: -50px;
3785     right: 45%;
3786 }
3787
3788 .nudge-container button.top {
3789     left: 20%;
3790     top: -104px;
3791 }
3792
3793 .nudge-container button.bottom {
3794     left: -20%;
3795 }
3796
3797 .nudge-container button.nudge-reset {
3798     right: -10px;
3799 }
3800
3801 .nudge-surface {
3802    position: absolute;
3803    z-index: 5000;
3804    left: 0;
3805    top: 0;
3806    width: 100%;
3807    height: 100%;
3808    background-color: transparent;
3809    cursor: move;
3810 }
3811
3812 .background-control .nudge.right::after {
3813     border-top:  5px solid transparent;
3814     border-bottom:  5px solid transparent;
3815     border-left:  5px solid #222;
3816 }
3817
3818 .background-control .nudge.left::after {
3819     border-top:  5px solid transparent;
3820     border-bottom:  5px solid transparent;
3821     border-right:  5px solid #222;
3822 }
3823
3824 .background-control .nudge.top::after {
3825     border-right:  5px solid transparent;
3826     border-left:  5px solid transparent;
3827     border-bottom:  5px solid #222;
3828 }
3829
3830 .background-control .nudge.bottom::after {
3831     border-right:  5px solid transparent;
3832     border-left:  5px solid transparent;
3833     border-top:  5px solid #222;
3834 }
3835
3836 .opacity-options {
3837     background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat;
3838     height:20px;
3839     width:82px;
3840     position: absolute;
3841     right: 50px;
3842     top: 20px;
3843     border: 1px solid #ccc;
3844 }
3845
3846 .opacity-options li {
3847     height: 100%;
3848     display: block;
3849     float: left;
3850 }
3851
3852 .opacity-options li .select-box{
3853     position: absolute;
3854     width:20px;
3855     height:18px;
3856     z-index: 9999;
3857 }
3858
3859 .map-data-control li:hover .select-box,
3860 .map-data-control li.selected .select-box,
3861 .background-control li:hover .select-box,
3862 .background-control li.selected .select-box {
3863     border: 2px solid #7092ff;
3864     background: rgba(89, 123, 231, .5);
3865     opacity: .5;
3866 }
3867
3868 .map-data-control li.selected:hover .select-box,
3869 .map-data-control li.selected .select-box,
3870 .background-control li.selected:hover .select-box,
3871 .background-control li.selected .select-box {
3872     opacity: 1;
3873 }
3874
3875 .background-control .opacity {
3876     background:#222;
3877     display:inline-block;
3878     width:20px;
3879     height:18px;
3880 }
3881
3882 .map-data-control .layer-list button,
3883 .background-control .layer-list button {
3884     float: right;
3885     height: 100%;
3886     width: 10%;
3887     border-left: 1px solid #CCC;
3888     border-radius: 0;
3889 }
3890
3891 .map-data-control .layer-list button .icon,
3892 .background-control .layer-list button .icon {
3893     opacity: 0.5;
3894 }
3895
3896 .map-data-control .layer-list button:first-of-type,
3897 .background-control .layer-list button:first-of-type {
3898     border-radius: 0 3px 3px 0;
3899 }
3900
3901 .map-data-control .map-overlay,
3902 .background-control .map-overlay,
3903 .help-control .map-overlay {
3904     z-index: -1;
3905 }
3906
3907
3908 /* Geolocator */
3909
3910 .geolocate-control {
3911     margin-bottom: 10px;
3912 }
3913
3914 .geolocate-control button {
3915     border-radius: 0 0 0 4px;
3916 }
3917
3918 .map-overlay.content {
3919     position: fixed;
3920     top:60px;
3921     bottom: 30px;
3922     padding: 20px 50px 20px 20px;
3923     right: 0;
3924     overflow: auto;
3925 }
3926
3927 /* Help */
3928
3929 .help-control button {
3930     border-radius: 0 0 0 4px;
3931 }
3932
3933 .help-wrap p {
3934     font-size: 15px;
3935     margin-bottom: 20px;
3936 }
3937
3938 .help-wrap .left-content .body p code {
3939     padding:2px 4px;
3940     background:#eee;
3941 }
3942
3943 .help-wrap .toc {
3944     /* This is two columns, 41.66666 x .4 = 16.6666 */
3945     width:40%;
3946     float:right;
3947     margin-left: 20px;
3948     margin-bottom: 20px;
3949     padding-left: 5px
3950 }
3951
3952 .help-wrap .toc li a,
3953 .help-wrap .nav a {
3954     display: block;
3955     border: 1px solid #CCC;
3956     padding: 5px 10px;
3957 }
3958
3959 .help-wrap .toc li a {
3960     border-bottom: 0;
3961 }
3962
3963 .help-wrap .toc li a:hover,
3964 .help-wrap .nav a:hover  {
3965     background: #ececec;
3966 }
3967
3968 .help-wrap .toc li a.selected {
3969     background: #E8EBFF;
3970 }
3971
3972 .help-wrap .toc li:first-child a {
3973     border-radius: 4px 4px 0 0;
3974 }
3975
3976 .help-wrap .toc li:nth-last-child(2) a {
3977     border-bottom: 1px solid #CCC;
3978     border-radius: 0 0 4px 4px
3979 }
3980
3981 .help-wrap .toc li.walkthrough a {
3982     overflow: hidden;
3983     margin-top: 10px;
3984     border-bottom: 1px solid #ccc;
3985     border-radius: 4px;
3986 }
3987
3988 .help-wrap .nav {
3989     position: relative;
3990 }
3991
3992 .help-wrap .nav a {
3993     float: left;
3994     width: 50%;
3995     text-align: center;
3996 }
3997
3998 .help-wrap .nav a:first-child {
3999     border-radius: 4px 0 0 4px;
4000 }
4001
4002 .help-wrap .nav a:last-child:not(:only-child) {
4003     border-radius: 0 4px 4px 0;
4004     border-left: 0;
4005 }
4006
4007 .help-wrap .nav a:only-child {
4008     width: 100%;
4009     border-radius: 4px;
4010 }
4011
4012
4013 /* Tiles
4014 ------------------------------------------------------- */
4015
4016 img.tile {
4017     position:absolute;
4018     transform-origin:0 0;
4019     -ms-transform-origin:0 0;
4020     -webkit-transform-origin:0 0;
4021     -moz-transform-origin:0 0;
4022     -o-transform-origin:0 0;
4023
4024     -moz-user-select: none;
4025     -webkit-user-select: none;
4026     -ms-user-select: none;
4027     user-select: none;
4028
4029     opacity: 0;
4030
4031     -webkit-transition: opacity 200ms linear;
4032     transition: opacity 200ms linear;
4033     -moz-transition: opacity 200ms linear;
4034 }
4035
4036 .tile-label-debug {
4037     background: rgba(0, 0, 0, 0.7);
4038     color: #fff;
4039     position: absolute;
4040     text-align: center;
4041     width: 128px;
4042     border-radius: 3px;
4043     z-index: 2;
4044
4045     transform-origin:0 0;
4046     -ms-transform-origin:0 0;
4047     -webkit-transform-origin:0 0;
4048     -moz-transform-origin:0 0;
4049     -o-transform-origin:0 0;
4050
4051     -moz-user-select: none;
4052     -webkit-user-select: none;
4053     -ms-user-select: none;
4054     user-select: none;
4055 }
4056
4057 img.tile-debug {
4058     border: 1px solid red;
4059 }
4060
4061 img.tile-loaded {
4062     opacity: 1;
4063 }
4064
4065 img.tile-removing {
4066     opacity: 0;
4067 }
4068
4069
4070 /* Map
4071 ------------------------------------------------------- */
4072
4073 #map {
4074     position:relative;
4075     overflow:hidden;
4076     height:100%;
4077     background:#000;
4078 }
4079
4080 #supersurface {
4081     transform-origin:0 0;
4082     -ms-transform-origin:0 0;
4083     -webkit-transform-origin:0 0;
4084     -moz-transform-origin:0 0;
4085     -o-transform-origin:0 0;
4086
4087     -moz-user-select: none;
4088     -webkit-user-select: none;
4089     -ms-user-select: none;
4090     user-select: none;
4091 }
4092
4093 #supersurface, .layer {
4094     position: absolute;
4095     top: 0;
4096     left: 0;
4097     right: 0;
4098     bottom: 0;
4099 }
4100
4101 /* Map-In-Map
4102 ------------------------------------------------------- */
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-svg,
4130 .map-in-map-gpx {
4131     top: 0;
4132     left: 0;
4133     overflow: hidden;
4134     height: 100%;
4135     width: 100%;
4136 }
4137
4138 .map-in-map-svg {
4139     position: absolute;
4140 }
4141
4142 .map-in-map-gpx {
4143     position: relative;
4144     z-index: 10;
4145 }
4146
4147 .bbox,
4148 .map-in-map-bbox {
4149     fill: none;
4150     stroke: rgba(255, 255, 0, 0.75);
4151     stroke-width: 1;
4152     shape-rendering: crispEdges;
4153 }
4154
4155 .map-in-map-bbox.thick {
4156     stroke-width: 5;
4157 }
4158
4159 /* Info Box
4160 ------------------------------------------------------- */
4161 .infobox {
4162     position: absolute;
4163     z-index: 1;
4164     right: 0;
4165     bottom: 30px;
4166     width: 240px;
4167     border-radius: 4px 0 0 0;
4168     border-bottom: 1px solid black;
4169 }
4170
4171 .infobox .infobox-heading {
4172     display: block;
4173     border-radius: 4px 0 0 0;
4174     padding: 5px 10px;
4175     height: 30px;
4176 }
4177
4178 .infobox ul {
4179     padding: 5px 10px;
4180 }
4181
4182 .infobox .button {
4183     position: absolute;
4184     background: #7092ff;
4185     border-radius: 2px;
4186     padding: 0 4px;
4187     color: white;
4188     top: 40px;
4189     right: 10px;
4190 }
4191
4192 /* About Section
4193 ------------------------------------------------------- */
4194
4195 #about {
4196     width: 100%;
4197     position: absolute;
4198     right:0;
4199     bottom:0;
4200     border-radius: 0;
4201     pointer-events: none;
4202 }
4203
4204 #attrib {
4205     width: 100%;
4206     height: 20px;
4207     margin-bottom: 5px;
4208     float: left;
4209     clear: both;
4210 }
4211
4212 #attrib * { pointer-events: all; }
4213
4214 .base-layer-attribution,
4215 .overlay-layer-attribution {
4216     position: absolute;
4217     color: #888;
4218     font-size: 10px;
4219 }
4220
4221 .base-layer-attribution {
4222     left: 10px;
4223 }
4224
4225 .overlay-layer-attribution {
4226     right: 10px;
4227 }
4228
4229 .overlay-layer-attribution .attribution:not(:last-child):after {
4230     content: '; ';
4231 }
4232
4233 .source-image {
4234     height:20px;
4235     vertical-align:top;
4236 }
4237
4238 #footer {
4239     width: 100%;
4240     float: left;
4241     clear: both;
4242     pointer-events: all;
4243 }
4244
4245 #scale-block {
4246     display: table-cell;
4247     vertical-align: bottom;
4248     width: 250px;
4249     max-height: 30px;
4250     float: left;
4251     clear: left;
4252     -moz-user-select: none;
4253     -webkit-user-select: none;
4254     -ms-user-select: none;
4255     user-select: none;
4256 }
4257
4258 #info-block {
4259     max-height: 30px;
4260     clear: right;
4261 }
4262
4263 #scale {
4264     height: 30px;
4265     width: 100%;
4266 }
4267
4268 #scale:hover {
4269     cursor: pointer;
4270 }
4271
4272 #scale text {
4273     font: 12px sans-serif;
4274     stroke: none;
4275     fill: #ccc;
4276     text-anchor: start;
4277 }
4278
4279 #scale path {
4280     fill: none;
4281     stroke: #ccc;
4282     stroke-width: 1;
4283     shape-rendering: crispEdges;
4284 }
4285
4286 #about-list {
4287     text-align: right;
4288     margin-right: 10px;
4289     clear: right;
4290     overflow: hidden;
4291 }
4292
4293 #about-list li {
4294     float: right;
4295     border-left: 1px solid rgba(255,255,255,.5);
4296     padding: 5px 0 5px 5px;
4297     margin-left: 5px;
4298 }
4299
4300 #about-list li:last-child {
4301     border-left: 0;
4302     margin-left: 0;
4303     padding-left: 0;
4304 }
4305
4306 .source-switch a {
4307     padding: 2px 4px 4px 4px;
4308     border-radius: 2px;
4309 }
4310 .source-switch a.live {
4311     background: #d32232;
4312     color:#fff;
4313 }
4314
4315 .feature-warning a {
4316     background: #1e90ff;
4317     padding: 2px 4px 4px 4px;
4318     border-radius: 2px;
4319     color: #eee;
4320 }
4321
4322 .user-list a:not(:last-child):after {
4323     content: ', ';
4324 }
4325
4326 .api-status {
4327     float: right;
4328     clear: both;
4329     text-align: right;
4330     width: 100%;
4331     padding: 0px 10px;
4332 }
4333
4334 .api-status.offline,
4335 .api-status.readonly,
4336 .api-status.error {
4337     background: red;
4338 }
4339
4340 /* Modals
4341 ------------------------------------------------------- */
4342
4343 .modal {
4344     top: 40px;
4345     display: inline-block;
4346     position:absolute;
4347     border-radius: 3px;
4348     overflow: hidden;
4349     left: 0;
4350     right: 0;
4351     margin: auto;
4352     z-index: 50;
4353 }
4354
4355 .modal .loader {
4356     margin-bottom: 10px;
4357 }
4358
4359 .modal .description {
4360     text-align: center;
4361 }
4362
4363 .shaded {
4364     z-index: 49;
4365     position: absolute;
4366     top: 0;
4367     bottom: 0;
4368     left: 0;
4369     right: 0;
4370     overflow: auto;
4371 }
4372
4373 .shaded:before {
4374     content:'';
4375     background:rgba(0,0,0,0.5);
4376     position:fixed;
4377     left:0px; right:0px; top:0px; bottom:0px;
4378 }
4379
4380 .modal-section {
4381     padding: 20px;
4382     border-bottom: 1px solid #CCC;
4383 }
4384
4385 .modal-section.header h3 {
4386     padding: 0;
4387 }
4388
4389 .modal-section.buttons {
4390     text-align: center;
4391 }
4392
4393 .modal-section.buttons .action {
4394     display: inline-block;
4395     margin: 0 10px;
4396     text-align: center;
4397     vertical-align: middle;
4398 }
4399
4400 .save-section .buttons .action,
4401 .save-section .buttons .secondary-action {
4402     display: inline-block;
4403     margin: 0 20px 0 0;
4404     text-align: center;
4405     vertical-align: middle;
4406 }
4407
4408 .loading-modal {
4409     text-align: center;
4410 }
4411
4412 .modal-actions button,
4413 .save-success a.button {
4414     font-weight: normal;
4415     color: #7092FF;
4416     border-bottom: 1px solid #CCC;
4417     border-radius: 0;
4418     height: 160px;
4419     text-align: center;
4420     display: inline-block;
4421 }
4422
4423 .modal-actions button:hover
4424 .save-success a.button:hover {
4425     background-color: #ececec;
4426 }
4427
4428 .modal-actions button:before,
4429 .save-success a.button.osm:before,
4430 .walkthrough a:before {
4431     display: block;
4432     content: '';
4433     height: 100px;
4434     width: 100%;
4435     max-width: 100px;
4436     margin: auto;
4437     margin-bottom: 10px;
4438     background:transparent url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -200px -460px;
4439 }
4440
4441 .modal-actions :first-child {
4442     border-right: 1px solid #CCC;
4443 }
4444
4445 .modal-section:last-child {
4446     border-bottom: 0;
4447 }
4448
4449 /* Restore Modal
4450 ------------------------------------------------------- */
4451
4452 .modal-actions .restore:before {
4453     background-position: -500px -460px;
4454 }
4455
4456 .modal-actions .reset:before {
4457     background-position: -600px -460px;
4458 }
4459
4460 /* Success Modal
4461 ------------------------------------------------------- */
4462
4463 .save-success p {
4464     padding: 15px 15px 0 15px;
4465 }
4466 .save-success a.details {
4467   padding-left: 15px;
4468 }
4469 .save-success .button {
4470     padding-top: 15px;
4471 }
4472
4473 .save-success a.button.social {
4474     height: auto;
4475 }
4476
4477 .save-success .icon.social {
4478     height: 80px;
4479     width: 80px;
4480     color: #7092FF;
4481 }
4482
4483 .save-success .button.osm:before {
4484     background-position: -200px -460px;
4485 }
4486
4487 /* Splash Modal
4488 ------------------------------------------------------- */
4489
4490 .modal-actions .walkthrough:before,
4491 .walkthrough a:before {
4492     background-position: -300px -460px;
4493 }
4494
4495 .modal-actions .start:before {
4496     background-position: -400px -460px;
4497 }
4498
4499 /* Commit Modal
4500 ------------------------------------------------------- */
4501
4502 .mode-save a.user-info {
4503     display: inline-block;
4504 }
4505
4506 .mode-save .commit-form {
4507     margin-bottom: 0;
4508 }
4509
4510 .mode-save .user-info img {
4511     float: left;
4512 }
4513
4514 .mode-save h3 small.count {
4515     margin-right: 10px;
4516     text-align: center;
4517     float: left;
4518     height: 12px;
4519     min-width: 12px;
4520     font-size:12px;
4521     line-height: 12px;
4522     border-radius:24px;
4523     padding:5px;
4524     background:#7092ff;
4525     color:#fff;
4526 }
4527
4528 .mode-save .commit-info {
4529     margin-bottom: 10px;
4530 }
4531
4532 .mode-save .changeset-list {
4533     border:1px solid #ccc;
4534     border-radius: 4px;
4535     background:#fff;
4536 }
4537
4538 .mode-save .warning-section .changeset-list button {
4539     border-left: 1px solid #CCC;
4540 }
4541
4542 .mode-save .changeset-list li {
4543     position: relative;
4544     border-top:1px solid #ccc;
4545     padding:5px 10px;
4546     cursor: pointer;
4547 }
4548
4549 .mode-save .changeset-list li:hover {
4550     background-color: #ececec;
4551 }
4552
4553 .mode-save .changeset-list .alert {
4554     opacity: 0.5;
4555 }
4556
4557 .changeset-list li span.count {
4558     font-size:10px;
4559     color:#555;
4560 }
4561
4562 .mode-save .commit-section .changeset-list button {
4563     border-left: 1px solid #CCC;
4564 }
4565
4566 .changeset-list li span.count:before { content: '('; }
4567
4568 .changeset-list li span.count:after { content: ')'; }
4569
4570 .changeset-list li:first-child { border-top: 0;}
4571
4572 /* Conflict resolution
4573 ------------------------------------------------------- */
4574
4575 .conflicts-help {
4576     padding: 20px;
4577     background-color: #ffffbb;
4578     border-bottom: 1px solid #ccc;
4579 }
4580
4581 .conflicts-buttons {
4582     padding: 20px;
4583 }
4584
4585 .mode-save button.conflicts-button {
4586     float: left;
4587 }
4588
4589 .conflict-container {
4590     border-bottom: 1px solid #ccc;
4591 }
4592
4593 .conflict-description {
4594     padding: 5px 20px;
4595     display: block;
4596 }
4597
4598 .conflicts-done {
4599     padding: 20px 20px 0 20px;
4600 }
4601
4602 .conflict-detail-container {
4603     padding: 10px 20px;
4604 }
4605
4606 .conflict-count {
4607     padding: 10px 20px;
4608 }
4609
4610 .conflict-choices {
4611     margin-top: 10px;
4612 }
4613
4614 .conflict-nav-buttons {
4615     padding: 10px 0 20px 0;
4616 }
4617
4618 .conflict-nav-button {
4619     height: 30px;
4620 }
4621
4622 /* Notices
4623 ------------------------------------------------------- */
4624
4625 .notice {
4626     position: absolute;
4627     top: 0;
4628     bottom: 0;
4629     left: 0;
4630     right: 0;
4631     text-align: center;
4632     background: #fff;
4633 }
4634
4635 .notice .zoom-to {
4636     margin: auto;
4637     width: 80%;
4638     height: 100px;
4639     border-radius: 5px;
4640     line-height: 40px;
4641     color: #000;
4642     opacity: 0.9;
4643 }
4644
4645 .notice .zoom-to:hover {
4646     background: #d8e1ff;
4647 }
4648
4649 .notice .zoom-to .icon {
4650     margin-top:10px;
4651     margin-right:10px;
4652 }
4653
4654 /* Tooltips
4655 ------------------------------------------------------- */
4656
4657 .tooltip {
4658     position: absolute;
4659     display: none;
4660     color:#333;
4661     text-align: left;
4662     font-size: 12px;
4663 }
4664
4665 .tooltip.in {
4666     opacity: 0.8;
4667     z-index: 1030;
4668     height: auto;
4669     display: block;
4670 }
4671
4672 .tooltip.top {
4673     margin-top: -20px;
4674     text-align: center;
4675 }
4676
4677 .tooltip.right {
4678     margin-left: 20px;
4679 }
4680
4681 .tooltip.bottom {
4682     margin-top: 20px;
4683     text-align: center;
4684 }
4685
4686 .tooltip.left {
4687     margin-left: -20px;
4688     text-align: right;
4689 }
4690
4691 .tooltip-inner {
4692     display: inline-block;
4693     border-radius: 3px;
4694     max-width: 200px;
4695     min-width: 80px;
4696     padding: 10px;
4697     font-weight: normal;
4698     background-color: white;
4699 }
4700
4701 .tail {
4702     width: 200px;
4703     height: 400px;
4704     pointer-events: none;
4705     opacity: .8;
4706     margin-top: -200px;
4707     position: absolute;
4708     background: transparent;
4709 }
4710
4711 .tail::after {
4712     content: "";
4713     position: absolute;
4714     width: 0;
4715     height: 0;
4716     border-color: transparent;
4717     border-style: solid;
4718     top: 50%;
4719     right: -5px;
4720     margin-top: -5px;
4721     border-left-color: white;
4722     border-width: 5px 0 5px 5px;
4723 }
4724
4725 .tail div {
4726     border-radius: 3px;
4727     padding: 10px;
4728     background: white;
4729     position: absolute;
4730     top: 180px;
4731     left: 0;
4732     right: 0;
4733     margin: auto;
4734 }
4735
4736 .left.tail::after {
4737     content: "";
4738     position: absolute;
4739     width: 0;
4740     height: 0;
4741     border-color: transparent;
4742     border-style: solid;
4743     top: 50%;
4744     left: -5px;
4745     margin-top: -5px;
4746     border-right-color: white;
4747     border-width: 5px 5px 5px 0;
4748 }
4749
4750 .tooltip-arrow {
4751     position: absolute;
4752     width: 0;
4753     height: 0;
4754     border-color: transparent;
4755     border-style: solid;
4756 }
4757
4758 .tooltip.top .tooltip-arrow {
4759     bottom: -5px;
4760     left: 50%;
4761     margin-left: -5px;
4762     border-top-color: white;
4763     border-width: 5px 5px 0;
4764 }
4765
4766 .tooltip.right .tooltip-arrow {
4767     top: 50%;
4768     left: -5px;
4769     margin-top: -5px;
4770     border-right-color: white;
4771     border-width: 5px 5px 5px 0;
4772 }
4773
4774 .tooltip.left .tooltip-arrow {
4775     top: 50%;
4776     right: -5px;
4777     margin-top: -5px;
4778     border-left-color: white;
4779     border-width: 5px 0 5px 5px;
4780 }
4781
4782 .tooltip.bottom .tooltip-arrow {
4783     top: -5px;
4784     left: 50%;
4785     margin-left: -5px;
4786     border-bottom-color: white;
4787     border-width: 0 5px 5px;
4788 }
4789
4790 .keyhint-wrap {
4791     background: #F6F6F6;
4792     padding: 10px;
4793     margin: 10px -10px -10px;
4794     border-radius: 0 0 3px 3px;
4795 }
4796
4797 .tooltip-inner .keyhint {
4798     font-weight: bold;
4799 }
4800
4801 /* Exceptions for tooltip layouts */
4802
4803 /* make tooltips in panels dark */
4804 .map-overlay .tooltip.top .tooltip-arrow,
4805 .entity-editor-pane .tooltip.top .tooltip-arrow,
4806 .warning-section .tooltip.top .tooltip-arrow {
4807     border-top-color: #000;
4808 }
4809
4810 .map-overlay .tooltip.bottom .tooltip-arrow,
4811 .entity-editor-pane .tooltip.bottom .tooltip-arrow,
4812 .warning-section .tooltip.bottom .tooltip-arrow {
4813     border-bottom-color: #000;
4814 }
4815
4816 .map-overlay .tooltip.left .tooltip-arrow,
4817 .entity-editor-pane .tooltip.left .tooltip-arrow,
4818 .warning-section .tooltip.left .tooltip-arrow {
4819     border-left-color: #000;
4820 }
4821
4822 .map-overlay .tooltip.right .tooltip-arrow,
4823 .entity-editor-pane .tooltip.right .tooltip-arrow,
4824 .warning-section .tooltip.right .tooltip-arrow {
4825     border-right-color: #000;
4826 }
4827
4828 .map-overlay .tooltip-inner,
4829 .map-overlay .keyhint-wrap,
4830 .entity-editor-pane .tooltip-inner,
4831 .warning-section .tooltip-inner {
4832     background: #000;
4833     color: #ccc;
4834 }
4835 /* commit warning tooltips need to be closer */
4836 .warning-section .tooltip.top {
4837     margin-top: -5px;
4838 }
4839
4840 /* Uncramp map-control tooltips */
4841 .map-control .tooltip {
4842     min-width: 160px;
4843 }
4844 /* Move over tooltips that are near the edge of screen */
4845 .add-point .tooltip {
4846     left: 33.3333% !important;
4847 }
4848
4849 .curtain-tooltip.intro-points-add .tooltip-arrow,
4850 .add-point .tooltip .tooltip-arrow {
4851     left: 60px;
4852 }
4853
4854 .radial-menu-tooltip {
4855     opacity: 0.8;
4856     display: none;
4857     position: absolute;
4858     width: 200px;
4859 }
4860
4861 .radial-menu-background {
4862     fill: none;
4863     stroke: black;
4864     stroke-opacity: 0.5;
4865 }
4866
4867 .radial-menu-item circle {
4868     fill: #eee;
4869 }
4870
4871 .radial-menu-item circle:active,
4872 .radial-menu-item circle:hover {
4873     fill: #fff;
4874 }
4875
4876 .radial-menu-item.disabled circle {
4877     cursor: auto;
4878     fill: rgba(255,255,255,.5);
4879 }
4880
4881 .radial-menu-item use {
4882     fill: #222;
4883     color: #79f;
4884 }
4885
4886 .radial-menu-item.disabled use {
4887     fill: rgba(32,32,32,.5);
4888     color: rgba(40,40,40,.5);
4889 }
4890
4891 .lasso-path {
4892     fill-opacity:0.3;
4893     stroke: #fff;
4894     stroke-width: 1;
4895     stroke-opacity: 1;
4896     stroke-dasharray: 5, 5;
4897 }
4898
4899 /* Media Queries
4900 ------------------------------------------------------- */
4901
4902 @media only screen and (max-width: 840px) {
4903     /* override hide for save button */
4904     #bar .save .label { display: block;}
4905 }
4906
4907 @media screen and (max-width: 1200px) {
4908     .user-list { display: none !important; }
4909 }
4910
4911 @media screen and (max-width: 1000px) {
4912     #userLink { display: none !important; }
4913 }
4914
4915 @media screen and (max-width: 900px) {
4916     #scale-block { display: none !important; }
4917 }
4918
4919
4920 /* Scrollbars
4921  ----------------------------------------------------- */
4922
4923 ::-webkit-scrollbar {
4924     height: 20px;
4925     overflow: visible;
4926     width: 10px;
4927     background: white;
4928     border-left: 1px solid #DDD;
4929 }
4930
4931 ::-webkit-scrollbar-track {
4932     background-clip: padding-box;
4933     border: solid transparent;
4934     border-width: 0;
4935 }
4936
4937 ::-webkit-scrollbar-thumb {
4938     background-color: rgba(0,0,0,.2);
4939     background-clip: padding-box;
4940     border: solid transparent;
4941     border-width: 3px 3px 3px 4px;
4942     border-radius: 6px;
4943 }
4944 ::-webkit-scrollbar-track:hover,
4945 ::-webkit-scrollbar-track:active {
4946     background-color: rgba(0,0,0,.05);
4947 }
4948
4949 /* Intro walkthrough
4950  ----------------------------------------------------- */
4951
4952 .curtain-darkness {
4953     pointer-events: all;
4954     fill-opacity: 0.7;
4955     fill: #222;
4956     fill-rule: evenodd;
4957 }
4958
4959 .intro-nav-wrap {
4960     position: absolute;
4961     left: 0;
4962     right: 0;
4963     bottom: 30px;
4964     padding: 10px;
4965     z-index: 1001;
4966 }
4967
4968 .intro-nav-wrap button.step {
4969     width: 20%;
4970 }
4971
4972 .intro-nav-wrap button.step.finished {
4973     background: #8cd05f;
4974 }
4975
4976 .intro-nav-wrap button.step .icon {
4977     display: none;
4978 }
4979
4980 .intro-nav-wrap button.step.finished .icon {
4981     display: inline-block;
4982 }
4983
4984
4985 .curtain-tooltip .tooltip-inner {
4986     text-align: left;
4987     padding: 20px;
4988 }
4989
4990 .curtain-tooltip .tooltip-inner {
4991     font-size: 15px;
4992 }
4993
4994 .curtain-tooltip .tooltip-inner .bold {
4995     font-weight: bold;
4996     display: block;
4997     border-top: 1px solid #CCC;
4998     margin-top: 10px;
4999     margin-left: -20px;
5000     margin-right: -20px;
5001     padding: 10px 20px 0 20px;
5002 }
5003
5004 .curtain-tooltip .tooltip-inner .bold:only-child {
5005     border: 0;
5006     padding: 0;
5007     margin: 0;
5008 }
5009
5010 .curtain-tooltip.intro-points-describe {
5011     top: 133px !important;
5012 }
5013
5014 /* Tooltip illustrations */
5015
5016 .intro-points-add .tooltip-inner::before,
5017 .intro-areas-add .tooltip-inner::before,
5018 .intro-lines-add .tooltip-inner::before {
5019     margin-left: -20px;
5020     display: block;
5021     content: "";
5022     height: 80px;
5023     width: 200px;
5024     background:transparent url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat 0 -320px;
5025 }
5026
5027 .intro-areas-add .tooltip-inner::before {
5028     background-position: 0 -400px;
5029 }
5030
5031 .intro-lines-add .tooltip-inner::before {
5032     background-position: 0 -480px;
5033 }
5034
5035 .huge-modal-button {
5036     width: 100%;
5037     height: auto;
5038     padding: 20px;
5039 }
5040
5041 .huge-modal-button .illustration {
5042     height: 100px;
5043     width: 100px;
5044     background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -300px -460px;
5045     margin: auto;
5046 }
5047
5048 /* Mapillary
5049 ------------------------------------------------------- */
5050 .mapillary-wrap {
5051     position: absolute;
5052     bottom: 30px;
5053     width: 330px;
5054     height: 250px;
5055     padding: 5px;
5056     background-color: #fff;
5057 }
5058
5059 .mapillary-wrap.hidden {
5060     visibility: hidden;
5061 }
5062
5063 .mapillary-wrap .uil-ripple-css {
5064   top: -9px;
5065   left: -15px;
5066 }
5067
5068 .mapillary-wrap .uil-ripple-css div {
5069     top: 38px;
5070 }
5071
5072 .mapillary-wrap button.thumb-hide {
5073     border-radius: 0;
5074     padding: 5px;
5075     position: absolute;
5076     right: 0;
5077     top: 0;
5078     z-index: 500;
5079 }
5080
5081 .mly-wrapper {
5082   visibility: hidden;
5083 }
5084
5085 .mly-wrapper.active {
5086   visibility: visible;
5087 }