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