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