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