app/assets/stylesheets/common.css.scss

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