app/assets/stylesheets/common.scss

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