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