app/assets/stylesheets/common.css.scss

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