app/assets/stylesheets/common.css.scss

   1 /* Parameters */
   2 $lineheight: 20px;
   3 $typeheight: 14px;
   4
   5 $offwhite: #f4f4ff;
   6 $blue: #7092FF;
   7 $lightblue: #B8C5F0;
   8 $grey: #AAA;
   9 $keyline: #CCC;
  10 $hovercolor: 20%;
  11
  12 /* Styles common to large and small screens */
  13
  14 /* Minimal CSS reset */
  15
  16 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input {
  17   margin: 0;
  18   padding: 0;
  19   border: 0;
  20   font-size:100%;
  21 }
  22
  23 fieldset,img { border: 0; }
  24
  25 legend { color: #000; }
  26
  27 sup { vertical-align: text-top; }
  28
  29 sub { vertical-align: text-bottom; }
  30
  31 table {
  32   border-collapse: collapse;
  33   border-spacing: 0;
  34 }
  35
  36 li { list-style: none; }
  37
  38 input,
  39 select,
  40 textarea,
  41 body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; }
  42
  43 abbr, acronym {
  44   border-bottom: .1em dotted;
  45   cursor: help;
  46 }
  47
  48 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */
  49
  50 .clearfix:before,
  51 .clearfix:after {
  52     content: " ";
  53     display: table;
  54 }
  55
  56 .clearfix:after {
  57     clear: both;
  58 }
  59
  60 /* Default rules for the body of every page */
  61
  62 * {
  63   -moz-box-sizing: border-box;
  64   -webkit-box-sizing: border-box;
  65   box-sizing: border-box;
  66 }
  67
  68 body {
  69   font-family: 'Helvetica Neue',Arial,sans-serif;
  70   font-size: $typeheight;
  71   line-height: 1.6666;
  72   color: #222;
  73   background-color: #fff;
  74   margin: 0px;
  75   padding: 0px;
  76   text-align: left;
  77 }
  78
  79 body.slim {
  80   background-color: #f0f0f0;
  81 }
  82
  83 h1, h2, h3 {
  84   margin-top: $lineheight/2;
  85   margin-bottom: $lineheight;
  86   font-weight: bold;
  87   line-height: 1.2;
  88 }
  89
  90 h1, h2 {
  91   font-size: 32px;
  92 }
  93
  94 #content h2 {
  95   font-size: 21px;
  96 }
  97
  98 h3 {
  99   font-size: 21px;
 100   margin-top: $lineheight/2;
 101   margin-bottom: $lineheight;
 102 }
 103
 104 h4,h5,h6 {
 105   font-size: $typeheight;
 106   margin-top: $lineheight/2;
 107   margin-bottom: $lineheight/2;
 108   font-weight: bold;
 109   line-height: 1.5;
 110 }
 111
 112 p, ul {
 113   margin-bottom: $lineheight;
 114 }
 115
 116 p > img {
 117   width: auto;
 118   max-width: 100%;
 119 }
 120
 121 small, aside {
 122   font-size: 12px;
 123 }
 124
 125 h1:first-child,
 126 h2:first-child,
 127 h3:first-child,
 128 h4:first-child,
 129 h5:first-child,
 130 h6:first-child {
 131   margin-top: 0;
 132 }
 133
 134 .column-1 {
 135   width: 50%;
 136   margin: 0 0 $lineheight/2 0;
 137 }
 138
 139 .small_icon {
 140   vertical-align: middle;
 141   margin-right: $lineheight/4;
 142 }
 143
 144 /* Rules for icons */
 145
 146 .icon {
 147   display:inline-block;
 148   vertical-align:top;
 149   width:20px;
 150   height:20px;
 151   background:transparent image-url("sprite.png") no-repeat 0 0;
 152   text-indent:-9999px;
 153   overflow:hidden;
 154   }
 155
 156 .icon-pre-text {
 157     margin-right: 5px;
 158 }
 159
 160 .icon.search      { background-position: 0 0; }
 161 .icon.donate      { background-position: -20px 0; }
 162 .icon.zoomin      { background-position: -40px 0; }
 163 .icon.zoomout     { background-position: -60px 0; }
 164 .icon.geolocate   { background-position: -80px 0; }
 165 .icon.layers      { background-position: -100px 0; }
 166 .icon.key         { background-position: -120px 0; }
 167 .icon.share       { background-position: -140px 0; }
 168 .icon.clipboard   { background-position: -160px 0; }
 169 .icon.link        { background-position: -180px 0; }
 170 .icon.close       { background-position: -200px 0; }
 171 .icon.check       { background-position: -220px 0; }
 172 .icon.note        { background-position: -240px 0; }
 173
 174 /* Rules for links */
 175
 176 a {
 177   color: #00f;
 178   text-decoration: none;
 179   &:hover {
 180     text-decoration: underline;
 181   }
 182 }
 183
 184 /* Rules for horizontal lines */
 185
 186 hr {
 187   border: none;
 188   background-color: #ccc;
 189   color: #ccc;
 190   height: 1px;
 191 }
 192
 193 /* General styles for tables */
 194
 195 table {
 196   width: 100%;
 197   margin-bottom: $lineheight;
 198   th, td {
 199     text-align: left;
 200     padding: $lineheight/4;
 201     line-height: $lineheight;
 202   }
 203   th {
 204     font-weight: bold;
 205     vertical-align: top;
 206   }
 207   td {
 208     vertical-align: middle;
 209   }
 210 }
 211
 212 /* Rules for the whole left sidebar, including the logo */
 213
 214 #left {
 215   position: absolute;
 216   height: 100%;
 217   width: 185px;
 218   font-size: 11px;
 219   line-height: 1.1;
 220   z-index: 100;
 221   border-right: 1px solid #ccc;
 222 }
 223
 224 /* Rules for the OpenStreetMap logo in the top left corner */
 225
 226 #logo {
 227   display: block;
 228   width: 170px;
 229   min-width: 170px;
 230   padding: $lineheight $lineheight/4;
 231   text-align: center;
 232   margin: auto;
 233 }
 234
 235 #logo h1 {
 236   font-size: 18px;
 237   line-height: 1;
 238   text-align: center;
 239   margin: 0;
 240 }
 241
 242 #logo h2 {
 243   font-size: $lineheight/2;
 244   line-height: 15px;
 245   margin: 0;
 246 }
 247
 248 /* Rules for the site name */
 249
 250 #small-title {
 251   display: none;
 252 }
 253
 254 /* Rules for the introductory text displayed in the left sidebar to new users */
 255
 256 .sidebar-copy {
 257   padding: $lineheight/4 $lineheight/2;
 258   p {
 259     margin: $lineheight/4 0;
 260   }
 261 }
 262 .sidebar-copy.intro {
 263   border-top: 1px solid #ccc;
 264 }
 265
 266 /*
 267  * Rules for alert boxes shown in the left sidebar when important
 268  * information needs to be conveyed such as when the site is
 269  * undergoing maintenance.
 270  */
 271
 272 .sidebar-alert {
 273   padding: $lineheight/4;
 274   border-top: 1px solid #ccc;
 275   margin-top: 4px;
 276   margin-bottom: -5px;
 277   background: #e00;
 278   font-size: 12px;
 279   font-weight: bold;
 280   p {
 281     margin: $lineheight/4;
 282   }
 283 }
 284
 285 /*
 286  * Rules for notice boxes shown in the left sidebar when important, but
 287  * non-critical information needs to be conveyed such as notices about
 288  * donation drives.
 289  */
 290
 291 .sidebar-notice {
 292   padding: $lineheight/4;
 293   border-top: 1px solid #ccc;
 294   margin-top: 4px;
 295   margin-bottom: -5px;
 296   background: #ea0;
 297   font-size: 12px;
 298   p {
 299     margin: $lineheight/4;
 300   }
 301 }
 302
 303 /* Rules for the menu displayed in the left sidebar */
 304
 305 .left_menu {
 306   left: 0px;
 307   margin: 0;
 308   padding: $lineheight/4 $lineheight/2;
 309   font-size: 12px;
 310   line-height: 1.25;
 311   list-style-type: none;
 312   border-bottom: 1px solid #ccc;
 313   border-top: 1px solid #ccc;
 314   img {
 315     margin: $lineheight/2 0px;
 316   }
 317
 318   ul {
 319     padding: 0;
 320     margin: 0;
 321   }
 322
 323   li {
 324     list-style-type: none;
 325     padding: 0;
 326     margin: 0;
 327   }
 328
 329   h4 {
 330     padding: $lineheight/4 0 $lineheight/4 0;
 331     font-size: 12px;
 332     margin: 0;
 333   }
 334
 335   li:last-child h4 {
 336     padding-top: 0;
 337   }
 338 }
 339
 340 /* Rules for SOTM advert */
 341
 342 #sotm {
 343   width: 165px;
 344   margin: $lineheight/2;
 345   padding: 0px;
 346   border: 0px;
 347   background: #fff;
 348   img {
 349     width: 165px;
 350   }
 351 }
 352
 353 /*
 354  * Rules for "optional boxes" which appear in the left sidebar on
 355  * certain pages. Current users are the seach box on the main page
 356  * and the tag cloud on the traces pages.
 357  */
 358
 359 .optionalbox {
 360   left: 0px;
 361   padding: $lineheight/4 $lineheight/2;
 362   margin: $lineheight/4 0;
 363   text-align: left;
 364 }
 365
 366 /* Rules for the search box */
 367
 368 #search_field {
 369   position: relative;
 370
 371   form {
 372     width: 165px;
 373   }
 374
 375   input[type="text"] {
 376     width: 165px;
 377     padding: 3px;
 378     font-size: $typeheight;
 379     line-height: 1.1;
 380     height: 25px;
 381     padding: 2px 0px 2px $lineheight/4;
 382     box-shadow: inset #DDD 0px 1px 3px;
 383   }
 384
 385   input[type="text"]:focus {
 386     outline: none;
 387     border: 1px solid #000;
 388   }
 389
 390   input[type="submit"] {
 391     border: 0;
 392     margin: 0;
 393     padding: 0;
 394     width: 15px;
 395     height: 15px;
 396     min-width: 0;
 397     text-indent: -1000px;
 398     overflow: hidden;
 399     background: image-url("sprite.png") 0 0 no-repeat;
 400     position: absolute;
 401     top: $lineheight/4;
 402     right: $lineheight/4;
 403     cursor: pointer;
 404   }
 405 }
 406
 407 .search_help {
 408   margin: $lineheight/4 0 0 0;
 409 }
 410
 411 /* Utility for de-emphasizing content */
 412
 413 .deemphasize {
 414   color: #999;
 415   a {
 416     color: $blue;
 417   }
 418 }
 419
 420 /* Rules for donation request box */
 421
 422 a.donate {
 423   display: block;
 424   width: 163px;
 425   padding: $lineheight/4;
 426   border: 1px solid #AED1A0;
 427   background: #cbeea7;
 428   font-size: $typeheight;
 429   line-height: 1.4;
 430   text-align: center;
 431   border-radius: 2px;
 432   color: #222;
 433   margin: $lineheight/2 $lineheight/2 0px $lineheight/2;
 434
 435   &:hover {
 436     background: #9ed485;
 437     text-decoration: none;
 438   }
 439 }
 440
 441 /* Rules for Creative Commons logo button */
 442
 443 #cclogo {
 444   margin: $lineheight/2 0;
 445   float: right;
 446 }
 447
 448 /* Rules for tabbed navigation bar */
 449
 450 #top-bar {
 451   position: relative;
 452   margin-left: 185px;
 453   height: 30px;
 454   border-bottom: 1px solid #ccc;
 455   background: white;
 456   z-index: 100;
 457 }
 458
 459 .site-edit #top-bar,
 460 .site-index #top-bar,
 461 .site-export #top-bar {
 462   position: fixed;
 463   left: 0;
 464   right: 0;
 465 }
 466
 467 #tabnav {
 468   height: 29px;
 469   margin-bottom:0;
 470   overflow: hidden;
 471   li {
 472     display: inline;
 473   }
 474   a, a:link, a:visited {
 475     float: left;
 476     font-weight: bold;
 477     padding: 3px $lineheight/2;
 478     text-decoration: none;
 479     color: #333;
 480     float: left;
 481     margin-right: 1px;
 482     -webkit-transition: color 200ms ease-in;
 483        -moz-transition: color 200ms ease-in;
 484          -o-transition: color 200ms ease-in;
 485             transition: color 200ms ease-in;
 486   }
 487 }
 488
 489 .site-index #tabnav a#viewanchor,
 490 .site-edit #tabnav a#editanchor,
 491 .changeset-list #tabnav a#historyanchor,
 492 .site-export #tabnav a#exportanchor {
 493   border-bottom: 1px solid #aaa;
 494   background: #9ed485;
 495   color: #000;
 496 }
 497
 498 #tabnav a:link:hover, #tabnav a:visited:hover {
 499   text-decoration: underline;
 500 }
 501
 502 #tabnav a:link.disabled,
 503 #tabnav a:visited.disabled,
 504 #tabnav a:link:hover.disabled,
 505 #tabnav a:visited:hover.disabled {
 506   color: #ccc;
 507   cursor: default;
 508   &:hover {
 509     text-decoration: none;
 510   }
 511 }
 512
 513 /* Utility for styling notification numbers */
 514
 515 .count-number {
 516   padding: 2px $lineheight/4;
 517   border-radius: 2px;
 518   background: #d7d7ff;
 519   margin: 0 2px;
 520   font-size: 11px;
 521   color: #333;
 522 }
 523
 524 /* Rules for greeting bar in the top right corner */
 525
 526 #greeting {
 527   float: right;
 528   padding-top: 3px;
 529   margin-right: $lineheight/4;
 530 }
 531
 532 .greeting-bar-unread {
 533   font-weight: bold;
 534 }
 535
 536 /* Rules for the message shown in place of the map when javascript is disabled */
 537
 538 #noscript {
 539   z-index: 20000000;
 540   position: absolute;
 541   top: 15px;
 542   left: 15px;
 543 }
 544
 545 /* Rules for Leaflet maps */
 546
 547 .leaflet-control a {
 548   display: block;
 549   height: 40px;
 550   width: 40px;
 551   background-color: white;
 552   background-color: rgba(255,255,255,.8);
 553   border-radius: 4px;
 554   margin-bottom: 10px;
 555 }
 556
 557 .leaflet-control a:hover {
 558   background-color: white;
 559 }
 560
 561 .leaflet-control a .icon {
 562   margin: 10px;
 563 }
 564
 565 #map-ui {
 566   position: absolute;
 567   display: none;
 568   right: 0;
 569   width: 200px;
 570   height: 100%;
 571   background: white;
 572 }
 573
 574 .layers-ui {
 575   section {
 576     border-top: 1px solid #868e85;
 577     padding: 15px;
 578   }
 579
 580   li {
 581     border-radius: 4px;
 582     overflow: hidden;
 583     margin-bottom: 10px;
 584   }
 585
 586   label {
 587     display: block;
 588     padding: 5px;
 589     background-color: #868e85;
 590     cursor: pointer;
 591   }
 592
 593   li.active label {
 594     background-color: #68c879;
 595   }
 596
 597   .base-layers {
 598     .leaflet-container {
 599       width: 100%;
 600       height: 50px;
 601       cursor: pointer;
 602     }
 603   }
 604 }
 605
 606 .leaflet-control-attribution {
 607   a.disabled {
 608     color: #99c9dc;
 609     cursor: default;
 610     text-decoration: none;
 611   }
 612
 613   ul.secondary-actions {
 614     float: left;
 615     margin-right: $lineheight/4;
 616
 617     &:only-child {
 618       margin-right: 0px;
 619     }
 620   }
 621 }
 622
 623 .site-index .leaflet-top,
 624 .site-export .leaflet-top {
 625   top: $lineheight/2 !important;
 626   .leaflet-control {
 627     margin-top: 0px !important;
 628   }
 629 }
 630
 631 .site-index #map .olControlScaleLine,
 632 .site-export #map .olControlScaleLine {
 633   left: $lineheight/2 !important;
 634 }
 635
 636 .leaflet-popup-scrolled {
 637   padding-right: $lineheight;
 638   border-bottom: 0px !important;
 639   border-top: 0px !important;
 640 }
 641
 642 .leaflet-popup-content-wrapper {
 643   border-radius: 4px !important;
 644   -webkit-border-radius: 4px !important;
 645 }
 646
 647 /* Rules for edit menu */
 648
 649 .menuicon {
 650   padding: 0 $lineheight/4;
 651   font-weight: normal;
 652   display: inline-block;
 653   &:hover {
 654     text-decoration: none !important;
 655   }
 656 }
 657
 658 .menu {
 659   display: none;
 660   z-index: 10000;
 661   position: absolute;
 662   background-color: #ffffff;
 663   border: 1px solid $keyline;
 664   border-top: 0px;
 665   ul {
 666     margin: 0px;
 667   }
 668   li {
 669     padding: 2px $lineheight/4;
 670     border-top: 1px solid #eee;
 671     white-space: nowrap;
 672   }
 673 }
 674
 675 /* Rules for attribution text under the main map shown on printouts */
 676
 677 #attribution {
 678   display: none;
 679 }
 680
 681 .attribution_license,
 682 .attribution_project {
 683   text-align: left;
 684 }
 685
 686 .attribution_notice {
 687   text-align: center;
 688 }
 689
 690 /* Rules for the popout map sidebar */
 691
 692 #sidebar {
 693   display: none;
 694   position: absolute;
 695   overflow: auto;
 696   top: 0px;
 697   bottom: 0px;
 698   left: 0px;
 699   border-right: 1px solid $keyline;
 700   width: 33.3333%;
 701   .sidebar_heading {
 702     position: relative;
 703     padding: $lineheight/2 $lineheight;
 704     z-index: 9999;
 705     background: $offwhite;
 706     border-bottom: 1px solid #ccc;
 707   }
 708   h4 {
 709     margin: 0;
 710   }
 711   ul {
 712     margin-bottom: 0;
 713     &:last-child {
 714         border-bottom: 1px solid #ccc;
 715     }
 716     li {
 717       margin-bottom: $lineheight/4;
 718       &:last-child {
 719         margin-bottom: 0;
 720       }
 721     }
 722   }
 723 }
 724
 725 #sidebar_close {
 726   position: absolute;
 727   height: $lineheight;
 728   top: 0px;
 729   bottom: 0;
 730   right: $lineheight;
 731   margin: auto;
 732 }
 733
 734 #sidebar_content {
 735   position: relative;
 736   margin-bottom: 20px;
 737   width: 100%;
 738   h4 {
 739     padding: 0 $lineheight $lineheight/2 $lineheight;
 740     margin-top: $lineheight/2;
 741     margin-bottom: 0;
 742     border-bottom: 1px solid #ddd;
 743   }
 744 }
 745
 746 /* Rules for the map key which appears in the popout sidebar */
 747
 748 #mapkey {
 749   padding: $lineheight $lineheight 0 $lineheight;
 750  .mapkey-table-key img {
 751     display: block;
 752     margin-left: auto;
 753     margin-right: auto;
 754   }
 755   td {
 756     padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
 757   }
 758 }
 759
 760 /* Rules for search results which appear in the popout sidebar */
 761
 762 .search_searching {
 763   margin-top: $lineheight/4;
 764   margin-bottom: $lineheight/4;
 765 }
 766
 767 .search_results_entry {
 768   margin-bottom: 0;
 769
 770   .search_details {
 771     display: block;
 772     text-align: right;
 773   }
 774 }
 775
 776 .search_results_entry .search_searching {
 777   text-align: center;
 778   margin: $lineheight auto;
 779   width: $lineheight;
 780   display: block;
 781 }
 782
 783 ul.results-list li { border-bottom: 1px solid #ccc; }
 784
 785 .search_results_error {
 786   color: #f00;
 787 }
 788
 789 /* Rules for data browser information which appears in the popout sidebar */
 790
 791 #browse_content {
 792   position: relative;
 793   .browse_show_list.button {
 794     position: absolute;
 795     left: $lineheight;
 796     right: $lineheight;
 797     bottom: -40px;
 798     margin-bottom: 0;
 799   }
 800   a.more-details {
 801     position: absolute;
 802     top: 0;
 803     right: $lineheight;
 804   }
 805   ul li {
 806     margin-bottom: 0;
 807   }
 808 }
 809
 810 .browse_details {
 811   position: relative;
 812 }
 813
 814 .browse_status {
 815   display: none;
 816 }
 817
 818 /* Rules for export information which appears in the popout sidebar */
 819
 820 .export_bounds {
 821   text-align: center;
 822 }
 823
 824 .export_area_inputs {
 825   margin-bottom: $lineheight/2;
 826   input[type="text"] {
 827     width: 60px;
 828     margin-bottom: 5px;
 829   }
 830 }
 831
 832 .export_bound {
 833   margin: $lineheight/4;
 834 }
 835
 836 .export_details input[type="text"]#export_html_text {
 837   width: 100%;
 838 }
 839
 840 #sidebar #marker_inputs li:last-child {
 841   margin-bottom: $lineheight/2;
 842 }
 843
 844 #export_osm,
 845 #export_mapnik,
 846 #export_osmarender {
 847   display: none;
 848 }
 849
 850 /* Rules for the main content area */
 851
 852 #content {
 853   padding: $lineheight;
 854   position: relative;
 855 }
 856
 857 .site-edit #content,
 858 .site-index #content,
 859 .site-export #content {
 860   position: fixed;
 861   padding: 0;
 862   top: 30px; bottom: 0;
 863   left: 184px; right: 0;
 864   border-left: 1px solid #ccc;
 865 }
 866
 867 .wrapper {
 868   margin-left: 184px;
 869   border-left: 1px solid #ccc;
 870   text-align: left;
 871 }
 872
 873 .site-edit #content {
 874   top: 30px;
 875 }
 876
 877 #content.maximised {
 878   top: 0;
 879   left: 0;
 880   right: 0;
 881   bottom: 0;
 882   border: 0;
 883   z-index: 1000;
 884 }
 885
 886 #slim_container {
 887   width: 100%;
 888 }
 889
 890 #slim_container_content {
 891   max-width: 50em;
 892   background-color: #FFFFFF;
 893   margin: $lineheight/2 auto;
 894   padding: 3px;
 895   border-radius: 25px;
 896   -moz-border-radius: 25px;
 897   border: 1px solid #e6e6e6;
 898 }
 899
 900 #slim_content {
 901   margin: $lineheight/2;
 902   margin-top: 95px;
 903   max-width: 50em;
 904
 905   .content-heading {
 906     margin-bottom: 15px;
 907   }
 908 }
 909
 910 #slim_header {
 911   margin: 30px $lineheight/2;
 912   position: absolute;
 913   top: 0px;
 914   margin-right: $lineheight/4;
 915   img {
 916     vertical-align: middle;
 917     margin-bottom: $lineheight/4;
 918     margin-right: $lineheight/4;
 919   }
 920 }
 921
 922 .content-heading {
 923   position: relative;
 924   padding: $lineheight;
 925   background: $offwhite;
 926   h1, h2 {
 927     margin-bottom: $lineheight/2;
 928     line-height: 100%;
 929     &:last-child {
 930       margin-bottom: 0;
 931     }
 932   }
 933   p {
 934     margin-top: $lineheight/2;
 935     margin-bottom: 0px;
 936   }
 937 }
 938
 939 /* Rules for small maps in content areas */
 940
 941 .content_map {
 942   position: relative;
 943   width: 45%;
 944   height: 400px;
 945   border: 1px solid #ccc;
 946   margin-bottom: $lineheight;
 947   float: right;
 948 }
 949
 950 .content_map #small_map {
 951   height: 100%;
 952   width: 100%;
 953   margin-bottom: $lineheight;
 954 }
 955
 956 /* Rules for the home page */
 957
 958 .site-export #map,
 959 .site-index #map {
 960   position: absolute;
 961   top: 0px;
 962   bottom: 0px;
 963   left: 0px;
 964   right: 0px;
 965 }
 966
 967 /* Rules for the edit page */
 968
 969 .site-edit #map {
 970   position: absolute;
 971   top: 0px;
 972   bottom: 0px;
 973   left: 0px;
 974   right: 0px;
 975   overflow: hidden;
 976 }
 977
 978 /* Rules for the changeset list shown by the history tab etc */
 979
 980 #changeset_list {
 981   width: 100%;
 982   ul {
 983     padding: $lineheight/2 0;
 984     margin-bottom: 0px;
 985     border-top: 1px solid #ccc;
 986     &:last-child {
 987       border-bottom: 1px solid #ccc;
 988     }
 989   }
 990   .selected {
 991     background: #FFFFC0;
 992   }
 993   .date,
 994   .user {
 995     border-left: 1px solid #ccc;
 996     padding-left: $lineheight/4;
 997     margin-right: $lineheight/4;
 998   }
 999 }
1000
1001 #changeset_list_map_wrapper {
1002   position: absolute;
1003   width: 50%;
1004   height: 490px;
1005   top: 0;
1006   right: 0;
1007 }
1008
1009 #changeset_list_map_wrapper.scrolled {
1010   position: fixed;
1011 }
1012
1013 #changeset_list_map {
1014   position: absolute;
1015   bottom: $lineheight;
1016   top: $lineheight;
1017   right: $lineheight;
1018   left: $lineheight;
1019   border: 1px solid #ccc;
1020 }
1021
1022 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1023   margin-left: 93px;
1024 }
1025
1026 /* Rules for the data browser */
1027
1028 .browse-section {
1029   border-top: 1px solid #ccc;
1030   margin-top: $lineheight/2;
1031   padding-top: $lineheight/2;
1032   &:first-child {
1033     margin-top: 0;
1034   }
1035   .warning {
1036     background-color: #ffe0cc;
1037     margin: 0px;
1038     padding: 4px 6px;
1039     max-width: 100%;
1040   }
1041   h4, p {
1042     margin-bottom: $lineheight/4;
1043   }
1044   p, ul, .bbox, .geo {
1045     display: inline-block;
1046     vertical-align: top;
1047     max-width: 65%;
1048   }
1049   ul p {
1050     margin-left: 0;
1051     margin-bottom: 0;
1052   }
1053   h4 {
1054     width: 33.3333%;
1055     display: inline-block;
1056     vertical-align: top;
1057   }
1058 }
1059
1060 .bbox {
1061   div {
1062     width: 33.3333%;
1063     text-align: center;
1064     padding: $lineheight/4 0;
1065     overflow: hidden;
1066     text-overflow: ellipsis;
1067     float: left;
1068   }
1069   .max_lat,
1070   .min_lat {
1071     margin-left: auto;
1072     margin-right: auto;
1073     width: 100%;
1074   }
1075 }
1076
1077 #browse_map .geolink {
1078   display: none;
1079 }
1080
1081 #browse_map .secondary-actions {
1082   margin-bottom: $lineheight/2;
1083 }
1084
1085 /* Rules for the trace list shown by the traces tab etc */
1086
1087 #trace_list {
1088   font-size: $lineheight/2;
1089   border-width: 0px;
1090   text-align: right;
1091
1092   .trace_summary {
1093     font-size: 12px;
1094     color: gray;
1095   }
1096
1097   .trace_pending {
1098     color: red;
1099   }
1100
1101   .trace_public {
1102     color: green;
1103   }
1104
1105   .trace_identifiable {
1106     color: green;
1107   }
1108
1109   .trace_trackable {
1110     color: red;
1111   }
1112
1113   .trace_private {
1114     color: red;
1115   }
1116 }
1117
1118 /* Rules for the user profile page */
1119
1120 #userinformation {
1121
1122   min-height: 100px;
1123   .userinformation-inner {
1124     float: left;
1125   }
1126   h2 {
1127     margin-top: 0;
1128   }
1129   .user-description {
1130     width: 100%;
1131     clear: both;
1132   }
1133   .deemphasize {
1134     margin: 0;
1135   }
1136 }
1137
1138 .admin-user-info small {
1139   margin-bottom: $lineheight/2;
1140   display: inline;
1141   margin-right: $lineheight;
1142 }
1143
1144 .activity-block {
1145   clear: left;
1146   border-bottom: 1px solid #ccc;
1147   padding-bottom: $lineheight;
1148   float: left;
1149   h3 {
1150     margin-bottom: $lineheight/2;
1151   }
1152 }
1153
1154 .contact-activity {
1155   margin-top: $lineheight;
1156   width: 100%;
1157 }
1158
1159 .activity-details p {
1160   margin-left: 70px;
1161   margin-bottom: 0;
1162 }
1163
1164 #friends-container .contact-activity ul {
1165   margin-left: 70px;
1166 }
1167
1168 .user-view {
1169   p#no_home_location {
1170     margin: $lineheight;
1171   }
1172   .user_thumbnail {
1173     margin-top: $lineheight/4;
1174     float: left;
1175   }
1176 }
1177
1178 /* Rules for the user map */
1179
1180 .content_map .leaflet-popup-content {
1181   margin: $lineheight/2;
1182   min-height: 50px;
1183 }
1184
1185 /* Rules for user popups on maps */
1186
1187 .user_popup {
1188   min-width: 200px;
1189   p {
1190     padding: 0 0 5px 0;
1191     margin-top: 0 0 0 60px;
1192     font-size: 12px;
1193   }
1194   img.user_thumbnail {
1195     float: left;
1196     margin: 0 $lineheight/2 0 0;
1197   }
1198 }
1199
1200 /* Rules for the user list */
1201
1202 #user_list {
1203   font-size: $lineheight/2;
1204   width: 100%;
1205
1206   tr {
1207     vertical-align: middle;
1208   }
1209
1210   p {
1211     margin-top: 0px;
1212     margin-bottom: 0px;
1213   }
1214 }
1215
1216 #user_list_actions {
1217   float: right;
1218   margin-top: $lineheight/2;
1219 }
1220
1221 /* Rules for the diary list page */
1222
1223 .diary_entry-list img.user_thumbnail {
1224   float: left;
1225 }
1226
1227 .diary_post {
1228   max-width: 740px;
1229   position: relative;
1230   margin-top: $lineheight/2;
1231   padding-top: $lineheight;
1232   border-top: 1px solid #ccc;
1233
1234   &:first-child {
1235     margin-top: 0;
1236     border-top: 0;
1237     padding-top: 0;
1238   }
1239   h1, h2 {
1240     font-size: 21px;
1241     line-height: 1;
1242   }
1243   small.deemphasize {
1244     float: left;
1245     display: block;
1246   }
1247   ul.secondary-actions { display: inline-block;}
1248 }
1249
1250 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1251   display: inline;
1252 }
1253
1254 #content  .post_heading {
1255   margin-bottom: $lineheight;
1256   h2 {
1257     margin-top: 0;
1258     margin-bottom: $lineheight/2;
1259     font-size: 24px;
1260   }
1261 }
1262
1263 /* Rules for the diary entry page */
1264
1265 .diary_entry {
1266   #map {
1267     position: relative;
1268     width: 90%;
1269     height: 400px;
1270     border: 1px solid #ccc;
1271     display: none;
1272     margin-bottom: $lineheight;
1273   }
1274   #newcomment {
1275     border-top: 1px solid #ccc;
1276     padding-top: $lineheight;
1277     margin-top: $lineheight/2;
1278   }
1279   .comments {
1280     max-width: 740px;
1281   }
1282   .diary-comment {
1283     margin-top: $lineheight/2;
1284     border-top: 1px dashed #ccc;
1285     padding-top: $lineheight/2;
1286     &:first-child {
1287       margin-top: $lineheight;
1288       padding-top: $lineheight;
1289       border-top: 1px solid #ccc;
1290     }
1291     p {
1292       margin-bottom: $lineheight/2;
1293     }
1294     .comment-heading {
1295       margin-bottom: 0;
1296       margin-top: 0;
1297     }
1298   }
1299 }
1300
1301 .diary_entry-view img.user_thumbnail {
1302   float: left;
1303 }
1304
1305 /* Rules for the login page */
1306
1307 #login_openid_buttons {
1308   margin-bottom: 0;
1309 }
1310
1311 #login_openid_buttons li {
1312   float: left;
1313   padding: $lineheight/4 $lineheight/2;
1314 }
1315
1316 /* Rules for the account confirmation page */
1317
1318 #terms {
1319   .legale {
1320     border: 1px solid #ccc;
1321     padding: $lineheight;
1322     margin-bottom: $lineheight;
1323     overflow: auto;
1324     height: 10em;
1325
1326     &:p#last {
1327       margin-bottom: 0px;
1328     }
1329
1330     &:ol {
1331       margin-bottom: 0px;
1332     }
1333
1334     &:img {
1335       display: block;
1336       margin: $lineheight auto inherit auto;
1337     }
1338   }
1339
1340   form.sign {
1341     input[type=submit] {
1342       float: left;
1343     }
1344     #decline {
1345       background: $grey;
1346       &:hover {
1347         background: darken($grey, $hovercolor);
1348       }
1349     }
1350   }
1351   fieldset {
1352     margin-bottom: $lineheight;
1353   }
1354   #contributorGuidance {
1355     background-color: $offwhite;
1356     border-radius: 4px;
1357     -moz-border-radius: 4px;
1358   }
1359   .signing-buttons {
1360     height: 50px;
1361   }
1362 }
1363
1364 /* Rules for the account settings page */
1365
1366 #accountForm .user_map {
1367   position: relative;
1368   width: 500px;
1369   height: 400px;
1370   border: 1px solid #ccc;
1371 }
1372
1373 #accountForm .user_image {
1374   margin-bottom: 0;
1375 }
1376
1377 #accountForm #user_image {
1378   margin-left: 20px;
1379 }
1380
1381 #accountForm ul.accountImage-options {
1382   margin-left: 120px;
1383 }
1384
1385 .nohome .location {
1386   display: none;
1387 }
1388
1389 #homerow .message {
1390   display: none;
1391 }
1392
1393 .nohome .message {
1394   display: inline !important;
1395 }
1396
1397 .content_map.settings_map {
1398   width: 50%;
1399   float: none;
1400 }
1401
1402 /* Rules for the oauth settings page */
1403
1404 .oauth_clients .buttons .oauth-edit {
1405   border-radius: 2px 0 0 2px;
1406 }
1407
1408 .oauth_clients .buttons .oauth-delete {
1409   border-radius: 0 2px 2px 0;
1410 }
1411
1412 /* Rules for messages pages */
1413
1414 .messages {
1415   width: 100%;
1416   border: 1px solid #ddd;
1417
1418   input[type="submit"] {
1419     margin: auto;
1420   }
1421   tbody tr {
1422     border-top: 1px solid #ccc;
1423   }
1424
1425   .inbox-row {
1426     background: #f8f8ff;
1427   }
1428
1429   .inbox-row-unread {
1430     background:#CBEEA7;
1431   }
1432
1433   .right {
1434     float: right;
1435   }
1436
1437   tr td,
1438   tr th {
1439     padding: $lineheight/4;
1440   }
1441   p:last-child,
1442   h2:last-child,
1443   h3:last-child,
1444   ol:last-child,
1445   ul:last-child {
1446     margin-bottom:0;
1447   }
1448   tr td {
1449     height: 30px;
1450     border-right: 1px solid $keyline;
1451   }
1452 }
1453
1454 .inbox-row .inbox-mark-read {
1455   display: none;
1456 }
1457
1458 .info-line {
1459   margin-bottom: $lineheight;
1460   padding: $lineheight/4 0px 4px 0px;
1461   border-bottom: 1px solid #ccc;
1462
1463   form, form div {
1464     display: inline;
1465   }
1466 }
1467
1468 .info-line .user_thumbnail_tiny {
1469   vertical-align: middle;
1470 }
1471
1472 .inbox-mark-unread,
1473 .inbox-mark-read,
1474 .inbox-delete {
1475   width: 1%;
1476 }
1477
1478 .inbox-row-unread .inbox-mark-unread {
1479   display: none;
1480 }
1481
1482 .message-read .message-buttons {
1483   margin-top: $lineheight;
1484   padding-top: $lineheight;
1485   border-top: 1px solid $keyline;
1486 }
1487
1488 .message-read .buttons .mark-unread-button {
1489   border-radius: 0;
1490 }
1491
1492 /* Rules for "flash" notice boxes shown at the top of the content area */
1493
1494 .flash {
1495     padding: $lineheight;
1496   &#error {
1497     background-color: #ff7070;
1498   }
1499   &#warning {
1500     background-color: #ffe0cc;
1501   }
1502   &#notice {
1503     background-color: #CBEEA7;
1504   }
1505 }
1506
1507 /* Rules for highlighting fields with rails validation errors */
1508
1509 .field_with_errors {
1510   padding: 2px;
1511   background-color: #ff7070;
1512   display: table;
1513 }
1514
1515 /* Rules for rails validation error boxes */
1516
1517 #errorExplanation {
1518   width: 400px;
1519   border: 2px solid #ff7070;
1520   padding: 0 $lineheight/2;
1521   margin-bottom: $lineheight;
1522   background-color: #f0f0f0;
1523
1524   h2 {
1525     margin: 0 -10px 10px -10px;
1526     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1527     font-weight: bold;
1528     font-size: 12px;
1529     background-color: #c00;
1530     color: #fff;
1531     text-align: left;
1532   }
1533
1534   p {
1535     color: #333;
1536     margin-bottom: 0px;
1537     padding: $lineheight/4;
1538   }
1539
1540   ul {
1541     padding-left: $lineheight;
1542
1543     li {
1544       font-size: 12px;
1545       list-style: disc;
1546     }
1547   }
1548 }
1549
1550 /* Rules for forms */
1551
1552 .standard-form {
1553   fieldset {
1554     margin-bottom: $lineheight;
1555   }
1556   label.standard-label {
1557     display: block;
1558     margin-bottom: $lineheight/4;
1559     font-size: $typeheight;
1560     font-weight: bold;
1561     line-height: 1.5;
1562   }
1563   label.standard-label.secondary {
1564     display: inline-block;
1565     font-weight: normal;
1566   }
1567   .form-help {
1568     font-weight: normal;
1569   }
1570   .form-column {
1571     float: left;
1572     margin-right: 20px;
1573   }
1574   .form-divider {
1575     margin-top: $lineheight;
1576     padding-top: $lineheight;
1577     border-top: 1px solid $keyline;
1578   }
1579   .form-row {
1580     margin-bottom: $lineheight/2;
1581   }
1582   .form-list {
1583     margin-bottom: 0;
1584   }
1585   .form-list li {
1586     margin-bottom: 5px;
1587    }
1588   input[type="checkbox"],
1589   input[type="radio"] {
1590     float: left;
1591     margin-top: 5px;
1592   }
1593 }
1594
1595 #remember_me_openid {
1596   display: block;
1597 }
1598
1599 input[type="checkbox"],
1600 input[type="radio"] {
1601     margin-right: 5px;
1602 }
1603
1604 input[type="text"],
1605 input[type="email"],
1606 input[type="url"],
1607 input[type="password"],
1608 textarea {
1609   border: 1px solid #ccc;
1610   padding: 2px 5px;
1611   margin: 0;
1612   width: 200px;
1613 }
1614
1615 textarea {
1616   padding: 5px;
1617   width: 100%;
1618   height: 100% !important;
1619 }
1620
1621 /* Rules for user images */
1622
1623 img.user_image {
1624   max-width: 100px;
1625   max-height: 100px;
1626   border: 1px solid #ccc;
1627   margin-bottom: $lineheight;
1628   float: left;
1629   margin-right: $lineheight;
1630 }
1631
1632 img.user_thumbnail {
1633   max-width: 50px;
1634   max-height: 50px;
1635   border: 1px solid #ccc;
1636   margin-right: $lineheight;
1637 }
1638
1639 img.user_thumbnail_tiny {
1640   max-width: 25px;
1641   max-height: 25px;
1642   border: 1px solid #ccc;
1643 }
1644
1645 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1646
1647 .nowrap {
1648   white-space: nowrap;
1649 }
1650
1651 /* Rules for geo microformats */
1652
1653 abbr.geo {
1654   border-bottom: none;
1655 }
1656
1657 /* Rules for RSS buttons */
1658
1659 .rsssmall {
1660   position: relative;
1661   top: 5px;
1662 }
1663
1664 /* General styles for action lists / subnavs / pager navs */
1665
1666 ul.secondary-actions {
1667   font-style: normal;
1668   margin-bottom: 0;
1669   margin-left: 0;
1670   &.pager {
1671     display: inline-block;
1672     margin-right: 60px;
1673   }
1674   li {
1675     display: block;
1676     float: left;
1677     list-style: none;
1678     border-left: 1px solid #ccc;
1679     padding-left: $lineheight/4;
1680     margin-right: $lineheight/4;
1681     &:first-child {
1682       border-left: 0;
1683       padding-left: 0;
1684     }
1685     &:last-child {
1686       margin-right: 0px;
1687     }
1688   }
1689 }
1690
1691 /* Utility for managing inner content areas */
1692
1693 .inner22 { padding: $lineheight;}
1694
1695 .inner12 { padding: $lineheight/2 $lineheight;}
1696
1697 .inner11 { padding: $lineheight/2;}
1698
1699 .inner02 { padding: 0 $lineheight;}
1700
1701 /* Utility for general button styles */
1702
1703 input[type="button"],
1704 input[type="submit"],
1705 input[type="reset"],
1706 a.button {
1707   cursor: pointer;
1708   border: 0;
1709   display: inline-block;
1710   line-height: 20px;
1711   padding: $lineheight/4 $lineheight/2;
1712   min-width: 120px;
1713   margin: 0 0 $lineheight/2 0;
1714   color: white;
1715   background: $blue;
1716   text-align: center;
1717   border-radius: 2px;
1718   -moz-border-radius: 2px;
1719   &:hover {
1720     background: darken($blue, $hovercolor);
1721     text-decoration: none;
1722   }
1723   &.deemphasize {
1724     background: $lightblue;
1725     &:hover {
1726       background: darken($lightblue, $hovercolor);
1727     }
1728   }
1729   &:disabled {
1730     background: $lightblue;
1731   }
1732   &:last-child {
1733     margin-bottom: 0;
1734   }
1735 }
1736
1737 .buttons {
1738   min-width: 200px;
1739   input[type="submit"],
1740   input[type="button"],
1741   input[type="reset"],
1742   .button {
1743     box-sizing: border-box;
1744     float: left;
1745     border-radius: 0;
1746     margin:0;
1747     min-width: 100px;
1748     max-width: 150px;
1749     border-right:1px solid white;
1750   }
1751   input:first-child,
1752   .button:first-child {
1753     border-radius:2px 0 0 2px;
1754   }
1755   input:last-child,
1756   .button:last-child {
1757     border-radius:0 2px 2px 0;
1758     border-right-width: 0;
1759   }
1760   input:only-child,
1761   .button:only-child,
1762   *[value="Hide"] + input:last-child,
1763   *[value="Hide"] + .button:last-child {
1764     border-radius:2px;
1765     border-right-width: 0;
1766   }
1767     /* if a 3-button set has a hidden middle button */
1768   *[value="Hide"] + input:nth-child(3),
1769   *[value="Hide"] + .button:nth-child(3) {
1770     border-radius:0 2px 2px 0;
1771     border-right-width: 0;
1772   }
1773   /* if a 3-button set starts with a hidden button */
1774   *[value="Hide"] + input:nth-child(2):not(:last-child),
1775   *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1776     border-radius:2px 0 0 2px;
1777     border-right-width: 1px solid white;
1778   }
1779 }
1780
1781 /* Rules for doing distinct colour of alternate table rows */
1782
1783 .table0,
1784 .item0 {
1785   background: $offwhite;
1786 }
1787
1788 .table1,
1789 .item1 {
1790   background: #fff;
1791 }
1792
1793 /* Rules for OpenID logo */
1794
1795 .openid_logo {
1796   vertical-align: text-bottom;
1797   border: 0;
1798 }
1799
1800 /* Rules for rich text */
1801
1802 .richtext,
1803 .prose {
1804   h1, h2 {
1805     padding-bottom: $lineheight/2;
1806     border-bottom: 1px dashed #cccccc;
1807     margin-bottom: $lineheight/2;
1808   }
1809
1810   h1 {
1811     font-size: 24px;
1812   }
1813
1814   h2 {
1815     font-size: 18px;
1816   }
1817
1818   h3 {
1819     font-size: $typeheight;
1820   }
1821
1822   code {
1823     font-size: 13px;
1824     background: #e8e8e8;
1825     padding: 2px 3px;
1826   }
1827
1828   pre {
1829     font-size: 13px;
1830     background: #e8e8e8;
1831     padding: 2px 3px;
1832
1833     code {
1834       padding: 0;
1835     }
1836   }
1837
1838   img {
1839     padding: $lineheight;
1840     background-color: $offwhite;
1841     display: block;
1842     max-width: 100%;
1843     margin: auto;
1844   }
1845
1846   blockquote {
1847     border-left: $lineheight solid $offwhite;
1848     padding-left: $lineheight;
1849     margin: 0;
1850     color: #7E7E7E;
1851   }
1852
1853   ul, ol {
1854     font-style: italic;
1855     padding-left: $lineheight;
1856     margin-bottom: $lineheight;
1857     margin-left: $lineheight;
1858   }
1859
1860   ul li {
1861     list-style: disc;
1862   }
1863
1864   ol li {
1865     list-style: decimal;
1866   }
1867 }
1868
1869 .diary_post .richtext {
1870     margin-top: $lineheight;
1871   }
1872
1873 .comments .richtext {
1874   margin-left: 70px;
1875   margin-top: 0;
1876 }
1877
1878 /* Rules for rich text editors */
1879
1880 .richtext_container {
1881   margin-bottom: $lineheight;
1882
1883   .richtext_content {
1884     width: 50%;
1885     display: inline-block;
1886     vertical-align: top;
1887
1888     .richtext_preview {
1889       display: inline-block;
1890       padding: $lineheight;
1891       background-color: $offwhite;
1892       overflow-x: auto;
1893
1894       &.loading {
1895         background-image: image-url("loading.gif");
1896         background-repeat: no-repeat;
1897         background-position: center;
1898       }
1899
1900       > :first-child {
1901         margin-top: 0px;
1902       }
1903     }
1904   }
1905
1906   .richtext_help {
1907     display: inline-block;
1908     vertical-align: top;
1909     margin-left: 15px;
1910     background-color: #f8f8ff;
1911     padding: $lineheight/2;
1912     width: 220px;
1913
1914     ul {
1915       margin-bottom: 0;
1916     }
1917
1918     h4.heading, li {
1919       border-bottom: 1px solid #ccc;
1920       margin-bottom: $lineheight/4;
1921       padding-bottom: $lineheight/4;
1922     }
1923
1924     li h4, li span, li p {
1925       display: inline-block;
1926       vertical-align: top;
1927       font-size: 11px;
1928     }
1929
1930     li h4 {
1931       width: 40%;
1932       margin: 0;
1933     }
1934
1935     li span, li p {
1936       width: 50%;
1937       margin-left: $lineheight/2;
1938       margin-bottom: $lineheight/4;
1939       white-space: nowrap;
1940     }
1941   }
1942 }
1943
1944 /* Rules for the user notes list */
1945
1946 .note_list {
1947   tr.creator {
1948     background-color: #eeeeee;
1949   }
1950
1951   td {
1952     padding: 3px;
1953   }
1954
1955   p {
1956     margin-bottom: 0px;
1957   }
1958 }
1959
1960 /* Rules for the notes interface */
1961
1962 .leaflet-popup-content .note {
1963   padding-top: $lineheight/2;
1964 }
1965
1966 .leaflet-popup-content .note {
1967   h2 {
1968     margin-bottom: $lineheight/2;
1969   }
1970
1971   div {
1972     margin-top: $lineheight/2;
1973   }
1974
1975   .permalink {
1976     position: absolute;
1977     top: $lineheight/4;
1978     left: $lineheight/4;
1979     min-width: 15px;
1980     min-height: 15px;
1981     background: image-url("sprite.png") 0 -45px no-repeat;
1982   }
1983
1984   .permalink span {
1985     display: none;
1986     padding-left: $lineheight;
1987   }
1988
1989   .permalink:hover span {
1990     display: block;
1991   }
1992
1993   .warning {
1994     display: block;
1995     background-color: #ffe0cc;
1996     padding: 4px 6px;
1997     margin-bottom: $lineheight/2;
1998   }
1999
2000   .comment_body {
2001     margin-top: 2px;
2002     margin-bottom: 2px;
2003
2004     p {
2005       margin-top: 0px;
2006       margin-bottom: 0px;
2007     }
2008   }
2009
2010   .comment {
2011     width: 100%;
2012     height: 100px;
2013   }
2014
2015   .buttons {
2016     margin-top: $lineheight/4;
2017     text-align: right;
2018   }
2019 }
2020
2021 /*
2022  * Rules for the iD editor
2023  */
2024 .id-embed {
2025   width: 100%;
2026   height: 100%;
2027 }
2028
2029 /* Rules for rotating sidebar ads */
2030 .ad-container {
2031   display: block;
2032   height: 120px;
2033   overflow: hidden;
2034   position: relative;
2035   border-bottom: 1px solid #ccc;
2036 }
2037
2038 .ad {
2039   height: 100px;
2040   border: 0;
2041   background: #fff;
2042 }