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 p {
1299   margin-bottom: 0px;
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 .content_map.settings_map {
1315   float: none;
1316   width: 50%;
1317 }
1318
1319 /* Rules for message in/out box page */
1320
1321 .messages {
1322   width: 100%;
1323   border: 1px solid #ddd;
1324
1325   tbody tr {
1326     border-top: 1px solid #ccc;
1327   }
1328
1329   .inbox-row {
1330     background: #f8f8ff;
1331   }
1332
1333   .inbox-row-unread {
1334     background:#CBEEA7;
1335   }
1336
1337   .right {
1338     float: right;
1339   }
1340
1341   tr td,
1342   tr th {
1343     padding: $lineheight/4;
1344   }
1345 }
1346
1347 .inbox-row .inbox-mark-read {
1348   display: none;
1349 }
1350
1351 .info-line {
1352   margin-bottom: $lineheight;
1353   padding: $lineheight/4 0px 4px 0px;
1354   border-bottom: 1px solid #ccc;
1355
1356   form, form div {
1357     display: inline;
1358   }
1359 }
1360
1361 .info-line .user_thumbnail_tiny {
1362   vertical-align: middle;
1363 }
1364
1365 .inbox-row-unread .inbox-mark-unread {
1366   display: none;
1367 }
1368
1369 /* Rules for "flash" notice boxes shown at the top of the content area */
1370
1371 .flash {
1372     padding: $lineheight;
1373   &#error {
1374     background-color: #ff7070;
1375   }
1376   &#warning {
1377     background-color: #ffe0cc;
1378   }
1379   &#notice {
1380     background-color: #CBEEA7;
1381   }
1382 }
1383
1384 /* Rules for highlighting fields with rails validation errors */
1385
1386 .field_with_errors {
1387   padding: 2px;
1388   background-color: #ff7070;
1389   display: table;
1390 }
1391
1392 /* Rules for rails validation error boxes */
1393
1394 #errorExplanation {
1395   width: 400px;
1396   border: 2px solid #ff7070;
1397   padding: $lineheight/2;
1398   margin-bottom: $lineheight;
1399   background-color: #f0f0f0;
1400   h2 {
1401     margin: -10px;
1402     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1403     font-weight: bold;
1404     font-size: 12px;
1405     background-color: #c00;
1406     color: #fff;
1407     text-align: left;
1408   }
1409
1410   p {
1411     color: #333;
1412     margin-bottom: 0px;
1413     padding: $lineheight/4;
1414   }
1415
1416   ul li {
1417     font-size: 12px;
1418     list-style: disc;
1419   }
1420
1421 }
1422
1423 /* Rules for forms */
1424
1425 .standard-form {
1426   fieldset {
1427     margin-bottom: $lineheight;
1428   }
1429   label {
1430     display: block;
1431     width: 300px;
1432     margin-right: $lineheight/2;
1433     font-size: $typeheight;
1434     font-weight: bold;
1435     line-height: 1.5;
1436   }
1437   .form-row {
1438     margin-bottom: $lineheight/2;
1439   }
1440   input[name=remember_me] {
1441     float: left;
1442   }
1443 }
1444
1445 #remember_me_openid {
1446   display: block;
1447 }
1448
1449 input[type="text"],
1450 input[type="email"],
1451 input[type="url"],
1452 input[type="password"],
1453 textarea {
1454   border: 1px solid #ccc;
1455 }
1456
1457 /* Rules for user images */
1458
1459 img.user_image {
1460   max-width: 100px;
1461   max-height: 100px;
1462   border: 1px solid #ccc;
1463   margin-bottom: $lineheight;
1464   float: left;
1465   margin-right: $lineheight;
1466 }
1467
1468 img.user_thumbnail {
1469   max-width: 50px;
1470   max-height: 50px;
1471   border: 1px solid #ccc;
1472   margin-right: $lineheight;
1473 }
1474
1475 img.user_thumbnail_tiny {
1476   max-width: 25px;
1477   max-height: 25px;
1478   border: 1px solid #ccc;
1479 }
1480
1481 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1482
1483 .nowrap {
1484   white-space: nowrap;
1485 }
1486
1487 /* Rules for geo microformats */
1488
1489 abbr.geo {
1490   border-bottom: none;
1491 }
1492
1493 /* Rules for RSS buttons */
1494
1495 .rsssmall {
1496   position: relative;
1497   top: 5px;
1498 }
1499
1500 /* General styles for action lists / subnavs / pager navs */
1501
1502 ul.secondary-actions {
1503   font-style: normal;
1504   margin-bottom: 0;
1505   margin-left: 0;
1506   &.pager {
1507     display: inline-block;
1508     margin-right: 60px;
1509   }
1510   li {
1511     display: block;
1512     float: left;
1513     list-style: none;
1514     border-left: 1px solid #ccc;
1515     padding-left: $lineheight/4;
1516     margin-right: $lineheight/4;
1517     &:first-child {
1518       border-left: 0;
1519       padding-left: 0;
1520     }
1521     &:last-child {
1522       margin-right: 0px;
1523     }
1524   }
1525 }
1526
1527 /* Utility for managing inner content areas */
1528
1529 .inner22 { padding: $lineheight;}
1530
1531 .inner12 { padding: $lineheight/2 $lineheight;}
1532
1533 .inner02 { padding: 0 $lineheight;}
1534
1535 /* Utility for general button styles */
1536
1537 input[type="button"],
1538 input[type="submit"],
1539 input[type="reset"],
1540 a.button {
1541   cursor: pointer;
1542   border: 0;
1543   display: block;
1544   padding: $lineheight/4;
1545   min-width: 120px;
1546   margin-bottom: $lineheight/2;
1547   color: white;
1548   background: $blue;
1549   text-align: center;
1550   border-radius: 2px;
1551   -moz-border-radius: 2px;
1552   &:hover {
1553     background: darken($blue, $hovercolor);
1554     text-decoration: none;
1555   }
1556   &:last-child {
1557     margin-bottom: 0;
1558   }
1559 }
1560
1561 a.button.submit {
1562   background-color: #cbeea7;
1563   &:hover {
1564     background-color: #9ed485;
1565   }
1566 }
1567
1568 /* Rules for doing distinct colour of alternate table rows */
1569
1570 .table0,
1571 .item0 {
1572   background: $offwhite;
1573 }
1574
1575 .table1,
1576 .item1 {
1577   background: #fff;
1578 }
1579
1580 /* Rules for OpenID logo */
1581
1582 .openid_logo {
1583   vertical-align: text-bottom;
1584   border: 0;
1585 }
1586
1587 /* Rules for rich text */
1588
1589 .richtext {
1590   h1, h2 {
1591     padding-bottom: $lineheight/2;
1592     border-bottom: 1px dashed #cccccc;
1593     margin-bottom: $lineheight/2;
1594   }
1595
1596   h1 {
1597     font-size: 24px;
1598   }
1599
1600   h2 {
1601     font-size: 18px;
1602   }
1603
1604   h3 {
1605     font-size: $typeheight;
1606   }
1607
1608   code {
1609     font-size: 13px;
1610     background: #e8e8e8;
1611     padding: 2px 3px;
1612   }
1613
1614   pre {
1615     font-size: 13px;
1616     background: #e8e8e8;
1617     padding: 2px 3px;
1618
1619     code {
1620       padding: 0;
1621     }
1622   }
1623
1624   img {
1625     padding: $lineheight;
1626     background-color: $offwhite;
1627     display: block;
1628     max-width: 100%;
1629     margin: auto;
1630   }
1631
1632   blockquote {
1633     border-left: $lineheight solid $offwhite;
1634     padding-left: $lineheight;
1635     margin: 0;
1636     color: #7E7E7E;
1637   }
1638
1639   ul, ol {
1640     font-style: italic;
1641     padding-left: $lineheight;
1642     margin-bottom: $lineheight;
1643     margin-left: $lineheight;
1644   }
1645
1646   ul li {
1647     list-style: disc;
1648   }
1649
1650   ol li {
1651     list-style: decimal;
1652   }
1653 }
1654
1655 .diary_post .richtext {
1656     margin-top: $lineheight;
1657   }
1658
1659 .comments .richtext {
1660   margin-left: 70px;
1661   margin-top: 0;
1662 }
1663
1664 /* Rules for rich text editors */
1665
1666 .richtext_container {
1667   .richtext_content {
1668     display: inline-block;
1669     vertical-align: top;
1670
1671     .richtext_preview {
1672       display: inline-block;
1673       padding: $lineheight;
1674       background-color: $offwhite;
1675       overflow-x: auto;
1676
1677       &.loading {
1678         background-image: image-url("loading.gif");
1679         background-repeat: no-repeat;
1680         background-position: center;
1681       }
1682
1683       > :first-child {
1684         margin-top: 0px;
1685       }
1686     }
1687   }
1688
1689   .richtext_help {
1690     display: inline-block;
1691     vertical-align: top;
1692     margin-left: 15px;
1693     background-color: #f8f8ff;
1694     padding: $lineheight/2;
1695     width: 300px;
1696     max-width: 450px;
1697
1698     ul {
1699       margin-bottom: 0;
1700     }
1701
1702     h4.heading, li {
1703       border-bottom: 1px solid #ccc;
1704       margin-bottom: $lineheight/4;
1705       padding-bottom: $lineheight/4;
1706     }
1707
1708     li h4, li span, li p {
1709       display: inline-block;
1710       vertical-align: top;
1711       font-size: 11px;
1712     }
1713
1714     li h4 {
1715       width: 35%;
1716       margin: 0;
1717     }
1718
1719     li span, li p {
1720       width: 60%;
1721       margin-left: $lineheight/2;
1722       margin-bottom: $lineheight/4;
1723       white-space: nowrap;
1724     }
1725
1726     input.richtext_doedit,
1727     input.richtext_dopreview {
1728       margin-right: $lineheight/2;
1729     }
1730   }
1731
1732   .buttons input[type="submit"] {
1733     display: inline-block;
1734     margin-bottom:0;
1735     width:99px;
1736     min-width:99px;
1737   }
1738   .buttons input:first-child {
1739     border-radius:2px 0 0 2px;
1740     margin-right:1px;
1741   }
1742   .buttons input:last-child {
1743     border-radius:0 2px 2px 0;
1744   }
1745 }
1746
1747 /* Rules for the user notes list */
1748
1749 .note_list {
1750   tr.creator {
1751     background-color: #eeeeee;
1752   }
1753
1754   td {
1755     padding: 3px;
1756   }
1757
1758   p {
1759     margin-bottom: 0px;
1760   }
1761 }
1762
1763 /* Rules for the notes interface */
1764
1765 .note {
1766   padding-top: $lineheight/2;
1767 }
1768
1769 .note {
1770   h2 {
1771     margin-bottom: $lineheight/2;
1772   }
1773
1774   div {
1775     margin-top: $lineheight/2;
1776   }
1777
1778   .permalink {
1779     position: absolute;
1780     top: $lineheight/4;
1781     left: $lineheight/4;
1782     min-width: 15px;
1783     min-height: 15px;
1784     background: image-url("sprite.png") 0 -45px no-repeat;
1785   }
1786
1787   .permalink span {
1788     display: none;
1789     padding-left: $lineheight;
1790   }
1791
1792   .permalink:hover span {
1793     display: block;
1794   }
1795
1796   .warning {
1797     display: block;
1798     background-color: #ffe0cc;
1799     padding: 4px 6px;
1800     margin-bottom: $lineheight/2;
1801   }
1802
1803   .comment_body {
1804     margin-top: 2px;
1805     margin-bottom: 2px;
1806
1807     p {
1808       margin-top: 0px;
1809       margin-bottom: 0px;
1810     }
1811   }
1812
1813   .comment {
1814     width: 100%;
1815     height: 100px;
1816   }
1817
1818   .buttons {
1819     margin-top: $lineheight/4;
1820     text-align: right;
1821   }
1822 }
1823
1824 /*
1825  * Rules for the iD editor
1826  */
1827 .id-embed {
1828   width: 100%;
1829   height: 100%;
1830 }
1831
1832 /* Rules for rotating sidebar ads */
1833 .ad-container {
1834   display: block;
1835   height: 120px;
1836   overflow: hidden;
1837   position: relative;
1838   border-bottom: 1px solid #ccc;
1839 }
1840
1841 .ads {
1842   width: 370px;
1843   position: absolute;
1844   left: 0%;
1845 }
1846
1847 .ad {
1848   float: left;
1849   height: 120px;
1850   padding: $lineheight/2;
1851   border: 0px;
1852   background: #fff;
1853 }