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