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