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