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 }
 537
 538 .tooltip.in {
 539     opacity: 0.8;
 540     z-index: 1030;
 541     height: auto;
 542     display: block;
 543 }
 544
 545 .tooltip.top {
 546     margin-top: -20px;
 547     text-align: center;
 548 }
 549
 550 .tooltip.right {
 551     margin-left: 20px;
 552 }
 553
 554 .tooltip.bottom {
 555     margin-top: 20px;
 556     text-align: center;
 557 }
 558
 559 .tooltip.left {
 560     margin-left: -20px;
 561     text-align: right;
 562 }
 563
 564 .tooltip-inner {
 565     display: inline-block;
 566     padding: 10px;
 567     font-weight: normal;
 568     background-color: white;
 569 }
 570
 571 .tooltip-arrow {
 572     position: absolute;
 573     width: 0;
 574     height: 0;
 575     border-color: transparent;
 576     border-style: solid;
 577 }
 578
 579 .tooltip.top .tooltip-arrow {
 580     bottom: -5px;
 581     left: 50%;
 582     margin-left: -5px;
 583     border-top-color: white;
 584     border-width: 5px 5px 0;
 585 }
 586
 587 .tooltip.right .tooltip-arrow {
 588     top: 50%;
 589     left: -5px;
 590     margin-top: -5px;
 591     border-right-color: white;
 592     border-width: 5px 5px 5px 0;
 593 }
 594
 595 .tooltip.left .tooltip-arrow {
 596     top: 50%;
 597     right: -5px;
 598     margin-top: -5px;
 599     border-left-color: white;
 600     border-width: 5px 0 5px 5px;
 601 }
 602
 603 .tooltip.bottom .tooltip-arrow {
 604     top: -5px;
 605     left: 50%;
 606     margin-left: -5px;
 607     border-bottom-color: white;
 608     border-width: 0 5px 5px;
 609 }
 610
 611 /* Rules for Leaflet maps */
 612
 613 .leaflet-control .control-button {
 614   display: block;
 615   height: 40px;
 616   width: 40px;
 617   background-color: #333;
 618   background-color: rgba(0,0,0,.6);
 619   -bottom: 1px solid #333;
 620   border-radius: 4px 0 0 4px;
 621   margin-bottom: 10px;
 622   outline: none;
 623
 624   &:hover {
 625     background-color: black;
 626   }
 627
 628   &.active {
 629     background-color: #9ed485;
 630   }
 631
 632   &.disabled {
 633     background-color: #333;
 634     background-color: rgba(0,0,0,.5);
 635     cursor: default;
 636   }
 637
 638   .icon {
 639     margin: 10px;
 640   }
 641 }
 642
 643 .leaflet-control .zoomin,
 644 .control-layers .control-button {
 645   margin-bottom: 0px;
 646   border-radius: 4px 0 0 0;
 647 }
 648
 649 .site .leaflet-control .zoomout,
 650 .control-key .control-button {
 651   margin-bottom: 0;
 652   border-radius: 0;
 653 }
 654
 655 .leaflet-control .zoomout, // For non-main page maps
 656 .control-locate .control-button,
 657 .control-share .control-button {
 658   border-radius: 0 0 0 4px;
 659 }
 660
 661 /* Rules for the home page */
 662
 663 .site-export #map,
 664 .site-index #map,
 665 .site-edit #map {
 666   height: 100%;
 667   overflow: hidden;
 668 }
 669
 670 #map-ui {
 671   display: none;
 672   position: relative;
 673   float: right;
 674   width: 250px;
 675   height: 100%;
 676   background: white;
 677   border-left: 1px solid #CCC;
 678   overflow: auto;
 679
 680   .section {
 681     border-bottom: 1px solid #DDD;
 682     padding: 15px;
 683   }
 684
 685   a.close-button {
 686     float: right;
 687     padding:5px;
 688     font-size:20px;
 689     line-height:10px;
 690     color:#222;
 691     border:1px solid #ddd;
 692   }
 693 }
 694
 695 .layers-ui,
 696 .share-ui {
 697   ul, li:last-child, p:last-child {
 698     margin-bottom: 0;
 699   }
 700 }
 701
 702 .layers-ui {
 703   li {
 704     border-radius: 4px;
 705     overflow: hidden;
 706     margin-bottom: 10px;
 707   }
 708
 709   label {
 710     display: block;
 711     padding: 5px 5px 5px 7px;
 712     background-color: #eee;
 713     cursor: pointer;
 714   }
 715
 716   li.active label {
 717     background-color: #ccc;
 718   }
 719
 720   .base-layers {
 721     .leaflet-container {
 722       width: 100%;
 723       height: 50px;
 724       cursor: pointer;
 725     }
 726   }
 727 }
 728
 729 .share-ui {
 730   .share-tabs {
 731     margin-bottom: 10px;
 732
 733     a {
 734       color: #fff;
 735       text-decoration: none;
 736       background-color: $lightblue;
 737       padding: 5px 10px;
 738     }
 739
 740     a:first-child {
 741       border-right: 1px solid #fff;
 742       border-radius: 4px 0 0 4px;
 743     }
 744
 745     a:last-child {
 746       border-left: 1px solid #fff;
 747       border-radius: 0 4px 4px 0;
 748     }
 749
 750     a.active {
 751       background-color: $blue;
 752     }
 753   }
 754
 755   .share-tab {
 756     display: none;
 757   }
 758
 759   .share-link {
 760     input[type=text],
 761     textarea {
 762       width: 100%;
 763       font-family: monospace;
 764       font-size: small;
 765       line-height: 1.3;
 766     }
 767   }
 768
 769   .share-image {
 770     label {
 771       margin-right: 10px;
 772     }
 773   }
 774
 775   #embed_html {
 776     resize: vertical;
 777   }
 778
 779   #mapnik_scale {
 780     width: 100px;
 781   }
 782 }
 783
 784 .leaflet-top.leaflet-right {
 785   top: $lineheight/2 !important;
 786   .leaflet-control {
 787     margin-right: 0px !important;
 788     margin-top: 0px !important;
 789   }
 790 }
 791
 792 .leaflet-popup-scrolled {
 793   padding-right: $lineheight;
 794   border-bottom: 0px !important;
 795   border-top: 0px !important;
 796 }
 797
 798 .leaflet-popup-content-wrapper {
 799   border-radius: 4px !important;
 800   -webkit-border-radius: 4px !important;
 801 }
 802
 803 /* Rules for edit menu */
 804
 805 .menuicon {
 806   padding: 0 $lineheight/4;
 807   font-weight: normal;
 808   display: inline-block;
 809   &:hover {
 810     text-decoration: none !important;
 811   }
 812 }
 813
 814 .menu {
 815   display: none;
 816   z-index: 10000;
 817   position: absolute;
 818   background-color: #ffffff;
 819   border: 1px solid $lightgrey;
 820   border-top: 0px;
 821   ul {
 822     margin: 0px;
 823   }
 824   li {
 825     padding: 2px $lineheight/4;
 826     border-top: 1px solid #eee;
 827     white-space: nowrap;
 828   }
 829 }
 830
 831 /* Rules for attribution text under the main map shown on printouts */
 832
 833 #attribution {
 834   display: none;
 835 }
 836
 837 .attribution_license,
 838 .attribution_project {
 839   text-align: left;
 840 }
 841
 842 .attribution_notice {
 843   text-align: center;
 844 }
 845
 846 /* Rules for the popout map sidebar */
 847
 848 #sidebar {
 849   display: none;
 850   position: relative;
 851   float: left;
 852   border-right: 1px solid $lightgrey;
 853   width: 33.3333%;
 854   height: 100%;
 855   ul {
 856     margin-bottom: 0;
 857     &:last-child {
 858         border-bottom: 1px solid #ccc;
 859     }
 860     li {
 861       margin-bottom: $lineheight/4;
 862       &:last-child {
 863         margin-bottom: 0;
 864       }
 865     }
 866   }
 867 }
 868
 869 .sidebar_heading {
 870   position: relative;
 871   padding: $lineheight/2 $lineheight;
 872   z-index: 9999;
 873   background: $offwhite;
 874   border-bottom: 1px solid #ccc;
 875   h4 {
 876     margin: 0;
 877   }
 878 }
 879
 880 .sidebar_close {
 881   position: absolute;
 882   height: $lineheight;
 883   top: 0px;
 884   bottom: 0;
 885   right: $lineheight;
 886   margin: auto;
 887 }
 888
 889 #sidebar_content {
 890   position: relative;
 891   margin-bottom: 20px;
 892   overflow: auto;
 893   height: 100%;
 894   width: 100%;
 895   h4 {
 896     padding: 0 $lineheight $lineheight/2 $lineheight;
 897     margin-top: $lineheight/2;
 898     margin-bottom: 0;
 899     border-bottom: 1px solid #ddd;
 900   }
 901 }
 902
 903 /* Rules for the map key which appears in the popout sidebar */
 904
 905 #mapkey {
 906  .mapkey-table-key img {
 907     display: block;
 908     margin-left: auto;
 909     margin-right: auto;
 910   }
 911   td {
 912     padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
 913   }
 914 }
 915
 916 /* Rules for search results which appear in the popout sidebar */
 917
 918 .search_searching {
 919   margin-top: $lineheight/4;
 920   margin-bottom: $lineheight/4;
 921 }
 922
 923 .search_results_entry {
 924   margin-bottom: 0;
 925
 926   .search_details {
 927     display: block;
 928     text-align: right;
 929   }
 930 }
 931
 932 .search_results_entry .search_searching {
 933   text-align: center;
 934   margin: $lineheight auto;
 935   width: $lineheight;
 936   display: block;
 937 }
 938
 939 ul.results-list li { border-bottom: 1px solid #ccc; }
 940
 941 .search_results_error {
 942   color: #f00;
 943 }
 944
 945 /* Rules for data browser information which appears in the popout sidebar */
 946
 947 #browse_content {
 948   position: relative;
 949   .browse_show_list.button {
 950     position: absolute;
 951     left: $lineheight;
 952     right: $lineheight;
 953     bottom: -40px;
 954     margin-bottom: 0;
 955   }
 956   a.more-details {
 957     position: absolute;
 958     top: 0;
 959     right: $lineheight;
 960   }
 961   ul li {
 962     margin-bottom: 0;
 963   }
 964 }
 965
 966 .browse_details {
 967   position: relative;
 968 }
 969
 970 .browse_status {
 971   display: none;
 972 }
 973
 974 /* Rules for export information which appears in the popout sidebar */
 975
 976 .export_bounds {
 977   text-align: center;
 978 }
 979
 980 .export_area_inputs {
 981   margin-bottom: $lineheight/2;
 982   input[type="text"] {
 983     width: 80px;
 984     margin-bottom: 5px;
 985   }
 986 }
 987
 988 .export_bound {
 989   margin: $lineheight/4;
 990 }
 991
 992 /* Rules for the main content area */
 993
 994 #content {
 995   padding: $lineheight;
 996   position: relative;
 997 }
 998
 999 .site-edit #content,
1000 .site-index #content,
1001 .site-export #content {
1002   position: fixed;
1003   padding: 0;
1004   top: 30px; bottom: 0;
1005   left: 184px; right: 0;
1006   border-left: 1px solid #ccc;
1007 }
1008
1009 .wrapper {
1010   margin-left: 184px;
1011   border-left: 1px solid #ccc;
1012   text-align: left;
1013 }
1014
1015 .site-edit #content {
1016   top: 30px;
1017 }
1018
1019 #content.maximised {
1020   top: 0;
1021   left: 0;
1022   right: 0;
1023   bottom: 0;
1024   border: 0;
1025   z-index: 1000;
1026 }
1027
1028 #slim_container {
1029   width: 100%;
1030 }
1031
1032 #slim_container_content {
1033   max-width: 50em;
1034   background-color: #FFFFFF;
1035   margin: $lineheight/2 auto;
1036   padding: 3px;
1037   border-radius: 25px;
1038   -moz-border-radius: 25px;
1039   border: 1px solid #e6e6e6;
1040 }
1041
1042 #slim_content {
1043   margin: $lineheight/2;
1044   margin-top: 95px;
1045   max-width: 50em;
1046
1047   .content-heading {
1048     margin-bottom: 15px;
1049   }
1050 }
1051
1052 #slim_header {
1053   margin: 30px $lineheight/2;
1054   position: absolute;
1055   top: 0px;
1056   margin-right: $lineheight/4;
1057   img {
1058     vertical-align: middle;
1059     margin-bottom: $lineheight/4;
1060     margin-right: $lineheight/4;
1061   }
1062 }
1063
1064 .content-heading {
1065   position: relative;
1066   padding: $lineheight;
1067   background: $offwhite;
1068   h1, h2 {
1069     margin-bottom: $lineheight/2;
1070     line-height: 100%;
1071     &:last-child {
1072       margin-bottom: 0;
1073     }
1074   }
1075   p {
1076     margin-top: $lineheight/2;
1077     margin-bottom: 0px;
1078   }
1079 }
1080
1081 /* Rules for small maps in content areas */
1082
1083 .content_map {
1084   position: relative;
1085   width: 45%;
1086   height: 400px;
1087   border: 1px solid #ccc;
1088   margin-bottom: $lineheight;
1089   float: right;
1090 }
1091
1092 .content_map #small_map {
1093   height: 100%;
1094   width: 100%;
1095   margin-bottom: $lineheight;
1096 }
1097
1098 /* Rules for the changeset list shown by the history tab etc */
1099
1100 #changeset_list {
1101   width: 100%;
1102   ul {
1103     padding: $lineheight/2 0;
1104     margin-bottom: 0px;
1105     border-top: 1px solid #ccc;
1106     &:last-child {
1107       border-bottom: 1px solid #ccc;
1108     }
1109   }
1110   .selected {
1111     background: #FFFFC0;
1112   }
1113   .date,
1114   .user {
1115     border-left: 1px solid #ccc;
1116     padding-left: $lineheight/4;
1117     margin-right: $lineheight/4;
1118   }
1119 }
1120
1121 #changeset_list_map_wrapper {
1122   position: absolute;
1123   width: 50%;
1124   height: 490px;
1125   top: 0;
1126   right: 0;
1127 }
1128
1129 #changeset_list_map_wrapper.scrolled {
1130   position: fixed;
1131 }
1132
1133 #changeset_list_map {
1134   position: absolute;
1135   bottom: $lineheight;
1136   top: $lineheight;
1137   right: $lineheight;
1138   left: $lineheight;
1139   border: 1px solid #ccc;
1140 }
1141
1142 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1143   margin-left: 93px;
1144 }
1145
1146 /* Rules for the data browser */
1147
1148 .browse-section {
1149   border-top: 1px solid #ccc;
1150   margin-top: $lineheight/2;
1151   padding-top: $lineheight/2;
1152   &:first-child {
1153     margin-top: 0;
1154   }
1155   .warning {
1156     background-color: #ffe0cc;
1157     margin: 0px;
1158     padding: 4px 6px;
1159     max-width: 100%;
1160   }
1161   h4, p {
1162     margin-bottom: $lineheight/4;
1163   }
1164   ul, .bbox, .geo {
1165     display: inline-block;
1166     vertical-align: top;
1167     max-width: 65%;
1168   }
1169   ul p {
1170     margin-left: 0;
1171     margin-bottom: 0;
1172   }
1173   h4 {
1174     float: left;
1175     width: 33.3333%;
1176     display: inline-block;
1177     vertical-align: top;
1178   }
1179 }
1180
1181 .bbox {
1182   div {
1183     width: 33.3333%;
1184     text-align: center;
1185     padding: $lineheight/4 0;
1186     overflow: hidden;
1187     text-overflow: ellipsis;
1188     float: left;
1189   }
1190   .max_lat,
1191   .min_lat {
1192     margin-left: auto;
1193     margin-right: auto;
1194     width: 100%;
1195   }
1196 }
1197
1198 #browse_map .geolink {
1199   display: none;
1200 }
1201
1202 #browse_map .secondary-actions {
1203   margin-bottom: $lineheight/2;
1204 }
1205
1206 /* Rules for the trace list shown by the traces tab etc */
1207
1208 #trace_list {
1209   font-size: $lineheight/2;
1210   border-width: 0px;
1211   text-align: right;
1212
1213   .trace_summary {
1214     font-size: 12px;
1215     color: gray;
1216   }
1217
1218   .trace_pending {
1219     color: red;
1220   }
1221
1222   .trace_public {
1223     color: green;
1224   }
1225
1226   .trace_identifiable {
1227     color: green;
1228   }
1229
1230   .trace_trackable {
1231     color: red;
1232   }
1233
1234   .trace_private {
1235     color: red;
1236   }
1237 }
1238
1239 /* Rules for the user profile page */
1240
1241 #userinformation {
1242
1243   min-height: 100px;
1244   .userinformation-inner {
1245     float: left;
1246   }
1247   h2 {
1248     margin-top: 0;
1249   }
1250   .user-description {
1251     width: 100%;
1252     clear: both;
1253   }
1254   .deemphasize {
1255     margin: 0;
1256   }
1257 }
1258
1259 .admin-user-info small {
1260   margin-bottom: $lineheight/2;
1261   display: inline;
1262   margin-right: $lineheight;
1263 }
1264
1265 .activity-block {
1266   clear: left;
1267   border-bottom: 1px solid #ccc;
1268   padding-bottom: $lineheight;
1269   float: left;
1270   h3 {
1271     margin-bottom: $lineheight/2;
1272   }
1273 }
1274
1275 .contact-activity {
1276   margin-top: $lineheight;
1277   width: 100%;
1278 }
1279
1280 .activity-details p {
1281   margin-left: 70px;
1282   margin-bottom: 0;
1283 }
1284
1285 #friends-container .contact-activity ul {
1286   margin-left: 70px;
1287 }
1288
1289 .user-view {
1290   p#no_home_location {
1291     margin: $lineheight;
1292   }
1293   .user_thumbnail {
1294     margin-top: $lineheight/4;
1295     float: left;
1296   }
1297 }
1298
1299 /* Rules for the user map */
1300
1301 .content_map .leaflet-popup-content {
1302   margin: $lineheight/2;
1303   min-height: 50px;
1304 }
1305
1306 /* Rules for user popups on maps */
1307
1308 .user_popup {
1309   min-width: 200px;
1310   p {
1311     padding: 0 0 5px 0;
1312     margin-top: 0 0 0 60px;
1313     font-size: 12px;
1314   }
1315   img.user_thumbnail {
1316     float: left;
1317     margin: 0 $lineheight/2 0 0;
1318   }
1319 }
1320
1321 /* Rules for the user list */
1322
1323 #user_list {
1324   font-size: $lineheight/2;
1325   width: 100%;
1326
1327   tr {
1328     vertical-align: middle;
1329   }
1330
1331   p {
1332     margin-top: 0px;
1333     margin-bottom: 0px;
1334   }
1335 }
1336
1337 #user_list_actions {
1338   float: right;
1339   margin-top: $lineheight/2;
1340 }
1341
1342 /* Rules for the diary list page */
1343
1344 .diary_entry-list img.user_thumbnail {
1345   float: left;
1346 }
1347
1348 .diary_post {
1349   max-width: 740px;
1350   position: relative;
1351   margin-top: $lineheight/2;
1352   padding-top: $lineheight;
1353   border-top: 1px solid #ccc;
1354
1355   &:first-child {
1356     margin-top: 0;
1357     border-top: 0;
1358     padding-top: 0;
1359   }
1360   h1, h2 {
1361     font-size: 21px;
1362     line-height: 1em;
1363   }
1364   small.deemphasize {
1365     float: left;
1366     display: block;
1367   }
1368   ul.secondary-actions { display: inline-block;}
1369 }
1370
1371 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1372   display: inline;
1373 }
1374
1375 #content  .post_heading {
1376   margin-bottom: $lineheight;
1377   h2 {
1378     margin-top: 0;
1379     margin-bottom: $lineheight/2;
1380     font-size: 24px;
1381   }
1382 }
1383
1384 /* Rules for the diary entry page */
1385
1386 .diary_entry {
1387   #map {
1388     position: relative;
1389     width: 90%;
1390     height: 400px;
1391     border: 1px solid #ccc;
1392     display: none;
1393     margin-bottom: $lineheight;
1394   }
1395   #newcomment {
1396     border-top: 1px solid #ccc;
1397     padding-top: $lineheight;
1398     margin-top: $lineheight/2;
1399   }
1400   .comments {
1401     max-width: 740px;
1402   }
1403   .diary-comment {
1404     margin-top: $lineheight/2;
1405     border-top: 1px dashed #ccc;
1406     padding-top: $lineheight/2;
1407     &:first-child {
1408       margin-top: $lineheight;
1409       padding-top: $lineheight;
1410       border-top: 1px solid #ccc;
1411     }
1412     p {
1413       margin-bottom: $lineheight/2;
1414     }
1415     .comment-heading {
1416       margin-bottom: 0;
1417       margin-top: 0;
1418     }
1419   }
1420 }
1421
1422 .diary_entry-view img.user_thumbnail {
1423   float: left;
1424 }
1425
1426 /* Rules for the login page */
1427
1428 #login_openid_buttons {
1429   margin-bottom: 0;
1430 }
1431
1432 #login_openid_buttons li {
1433   float: left;
1434   padding: $lineheight/4 $lineheight/2;
1435 }
1436
1437 /* Rules for the account confirmation page */
1438
1439 #terms {
1440   .legale {
1441     border: 1px solid #ccc;
1442     padding: $lineheight;
1443     margin-bottom: $lineheight;
1444     overflow: auto;
1445     height: 10em;
1446
1447     &:p#last {
1448       margin-bottom: 0px;
1449     }
1450
1451     &:ol {
1452       margin-bottom: 0px;
1453     }
1454
1455     &:img {
1456       display: block;
1457       margin: $lineheight auto inherit auto;
1458     }
1459   }
1460
1461   form.sign {
1462     input[type=submit] {
1463       float: left;
1464     }
1465     #decline {
1466       background: $grey;
1467       &:hover {
1468         background: darken($grey, $hovercolor);
1469       }
1470     }
1471   }
1472   fieldset {
1473     margin-bottom: $lineheight;
1474   }
1475   #contributorGuidance {
1476     background-color: $offwhite;
1477     border-radius: 4px;
1478     -moz-border-radius: 4px;
1479   }
1480   .signing-buttons {
1481     height: 50px;
1482   }
1483 }
1484
1485 /* Rules for the account settings page */
1486
1487 #accountForm .user_map {
1488   position: relative;
1489   width: 500px;
1490   height: 400px;
1491   border: 1px solid #ccc;
1492 }
1493
1494 #accountForm .user_image {
1495   margin-bottom: 0;
1496 }
1497
1498 #accountForm #user_image {
1499   margin-left: 20px;
1500 }
1501
1502 #accountForm ul.accountImage-options {
1503   margin-left: 120px;
1504 }
1505
1506 .nohome .location {
1507   display: none;
1508 }
1509
1510 #homerow .message {
1511   display: none;
1512 }
1513
1514 .nohome .message {
1515   display: inline !important;
1516 }
1517
1518 .content_map.settings_map {
1519   width: 50%;
1520   float: none;
1521 }
1522
1523 /* Rules for the oauth settings page */
1524
1525 .oauth_clients .buttons .oauth-edit {
1526   border-radius: 2px 0 0 2px;
1527 }
1528
1529 .oauth_clients .buttons .oauth-delete {
1530   border-radius: 0 2px 2px 0;
1531 }
1532
1533 /* Rules for messages pages */
1534
1535 .messages {
1536   width: 100%;
1537   border: 1px solid #ddd;
1538
1539   input[type="submit"] {
1540     margin: auto;
1541   }
1542   tbody tr {
1543     border-top: 1px solid #ccc;
1544   }
1545
1546   .inbox-row {
1547     background: #f8f8ff;
1548   }
1549
1550   .inbox-row-unread {
1551     background:#CBEEA7;
1552   }
1553
1554   .right {
1555     float: right;
1556   }
1557
1558   tr td,
1559   tr th {
1560     padding: $lineheight/4;
1561   }
1562   p:last-child,
1563   h2:last-child,
1564   h3:last-child,
1565   ol:last-child,
1566   ul:last-child {
1567     margin-bottom:0;
1568   }
1569   tr td {
1570     height: 30px;
1571     border-right: 1px solid $lightgrey;
1572   }
1573 }
1574
1575 .inbox-row .inbox-mark-read {
1576   display: none;
1577 }
1578
1579 .info-line {
1580   margin-bottom: $lineheight;
1581   padding: $lineheight/4 0px 4px 0px;
1582   border-bottom: 1px solid #ccc;
1583
1584   form, form div {
1585     display: inline;
1586   }
1587 }
1588
1589 .info-line .user_thumbnail_tiny {
1590   vertical-align: middle;
1591 }
1592
1593 .inbox-mark-unread,
1594 .inbox-mark-read,
1595 .inbox-delete {
1596   width: 1%;
1597 }
1598
1599 .inbox-row-unread .inbox-mark-unread {
1600   display: none;
1601 }
1602
1603 .message-read .message-buttons {
1604   margin-top: $lineheight;
1605   padding-top: $lineheight;
1606   border-top: 1px solid $lightgrey;
1607 }
1608
1609 .message-read .buttons .mark-unread-button {
1610   border-radius: 0;
1611 }
1612
1613 /* Rules for "flash" notice boxes shown at the top of the content area */
1614
1615 .flash {
1616     padding: $lineheight;
1617   &#error {
1618     background-color: #ff7070;
1619   }
1620   &#warning {
1621     background-color: #ffe0cc;
1622   }
1623   &#notice {
1624     background-color: #CBEEA7;
1625   }
1626 }
1627
1628 /* Rules for highlighting fields with rails validation errors */
1629
1630 .field_with_errors {
1631   padding: 2px;
1632   background-color: #ff7070;
1633   display: table;
1634 }
1635
1636 /* Rules for rails validation error boxes */
1637
1638 #errorExplanation {
1639   width: 400px;
1640   border: 2px solid #ff7070;
1641   padding: 0 $lineheight/2;
1642   margin-bottom: $lineheight;
1643   background-color: #f0f0f0;
1644
1645   h2 {
1646     margin: 0 -10px 10px -10px;
1647     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1648     font-weight: bold;
1649     font-size: 12px;
1650     background-color: #c00;
1651     color: #fff;
1652     text-align: left;
1653   }
1654
1655   p {
1656     color: #333;
1657     margin-bottom: 0px;
1658     padding: $lineheight/4;
1659   }
1660
1661   ul {
1662     padding-left: $lineheight;
1663
1664     li {
1665       font-size: 12px;
1666       list-style: disc;
1667     }
1668   }
1669 }
1670
1671 /* Rules for forms */
1672
1673 .standard-form {
1674   fieldset {
1675     margin-bottom: $lineheight;
1676   }
1677   label.standard-label {
1678     display: block;
1679     margin-bottom: $lineheight/4;
1680     font-size: $typeheight;
1681     font-weight: bold;
1682     line-height: 1.5;
1683   }
1684   label.standard-label.secondary {
1685     display: inline-block;
1686     font-weight: normal;
1687   }
1688   .form-help {
1689     font-weight: normal;
1690   }
1691   .form-column {
1692     float: left;
1693     margin-right: 20px;
1694   }
1695   .form-divider {
1696     margin-top: $lineheight;
1697     padding-top: $lineheight;
1698     border-top: 1px solid $lightgrey;
1699   }
1700   .form-row {
1701     margin-bottom: $lineheight/2;
1702   }
1703   .form-list {
1704     margin-bottom: 0;
1705   }
1706   .form-list li {
1707     margin-bottom: 5px;
1708    }
1709   input[type="checkbox"],
1710   input[type="radio"] {
1711     float: left;
1712     margin-top: 5px;
1713   }
1714 }
1715
1716 #remember_me_openid {
1717   display: block;
1718 }
1719
1720 input[type="checkbox"],
1721 input[type="radio"] {
1722     margin-right: 5px;
1723 }
1724
1725 input[type="text"],
1726 input[type="email"],
1727 input[type="url"],
1728 input[type="password"],
1729 textarea {
1730   border: 1px solid #ccc;
1731   padding: 2px 5px;
1732   margin: 0;
1733   width: 200px;
1734 }
1735
1736 textarea {
1737   padding: 5px;
1738   width: 100%;
1739 }
1740
1741 /* Rules for user images */
1742
1743 img.user_image {
1744   max-width: 100px;
1745   max-height: 100px;
1746   border: 1px solid #ccc;
1747   margin-bottom: $lineheight;
1748   float: left;
1749   margin-right: $lineheight;
1750 }
1751
1752 img.user_thumbnail {
1753   max-width: 50px;
1754   max-height: 50px;
1755   border: 1px solid #ccc;
1756   margin-right: $lineheight;
1757 }
1758
1759 img.user_thumbnail_tiny {
1760   max-width: 25px;
1761   max-height: 25px;
1762   border: 1px solid #ccc;
1763 }
1764
1765 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1766
1767 .nowrap {
1768   white-space: nowrap;
1769 }
1770
1771 /* Rules for geo microformats */
1772
1773 abbr.geo {
1774   border-bottom: none;
1775 }
1776
1777 /* Rules for RSS buttons */
1778
1779 .rsssmall {
1780   position: relative;
1781   top: 5px;
1782 }
1783
1784 /* General styles for action lists / subnavs / pager navs */
1785
1786 ul.secondary-actions {
1787   font-style: normal;
1788   margin-bottom: 0;
1789   margin-left: 0;
1790   &.pager {
1791     display: inline-block;
1792     margin-right: 60px;
1793   }
1794   li {
1795     display: block;
1796     float: left;
1797     list-style: none;
1798     border-left: 1px solid #ccc;
1799     padding-left: $lineheight/4;
1800     margin-right: $lineheight/4;
1801     &:first-child {
1802       border-left: 0;
1803       padding-left: 0;
1804     }
1805     &:last-child {
1806       margin-right: 0px;
1807     }
1808   }
1809 }
1810
1811 /* Utility for managing inner content areas */
1812
1813 .inner22 { padding: $lineheight;}
1814
1815 .inner12 { padding: $lineheight/2 $lineheight;}
1816
1817 .inner11 { padding: $lineheight/2;}
1818
1819 .inner02 { padding: 0 $lineheight;}
1820
1821 /* Utility for general button styles */
1822
1823 input[type="button"],
1824 input[type="submit"],
1825 input[type="reset"],
1826 a.button {
1827   cursor: pointer;
1828   border: 0;
1829   display: inline-block;
1830   line-height: 20px;
1831   padding: $lineheight/4 $lineheight/2;
1832   min-height: 20px + $lineheight/2;
1833   min-width: 120px;
1834   margin: 0 0 $lineheight/2 0;
1835   color: white;
1836   background: $blue;
1837   text-align: center;
1838   border-radius: 2px;
1839   -moz-border-radius: 2px;
1840   &:hover {
1841     background: darken($blue, $hovercolor);
1842     text-decoration: none;
1843   }
1844   &.deemphasize {
1845     background: $lightblue;
1846     &:hover {
1847       background: darken($lightblue, $hovercolor);
1848     }
1849   }
1850   &:disabled {
1851     background: $lightgrey;
1852     &:hover {
1853       background: $lightgrey;
1854     }
1855   }
1856   &:last-child {
1857     margin-bottom: 0;
1858   }
1859 }
1860
1861 .buttons {
1862   min-width: 200px;
1863   input[type="submit"],
1864   input[type="button"],
1865   input[type="reset"],
1866   .button {
1867     box-sizing: border-box;
1868     float: left;
1869     border-radius: 0;
1870     margin:0;
1871     min-width: 100px;
1872     max-width: 180px;
1873     border-right:1px solid white;
1874     text-overflow: ellipsis;
1875     white-space: nowrap;
1876     overflow: hidden;
1877   }
1878   input:first-child,
1879   .button:first-child {
1880     border-radius:2px 0 0 2px;
1881   }
1882   input:last-child,
1883   .button:last-child {
1884     border-radius:0 2px 2px 0;
1885     border-right-width: 0;
1886   }
1887   input:only-child,
1888   .button:only-child,
1889   *[value="Hide"] + input:last-child,
1890   *[value="Hide"] + .button:last-child {
1891     border-radius:2px;
1892     border-right-width: 0;
1893   }
1894     /* if a 3-button set has a hidden middle button */
1895   *[value="Hide"] + input:nth-child(3),
1896   *[value="Hide"] + .button:nth-child(3) {
1897     border-radius:0 2px 2px 0;
1898     border-right-width: 0;
1899   }
1900   /* if a 3-button set starts with a hidden button */
1901   *[value="Hide"] + input:nth-child(2):not(:last-child),
1902   *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1903     border-radius:2px 0 0 2px;
1904     border-right-width: 1px solid white;
1905   }
1906 }
1907
1908 /* Rules for doing distinct colour of alternate table rows */
1909
1910 .table0,
1911 .item0 {
1912   background: $offwhite;
1913 }
1914
1915 .table1,
1916 .item1 {
1917   background: #fff;
1918 }
1919
1920 /* Rules for OpenID logo */
1921
1922 .openid_logo {
1923   vertical-align: text-bottom;
1924   border: 0;
1925 }
1926
1927 /* Rules for rich text */
1928
1929 .richtext,
1930 .prose {
1931   h1, h2 {
1932     padding-bottom: $lineheight/2;
1933     border-bottom: 1px dashed #cccccc;
1934     margin-bottom: $lineheight/2;
1935   }
1936
1937   h1 {
1938     font-size: 24px;
1939   }
1940
1941   h2 {
1942     font-size: 18px;
1943   }
1944
1945   h3 {
1946     font-size: $typeheight;
1947   }
1948
1949   code {
1950     font-size: 13px;
1951     background: #e8e8e8;
1952     padding: 2px 3px;
1953   }
1954
1955   pre {
1956     font-size: 13px;
1957     background: #e8e8e8;
1958     padding: 2px 3px;
1959
1960     code {
1961       padding: 0;
1962     }
1963   }
1964
1965   img {
1966     padding: $lineheight;
1967     background-color: $offwhite;
1968     display: block;
1969     max-width: 100%;
1970     margin: auto;
1971   }
1972
1973   blockquote {
1974     border-left: $lineheight solid $offwhite;
1975     padding-left: $lineheight;
1976     margin: 0;
1977     color: #7E7E7E;
1978   }
1979
1980   ul, ol {
1981     padding-left: $lineheight;
1982     margin-bottom: $lineheight;
1983     margin-left: $lineheight;
1984   }
1985
1986   ul li {
1987     list-style: disc;
1988   }
1989
1990   ol li {
1991     list-style: decimal;
1992   }
1993 }
1994
1995 .diary_post .richtext {
1996     margin-top: $lineheight;
1997   }
1998
1999 .comments .richtext {
2000   margin-left: 70px;
2001   margin-top: 0;
2002 }
2003
2004 /* Rules for rich text editors */
2005
2006 .richtext_container {
2007   margin-bottom: $lineheight;
2008
2009   .richtext_content {
2010     width: 50%;
2011     display: inline-block;
2012     vertical-align: top;
2013
2014     .richtext_preview {
2015       display: inline-block;
2016       padding: $lineheight;
2017       background-color: $offwhite;
2018       overflow-x: auto;
2019
2020       &.loading {
2021         background-image: image-url("loading.gif");
2022         background-repeat: no-repeat;
2023         background-position: center;
2024       }
2025
2026       > :first-child {
2027         margin-top: 0px;
2028       }
2029     }
2030   }
2031
2032   .richtext_help {
2033     display: inline-block;
2034     vertical-align: top;
2035     margin-left: 15px;
2036     background-color: #f8f8ff;
2037     padding: $lineheight/2;
2038     width: 220px;
2039
2040     ul {
2041       margin-bottom: 0;
2042     }
2043
2044     h4.heading, li {
2045       border-bottom: 1px solid #ccc;
2046       margin-bottom: $lineheight/4;
2047       padding-bottom: $lineheight/4;
2048     }
2049
2050     li h4, li span, li p {
2051       display: inline-block;
2052       vertical-align: top;
2053       font-size: 11px;
2054     }
2055
2056     li h4 {
2057       width: 40%;
2058       margin: 0;
2059     }
2060
2061     li span, li p {
2062       width: 50%;
2063       margin-left: $lineheight/2;
2064       margin-bottom: $lineheight/4;
2065       white-space: nowrap;
2066     }
2067   }
2068 }
2069
2070 /* Rules for the user notes list */
2071
2072 .note_list {
2073   tr.creator {
2074     background-color: #eeeeee;
2075   }
2076
2077   td {
2078     padding: 3px;
2079   }
2080
2081   p {
2082     margin-bottom: 0px;
2083   }
2084 }
2085
2086 /* Rules for the notes interface */
2087
2088 .leaflet-popup-content .note {
2089   padding-top: $lineheight/2;
2090 }
2091
2092 .leaflet-popup-content .note {
2093   h2 {
2094     margin-bottom: $lineheight/2;
2095   }
2096
2097   div {
2098     margin-top: $lineheight/2;
2099   }
2100
2101   .permalink {
2102     position: absolute;
2103     top: $lineheight/4;
2104     left: $lineheight/4;
2105     min-width: 15px;
2106     min-height: 15px;
2107   }
2108
2109   .permalink span {
2110     display: none;
2111     padding-left: $lineheight;
2112   }
2113
2114   .permalink:hover span {
2115     display: block;
2116   }
2117
2118   .warning {
2119     display: block;
2120     background-color: #ffe0cc;
2121     padding: 4px 6px;
2122     margin-bottom: $lineheight/2;
2123   }
2124
2125   .comment_body {
2126     margin-top: 2px;
2127     margin-bottom: 2px;
2128
2129     p {
2130       margin-top: 0px;
2131       margin-bottom: 0px;
2132     }
2133   }
2134
2135   .comment {
2136     width: 100%;
2137     height: 100px;
2138   }
2139
2140   .buttons {
2141     margin-top: $lineheight/4;
2142     text-align: right;
2143   }
2144 }
2145
2146 /*
2147  * Rules for the iD editor
2148  */
2149 .id-embed {
2150   width: 100%;
2151   height: 100%;
2152 }
2153
2154 /* Rules for rotating sidebar ads */
2155 .ad-container {
2156   display: block;
2157   height: 120px;
2158   overflow: hidden;
2159   position: relative;
2160   border-bottom: 1px solid #ccc;
2161 }
2162
2163 .ad {
2164   height: 100px;
2165   border: 0;
2166   background: #fff;
2167 }