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