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