app/assets/stylesheets/common.css.scss

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