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