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