app/assets/stylesheets/common.css.scss

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