public/stylesheets/common.css

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