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