app/assets/stylesheets/common.css.scss

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