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