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 #drag_box {
 762   display: inline;
 763   padding: $lineheight/2 $lineheight;
 764 }
 765
 766 #export_commit {
 767   width: 50%;
 768   margin: auto;
 769 }
 770
 771 /* Rules for the main content area */
 772
 773 #content {
 774   padding: $lineheight;
 775   position: relative;
 776 }
 777
 778 .site-edit #content,
 779 .site-index #content,
 780 .site-export #content {
 781   position: fixed;
 782   padding: 0;
 783   top: 30px; bottom: 0;
 784   left: 184px; right: 0;
 785   border-left: 1px solid #ccc;
 786 }
 787
 788 .wrapper {
 789   margin-left: 184px;
 790   border-left: 1px solid #ccc;
 791   text-align: left;
 792 }
 793
 794 .site-edit #content {
 795   top: 30px;
 796 }
 797
 798 #content.maximised {
 799   top: 0;
 800   left: 0;
 801   right: 0;
 802   bottom: 0;
 803   border: 0;
 804   z-index: 1000;
 805 }
 806
 807 #slim_container {
 808   width: 100%;
 809 }
 810
 811 #slim_container_content {
 812   max-width: 50em;
 813   background-color: #FFFFFF;
 814   margin: $lineheight/2 auto;
 815   padding: 3px;
 816   border-radius: 25px;
 817   -moz-border-radius: 25px;
 818   border: 1px solid #e6e6e6;
 819 }
 820
 821 #slim_content {
 822   margin: $lineheight/2;
 823   margin-top: 95px;
 824   max-width: 50em;
 825
 826   .content-heading {
 827     margin-bottom: 15px;
 828   }
 829 }
 830
 831 #slim_header {
 832   margin: 30px $lineheight/2;
 833   position: absolute;
 834   top: 0px;
 835   margin-right: $lineheight/4;
 836   img {
 837     vertical-align: middle;
 838     margin-bottom: $lineheight/4;
 839     margin-right: $lineheight/4;
 840   }
 841 }
 842
 843 .content-heading {
 844   position: relative;
 845   padding: $lineheight;
 846   background: $offwhite;
 847   h1, h2 {
 848     margin-bottom: $lineheight/2;
 849     line-height: 100%;
 850     &:last-child {
 851       margin-bottom: 0;
 852     }
 853   }
 854   p {
 855     margin-top: $lineheight/2;
 856     margin-bottom: 0px;
 857   }
 858 }
 859
 860 /* Rules for small maps in content areas */
 861
 862 .content_map {
 863   position: relative;
 864   width: 45%;
 865   height: 400px;
 866   border: 1px solid #ccc;
 867   margin-bottom: $lineheight;
 868   float: right;
 869 }
 870
 871 .content_map #small_map {
 872   height: 100%;
 873   width: 100%;
 874   margin-bottom: $lineheight;
 875 }
 876
 877 /* Rules for the home page */
 878
 879 .site-export #map,
 880 .site-index #map {
 881   position: absolute;
 882   top: 0px;
 883   bottom: 0px;
 884   left: 0px;
 885   right: 0px;
 886 }
 887
 888 /* Rules for the edit page */
 889
 890 .site-edit #map {
 891   position: absolute;
 892   top: 0px;
 893   bottom: 0px;
 894   left: 0px;
 895   right: 0px;
 896   overflow: hidden;
 897 }
 898
 899 /* Rules for the changeset list shown by the history tab etc */
 900
 901 #changeset_list {
 902   width: 100%;
 903   ul {
 904     padding: $lineheight/2 0;
 905     margin-bottom: 0px;
 906     border-top: 1px solid #ccc;
 907     &:last-child {
 908       border-bottom: 1px solid #ccc;
 909     }
 910   }
 911   .selected {
 912     background: #FFFFC0;
 913   }
 914   .date,
 915   .user {
 916     border-left: 1px solid #ccc;
 917     padding-left: $lineheight/4;
 918     margin-right: $lineheight/4;
 919   }
 920 }
 921
 922 #changeset_list_map_wrapper {
 923   position: absolute;
 924   width: 50%;
 925   height: 490px;
 926   top: 0;
 927   right: 0;
 928 }
 929
 930 #changeset_list_map_wrapper.scrolled {
 931   position: fixed;
 932 }
 933
 934 #changeset_list_map {
 935   position: absolute;
 936   bottom: $lineheight;
 937   top: $lineheight;
 938   right: $lineheight;
 939   left: $lineheight;
 940   border: 1px solid #ccc;
 941 }
 942
 943 #changeset_list_map_wrapper.scrolled #changeset_list_map {
 944   margin-left: 93px;
 945 }
 946
 947 /* Rules for the data browser */
 948
 949 .browse-section {
 950   border-top: 1px solid #ccc;
 951   margin-top: $lineheight/2;
 952   padding-top: $lineheight/2;
 953   &:first-child {
 954     margin-top: 0;
 955   }
 956   .warning {
 957     background-color: #ffe0cc;
 958     margin: 0px;
 959     padding: 4px 6px;
 960     max-width: 100%;
 961   }
 962   h4, p {
 963     margin-bottom: $lineheight/4;
 964   }
 965   p, ul, .bbox, .geo {
 966     display: inline-block;
 967     vertical-align: top;
 968     max-width: 65%;
 969   }
 970   ul p {
 971     margin-left: 0;
 972     margin-bottom: 0;
 973   }
 974   h4 {
 975     width: 33.3333%;
 976     display: inline-block;
 977     vertical-align: top;
 978   }
 979 }
 980
 981 .bbox {
 982   div {
 983     width: 33.3333%;
 984     text-align: center;
 985     padding: $lineheight/4 0;
 986     overflow: hidden;
 987     text-overflow: ellipsis;
 988     float: left;
 989   }
 990   .max_lat,
 991   .min_lat {
 992     margin-left: auto;
 993     margin-right: auto;
 994     width: 100%;
 995   }
 996 }
 997
 998 #browse_map .geolink {
 999   display: none;
1000 }
1001
1002 #browse_map .secondary-actions {
1003   margin-bottom: $lineheight/2;
1004 }
1005
1006 /* Rules for the trace list shown by the traces tab etc */
1007
1008 #trace_list {
1009   font-size: $lineheight/2;
1010   border-width: 0px;
1011   text-align: right;
1012
1013   .trace_summary {
1014     font-size: 12px;
1015     color: gray;
1016   }
1017
1018   .trace_pending {
1019     color: red;
1020   }
1021
1022   .trace_public {
1023     color: green;
1024   }
1025
1026   .trace_identifiable {
1027     color: green;
1028   }
1029
1030   .trace_trackable {
1031     color: red;
1032   }
1033
1034   .trace_private {
1035     color: red;
1036   }
1037 }
1038
1039 /* Rules for the user profile page */
1040
1041 #userinformation {
1042   min-height: 100px;
1043   .userinformation-inner {
1044     float: left;
1045   }
1046   h2 {
1047     margin-top: 0;
1048   }
1049   .user-description {
1050     width: 100%;
1051     clear: both;
1052   }
1053   .deemphasize {
1054     margin: 0;
1055   }
1056 }
1057
1058 .admin-user-info small {
1059   margin-bottom: $lineheight/2;
1060   display: inline;
1061   margin-right: $lineheight;
1062 }
1063
1064 .activity-block {
1065   clear: left;
1066   border-bottom: 1px solid #ccc;
1067   padding-bottom: $lineheight;
1068   float: left;
1069   h3 {
1070     margin-bottom: $lineheight/2;
1071   }
1072 }
1073
1074 .contact-activity {
1075   margin-top: $lineheight;
1076   width: 100%;
1077 }
1078
1079 .activity-details p {
1080   margin-left: 72px;
1081   margin-bottom: 0;
1082 }
1083
1084 #friends-container .contact-activity ul {
1085   margin-left: 72px;
1086   }
1087
1088 .user-view {
1089   p#no_home_location {
1090     margin: $lineheight;
1091   }
1092   .user_thumbnail {
1093     margin-top: $lineheight/4;
1094     float: left;
1095   }
1096 }
1097
1098 /* Rules for the user map */
1099
1100 .content_map .leaflet-popup-content {
1101   margin: $lineheight/2;
1102   min-height: 50px;
1103 }
1104
1105 /* Rules for user popups on maps */
1106
1107 .user_popup {
1108   min-width: 200px;
1109
1110   p {
1111     padding-top: 0;
1112     padding-bottom: 5px;
1113     margin-top: 0;
1114     margin-bottom: 0;
1115     margin-left: 60px;
1116     font-size: 12px;
1117   }
1118
1119   img.user_thumbnail {
1120     float: left;
1121     margin: 0 $lineheight/2 0 0;
1122   }
1123 }
1124
1125 /* Rules for the user list */
1126
1127 #user_list {
1128   font-size: $lineheight/2;
1129   width: 100%;
1130
1131   tr {
1132     vertical-align: middle;
1133   }
1134
1135   p {
1136     margin-top: 0px;
1137     margin-bottom: 0px;
1138   }
1139 }
1140
1141 #user_list_actions {
1142   float: right;
1143   margin-top: $lineheight/2;
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: $lineheight/2;
1156   padding-top: $lineheight;
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: $lineheight;
1181   h2 {
1182     margin-top: 0;
1183     margin-bottom: $lineheight/2;
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: $lineheight;
1198   }
1199   #newcomment {
1200     border-top: 1px solid #ccc;
1201     padding-top: $lineheight;
1202     margin-top: $lineheight/2;
1203   }
1204   .comments {
1205     max-width: 740px;
1206   }
1207   .diary-comment {
1208     margin-top: $lineheight/2;
1209     border-top: 1px dashed #ccc;
1210     padding-top: $lineheight/2;
1211     &:first-child {
1212       margin-top: $lineheight;
1213       padding-top: $lineheight;
1214       border-top: 1px solid #ccc;
1215     }
1216     p {
1217       margin-bottom: $lineheight/2;
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 {
1233   height: 56px;
1234 }
1235
1236 #login_openid_buttons li {
1237   float: left;
1238   padding: $lineheight/4 $lineheight/2;
1239 }
1240
1241 /* Rules for the account confirmation page */
1242
1243 #terms {
1244   .legale {
1245     border: 1px solid #ccc;
1246     padding: $lineheight;
1247     margin-bottom: $lineheight;
1248     overflow: auto;
1249     height: 10em;
1250
1251     &:p#last {
1252       margin-bottom: 0px;
1253     }
1254
1255     &:ol {
1256       margin-bottom: 0px;
1257     }
1258
1259     &:img {
1260       display: block;
1261       margin: $lineheight auto inherit auto;
1262     }
1263   }
1264
1265   form.sign {
1266     input[type=submit] {
1267       float: left;
1268     }
1269     #decline {
1270       background: $grey;
1271       &:hover {
1272         background: darken($grey, $hovercolor);
1273       }
1274     }
1275   }
1276   fieldset {
1277     margin-bottom: $lineheight;
1278   }
1279   #contributorGuidance {
1280     background-color: $offwhite;
1281     border-radius: 4px;
1282     -moz-border-radius: 4px;
1283   }
1284   .signing-buttons {
1285     height: 50px;
1286   }
1287 }
1288
1289 /* Rules for the account settings page */
1290
1291 #accountForm .user_map {
1292   position: relative;
1293   width: 500px;
1294   height: 400px;
1295   border: 1px solid #ccc;
1296 }
1297
1298 .accountImage-options {
1299   width: 50%;
1300   display: inline-block;
1301 }
1302
1303 .nohome .location {
1304   display: none;
1305 }
1306
1307 #homerow .message {
1308   display: none;
1309 }
1310
1311 .nohome .message {
1312   display: inline !important;
1313 }
1314
1315 .content_map.settings_map {
1316   float: none;
1317   width: 50%;
1318 }
1319
1320 /* Rules for message in/out box page */
1321
1322 .messages {
1323   width: 100%;
1324   border: 1px solid #ddd;
1325
1326   tbody tr {
1327     border-top: 1px solid #ccc;
1328   }
1329
1330   .inbox-row {
1331     background: #f8f8ff;
1332   }
1333
1334   .inbox-row-unread {
1335     background:#CBEEA7;
1336   }
1337
1338   .right {
1339     float: right;
1340   }
1341
1342   tr td,
1343   tr th {
1344     padding: $lineheight/4;
1345   }
1346 }
1347
1348 .inbox-row .inbox-mark-read {
1349   display: none;
1350 }
1351
1352 .info-line {
1353   margin-bottom: $lineheight;
1354   padding: $lineheight/4 0px 4px 0px;
1355   border-bottom: 1px solid #ccc;
1356
1357   form, form div {
1358     display: inline;
1359   }
1360 }
1361
1362 .info-line .user_thumbnail_tiny {
1363   vertical-align: middle;
1364 }
1365
1366 .inbox-row-unread .inbox-mark-unread {
1367   display: none;
1368 }
1369
1370 /* Rules for "flash" notice boxes shown at the top of the content area */
1371
1372 .flash {
1373     padding: $lineheight;
1374   &#error {
1375     background-color: #ff7070;
1376   }
1377   &#warning {
1378     background-color: #ffe0cc;
1379   }
1380   &#notice {
1381     background-color: #CBEEA7;
1382   }
1383 }
1384
1385 /* Rules for highlighting fields with rails validation errors */
1386
1387 .field_with_errors {
1388   padding: 2px;
1389   background-color: #ff7070;
1390   display: table;
1391 }
1392
1393 /* Rules for rails validation error boxes */
1394
1395 #errorExplanation {
1396   width: 400px;
1397   border: 2px solid #ff7070;
1398   padding: $lineheight/2;
1399   margin-bottom: $lineheight;
1400   background-color: #f0f0f0;
1401   h2 {
1402     margin: -10px;
1403     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1404     font-weight: bold;
1405     font-size: 12px;
1406     background-color: #c00;
1407     color: #fff;
1408     text-align: left;
1409   }
1410
1411   p {
1412     color: #333;
1413     margin-bottom: 0px;
1414     padding: $lineheight/4;
1415   }
1416
1417   ul li {
1418     font-size: 12px;
1419     list-style: disc;
1420   }
1421
1422 }
1423
1424 /* Rules for forms */
1425
1426 .standard-form {
1427   fieldset {
1428     margin-bottom: $lineheight;
1429   }
1430   label {
1431     display: block;
1432     width: 300px;
1433     margin-right: $lineheight/2;
1434     font-size: $typeheight;
1435     font-weight: bold;
1436     line-height: 1.5;
1437   }
1438   .form-row {
1439     margin-bottom: $lineheight/2;
1440   }
1441   input[name=remember_me] {
1442     float: left;
1443   }
1444 }
1445
1446 #remember_me_openid {
1447   display: block;
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: $lineheight;
1465   float: left;
1466   margin-right: $lineheight;
1467 }
1468
1469 img.user_thumbnail {
1470   max-width: 50px;
1471   max-height: 50px;
1472   border: 1px solid #ccc;
1473   margin-right: $lineheight;
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: $lineheight/4;
1517     margin-right: $lineheight/4;
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: $lineheight;}
1531
1532 .inner12 { padding: $lineheight/2 $lineheight;}
1533
1534 .inner02 { padding: 0 $lineheight;}
1535
1536 /* Utility for general button styles */
1537
1538 input[type="button"],
1539 input[type="submit"],
1540 input[type="reset"],
1541 a.button {
1542   cursor: pointer;
1543   border: 0;
1544   display: block;
1545   padding: $lineheight/4;
1546   min-width: 120px;
1547   margin-bottom: $lineheight/2;
1548   color: white;
1549   background: $blue;
1550   text-align: center;
1551   border-radius: 2px;
1552   -moz-border-radius: 2px;
1553   &:hover {
1554     background: darken($blue, $hovercolor);
1555     text-decoration: none;
1556   }
1557   &:last-child {
1558     margin-bottom: 0;
1559   }
1560 }
1561
1562 a.button.submit {
1563   background-color: #cbeea7;
1564   &:hover {
1565     background-color: #9ed485;
1566   }
1567 }
1568
1569 /* Rules for doing distinct colour of alternate table rows */
1570
1571 .table0,
1572 .item0 {
1573   background: $offwhite;
1574 }
1575
1576 .table1,
1577 .item1 {
1578   background: #fff;
1579 }
1580
1581 /* Rules for OpenID logo */
1582
1583 .openid_logo {
1584   vertical-align: text-bottom;
1585   border: 0;
1586 }
1587
1588 /* Rules for rich text */
1589
1590 .richtext {
1591   h1, h2 {
1592     padding-bottom: $lineheight/2;
1593     border-bottom: 1px dashed #cccccc;
1594     margin-bottom: $lineheight/2;
1595   }
1596
1597   h1 {
1598     font-size: 24px;
1599   }
1600
1601   h2 {
1602     font-size: 18px;
1603   }
1604
1605   h3 {
1606     font-size: $typeheight;
1607   }
1608
1609   code {
1610     font-size: 13px;
1611     background: #e8e8e8;
1612     padding: 2px 3px;
1613   }
1614
1615   pre {
1616     font-size: 13px;
1617     background: #e8e8e8;
1618     padding: 2px 3px;
1619
1620     code {
1621       padding: 0;
1622     }
1623   }
1624
1625   img {
1626     padding: $lineheight;
1627     background-color: $offwhite;
1628     display: block;
1629     max-width: 100%;
1630     margin: auto;
1631   }
1632
1633   blockquote {
1634     border-left: $lineheight solid $offwhite;
1635     padding-left: $lineheight;
1636     margin: 0;
1637     color: #7E7E7E;
1638   }
1639
1640   ul, ol {
1641     font-style: italic;
1642     padding-left: $lineheight;
1643     margin-bottom: $lineheight;
1644     margin-left: $lineheight;
1645   }
1646
1647   ul li {
1648     list-style: disc;
1649   }
1650
1651   ol li {
1652     list-style: decimal;
1653   }
1654 }
1655
1656 .diary_post .richtext {
1657     margin-top: $lineheight;
1658   }
1659
1660 .comments .richtext {
1661   margin-left: 70px;
1662   margin-top: 0;
1663 }
1664
1665 /* Rules for rich text editors */
1666
1667 .richtext_container {
1668   .richtext_content {
1669     display: inline-block;
1670     vertical-align: top;
1671
1672     .richtext_preview {
1673       display: inline-block;
1674       padding: $lineheight;
1675       background-color: $offwhite;
1676       overflow-x: auto;
1677
1678       &.loading {
1679         background-image: image-url("loading.gif");
1680         background-repeat: no-repeat;
1681         background-position: center;
1682       }
1683
1684       > :first-child {
1685         margin-top: 0px;
1686       }
1687     }
1688   }
1689
1690   .richtext_help {
1691     display: inline-block;
1692     vertical-align: top;
1693     margin-left: 15px;
1694     background-color: #f8f8ff;
1695     padding: $lineheight/2;
1696     width: 300px;
1697     max-width: 450px;
1698
1699     ul {
1700       margin-bottom: 0;
1701     }
1702
1703     h4.heading, li {
1704       border-bottom: 1px solid #ccc;
1705       margin-bottom: $lineheight/4;
1706       padding-bottom: $lineheight/4;
1707     }
1708
1709     li h4, li span, li p {
1710       display: inline-block;
1711       vertical-align: top;
1712       font-size: 11px;
1713     }
1714
1715     li h4 {
1716       width: 35%;
1717       margin: 0;
1718     }
1719
1720     li span, li p {
1721       width: 60%;
1722       margin-left: $lineheight/2;
1723       margin-bottom: $lineheight/4;
1724       white-space: nowrap;
1725     }
1726
1727     input.richtext_doedit,
1728     input.richtext_dopreview {
1729       margin-right: $lineheight/2;
1730     }
1731   }
1732
1733   .buttons input[type="submit"] {
1734     display: inline-block;
1735     margin-bottom:0;
1736     width:99px;
1737     min-width:99px;
1738   }
1739   .buttons input:first-child {
1740     border-radius:2px 0 0 2px;
1741     margin-right:1px;
1742   }
1743   .buttons input:last-child {
1744     border-radius:0 2px 2px 0;
1745   }
1746 }
1747
1748 /* Rules for the user notes list */
1749
1750 .note_list {
1751   tr.creator {
1752     background-color: #eeeeee;
1753   }
1754
1755   td {
1756     padding: 3px;
1757   }
1758
1759   p {
1760     margin-bottom: 0px;
1761   }
1762 }
1763
1764 /* Rules for the notes interface */
1765
1766 .note {
1767   padding-top: $lineheight/2;
1768 }
1769
1770 .note {
1771   h2 {
1772     margin-bottom: $lineheight/2;
1773   }
1774
1775   div {
1776     margin-top: $lineheight/2;
1777   }
1778
1779   .permalink {
1780     position: absolute;
1781     top: $lineheight/4;
1782     left: $lineheight/4;
1783     min-width: 15px;
1784     min-height: 15px;
1785     background: image-url("sprite.png") 0 -45px no-repeat;
1786   }
1787
1788   .permalink span {
1789     display: none;
1790     padding-left: $lineheight;
1791   }
1792
1793   .permalink:hover span {
1794     display: block;
1795   }
1796
1797   .warning {
1798     display: block;
1799     background-color: #ffe0cc;
1800     padding: 4px 6px;
1801     margin-bottom: $lineheight/2;
1802   }
1803
1804   .comment_body {
1805     margin-top: 2px;
1806     margin-bottom: 2px;
1807
1808     p {
1809       margin-top: 0px;
1810       margin-bottom: 0px;
1811     }
1812   }
1813
1814   .comment {
1815     width: 100%;
1816     height: 100px;
1817   }
1818
1819   .buttons {
1820     margin-top: $lineheight/4;
1821     text-align: right;
1822   }
1823 }
1824
1825 /*
1826  * Rules for the iD editor
1827  */
1828 .id-embed {
1829   width: 100%;
1830   height: 100%;
1831 }
1832
1833 /* Rules for rotating sidebar ads */
1834 .ad-container {
1835   display: block;
1836   height: 120px;
1837   overflow: hidden;
1838   position: relative;
1839   border-bottom: 1px solid #ccc;
1840 }
1841
1842 .ads {
1843   width: 370px;
1844   position: absolute;
1845   left: 0%;
1846 }
1847
1848 .ad {
1849   float: left;
1850   height: 120px;
1851   padding: $lineheight/2;
1852   border: 0px;
1853   background: #fff;
1854 }