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