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