app/assets/stylesheets/common.scss

   1 @import "parameters";
   2 @import "bootstrap";
   3 @import "rails_bootstrap_forms";
   4
   5 /* Bootstrap + r2 fixes */
   6
   7 :root[dir=rtl] {
   8   .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
   9     /* no-r2 */
  10     right: unset !important;
  11     left: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
  12
  13     &::before {
  14       /* no-r2 */
  15       left: unset !important;
  16       right: -1px !important;
  17     }
  18   }
  19
  20   .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
  21     /* no-r2 */
  22     left: unset !important;
  23     right: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
  24
  25     &::before {
  26       /* no-r2 */
  27       right: unset !important;
  28       left: -1px !important;
  29     }
  30   }
  31 }
  32
  33 /* Styles common to large and small screens */
  34
  35 /* Default rules for the body of every page */
  36
  37 body {
  38   font-size: $typeheight;
  39 }
  40
  41 p > img {
  42   width: auto;
  43   max-width: 100%;
  44 }
  45
  46 small, aside {
  47   font-size: 12px;
  48 }
  49
  50 time[title] {
  51   text-decoration: underline dotted;
  52 }
  53
  54 #container { position: relative; }
  55
  56 .small_icon {
  57   vertical-align: middle;
  58   margin-right: $lineheight * 0.25;
  59 }
  60
  61 [dir=rtl] { /* no-r2 */ text-align: right; }
  62
  63 [dir=ltr] { /* no-r2 */ text-align: left; }
  64
  65 /* Rules for icons */
  66
  67 .icon {
  68   display: inline-block;
  69   vertical-align: top;
  70   width: 20px;
  71   height: 20px;
  72   background: transparent image-url("sprite.png") no-repeat 0 0;
  73   background-image: image-url("sprite.svg");
  74   text-indent: -9999px;
  75   overflow: hidden;
  76 }
  77
  78 .icon.search      { /* no-r2 */ background-position: 0 0; }
  79 .icon.donate      { /* no-r2 */ background-position: -20px 0; }
  80 .icon.zoomin      { /* no-r2 */ background-position: -40px 0; }
  81 .icon.zoomout     { /* no-r2 */ background-position: -60px 0; }
  82 .icon.geolocate   { /* no-r2 */ background-position: -80px 0; }
  83 .active .icon.geolocate   { /* no-r2 */ background-position: -80px -20px; }
  84 .icon.layers      { /* no-r2 */ background-position: -100px 0; }
  85 .icon.key         { /* no-r2 */ background-position: -120px 0; }
  86 .icon.share       { /* no-r2 */ background-position: -140px 0; }
  87 .icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
  88 .icon.link        { /* no-r2 */ background-position: -180px 0; }
  89 .icon.close       { /* no-r2 */ background-position: -200px 0; }
  90 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
  91 .icon.check       { /* no-r2 */ background-position: -220px 0; }
  92 .icon.note        { /* no-r2 */ background-position: -240px 0; }
  93 .icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
  94 .icon.query       { /* no-r2 */ background-position: -260px 0; }
  95
  96 /* Utility for de-emphasizing content */
  97
  98 .text-muted a {
  99   color: $blue;
 100 }
 101
 102 /* Rules for borders */
 103 /* These add additional colours to those provided by bootstrap */
 104 .border-grey {
 105   border-color: $grey !important;
 106 }
 107
 108 .border-lightgrey {
 109   border-color: $lightgrey !important;
 110 }
 111
 112 /* Rules for the header */
 113
 114 #menu-icon {
 115   display: none;
 116   float: right;
 117   background: image-url("menu-icon.png") no-repeat;
 118   background-size: 30px 30px;
 119   width: 30px;
 120   height: 30px;
 121   margin: 14px 10px 0 0;
 122   opacity: 0.6;
 123 }
 124
 125 header {
 126   height: $headerHeight;
 127   position: relative;
 128   z-index: 1001;
 129   font-size: 14px;
 130
 131   h1, nav, nav > ul, nav > ul > li {
 132     display: inline-block;
 133   }
 134
 135   > * {
 136     height: 100%;
 137     padding: $lineheight * 0.5;
 138   }
 139
 140   h1, nav.primary {
 141     float: left;
 142   }
 143
 144   img.logo {
 145     margin-top: -2px;
 146   }
 147
 148   h1 {
 149     font-size: 18px;
 150     line-height: 1.2;
 151     padding-top: 15px;
 152   }
 153
 154   .btn {
 155     font-size: 14px;
 156   }
 157 }
 158
 159
 160 nav.primary {
 161   & > .btn-group .btn-outline-primary {
 162     @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
 163   }
 164
 165   .disabled {
 166     .btn-outline-primary {
 167       color: $grey;
 168       cursor: default;
 169
 170       .caret {
 171         border-top-color: $grey;
 172       }
 173
 174       &:hover {
 175         background-color: lighten($green, 30%);
 176       }
 177     }
 178   }
 179
 180   // Small tweaks to the toggle to stop the primary colour showing through
 181   // when the menu is shown
 182   .show > .btn-outline-primary.dropdown-toggle {
 183     background-color: $green;
 184     border-color: $green;
 185
 186     &:focus {
 187       box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
 188     }
 189   }
 190 }
 191
 192 nav.secondary {
 193   position: absolute;
 194   right: 0;
 195
 196   .nav-link {
 197     padding: 0.2rem;
 198     color: $darkgrey;
 199   }
 200
 201   > ul li.current a {
 202     color: darken($darkgrey, 25%);
 203   }
 204
 205   #inboxanchor {
 206     background-color: lighten($grey, 10%);
 207   }
 208 }
 209
 210 nav.primary, nav.secondary {
 211   .dropdown-item {
 212     &:hover, &:active {
 213       background-color: $green;
 214       color: white;
 215     }
 216   }
 217 }
 218
 219 #compact-secondary-nav {
 220   display: none;
 221 }
 222
 223 body.compact-nav {
 224   #compact-secondary-nav {
 225     display: inline-block;
 226   }
 227   .compact-hide {
 228     display: none;
 229   }
 230 }
 231
 232 body.small-nav {
 233   #menu-icon {
 234     display: block;
 235   }
 236
 237   nav.primary,
 238   nav.secondary {
 239     float: none !important;
 240     position: relative;
 241     display: block;
 242     clear: both;
 243   }
 244
 245   header {
 246     height: auto;
 247     min-height: $headerHeight;
 248     background: #fff;
 249
 250     &.closed nav {
 251       display: none;
 252     }
 253
 254     .search_forms {
 255       display: block;
 256     }
 257   }
 258
 259   #sidebar .search_forms,
 260   #edit_tab,
 261   #export_tab {
 262     display: none;
 263   }
 264
 265   nav.primary {
 266     padding: 0;
 267
 268     ul, li {
 269       border: none;
 270       border-radius: 0;
 271       width: 100%;
 272     }
 273
 274     ul {
 275       border-top: 1px solid #eee;
 276       li {
 277         border-bottom: 1px solid #eee;
 278         border-right: none;
 279         > a {
 280           border-radius: 0;
 281           width: 100%;
 282           text-align: center;
 283           font-size: 15px;
 284         }
 285       }
 286     }
 287
 288     .btn-group {
 289       width: 100%;
 290       padding: 10px;
 291     }
 292   }
 293
 294   nav.secondary {
 295     .user-menu, .login-menu {
 296       width: 100%;
 297     }
 298   }
 299
 300   #compact-secondary-nav {
 301     display: none;
 302   }
 303
 304   .compact-hide {
 305     display: inline-block;
 306   }
 307
 308   .overlay-sidebar #sidebar .welcome {
 309     display: none;
 310   }
 311
 312   .overlay-sidebar #sidebar #banner {
 313     display: none;
 314   }
 315 }
 316
 317 /* Utility for styling notification numbers */
 318
 319 .count-number {
 320   background: lighten($green, 30%);
 321   color: $gray-800;
 322   font-weight: $font-weight-normal;
 323 }
 324
 325 /* Rules for Leaflet maps */
 326
 327 .leaflet-top.leaflet-right,
 328 .leaflet-top.leaflet-left {
 329   height: 100%;
 330   column-gap: 10px;
 331   display: flex;
 332   flex-direction: column;
 333   flex-wrap: wrap-reverse;
 334 }
 335
 336 .leaflet-control .control-button {
 337   display: block;
 338   height: 40px;
 339   width: 40px;
 340   background-color: #333;
 341   background-color: rgba(0,0,0,.6);
 342   outline: none;
 343
 344   &:hover,
 345   &:focus {
 346     background-color: black;
 347   }
 348
 349   &.disabled,
 350   &.leaflet-disabled {
 351     background-color: #333;
 352     background-color: rgba(0,0,0,.5);
 353     cursor: default;
 354   }
 355
 356   &.active {
 357     background-color: $vibrant-green;
 358   }
 359
 360   &-first {
 361     border-start-start-radius: 4px;
 362   }
 363
 364   &-last {
 365     border-end-start-radius: 4px;
 366     margin-bottom: 10px;
 367   }
 368
 369   .icon {
 370     margin: 10px;
 371   }
 372 }
 373
 374 /* Rules for the sidebar and main map area */
 375
 376 .map-layout {
 377   #content {
 378     overflow: hidden;
 379     position: absolute;
 380     top: $headerHeight;
 381     bottom: 0;
 382     width: 100%;
 383   }
 384
 385   #sidebar, #map {
 386     position: relative;
 387     height: 100%;
 388     overflow-x: hidden;
 389     overflow-y: auto;
 390   }
 391
 392   #sidebar {
 393     float: left;
 394     width: $sidebarWidth;
 395     background: #fff;
 396
 397     #sidebar_loader {
 398       display: none;
 399     }
 400   }
 401
 402   .overlay-sidebar #sidebar {
 403     position: absolute;
 404     z-index: 1000;
 405     height: auto;
 406     overflow: hidden;
 407
 408     #banner {
 409       display: block;
 410     }
 411
 412     .welcome {
 413       display: block;
 414     }
 415
 416     #sidebar_content {
 417       display: none;
 418     }
 419   }
 420
 421   .welcome {
 422     display: none;
 423   }
 424
 425   #banner {
 426     display: none;
 427
 428     img {
 429       display: block;
 430       width: $sidebarWidth;
 431     }
 432   }
 433
 434   #map {
 435     height: 100%;
 436     overflow: hidden;
 437
 438     &.query-active {
 439       cursor: help;
 440     }
 441
 442     &.query-disabled {
 443       cursor: not-allowed;
 444     }
 445
 446     .leaflet-marker-draggable {
 447       cursor: move;
 448     }
 449   }
 450
 451   #map-ui {
 452     display: none;
 453     position: relative;
 454     float: right;
 455     width: 250px;
 456     height: 100%;
 457     background: white;
 458     overflow: auto;
 459
 460     .section {
 461       border-bottom: 1px solid $grey;
 462       padding: $spacer;
 463     }
 464   }
 465 }
 466
 467 @include media-breakpoint-down(md) {
 468   body.map-layout {
 469     #sidebar, #map {
 470       position: relative;
 471       overflow-x: hidden;
 472       width: 100%;
 473       height: 50%;
 474     }
 475
 476     #map-ui {
 477       z-index: 9999;
 478       width: 100%;
 479       height: 50%;
 480       overflow-y: scroll;
 481     }
 482
 483     .overlay-sidebar {
 484       #sidebar {
 485         position: absolute;
 486         width: 350px;
 487         height: auto;
 488         overflow: hidden;
 489       }
 490
 491       #map, #map-ui {
 492         height: 100%;
 493       }
 494     }
 495   }
 496 }
 497
 498 .layers-ui {
 499   .base-layers {
 500     .leaflet-container {
 501       width: 100%;
 502       height: 50px;
 503       cursor: pointer;
 504     }
 505
 506     li  {
 507       overflow: hidden;
 508       border-radius: 3px;
 509       border: 2px solid #fff;
 510       margin-bottom: 8px;
 511       position: relative;
 512       transition: border-color 0.08s ease-in;
 513
 514       label {
 515         position: absolute;
 516         top: 0;
 517         left: 0;
 518         padding: 2px 6px;
 519         border-bottom-right-radius: 3px;
 520         cursor: pointer;
 521         font-weight: 600;
 522         font-size: 16px;
 523         text-stroke: 2px #fff;
 524         background: rgba(255,255,255,.9);
 525         z-index: 1000;
 526         input[type="radio"] {
 527           display: none;
 528         }
 529       }
 530
 531       &.active { border-color: darken($green, 10%); }
 532       &:hover {
 533         border-color: $grey;
 534         &.active { border-color: darken($green, 20%); }
 535       }
 536     }
 537   }
 538
 539   .overlay-layers {
 540     p {
 541       font-size: 13px;
 542       margin-bottom: 8px;
 543     }
 544     li.disabled { color: $darkgrey; }
 545   }
 546 }
 547
 548 .share-ui {
 549   #mapnik_scale {
 550     width: 100px;
 551   }
 552 }
 553
 554 .leaflet-top {
 555   top: 10px !important;
 556   .leaflet-control {
 557     margin-right: 0px !important;
 558     margin-top: 0px !important;
 559   }
 560 }
 561
 562 .leaflet-popup-scrolled {
 563   padding-right: $lineheight;
 564   border-bottom: 0px !important;
 565   border-top: 0px !important;
 566 }
 567
 568 .leaflet-popup-content-wrapper {
 569   border-radius: 4px !important;
 570 }
 571
 572 /* Rules for attribution text under the main map shown on printouts */
 573
 574 .donate-attr { color: darken($green, 10%) !important; }
 575
 576 /* Rules for the sidebar */
 577
 578 #browse_status {
 579   input {
 580     display: block;
 581     margin-left: auto;
 582     margin-right: auto;
 583   }
 584 }
 585
 586 /* Temporary label size override until we remove site-wide font customisation */
 587
 588 form {
 589   label {
 590     font-size: 16px;
 591   }
 592   .col-form-label {
 593     font-size: 16px;
 594   }
 595 }
 596
 597 /* Stop bootstrap 5 from floating legends when they don't need to be */
 598 legend {
 599   float: none;
 600 }
 601
 602 /* Override the text colour for primary and secondary buttons, to match our
 603    bootstrap 4 colours. Note this has accessibility issues, which is why
 604    bootstrap 5 calculates black as the appropriate colour, and we should
 605    reconsider our colours at some point with that in mind. */
 606
 607 .btn-primary {
 608   @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
 609 }
 610
 611 .btn-secondary {
 612   @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
 613 }
 614
 615 .btn-outline-secondary {
 616   @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
 617 }
 618
 619 /* Rules for the search and direction forms */
 620
 621 header .search_forms,
 622 .directions_form {
 623   display: none;
 624 }
 625
 626 /* Rules for the map key which appears in the popout sidebar */
 627
 628 #mapkey {
 629  .mapkey-table-key img {
 630     display: block;
 631     margin-left: auto;
 632     margin-right: auto;
 633   }
 634 }
 635
 636 /* Rules for search sidebar */
 637
 638 #sidebar .search_results_entry {
 639   ul li.selected {
 640     background: $list-highlight;
 641   }
 642
 643   .search_more .loader {
 644     display: none;
 645   }
 646 }
 647
 648 /* Rules for routing */
 649
 650 div.direction {
 651   background-image: image-url('routing-sprite.png');
 652   width: 20px;
 653   height: 20px;
 654   background-repeat: no-repeat;
 655 }
 656 @for $i from 0 through 25 {
 657 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
 658 }
 659
 660 td.distance {
 661     font-size: x-small;
 662 }
 663 tr.turn {
 664     cursor: pointer;
 665 }
 666 tr.turn:hover {
 667     background: $list-highlight;
 668 }
 669
 670 .routing_marker { width: 15px; cursor: move; }
 671
 672 .browse_status {
 673   display: none;
 674 }
 675
 676 /* Rules for the history sidebar */
 677
 678 #sidebar .changesets {
 679   li {
 680     &.selected { background: $list-highlight; }
 681     /* color is derived from changeset bbox fillColor in history.js */
 682
 683     a.stretched-link > span, a:not(.stretched-link), [title] {
 684       position: relative;
 685       z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
 686     }
 687   }
 688
 689   .changeset_more .loader {
 690     display: none;
 691     width: 100%;
 692   }
 693 }
 694
 695 /* Rules for the browse sidebar */
 696
 697 #sidebar_content {
 698   .browse-section {
 699     padding-bottom: $spacer;
 700     margin-bottom: $spacer;
 701     border-bottom: 1px solid $grey;
 702
 703     h4:first-child {
 704       word-wrap: break-word;
 705     }
 706   }
 707
 708   .browse-section:last-of-type {
 709     border-bottom: none;
 710   }
 711
 712   .browse-tag-list {
 713     table-layout: fixed;
 714     white-space: pre-wrap;
 715
 716     tr:last-child th, tr:last-child td {
 717       border-bottom: 0;
 718     }
 719
 720     .colour-preview-box {
 721       width: 14px;
 722       height: 14px;
 723       // add color via inline css on element: background-color: <tag value>;
 724     }
 725   }
 726
 727   span.action-button:hover {
 728     cursor: pointer;
 729     text-decoration: underline;
 730   }
 731
 732   .note-description {
 733     overflow: hidden;
 734     margin: 0 0 10px 10px;
 735   }
 736
 737   .query-results {
 738     display: none;
 739
 740     ul {
 741       li {
 742         &.query-result {
 743           cursor: pointer;
 744         }
 745
 746         &.selected {
 747           background: $list-highlight;
 748         }
 749       }
 750     }
 751   }
 752 }
 753
 754 /* Bootstrap buttons don't have any vertical margin, so
 755    they touch when adjacent buttons wrap onto a new line
 756    e.g. wide form buttons on a narrow sidebar */
 757
 758 .btn-wrapper {
 759   > .btn {
 760     margin-bottom: $spacer * 0.25;
 761   }
 762 }
 763
 764 /* Rules for export sidebar */
 765
 766 .export_form {
 767   .export_area_inputs,
 768   .export_button {
 769     text-align: center;
 770   }
 771
 772   .export_area_inputs {
 773     margin-bottom: $spacer;
 774     input[type="text"] {
 775       width: 100px;
 776       text-align: center;
 777     }
 778   }
 779
 780   .export_boxy {
 781     background: $lightgrey;
 782
 783     #maxlat { margin-top: -1px; }
 784     #minlon {
 785       float: left;
 786       /* no-r2 */ margin-left: -1px;
 787     }
 788     #maxlon {
 789       float: right;
 790       /* no-r2 */ margin-right: -1px;
 791     }
 792     #minlat { margin-bottom: -1px; }
 793   }
 794 }
 795
 796 /* Rules for edit pages */
 797
 798 .site-edit {
 799   #content {
 800     position: absolute;
 801     top: $headerHeight;
 802     bottom: 0;
 803     width: 100%;
 804   }
 805 }
 806
 807 /* Rules for non-map content pages */
 808
 809 .content-heading {
 810   background: $lightgrey;
 811 }
 812
 813 .content-inner {
 814   position: relative;
 815   max-width: 960px;
 816   margin: auto;
 817   padding: $lineheight;
 818 }
 819
 820 /* Overrides for pages that use new layout conventions */
 821
 822 .header-illustration {
 823   background-position: 0 0;
 824   background-repeat: no-repeat;
 825   position: relative;
 826   min-height: 200px;
 827   width: 100%;
 828   left: 0;
 829   bottom: 0;
 830
 831   &.new-user-main {
 832     background-image: image-url("sign-up-illustration.png");
 833   }
 834
 835   &.confirm-main {
 836     background-image: image-url("confirm-illustration.png");
 837   }
 838
 839   &.new-user-terms {
 840     background-image: image-url("terms-illustration.png");
 841   }
 842
 843   &.new-user-arm {
 844     height: 110px;
 845     width: 130px;
 846     left: 280px;
 847     top: 180px;
 848     background-image: image-url("sign-up-illustration-arm.png");
 849     position: absolute;
 850     z-index: 100;
 851     pointer-events: none;
 852   }
 853 }
 854
 855 [dir=rtl] .header-illustration {
 856   transform: scaleX(-1);
 857
 858   h1 {
 859     transform: scaleX(-1);
 860   }
 861 }
 862
 863 /* Rules for small maps in content areas */
 864
 865 .content_map {
 866   height: 200px;
 867   margin-bottom: $lineheight;
 868 }
 869
 870 @include media-breakpoint-up(md) {
 871   .content_map {
 872     height: 400px;
 873   }
 874 }
 875
 876 /* Rules for the user map */
 877
 878 .content_map .leaflet-popup-content {
 879   margin: $spacer;
 880   min-height: 50px;
 881 }
 882
 883 /* Rules for user popups on maps */
 884
 885 .user_popup {
 886   min-width: 200px;
 887   p {
 888     padding: 0 0 5px 0;
 889     margin: 0 0 0 60px;
 890     font-size: 12px;
 891   }
 892 }
 893
 894 /* Rules for the diary entry page */
 895
 896 .diary_entries {
 897   #map {
 898     height: 400px;
 899     display: none;
 900   }
 901   .comments {
 902     max-width: 740px;
 903   }
 904   .diary-comment {
 905     border-top: 1px dashed $grey;
 906     &:first-child {
 907       border-top: 1px solid $grey;
 908     }
 909   }
 910 }
 911
 912 /* Rules for the account confirmation page */
 913
 914 .users-terms {
 915   .legale {
 916     padding: $lineheight;
 917     margin-bottom: $lineheight;
 918     overflow: auto;
 919     height: 20em;
 920
 921     li {
 922       list-style: inherit;
 923     }
 924
 925     ol ol {
 926       list-style-type: lower-alpha;
 927     }
 928   }
 929 }
 930
 931 /* Rules for messages pages */
 932
 933 .messages {
 934   .inbox-row {
 935     background: $offwhite;
 936   }
 937
 938   .inbox-row-unread td {
 939     background: #CBEEA7;
 940   }
 941 }
 942
 943 .search_form {
 944   background-color: $lightgrey;
 945
 946   #query {
 947     z-index: 0;
 948   }
 949
 950   .describe_location {
 951     font-size: 10px;
 952   }
 953 }
 954
 955 .directions_form {
 956   background-color: $lightgrey;
 957 }
 958
 959 /* Rules for user images */
 960
 961 img.user_image {
 962   max-width: 100px;
 963   max-height: 100px;
 964 }
 965
 966 img.user_thumbnail {
 967   max-width: 50px;
 968   max-height: 50px;
 969 }
 970
 971 img.user_thumbnail_tiny {
 972   width: auto;
 973   height: auto;
 974   max-width: 25px;
 975   max-height: 25px;
 976 }
 977
 978 /* General styles for action lists / subnavs */
 979
 980 nav.secondary-actions {
 981   margin-left: -11px;
 982   overflow: hidden;
 983   > ul {
 984     display: flex;
 985     flex-direction: row;
 986     flex-wrap: wrap;
 987     margin-bottom: 0;
 988     margin-left: -1px;
 989     padding: 0;
 990     > li {
 991       flex-basis: auto;
 992       list-style: none;
 993       border-left: 1px solid $grey;
 994       padding-left: $lineheight * 0.5;
 995       margin-right: $lineheight * 0.5;
 996       margin-bottom: $lineheight * 0.125;
 997     }
 998   }
 999 }
1000
1001 div.secondary-actions {
1002   padding: 10px;
1003   text-align: center;
1004 }
1005
1006 /* Rules for rich text */
1007
1008 .richtext,
1009 .prose {
1010   code {
1011     background: $lightgrey;
1012     padding: 2px 3px;
1013   }
1014
1015   pre {
1016     background: $lightgrey;
1017     padding: 2px 3px;
1018     white-space: pre-wrap;
1019
1020     code {
1021       padding: 0;
1022     }
1023   }
1024
1025   img {
1026     padding: $lineheight;
1027     background-color: $offwhite;
1028     display: block;
1029     max-width: 100%;
1030     margin: auto;
1031   }
1032
1033   blockquote {
1034     border-left: $lineheight solid $offwhite;
1035     padding-left: $lineheight;
1036     margin: 0;
1037     color: $darkgrey;
1038   }
1039 }
1040
1041 /* Rules for the "Welcome" page */
1042 .site-welcome, .site-fixthemap {
1043   .sprite {
1044     background-image: image-url("welcome-sprite.png");
1045     background-size: 500px 250px;
1046     display: block;
1047   }
1048
1049   .sprite.small {
1050     width: 50px;
1051     height: 50px;
1052   }
1053
1054   .sprite.x {
1055     /* no-r2 */ background-position: -50px 0;
1056   }
1057
1058   .sprite.term {
1059     margin-right: 10px;
1060     vertical-align: middle;
1061   }
1062
1063   .sprite.node {
1064     /* no-r2 */ background-position: -100px 0;
1065   }
1066
1067   .sprite.way {
1068     /* no-r2 */ background-position: -150px 0;
1069   }
1070
1071   .sprite.tag {
1072     /* no-r2 */ background-position: -200px 0;
1073   }
1074
1075   .sprite.editor {
1076     /* no-r2 */ background-position: -250px 0;
1077   }
1078
1079   .sprite.question {
1080     /* no-r2 */ background-position: -300px 0;
1081   }
1082
1083   .sprite.rules {
1084     /* no-r2 */ background-position: -350px 0;
1085   }
1086
1087   .icon.note {
1088     background-color: #333;
1089     border-radius: 4px;
1090   }
1091 }
1092
1093 .site-about #content {
1094   background-color: $lightgrey;
1095
1096   .content-inner {
1097     max-width: 760px;
1098   }
1099
1100   .attr {
1101     margin-top: -20px;
1102
1103     h1 {
1104       span {
1105         color: $vibrant-green;
1106       }
1107     }
1108
1109     .user-image {
1110       height: 150px;
1111       background-position: 0 50%;
1112       background-repeat: no-repeat;
1113       background-image: image-url('about/osm.png');
1114       background-size: cover;
1115       background-color: $vibrant-green;
1116     }
1117
1118     .byosm {
1119       background: $vibrant-green;
1120     }
1121
1122     .byosm span {
1123       display: inline-block;
1124       width: 1em;
1125       margin-left: -1em;
1126     }
1127   }
1128
1129   .icon {
1130     width: 30px;
1131     height: 30px;
1132     background: 40px 40px image-url('about/sprite.png') no-repeat;
1133
1134     &.local {
1135       /* no-r2 */
1136       background-position: 0px 0px;
1137     }
1138     &.community {
1139       /* no-r2 */
1140       background-position: 0px -40px;
1141     }
1142     &.open {
1143       /* no-r2 */
1144       background-position: 0px -80px;
1145     }
1146     &.partners {
1147       /* no-r2 */
1148       background-position: 0px -120px;
1149     }
1150     &.infringement {
1151       /* no-r2 */
1152       background-position: 0px -160px;
1153     }
1154     &.legal {
1155       /* no-r2 */
1156       background-position: -45px -160px;
1157     }
1158   }
1159 }
1160
1161 @import 'browse';