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