app/assets/stylesheets/common.css.scss

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