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: 24px;
  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: 12px;
 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: 20px;
 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   line-height: 15px;
 266   font-size: 12px;
 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: 15px;
 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   position: relative;
 386   width: 153px;
 387   padding: 5px;
 388   border: 1px solid #AED1A0;
 389   background: #cbeea7;
 390   line-height: 20px;
 391   text-align: center;
 392   font-size: 14px;
 393   border-radius: 2px;
 394   -moz-border-radius: 2px;
 395   color: #222;
 396   margin: 10px 10px 0px 10px;
 397 }
 398
 399 .donate:hover {
 400   background: #9ed485;
 401   text-decoration: none;
 402 }
 403
 404 .donate p {
 405   text-indent: 20px;
 406   margin: 0;
 407 }
 408
 409 .donate .donate-icon {
 410   width: 15px;
 411   height: 15px;
 412   border: 0px;
 413   background: image-url("sprite.png") 0 -30px no-repeat;
 414   position: absolute;
 415   top: 8px;
 416   left: 17px;
 417 }
 418
 419 /* Rules for Creative Commons logo button */
 420
 421 #cclogo {
 422   margin: 10px 0;
 423   float: right;
 424 }
 425
 426 /* Rules for tabbed navigation bar */
 427
 428 #top-bar {
 429   position: relative;
 430   margin-left: 185px;
 431   height: 29px;
 432   border-bottom: 1px solid #ccc;
 433   background: white;
 434   z-index: 100;
 435 }
 436
 437 .site-edit #top-bar,
 438 .site-index #top-bar,
 439 .site-export #top-bar {
 440   position: fixed;
 441   left: 0;
 442   right: 0;
 443 }
 444
 445 #tabnav {
 446   height: 29px;
 447   margin-bottom:0;
 448   overflow: hidden;
 449 }
 450
 451 #tabnav li {
 452   display: inline;
 453 }
 454
 455 #tabnav a, #tabnav a:link, #tabnav a:visited {
 456   float: left;
 457   background: #fff;
 458   font-weight: bold;
 459   padding: 3px 10px;
 460   text-decoration: none;
 461   color: #333;
 462   float: left;
 463   margin-right: 1px;
 464   -webkit-transition: color 200ms ease-in;
 465      -moz-transition: color 200ms ease-in;
 466        -o-transition: color 200ms ease-in;
 467           transition: color 200ms ease-in;
 468 }
 469
 470 .site-index #tabnav a#viewanchor,
 471 .site-edit #tabnav a#editanchor,
 472 .changeset-list #tabnav a#historyanchor,
 473 .site-export #tabnav a#exportanchor {
 474   border-bottom: 1px solid #aaa;
 475   background: #9ed485;
 476   color: #000;
 477 }
 478
 479 #tabnav a:link:hover, #tabnav a:visited:hover {
 480   text-decoration: underline;
 481 }
 482
 483 #tabnav a:link.disabled,
 484 #tabnav a:visited.disabled,
 485 #tabnav a:link:hover.disabled,
 486 #tabnav a:visited:hover.disabled {
 487   color: #ccc;
 488   cursor: default;
 489 }
 490
 491 #tabnav a:link.disabled:hover,
 492 #tabnav a:visited.disabled:hover,
 493 #tabnav a:link:hover.disabled:hover,
 494 #tabnav a:visited:hover.disabled:hover {
 495   text-decoration: none;
 496 }
 497
 498 /* Utility for styling notification numbers */
 499
 500 .count-number {
 501   padding: 2px 5px;
 502   border-radius: 3px;
 503   background: #d7d7ff;
 504   margin: 0 2px;
 505   font-size: 11px;
 506   color: #333;
 507 }
 508
 509 /* Rules for greeting bar in the top right corner */
 510
 511 #greeting {
 512   float: right;
 513   padding-top: 3px;
 514 }
 515
 516 .greeting-bar-unread {
 517   font-weight: bold;
 518 }
 519
 520 /* Rules for the message shown in place of the map when javascript is disabled */
 521
 522 #noscript {
 523   z-index: 20000000;
 524   position: absolute;
 525   top: 15px;
 526   left: 15px;
 527 }
 528
 529 /* Rules for Leaflet maps */
 530
 531 #permalink {
 532   z-index: 10000;
 533   position: absolute;
 534   bottom: 0px;
 535   right: 0px;
 536   padding: 5px;
 537   background:#fff;
 538 }
 539
 540 .leaflet-control-attribution a.disabled {
 541   color: #99c9dc;
 542   cursor: default;
 543   text-decoration: none;
 544 }
 545
 546 .site-index .leaflet-top,
 547 .site-export .leaflet-top {
 548   top: 10px !important;
 549   .leaflet-control {
 550     margin-top: 0px !important;
 551   }
 552 }
 553
 554 .site-index #map .olControlScaleLine,
 555 .site-export #map .olControlScaleLine {
 556   left: 10px !important;
 557 }
 558
 559 .leaflet-popup-scrolled {
 560   padding-right: 20px;
 561   border-bottom: 0px !important;
 562   border-top: 0px !important;
 563 }
 564
 565 /* Rules for edit menu */
 566
 567 .menuicon {
 568   padding: 0 5px;
 569   font-weight: normal;
 570   display: inline-block;
 571   &:hover {
 572     text-decoration: none !important;
 573   }
 574 }
 575
 576 .menu {
 577   display: none;
 578   z-index: 10000;
 579   position: absolute;
 580   background-color: #ffffff;
 581   border: 1px solid #cccccc;
 582   border-top: 0px;
 583 }
 584
 585 .menu ul {
 586   margin: 0px;
 587 }
 588
 589 .menu li {
 590   padding: 2px 5px;
 591   border-top: 1px solid #eee;
 592   white-space: nowrap;
 593 }
 594
 595 /* Rules for attribution text under the main map shown on printouts */
 596
 597 #attribution {
 598   display: none;
 599 }
 600
 601 .attribution_license,
 602 .attribution_project {
 603   text-align: left;
 604 }
 605
 606 .attribution_notice {
 607   text-align: center;
 608 }
 609
 610 /* Rules for the popout map sidebar */
 611
 612 #sidebar {
 613   display: none;
 614   position: absolute;
 615   overflow: auto;
 616   top: 0px;
 617   bottom: 0px;
 618   left: 0px;
 619   border-right: 1px solid #ccc;
 620   width: 33.3333%;
 621   .sidebar_heading {
 622     position: relative;
 623     padding: 10px 20px;
 624     z-index: 9999;
 625     background: #F4F4FF;
 626     border-bottom: 1px solid #ccc;
 627   }
 628   h4 {
 629     margin: 0;
 630   }
 631   ul {
 632     margin-bottom: 0;
 633     li {
 634       margin-bottom: 5px;
 635       &:last-child {
 636         margin-bottom: 0;
 637       }
 638     }
 639   }
 640 }
 641
 642 #sidebar_close {
 643   position: absolute;
 644   height: 20px;
 645   top: 0px;
 646   bottom: 0;
 647   right: 20px;
 648   margin: auto;
 649 }
 650
 651 #sidebar_content {
 652   position: relative;
 653   bottom: 0;
 654   width: 100%;
 655   h4 {
 656     padding: 0 20px 10px 20px;
 657     margin-top: 10px;
 658     margin-bottom: 0;
 659     border-bottom: 1px solid #ddd;
 660   }
 661 }
 662
 663 /* Rules for the map key which appears in the popout sidebar */
 664
 665 #mapkey {
 666   padding: 20px;
 667 }
 668
 669 #mapkey .mapkey-table-key img {
 670   display: block;
 671   margin-left: auto;
 672   margin-right: auto;
 673 }
 674
 675 #mapkey td {
 676   padding: 0 5px 5px 5px;
 677 }
 678
 679 /* Rules for search results which appear in the popout sidebar */
 680
 681 .search_searching {
 682   margin-top: 5px;
 683   margin-bottom: 5px;
 684 }
 685
 686 .search_results_entry {
 687   margin-bottom: 0 ;
 688 }
 689
 690 .search_results_entry .search_searching {
 691   text-align: center;
 692   margin: 20px auto;
 693   width: 20px;
 694   display: block;
 695 }
 696
 697 ul.results-list li { border-bottom: 1px solid #ccc; }
 698
 699 .search_results_error {
 700   color: #f00;
 701 }
 702
 703 /* Rules for data browser information which appears in the popout sidebar */
 704
 705 #browse_content {
 706   position: relative;
 707   .browse_show_list.button {
 708     position: absolute;
 709     left: 20px;
 710     right: 20px;
 711     bottom: -40px;
 712     margin-bottom: 0;
 713   }
 714   a.more-details {
 715     position: absolute;
 716     top: 0;
 717     right: 20px;
 718   }
 719   ul li {
 720     margin-bottom: 0;
 721   }
 722 }
 723
 724 .browse_details {
 725   position: relative;
 726 }
 727
 728 .browse_status {
 729   display: none;
 730 }
 731
 732 /* Rules for export information which appears in the popout sidebar */
 733
 734 .export_bounds {
 735   text-align: center;
 736 }
 737
 738 .export_area_inputs {
 739   margin-bottom: 10px;
 740 }
 741
 742 .export_bound {
 743   margin: 5px;
 744 }
 745
 746 .export_details input[type="text"]#export_html_text {
 747   width: 100%;
 748 }
 749
 750 #sidebar #marker_inputs li:last-child {
 751   margin-bottom: 10px;
 752 }
 753
 754 #export_osm,
 755 #export_mapnik,
 756 #export_osmarender {
 757   display: none;
 758 }
 759
 760 .export_buttons {
 761   width: 100%;
 762   text-align: center;
 763 }
 764
 765 /* Rules for the main content area */
 766
 767 #content {
 768   padding: 20px;
 769   position: relative;
 770 }
 771
 772 .site-edit #content,
 773 .site-index #content,
 774 .site-export #content {
 775   position: fixed;
 776   padding: 0;
 777   top: 30px; bottom: 0;
 778   left: 185px; right: 0;
 779   border-left: 1px solid #ccc;
 780 }
 781
 782 .wrapper {
 783   margin-left: 185px;
 784   border-left: 1px solid #ccc;
 785   text-align: left;
 786 }
 787
 788 .site-edit #content {
 789   top: 30px;
 790 }
 791
 792 #content.maximised {
 793   top: 0;
 794   left: 0;
 795   right: 0;
 796   bottom: 0;
 797   border: 0;
 798   z-index: 1000;
 799 }
 800
 801 #slim_container {
 802   width: 100%;
 803 }
 804
 805 #slim_container_content {
 806   max-width: 50em;
 807   background-color: #FFFFFF;
 808   margin: 10px auto;
 809   padding: 3px;
 810   border-radius: 25px;
 811   -moz-border-radius: 25px;
 812   border: 1px solid #e6e6e6;
 813 }
 814
 815 #slim_content {
 816   margin: 10px;
 817   margin-top: 95px;
 818   max-width: 50em;
 819
 820   .content-heading {
 821     margin-bottom: 15px;
 822   }
 823 }
 824
 825 #slim_header {
 826   margin: 30px 10px;
 827   position: absolute;
 828   top: 0px;
 829   margin-right: 5px;
 830 }
 831
 832 #slim_header img {
 833   vertical-align: middle;
 834   margin-bottom: 5px;
 835   margin-right: 5px;
 836 }
 837
 838 .content-heading {
 839   position: relative;
 840   padding: 20px;
 841   background: #F4F4FF;
 842   h1, h2 {
 843     margin-bottom: 10px;
 844     line-height: 100%;
 845     &:last-child {
 846       margin-bottom: 0;
 847     }
 848   }
 849   p {
 850     margin-top: 10px;
 851     margin-bottom: 0px;
 852   }
 853 }
 854
 855 /* Rules for small maps in content areas */
 856
 857 .content_map {
 858   position: relative;
 859   width: 45%;
 860   height: 398px;
 861   border: 1px solid #ccc;
 862   margin-bottom: 20px;
 863   float: right;
 864 }
 865
 866 .content_map #small_map {
 867   height: 100%;
 868   width: 100%;
 869   margin-bottom: 20px;
 870 }
 871
 872 /* Rules for the home page */
 873
 874 .site-export #map,
 875 .site-index #map {
 876   position: absolute;
 877   top: 0px;
 878   bottom: 0px;
 879   left: 0px;
 880   right: 0px;
 881 }
 882
 883 /* Rules for the edit page */
 884
 885 .site-edit #map {
 886   position: absolute;
 887   top: 0px;
 888   bottom: 0px;
 889   left: 0px;
 890   right: 0px;
 891   overflow: hidden;
 892 }
 893
 894 /* Rules for the changeset list shown by the history tab etc */
 895
 896 #changeset_list {
 897   width: 100%;
 898   ul {
 899     padding: 10px 0;
 900     margin-bottom: 0px;
 901     border-top: 1px solid #ccc;
 902     &:last-child {
 903       border-bottom: 1px solid #ccc;
 904     }
 905   }
 906   .selected {
 907     background: #FFFFC0;
 908   }
 909   .date,
 910   .user {
 911     border-left: 1px solid #ccc;
 912     padding-left: 5px;
 913     margin-right: 5px;
 914   }
 915 }
 916
 917 #changeset_list_map {
 918   position: absolute;
 919   bottom: 20px;
 920   top: 20px;
 921   right: 20px;
 922   width: 45%;
 923   min-height: 398px;
 924   max-height: 598px;
 925   border: 1px solid #ccc;
 926 }
 927
 928 /* Rules for the data browser */
 929
 930 .browse-section {
 931   border-top: 1px solid #ccc;
 932   margin-top: 10px;
 933   padding-top: 10px;
 934   &:first-child {
 935     margin-top: 0;
 936   }
 937   &.warning {
 938     color: #ff7070;
 939     font-weight: bold;
 940   }
 941   h4, p {
 942     margin-bottom: 5px;
 943   }
 944   p, ul, .bbox {
 945     margin-left: 33.3333%;
 946   }
 947   ul p {
 948     margin-left: 0;
 949     margin-bottom: 0;
 950   }
 951   h4 {
 952     width: 33.3333%;
 953     float: left;
 954   }
 955 }
 956
 957 .bbox {
 958   div {
 959     width: 33.3333%;
 960     text-align: center;
 961     padding: 5px 0;
 962     overflow: hidden;
 963     text-overflow: ellipsis;
 964     float: left;
 965   }
 966   .max_lat,
 967   .min_lat {
 968     margin-left: auto;
 969     margin-right: auto;
 970     width: 100%;
 971   }
 972 }
 973
 974 #browse_map .geolink {
 975   display: none;
 976 }
 977
 978 #browse_map .secondary-actions {
 979   margin-bottom: 10px;
 980 }
 981
 982 /* Rules for the trace list shown by the traces tab etc */
 983
 984 #trace_list {
 985   font-size: 10px;
 986   border-width: 0px;
 987   text-align: right;
 988 }
 989
 990 #trace_list .trace_summary {
 991   font-size: 12px;
 992   color: gray;
 993 }
 994
 995 #trace_list .trace_pending {
 996   color: red;
 997 }
 998
 999 #trace_list .trace_public {
1000   color: green;
1001 }
1002
1003 #trace_list .trace_identifiable {
1004   color: green;
1005 }
1006
1007 #trace_list .trace_trackable {
1008   color: red;
1009 }
1010
1011 #trace_list .trace_private {
1012   color: red;
1013 }
1014
1015 /* Rules for the user profile page */
1016
1017 #userinformation {
1018   min-height: 100px;
1019   .userinformation-inner {
1020     float: left;
1021   }
1022   h2 {
1023     margin-top: 0;
1024   }
1025   .user-description {
1026     width: 100%;
1027     clear: both;
1028   }
1029   .deemphasize {
1030     margin: 0;
1031   }
1032 }
1033
1034 .admin-user-info small {
1035   margin-bottom: 10px;
1036   display: inline;
1037   margin-right: 20px;
1038 }
1039
1040 .activity-block {
1041   clear: left;
1042   border-bottom: 1px solid #ccc;
1043   padding-bottom: 20px;
1044   float: left;
1045   h3 {
1046     margin-bottom: 10px;
1047   }
1048 }
1049
1050 .contact-activity {
1051   margin-top: 20px;
1052   width: 100%;
1053 }
1054
1055 .activity-details p {
1056   margin-left: 72px;
1057   margin-bottom: 0;
1058 }
1059
1060 #friends-container .contact-activity ul {
1061   margin-left: 72px;
1062   }
1063
1064 .user-view p#no_home_location {
1065   margin: 20px;
1066 }
1067
1068 .user-view .user_thumbnail {
1069   margin-top: 5px;
1070   float: left;
1071 }
1072
1073 /* Rules for the user map */
1074
1075 .content_map .leaflet-popup-content {
1076   margin: 10px 15px;
1077   min-height: 62px;
1078 }
1079
1080 .content_map .leaflet-popup-content-wrapper {
1081 -webkit-border-radius: 4px;
1082   border-radius: 4px;
1083 }
1084
1085 /* Rules for user popups on maps */
1086
1087 .user_popup {
1088   min-width: 200px;
1089 }
1090
1091 .user_popup p {
1092   padding-top: 3px;
1093   padding-bottom: 3px;
1094   margin-top: 0px;
1095   margin-bottom: 0px;
1096   margin-left: 55px;
1097   margin-right: 2px;
1098 }
1099
1100 .user_popup img.user_thumbnail {
1101   float: left;
1102   margin-right: 10px;
1103 }
1104
1105 /* Rules for user popups on maps */
1106
1107 .user_popup p {
1108   margin-bottom: 0;
1109   margin-left: 60px;
1110   font-size: 12px;
1111 }
1112
1113 /* Rules for the user list */
1114
1115 #user_list {
1116   font-size: 10px;
1117   width: 100%;
1118 }
1119
1120 #user_list tr {
1121   vertical-align: middle;
1122 }
1123
1124 #user_list p {
1125   margin-top: 0px;
1126   margin-bottom: 0px;
1127 }
1128
1129 #user_list_actions {
1130   float: right;
1131   margin-top: 10px;
1132 }
1133
1134 /* Rules for the diary list page */
1135
1136 .diary_entry-list img.user_thumbnail {
1137   float: left;
1138 }
1139
1140 .diary_post {
1141   position: relative;
1142   margin-top: 20px;
1143   padding-top: 20px;
1144   border-top: 1px solid #ccc;
1145
1146   &:first-child {
1147     margin-top: 0;
1148     border-top: 0;
1149     padding-top: 0;
1150   }
1151   h1, h2 {
1152     font-size: 21px;
1153     line-height: 21px;
1154   }
1155   small.deemphasize {
1156     display: block;
1157   }
1158   ul,
1159   ol {
1160     font-style: italic;
1161   }
1162   ul.secondary-actions { display: inline-block;}
1163 }
1164
1165 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1166   display: inline;
1167 }
1168
1169 .post_heading {
1170   margin-bottom: 20px;
1171   h2 {
1172     margin-top: 0;
1173     margin-bottom: 0;
1174     font-size: 24px;
1175     float: left;
1176     line-height: 32px;
1177   }
1178 }
1179
1180 /* Rules for the diary entry page */
1181
1182 .diary_entry {
1183   #map {
1184     position: relative;
1185     width: 90%;
1186     height: 398px;
1187     border: 1px solid #ccc;
1188     display: none;
1189     margin-bottom: 20px;
1190   }
1191   #newcomment {
1192     border-top: 1px solid #ccc;
1193     padding-top: 20px;
1194     margin-top: 10px;
1195   }
1196   .diary-comment {
1197     margin-top: 10px;
1198     &:first-child {
1199       margin-top: 20px;
1200       padding-top: 20px;
1201       border-top: 1px solid #ccc;
1202     }
1203     p {
1204       margin-bottom: 10px;
1205       margin-left: 70px;
1206     }
1207     .comment-heading {
1208       margin-bottom: 0;
1209       margin-top: 0;
1210     }
1211   }
1212 }
1213
1214 .diary_entry-view img.user_thumbnail {
1215   float: left;
1216 }
1217
1218 /* Rules for the login page */
1219
1220 #login_openid_buttons li {
1221   float: left;
1222   padding: 5px 10px;
1223 }
1224
1225 /* Rules for the account confirmation page */
1226
1227 div#contributorTerms {
1228   border: 1px solid #ccc;
1229   padding: 20px;
1230   margin-bottom: 20px;
1231   overflow: auto;
1232   height: 398px;
1233 }
1234
1235 div#contributorTerms p#last {
1236   margin-bottom: 0px;
1237 }
1238
1239 div#contributorTerms ol {
1240   margin-bottom: 0px;
1241 }
1242
1243 div#contributorTerms img {
1244   display: block;
1245   margin: 20px auto inherit auto;
1246 }
1247
1248 form#termsForm div#buttons {
1249   float: right;
1250 }
1251
1252 form#termsForm input#agree {
1253   margin-left: 40px;
1254 }
1255
1256 div#slim_content form#termsForm {
1257   width: auto;
1258 }
1259
1260 p#contributorGuidance {
1261   background-color: #f4f4ff;
1262   border-radius: 3px;
1263   -moz-border-radius: 3px;
1264   margin-top: 20px;
1265   padding: 10px;
1266 }
1267
1268 /* Rules for the account settings page */
1269
1270 #accountForm {
1271   margin-top: 20px;
1272 }
1273
1274 #accountForm td {
1275   padding-bottom: 10px;
1276 }
1277
1278 #accountForm .user_map {
1279   position: relative;
1280   width: 498px;
1281   height: 398px;
1282   border: 1px solid #ccc;
1283 }
1284
1285 .accountImage-options {
1286   width: 50%;
1287   display: inline-block;
1288 }
1289
1290 .nohome .location {
1291   display: none;
1292 }
1293
1294 #homerow .message {
1295   display: none;
1296 }
1297
1298 .nohome .message {
1299   display: inline !important;
1300 }
1301
1302 #accountForm input[type=submit] {
1303   margin-top: 15px;
1304 }
1305
1306 .content_map.settings_map {
1307   float: none;
1308   width: 50%;
1309 }
1310
1311 /* Rules for message in/out box page */
1312
1313 .messages {
1314   width: 100%;
1315   border: 1px solid #ddd;
1316 }
1317
1318 .messages tbody tr {
1319   border-top: 1px solid #ccc;
1320 }
1321
1322 .messages .inbox-row {
1323   background: #f8f8ff;
1324 }
1325
1326 .messages .inbox-row-unread {
1327   background:#CBEEA7;
1328 }
1329
1330 .right {
1331   float: right;
1332 }
1333
1334 .messages tr td,
1335 .messages tr th {
1336   padding: 5px;
1337 }
1338
1339 .inbox-row .inbox-mark-read {
1340   display: none;
1341 }
1342
1343 .info-line {
1344   margin-bottom: 20px;
1345   padding: 5px 0px 4px 0px;
1346   border-bottom: 1px solid #ccc;
1347 }
1348
1349 .info-line form,
1350 .info-line form div {
1351   display: inline;
1352 }
1353
1354 .info-line .user_thumbnail_tiny {
1355   vertical-align: middle;
1356 }
1357
1358 .inbox-row-unread .inbox-mark-unread {
1359   display: none;
1360 }
1361
1362 /* Rules for "flash" notice boxes shown at the top of the content area */
1363
1364 .flash {
1365     padding: 20px;
1366   &#error {
1367     background-color: #ff7070;
1368   }
1369   &#warning {
1370     background-color: #fff6f0;
1371   }
1372   &#notice {
1373     background-color: #CBEEA7;
1374   }
1375 }
1376
1377 /* Rules for highlighting fields with rails validation errors */
1378
1379 .field_with_errors {
1380   padding: 2px;
1381   background-color: #ff7070;
1382   display: table;
1383 }
1384
1385 /* Rules for rails validation error boxes */
1386
1387 #errorExplanation {
1388   width: 400px;
1389   border: 2px solid #ff7070;
1390   padding: 10px;
1391   margin-bottom: 20px;
1392   background-color: #f0f0f0;
1393 }
1394
1395 #errorExplanation h2 {
1396   margin: -10px;
1397   padding: 5px 5px 5px 15px;
1398   font-weight: bold;
1399   font-size: 12px;
1400   background-color: #c00;
1401   color: #fff;
1402   text-align: left;
1403 }
1404
1405 #errorExplanation p {
1406   color: #333;
1407   margin-bottom: 0px;
1408   padding: 5px;
1409 }
1410
1411 #errorExplanation ul li {
1412   font-size: 12px;
1413   list-style: disc;
1414 }
1415
1416 /* Rules for forms */
1417
1418 .submitButton {
1419   text-align: center;
1420 }
1421
1422 .fieldName {
1423   vertical-align: top;
1424   font-weight: bold;
1425   font-size: 12px;
1426   line-height: 20px;
1427   text-align: right;
1428 }
1429
1430 .submitButton {
1431   text-align: right;
1432 }
1433
1434 .minorNote {
1435   font-size: 12px;
1436 }
1437
1438 input[type="text"],
1439 input[type="email"],
1440 input[type="url"],
1441 input[type="password"],
1442 textarea {
1443   border: 1px solid #ccc;
1444 }
1445
1446 /* Rules for user images */
1447
1448 img.user_image {
1449   max-width: 100px;
1450   max-height: 100px;
1451   border: 1px solid #ccc;
1452   margin-bottom: 20px;
1453   float: left;
1454   margin-right: 20px;
1455 }
1456
1457 img.user_thumbnail {
1458   max-width: 50px;
1459   max-height: 50px;
1460   border: 1px solid #ccc;
1461   margin-right: 20px;
1462 }
1463
1464 img.user_thumbnail_tiny {
1465   max-width: 24px;
1466   max-height: 24px;
1467   border: 1px solid #ccc;
1468 }
1469
1470 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1471
1472 .nowrap {
1473   white-space: nowrap;
1474 }
1475
1476 /* Rules for geo microformats */
1477
1478 abbr.geo {
1479   border-bottom: none;
1480 }
1481
1482 /* Rules for RSS buttons */
1483
1484 .rsssmall {
1485   position: relative;
1486   top: 4px;
1487 }
1488
1489 /* General styles for action lists / subnavs / pager navs */
1490
1491 ul.secondary-actions {
1492   font-style: normal;
1493   margin-bottom: 0;
1494   margin-left: 0;
1495   &.pager {
1496     display: inline-block;
1497     margin-bottom: 20px;
1498     margin-right: 60px;
1499   }
1500   li {
1501     display: block;
1502     float: left;
1503     list-style: none;
1504     border-left: 1px solid #ccc;
1505     padding-left: 5px;
1506     margin-right: 5px;
1507     &:first-child {
1508       border-left: 0;
1509       padding-left: 0;
1510     }
1511   }
1512 }
1513
1514 /* Utility for managing inner content areas */
1515
1516 .inner22 { padding: 20px;}
1517
1518 .inner12 { padding: 10px 20px;}
1519
1520 .inner02 { padding: 0 20px;}
1521
1522 /* Utility for general button styles */
1523
1524 a.button {
1525   display: block;
1526   padding: 5px;
1527   min-width: 120px;
1528   margin-bottom: 10px;
1529   color: white;
1530   background: #7092FF;
1531   text-align: center;
1532   border-radius: 2px;
1533   -moz-border-radius: 2px;
1534   &:hover {
1535     background: blue;
1536     text-decoration: none;
1537   }
1538   &:last-child {
1539     margin-bottom: 0;
1540   }
1541 }
1542
1543 a.button.submit {
1544   background-color: #cbeea7;
1545   &:hover {
1546     background-color: #9ed485;
1547   }
1548 }
1549
1550 /* Rules for doing distinct colour of alternate table rows */
1551
1552 .table0,
1553 .item0 {
1554   background: #F4F4FF;
1555 }
1556
1557 .table1,
1558 .item1 {
1559   background: #fff;
1560 }
1561
1562 /* Rules for OpenID logo */
1563
1564 .openid_logo {
1565   vertical-align: text-bottom;
1566   border: 0;
1567 }
1568
1569 /* Rules for rich text */
1570
1571 .richtext {
1572   ul,
1573   ol {
1574     margin-bottom: 20px;
1575     margin-left: 20px;
1576   }
1577   ul li {
1578     list-style: disc;
1579   }
1580
1581   ol li {
1582     list-style: decimal;
1583   }
1584 }
1585
1586 /* Rules for rich text editors */
1587
1588 .richtext_container {
1589   white-space: nowrap;
1590
1591   .richtext_content {
1592     display: inline-block;
1593     vertical-align: top;
1594
1595     .richtext_preview {
1596       display: inline-block;
1597       padding: 20px;
1598       background-color: #f4f4ff;
1599       white-space: normal;
1600
1601       &.loading {
1602         background-image: image-url("loading.gif");
1603         background-repeat: no-repeat;
1604         background-position: center;
1605       }
1606
1607       > :first-child {
1608         margin-top: 0px;
1609       }
1610     }
1611   }
1612
1613   .richtext_help {
1614     display: inline-block;
1615     vertical-align: top;
1616     margin-left: 15px;
1617     background-color: #f8f8ff;
1618     padding: 20px;
1619
1620     p {
1621       margin: 0px;
1622     }
1623
1624     th {
1625       vertical-align: top;
1626       text-align: left;
1627       padding: 0px 15px 0px 0px !important;
1628     }
1629
1630     td {
1631       font-family: fixed;
1632       line-height: 16px;
1633       text-align: left;
1634       padding: 0px !important;
1635     }
1636
1637     input.richtext_doedit {
1638       margin-top: 5px !important;
1639       margin-right: 10px !important;
1640     }
1641
1642     input.richtext_dopreview {
1643       margin-top: 5px !important;
1644       margin-left: 10px !important;
1645     }
1646   }
1647 }
1648
1649 /* Rules for the user notes list */
1650
1651 .note_list {
1652   tr.creator {
1653     background-color: #eeeeee;
1654   }
1655
1656   td {
1657     padding: 3px;
1658   }
1659
1660   p {
1661     margin-bottom: 0px;
1662   }
1663 }
1664
1665 /* Rules for the notes interface */
1666
1667 .note {
1668   h2 {
1669     margin-bottom: 10px;
1670   }
1671
1672   .warning {
1673     display: block;
1674     background-color: #ff7070;
1675     padding: 4px 6px;
1676     margin-bottom: 10px;
1677   }
1678
1679   .comment_body {
1680     margin-top: 4px;
1681     margin-bottom: 4px;
1682
1683     p {
1684       margin-top: 0px;
1685       margin-bottom: 0px;
1686     }
1687   }
1688
1689   .comment {
1690     width: 100%;
1691   }
1692
1693   .buttons {
1694     margin-top: 5px;
1695     text-align: right;
1696   }
1697 }