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 .message #content {
1311   max-width: 740px;
1312 }
1313
1314 .messages {
1315   width: 100%;
1316   border: 1px solid #ddd;
1317
1318   input[type="submit"] {
1319     margin: auto;
1320   }
1321   tbody tr {
1322     border-top: 1px solid #ccc;
1323   }
1324
1325   .inbox-row {
1326     background: #f8f8ff;
1327   }
1328
1329   .inbox-row-unread {
1330     background:#CBEEA7;
1331   }
1332
1333   .right {
1334     float: right;
1335   }
1336
1337   tr td,
1338   tr th {
1339     padding: $lineheight/4;
1340   }
1341   tr td {
1342     border-right: 1px solid $keyline;
1343   }
1344 }
1345
1346 .inbox-row .inbox-mark-read {
1347   display: none;
1348 }
1349
1350 .info-line {
1351   margin-bottom: $lineheight;
1352   padding: $lineheight/4 0px 4px 0px;
1353   border-bottom: 1px solid #ccc;
1354
1355   form, form div {
1356     display: inline;
1357   }
1358 }
1359
1360 .info-line .user_thumbnail_tiny {
1361   vertical-align: middle;
1362 }
1363
1364 .inbox-row-unread .inbox-mark-unread {
1365   display: none;
1366 }
1367
1368 /* Rules for "flash" notice boxes shown at the top of the content area */
1369
1370 .flash {
1371     padding: $lineheight;
1372   &#error {
1373     background-color: #ff7070;
1374   }
1375   &#warning {
1376     background-color: #ffe0cc;
1377   }
1378   &#notice {
1379     background-color: #CBEEA7;
1380   }
1381 }
1382
1383 /* Rules for highlighting fields with rails validation errors */
1384
1385 .field_with_errors {
1386   padding: 2px;
1387   background-color: #ff7070;
1388   display: table;
1389 }
1390
1391 /* Rules for rails validation error boxes */
1392
1393 #errorExplanation {
1394   width: 400px;
1395   border: 2px solid #ff7070;
1396   padding: $lineheight/2;
1397   margin-bottom: $lineheight;
1398   background-color: #f0f0f0;
1399   h2 {
1400     margin: -10px;
1401     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1402     font-weight: bold;
1403     font-size: 12px;
1404     background-color: #c00;
1405     color: #fff;
1406     text-align: left;
1407   }
1408
1409   p {
1410     color: #333;
1411     margin-bottom: 0px;
1412     padding: $lineheight/4;
1413   }
1414
1415   ul li {
1416     font-size: 12px;
1417     list-style: disc;
1418   }
1419
1420 }
1421
1422 /* Rules for forms */
1423
1424 .standard-form {
1425   fieldset {
1426     margin-bottom: $lineheight/2;
1427   }
1428   label {
1429     display: block;
1430     width: 300px;
1431     margin-bottom: $lineheight/4;
1432     font-size: $typeheight;
1433     font-weight: bold;
1434     line-height: 1.5;
1435   }
1436   .form-row {
1437     margin-bottom: $lineheight/2;
1438   }
1439   input[name=remember_me] {
1440     float: left;
1441   }
1442 }
1443
1444 #remember_me_openid {
1445   display: block;
1446 }
1447
1448 input[type="text"],
1449 input[type="email"],
1450 input[type="url"],
1451 input[type="password"],
1452 textarea {
1453   border: 1px solid #ccc;
1454   padding: 2px;
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: 0 0 $lineheight/2 0;
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 .buttons {
1569   min-width: 200px;
1570
1571   input[type="submit"],
1572   .button {
1573     box-sizing: border-box;
1574     display: inline-block;
1575     margin-bottom:0;
1576     width:50%;
1577     min-width: 0;
1578   }
1579   input:first-child,
1580   .button:first-child {
1581     border-radius:2px 0 0 2px;
1582     border-right:1px solid white;
1583   }
1584   input:last-child,
1585   .button:first-child {
1586     border-radius:0 2px 2px 0;
1587   }
1588 }
1589
1590 /* Rules for doing distinct colour of alternate table rows */
1591
1592 .table0,
1593 .item0 {
1594   background: $offwhite;
1595 }
1596
1597 .table1,
1598 .item1 {
1599   background: #fff;
1600 }
1601
1602 /* Rules for OpenID logo */
1603
1604 .openid_logo {
1605   vertical-align: text-bottom;
1606   border: 0;
1607 }
1608
1609 /* Rules for rich text */
1610
1611 .richtext {
1612   h1, h2 {
1613     padding-bottom: $lineheight/2;
1614     border-bottom: 1px dashed #cccccc;
1615     margin-bottom: $lineheight/2;
1616   }
1617
1618   h1 {
1619     font-size: 24px;
1620   }
1621
1622   h2 {
1623     font-size: 18px;
1624   }
1625
1626   h3 {
1627     font-size: $typeheight;
1628   }
1629
1630   code {
1631     font-size: 13px;
1632     background: #e8e8e8;
1633     padding: 2px 3px;
1634   }
1635
1636   pre {
1637     font-size: 13px;
1638     background: #e8e8e8;
1639     padding: 2px 3px;
1640
1641     code {
1642       padding: 0;
1643     }
1644   }
1645
1646   img {
1647     padding: $lineheight;
1648     background-color: $offwhite;
1649     display: block;
1650     max-width: 100%;
1651     margin: auto;
1652   }
1653
1654   blockquote {
1655     border-left: $lineheight solid $offwhite;
1656     padding-left: $lineheight;
1657     margin: 0;
1658     color: #7E7E7E;
1659   }
1660
1661   ul, ol {
1662     font-style: italic;
1663     padding-left: $lineheight;
1664     margin-bottom: $lineheight;
1665     margin-left: $lineheight;
1666   }
1667
1668   ul li {
1669     list-style: disc;
1670   }
1671
1672   ol li {
1673     list-style: decimal;
1674   }
1675 }
1676
1677 .diary_post .richtext {
1678     margin-top: $lineheight;
1679   }
1680
1681 .comments .richtext {
1682   margin-left: 70px;
1683   margin-top: 0;
1684 }
1685
1686 /* Rules for rich text editors */
1687
1688 .richtext_container {
1689   .richtext_content {
1690     display: inline-block;
1691     vertical-align: top;
1692
1693     .richtext_preview {
1694       display: inline-block;
1695       padding: $lineheight;
1696       background-color: $offwhite;
1697       overflow-x: auto;
1698
1699       &.loading {
1700         background-image: image-url("loading.gif");
1701         background-repeat: no-repeat;
1702         background-position: center;
1703       }
1704
1705       > :first-child {
1706         margin-top: 0px;
1707       }
1708     }
1709   }
1710
1711   .richtext_help {
1712     display: inline-block;
1713     vertical-align: top;
1714     margin-left: 15px;
1715     background-color: #f8f8ff;
1716     padding: $lineheight/2;
1717     width: 300px;
1718     max-width: 450px;
1719
1720     ul {
1721       margin-bottom: 0;
1722     }
1723
1724     h4.heading, li {
1725       border-bottom: 1px solid #ccc;
1726       margin-bottom: $lineheight/4;
1727       padding-bottom: $lineheight/4;
1728     }
1729
1730     li h4, li span, li p {
1731       display: inline-block;
1732       vertical-align: top;
1733       font-size: 11px;
1734     }
1735
1736     li h4 {
1737       width: 35%;
1738       margin: 0;
1739     }
1740
1741     li span, li p {
1742       width: 60%;
1743       margin-left: $lineheight/2;
1744       margin-bottom: $lineheight/4;
1745       white-space: nowrap;
1746     }
1747   }
1748 }
1749
1750 /* Rules for the user notes list */
1751
1752 .note_list {
1753   tr.creator {
1754     background-color: #eeeeee;
1755   }
1756
1757   td {
1758     padding: 3px;
1759   }
1760
1761   p {
1762     margin-bottom: 0px;
1763   }
1764 }
1765
1766 /* Rules for the notes interface */
1767
1768 .note {
1769   padding-top: $lineheight/2;
1770 }
1771
1772 .note {
1773   h2 {
1774     margin-bottom: $lineheight/2;
1775   }
1776
1777   div {
1778     margin-top: $lineheight/2;
1779   }
1780
1781   .permalink {
1782     position: absolute;
1783     top: $lineheight/4;
1784     left: $lineheight/4;
1785     min-width: 15px;
1786     min-height: 15px;
1787     background: image-url("sprite.png") 0 -45px no-repeat;
1788   }
1789
1790   .permalink span {
1791     display: none;
1792     padding-left: $lineheight;
1793   }
1794
1795   .permalink:hover span {
1796     display: block;
1797   }
1798
1799   .warning {
1800     display: block;
1801     background-color: #ffe0cc;
1802     padding: 4px 6px;
1803     margin-bottom: $lineheight/2;
1804   }
1805
1806   .comment_body {
1807     margin-top: 2px;
1808     margin-bottom: 2px;
1809
1810     p {
1811       margin-top: 0px;
1812       margin-bottom: 0px;
1813     }
1814   }
1815
1816   .comment {
1817     width: 100%;
1818     height: 100px;
1819   }
1820
1821   .buttons {
1822     margin-top: $lineheight/4;
1823     text-align: right;
1824   }
1825 }
1826
1827 /*
1828  * Rules for the iD editor
1829  */
1830 .id-embed {
1831   width: 100%;
1832   height: 100%;
1833 }
1834
1835 /* Rules for rotating sidebar ads */
1836 .ad-container {
1837   display: block;
1838   height: 120px;
1839   overflow: hidden;
1840   position: relative;
1841   border-bottom: 1px solid #ccc;
1842 }
1843
1844 .ads {
1845   width: 370px;
1846   position: absolute;
1847   left: 0%;
1848 }
1849
1850 .ad {
1851   float: left;
1852   height: 120px;
1853   padding: $lineheight/2;
1854   border: 0px;
1855   background: #fff;
1856 }