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