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