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