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