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