app/assets/stylesheets/common.css.scss

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