app/assets/stylesheets/common.css.scss

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