app/assets/stylesheets/common.css.scss

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