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 /* Basic grid */
  61
  62 .col0    { float:left; width:04.1666%; }
  63 .col1    { float:left; width:08.3333%; }
  64 .col2    { float:left; width:16.6666%; }
  65 .col3    { float:left; width:25.0000%; }
  66 .col4    { float:left; width:33.3333%; }
  67 .col5    { float:left; width:41.6666%; }
  68 .col6    { float:left; width:50.0000%; }
  69 .col7    { float:left; width:58.3333%; }
  70 .col8    { float:left; width:66.6666%; }
  71 .col9    { float:left; width:75.0000%; }
  72 .col10   { float:left; width:83.3333%; }
  73 .col11   { float:left; width:91.6666%; }
  74 .col12   { width:100%; }
  75
  76 .margin0  { margin-left:04.1666%; }
  77 .margin1  { margin-left:08.3333%; }
  78 .margin2  { margin-left:16.6666%; }
  79 .margin3  { margin-left:25.0000%; }
  80 .margin4  { margin-left:33.3333%; }
  81 .margin5  { margin-left:41.6666%; }
  82 .margin6  { margin-left:50.0000%; }
  83 .margin7  { margin-left:58.3333%; }
  84 .margin8  { margin-left:66.6666%; }
  85 .margin9  { margin-left:75.0000%; }
  86 .margin10 { margin-left:83.3333%; }
  87 .margin11 { margin-left:91.6666%; }
  88 .margin12 { margin-left:100.0000%; }
  89
  90 .pad1 { padding: $lineheight/2; }
  91 .pad2 { padding: $lineheight; }
  92
  93 .fillL { background-color: white; }
  94 /* Default rules for the body of every page */
  95
  96 * {
  97   -moz-box-sizing: border-box;
  98   -webkit-box-sizing: border-box;
  99   box-sizing: border-box;
 100 }
 101
 102 body {
 103   font-family: 'Helvetica Neue',Arial,sans-serif;
 104   font-size: $typeheight;
 105   line-height: 1.6666;
 106   color: #222;
 107   background-color: #fff;
 108   margin: 0px;
 109   padding: 0px;
 110   text-align: left;
 111 }
 112
 113 body.slim {
 114   background-color: #f0f0f0;
 115 }
 116
 117 h1, h2, h3 {
 118   margin-top: $lineheight/2;
 119   margin-bottom: $lineheight;
 120   font-weight: bold;
 121   line-height: 1.2;
 122 }
 123
 124 h1, h2 {
 125   font-size: 32px;
 126 }
 127
 128 #content h2 {
 129   font-size: 21px;
 130 }
 131
 132 h3 {
 133   font-size: 21px;
 134   margin-top: $lineheight/2;
 135   margin-bottom: $lineheight;
 136 }
 137
 138 h4,h5,h6 {
 139   font-size: $typeheight;
 140   margin-top: $lineheight/2;
 141   margin-bottom: $lineheight/2;
 142   font-weight: bold;
 143   line-height: 1.5;
 144 }
 145
 146 p, ul {
 147   margin-bottom: $lineheight;
 148 }
 149
 150 p > img {
 151   width: auto;
 152   max-width: 100%;
 153 }
 154
 155 small, aside {
 156   font-size: 12px;
 157 }
 158
 159 h1:first-child,
 160 h2:first-child,
 161 h3:first-child,
 162 h4:first-child,
 163 h5:first-child,
 164 h6:first-child {
 165   margin-top: 0;
 166 }
 167
 168 .column-1 {
 169   width: 50%;
 170   margin: 0 0 $lineheight/2 0;
 171 }
 172
 173 .small_icon {
 174   vertical-align: middle;
 175   margin-right: $lineheight/4;
 176 }
 177
 178 /* Rules for icons */
 179
 180 .icon {
 181   display:inline-block;
 182   vertical-align:top;
 183   width:20px;
 184   height:20px;
 185   background:transparent image-url("sprite.png") no-repeat 0 0;
 186   text-indent:-9999px;
 187   overflow:hidden;
 188   }
 189
 190 .icon-pre-text {
 191     margin-right: 5px;
 192 }
 193
 194 .icon.search      { background-position: 0 0; }
 195 .icon.donate      { background-position: -20px 0; }
 196 .icon.zoomin      { background-position: -40px 0; }
 197 .icon.zoomout     { background-position: -60px 0; }
 198 .icon.geolocate   { background-position: -80px 0; }
 199 .active .icon.geolocate   { background-position: -80px -20px; }
 200 .icon.layers      { background-position: -100px 0; }
 201 .icon.key         { background-position: -120px 0; }
 202 .icon.share       { background-position: -140px 0; }
 203 .icon.clipboard   { background-position: -160px 0; }
 204 .icon.link        { background-position: -180px 0; }
 205 .icon.close       { background-position: -200px 0; }
 206 .icon.check       { background-position: -220px 0; }
 207 .icon.note        { background-position: -240px 0; }
 208
 209 /* Rules for links */
 210
 211 a {
 212   color: #00f;
 213   text-decoration: none;
 214   &:hover {
 215     text-decoration: underline;
 216   }
 217 }
 218
 219 /* Rules for horizontal lines */
 220
 221 hr {
 222   border: none;
 223   background-color: #ccc;
 224   color: #ccc;
 225   height: 1px;
 226 }
 227
 228 /* General styles for tables */
 229
 230 table {
 231   width: 100%;
 232   margin-bottom: $lineheight;
 233   th, td {
 234     text-align: left;
 235     padding: $lineheight/4;
 236     line-height: $lineheight;
 237   }
 238   th {
 239     font-weight: bold;
 240     vertical-align: top;
 241   }
 242   td {
 243     vertical-align: middle;
 244   }
 245 }
 246
 247 /* Rules for the whole left sidebar, including the logo */
 248
 249 #left {
 250   position: absolute;
 251   height: 100%;
 252   width: 185px;
 253   font-size: 11px;
 254   line-height: 1.1;
 255   z-index: 100;
 256   border-right: 1px solid #ccc;
 257 }
 258
 259 /* Rules for the OpenStreetMap logo in the top left corner */
 260
 261 #logo {
 262   display: block;
 263   width: 170px;
 264   min-width: 170px;
 265   padding: $lineheight $lineheight/4;
 266   text-align: center;
 267   margin: auto;
 268 }
 269
 270 #logo h1 {
 271   font-size: 18px;
 272   line-height: 1;
 273   text-align: center;
 274   margin: 0;
 275 }
 276
 277 #logo h2 {
 278   font-size: $lineheight/2;
 279   line-height: 15px;
 280   margin: 0;
 281 }
 282
 283 /* Rules for the site name */
 284
 285 #small-title {
 286   display: none;
 287
 288   img {
 289     vertical-align: text-bottom;
 290   }
 291 }
 292
 293 /* Rules for the introductory text displayed in the left sidebar to new users */
 294
 295 .sidebar-copy {
 296   padding: $lineheight/4 $lineheight/2;
 297   p {
 298     margin: $lineheight/4 0;
 299   }
 300 }
 301 .sidebar-copy.intro {
 302   border-top: 1px solid #ccc;
 303 }
 304
 305 /*
 306  * Rules for alert boxes shown in the left sidebar when important
 307  * information needs to be conveyed such as when the site is
 308  * undergoing maintenance.
 309  */
 310
 311 .sidebar-alert {
 312   padding: $lineheight/4;
 313   border-top: 1px solid #ccc;
 314   margin-top: 4px;
 315   margin-bottom: -5px;
 316   background: #e00;
 317   font-size: 12px;
 318   font-weight: bold;
 319   p {
 320     margin: $lineheight/4;
 321   }
 322 }
 323
 324 /*
 325  * Rules for notice boxes shown in the left sidebar when important, but
 326  * non-critical information needs to be conveyed such as notices about
 327  * donation drives.
 328  */
 329
 330 .sidebar-notice {
 331   padding: $lineheight/4;
 332   border-top: 1px solid #ccc;
 333   margin-top: 4px;
 334   margin-bottom: -5px;
 335   background: #ea0;
 336   font-size: 12px;
 337   p {
 338     margin: $lineheight/4;
 339   }
 340 }
 341
 342 /* Rules for the menu displayed in the left sidebar */
 343
 344 .left_menu {
 345   left: 0px;
 346   margin: 0;
 347   padding: $lineheight/4 $lineheight/2 $lineheight/2 $lineheight/2;
 348   font-size: 12px;
 349   line-height: 1.25;
 350   list-style-type: none;
 351   border-bottom: 1px solid #ccc;
 352   border-top: 1px solid #ccc;
 353   img {
 354     margin: $lineheight/2 0px;
 355   }
 356
 357   ul {
 358     padding: 0;
 359     margin: 0;
 360   }
 361
 362   li {
 363     list-style-type: none;
 364     padding: 0;
 365     margin: 0;
 366   }
 367
 368   h4 {
 369     padding: $lineheight/4 0 $lineheight/4 0;
 370     font-size: 12px;
 371     margin: 0;
 372   }
 373 }
 374
 375 /*
 376  * Rules for "optional boxes" which appear in the left sidebar on
 377  * certain pages. Current users are the seach box on the main page
 378  * and the tag cloud on the traces pages.
 379  */
 380
 381 .optionalbox {
 382   left: 0px;
 383   padding: $lineheight/4 $lineheight/2;
 384   margin: $lineheight/4 0;
 385   text-align: left;
 386 }
 387
 388 /* Rules for the search box */
 389
 390 #search_field {
 391   position: relative;
 392
 393   form {
 394     width: 165px;
 395   }
 396
 397   input[type="text"] {
 398     width: 165px;
 399     padding: 3px;
 400     font-size: $typeheight;
 401     line-height: 1.1;
 402     height: 25px;
 403     padding: 2px 0px 2px $lineheight/4;
 404     box-shadow: inset #DDD 0px 1px 3px;
 405   }
 406
 407   input[type="text"]:focus {
 408     outline: none;
 409     border: 1px solid #000;
 410   }
 411
 412   input[type="submit"] {
 413     border: 0;
 414     margin: 0;
 415     padding: 0;
 416     width: 15px;
 417     height: 15px;
 418     min-width: 0;
 419     text-indent: -1000px;
 420     overflow: hidden;
 421     background: image-url("sprite.png") -2px -2px no-repeat;
 422     position: absolute;
 423     top: $lineheight/4;
 424     right: $lineheight/4;
 425     cursor: pointer;
 426   }
 427 }
 428
 429 .search_help {
 430   margin: $lineheight/4 0 0 0;
 431 }
 432
 433 /* Utility for de-emphasizing content */
 434
 435 .deemphasize {
 436   color: #999;
 437   a {
 438     color: $blue;
 439   }
 440 }
 441
 442 /* Rules for donation request box */
 443
 444 a.donate {
 445   display: block;
 446   width: 163px;
 447   padding: $lineheight/4;
 448   border: 1px solid #AED1A0;
 449   background: #cbeea7;
 450   font-size: $typeheight;
 451   line-height: 1.4;
 452   text-align: center;
 453   border-radius: 2px;
 454   color: #222;
 455   margin: $lineheight/2 $lineheight/2 0px $lineheight/2;
 456
 457   &:hover {
 458     background: #9ed485;
 459     text-decoration: none;
 460   }
 461 }
 462
 463 /* Rules for Creative Commons logo button */
 464
 465 #cclogo {
 466   margin: $lineheight/2 0;
 467   float: right;
 468 }
 469
 470 /* Rules for tabbed navigation bar */
 471
 472 #top-bar {
 473   position: relative;
 474   margin-left: 185px;
 475   height: 30px;
 476   border-bottom: 1px solid #ccc;
 477   background: white;
 478   z-index: 100;
 479 }
 480
 481 .site-edit #top-bar,
 482 .site-index #top-bar,
 483 .site-export #top-bar {
 484   position: fixed;
 485   top: 0;
 486   left: 0;
 487   right: 0;
 488 }
 489
 490 #tabnav {
 491   height: 29px;
 492   margin-bottom:0;
 493   overflow: hidden;
 494   li {
 495     display: inline;
 496   }
 497   a, a:link, a:visited {
 498     float: left;
 499     font-weight: bold;
 500     padding: 3px $lineheight/2;
 501     text-decoration: none;
 502     color: #333;
 503     float: left;
 504     margin-right: 1px;
 505     -webkit-transition: color 200ms ease-in;
 506        -moz-transition: color 200ms ease-in;
 507          -o-transition: color 200ms ease-in;
 508             transition: color 200ms ease-in;
 509   }
 510 }
 511
 512 .site-index #tabnav a#viewanchor,
 513 .site-edit #tabnav a#editanchor,
 514 .changeset-list #tabnav a#historyanchor {
 515   border-bottom: 1px solid #aaa;
 516   background: #9ed485;
 517   color: #000;
 518 }
 519
 520 #tabnav a:link:hover, #tabnav a:visited:hover {
 521   text-decoration: underline;
 522 }
 523
 524 #tabnav a:link.disabled,
 525 #tabnav a:visited.disabled,
 526 #tabnav a:link:hover.disabled,
 527 #tabnav a:visited:hover.disabled {
 528   color: #ccc;
 529   cursor: default;
 530   &:hover {
 531     text-decoration: none;
 532   }
 533 }
 534
 535 /* Utility for styling notification numbers */
 536
 537 .count-number {
 538   padding: 2px $lineheight/4;
 539   border-radius: 2px;
 540   background: #d7d7ff;
 541   margin: 0 2px;
 542   font-size: 11px;
 543   color: #333;
 544 }
 545
 546 /* Rules for greeting bar in the top right corner */
 547
 548 #greeting {
 549   float: right;
 550   padding-top: 3px;
 551   margin-right: $lineheight/4;
 552 }
 553
 554 .greeting-bar-unread {
 555   font-weight: bold;
 556 }
 557
 558 /* Rules for the message shown in place of the map when javascript is disabled */
 559
 560 #noscript {
 561   z-index: 20000000;
 562   position: absolute;
 563   top: 15px;
 564   left: 15px;
 565 }
 566
 567 /* Rules for bootstrap tooltips */
 568
 569 .tooltip {
 570   position: absolute;
 571   display: none;
 572   color: #333;
 573   text-align: left;
 574   font-size: 12px;
 575   max-width: 250px;
 576 }
 577
 578 .tooltip.in {
 579   opacity: 0.8;
 580   z-index: 1030;
 581   height: auto;
 582   display: block;
 583 }
 584
 585 .tooltip.top {
 586   margin-top: -10px;
 587   text-align: center;
 588 }
 589
 590 .tooltip.right {
 591   margin-left: 10px;
 592 }
 593
 594 .tooltip.bottom {
 595   margin-top: 10px;
 596   text-align: center;
 597 }
 598
 599 .tooltip.left {
 600   margin-left: -10px;
 601   text-align: right;
 602 }
 603
 604 .tooltip-inner {
 605   display: inline-block;
 606   padding: 10px;
 607   font-weight: normal;
 608   background-color: white;
 609 }
 610
 611 .tooltip-arrow {
 612   position: absolute;
 613   width: 0;
 614   height: 0;
 615   border-color: transparent;
 616   border-style: solid;
 617 }
 618
 619 .tooltip.top .tooltip-arrow {
 620   bottom: -5px;
 621   left: 50%;
 622   margin-left: -5px;
 623   border-top-color: white;
 624   border-width: 5px 5px 0;
 625 }
 626
 627 .tooltip.right .tooltip-arrow {
 628   top: 50%;
 629   left: -5px;
 630   margin-top: -5px;
 631   border-right-color: white;
 632   border-width: 5px 5px 5px 0;
 633 }
 634
 635 .tooltip.left .tooltip-arrow {
 636   top: 50%;
 637   right: -5px;
 638   margin-top: -5px;
 639   border-left-color: white;
 640   border-width: 5px 0 5px 5px;
 641 }
 642
 643 .tooltip.bottom .tooltip-arrow {
 644   top: -5px;
 645   left: 50%;
 646   margin-left: -5px;
 647   border-bottom-color: white;
 648   border-width: 0 5px 5px;
 649 }
 650
 651 /* Rules for Leaflet maps */
 652
 653 .leaflet-control .control-button {
 654   display: block;
 655   height: 40px;
 656   width: 40px;
 657   background-color: #333;
 658   background-color: rgba(0,0,0,.6);
 659   -bottom: 1px solid #333;
 660   border-radius: 4px 0 0 4px;
 661   margin-bottom: 10px;
 662   outline: none;
 663
 664   &:hover {
 665     background-color: black;
 666   }
 667
 668   &.active {
 669     background-color: #9ed485;
 670   }
 671
 672   &.disabled {
 673     background-color: #333;
 674     background-color: rgba(0,0,0,.5);
 675     cursor: default;
 676   }
 677
 678   .icon {
 679     margin: 10px;
 680   }
 681 }
 682
 683 .leaflet-control .zoomin,
 684 .control-layers .control-button {
 685   margin-bottom: 0px;
 686   border-radius: 4px 0 0 0;
 687 }
 688
 689 .site .leaflet-control .zoomout,
 690 .control-key .control-button {
 691   margin-bottom: 0;
 692   border-radius: 0;
 693 }
 694
 695 .leaflet-control .zoomout, // For non-main page maps
 696 .control-locate .control-button,
 697 .control-share .control-button {
 698   border-radius: 0 0 0 4px;
 699 }
 700
 701 /* Rules for the home page */
 702
 703 .site-export #map,
 704 .site-index #map,
 705 .site-edit #map {
 706   height: 100%;
 707   overflow: hidden;
 708 }
 709
 710 #map-ui {
 711   display: none;
 712   position: relative;
 713   float: right;
 714   width: 250px;
 715   height: 100%;
 716   background: white;
 717   border-left: 1px solid #CCC;
 718   overflow: auto;
 719
 720   .section {
 721     border-bottom: 1px solid #DDD;
 722     padding: 15px;
 723   }
 724
 725   a.close-button {
 726     float: right;
 727     padding:5px;
 728     font-size:20px;
 729     line-height:10px;
 730     color:#222;
 731     border:1px solid #ddd;
 732   }
 733 }
 734
 735 .layers-ui,
 736 .share-ui {
 737   ul, li:last-child, p:last-child {
 738     margin-bottom: 0;
 739   }
 740 }
 741
 742 .layers-ui {
 743   li {
 744     border-radius: 4px;
 745     overflow: hidden;
 746     margin-bottom: 10px;
 747   }
 748
 749   label {
 750     display: block;
 751     padding: 5px 5px 5px 7px;
 752     background-color: #eee;
 753     cursor: pointer;
 754   }
 755
 756   li.active label {
 757     background-color: #ccc;
 758   }
 759
 760   .base-layers {
 761     .leaflet-container {
 762       width: 100%;
 763       height: 50px;
 764       cursor: pointer;
 765     }
 766   }
 767 }
 768
 769 .share-ui {
 770   .share-tabs {
 771     margin-bottom: 10px;
 772
 773     a {
 774       color: #fff;
 775       text-decoration: none;
 776       background-color: $lightblue;
 777       padding: 5px 10px;
 778     }
 779
 780     a:first-child {
 781       border-right: 1px solid #fff;
 782       border-radius: 4px 0 0 4px;
 783     }
 784
 785     a:last-child {
 786       border-left: 1px solid #fff;
 787       border-radius: 0 4px 4px 0;
 788     }
 789
 790     a.active {
 791       background-color: $blue;
 792     }
 793   }
 794
 795   .share-tab {
 796     display: none;
 797   }
 798
 799   .share-link {
 800     input[type=text],
 801     textarea {
 802       width: 100%;
 803       font-family: monospace;
 804       font-size: small;
 805       line-height: 1.3;
 806     }
 807   }
 808
 809   .share-image {
 810     label {
 811       margin-right: 10px;
 812     }
 813   }
 814
 815   #embed_html {
 816     resize: vertical;
 817   }
 818
 819   #mapnik_scale {
 820     width: 100px;
 821   }
 822 }
 823
 824 .leaflet-top.leaflet-right {
 825   top: $lineheight/2 !important;
 826   .leaflet-control {
 827     margin-right: 0px !important;
 828     margin-top: 0px !important;
 829   }
 830 }
 831
 832 .leaflet-popup-scrolled {
 833   padding-right: $lineheight;
 834   border-bottom: 0px !important;
 835   border-top: 0px !important;
 836 }
 837
 838 .leaflet-popup-content-wrapper {
 839   border-radius: 4px !important;
 840   -webkit-border-radius: 4px !important;
 841 }
 842
 843 /* Rules for edit menu */
 844
 845 .menuicon {
 846   padding: 0 $lineheight/4;
 847   font-weight: normal;
 848   display: inline-block;
 849   &:hover {
 850     text-decoration: none !important;
 851   }
 852 }
 853
 854 .menu {
 855   display: none;
 856   z-index: 10000;
 857   position: absolute;
 858   background-color: #ffffff;
 859   border: 1px solid $lightgrey;
 860   border-top: 0px;
 861   ul {
 862     margin: 0px;
 863   }
 864   li {
 865     padding: 2px $lineheight/4;
 866     border-top: 1px solid #eee;
 867     white-space: nowrap;
 868   }
 869 }
 870
 871 /* Rules for attribution text under the main map shown on printouts */
 872
 873 #attribution {
 874   display: none;
 875 }
 876
 877 .attribution_license,
 878 .attribution_project {
 879   text-align: left;
 880 }
 881
 882 .attribution_notice {
 883   text-align: center;
 884 }
 885
 886 /* Rules for the popout map sidebar */
 887
 888 #sidebar {
 889   display: none;
 890   position: relative;
 891   float: left;
 892   border-right: 1px solid $lightgrey;
 893   width: 33.3333%;
 894   height: 100%;
 895   ul {
 896     margin-bottom: 0;
 897     &:last-child {
 898         border-bottom: 1px solid #ccc;
 899     }
 900     li {
 901       margin-bottom: $lineheight/4;
 902       &:last-child {
 903         margin-bottom: 0;
 904       }
 905     }
 906   }
 907 }
 908
 909 .sidebar_heading {
 910   position: relative;
 911   padding: $lineheight/2 $lineheight;
 912   z-index: 9999;
 913   background: $offwhite;
 914   border-bottom: 1px solid #ccc;
 915   h4 {
 916     margin: 0;
 917   }
 918 }
 919
 920 .sidebar_close {
 921   position: absolute;
 922   height: $lineheight;
 923   top: 0px;
 924   bottom: 0;
 925   right: $lineheight;
 926   margin: auto;
 927 }
 928
 929 #sidebar_content {
 930   position: relative;
 931   margin-bottom: 20px;
 932   overflow: auto;
 933   height: 100%;
 934   width: 100%;
 935   h4 {
 936     padding: 0 $lineheight $lineheight/2 $lineheight;
 937     margin-top: $lineheight/2;
 938     margin-bottom: 0;
 939     border-bottom: 1px solid #ddd;
 940   }
 941 }
 942
 943 /* Rules for the map key which appears in the popout sidebar */
 944
 945 #mapkey {
 946  .mapkey-table-key img {
 947     display: block;
 948     margin-left: auto;
 949     margin-right: auto;
 950   }
 951   td {
 952     padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
 953   }
 954 }
 955
 956 /* Rules for search results which appear in the popout sidebar */
 957
 958 .search_searching {
 959   margin-top: $lineheight/4;
 960   margin-bottom: $lineheight/4;
 961 }
 962
 963 .search_results_entry {
 964   margin-bottom: 0;
 965
 966   .search_details {
 967     display: block;
 968     text-align: right;
 969   }
 970 }
 971
 972 .search_results_entry .search_searching {
 973   text-align: center;
 974   margin: $lineheight auto;
 975   width: $lineheight;
 976   display: block;
 977 }
 978
 979 ul.results-list li { border-bottom: 1px solid #ccc; }
 980
 981 .search_results_error {
 982   color: #f00;
 983 }
 984
 985 /* Rules for data browser information which appears in the popout sidebar */
 986
 987 #browse_content {
 988   position: relative;
 989   .browse_show_list.button {
 990     position: absolute;
 991     left: $lineheight;
 992     right: $lineheight;
 993     bottom: -40px;
 994     margin-bottom: 0;
 995   }
 996   a.more-details {
 997     position: absolute;
 998     top: 0;
 999     right: $lineheight;
1000   }
1001   ul li {
1002     margin-bottom: 0;
1003   }
1004 }
1005
1006 .browse_details {
1007   position: relative;
1008 }
1009
1010 .browse_status {
1011   display: none;
1012 }
1013
1014 /* Rules for export information which appears in the popout sidebar */
1015
1016 .export_bounds {
1017   text-align: center;
1018 }
1019
1020 .export_area_inputs {
1021   margin-bottom: $lineheight/2;
1022   input[type="text"] {
1023     width: 80px;
1024     margin-bottom: 5px;
1025   }
1026 }
1027
1028 .export_bound {
1029   margin: $lineheight/4;
1030 }
1031
1032 /* Rules for the main content area */
1033
1034 #content {
1035   position: relative;
1036 }
1037
1038 .site-edit #content,
1039 .site-index #content,
1040 .site-export #content {
1041   position: fixed;
1042   padding: 0;
1043   top: 30px; bottom: 0;
1044   left: 184px; right: 0;
1045   border-left: 1px solid #ccc;
1046 }
1047
1048 /* Overrides for pages that use new layout conventions */
1049 .site-verifysignup,
1050 .site-copyright,
1051 .site-welcome {
1052   #content {
1053     max-width: 740px;
1054   }
1055 }
1056 .user-new #content.pad2 {
1057     padding: 0;
1058   }
1059
1060 .user-new .content-heading {
1061   height: 200px;
1062 }
1063
1064 .header-illustration {
1065   background-position: 0 0;
1066   background-repeat: no-repeat;
1067   position: absolute;
1068 }
1069
1070 .header-illustration.new-user-main {
1071   height: 200px;
1072   width: 100%;
1073   left: 0;
1074   bottom: 0;
1075   background-image: image-url("sign-up-illustration.png");
1076 }
1077
1078 .header-illustration.new-user-arm {
1079   height: 110px;
1080   width: 130px;
1081   left: 260px;
1082   top: 160px;
1083   background-image: image-url("sign-up-illustration-arm.png");
1084 }
1085
1086 @media only screen and (max-width:770px) {
1087   .new-user-illustration.new-user-arm { display: none;}
1088 }
1089
1090 .wrapper {
1091   margin-left: 184px;
1092   border-left: 1px solid #ccc;
1093   text-align: left;
1094 }
1095
1096 #content.maximised {
1097   top: 0;
1098   left: 0;
1099   right: 0;
1100   bottom: 0;
1101   border: 0;
1102   z-index: 1000;
1103 }
1104
1105 #slim_container {
1106   width: 100%;
1107 }
1108
1109 #slim_container_content {
1110   max-width: 50em;
1111   background-color: #FFFFFF;
1112   margin: $lineheight/2 auto;
1113   padding: 3px;
1114   border-radius: 25px;
1115   -moz-border-radius: 25px;
1116   border: 1px solid #e6e6e6;
1117 }
1118
1119 #slim_content {
1120   margin: $lineheight/2;
1121   margin-top: 95px;
1122   max-width: 50em;
1123
1124   .content-heading {
1125     margin-bottom: 15px;
1126   }
1127 }
1128
1129 #slim_header {
1130   margin: 30px $lineheight/2;
1131   position: absolute;
1132   top: 0px;
1133   margin-right: $lineheight/4;
1134   img {
1135     vertical-align: middle;
1136     margin-bottom: $lineheight/4;
1137     margin-right: $lineheight/4;
1138   }
1139 }
1140
1141 .content-heading {
1142   position: relative;
1143   padding: $lineheight;
1144   background: $offwhite;
1145   z-index: 2;
1146   h1, h2 {
1147     margin-bottom: $lineheight/2;
1148     line-height: 100%;
1149     &:last-child {
1150       margin-bottom: 0;
1151     }
1152   }
1153   p {
1154     margin-top: $lineheight/2;
1155     margin-bottom: 0px;
1156   }
1157 }
1158
1159 /* Rules for small maps in content areas */
1160
1161 .content_map {
1162   position: relative;
1163   width: 45%;
1164   height: 400px;
1165   border: 1px solid #ccc;
1166   margin-bottom: $lineheight;
1167   float: right;
1168 }
1169
1170 .content_map #small_map {
1171   height: 100%;
1172   width: 100%;
1173   margin-bottom: $lineheight;
1174 }
1175
1176 /* Rules for the changeset list shown by the history tab etc */
1177
1178 #changeset_list {
1179   width: 100%;
1180   ul {
1181     padding: $lineheight/2 0;
1182     margin-bottom: 0px;
1183     border-top: 1px solid #ccc;
1184     &:last-child {
1185       border-bottom: 1px solid #ccc;
1186     }
1187   }
1188   .selected {
1189     background: #FFFFC0;
1190   }
1191   .date,
1192   .user {
1193     border-left: 1px solid #ccc;
1194     padding-left: $lineheight/4;
1195     margin-right: $lineheight/4;
1196   }
1197 }
1198
1199 #changeset_list_map_wrapper {
1200   position: absolute;
1201   width: 50%;
1202   height: 490px;
1203   top: 0;
1204   right: 0;
1205 }
1206
1207 #changeset_list_map_wrapper.scrolled {
1208   position: fixed;
1209 }
1210
1211 #changeset_list_map {
1212   position: absolute;
1213   bottom: $lineheight;
1214   top: $lineheight;
1215   right: $lineheight;
1216   left: $lineheight;
1217   border: 1px solid #ccc;
1218 }
1219
1220 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1221   margin-left: 93px;
1222 }
1223
1224 /* Rules for the data browser */
1225
1226 .browse-section {
1227   border-top: 1px solid #ccc;
1228   margin-top: $lineheight/2;
1229   padding-top: $lineheight/2;
1230   &:first-child {
1231     margin-top: 0;
1232   }
1233   .warning {
1234     background-color: #ffe0cc;
1235     margin: 0px;
1236     padding: 4px 6px;
1237     max-width: 100%;
1238   }
1239   h4, p {
1240     margin-bottom: $lineheight/4;
1241   }
1242   ul, .bbox, .geo {
1243     display: inline-block;
1244     vertical-align: top;
1245     max-width: 65%;
1246   }
1247   ul p {
1248     margin-left: 0;
1249     margin-bottom: 0;
1250   }
1251   h4 {
1252     float: left;
1253     width: 33.3333%;
1254     display: inline-block;
1255     vertical-align: top;
1256   }
1257 }
1258
1259 .bbox {
1260   div {
1261     width: 33.3333%;
1262     text-align: center;
1263     padding: $lineheight/4 0;
1264     overflow: hidden;
1265     text-overflow: ellipsis;
1266     float: left;
1267   }
1268   .max_lat,
1269   .min_lat {
1270     margin-left: auto;
1271     margin-right: auto;
1272     width: 100%;
1273   }
1274 }
1275
1276 #browse_map .geolink {
1277   display: none;
1278 }
1279
1280 #browse_map .secondary-actions {
1281   margin-bottom: $lineheight/2;
1282 }
1283
1284 /* Rules for the trace list shown by the traces tab etc */
1285
1286 #trace_list {
1287   font-size: $lineheight/2;
1288   border-width: 0px;
1289   text-align: right;
1290
1291   .trace_summary {
1292     font-size: 12px;
1293     color: gray;
1294   }
1295
1296   .trace_pending {
1297     color: red;
1298   }
1299
1300   .trace_public {
1301     color: green;
1302   }
1303
1304   .trace_identifiable {
1305     color: green;
1306   }
1307
1308   .trace_trackable {
1309     color: red;
1310   }
1311
1312   .trace_private {
1313     color: red;
1314   }
1315 }
1316
1317 /* Rules for the user profile page */
1318
1319 #userinformation {
1320
1321   min-height: 100px;
1322   .userinformation-inner {
1323     float: left;
1324   }
1325   h2 {
1326     margin-top: 0;
1327   }
1328   .user-description {
1329     width: 100%;
1330     clear: both;
1331   }
1332   .deemphasize {
1333     margin: 0;
1334   }
1335 }
1336
1337 .admin-user-info small {
1338   margin-bottom: $lineheight/2;
1339   display: inline;
1340   margin-right: $lineheight;
1341 }
1342
1343 .activity-block {
1344   clear: left;
1345   border-bottom: 1px solid #ccc;
1346   padding-bottom: $lineheight;
1347   float: left;
1348   h3 {
1349     margin-bottom: $lineheight/2;
1350   }
1351 }
1352
1353 .contact-activity {
1354   margin-top: $lineheight;
1355   width: 100%;
1356 }
1357
1358 .activity-details p {
1359   margin-left: 70px;
1360   margin-bottom: 0;
1361 }
1362
1363 #friends-container .contact-activity ul {
1364   margin-left: 70px;
1365 }
1366
1367 .user-view {
1368   p#no_home_location {
1369     margin: $lineheight;
1370   }
1371   .user_thumbnail {
1372     margin-top: $lineheight/4;
1373     float: left;
1374   }
1375 }
1376
1377 /* Rules for the user map */
1378
1379 .content_map .leaflet-popup-content {
1380   margin: $lineheight/2;
1381   min-height: 50px;
1382 }
1383
1384 /* Rules for user popups on maps */
1385
1386 .user_popup {
1387   min-width: 200px;
1388   p {
1389     padding: 0 0 5px 0;
1390     margin-top: 0 0 0 60px;
1391     font-size: 12px;
1392   }
1393   img.user_thumbnail {
1394     float: left;
1395     margin: 0 $lineheight/2 0 0;
1396   }
1397 }
1398
1399 /* Rules for the user list */
1400
1401 #user_list {
1402   font-size: $lineheight/2;
1403   width: 100%;
1404
1405   tr {
1406     vertical-align: middle;
1407   }
1408
1409   p {
1410     margin-top: 0px;
1411     margin-bottom: 0px;
1412   }
1413 }
1414
1415 #user_list_actions {
1416   float: right;
1417   margin-top: $lineheight/2;
1418 }
1419
1420 /* Rules for the diary list page */
1421
1422 .diary_entry-list img.user_thumbnail {
1423   float: left;
1424 }
1425
1426 .diary_post {
1427   max-width: 740px;
1428   position: relative;
1429   margin-top: $lineheight/2;
1430   padding-top: $lineheight;
1431   border-top: 1px solid #ccc;
1432
1433   &:first-child {
1434     margin-top: 0;
1435     border-top: 0;
1436     padding-top: 0;
1437   }
1438   h1, h2 {
1439     font-size: 21px;
1440     line-height: 1em;
1441   }
1442   small.deemphasize {
1443     float: left;
1444     display: block;
1445   }
1446   ul.secondary-actions { display: inline-block;}
1447 }
1448
1449 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1450   display: inline;
1451 }
1452
1453 #content  .post_heading {
1454   margin-bottom: $lineheight;
1455   h2 {
1456     margin-top: 0;
1457     margin-bottom: $lineheight/2;
1458     font-size: 24px;
1459   }
1460 }
1461
1462 /* Rules for the diary entry page */
1463
1464 .diary_entry {
1465   #map {
1466     position: relative;
1467     width: 90%;
1468     height: 400px;
1469     border: 1px solid #ccc;
1470     display: none;
1471     margin-bottom: $lineheight;
1472   }
1473   #newcomment {
1474     border-top: 1px solid #ccc;
1475     padding-top: $lineheight;
1476     margin-top: $lineheight/2;
1477   }
1478   .comments {
1479     max-width: 740px;
1480   }
1481   .diary-comment {
1482     margin-top: $lineheight/2;
1483     border-top: 1px dashed #ccc;
1484     padding-top: $lineheight/2;
1485     &:first-child {
1486       margin-top: $lineheight;
1487       padding-top: $lineheight;
1488       border-top: 1px solid #ccc;
1489     }
1490     p {
1491       margin-bottom: $lineheight/2;
1492     }
1493     .comment-heading {
1494       margin-bottom: 0;
1495       margin-top: 0;
1496     }
1497   }
1498 }
1499
1500 .diary_entry-view img.user_thumbnail {
1501   float: left;
1502 }
1503
1504 /* Rules for the log in page */
1505
1506 #login_openid_buttons {
1507   margin-bottom: 0;
1508 }
1509
1510 #login_openid_buttons li {
1511   float: left;
1512   padding: $lineheight/4 $lineheight/2;
1513 }
1514
1515 /* Rules for the account confirmation page */
1516
1517 #terms {
1518   .legale {
1519     border: 1px solid #ccc;
1520     padding: $lineheight;
1521     margin-bottom: $lineheight;
1522     overflow: auto;
1523     height: 10em;
1524
1525     &:p#last {
1526       margin-bottom: 0px;
1527     }
1528
1529     &:ol {
1530       margin-bottom: 0px;
1531     }
1532
1533     &:img {
1534       display: block;
1535       margin: $lineheight auto inherit auto;
1536     }
1537   }
1538
1539   form.sign {
1540     input[type=submit] {
1541       float: left;
1542     }
1543     #decline {
1544       background: $lightblue;
1545       &:hover {
1546         background: darken($lightblue, $hovercolor);
1547       }
1548     }
1549   }
1550   fieldset {
1551     margin-bottom: $lineheight;
1552   }
1553   #contributorGuidance {
1554     background-color: $offwhite;
1555     border-radius: 4px;
1556     -moz-border-radius: 4px;
1557   }
1558   .signing-buttons {
1559     height: 50px;
1560   }
1561 }
1562
1563 /* Rules for the account settings page */
1564
1565 #accountForm .user_map {
1566   position: relative;
1567   width: 500px;
1568   height: 400px;
1569   border: 1px solid #ccc;
1570 }
1571
1572 #accountForm .user_image {
1573   margin-bottom: 0;
1574 }
1575
1576 #accountForm #user_image {
1577   margin-left: 20px;
1578 }
1579
1580 #accountForm ul.accountImage-options {
1581   margin-left: 120px;
1582 }
1583
1584 .nohome .location {
1585   display: none;
1586 }
1587
1588 #homerow .message {
1589   display: none;
1590 }
1591
1592 .nohome .message {
1593   display: inline !important;
1594 }
1595
1596 .content_map.settings_map {
1597   width: 50%;
1598   float: none;
1599 }
1600
1601 /* Rules for the oauth settings page */
1602
1603 .oauth_clients .buttons .oauth-edit {
1604   border-radius: 2px 0 0 2px;
1605 }
1606
1607 .oauth_clients .buttons .oauth-delete {
1608   border-radius: 0 2px 2px 0;
1609 }
1610
1611 /* Rules for messages pages */
1612
1613 .messages {
1614   width: 100%;
1615   border: 1px solid #ddd;
1616
1617   input[type="submit"] {
1618     margin: auto;
1619   }
1620   tbody tr {
1621     border-top: 1px solid #ccc;
1622   }
1623
1624   .inbox-row {
1625     background: #f8f8ff;
1626   }
1627
1628   .inbox-row-unread {
1629     background:#CBEEA7;
1630   }
1631
1632   .right {
1633     float: right;
1634   }
1635
1636   tr td,
1637   tr th {
1638     padding: $lineheight/4;
1639   }
1640   p:last-child,
1641   h2:last-child,
1642   h3:last-child,
1643   ol:last-child,
1644   ul:last-child {
1645     margin-bottom:0;
1646   }
1647   tr td {
1648     height: 30px;
1649     border-right: 1px solid $lightgrey;
1650   }
1651 }
1652
1653 .inbox-row .inbox-mark-read {
1654   display: none;
1655 }
1656
1657 .info-line {
1658   margin-bottom: $lineheight;
1659   padding: $lineheight/4 0px 4px 0px;
1660   border-bottom: 1px solid #ccc;
1661
1662   form, form div {
1663     display: inline;
1664   }
1665 }
1666
1667 .info-line .user_thumbnail_tiny {
1668   vertical-align: middle;
1669 }
1670
1671 .inbox-mark-unread,
1672 .inbox-mark-read,
1673 .inbox-delete {
1674   width: 1%;
1675 }
1676
1677 .inbox-row-unread .inbox-mark-unread {
1678   display: none;
1679 }
1680
1681 .message-read .message-buttons {
1682   margin-top: $lineheight;
1683   padding-top: $lineheight;
1684   border-top: 1px solid $lightgrey;
1685 }
1686
1687 .message-read .buttons .mark-unread-button {
1688   border-radius: 0;
1689 }
1690
1691 /* Rules for "flash" notice boxes shown at the top of the content area */
1692
1693 .flash {
1694     padding: $lineheight;
1695   &#error {
1696     background-color: #ff7070;
1697   }
1698   &#warning {
1699     background-color: #ffe0cc;
1700   }
1701   &#notice {
1702     background-color: #CBEEA7;
1703   }
1704 }
1705
1706 /* Rules for highlighting fields with rails validation errors */
1707
1708 .field_with_errors {
1709   padding: 2px;
1710   background-color: #ff7070;
1711   display: table;
1712 }
1713
1714 /* Rules for rails validation error boxes */
1715
1716 #errorExplanation {
1717   width: 400px;
1718   border: 2px solid #ff7070;
1719   padding: 0 $lineheight/2;
1720   margin-bottom: $lineheight;
1721   background-color: #f0f0f0;
1722
1723   h2 {
1724     margin: 0 -10px 10px -10px;
1725     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1726     font-weight: bold;
1727     font-size: 12px;
1728     background-color: #c00;
1729     color: #fff;
1730     text-align: left;
1731   }
1732
1733   p {
1734     color: #333;
1735     margin-bottom: 0px;
1736     padding: $lineheight/4;
1737   }
1738
1739   ul {
1740     padding-left: $lineheight;
1741
1742     li {
1743       font-size: 12px;
1744       list-style: disc;
1745     }
1746   }
1747 }
1748
1749 /* Rules for forms */
1750
1751 .standard-form {
1752   fieldset {
1753     margin-bottom: $lineheight;
1754   }
1755   label.standard-label {
1756     display: block;
1757     margin-bottom: $lineheight/4;
1758     font-size: $typeheight;
1759     font-weight: bold;
1760     line-height: 1.5;
1761   }
1762   label.standard-label.secondary {
1763     display: inline-block;
1764     font-weight: normal;
1765   }
1766   .form-help {
1767     font-weight: normal;
1768   }
1769   .form-column {
1770     float: left;
1771     margin-right: 20px;
1772   }
1773   .form-divider {
1774     margin-top: $lineheight;
1775     padding-top: $lineheight;
1776     border-top: 1px solid $lightgrey;
1777   }
1778   .form-row {
1779     margin-bottom: $lineheight/2;
1780   }
1781   .form-list {
1782     margin-bottom: 0;
1783   }
1784   .form-list li {
1785     margin-bottom: 5px;
1786    }
1787   input[type="checkbox"],
1788   input[type="radio"] {
1789     float: left;
1790     margin-top: 5px;
1791   }
1792 }
1793
1794 #remember_me_openid {
1795   display: block;
1796 }
1797
1798 input[type="checkbox"],
1799 input[type="radio"] {
1800     margin-right: 5px;
1801 }
1802
1803 input[type="text"],
1804 input[type="email"],
1805 input[type="url"],
1806 input[type="password"],
1807 textarea {
1808   border: 1px solid #ccc;
1809   padding: 2px 5px;
1810   margin: 0;
1811   width: 200px;
1812 }
1813
1814 textarea {
1815   padding: 5px;
1816   width: 100%;
1817 }
1818
1819 /* Rules for user images */
1820
1821 img.user_image {
1822   max-width: 100px;
1823   max-height: 100px;
1824   border: 1px solid #ccc;
1825   margin-bottom: $lineheight;
1826   float: left;
1827   margin-right: $lineheight;
1828 }
1829
1830 img.user_thumbnail {
1831   max-width: 50px;
1832   max-height: 50px;
1833   border: 1px solid #ccc;
1834   margin-right: $lineheight;
1835 }
1836
1837 img.user_thumbnail_tiny {
1838   max-width: 25px;
1839   max-height: 25px;
1840   border: 1px solid #ccc;
1841 }
1842
1843 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1844
1845 .nowrap {
1846   white-space: nowrap;
1847 }
1848
1849 /* Rules for geo microformats */
1850
1851 abbr.geo {
1852   border-bottom: none;
1853 }
1854
1855 /* Rules for RSS buttons */
1856
1857 .rsssmall {
1858   position: relative;
1859   top: 5px;
1860 }
1861
1862 /* General styles for action lists / subnavs / pager navs */
1863
1864 ul.secondary-actions {
1865   font-style: normal;
1866   margin-bottom: 0;
1867   margin-left: 0;
1868   &.pager {
1869     display: inline-block;
1870     margin-right: 60px;
1871   }
1872   li {
1873     display: block;
1874     float: left;
1875     list-style: none;
1876     border-left: 1px solid #ccc;
1877     padding-left: $lineheight/4;
1878     margin-right: $lineheight/4;
1879     &:first-child {
1880       border-left: 0;
1881       padding-left: 0;
1882     }
1883     &:last-child {
1884       margin-right: 0px;
1885     }
1886   }
1887 }
1888
1889 /* Utility for managing inner content areas */
1890
1891 .inner22 { padding: $lineheight;}
1892
1893 .inner12 { padding: $lineheight/2 $lineheight;}
1894
1895 .inner11 { padding: $lineheight/2;}
1896
1897 .inner02 { padding: 0 $lineheight;}
1898
1899 /* Utility for general button styles */
1900
1901 input[type="button"],
1902 input[type="submit"],
1903 input[type="reset"],
1904 a.button {
1905   cursor: pointer;
1906   border: 0;
1907   display: inline-block;
1908   line-height: 20px;
1909   padding: $lineheight/4 $lineheight/2;
1910   min-height: 20px + $lineheight/2;
1911   min-width: 120px;
1912   margin: 0 0 $lineheight/2 0;
1913   color: white;
1914   background: $blue;
1915   text-align: center;
1916   border-radius: 2px;
1917   -moz-border-radius: 2px;
1918   &:hover {
1919     background: darken($blue, $hovercolor);
1920     text-decoration: none;
1921   }
1922   &.deemphasize {
1923     background: $lightblue;
1924     &:hover {
1925       background: darken($lightblue, $hovercolor);
1926     }
1927   }
1928   &:disabled {
1929     background: $lightgrey;
1930     &:hover {
1931       background: $lightgrey;
1932     }
1933   }
1934   &:last-child {
1935     margin-bottom: 0;
1936   }
1937 }
1938
1939 .buttons {
1940   min-width: 200px;
1941   input[type="submit"],
1942   input[type="button"],
1943   input[type="reset"],
1944   .button {
1945     box-sizing: border-box;
1946     float: left;
1947     border-radius: 0;
1948     margin:0;
1949     min-width: 100px;
1950     max-width: 180px;
1951     border-right:1px solid white;
1952     text-overflow: ellipsis;
1953     white-space: nowrap;
1954     overflow: hidden;
1955   }
1956   input:first-child,
1957   .button:first-child {
1958     border-radius:2px 0 0 2px;
1959   }
1960   input:last-child,
1961   .button:last-child {
1962     border-radius:0 2px 2px 0;
1963     border-right-width: 0;
1964   }
1965   input:only-child,
1966   .button:only-child,
1967   *[value="Hide"] + input:last-child,
1968   *[value="Hide"] + .button:last-child {
1969     border-radius:2px;
1970     border-right-width: 0;
1971   }
1972     /* if a 3-button set has a hidden middle button */
1973   *[value="Hide"] + input:nth-child(3),
1974   *[value="Hide"] + .button:nth-child(3) {
1975     border-radius:0 2px 2px 0;
1976     border-right-width: 0;
1977   }
1978   /* if a 3-button set starts with a hidden button */
1979   *[value="Hide"] + input:nth-child(2):not(:last-child),
1980   *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1981     border-radius:2px 0 0 2px;
1982     border-right-width: 1px solid white;
1983   }
1984 }
1985
1986 /* Rules for doing distinct colour of alternate table rows */
1987
1988 .table0,
1989 .item0 {
1990   background: $offwhite;
1991 }
1992
1993 .table1,
1994 .item1 {
1995   background: #fff;
1996 }
1997
1998 /* Rules for OpenID logo */
1999
2000 .openid_logo {
2001   vertical-align: text-bottom;
2002   border: 0;
2003 }
2004
2005 /* Rules for rich text */
2006
2007 .richtext,
2008 .prose {
2009   h1, h2 {
2010     padding-bottom: $lineheight/2;
2011     border-bottom: 1px dashed #cccccc;
2012     margin-bottom: $lineheight/2;
2013   }
2014
2015   h1 {
2016     font-size: 24px;
2017   }
2018
2019   h2 {
2020     font-size: 18px;
2021   }
2022
2023   h3 {
2024     font-size: $typeheight;
2025   }
2026
2027   code {
2028     font-size: 13px;
2029     background: #e8e8e8;
2030     padding: 2px 3px;
2031   }
2032
2033   pre {
2034     font-size: 13px;
2035     background: #e8e8e8;
2036     padding: 2px 3px;
2037
2038     code {
2039       padding: 0;
2040     }
2041   }
2042
2043   img {
2044     padding: $lineheight;
2045     background-color: $offwhite;
2046     display: block;
2047     max-width: 100%;
2048     margin: auto;
2049   }
2050
2051   blockquote {
2052     border-left: $lineheight solid $offwhite;
2053     padding-left: $lineheight;
2054     margin: 0;
2055     color: #7E7E7E;
2056   }
2057
2058   ul, ol {
2059     padding-left: $lineheight;
2060     margin-bottom: $lineheight;
2061     margin-left: $lineheight;
2062   }
2063
2064   ul li {
2065     list-style: disc;
2066   }
2067
2068   ol li {
2069     list-style: decimal;
2070   }
2071 }
2072
2073 .diary_post .richtext {
2074     margin-top: $lineheight;
2075   }
2076
2077 .comments .richtext {
2078   margin-left: 70px;
2079   margin-top: 0;
2080 }
2081
2082 /* Rules for rich text editors */
2083
2084 .richtext_container {
2085   margin-bottom: $lineheight;
2086
2087   .richtext_content {
2088     width: 50%;
2089     display: inline-block;
2090     vertical-align: top;
2091
2092     .richtext_preview {
2093       display: inline-block;
2094       padding: $lineheight;
2095       background-color: $offwhite;
2096       overflow-x: auto;
2097
2098       &.loading {
2099         background-image: image-url("loading.gif");
2100         background-repeat: no-repeat;
2101         background-position: center;
2102       }
2103
2104       > :first-child {
2105         margin-top: 0px;
2106       }
2107     }
2108   }
2109
2110   .richtext_help {
2111     display: inline-block;
2112     vertical-align: top;
2113     margin-left: 15px;
2114     background-color: #f8f8ff;
2115     padding: $lineheight/2;
2116     width: 220px;
2117
2118     ul {
2119       margin-bottom: 0;
2120     }
2121
2122     h4.heading, li {
2123       border-bottom: 1px solid #ccc;
2124       margin-bottom: $lineheight/4;
2125       padding-bottom: $lineheight/4;
2126     }
2127
2128     li h4, li span, li p {
2129       display: inline-block;
2130       vertical-align: top;
2131       font-size: 11px;
2132     }
2133
2134     li h4 {
2135       width: 40%;
2136       margin: 0;
2137     }
2138
2139     li span, li p {
2140       width: 50%;
2141       margin-left: $lineheight/2;
2142       margin-bottom: $lineheight/4;
2143       white-space: nowrap;
2144     }
2145   }
2146 }
2147
2148 /* Rules for the user notes list */
2149
2150 .note_list {
2151   tr.creator {
2152     background-color: #eeeeee;
2153   }
2154
2155   td {
2156     padding: 3px;
2157   }
2158
2159   p {
2160     margin-bottom: 0px;
2161   }
2162 }
2163
2164 /* Rules for the notes interface */
2165
2166 .leaflet-popup-content .note {
2167   padding-top: $lineheight/2;
2168 }
2169
2170 .leaflet-popup-content .note {
2171   h2 {
2172     margin-bottom: $lineheight/2;
2173   }
2174
2175   div {
2176     margin-top: $lineheight/2;
2177   }
2178
2179   .permalink {
2180     position: absolute;
2181     top: $lineheight/4;
2182     left: $lineheight/4;
2183     min-width: 15px;
2184     min-height: 15px;
2185   }
2186
2187   .permalink span {
2188     display: none;
2189     padding-left: $lineheight;
2190   }
2191
2192   .permalink:hover span {
2193     display: block;
2194   }
2195
2196   .warning {
2197     display: block;
2198     background-color: #ffe0cc;
2199     padding: 4px 6px;
2200     margin-bottom: $lineheight/2;
2201   }
2202
2203   .comment_body {
2204     margin-top: 2px;
2205     margin-bottom: 2px;
2206
2207     p {
2208       margin-top: 0px;
2209       margin-bottom: 0px;
2210     }
2211   }
2212
2213   .comment {
2214     width: 100%;
2215     height: 100px;
2216   }
2217
2218   .buttons {
2219     margin-top: $lineheight/4;
2220     text-align: right;
2221   }
2222 }
2223
2224 /*
2225  * Rules for the iD editor
2226  */
2227
2228 .site-edit-id {
2229   #left,
2230   #large-title {
2231     display: none;
2232   }
2233
2234   #small-title {
2235     display: inline-block;
2236     width: 185px;
2237     height: 30px;
2238     font-size: 14px;
2239     margin: 0;
2240     background-color: #eee;
2241     border-bottom: 1px solid #ccc;
2242     text-align: center;
2243     padding-top: 7px;
2244   }
2245
2246   #content {
2247     left: 0;
2248   }
2249 }
2250
2251 .id-embed {
2252   width: 100%;
2253   height: 100%;
2254 }
2255
2256 /* Rules for rotating sidebar ads */
2257 .ad-container {
2258   display: block;
2259   height: 120px;
2260   overflow: hidden;
2261   position: relative;
2262   border-bottom: 1px solid #ccc;
2263 }
2264
2265 .ad {
2266   height: 100px;
2267   border: 0;
2268   background: #fff;
2269 }
2270
2271 /* Rules for the "Verify signup" page */
2272 .site-verifysignup .content-heading {
2273   height: 200px;
2274 }
2275
2276 .header-illustration.verify-main {
2277   background-position: 0 0;
2278   background-repeat: no-repeat;
2279   position: absolute;
2280 }
2281
2282 .header-illustration.verify-main {
2283   height: 200px;
2284   width: 100%;
2285   left: 0;
2286   bottom: 0;
2287   background-image: image-url("verify-illustration.png");
2288 }
2289
2290 /* Rules for the "Welcome" page */
2291 .site-welcome {
2292   .center {
2293     text-align: center;
2294     .sprite {
2295       float: none;
2296       margin: auto;
2297     }
2298   }
2299
2300   .drop {
2301     margin-top: 20px;
2302   }
2303
2304   .sprite {
2305     background-image: image-url("welcome-sprite.png");
2306     background-size: 500px 250px;
2307     display: block;
2308     float: left;
2309   }
2310
2311   .icon-list {
2312     padding-bottom: 20px;
2313   div {
2314     margin-bottom: 10px;
2315       p {
2316         padding-top: 10px;
2317       }
2318     }
2319   }
2320   .sprite.small {
2321     width: 50px;
2322     height: 50px;
2323   }
2324
2325   .sprite.x {
2326     background-position: -50px 0;
2327   }
2328
2329   .sprite.term {
2330     margin-right: 10px;
2331     vertical-align: middle;
2332   }
2333
2334   .sprite.node {
2335     background-position: -100px 0;
2336   }
2337
2338   .sprite.way {
2339     background-position: -150px 0;
2340   }
2341
2342   .sprite.changeset {
2343     background-position: -200px 0;
2344   }
2345
2346   .sprite.editor {
2347     background-position: -250px 0;
2348   }
2349
2350   .sprite.question {
2351     background-position: -300px 0;
2352   }
2353
2354   .start-mapping {
2355     margin: auto;
2356     cursor: pointer;
2357     border: none;
2358     padding: 20px 40px;
2359     font-size: 30px;
2360     text-decoration: none;
2361   }
2362
2363   .note-box {
2364     background-color: $offwhite;
2365   }
2366 }