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