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