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