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