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