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