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