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