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