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   position: absolute;
 342   border: 1px solid black;
 343   margin: 0px;
 344   padding: 0px;
 345   top: 0px;
 346   bottom: 0px;
 347 }
 348
 349 .olControlAttribution {
 350   display: none !important;
 351 }
 352
 353 #permalink {
 354   z-index: 10000;
 355   position: absolute;
 356   bottom: 15px;
 357   font-size: smaller;
 358 }
 359
 360 /* Rules for edit menu */
 361
 362 #editmenu {
 363   display: none;
 364   z-index: 10000;
 365   position: absolute;
 366   background-color: #ffffff;
 367   border: 1px solid black;
 368 }
 369
 370 #editmenu ul {
 371   margin-top: 10px;
 372   margin-bottom: 10px;
 373   padding-left: 10px;
 374   padding-right: 10px;
 375 }
 376
 377 #editmenu li {
 378   list-style-type: none;
 379 }
 380
 381 /* Rules for attribution text under the main map shown on printouts */
 382
 383 #attribution {
 384   display: none;
 385 }
 386
 387 /* Rules for the popout map sidebar */
 388
 389 #sidebar {
 390   display: none;
 391   position: absolute;
 392   border: 1px solid black;
 393   margin: 0px;
 394   padding: 0px;
 395   width: 30%;
 396   top: 0px;
 397   bottom: 0px;
 398 }
 399
 400 #sidebar #sidebar_content {
 401   overflow: auto;
 402   position: absolute;
 403   font-size: 13px;
 404   line-height: 14px;
 405   top: 29px;
 406   bottom: 0px;
 407   left: 0px;
 408   right: 0px;
 409 }
 410
 411 #sidebar .sidebar_title {
 412   margin: 0px;
 413   padding: 3px 6px;
 414   height: 29px;
 415   font-size: 14px;
 416   line-height: 15px;
 417   border-bottom: 1px solid black;
 418   background: #bbb;
 419 }
 420
 421 /* Rules for the map key which appears in the popout sidebar */
 422
 423 #mapkey h3 {
 424   font-size: 110%;
 425   font-weight: normal;
 426   text-align: center;
 427 }
 428
 429 #mapkey .mapkey-table {
 430   padding-left: 5px;
 431   padding-right: 5px;
 432 }
 433
 434 #mapkey .mapkey-table-key {
 435 }
 436
 437 #mapkey .mapkey-table-value {
 438   font-size: 90%;
 439 }
 440
 441 /* Rules for search results which appear in the popout sidebar */
 442
 443 .search_searching {
 444   margin-top: 5px;
 445   margin-bottom: 5px;
 446 }
 447
 448 .search_results_heading {
 449   margin: 0px;
 450   padding: 3px 6px;
 451   border: 1px solid #ccc;
 452   background: #ddd;
 453 }
 454
 455 .search_results_entry {
 456   margin: 0px;
 457   padding: 2px 6px;
 458 }
 459
 460 .search_results_error {
 461   margin: 0px;
 462   padding: 2px 6px 0px;
 463   color: #f00;
 464 }
 465
 466 /* Rules for data browser information which appears in the popout sidebar */
 467
 468 .browse_heading {
 469   margin: 0px;
 470   padding: 3px 6px;
 471   border: 1px solid #ccc;
 472   background: #ddd;
 473 }
 474
 475 .browse_details {
 476   margin: 0px;
 477   padding: 0px 6px;
 478 }
 479
 480 /* Rules for export information which appears in the popout sidebar */
 481
 482 .export_heading {
 483   margin: 0px;
 484   padding: 3px 6px;
 485   border: 1px solid #ccc;
 486   background: #ddd;
 487 }
 488
 489 .export_bounds {
 490   width: 100%;
 491   text-align: center;
 492 }
 493
 494 .export_bound {
 495   margin: 5px;
 496 }
 497
 498 .export_details {
 499   padding: 2px 6px;
 500 }
 501
 502 #export_osm {
 503   display: none;
 504 }
 505
 506 #export_mapnik {
 507   display: none;
 508 }
 509
 510 #export_osmarender {
 511   display: none;
 512 }
 513
 514 .export_hint {
 515   padding: 0px 12px;
 516   font-style: italic;
 517 }
 518
 519 .export_buttons {
 520   width: 100%;
 521   text-align: center;
 522 }
 523
 524 /* Rules for the main content area */
 525
 526 #content {
 527   padding: 0px;
 528   margin: 0px;
 529   position: absolute;
 530   bottom: 10px;
 531   line-height: 1.2em;
 532 }
 533
 534 #slim_container {
 535   width: 100%;
 536 }
 537
 538 #slim_container_content {
 539   max-width: 50em;
 540   background-color: #FFFFFF;
 541   margin: 10px auto;
 542   padding: 3px;
 543   border-radius: 25px;
 544   -moz-border-radius: 25px;
 545   border: 1px solid #e6e6e6;
 546 }
 547
 548 #slim_content {
 549   margin: 10px;
 550   margin-top: 90px;
 551   max-width: 50em;
 552 }
 553
 554 #slim_header {
 555   margin: 10px;
 556   position: absolute;
 557   top: 0px;
 558 }
 559
 560 #slim_header img {
 561   vertical-align: middle;
 562   margin-bottom: 5px;
 563 }
 564
 565 /* Rules for the changeset list shown by the history tab etc */
 566
 567 #changeset_list_container {
 568   position: relative;
 569 }
 570
 571 #changeset_list {
 572   width: 50%;
 573   font-size: small;
 574   border-collapse: collapse;
 575   border-width: 0px;
 576   margin-top: 1px;
 577   margin-bottom: 1px;
 578 }
 579
 580 #changeset_list td {
 581   vertical-align: top;
 582   padding: 3px;
 583 }
 584
 585 #changeset_list .date {
 586   white-space: nowrap;
 587 }
 588
 589 #changeset_list .user {
 590   white-space: nowrap;
 591 }
 592
 593 #changeset_list .area {
 594   white-space: nowrap;
 595 }
 596
 597 #changeset_list .selected {
 598   background-color: rgb(255, 255, 160);
 599   background-color: rgba(255, 255, 85, 0.5);
 600 }
 601
 602 #changeset_list_map {
 603   position: absolute;
 604   top: 0px;
 605   bottom: 0px;
 606   width: 49%;
 607   min-height: 400px;
 608   border: solid 1px black;
 609 }
 610
 611 /* Rules for the data browser */
 612
 613 #browse_navigation {
 614   width: 250px;
 615   text-align: center;
 616 }
 617
 618 table.browse_details th {
 619   white-space: nowrap;
 620 }
 621
 622 #browse_map {
 623   width: 250px;
 624 }
 625
 626 #browse_map #small_map {
 627   width: 250px;
 628   height: 300px;
 629   border: solid 1px black;
 630 }
 631
 632 /* Rules for the trace list shown by the traces tab etc */
 633
 634 #trace_list {
 635   font-size: small;
 636   border-collapse: collapse;
 637   border-width: 0px;
 638 }
 639
 640 #trace_list .trace_summary {
 641   font-size: 12px;
 642   color: gray;
 643 }
 644
 645 /* Rules for the user list */
 646
 647 #user_list {
 648   width: 100%;
 649   font-size: small;
 650 }
 651
 652 #user_list tr {
 653   vertical-align: middle;
 654 }
 655
 656 #user_list p {
 657   margin-top: 0px;
 658   margin-bottom: 0px;
 659 }
 660
 661 #user_list_actions {
 662   margin-top: 10px;
 663 }
 664
 665 /* Rules for the login page */
 666
 667 #login_wrapper div {
 668   margin: 5px;
 669   padding: 15px;
 670   border-radius: 15px;
 671   -moz-border-radius: 15px;
 672 }
 673
 674 #login_login {
 675   background-color: #f5f5ff;
 676   border: 1px solid #f3f3ff;
 677   border-radius: 15px;
 678   -moz-border-radius: 15px;
 679 }
 680
 681 #login_login h1 {
 682   margin-top: 5px;
 683 }
 684
 685 table#login_openid_buttons {
 686   padding-bottom: 10px;
 687 }
 688
 689 #login_openid_buttons td {
 690   padding-left: 10px;
 691   padding-right: 10px;
 692   padding-top: 5px;
 693   padding-bottom: 5px;
 694 }
 695
 696 #login_openid_buttons img {
 697   border: 0;
 698 }
 699
 700 #login_signup form.button-to div {
 701   margin: 0px;
 702   padding: 0px;
 703 }
 704
 705 /* Rules for the account confirmation page */
 706
 707 div#contributorTerms {
 708   border: 1px solid black;
 709   padding: 4px;
 710   overflow: auto;
 711   width: 95%;
 712   height: 400px;
 713 }
 714
 715 div#slim_content div#contributorTerms {
 716   width: auto;
 717 }
 718
 719 div#contributorTerms p#first {
 720   margin-top: 0px;
 721 }
 722
 723 div#contributorTerms p#last {
 724   margin-bottom: 0px;
 725 }
 726
 727 div#contributorTerms ol {
 728   margin-bottom: 0px;
 729 }
 730
 731 div#contributorTerms img {
 732   display: block;
 733   margin-left: auto;
 734   margin-right: auto;
 735   margin-top: 10%;
 736 }
 737
 738 form#termsForm {
 739   width: 95%;
 740   margin-bottom: 3em;
 741 }
 742
 743 div#slim_content form#termsForm {
 744   width: auto;
 745 }
 746
 747 p#contributorGuidance {
 748   background-color: #f5f5ff;
 749   border: 1px solid #f3f3ff;
 750   border-radius: 15px;
 751   -moz-border-radius: 15px;
 752   padding: 10px;
 753 }
 754
 755 /* Rules for the account settings page */
 756
 757 #accountForm td {
 758   padding-bottom: 10px;
 759 }
 760
 761 #accountForm .user_map {
 762   position: relative;
 763   width: 500px;
 764   height: 400px;
 765 }
 766
 767 #accountImage td {
 768   padding-bottom: 0px;
 769 }
 770
 771 .nohome .location {
 772   display: none;
 773 }
 774
 775 #homerow .message {
 776   display: none;
 777 }
 778
 779 .nohome .message {
 780   display: inline !important;
 781 }
 782
 783 /* Rules for the user view */
 784
 785 #user_details .user_map {
 786   position: relative;
 787   width: 400px;
 788   height: 400px;
 789 }
 790
 791 /* Rules for the user map */
 792
 793 .user_map .olControlPanZoomBar {
 794   display: none;
 795 }
 796
 797 .user_map .olControlPanZoom {
 798   display: block;
 799 }
 800
 801 /* Rules for user popups on maps */
 802
 803 .user_popup p {
 804   padding-top: 3px;
 805   padding-bottom: 3px;
 806   margin-top: 0px;
 807   margin-bottom: 0px;
 808   margin-left: 55px;
 809   margin-right: 2px;
 810 }
 811
 812 .user_popup img.user_thumbnail {
 813   float: left;
 814 }
 815
 816 /* Rules for message in/out box page */
 817
 818 #messages {
 819   border: 1px solid #ccc;
 820 }
 821
 822 .inbox-row-unread .inbox-subject {
 823   font-weight: bold;
 824 }
 825
 826 /* Rules for "flash" notice boxes shown at the top of the content area */
 827
 828 #error {
 829   border: 1px solid red;
 830   padding: 7px;
 831   background-color: #fff0f0;
 832   margin-bottom: 20px;
 833   border-radius: 5px;
 834   -moz-border-radius: 5px;
 835 }
 836
 837 #warning {
 838   border: 1px solid orange;
 839   padding: 7px;
 840   background-color: #fff6f0;
 841   margin-bottom: 20px;
 842   border-radius: 5px;
 843   -moz-border-radius: 5px;
 844 }
 845
 846 #notice {
 847   border: 1px solid green;
 848   padding: 7px;
 849   background-color: #f0fff0;
 850   margin-bottom: 20px;
 851   border-radius: 5px;
 852   -moz-border-radius: 5px;
 853 }
 854
 855 /* Rules for highlighting fields with rails validation errors */
 856
 857 .fieldWithErrors {
 858   padding: 2px;
 859   background-color: red;
 860   display: table;
 861 }
 862
 863 /* Rules for rails validation error boxes */
 864
 865 #errorExplanation {
 866   width: 400px;
 867   border: 2px solid red;
 868   padding: 7px;
 869   padding-bottom: 12px;
 870   margin-bottom: 20px;
 871   background-color: #f0f0f0;
 872 }
 873
 874 #errorExplanation h2 {
 875   font-weight: bold;
 876   font-size: 12px;
 877   margin: -7px;
 878   background-color: #c00;
 879   color: #fff;
 880 }
 881
 882 #errorExplanation p {
 883   color: #333;
 884   margin-bottom: 0px;
 885   padding: 5px;
 886 }
 887
 888 #errorExplanation ul li {
 889   font-size: 12px;
 890   list-style: square;
 891 }
 892
 893 /* Rules for forms */
 894
 895 .fieldName {
 896   font-weight: bold;
 897 }
 898
 899 .minorNote {
 900   font-size: 0.8em;
 901 }
 902
 903 input[type="text"], input[type="password"], textarea {
 904   border: 1px solid black;
 905 }
 906
 907 input[type="submit"] {
 908   border: 1px solid black;
 909 }
 910
 911 /* Rules for user images */
 912
 913 img.user_image {
 914   max-width: 100px;
 915   max-height: 100px;
 916   border: 1px solid black;
 917 }
 918
 919 img.user_thumbnail {
 920   max-width: 50px;
 921   max-height: 100px;
 922   border: 1px solid black;
 923 }
 924
 925 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
 926
 927 .nowrap {
 928   white-space: nowrap;
 929 }
 930
 931 /* Rules for geo microformats */
 932
 933 abbr.geo {
 934   border-bottom: none;
 935 }
 936
 937 /* Rules for RSS buttons */
 938
 939 .rsssmall {
 940   position: relative;
 941   top: 4px;
 942 }
 943
 944 /* Rules for doing distinct colour of alternate table rows */
 945
 946 .table0 {
 947   background: #f6f6f6;
 948 }
 949
 950 .table1 {
 951   background: #fff;
 952 }
 953
 954 /* Rules for OpenID logo */
 955
 956 .openid_logo {
 957   vertical-align: text-bottom;
 958   border: 0;
 959 }