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