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