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   text-indent: -1000px;
 361   overflow: hidden;
 362   background: image-url("sprite.png") 0 0 no-repeat;
 363   position: absolute;
 364   top: 5px;
 365   right: 5px;
 366   cursor: pointer;
 367 }
 368
 369 .search_help {
 370   margin: 5px 0 0 0;
 371 }
 372
 373 /* Utility for de-emphasizing content */
 374
 375 .deemphasize {
 376   color: #999;
 377   a {
 378     color: #7092FF;
 379   }
 380 }
 381
 382 /* Rules for donation request box */
 383
 384 .donate {
 385   display: block;
 386   width: 164px;
 387   padding: 5px;
 388   border: 1px solid #AED1A0;
 389   background: #cbeea7;
 390   font-size: 14px;
 391   line-height: 1.4;
 392   text-align: center;
 393   border-radius: 2px;
 394   color: #222;
 395   margin: 10px 10px 0px 10px;
 396
 397   &:hover {
 398     background: #9ed485;
 399     text-decoration: none;
 400   }
 401   span {
 402     margin: 0;
 403     padding-left: 18px;
 404     background: image-url("sprite.png") 0 -29px no-repeat;
 405   }
 406 }
 407
 408 /* Rules for Creative Commons logo button */
 409
 410 #cclogo {
 411   margin: 10px 0;
 412   float: right;
 413 }
 414
 415 /* Rules for tabbed navigation bar */
 416
 417 #top-bar {
 418   position: relative;
 419   margin-left: 185px;
 420   height: 30px;
 421   border-bottom: 1px solid #ccc;
 422   background: white;
 423   z-index: 100;
 424 }
 425
 426 .site-edit #top-bar,
 427 .site-index #top-bar,
 428 .site-export #top-bar {
 429   position: fixed;
 430   left: 0;
 431   right: 0;
 432 }
 433
 434 #tabnav {
 435   height: 30px;
 436   margin-bottom:0;
 437   overflow: hidden;
 438 }
 439
 440 #tabnav li {
 441   display: inline;
 442 }
 443
 444 #tabnav a, #tabnav a:link, #tabnav a:visited {
 445   float: left;
 446   font-weight: bold;
 447   padding: 3px 10px;
 448   text-decoration: none;
 449   color: #333;
 450   float: left;
 451   margin-right: 1px;
 452   -webkit-transition: color 200ms ease-in;
 453      -moz-transition: color 200ms ease-in;
 454        -o-transition: color 200ms ease-in;
 455           transition: color 200ms ease-in;
 456 }
 457
 458 .site-index #tabnav a#viewanchor,
 459 .site-edit #tabnav a#editanchor,
 460 .changeset-list #tabnav a#historyanchor,
 461 .site-export #tabnav a#exportanchor {
 462   border-bottom: 1px solid #aaa;
 463   background: #9ed485;
 464   color: #000;
 465 }
 466
 467 #tabnav a:link:hover, #tabnav a:visited:hover {
 468   text-decoration: underline;
 469 }
 470
 471 #tabnav a:link.disabled,
 472 #tabnav a:visited.disabled,
 473 #tabnav a:link:hover.disabled,
 474 #tabnav a:visited:hover.disabled {
 475   color: #ccc;
 476   cursor: default;
 477 }
 478
 479 #tabnav a:link.disabled:hover,
 480 #tabnav a:visited.disabled:hover,
 481 #tabnav a:link:hover.disabled:hover,
 482 #tabnav a:visited:hover.disabled:hover {
 483   text-decoration: none;
 484 }
 485
 486 /* Utility for styling notification numbers */
 487
 488 .count-number {
 489   padding: 2px 5px;
 490   border-radius: 3px;
 491   background: #d7d7ff;
 492   margin: 0 2px;
 493   font-size: 11px;
 494   color: #333;
 495 }
 496
 497 /* Rules for greeting bar in the top right corner */
 498
 499 #greeting {
 500   float: right;
 501   padding-top: 3px;
 502   margin-right: 5px;
 503 }
 504
 505 .greeting-bar-unread {
 506   font-weight: bold;
 507 }
 508
 509 /* Rules for the message shown in place of the map when javascript is disabled */
 510
 511 #noscript {
 512   z-index: 20000000;
 513   position: absolute;
 514   top: 15px;
 515   left: 15px;
 516 }
 517
 518 /* Rules for Leaflet maps */
 519
 520 .leaflet-control-attribution {
 521   a.disabled {
 522     color: #99c9dc;
 523     cursor: default;
 524     text-decoration: none;
 525   }
 526
 527   ul.secondary-actions {
 528     float: left;
 529     margin-right: 5px;
 530
 531     &:only-child {
 532       margin-right: 0px;
 533     }
 534   }
 535 }
 536
 537 .site-index .leaflet-top,
 538 .site-export .leaflet-top {
 539   top: 10px !important;
 540   .leaflet-control {
 541     margin-top: 0px !important;
 542   }
 543 }
 544
 545 .site-index #map .olControlScaleLine,
 546 .site-export #map .olControlScaleLine {
 547   left: 10px !important;
 548 }
 549
 550 .leaflet-popup-scrolled {
 551   padding-right: 20px;
 552   border-bottom: 0px !important;
 553   border-top: 0px !important;
 554 }
 555
 556 .leaflet-popup-content-wrapper {
 557   border-radius: 4px !important;
 558   -webkit-border-radius: 4px !important;
 559 }
 560
 561 /* Rules for edit menu */
 562
 563 .menuicon {
 564   padding: 0 5px;
 565   font-weight: normal;
 566   display: inline-block;
 567   &:hover {
 568     text-decoration: none !important;
 569   }
 570 }
 571
 572 .menu {
 573   display: none;
 574   z-index: 10000;
 575   position: absolute;
 576   background-color: #ffffff;
 577   border: 1px solid #cccccc;
 578   border-top: 0px;
 579 }
 580
 581 .menu ul {
 582   margin: 0px;
 583 }
 584
 585 .menu li {
 586   padding: 2px 5px;
 587   border-top: 1px solid #eee;
 588   white-space: nowrap;
 589 }
 590
 591 /* Rules for attribution text under the main map shown on printouts */
 592
 593 #attribution {
 594   display: none;
 595 }
 596
 597 .attribution_license,
 598 .attribution_project {
 599   text-align: left;
 600 }
 601
 602 .attribution_notice {
 603   text-align: center;
 604 }
 605
 606 /* Rules for the popout map sidebar */
 607
 608 #sidebar {
 609   display: none;
 610   position: absolute;
 611   overflow: auto;
 612   top: 0px;
 613   bottom: 0px;
 614   left: 0px;
 615   border-right: 1px solid #ccc;
 616   width: 33.3333%;
 617   .sidebar_heading {
 618     position: relative;
 619     padding: 10px 20px;
 620     z-index: 9999;
 621     background: #F4F4FF;
 622     border-bottom: 1px solid #ccc;
 623   }
 624   h4 {
 625     margin: 0;
 626   }
 627   ul {
 628     margin-bottom: 0;
 629     li {
 630       margin-bottom: 5px;
 631       &:last-child {
 632         margin-bottom: 0;
 633       }
 634     }
 635   }
 636 }
 637
 638 #sidebar_close {
 639   position: absolute;
 640   height: 20px;
 641   top: 0px;
 642   bottom: 0;
 643   right: 20px;
 644   margin: auto;
 645 }
 646
 647 #sidebar_content {
 648   position: relative;
 649   bottom: 0;
 650   width: 100%;
 651   h4 {
 652     padding: 0 20px 10px 20px;
 653     margin-top: 10px;
 654     margin-bottom: 0;
 655     border-bottom: 1px solid #ddd;
 656   }
 657 }
 658
 659 /* Rules for the map key which appears in the popout sidebar */
 660
 661 #mapkey {
 662   padding: 20px;
 663 }
 664
 665 #mapkey .mapkey-table-key img {
 666   display: block;
 667   margin-left: auto;
 668   margin-right: auto;
 669 }
 670
 671 #mapkey td {
 672   padding: 0 5px 5px 5px;
 673 }
 674
 675 /* Rules for search results which appear in the popout sidebar */
 676
 677 .search_searching {
 678   margin-top: 5px;
 679   margin-bottom: 5px;
 680 }
 681
 682 .search_results_entry {
 683   margin-bottom: 0;
 684
 685   .search_details {
 686     display: block;
 687     text-align: right;
 688   }
 689 }
 690
 691 .search_results_entry .search_searching {
 692   text-align: center;
 693   margin: 20px auto;
 694   width: 20px;
 695   display: block;
 696 }
 697
 698 ul.results-list li { border-bottom: 1px solid #ccc; }
 699
 700 .search_results_error {
 701   color: #f00;
 702 }
 703
 704 /* Rules for data browser information which appears in the popout sidebar */
 705
 706 #browse_content {
 707   position: relative;
 708   .browse_show_list.button {
 709     position: absolute;
 710     left: 20px;
 711     right: 20px;
 712     bottom: -40px;
 713     margin-bottom: 0;
 714   }
 715   a.more-details {
 716     position: absolute;
 717     top: 0;
 718     right: 20px;
 719   }
 720   ul li {
 721     margin-bottom: 0;
 722   }
 723 }
 724
 725 .browse_details {
 726   position: relative;
 727 }
 728
 729 .browse_status {
 730   display: none;
 731 }
 732
 733 /* Rules for export information which appears in the popout sidebar */
 734
 735 .export_bounds {
 736   text-align: center;
 737 }
 738
 739 .export_area_inputs {
 740   margin-bottom: 10px;
 741 }
 742
 743 .export_bound {
 744   margin: 5px;
 745 }
 746
 747 .export_details input[type="text"]#export_html_text {
 748   width: 100%;
 749 }
 750
 751 #sidebar #marker_inputs li:last-child {
 752   margin-bottom: 10px;
 753 }
 754
 755 #export_osm,
 756 #export_mapnik,
 757 #export_osmarender {
 758   display: none;
 759 }
 760
 761 .export_buttons {
 762   width: 100%;
 763   text-align: center;
 764 }
 765
 766 /* Rules for the main content area */
 767
 768 #content {
 769   padding: 20px;
 770   position: relative;
 771 }
 772
 773 .site-edit #content,
 774 .site-index #content,
 775 .site-export #content {
 776   position: fixed;
 777   padding: 0;
 778   top: 30px; bottom: 0;
 779   left: 184px; right: 0;
 780   border-left: 1px solid #ccc;
 781 }
 782
 783 .wrapper {
 784   margin-left: 184px;
 785   border-left: 1px solid #ccc;
 786   text-align: left;
 787 }
 788
 789 .site-edit #content {
 790   top: 30px;
 791 }
 792
 793 #content.maximised {
 794   top: 0;
 795   left: 0;
 796   right: 0;
 797   bottom: 0;
 798   border: 0;
 799   z-index: 1000;
 800 }
 801
 802 #slim_container {
 803   width: 100%;
 804 }
 805
 806 #slim_container_content {
 807   max-width: 50em;
 808   background-color: #FFFFFF;
 809   margin: 10px auto;
 810   padding: 3px;
 811   border-radius: 25px;
 812   -moz-border-radius: 25px;
 813   border: 1px solid #e6e6e6;
 814 }
 815
 816 #slim_content {
 817   margin: 10px;
 818   margin-top: 95px;
 819   max-width: 50em;
 820
 821   .content-heading {
 822     margin-bottom: 15px;
 823   }
 824 }
 825
 826 #slim_header {
 827   margin: 30px 10px;
 828   position: absolute;
 829   top: 0px;
 830   margin-right: 5px;
 831 }
 832
 833 #slim_header img {
 834   vertical-align: middle;
 835   margin-bottom: 5px;
 836   margin-right: 5px;
 837 }
 838
 839 .content-heading {
 840   position: relative;
 841   padding: 20px;
 842   background: #F4F4FF;
 843   h1, h2 {
 844     margin-bottom: 10px;
 845     line-height: 100%;
 846     &:last-child {
 847       margin-bottom: 0;
 848     }
 849   }
 850   p {
 851     margin-top: 10px;
 852     margin-bottom: 0px;
 853   }
 854 }
 855
 856 /* Rules for small maps in content areas */
 857
 858 .content_map {
 859   position: relative;
 860   width: 45%;
 861   height: 400px;
 862   border: 1px solid #ccc;
 863   margin-bottom: 20px;
 864   float: right;
 865 }
 866
 867 .content_map #small_map {
 868   height: 100%;
 869   width: 100%;
 870   margin-bottom: 20px;
 871 }
 872
 873 /* Rules for the home page */
 874
 875 .site-export #map,
 876 .site-index #map {
 877   position: absolute;
 878   top: 0px;
 879   bottom: 0px;
 880   left: 0px;
 881   right: 0px;
 882 }
 883
 884 /* Rules for the edit page */
 885
 886 .site-edit #map {
 887   position: absolute;
 888   top: 0px;
 889   bottom: 0px;
 890   left: 0px;
 891   right: 0px;
 892   overflow: hidden;
 893 }
 894
 895 /* Rules for the changeset list shown by the history tab etc */
 896
 897 #changeset_list {
 898   width: 100%;
 899   ul {
 900     padding: 10px 0;
 901     margin-bottom: 0px;
 902     border-top: 1px solid #ccc;
 903     &:last-child {
 904       border-bottom: 1px solid #ccc;
 905     }
 906   }
 907   .selected {
 908     background: #FFFFC0;
 909   }
 910   .date,
 911   .user {
 912     border-left: 1px solid #ccc;
 913     padding-left: 5px;
 914     margin-right: 5px;
 915   }
 916 }
 917
 918 #changeset_list_map_wrapper {
 919   position: absolute;
 920   width: 50%;
 921   height: 490px;
 922   top: 0;
 923   right: 0;
 924 }
 925
 926 #changeset_list_map_wrapper.scrolled {
 927   position: fixed;
 928 }
 929
 930 #changeset_list_map {
 931   position: absolute;
 932   bottom: 20px;
 933   top: 20px;
 934   right: 20px;
 935   left: 20px;
 936   border: 1px solid #ccc;
 937 }
 938
 939 #changeset_list_map_wrapper.scrolled #changeset_list_map {
 940   margin-left: 93px;
 941 }
 942
 943 /* Rules for the data browser */
 944
 945 .browse-section {
 946   border-top: 1px solid #ccc;
 947   margin-top: 10px;
 948   padding-top: 10px;
 949   &:first-child {
 950     margin-top: 0;
 951   }
 952   .warning {
 953     background-color: #ffe0cc;
 954     margin: 0px;
 955     padding: 4px 6px;
 956     max-width: 100%;
 957   }
 958   h4, p {
 959     margin-bottom: 5px;
 960   }
 961   p, ul, .bbox, .geo {
 962     display: inline-block;
 963     vertical-align: top;
 964     max-width: 65%;
 965   }
 966   ul p {
 967     margin-left: 0;
 968     margin-bottom: 0;
 969   }
 970   h4 {
 971     width: 33.3333%;
 972     display: inline-block;
 973     vertical-align: top;
 974   }
 975 }
 976
 977 .bbox {
 978   div {
 979     width: 33.3333%;
 980     text-align: center;
 981     padding: 5px 0;
 982     overflow: hidden;
 983     text-overflow: ellipsis;
 984     float: left;
 985   }
 986   .max_lat,
 987   .min_lat {
 988     margin-left: auto;
 989     margin-right: auto;
 990     width: 100%;
 991   }
 992 }
 993
 994 #browse_map .geolink {
 995   display: none;
 996 }
 997
 998 #browse_map .secondary-actions {
 999   margin-bottom: 10px;
1000 }
1001
1002 /* Rules for the trace list shown by the traces tab etc */
1003
1004 #trace_list {
1005   font-size: 10px;
1006   border-width: 0px;
1007   text-align: right;
1008 }
1009
1010 #trace_list .trace_summary {
1011   font-size: 12px;
1012   color: gray;
1013 }
1014
1015 #trace_list .trace_pending {
1016   color: red;
1017 }
1018
1019 #trace_list .trace_public {
1020   color: green;
1021 }
1022
1023 #trace_list .trace_identifiable {
1024   color: green;
1025 }
1026
1027 #trace_list .trace_trackable {
1028   color: red;
1029 }
1030
1031 #trace_list .trace_private {
1032   color: red;
1033 }
1034
1035 /* Rules for the user profile page */
1036
1037 #userinformation {
1038   min-height: 100px;
1039   .userinformation-inner {
1040     float: left;
1041   }
1042   h2 {
1043     margin-top: 0;
1044   }
1045   .user-description {
1046     width: 100%;
1047     clear: both;
1048   }
1049   .deemphasize {
1050     margin: 0;
1051   }
1052 }
1053
1054 .admin-user-info small {
1055   margin-bottom: 10px;
1056   display: inline;
1057   margin-right: 20px;
1058 }
1059
1060 .activity-block {
1061   clear: left;
1062   border-bottom: 1px solid #ccc;
1063   padding-bottom: 20px;
1064   float: left;
1065   h3 {
1066     margin-bottom: 10px;
1067   }
1068 }
1069
1070 .contact-activity {
1071   margin-top: 20px;
1072   width: 100%;
1073 }
1074
1075 .activity-details p {
1076   margin-left: 72px;
1077   margin-bottom: 0;
1078 }
1079
1080 #friends-container .contact-activity ul {
1081   margin-left: 72px;
1082   }
1083
1084 .user-view p#no_home_location {
1085   margin: 20px;
1086 }
1087
1088 .user-view .user_thumbnail {
1089   margin-top: 5px;
1090   float: left;
1091 }
1092
1093 /* Rules for the user map */
1094
1095 .content_map .leaflet-popup-content {
1096   margin: 10px;
1097   min-height: 50px;
1098 }
1099
1100 /* Rules for user popups on maps */
1101
1102 .user_popup {
1103   min-width: 200px;
1104 }
1105
1106 .user_popup p {
1107   padding-top:0;
1108   padding-bottom: 5px;
1109   margin-top: 0;
1110 }
1111
1112 .user_popup img.user_thumbnail {
1113   float: left;
1114   margin: 0 10px 0 0;
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: 10px;
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: 1;
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: 400px;
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: 4px;
1275   -moz-border-radius: 4px;
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: 500px;
1293   height: 400px;
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: 1.6666;
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: 25px;
1478   max-height: 25px;
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: 5px;
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-right: 60px;
1510   }
1511   li {
1512     display: block;
1513     float: left;
1514     list-style: none;
1515     border-left: 1px solid #ccc;
1516     padding-left: 5px;
1517     margin-right: 5px;
1518     &:first-child {
1519       border-left: 0;
1520       padding-left: 0;
1521     }
1522     &:last-child {
1523       margin-right: 0px;
1524     }
1525   }
1526 }
1527
1528 /* Utility for managing inner content areas */
1529
1530 .inner22 { padding: 20px;}
1531
1532 .inner12 { padding: 10px 20px;}
1533
1534 .inner02 { padding: 0 20px;}
1535
1536 /* Utility for general button styles */
1537
1538 a.button {
1539   display: block;
1540   padding: 5px;
1541   min-width: 120px;
1542   margin-bottom: 10px;
1543   color: white;
1544   background: #7092FF;
1545   text-align: center;
1546   border-radius: 2px;
1547   -moz-border-radius: 2px;
1548   &:hover {
1549     background: blue;
1550     text-decoration: none;
1551   }
1552   &:last-child {
1553     margin-bottom: 0;
1554   }
1555 }
1556
1557 a.button.submit {
1558   background-color: #cbeea7;
1559   &:hover {
1560     background-color: #9ed485;
1561   }
1562 }
1563
1564 /* Rules for doing distinct colour of alternate table rows */
1565
1566 .table0,
1567 .item0 {
1568   background: #F4F4FF;
1569 }
1570
1571 .table1,
1572 .item1 {
1573   background: #fff;
1574 }
1575
1576 /* Rules for OpenID logo */
1577
1578 .openid_logo {
1579   vertical-align: text-bottom;
1580   border: 0;
1581 }
1582
1583 /* Rules for rich text */
1584
1585 .richtext {
1586   h1, h2 {
1587     padding-bottom: 10px;
1588     border-bottom: 1px dashed #cccccc;
1589     margin-bottom: 10px;
1590   }
1591
1592   h1 {
1593     font-size: 24px;
1594   }
1595
1596   h2 {
1597     font-size: 18px;
1598   }
1599
1600   h3 {
1601     font-size: 14px;
1602   }
1603
1604   code {
1605     font-size: 13px;
1606     background: #e8e8e8;
1607     padding: 2px 3px;
1608   }
1609
1610   img {
1611     padding: 20px;
1612     background-color: #f4f4ff;
1613     display: block;
1614     max-width: 100%;
1615     margin: auto;
1616   }
1617
1618   blockquote {
1619     border-left: 20px solid #f4f4ff;
1620     padding-left: 20px;
1621     margin: 0;
1622     color: #7E7E7E;
1623   }
1624
1625   ul, ol {
1626     font-style: italic;
1627     padding-left: 20px;
1628     margin-bottom: 20px;
1629     margin-left: 20px;
1630   }
1631
1632   ul li {
1633     list-style: disc;
1634   }
1635
1636   ol li {
1637     list-style: decimal;
1638   }
1639 }
1640
1641 .diary_post .richtext {
1642     margin-top: 20px;
1643   }
1644
1645 .comments .richtext {
1646   margin-left: 70px;
1647   margin-top: 0;
1648 }
1649
1650 /* Rules for rich text editors */
1651
1652 .richtext_container {
1653   .richtext_content {
1654     display: inline-block;
1655     vertical-align: top;
1656
1657     .richtext_preview {
1658       display: inline-block;
1659       padding: 20px;
1660       background-color: #f4f4ff;
1661       overflow-x: auto;
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     max-width: 450px;
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, li p {
1694       display: inline-block;
1695       vertical-align: top;
1696       font-size: 11px;
1697     }
1698
1699     li h4 {
1700       width: 35%;
1701       margin: 0;
1702     }
1703
1704     li span, li p {
1705       width: 60%;
1706       margin-left: 10px;
1707       margin-bottom: 5px;
1708       white-space: nowrap;
1709     }
1710
1711     input.richtext_doedit,
1712     input.richtext_dopreview {
1713       margin-right: 10px;
1714     }
1715   }
1716 }
1717
1718 /* Rules for the user notes list */
1719
1720 .note_list {
1721   tr.creator {
1722     background-color: #eeeeee;
1723   }
1724
1725   td {
1726     padding: 3px;
1727   }
1728
1729   p {
1730     margin-bottom: 0px;
1731   }
1732 }
1733
1734 /* Rules for the notes interface */
1735
1736 .note {
1737   padding-top: 10px;
1738 }
1739
1740 .note {
1741   h2 {
1742     margin-bottom: 10px;
1743   }
1744
1745   div {
1746     margin-top: 10px;
1747   }
1748
1749   .permalink {
1750     position: absolute;
1751     top: 5px;
1752     left: 5px;
1753     min-width: 15px;
1754     min-height: 15px;
1755     background: image-url("sprite.png") 0 -45px no-repeat;
1756   }
1757
1758   .permalink span {
1759     display: none;
1760     padding-left: 20px;
1761   }
1762
1763   .permalink:hover span {
1764     display: block;
1765   }
1766
1767   .warning {
1768     display: block;
1769     background-color: #ffe0cc;
1770     padding: 4px 6px;
1771     margin-bottom: 10px;
1772   }
1773
1774   .comment_body {
1775     margin-top: 2px;
1776     margin-bottom: 2px;
1777
1778     p {
1779       margin-top: 0px;
1780       margin-bottom: 0px;
1781     }
1782   }
1783
1784   .comment {
1785     width: 100%;
1786     height: 100px;
1787   }
1788
1789   .buttons {
1790     margin-top: 5px;
1791     text-align: right;
1792   }
1793 }
1794
1795 /*
1796  * Rules for the iD editor
1797  */
1798 .id-embed {
1799   width: 100%;
1800   height: 100%;
1801 }
1802
1803 /* Rules for rotating sidebar ads */
1804 .ad-container {
1805   display: block;
1806   height: 120px;
1807   overflow: hidden;
1808   position: relative;
1809   border-bottom: 1px solid #ccc;
1810 }
1811
1812 .ads {
1813   width: 370px;
1814   position: absolute;
1815   left: 0%;
1816 }
1817
1818 .ad {
1819   float: left;
1820   height: 120px;
1821   padding: 10px;
1822   border: 0px;
1823   background: #fff;
1824 }