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