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