app/assets/stylesheets/common.css.scss

   1 /* Styles common to large and small screens */
   2
   3 /* Default rules for the body of every page */
   4
   5 body {
   6   font-family: 'Helvetica Neue',Arial,sans-serif;
   7   font-size: 14px;
   8   line-height: 20px;
   9   color: #222;
  10   background-color: #fff;
  11   margin: 0px;
  12   padding: 0px;
  13 }
  14
  15 body.slim {
  16   background-color: #f0f0f0;
  17 }
  18
  19 /* Rules for links */
  20
  21 a {
  22   color: #00f;
  23   text-decoration: none;
  24 }
  25
  26 a:hover {
  27   text-decoration: underline;
  28 }
  29
  30 /* Rules for horizontal lines */
  31
  32 hr {
  33   border: none;
  34   background-color: #ccc;
  35   color: #ccc;
  36   height: 1px;
  37 }
  38
  39 /* Default rules for headings */
  40
  41 h2 {
  42   margin: 5px 0;
  43   font-size: 25px;
  44   line-height: 30px;
  45 }
  46
  47 /* Rules for the whole left sidebar, including the logo */
  48
  49 #left {
  50   position: absolute;
  51   top: 0px;
  52   width: 185px;
  53 }
  54
  55 /* Rules for the OpenStreetMap logo in the top left corner */
  56
  57 #logo {
  58   width: 170px;
  59   min-width: 170px;
  60   padding: 5px;
  61   text-align: center;
  62   margin: 25px 0 5px 0;
  63 }
  64
  65 #logo h1 {
  66   font-size: 18px;
  67   line-height: 20px;
  68   text-align: center;
  69   margin: 0px;
  70 }
  71
  72 #logo h2 {
  73   font-size: 10px;
  74   line-height: 15px;
  75   margin: 0px;
  76 }
  77
  78 /* Rules for the site name */
  79
  80 #small-title {
  81   display: none;
  82 }
  83
  84 /* Rules for the introductory text displayed in the left sidebar to new users */
  85
  86 #intro {
  87   font-size: 11px;
  88   line-height: 12px;
  89   border-top: 1px solid #ccc;
  90 }
  91
  92 #intro p {
  93   margin: 5px;
  94 }
  95
  96 /*
  97  * Rules for alert boxes shown in the left sidebar when important
  98  * information needs to be conveyed such as when the site is
  99  * undergoing maintenance.
 100  */
 101
 102 #alert {
 103   width: 170px;
 104   margin: 5px;
 105   padding: 5px;
 106   border: 1px solid #ccc;
 107   background: #d00;
 108   line-height: 1.2em;
 109   font-size: 14px;
 110   border-radius: 5px;
 111   -moz-border-radius: 5px;
 112 }
 113
 114 /*
 115  * Rules for notice boxes shown in the left sidebar when important, but
 116  * non-critical information needs to be conveyed such as notices about
 117  * donation drives.
 118  */
 119
 120 .notice {
 121   width: 170px;
 122   margin: 5px;
 123   padding: 5px;
 124   border: 1px solid #ccc;
 125   background: #ea0;
 126   line-height: 20px;
 127   font-size: 14px;
 128   border-radius: 5px;
 129   -moz-border-radius: 5px;
 130 }
 131
 132 /* Rules for the menu displayed in the left sidebar */
 133
 134 .left_menu {
 135   padding: 10px;
 136   margin: 4px 0;
 137   border-top: 1px solid #ccc;
 138   border-bottom: 1px solid #ccc;
 139   line-height: 20px;
 140   font-size: 14px;
 141   font-weight: bold;
 142 }
 143
 144 .left_menu td {
 145   font-size: 12px;
 146 }
 147
 148 .left_menu h1 {
 149   font-style: normal;
 150   font-size: 15px;
 151 }
 152
 153 .left_menu ul {
 154   margin: 0px;
 155   list-style-type: none;
 156 }
 157
 158 .left_menu li {
 159   margin: 0px;
 160   padding: 0px;
 161 }
 162
 163 .left_menu a {
 164   color: #000;
 165 }
 166
 167 /* Rules for SOTM advert */
 168
 169 #sotm {
 170   width: 180px;
 171   min-width: 180px;
 172   margin: 5px;
 173   padding: 0px;
 174   border: 0px;
 175   background: #fff;
 176 }
 177
 178 /*
 179  * Rules for "optional boxes" which appear in the left sidebar on
 180  * certain pages. Current users are the seach box on the main page
 181  * and the tag cloud on the traces pages.
 182  */
 183
 184 .optionalbox {
 185   padding: 5px;
 186   margin: 4px 0;
 187   border-top: 1px solid #ccc;
 188   line-height: 15px;
 189   font-size: 12px;
 190 }
 191
 192 .optionalbox h1 {
 193   font-size: 14px;
 194   font-weight: bold;
 195   line-height: 20px;
 196   margin: 0px;
 197   vertical-align: bottom;
 198 }
 199
 200 /* Rules for the search box */
 201
 202 .whereami {
 203   line-height: 20px;
 204   vertical-align: bottom;
 205 }
 206
 207 .search_container {
 208   height: 15px;
 209   padding-bottom: 5px;
 210 }
 211
 212 #search_field form {
 213   width: 100%;
 214   margin: 0px;
 215   padding: 0px;
 216 }
 217
 218 #search_field input[type="text"] {
 219   width: 136px;
 220 }
 221
 222 #search_field input[type="submit"] {
 223   width: 26px;
 224   padding-left: 0px;
 225   padding-right: 0px;
 226 }
 227
 228 .search_help {
 229   font-size: 10px;
 230   line-height: 15px;
 231   margin-top: 2px;
 232   margin-bottom: 0px;
 233 }
 234
 235 /* Rules for donation request box */
 236
 237 .donate {
 238   width: 155px;
 239   margin: 10px 5px;
 240   padding: 5px;
 241   border: 1px solid #ccc;
 242   background: #cbeea7;
 243   line-height: 20px;
 244   text-align: center;
 245   font-size: 14px;
 246   border-radius: 5px;
 247   -moz-border-radius: 5px;
 248 }
 249
 250 /* Rules for Creative Commons logo button */
 251
 252 #cclogo {
 253   margin-top: 10px;
 254   margin-bottom: 10px;
 255 }
 256
 257 /* Rules for tabbed navigation bar */
 258
 259 #tabnav {
 260   height: 20px;
 261   margin: 0px;
 262   padding-top: 5px;
 263   background: image-url('tab_bottom.gif') repeat-x bottom;
 264 }
 265
 266 #tabnav li {
 267   margin: 0px;
 268   padding: 0px;
 269   display: inline;
 270   list-style-type: none;
 271 }
 272
 273 #tabnav a, #tabnav a:link, #tabnav a:visited {
 274   background: #f3f3f3;
 275   font-size: 13px;
 276   line-height: 14px;
 277   font-weight: bold;
 278   padding: 2px 10px;
 279   border: 1px solid #ccc;
 280   text-decoration: none;
 281   color: #333;
 282   border-top-right-radius: 5px;
 283   -moz-border-radius-topright: 5px;
 284   border-top-left-radius: 5px;
 285   -moz-border-radius-topleft: 5px;
 286 }
 287
 288 #tabnav a:link.active, #tabnav a:visited.active {
 289   border-bottom: 1px solid #fff;
 290   background: #fff;
 291   color: #000;
 292 }
 293
 294 #tabnav a:link:hover, #tabnav a:visited:hover {
 295   background: #fff;
 296 }
 297
 298 #tabnav a:link.disabled,
 299 #tabnav a:visited.disabled,
 300 #tabnav a:link:hover.disabled,
 301 #tabnav a:visited:hover.disabled {
 302   background: #bbbbbb;
 303   color: white
 304 }
 305
 306 /* Rules for greeting bar in the top right corner */
 307
 308 #greeting {
 309   height: 20px;
 310   margin: 0px;
 311   padding-top: 5px;
 312   font-size: 13px;
 313   line-height: 15px;
 314   background: image-url('tab_bottom.gif') repeat-x bottom;
 315 }
 316
 317 .greeting-bar-unread {
 318   font-weight: bold;
 319 }
 320
 321 /* Rules for the message shown in place of the map when javascript is disabled */
 322
 323 #noscript {
 324   z-index: 20000000;
 325   position: absolute;
 326   top: 15px;
 327 }
 328
 329 /* Rules for OpenLayers maps */
 330
 331 #map {
 332   margin: 0px;
 333   padding: 0px;
 334 }
 335
 336 .olControlAttribution {
 337   bottom: 15px !important;
 338   left: 0px !important;
 339   right: 0px !important;
 340   text-align: center;
 341 }
 342
 343 #permalink {
 344   z-index: 10000;
 345   position: absolute;
 346   bottom: 0px;
 347   right: 0px;
 348   padding: 5px;
 349   background:#fff;
 350   text-align: right;
 351   font-size: 12px;
 352 }
 353
 354 #permalink a {
 355     padding: 5px;
 356 }
 357
 358 /* Rules for edit menu */
 359
 360 .menu {
 361   display: none;
 362   z-index: 10000;
 363   position: absolute;
 364   background-color: #ffffff;
 365   border: 1px solid black;
 366 }
 367
 368 .menu ul {
 369   margin-top: 10px;
 370   margin-bottom: 10px;
 371   padding-left: 10px;
 372   padding-right: 10px;
 373 }
 374
 375 .menu li {
 376   list-style-type: none;
 377   white-space: nowrap;
 378 }
 379
 380 /* Rules for attribution text under the main map shown on printouts */
 381
 382 #attribution {
 383   display: none;
 384 }
 385
 386 .attribution_notice {
 387   text-align: center;
 388 }
 389
 390 /* Rules for the popout map sidebar */
 391
 392 #sidebar {
 393   display: none;
 394   position: absolute;
 395   border: 1px solid #888;
 396   margin: 0px;
 397   padding: 0px;
 398   width: 30%;
 399   top: 0px;
 400   bottom: 0px;
 401 }
 402
 403 #sidebar #sidebar_content {
 404   overflow: auto;
 405   position: absolute;
 406   font-size: 13px;
 407   line-height: 15px;
 408   top: 29px;
 409   bottom: 0px;
 410   left: 0px;
 411   right: 0px;
 412 }
 413
 414 #sidebar .sidebar_title {
 415   margin: 0px;
 416   padding: 3px 6px;
 417   height: 29px;
 418   font-size: 14px;
 419   line-height: 15px;
 420   border-bottom: 1px solid #888;
 421   background: #bbb;
 422 }
 423
 424 /* Rules for the map key which appears in the popout sidebar */
 425
 426 #mapkey h3 {
 427   font-size: 110%;
 428   font-weight: normal;
 429   text-align: center;
 430 }
 431
 432 #mapkey .mapkey-table {
 433   padding-left: 5px;
 434   padding-right: 5px;
 435 }
 436
 437 #mapkey .mapkey-table-key {
 438 }
 439
 440 #mapkey .mapkey-table-value {
 441   font-size: 90%;
 442 }
 443
 444 /* Rules for search results which appear in the popout sidebar */
 445
 446 .search_searching {
 447   margin-top: 5px;
 448   margin-bottom: 5px;
 449 }
 450
 451 .search_results_heading {
 452   margin: 0px;
 453   padding: 3px 6px;
 454   border: 1px solid #ccc;
 455   background: #ddd;
 456 }
 457
 458 .search_results_entry {
 459   margin: 0px;
 460   padding: 2px 6px;
 461 }
 462
 463 .search_results_error {
 464   margin: 0px;
 465   padding: 2px 6px 0px;
 466   color: #f00;
 467 }
 468
 469 /* Rules for data browser information which appears in the popout sidebar */
 470
 471 .browse_heading {
 472   margin: 0px;
 473   padding: 3px 6px;
 474   border: 1px solid #ccc;
 475   background: #ddd;
 476 }
 477
 478 .browse_details {
 479   margin: 0px;
 480   padding: 0px 6px;
 481 }
 482
 483 /* Rules for export information which appears in the popout sidebar */
 484
 485 .export_heading {
 486   margin: 0px;
 487   padding: 2px 5px;
 488   border-bottom: 1px solid #ccc;
 489   font-weight: bold;
 490 }
 491
 492 .export_bounds {
 493   width: 100%;
 494   text-align: center;
 495 }
 496
 497 .export_bound {
 498   margin: 5px;
 499 }
 500
 501 .export_details {
 502   padding: 2px 6px;
 503 }
 504
 505 #export_osm {
 506   display: none;
 507 }
 508
 509 #export_mapnik {
 510   display: none;
 511 }
 512
 513 #export_osmarender {
 514   display: none;
 515 }
 516
 517 .export_hint {
 518   padding: 0px 12px;
 519   font-style: italic;
 520 }
 521
 522 .export_buttons {
 523   width: 100%;
 524   text-align: center;
 525 }
 526
 527 /* Rules for the main content area */
 528
 529 body.site #content {
 530   padding: 0px;
 531   margin: 0px;
 532   position: absolute;
 533   bottom: 0px;
 534 }
 535
 536 #content {
 537   padding: 10px;
 538   margin: 0px;
 539   position: absolute;
 540   bottom: 0px;
 541 }
 542
 543 #slim_container {
 544   width: 100%;
 545 }
 546
 547 #slim_container_content {
 548   max-width: 50em;
 549   background-color: #FFFFFF;
 550   margin: 10px auto;
 551   padding: 3px;
 552   border-radius: 25px;
 553   -moz-border-radius: 25px;
 554   border: 1px solid #e6e6e6;
 555 }
 556
 557 #slim_content {
 558   margin: 10px;
 559   margin-top: 90px;
 560   max-width: 50em;
 561 }
 562
 563 #slim_header {
 564   margin: 10px;
 565   position: absolute;
 566   top: 0px;
 567 }
 568
 569 #slim_header img {
 570   vertical-align: middle;
 571   margin-bottom: 5px;
 572 }
 573
 574 /* Rules for the home page */
 575
 576 .site_index #map {
 577   position: absolute;
 578   top: 0px;
 579   bottom: 0px;
 580   left: 0px;
 581   right: 0px;
 582 }
 583
 584 .site_export #map {
 585   position: absolute;
 586   top: 0px;
 587   bottom: 0px;
 588   left: 0px;
 589   right: 0px;
 590 }
 591
 592 /* Rules for the edit page */
 593
 594 .site_edit #map {
 595   position: absolute;
 596   top: 0px;
 597   bottom: 0px;
 598   left: 0px;
 599   right: 0px;
 600 }
 601
 602 /* Rules for the changeset list shown by the history tab etc */
 603
 604 #changeset_list_container {
 605   position: relative;
 606 }
 607
 608 #changeset_list {
 609   width: 50%;
 610   font-size: small;
 611   border-collapse: collapse;
 612   border-width: 0px;
 613   margin-top: 1px;
 614   margin-bottom: 1px;
 615 }
 616
 617 #changeset_list td {
 618   vertical-align: top;
 619   padding: 3px;
 620 }
 621
 622 #changeset_list .date {
 623   white-space: nowrap;
 624 }
 625
 626 #changeset_list .user {
 627   white-space: nowrap;
 628 }
 629
 630 #changeset_list .area {
 631   white-space: nowrap;
 632 }
 633
 634 #changeset_list .selected {
 635   background-color: rgb(255, 255, 160);
 636   background-color: rgba(255, 255, 85, 0.5);
 637 }
 638
 639 #changeset_list_map {
 640   position: absolute;
 641   top: 0px;
 642   bottom: 0px;
 643   width: 49%;
 644   min-height: 400px;
 645   border: solid 1px black;
 646 }
 647
 648 /* Rules for the data browser */
 649
 650 #browse_navigation {
 651   width: 250px;
 652   text-align: center;
 653 }
 654
 655 table.browse_details th {
 656   white-space: nowrap;
 657 }
 658
 659 #browse_map {
 660   width: 250px;
 661 }
 662
 663 #browse_map #small_map {
 664   width: 250px;
 665   height: 300px;
 666   border: solid 1px black;
 667 }
 668
 669 #browse_map .geolink {
 670   display: none;
 671 }
 672
 673 /* Rules for the trace list shown by the traces tab etc */
 674
 675 #trace_list {
 676   font-size: small;
 677   border-collapse: collapse;
 678   border-width: 0px;
 679 }
 680
 681 #trace_list .trace_summary {
 682   font-size: 12px;
 683   color: gray;
 684 }
 685
 686 #trace_list .trace_pending {
 687   color: red;
 688 }
 689
 690 #trace_list .trace_public {
 691   color: green;
 692 }
 693
 694 #trace_list .trace_identifiable {
 695   color: green;
 696 }
 697
 698 #trace_list .trace_trackable {
 699   color: red;
 700 }
 701
 702 #trace_list .trace_private {
 703   color: red;
 704 }
 705
 706 /* Rules for the user list */
 707
 708 #user_list {
 709   width: 100%;
 710   font-size: small;
 711 }
 712
 713 #user_list tr {
 714   vertical-align: middle;
 715 }
 716
 717 #user_list p {
 718   margin-top: 0px;
 719   margin-bottom: 0px;
 720 }
 721
 722 #user_list_actions {
 723   margin-top: 10px;
 724 }
 725
 726 /* Rules for the new diary entry page */
 727
 728 .diary_entry div#map {
 729   position: relative;
 730   width: 90%;
 731   height: 400px;
 732   display: none;
 733 }
 734
 735 /* Rules for the login page */
 736
 737 #login_wrapper div {
 738   margin: 5px;
 739   padding: 15px;
 740   border-radius: 15px;
 741   -moz-border-radius: 15px;
 742 }
 743
 744 #login_login {
 745   background-color: #f5f5ff;
 746   border: 1px solid #f3f3ff;
 747   border-radius: 15px;
 748   -moz-border-radius: 15px;
 749 }
 750
 751 #login_login h1 {
 752   margin-top: 5px;
 753 }
 754
 755 table#login_openid_buttons {
 756   padding-bottom: 10px;
 757 }
 758
 759 #login_openid_buttons td {
 760   padding-left: 10px;
 761   padding-right: 10px;
 762   padding-top: 5px;
 763   padding-bottom: 5px;
 764 }
 765
 766 #login_openid_buttons img {
 767   border: 0;
 768 }
 769
 770 #login_signup form.button-to div {
 771   margin: 0px;
 772   padding: 0px;
 773 }
 774
 775 /* Rules for the account confirmation page */
 776
 777 div#contributorTerms {
 778   border: 1px solid black;
 779   padding: 4px;
 780   overflow: auto;
 781   width: 95%;
 782   height: 400px;
 783 }
 784
 785 div#slim_content div#contributorTerms {
 786   width: auto;
 787 }
 788
 789 div#contributorTerms p#first {
 790   margin-top: 0px;
 791 }
 792
 793 div#contributorTerms p#last {
 794   margin-bottom: 0px;
 795 }
 796
 797 div#contributorTerms ol {
 798   margin-bottom: 0px;
 799 }
 800
 801 div#contributorTerms img {
 802   display: block;
 803   margin-left: auto;
 804   margin-right: auto;
 805   margin-top: 10%;
 806 }
 807
 808 form#termsForm {
 809   width: 95%;
 810   margin-bottom: 3em;
 811 }
 812
 813 div#slim_content form#termsForm {
 814   width: auto;
 815 }
 816
 817 p#contributorGuidance {
 818   background-color: #f5f5ff;
 819   border: 1px solid #f3f3ff;
 820   border-radius: 15px;
 821   -moz-border-radius: 15px;
 822   padding: 10px;
 823 }
 824
 825 /* Rules for the account settings page */
 826
 827 #accountForm td {
 828   padding-bottom: 10px;
 829 }
 830
 831 #accountForm .user_map {
 832   position: relative;
 833   width: 500px;
 834   height: 400px;
 835 }
 836
 837 #accountImage td {
 838   padding-bottom: 0px;
 839 }
 840
 841 .nohome .location {
 842   display: none;
 843 }
 844
 845 #homerow .message {
 846   display: none;
 847 }
 848
 849 .nohome .message {
 850   display: inline !important;
 851 }
 852
 853 #accountForm input[type=submit] {
 854   margin-top: 15px;
 855 }
 856
 857 /* Rules for the user view */
 858
 859 .user_view .user_map {
 860   position: relative;
 861   width: 400px;
 862   height: 400px;
 863 }
 864
 865 .user_view .user_map p#no_home_location {
 866   position: absolute;
 867   top: 0px;
 868   bottom: 0px;
 869   width: 90%;
 870   height: 30%;
 871   margin: auto 5%
 872 }
 873
 874 /* Rules for the user map */
 875
 876 .user_map .olControlPanZoomBar {
 877   display: none;
 878 }
 879
 880 .user_map .olControlPanZoom {
 881   display: block;
 882 }
 883
 884 /* Rules for user popups on maps */
 885
 886 .user_popup p {
 887   padding-top: 3px;
 888   padding-bottom: 3px;
 889   margin-top: 0px;
 890   margin-bottom: 0px;
 891   margin-left: 55px;
 892   margin-right: 2px;
 893 }
 894
 895 .user_popup img.user_thumbnail {
 896   float: left;
 897 }
 898
 899 /* Rules for message in/out box page */
 900
 901 #messages {
 902   border: 1px solid #ccc;
 903 }
 904
 905 .inbox-row-unread .inbox-subject {
 906   font-weight: bold;
 907 }
 908
 909 /* Rules for "flash" notice boxes shown at the top of the content area */
 910
 911 #error {
 912   border: 1px solid red;
 913   padding: 7px;
 914   background-color: #fff0f0;
 915   margin-bottom: 20px;
 916   border-radius: 5px;
 917   -moz-border-radius: 5px;
 918 }
 919
 920 #warning {
 921   border: 1px solid orange;
 922   padding: 7px;
 923   background-color: #fff6f0;
 924   margin-bottom: 20px;
 925   border-radius: 5px;
 926   -moz-border-radius: 5px;
 927 }
 928
 929 #notice {
 930   border: 1px solid green;
 931   padding: 7px;
 932   background-color: #f0fff0;
 933   margin-bottom: 20px;
 934   border-radius: 5px;
 935   -moz-border-radius: 5px;
 936 }
 937
 938 /* Rules for highlighting fields with rails validation errors */
 939
 940 .field_with_errors {
 941   padding: 2px;
 942   background-color: red;
 943   display: table;
 944 }
 945
 946 /* Rules for rails validation error boxes */
 947
 948 #errorExplanation {
 949   width: 400px;
 950   border: 2px solid red;
 951   padding: 7px;
 952   padding-bottom: 12px;
 953   margin-bottom: 20px;
 954   background-color: #f0f0f0;
 955 }
 956
 957 #errorExplanation h2 {
 958   font-weight: bold;
 959   font-size: 12px;
 960   margin: -7px;
 961   background-color: #c00;
 962   color: #fff;
 963 }
 964
 965 #errorExplanation p {
 966   color: #333;
 967   margin-bottom: 0px;
 968   padding: 5px;
 969 }
 970
 971 #errorExplanation ul li {
 972   font-size: 12px;
 973   list-style: square;
 974 }
 975
 976 /* Rules for forms */
 977
 978 .fieldName {
 979   vertical-align: top;
 980   font-weight: bold;
 981   font-size: 12px;
 982   line-height: 20px;
 983 }
 984
 985 .minorNote {
 986   font-size: 0.8em;
 987 }
 988
 989 input[type="text"],
 990 input[type="email"],
 991 input[type="url"],
 992 input[type="password"],
 993 textarea {
 994   border: 1px solid #888;
 995 }
 996
 997 /* Rules for user images */
 998
 999 img.user_image {
1000   max-width: 100px;
1001   max-height: 100px;
1002   border: 1px solid black;
1003 }
1004
1005 img.user_thumbnail {
1006   max-width: 50px;
1007   max-height: 100px;
1008   border: 1px solid black;
1009 }
1010
1011 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1012
1013 .nowrap {
1014   white-space: nowrap;
1015 }
1016
1017 /* Rules for geo microformats */
1018
1019 abbr.geo {
1020   border-bottom: none;
1021 }
1022
1023 /* Rules for RSS buttons */
1024
1025 .rsssmall {
1026   position: relative;
1027   top: 4px;
1028 }
1029
1030 /* Rules for doing distinct colour of alternate table rows */
1031
1032 .table0 {
1033   background: #f6f6f6;
1034 }
1035
1036 .table1 {
1037   background: #fff;
1038 }
1039
1040 /* Rules for OpenID logo */
1041
1042 .openid_logo {
1043   vertical-align: text-bottom;
1044   border: 0;
1045 }