app/assets/stylesheets/common.scss

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