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