vendor/assets/iD/iD.css.erb

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