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