vendor/assets/iD/iD.css.erb

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