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