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