app/assets/stylesheets/common.scss

   1 @import "parameters";
   2 @import "bootstrap-custom";
   3
   4 /* Styles common to large and small screens */
   5
   6 /* Minimal CSS reset */
   7
   8 html, body, form, fieldset, legend, input {
   9   margin: 0;
  10   padding: 0;
  11   border: 0;
  12 }
  13
  14 fieldset,img { border: 0; }
  15
  16 legend { color: #000; }
  17
  18 sup {
  19   vertical-align: super;
  20   font-size: smaller;
  21 }
  22
  23 sub {
  24   vertical-align: sub;
  25   font-size: smaller;
  26 }
  27
  28 table {
  29   border-collapse: collapse;
  30   border-spacing: 0;
  31 }
  32
  33 input,
  34 select,
  35 textarea,
  36 body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; }
  37
  38 .fillL { background-color: white; }
  39
  40 /* Default rules for the body of every page */
  41
  42 * {
  43   box-sizing: border-box;
  44 }
  45
  46 body {
  47   font-family: 'Helvetica Neue',Arial,sans-serif;
  48   font-size: $typeheight;
  49   line-height: 1.6666;
  50   color: #222;
  51   background-color: #fff;
  52   margin: 0px;
  53   padding: 0px;
  54   text-align: left;
  55   height: 100%;
  56 }
  57
  58 p > img {
  59   width: auto;
  60   max-width: 100%;
  61 }
  62
  63 small, aside {
  64   font-size: 12px;
  65 }
  66
  67 #container { position: relative; }
  68
  69 .column-1 {
  70   width: 50%;
  71   margin: 0 0 $lineheight/2 0;
  72 }
  73
  74 .small_icon {
  75   vertical-align: middle;
  76   margin-right: $lineheight/4;
  77 }
  78
  79 .red { color: $red; }
  80
  81 .piwik { border: 0; }
  82
  83 [dir=rtl] { /* no-r2 */ text-align: right; }
  84
  85 [dir=ltr] { /* no-r2 */ text-align: left; }
  86
  87 /* Rules for icons */
  88
  89 .icon {
  90   display: inline-block;
  91   vertical-align: top;
  92   width: 20px;
  93   height: 20px;
  94   background: transparent image-url("sprite.png") no-repeat 0 0;
  95   background-image: image-url("sprite.svg");
  96   text-indent: -9999px;
  97   overflow: hidden;
  98 }
  99
 100 .icon.search      { /* no-r2 */ background-position: 0 0; }
 101 .icon.donate      { /* no-r2 */ background-position: -20px 0; }
 102 .icon.zoomin      { /* no-r2 */ background-position: -40px 0; }
 103 .icon.zoomout     { /* no-r2 */ background-position: -60px 0; }
 104 .icon.geolocate   { /* no-r2 */ background-position: -80px 0; }
 105 .active .icon.geolocate   { /* no-r2 */ background-position: -80px -20px; }
 106 .icon.layers      { /* no-r2 */ background-position: -100px 0; }
 107 .icon.key         { /* no-r2 */ background-position: -120px 0; }
 108 .icon.share       { /* no-r2 */ background-position: -140px 0; }
 109 .icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
 110 .icon.link        { /* no-r2 */ background-position: -180px 0; }
 111 .icon.close       { /* no-r2 */ background-position: -200px 0; }
 112 .close-wrap:hover .icon.close,
 113 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
 114 .icon.check       { /* no-r2 */ background-position: -220px 0; }
 115 .icon.note        { /* no-r2 */ background-position: -240px 0; }
 116 .icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
 117 .icon.query       { /* no-r2 */ background-position: -260px 0; }
 118
 119 /* Rules for links */
 120
 121 a {
 122   color: #24d;
 123   text-decoration: none;
 124   -webkit-appearance: none;
 125   outline: 0;
 126   &:hover {
 127     text-decoration: underline;
 128   }
 129 }
 130
 131 /* Rules for horizontal lines */
 132
 133 hr {
 134   border: none;
 135   background-color: $grey;
 136   color: $grey;
 137   height: 1px;
 138 }
 139
 140 /* General styles for tables */
 141
 142 table {
 143   width: 100%;
 144   margin-bottom: $lineheight;
 145   th, td {
 146     text-align: left;
 147     padding: $lineheight/4;
 148     line-height: $lineheight;
 149   }
 150   th {
 151     font-weight: 600;
 152     vertical-align: top;
 153   }
 154   td {
 155     vertical-align: middle;
 156   }
 157 }
 158
 159 /* Utility for de-emphasizing content */
 160
 161 .deemphasize {
 162   color: $darkgrey;
 163   a {
 164     color: $blue;
 165   }
 166 }
 167
 168 /* Rules for the header */
 169
 170 #menu-icon {
 171   display: none !important;
 172   float: right;
 173   background: image-url("menu-icon.png") no-repeat;
 174   background-size: 30px 30px;
 175   display: block;
 176   width: 30px;
 177   height: 30px;
 178   margin: 14px 10px 0 0;
 179   opacity: 0.6;
 180 }
 181
 182 header {
 183   height: $headerHeight;
 184   position: relative;
 185   z-index: 1001;
 186   font-size: 14px;
 187
 188   h1, nav, nav > ul, nav > ul > li, .dropdown {
 189     display: inline-block;
 190   }
 191
 192   > * {
 193     height: 100%;
 194     padding: $lineheight/2;
 195   }
 196
 197   h1, nav.primary {
 198     float: left;
 199   }
 200
 201   a, a:hover {
 202     text-decoration: none;
 203   }
 204
 205   img.logo {
 206     width: 30px;
 207     height: 30px;
 208     margin-top: -2px;
 209     vertical-align: middle;
 210   }
 211
 212   h1 {
 213     font-size: 18px;
 214     font-weight: 600;
 215     line-height: 1.2;
 216     margin: 0;
 217     padding-top: 15px;
 218
 219     a {
 220       color: #000;
 221     }
 222
 223     a:hover {
 224       color: #000;
 225     }
 226   }
 227 }
 228
 229 nav.primary {
 230   > ul {
 231     padding: 0;
 232     $border: 1px solid $green;
 233
 234     border: $border;
 235     border-radius: $border-radius;
 236
 237     > li {
 238       border-right: $border;
 239       float: left;
 240       &:last-child {
 241         border-right: 0;
 242       }
 243       > a:hover { background: lighten($green, 30%); }
 244       &.current > a:hover { background: $green; }
 245       &.disabled > a:hover { background: lighten($green, 38%); }
 246       &.dropdown {
 247         > a.tab { border-right: 1px solid lighten($green, 30%); }
 248         &.current > a.tab { border-right: 1px solid lighten($green, 10%); }
 249       }
 250     }
 251   }
 252
 253   a.tab,
 254   .dropdown-toggle {
 255     display: inline-block;
 256     font-weight: 500;
 257     color: $green;
 258     padding: 5px 15px;
 259   }
 260
 261   .dropdown-toggle {
 262     padding: 5px 6px;
 263   }
 264
 265   .caret {
 266     border-top-color: $green;
 267     margin-top: 10px;
 268   }
 269
 270   .disabled a {
 271     color: $grey;
 272     cursor: default;
 273
 274     .caret {
 275       border-top-color: $grey;
 276     }
 277   }
 278
 279   > ul li.current {
 280     background-color: $green;
 281
 282     .tab {
 283       color: #fff;
 284     }
 285
 286     .caret {
 287       border-top-color: #fff;
 288     }
 289   }
 290 }
 291
 292 nav.secondary {
 293   position: absolute;
 294   right: 0;
 295
 296   > ul {
 297     vertical-align: middle;
 298     margin: 0;
 299     padding: 0;
 300
 301     a, .dropdown-toggle {
 302       display: inline-block;
 303       text-decoration: none;
 304       color: $darkgrey;
 305       padding: 5px;
 306
 307       &:hover { color: darken($darkgrey, 25%); }
 308     }
 309   }
 310
 311   > ul li.current a {
 312     color: darken($darkgrey, 25%);
 313   }
 314
 315   .user-menu {
 316     $border: 1px solid $grey;
 317     border: $border;
 318     border-radius: $border-radius;
 319     margin-left: 10px;
 320     padding: 0;
 321
 322     > li {
 323       border-right: $border;
 324       float: left;
 325       &:last-child {
 326         border-right: 0;
 327
 328         > a {
 329           border-radius: 0 $border-radius $border-radius 0;
 330         }
 331       }
 332       &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }
 333       &:hover a { background: lighten($darkgrey, 30%); }
 334     }
 335
 336     a {
 337       padding: 5px 15px;
 338
 339     }
 340
 341     &.logged-in > a {
 342       padding: 0;
 343       > .user-button {
 344         line-height: 1.8;
 345         padding: 5px 10px 3px 6px;
 346         display: inline-block;
 347         color: $darkgrey;
 348       }
 349       &:hover > .user-button { color: darken($darkgrey, 5%); }
 350     }
 351   }
 352
 353   .caret {
 354     border-top-color: $grey;
 355     margin-top: 9px;
 356   }
 357
 358   img.user_thumbnail_tiny {
 359     border: 0;
 360     vertical-align: top;
 361     margin-top: 0px;
 362     margin: 4px 0 0 4px;
 363     border-radius: 2px;
 364   }
 365
 366   #inboxanchor {
 367     display: inline-block;
 368     vertical-align: top;
 369     height: 25px;
 370     margin: 3px 0 3px 3px;
 371     background-color: lighten($grey, 10%);
 372     line-height: 20px;
 373     border-radius: 2;
 374   }
 375
 376   .dropdown-menu {
 377     left: auto;
 378     right: -1px;
 379     border-radius: 3px 0 3px 3px;
 380
 381     .count-number {
 382       float: right;
 383       padding: 0 5px;
 384       margin: 0;
 385     }
 386   }
 387 }
 388
 389 #compact-secondary-nav {
 390   display: none;
 391   ul li a {
 392     width: 100%;
 393     color: #333;
 394     &:hover { color: #fff; }
 395   }
 396 }
 397
 398 body.compact {
 399   #compact-secondary-nav {
 400     display: inline-block;
 401   }
 402   .compact-hide {
 403     display: none;
 404   }
 405 }
 406
 407 /* Utility for styling notification numbers */
 408
 409 .count-number {
 410   padding: 2px $lineheight/4;
 411   border-radius: 2px;
 412   background: lighten($green, 30%);
 413   margin: 0 2px;
 414   font-size: 11px;
 415   color: #333;
 416 }
 417
 418 /* Rules for the message shown in place of the map when javascript is disabled */
 419
 420 #noscript {
 421   z-index: 20000000;
 422   margin-left: 400px;
 423   margin-top: 50px;
 424 }
 425
 426 /* Rules for Leaflet maps */
 427
 428 .leaflet-control .control-button {
 429   display: block;
 430   height: 40px;
 431   width: 40px;
 432   background-color: #333;
 433   background-color: rgba(0,0,0,.6);
 434   border-radius: 4px 0 0 4px;
 435   margin-bottom: 10px;
 436   outline: none;
 437
 438   &:hover {
 439     background-color: black;
 440   }
 441
 442   &.disabled,
 443   &.leaflet-disabled {
 444     background-color: #333;
 445     background-color: rgba(0,0,0,.5);
 446     cursor: default;
 447   }
 448
 449   &.active {
 450     background-color: $vibrant-green;
 451   }
 452
 453   .icon {
 454     margin: 10px;
 455   }
 456 }
 457
 458 .leaflet-control .zoomin,
 459 .control-layers .control-button {
 460   margin-bottom: 0px;
 461   border-radius: 4px 0 0 0;
 462 }
 463
 464 .leaflet-control .zoomout,
 465 .control-key .control-button {
 466   margin-bottom: 0;
 467   border-radius: 0;
 468 }
 469
 470 .control-locate .control-button,
 471 .control-share .control-button {
 472   border-radius: 0 0 0 4px;
 473 }
 474
 475 /* Rules for the sidebar and main map area */
 476
 477 .map-layout {
 478   #content {
 479     overflow: hidden;
 480     position: absolute;
 481     top: $headerHeight;
 482     bottom: 0;
 483     width: 100%;
 484   }
 485
 486   #sidebar, #map {
 487     position: relative;
 488     height: 100%;
 489     overflow-x: hidden;
 490     overflow-y: auto;
 491   }
 492
 493   #sidebar {
 494     float: left;
 495     width: $sidebarWidth;
 496     background: #fff;
 497
 498     #sidebar_loader {
 499       display: none;
 500     }
 501
 502     > div {
 503       position: relative;
 504       float: left;
 505       clear: both;
 506       width: 100%;
 507     }
 508
 509     h2 {
 510       padding: $lineheight $lineheight $lineheight/2;
 511       font-size: 1.5rem;
 512     }
 513
 514     h3, h4 {
 515       margin-top: $lineheight;
 516       margin-bottom: $lineheight/2;
 517       font-size: 1.25rem;
 518     }
 519
 520     .close-wrap {
 521       cursor: pointer;
 522       position: absolute;
 523       top: 0;
 524       right: 0;
 525       width: 60px;
 526       height: 60px;
 527
 528       .icon.close {
 529         pointer-events: none;
 530         position: absolute;
 531         right: 20px;
 532         top: 20px;
 533       }
 534     }
 535
 536     .icon.close {
 537       float: right;
 538       cursor: pointer;
 539     }
 540
 541     .flash {
 542       padding: 15px;
 543
 544       picture {
 545         margin-right: -25px;
 546       }
 547
 548       div.message {
 549         margin-left: 30px;
 550       }
 551     }
 552   }
 553
 554   .overlay-sidebar #sidebar {
 555     position: absolute;
 556     z-index: 1000;
 557     height: auto;
 558     overflow: hidden;
 559
 560     #banner {
 561       display: block;
 562     }
 563
 564     .welcome {
 565       display: none;
 566
 567       &.visible {
 568         display: block;
 569       }
 570     }
 571
 572     #sidebar_content {
 573       display: none;
 574     }
 575   }
 576
 577   .welcome {
 578     display: none;
 579     padding-bottom: 5px;
 580
 581     p {
 582       padding: $lineheight/2 $lineheight $lineheight;
 583       font-size: 110%;
 584       font-weight: 300;
 585     }
 586
 587     .button {
 588       width: 50%;
 589       float: left;
 590       margin: 0;
 591       border-radius: 0;
 592       font-weight: normal;
 593       padding: .6em;
 594
 595       &.learn-more {
 596         border-right: 1px solid #fff;
 597       }
 598     }
 599   }
 600
 601   #banner {
 602     display: none;
 603
 604     img {
 605       display: block;
 606       width: $sidebarWidth;
 607     }
 608   }
 609
 610   #map {
 611     height: 100%;
 612     overflow: hidden;
 613
 614     &.query-active {
 615       cursor: help;
 616     }
 617
 618     &.query-disabled {
 619       cursor: not-allowed;
 620     }
 621
 622     .leaflet-marker-draggable {
 623       cursor: move;
 624     }
 625   }
 626
 627   #map-ui {
 628     display: none;
 629     position: relative;
 630     float: right;
 631     width: 250px;
 632     height: 100%;
 633     background: white;
 634     overflow: auto;
 635
 636     .section {
 637       border-bottom: 1px solid $grey;
 638       padding: 10px 20px;
 639     }
 640
 641     a.close-button {
 642       float: right;
 643       padding:5px;
 644       font-size:20px;
 645       line-height:10px;
 646       color:#222;
 647       border:1px solid $grey;
 648     }
 649
 650     .tooltip {
 651       opacity: 1;
 652       border: 1px solid $grey;
 653       .tooltip-arrow {
 654         border-top-color: $grey;
 655       }
 656     }
 657   }
 658 }
 659
 660 .layers-ui,
 661 .share-ui {
 662   li:last-child {
 663     margin-bottom: 0;
 664   }
 665 }
 666
 667 .layers-ui {
 668   .base-layers {
 669     .leaflet-container {
 670       width: 100%;
 671       height: 50px;
 672       cursor: pointer;
 673     }
 674
 675     li  {
 676       overflow: hidden;
 677       border-radius: 3px;
 678       border: 2px solid #fff;
 679       margin-bottom: 8px;
 680       position: relative;
 681       transition: border-color 0.08s ease-in;
 682
 683       label {
 684         position: absolute;
 685         top: 0;
 686         left: 0;
 687         padding: 2px 6px;
 688         border-bottom-right-radius: 3px;
 689         cursor: pointer;
 690         font-weight: 600;
 691         font-size: 16px;
 692         text-stroke: 2px #fff;
 693         background: rgba(255,255,255,.9);
 694         z-index: 1000;
 695         input[type="radio"] {
 696           display: none;
 697         }
 698       }
 699
 700       &.active { border-color: darken($green, 10%); }
 701       &:hover {
 702         border-color: $grey;
 703         &.active { border-color: darken($green, 20%); }
 704       }
 705     }
 706   }
 707
 708   .overlay-layers {
 709     p {
 710       font-size: 13px;
 711       margin-bottom: 8px;
 712     }
 713     li.disabled { color: $darkgrey; }
 714   }
 715 }
 716
 717 .share-ui {
 718   .share-tabs {
 719     margin-bottom: 10px;
 720
 721     a {
 722       color: #fff;
 723       text-decoration: none;
 724       background-color: $lightblue;
 725       padding: 5px 10px;
 726       border-right: 1px solid #fff;
 727     }
 728
 729     a:first-child {
 730       border-right: 1px solid #fff;
 731       border-radius: 4px 0 0 4px;
 732     }
 733
 734     a:last-child {
 735       border-radius: 0 4px 4px 0;
 736     }
 737
 738     a.active {
 739       background-color: $blue;
 740     }
 741   }
 742
 743   .share-tab {
 744     display: none;
 745   }
 746
 747   .share-link {
 748     input[type=text],
 749     textarea {
 750       width: 100%;
 751       font-family: monospace;
 752       font-size: small;
 753       line-height: 1.3;
 754     }
 755   }
 756
 757   .share-image {
 758     label {
 759       margin-right: 10px;
 760     }
 761   }
 762
 763   #embed_html {
 764     resize: vertical;
 765   }
 766
 767   #mapnik_scale {
 768     width: 100px;
 769   }
 770 }
 771
 772 .leaflet-top {
 773   top: $lineheight/2 !important;
 774   .leaflet-control {
 775     margin-right: 0px !important;
 776     margin-top: 0px !important;
 777   }
 778 }
 779
 780 .leaflet-popup-scrolled {
 781   padding-right: $lineheight;
 782   border-bottom: 0px !important;
 783   border-top: 0px !important;
 784 }
 785
 786 .leaflet-popup-content-wrapper {
 787   border-radius: 4px !important;
 788 }
 789
 790 /* Rules for attribution text under the main map shown on printouts */
 791
 792 #attribution {
 793   display: none;
 794
 795   table {
 796     width: 100%
 797   }
 798 }
 799
 800 .attribution_license,
 801 .attribution_project {
 802   text-align: left;
 803 }
 804
 805 .attribution_notice {
 806   text-align: center;
 807 }
 808
 809 .donate-attr { color: darken($green, 10%) !important; }
 810
 811 /* Rules for the sidebar */
 812
 813 .sidebar_heading {
 814   position: relative;
 815   padding: $lineheight/2 $lineheight;
 816   // background: $offwhite;
 817   // border-bottom: 1px solid $grey;
 818   > .close {
 819     float: right;
 820     margin-top: 2px;
 821     cursor: pointer;
 822   }
 823 }
 824
 825 #browse_status {
 826   p {
 827     padding: $lineheight;
 828   }
 829
 830   input {
 831     display: block;
 832     margin-left: auto;
 833     margin-right: auto;
 834   }
 835 }
 836
 837 #sidebar {
 838   #sidebar_loader,
 839   .search_more {
 840     width: 100%;
 841     margin: $lineheight auto;
 842   }
 843
 844   .loader,
 845   .load_more {
 846     text-align: center;
 847     margin: auto;
 848     width: 40px;
 849     display: block;
 850   }
 851 }
 852
 853 /* Rules for the search and direction forms */
 854
 855 header .search_forms,
 856 .directions_form {
 857   display: none;
 858 }
 859
 860 .search_form,
 861 .directions_form {
 862   position: relative;
 863   padding: $lineheight/2;
 864   background-color: $lightgrey;
 865
 866   .query_wrapper {
 867     position: relative;
 868     overflow: hidden;
 869     border-radius: 2px 0 0 2px;
 870   }
 871
 872   input[type=text] {
 873     width: 100%;
 874     height: 30px;
 875     transition: 300ms linear;
 876   }
 877
 878   input[type=text].overflow {
 879     border-right: none;
 880   }
 881
 882   input:focus {
 883     outline: none;
 884     box-shadow: 0px 0px 7px $vibrant-green;
 885   }
 886
 887   input[type=submit].float {
 888     float: right;
 889     width: auto;
 890     min-width: 0;
 891     border-radius: 0 2px 2px 0;
 892   }
 893
 894   input.error {
 895     background-color: rgba($red, 0.4);
 896   }
 897
 898   select {
 899     /* this next line is to polyfill the vertical alignment of text within a select element,
 900      * which is different between firefox and chrome. */
 901     padding: 0.3em 0;
 902   }
 903
 904   .query_options {
 905     text-align: right;
 906     font-size: 10px;
 907     color: $blue;
 908   }
 909
 910   .describe_location {
 911     position: absolute;
 912     top: 6px;
 913     right: 6px;
 914     font-size: 10px;
 915     color: $blue;
 916   }
 917
 918   .switch_link {
 919     float: right;
 920     width: auto;
 921     min-width: 0;
 922     margin-left: 6px;
 923   }
 924
 925   img.button {
 926     display: block;
 927     width: 20px;
 928     height: 20px;
 929   }
 930
 931   span.force_width {
 932     width: 100%;
 933     padding-right: 25px;
 934     display: block;
 935   }
 936
 937   select.routing_engines {
 938     min-height: 30px;
 939     margin: 0px 0px 5px 25px;
 940   }
 941
 942   input.routing_go {
 943     min-width: 100px;
 944     float: right;
 945   }
 946
 947   div.header {
 948     width: 100%;
 949     height: 30px;
 950   }
 951
 952   div.line {
 953     width: 100%;
 954     margin: 0px 0px 5px 0px;
 955   }
 956
 957   div.loader_copy {
 958     display: none;
 959
 960     img {
 961       vertical-align: middle;
 962     }
 963   }
 964
 965   a.reverse_directions {
 966     cursor: pointer;
 967     margin: 0px 0px 5px 25px;
 968   }
 969 }
 970
 971 /* Rules for the map key which appears in the popout sidebar */
 972
 973 #mapkey {
 974  .mapkey-table-key img {
 975     display: block;
 976     margin-left: auto;
 977     margin-right: auto;
 978   }
 979   td {
 980     padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
 981   }
 982 }
 983
 984 /* Rules for search sidebar */
 985
 986 #sidebar .search_results_entry {
 987   ul {
 988    padding: 0;
 989   }
 990
 991   ul li {
 992     border-bottom: $keyline;
 993     cursor: pointer;
 994     list-style-type: none;
 995     &:first-child { border-top: $keyline; }
 996     &.selected { background: $list-highlight; }
 997   }
 998
 999   .search_more .loader {
1000     display: none;
1001     width: 100%;
1002   }
1003 }
1004
1005 .search_results_error {
1006   color: #f00;
1007   padding: 10px 20px;
1008 }
1009
1010 /* Rules for routing */
1011
1012 #sidebar_content>table {
1013     padding: 5px 20px 10px 15px;
1014     width: 100%;
1015     border-collapse: separate;
1016 }
1017
1018 div.direction {
1019   background-image: image-url('routing-sprite.png');
1020   width: 20px;
1021   height: 20px;
1022   background-repeat: no-repeat;
1023 }
1024 @for $i from 0 through 25 {
1025 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
1026 }
1027
1028 p#routing_summary {
1029     padding: 0 $lineheight $lineheight/4;
1030 }
1031
1032 td.instruction, td.distance {
1033     padding-top: $lineheight/5;
1034     padding-bottom: $lineheight/5;
1035     border-bottom: 1px solid $grey;
1036 }
1037 td.distance {
1038     color: $darkgrey;
1039     text-align: right;
1040     font-size: x-small;
1041 }
1042 tr.turn {
1043     cursor: pointer;
1044 }
1045 tr.turn:hover {
1046     background: $list-highlight;
1047 }
1048 .routing_engines, #route_from, #route_to { margin-left: 25px; }
1049 .routing_marker { width: 15px; position: absolute; cursor: move; }
1050
1051 /* Rules for entity history */
1052
1053 #sidebar_content {
1054   .browse_details {
1055     position: relative;
1056     border-bottom: $keyline;
1057   }
1058 }
1059
1060 .browse_status {
1061   display: none;
1062 }
1063
1064 /* Rules for the history sidebar */
1065
1066 #sidebar .changesets {
1067   li {
1068     cursor: pointer;
1069
1070     &.selected { background: $list-highlight; }
1071     /* color is derived from changeset bbox fillColor in history.js */
1072   }
1073
1074   .comments {
1075     float: right;
1076     color: $darkgrey;
1077   }
1078
1079   .comments-0 {
1080     opacity: 0.5;
1081   }
1082
1083   .changeset_more .loader {
1084     display: none;
1085     width: 100%;
1086   }
1087 }
1088
1089 /* Rules for the browse sidebar */
1090
1091 #sidebar_content {
1092   .browse-section {
1093     padding: $lineheight/2 $lineheight;
1094     border-bottom: 1px solid $grey;
1095
1096     h4:first-child {
1097       margin-top: 0;
1098       word-wrap: break-word;
1099     }
1100   }
1101
1102   .browse-section:last-of-type {
1103     border-bottom: none;
1104   }
1105
1106   .paginate {
1107     float: right;
1108     padding: 1px 6px;
1109     border: 1px solid $lightgrey;
1110     border-radius: 3px;
1111   }
1112
1113   .browse-field {
1114     margin-bottom: 10px;
1115
1116     h4 {
1117       padding: 5px 0 5px 10px;
1118       font-size: 12px;
1119       border: 1px solid $grey;
1120       border-radius: 4px 4px 0 0;
1121       background-color: $offwhite;
1122     }
1123
1124     p {
1125       padding: 7px 10px;
1126       font-size: 12px;
1127       background-color: #FFF;
1128       border: 1px solid $grey;
1129       border-top: 0;
1130       border-radius: 0 0 4px 4px;
1131     }
1132   }
1133
1134   .browse-tag-list {
1135     background-color: $offwhite;
1136     border: 1px solid $grey;
1137     border-radius: 3px;
1138     table-layout: fixed;
1139     border-collapse: separate;
1140
1141     th, td {
1142       border-bottom: 1px solid $grey;
1143     }
1144
1145     tr:last-child th, tr:last-child td {
1146       border-bottom: 0;
1147     }
1148
1149     .browse-tag-k,
1150     .browse-tag-v {
1151       width: 50%;
1152       padding: 6px 10px;
1153       word-wrap: break-word;
1154       white-space: pre-wrap;
1155     }
1156
1157     .browse-tag-k {
1158       font-weight: 500;
1159       background-color: $offwhite;
1160     }
1161
1162     .browse-tag-v {
1163       border-left: 1px solid $grey;
1164       background-color: #fff;
1165     }
1166
1167     .colour-preview-box {
1168       float: right;
1169       width: 14px;
1170       height: 14px;
1171       margin: 4px 0px;
1172       border: 1px solid rgba(0, 0, 0, .1);
1173       // add color via inline css on element: background-color: <tag value>;
1174     }
1175   }
1176
1177   .warning {
1178     margin: 0 0 $lineheight/2 0;
1179     padding: 0 $lineheight/2;
1180   }
1181
1182   .note-comments li, .changeset-comments li {
1183     margin: $lineheight/2 0;
1184
1185     p {
1186       margin: 10px 6px 0 6px;
1187       line-height: 1.5;
1188     }
1189   }
1190
1191   .comments-header {
1192     float: left;
1193   }
1194
1195   .subscribe-buttons {
1196     float: left;
1197     margin: 18px 10px 10px;
1198     min-width: 80px;
1199   }
1200
1201   .subscribe-buttons input {
1202     font-size: 90%;
1203     line-height: 15px;
1204     min-height: 20px;
1205   }
1206
1207   span.action-button:hover {
1208     cursor: pointer;
1209     text-decoration: underline;
1210   }
1211
1212   .note-description {
1213     overflow: hidden;
1214     margin: 0 0 10px 10px;
1215   }
1216
1217   .query-intro p {
1218     padding: $lineheight $lineheight $lineheight/2;
1219   }
1220
1221   .query-results {
1222     display: none;
1223     padding-bottom: $lineheight/2;
1224
1225     h3 {
1226       padding: 0 $lineheight;
1227     }
1228
1229     ul {
1230       li {
1231         &.query-result {
1232           cursor: pointer;
1233         }
1234
1235         &.selected {
1236           background: $list-highlight;
1237         }
1238       }
1239     }
1240   }
1241 }
1242
1243 /* Rules for export sidebar */
1244
1245 .export_form {
1246   padding: $lineheight;
1247
1248   .export_area_inputs,
1249   .export_button {
1250     text-align: center;
1251   }
1252
1253   .export_area_inputs {
1254     margin-bottom: $lineheight/2;
1255     input[type="text"] {
1256       width: 80px;
1257       text-align: center;
1258       margin-bottom: 5px;
1259     }
1260   }
1261
1262   .export_boxy {
1263     background: $lightgrey;
1264     border: 1px solid $grey;
1265     border-radius: 3px;
1266
1267     #maxlat { margin-top: -1px; }
1268     #minlon {
1269       float: left;
1270       /* no-r2 */ margin-left: -1px;
1271     }
1272     #maxlon {
1273       float: right;
1274       /* no-r2 */ margin-right: -1px;
1275     }
1276     #minlat { margin-bottom: 0; }
1277   }
1278
1279   .export_bound {
1280     margin: $lineheight/4;
1281   }
1282
1283   .export_button {
1284     margin-top: $lineheight;
1285     margin-bottom: $lineheight;
1286   }
1287
1288   dl {
1289     padding-left: $lineheight/2;
1290     dd {
1291       margin-left: 0;
1292       margin-bottom: 10px;
1293     }
1294   }
1295 }
1296
1297 /* Rules for the routing sidebar */
1298
1299 #sidebar_content {
1300   #routing_credit {
1301     text-align: center;
1302     padding: 0.5em;
1303   }
1304 }
1305
1306 /* Rules for edit pages */
1307
1308 .site-edit {
1309   #content {
1310     position: absolute;
1311     top: $headerHeight;
1312     bottom: 0;
1313     width: 100%;
1314   }
1315
1316   #map {
1317     height: 100%;
1318     overflow: hidden;
1319   }
1320 }
1321
1322 /* Rules for non-map content pages */
1323
1324 .content-heading {
1325   background: $lightgrey;
1326 }
1327
1328 .content-body {
1329   h1, h2, h3, p, ul, ol {
1330     margin-bottom: $lineheight;
1331   }
1332
1333   h1, h2, h3 {
1334     margin-top: $lineheight/2;
1335   }
1336 }
1337
1338 .content-inner {
1339   position: relative;
1340   max-width: 900px;
1341   margin: auto;
1342   padding: $lineheight;
1343 }
1344
1345 /* Overrides for pages that use new layout conventions */
1346
1347 .users-new,
1348 .users-create,
1349 .users-terms,
1350 .users-confirm {
1351   .content-heading .content-inner {
1352     height: 200px;
1353   }
1354 }
1355
1356 .header-illustration {
1357   background-position: 0 0;
1358   background-repeat: no-repeat;
1359   position: absolute;
1360   height: 200px;
1361   width: 100%;
1362   left: 0;
1363   bottom: 0;
1364
1365   &.new-user-main {
1366     background-image: image-url("sign-up-illustration.png");
1367   }
1368
1369   &.confirm-main {
1370     background-image: image-url("confirm-illustration.png");
1371   }
1372
1373   &.new-user-terms {
1374     background-image: image-url("terms-illustration.png");
1375   }
1376
1377   &.new-user-arm {
1378     height: 110px;
1379     width: 130px;
1380     left: 260px;
1381     top: 160px;
1382     background-image: image-url("sign-up-illustration-arm.png");
1383     z-index: 100;
1384   }
1385 }
1386
1387 [dir=rtl] .header-illustration {
1388   transform: scaleX(-1);
1389 }
1390
1391 #content.maximised {
1392   top: 0;
1393   left: 0;
1394   right: 0;
1395   bottom: 0;
1396   border: 0;
1397   z-index: 2000;
1398 }
1399
1400 /* Rules for small maps in content areas */
1401
1402 .content_map {
1403   position: relative;
1404   width: 45%;
1405   height: 400px;
1406   border: 1px solid $grey;
1407   margin-bottom: $lineheight;
1408   float: right;
1409 }
1410
1411 /* Rules for the trace list shown by the traces tab etc */
1412
1413 #trace_list {
1414   border-width: 0px;
1415   text-align: right;
1416
1417   .trace_summary {
1418     font-size: 12px;
1419     color: gray;
1420   }
1421 }
1422
1423 /* Rules for the new trace form */
1424
1425 #new_trace {
1426   input[type=text] {
1427     width: 50%;
1428     width: calc(100% - 150px);
1429     max-width: 500px;
1430   }
1431 }
1432
1433 /* Rules for the edit trace form */
1434
1435 .edit_trace {
1436   .standard-form-row p {
1437     margin-bottom: 0px;
1438   }
1439
1440   input[type=text] {
1441     width: 50%;
1442     width: calc(100% - 150px);
1443     max-width: 500px;
1444   }
1445 }
1446
1447 /* Rules for the user profile page */
1448
1449 #userinformation {
1450
1451   min-height: 100px;
1452   .userinformation-inner {
1453     float: left;
1454   }
1455   h2 {
1456     margin-top: 0;
1457   }
1458   .user-description {
1459     width: 100%;
1460     clear: both;
1461   }
1462   .deemphasize {
1463     margin: 0;
1464   }
1465 }
1466
1467 .admin-user-info small {
1468   margin-bottom: $lineheight/2;
1469   display: inline;
1470   margin-right: $lineheight;
1471 }
1472
1473 .activity-block {
1474   clear: left;
1475   border-bottom: 1px solid $grey;
1476   padding-bottom: $lineheight;
1477   float: left;
1478   h3 {
1479     margin-bottom: $lineheight/2;
1480   }
1481 }
1482
1483 .contact-activity {
1484   margin-top: $lineheight;
1485   width: 100%;
1486 }
1487
1488 .activity-details p {
1489   margin-left: 70px;
1490   margin-bottom: 0;
1491 }
1492
1493 .users-show {
1494   // Silly exception; remove when user page is redesigned.
1495   .content-inner {
1496     max-width: none;
1497   }
1498   p#no_home_location {
1499     margin: $lineheight;
1500   }
1501   .user_thumbnail {
1502     margin-top: $lineheight/4;
1503     float: left;
1504   }
1505 }
1506
1507 /* Rules for the user map */
1508
1509 .content_map .leaflet-popup-content {
1510   margin: $lineheight/2;
1511   min-height: 50px;
1512 }
1513
1514 /* Rules for user popups on maps */
1515
1516 .user_popup {
1517   min-width: 200px;
1518   p {
1519     padding: 0 0 5px 0;
1520     margin-top: 0 0 0 60px;
1521     font-size: 12px;
1522   }
1523   img.user_thumbnail {
1524     float: left;
1525     margin: 0 $lineheight/2 0 0;
1526   }
1527 }
1528
1529 /* Rules for the user list */
1530
1531 #user_list {
1532   width: 100%;
1533
1534   tr {
1535     vertical-align: middle;
1536   }
1537
1538   p {
1539     margin-top: 0px;
1540     margin-bottom: 0px;
1541   }
1542 }
1543
1544 #user_list_actions {
1545   float: right;
1546   margin-top: $lineheight/2;
1547 }
1548
1549 /* Rules for the diary list page */
1550
1551 .diary_post {
1552   position: relative;
1553   padding-top: $lineheight;
1554   padding-bottom: $lineheight/2;
1555   border-top: 1px solid $grey;
1556
1557   &:first-of-type {
1558     margin-top: $lineheight/2;
1559   }
1560
1561   &.deemphasize {
1562     background-color: #fee;
1563   }
1564
1565   .post_heading {
1566     margin-bottom: $lineheight;
1567
1568     h2 {
1569       margin-top: 0;
1570       margin-bottom: $lineheight/2;
1571     }
1572   }
1573
1574   img.user_thumbnail {
1575     float: left;
1576   }
1577
1578   small.deemphasize {
1579     float: left;
1580     display: block;
1581   }
1582 }
1583
1584 .pagination {
1585   padding-top: $lineheight;
1586 }
1587
1588 /* Rules for the diary entry page */
1589
1590 .diary_entries {
1591   #map {
1592     position: relative;
1593     width: 90%;
1594     height: 400px;
1595     border: 1px solid $grey;
1596     display: none;
1597     margin-bottom: $lineheight;
1598   }
1599   #newcomment {
1600     border-top: 1px solid $grey;
1601     padding-top: $lineheight;
1602     margin-top: $lineheight/2;
1603   }
1604   .comments {
1605     max-width: 740px;
1606   }
1607   .diary-comment {
1608     border-top: 1px dashed $grey;
1609     padding-top: $lineheight/2;
1610     padding-bottom: $lineheight/2;
1611     &:first-child {
1612       margin-top: $lineheight/2;
1613       padding-top: $lineheight;
1614       border-top: 1px solid $grey;
1615     }
1616     &.deemphasize {
1617       background-color: #fee;
1618     }
1619     p {
1620       margin-bottom: $lineheight/2;
1621     }
1622     .comment-heading {
1623       margin-bottom: 0;
1624       margin-top: 0;
1625     }
1626   }
1627 }
1628
1629 .diary_entries-show img.user_thumbnail {
1630   float: left;
1631 }
1632
1633
1634 .diary-subscribe-buttons {
1635   position:relative;
1636   top: -30px;
1637   left: 130px;
1638 }
1639
1640 /* Rules for the log in page */
1641
1642 #login_auth_buttons {
1643   margin-bottom: 0;
1644 }
1645
1646 #login_auth_buttons li {
1647   float: left;
1648   padding: $lineheight/4 $lineheight/2;
1649 }
1650
1651 /* Rules for the account confirmation page */
1652
1653 .users-terms {
1654   .legale {
1655     border: 1px solid $grey;
1656     padding: $lineheight;
1657     margin-bottom: $lineheight;
1658     overflow: auto;
1659     height: 20em;
1660
1661     li {
1662       list-style: inherit;
1663     }
1664
1665     ol ol {
1666       list-style-type: lower-alpha;
1667     }
1668   }
1669
1670   #decline {
1671     background: $lightblue;
1672     &:hover {
1673       background: darken($lightblue, $hovercolor);
1674     }
1675   }
1676 }
1677
1678 /* Rules for the account settings page */
1679
1680 #accountForm .user_map {
1681   position: relative;
1682   width: 500px;
1683   height: 400px;
1684   border: 1px solid $grey;
1685 }
1686
1687 #accountForm .user_image {
1688   margin-bottom: 0;
1689 }
1690
1691 #accountForm #user_image {
1692   margin-left: 20px;
1693 }
1694
1695 #accountForm ul.accountImage-options {
1696   margin-left: 120px;
1697 }
1698
1699 .nohome .location {
1700   display: none;
1701 }
1702
1703 #homerow .message {
1704   display: none;
1705 }
1706
1707 .nohome .message {
1708   display: inline !important;
1709 }
1710
1711 .content_map.settings_map {
1712   width: 50%;
1713   float: none;
1714 }
1715
1716 /* Rules for the oauth settings page */
1717
1718 .oauth_clients .buttons .oauth-edit {
1719   border-radius: 2px 0 0 2px;
1720 }
1721
1722 .oauth_clients .buttons .oauth-delete {
1723   border-radius: 0 2px 2px 0;
1724 }
1725
1726 /* Rules for the oauth authorization page */
1727
1728 .oauth-authorize ul {
1729   list-style: none;
1730 }
1731
1732 /* Rules for messages pages */
1733
1734 .messages {
1735   width: 100%;
1736   border: 1px solid $grey;
1737
1738   input[type="submit"] {
1739     margin: auto;
1740   }
1741   tbody tr {
1742     border-top: 1px solid $grey;
1743   }
1744
1745   .inbox-row {
1746     background: $offwhite;
1747   }
1748
1749   .inbox-row-unread {
1750     background:#CBEEA7;
1751   }
1752
1753   .right {
1754     float: right;
1755   }
1756
1757   tr td,
1758   tr th {
1759     padding: $lineheight/4;
1760   }
1761   p:last-child,
1762   h2:last-child,
1763   h3:last-child,
1764   ol:last-child,
1765   ul:last-child {
1766     margin-bottom:0;
1767   }
1768   tr td {
1769     height: 30px;
1770     border-right: 1px solid $lightgrey;
1771   }
1772 }
1773
1774 .inbox-row .inbox-mark-read {
1775   display: none;
1776 }
1777
1778 .info-line {
1779   margin-bottom: $lineheight;
1780   padding: $lineheight/4 0px 4px 0px;
1781   border-bottom: 1px solid $grey;
1782
1783   form, form div {
1784     display: inline;
1785   }
1786 }
1787
1788 .info-line .user_thumbnail_tiny {
1789   vertical-align: middle;
1790 }
1791
1792 .inbox-sent {
1793   white-space: nowrap;
1794 }
1795
1796 .inbox-mark-unread,
1797 .inbox-mark-read,
1798 .inbox-delete {
1799   width: 1%;
1800 }
1801
1802 .inbox-row-unread .inbox-mark-unread {
1803   display: none;
1804 }
1805
1806 .messages-show .message-buttons {
1807   margin-top: $lineheight;
1808   margin-bottom: $lineheight * 1.5;
1809   padding-top: $lineheight;
1810   border-top: 1px solid $lightgrey;
1811 }
1812
1813 .messages-show .buttons .mark-unread-button {
1814   border-radius: 0;
1815 }
1816
1817 /* Rules for "flash" notice boxes shown at the top of the content area */
1818
1819 .flash {
1820   padding: $lineheight;
1821
1822   &.error {
1823     background-color: #ff7070;
1824   }
1825
1826   &.warning {
1827     background-color: #ffe0cc;
1828   }
1829
1830   &.notice {
1831     background-color: #CBEEA7;
1832   }
1833
1834   div.message {
1835     display: inline-block;
1836     margin-left: $lineheight / 2;
1837     vertical-align: middle;
1838
1839     p {
1840       margin-top: $lineheight * 0.5;
1841       margin-bottom: $lineheight * 0.5;
1842
1843       &:first-child {
1844         margin-top: 0px;
1845       }
1846
1847       &:last-child {
1848         margin-bottom: 0px;
1849       }
1850     }
1851   }
1852 }
1853
1854 /* Rules for highlighting fields with rails validation errors */
1855
1856 .formError {
1857   display: inline-block;
1858   padding: 5px 10px;
1859   margin-top: 5px;
1860   border-radius: 4px;
1861   font-size: 12px;
1862   color: #fff;
1863   background-color: #ff7070;
1864 }
1865
1866 /* Rules for rails validation error boxes */
1867
1868 #errorExplanation {
1869   width: 400px;
1870   border: 2px solid #ff7070;
1871   padding: 0 $lineheight/2;
1872   margin-bottom: $lineheight;
1873   background-color: #f0f0f0;
1874
1875   h2 {
1876     margin: 0 -10px 10px -10px;
1877     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1878     font-weight: bold;
1879     font-size: 12px;
1880     background-color: #c00;
1881     color: #fff;
1882     text-align: left;
1883   }
1884
1885   p {
1886     color: #333;
1887     margin-bottom: 0px;
1888     padding: $lineheight/4;
1889   }
1890 }
1891
1892 /* Rules for forms */
1893
1894 .standard-form {
1895   fieldset {
1896     margin-bottom: $lineheight;
1897   }
1898   label.standard-label {
1899     display: block;
1900     margin-bottom: $lineheight/4;
1901     font-size: $typeheight;
1902     font-weight: bold;
1903     line-height: 1.5;
1904   }
1905   label.standard-label.secondary {
1906     display: inline-block;
1907     font-weight: normal;
1908   }
1909   .form-help {
1910     font-weight: normal;
1911   }
1912   .form-column {
1913     float: left;
1914     margin-right: 20px;
1915   }
1916   .form-divider {
1917     margin-top: $lineheight;
1918     padding-top: $lineheight;
1919     border-top: 1px solid $lightgrey;
1920   }
1921   .horizontal-list .standard-form-row {
1922     float: left;
1923     padding-right: 10px;
1924   }
1925   .standard-form-row {
1926     margin-bottom: $lineheight/2;
1927   }
1928   .form-list {
1929     margin-bottom: 0;
1930   }
1931   .form-list li {
1932     margin-bottom: 5px;
1933     list-style-type: none;
1934   }
1935   input[type="checkbox"],
1936   input[type="radio"] {
1937     float: left;
1938     margin-top: 5px;
1939   }
1940 }
1941
1942 #remember_me_openid {
1943   display: block;
1944 }
1945
1946 select {
1947   padding: 2px;
1948 }
1949
1950 input[type="checkbox"],
1951 input[type="radio"] {
1952     margin-right: 5px;
1953 }
1954
1955 input[type="text"],
1956 input[type="email"],
1957 input[type="url"],
1958 input[type="password"],
1959 textarea {
1960   color: #222;
1961   background-color: #fff;
1962   border: 1px solid $grey;
1963   border-radius: 3px;
1964   padding: 2px 5px;
1965   margin: 0;
1966   width: 200px;
1967
1968   &.field_with_errors {
1969     border: 2px solid #ff7070;
1970   }
1971 }
1972
1973 textarea {
1974   padding: 5px;
1975   width: 100%;
1976   min-height: 50px;
1977   resize: vertical;
1978 }
1979
1980 /* Rules for user images */
1981
1982 img.user_image {
1983   max-width: 100px;
1984   max-height: 100px;
1985   border: 1px solid $grey;
1986   margin-bottom: $lineheight;
1987   float: left;
1988   margin-right: $lineheight;
1989 }
1990
1991 img.user_thumbnail {
1992   max-width: 50px;
1993   max-height: 50px;
1994   border: 1px solid $grey;
1995   margin-right: $lineheight;
1996 }
1997
1998 img.user_thumbnail_tiny {
1999   width: auto;
2000   height: auto;
2001   max-width: 25px;
2002   max-height: 25px;
2003   border: 1px solid $grey;
2004 }
2005
2006 /* Rules for geo microformats */
2007
2008 abbr.geo {
2009   border-bottom: none;
2010 }
2011
2012 /* General styles for action lists / subnavs / pager navs */
2013
2014 ul.secondary-actions {
2015   font-style: normal;
2016   margin-bottom: 0;
2017   margin-left: 0;
2018   padding: 0;
2019   &.pager {
2020     display: inline-block;
2021     margin-right: 60px;
2022   }
2023   > li {
2024     display: block;
2025     float: left;
2026     list-style: none;
2027     border-left: 1px solid $grey;
2028     padding-left: $lineheight/2;
2029     margin-right: $lineheight/2;
2030     &:first-child {
2031       border-left: 0;
2032       padding-left: 0;
2033     }
2034     &:last-child {
2035       margin-right: 0px;
2036     }
2037   }
2038 }
2039
2040 div.secondary-actions {
2041   padding: 10px;
2042   text-align: center;
2043 }
2044
2045 /* Utility for managing inner content areas */
2046
2047 .inner22 { padding: $lineheight;}
2048
2049 .inner12 { padding: $lineheight/2 $lineheight;}
2050
2051 .inner11 { padding: $lineheight/2;}
2052
2053 .inner20 { padding: $lineheight 0;}
2054
2055 .inner02 { padding: 0 $lineheight;}
2056
2057 /* Utility for general button styles */
2058
2059 input[type="button"],
2060 input[type="submit"],
2061 input[type="reset"],
2062 a.button {
2063   cursor: pointer;
2064   border: 0;
2065   display: inline-block;
2066   padding: $lineheight/4 $lineheight/2;
2067   min-height: 20px + $lineheight/2;
2068   min-width: 120px;
2069   margin: 0 0 $lineheight/2 0;
2070   color: white;
2071   background: $blue;
2072   text-align: center;
2073   border-radius: 2px;
2074   &:hover {
2075     background: darken($blue, $hovercolor);
2076     text-decoration: none;
2077   }
2078   &.deemphasize {
2079     background: $lightblue;
2080     &:hover {
2081       background: darken($lightblue, $hovercolor);
2082     }
2083   }
2084   &:disabled {
2085     background: $lightgrey;
2086     &:hover {
2087       background: $lightgrey;
2088     }
2089   }
2090   &:last-child {
2091     margin-bottom: 0;
2092   }
2093 }
2094
2095 input[type="button"],
2096 input[type="submit"],
2097 input[type="reset"] {
2098   line-height: normal;
2099 }
2100
2101 a.button {
2102   line-height: 20px;
2103 }
2104
2105 .buttons {
2106   min-width: 200px;
2107   input[type="submit"],
2108   input[type="button"],
2109   input[type="reset"],
2110   .button,
2111   .button_to {
2112     box-sizing: border-box;
2113     float: left;
2114     border-radius: 0;
2115     margin:0;
2116     min-width: 75px;
2117     max-width: 180px;
2118     border-right:1px solid white;
2119     text-overflow: ellipsis;
2120     white-space: nowrap;
2121     overflow: hidden;
2122   }
2123   input:first-child,
2124   .button:first-child,
2125   .button_to:first-child {
2126     border-radius:2px 0 0 2px;
2127   }
2128   input:last-child,
2129   .button:last-child,
2130   .button_to:last-child {
2131     border-radius:0 2px 2px 0;
2132     border-right-width: 0;
2133   }
2134   input:only-child,
2135   .button:only-child,
2136   .button_to:only-child,
2137   *[value="Hide"] + input:last-child,
2138   *[value="Hide"] + .button:last-child,
2139   *[value="Hide"] + .button_to:last-child {
2140     border-radius:2px;
2141     border-right-width: 0;
2142   }
2143     /* if a 3-button set has a hidden middle button */
2144   *[value="Hide"] + input:nth-child(3),
2145   *[value="Hide"] + .button:nth-child(3),
2146   *[value="Hide"] + .button_to:nth-child(3) {
2147     border-radius:0 2px 2px 0;
2148     border-right-width: 0;
2149   }
2150   /* if a 3-button set starts with a hidden button */
2151   *[value="Hide"] + input:nth-child(2):not(:last-child),
2152   *[value="Hide"] + .button:nth-child(2):not(:last-child),
2153   *[value="Hide"] + .button_to:nth-child(2):not(:last-child) {
2154     border-radius:2px 0 0 2px;
2155     border-right-width: 1px;
2156   }
2157 }
2158
2159 /* Rules for doing distinct colour of alternate table rows */
2160
2161 .table0,
2162 .item0 {
2163   background: $offwhite;
2164 }
2165
2166 .table1,
2167 .item1 {
2168   background: #fff;
2169 }
2170
2171 /* Rules for OpenID logo */
2172
2173 .openid_logo {
2174   vertical-align: text-bottom;
2175   border: 0;
2176 }
2177
2178 /* Rules for rich text */
2179
2180 .richtext,
2181 .prose {
2182   code {
2183     font-size: 13px;
2184     background: $lightgrey;
2185     padding: 2px 3px;
2186   }
2187
2188   pre {
2189     font-size: 13px;
2190     background: $lightgrey;
2191     padding: 2px 3px;
2192     white-space: pre-wrap;
2193
2194     code {
2195       padding: 0;
2196     }
2197   }
2198
2199   img {
2200     padding: $lineheight;
2201     background-color: $offwhite;
2202     display: block;
2203     max-width: 100%;
2204     margin: auto;
2205   }
2206
2207   blockquote {
2208     border-left: $lineheight solid $offwhite;
2209     padding-left: $lineheight;
2210     margin: 0;
2211     color: $darkgrey;
2212   }
2213 }
2214
2215 .diary_post .richtext {
2216     margin-top: $lineheight;
2217   }
2218
2219 .comments .richtext {
2220   margin-left: 70px;
2221   margin-top: 0;
2222 }
2223
2224 /* Rules for rich text editors */
2225
2226 input.richtext_title[type="text"] {
2227   width: 50%;
2228   width: calc(100% - 235px);
2229
2230   @media only screen and (max-width:768px) {
2231     width: 100%;
2232   }
2233 }
2234
2235 .richtext_container {
2236   margin-bottom: $lineheight;
2237
2238   .richtext_content {
2239     width: 50%;
2240     width: calc(100% - 235px);
2241     display: inline-block;
2242     vertical-align: top;
2243
2244     @media only screen and (max-width:768px) {
2245       width: 100%;
2246     }
2247
2248     .richtext_preview {
2249       display: inline-block;
2250       padding: $lineheight;
2251       background-color: $offwhite;
2252       overflow-x: auto;
2253
2254       &.loading {
2255         background-image: image-url("loading.gif");
2256         background-repeat: no-repeat;
2257         background-position: center;
2258       }
2259
2260       > :first-child {
2261         margin-top: 0px;
2262       }
2263     }
2264   }
2265
2266   .richtext_help {
2267     display: inline-block;
2268     vertical-align: top;
2269     margin-left: 15px;
2270     background-color: $offwhite;
2271     padding: $lineheight/2;
2272     width: 220px;
2273
2274     ul {
2275       margin-bottom: 0;
2276     }
2277
2278     h4.heading, li {
2279       border-bottom: 1px solid $grey;
2280       margin-bottom: $lineheight/4;
2281       padding-bottom: $lineheight/4;
2282     }
2283
2284     li h4, li span, li p {
2285       display: inline-block;
2286       vertical-align: top;
2287       font-size: 11px;
2288     }
2289
2290     li h4 {
2291       width: 40%;
2292       margin: 0;
2293     }
2294
2295     li span, li p {
2296       width: 50%;
2297       margin-left: $lineheight/2;
2298       margin-bottom: $lineheight/4;
2299       white-space: nowrap;
2300     }
2301   }
2302 }
2303
2304 /* Rules for the user notes list */
2305
2306 .note_list {
2307   tr.creator {
2308     background-color: $lightgrey;
2309   }
2310
2311   td {
2312     padding: 3px;
2313   }
2314
2315   p {
2316     margin-bottom: 0px;
2317   }
2318 }
2319
2320 /* Rules for the iD editor */
2321
2322 .id-embed {
2323   width: 100%;
2324   height: 100%;
2325 }
2326
2327 /* Rules for dropdown menus */
2328
2329 .dropdown {
2330   position: relative;
2331 }
2332
2333 .dropdown-toggle {
2334   *margin-bottom: -3px;
2335 }
2336
2337 .dropdown-toggle:active,
2338 .open .dropdown-toggle {
2339   outline: 0;
2340 }
2341
2342 .caret {
2343   display: inline-block;
2344   width: 0;
2345   height: 0;
2346   vertical-align: top;
2347   border-top: 4px solid #000000;
2348   border-right: 4px solid transparent;
2349   border-left: 4px solid transparent;
2350   content: "";
2351 }
2352
2353 .dropdown .caret {
2354   margin-top: 8px;
2355   margin-left: 2px;
2356 }
2357
2358 .dropdown-menu {
2359   position: absolute;
2360   top: 100%;
2361   left: -1px;
2362   z-index: 1000;
2363   display: none;
2364   float: left;
2365   min-width: 160px;
2366   padding: 5px 0;
2367   margin: 0;
2368   list-style: none;
2369   background-color: #ffffff;
2370   border: 1px solid $grey;
2371   border-radius: 0 3px 3px;
2372   *border-right-width: 2px;
2373   *border-bottom-width: 2px;
2374   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
2375   background-clip: padding-box;
2376 }
2377
2378 .dropdown-menu.pull-right {
2379   right: 0;
2380   left: auto;
2381 }
2382
2383 .dropdown-menu .divider {
2384   *width: 100%;
2385   height: 1px;
2386   margin: 9px 1px;
2387   *margin: -5px 0 5px;
2388   overflow: hidden;
2389   background-color: $lightgrey;
2390   border-bottom: 1px solid #ffffff;
2391 }
2392
2393 .dropdown-menu > li > a {
2394   display: block;
2395   padding: 3px 10px;
2396   clear: both;
2397   font-weight: normal;
2398   line-height: 20px;
2399   color: #333333;
2400   white-space: nowrap;
2401 }
2402
2403 .dropdown-menu > li > a:hover,
2404 .dropdown-menu > li > a:focus,
2405 .dropdown-submenu:hover > a,
2406 .dropdown-submenu:focus > a {
2407   color: #ffffff;
2408   text-decoration: none;
2409   background-color: $green;
2410 }
2411
2412 .dropdown-menu > .active > a,
2413 .dropdown-menu > .active > a:hover,
2414 .dropdown-menu > .active > a:focus {
2415   color: #ffffff;
2416   text-decoration: none;
2417   background-color: $green;
2418   outline: 0;
2419 }
2420
2421 .dropdown-menu > .disabled > a,
2422 .dropdown-menu > .disabled > a:hover,
2423 .dropdown-menu > .disabled > a:focus {
2424   color: $darkgrey;
2425 }
2426
2427 .dropdown-menu > .disabled > a:hover,
2428 .dropdown-menu > .disabled > a:focus {
2429   text-decoration: none;
2430   cursor: default;
2431   background-color: transparent;
2432   background-image: none;
2433 }
2434
2435 .open {
2436   *z-index: 1000;
2437 }
2438
2439 .open > .dropdown-menu {
2440   display: block;
2441 }
2442
2443 .dropdown-backdrop {
2444   position: fixed;
2445   top: 0;
2446   right: 0;
2447   bottom: 0;
2448   left: 0;
2449   z-index: 990;
2450 }
2451
2452 /* Rules for the "Welcome" page */
2453 .site-welcome, .site-fixthemap {
2454   .center {
2455     text-align: center;
2456     .sprite {
2457       float: none;
2458       margin: auto;
2459     }
2460   }
2461
2462   .sprite {
2463     background-image: image-url("welcome-sprite.png");
2464     background-size: 500px 250px;
2465     display: block;
2466     float: left;
2467   }
2468
2469   .icon-list {
2470     padding-bottom: 20px;
2471     div {
2472       margin-bottom: 10px;
2473       p {
2474         padding-top: 10px;
2475       }
2476     }
2477   }
2478   .sprite.small {
2479     width: 50px;
2480     height: 50px;
2481   }
2482
2483   .sprite.x {
2484     /* no-r2 */ background-position: -50px 0;
2485   }
2486
2487   .sprite.term {
2488     margin-right: 10px;
2489     vertical-align: middle;
2490   }
2491
2492   .sprite.node {
2493     /* no-r2 */ background-position: -100px 0;
2494   }
2495
2496   .sprite.way {
2497     /* no-r2 */ background-position: -150px 0;
2498   }
2499
2500   .sprite.tag {
2501     /* no-r2 */ background-position: -200px 0;
2502   }
2503
2504   .sprite.editor {
2505     /* no-r2 */ background-position: -250px 0;
2506   }
2507
2508   .sprite.question {
2509     /* no-r2 */ background-position: -300px 0;
2510   }
2511
2512   .sprite.rules {
2513     /* no-r2 */ background-position: -350px 0;
2514   }
2515
2516   .start-mapping {
2517     margin: auto;
2518     cursor: pointer;
2519     border: none;
2520     padding: 20px 40px;
2521     font-size: 30px;
2522     text-decoration: none;
2523   }
2524
2525   .icon.note {
2526     background-color: #333;
2527     border-radius: 4px;
2528   }
2529 }
2530
2531 .site-about #content {
2532   background-color: $lightgrey;
2533   background-position: 50% 50%;
2534   background-repeat: no-repeat;
2535   background-size: cover;
2536   background-attachment: fixed;
2537
2538
2539   .content-inner {
2540     position: relative;
2541     color: #333;
2542     min-width: 320px;
2543     max-width: 640px;
2544   }
2545
2546   .text {
2547     background: white;
2548     padding: 40px;
2549   }
2550
2551   .attr {
2552     position: relative;
2553     padding: 170px 40px 20px;
2554     background: #333;
2555     background: rgba(0, 0, 0, .8);
2556     margin-bottom: 0;
2557     margin-top: -20px;
2558
2559     h1 {
2560       display: block;
2561       color: white;
2562       font-weight: 300;
2563       font-size: 34px;
2564       span {
2565         color: $vibrant-green;
2566       }
2567     }
2568
2569     .user-image {
2570       position: absolute;
2571       top: 0px;
2572       right: 240px;
2573       left: 0px;
2574       height: 150px;
2575       background-position: 0 50%;
2576       background-repeat: no-repeat;
2577       background-image: image-url('about/osm.png');
2578       background-size: cover;
2579       background-color: $vibrant-green;
2580     }
2581
2582     .byosm {
2583       position: absolute;
2584       top: 0px;
2585       right: 0px;
2586       z-index: 1;
2587       width: 240px;
2588       height: 150px;
2589       padding: 20px 20px 20px 40px;
2590       font: 500 20px/24px Helvetica, Arial, sans-serif;
2591       white-space: nowrap;
2592       color: #fff;
2593       background: $vibrant-green;
2594     }
2595
2596     .byosm span {
2597       display: inline-block;
2598       width: 20px;
2599       margin-left: -20px;
2600     }
2601   }
2602
2603   .icon {
2604     width: 30px;
2605     height: 30px;
2606     margin-right: 10px;
2607     vertical-align: middle;
2608     background: 40px 40px image-url('about/sprite.png') no-repeat;
2609
2610     &.local {
2611       /* no-r2 */
2612       background-position: 0px 0px;
2613     }
2614     &.community {
2615       /* no-r2 */
2616       background-position: 0px -40px;
2617     }
2618     &.open {
2619       /* no-r2 */
2620       background-position: 0px -80px;
2621     }
2622     &.partners {
2623       /* no-r2 */
2624       background-position: 0px -120px;
2625     }
2626     &.infringement {
2627       /* no-r2 */
2628       background-position: 0px -160px;
2629     }
2630     &.legal {
2631       /* no-r2 */
2632       background-position: -45px -160px;
2633     }
2634   }
2635 }
2636
2637 @import 'browse';
2638
2639 @media only screen and (max-width:960px) {
2640   .header-illustration.new-user-arm {
2641     display: none;
2642   }
2643 }
2644
2645 .read-reports {
2646   background: $lightgrey;
2647   opacity: 0.7;
2648 }
2649
2650 .issues-list {
2651   td:nth-child(2) {
2652     white-space: nowrap;
2653   }
2654 }