app/assets/stylesheets/common.css.scss

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