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: #f5f5ff;
 688   border: 1px solid #f3f3ff;
 689   border-radius: 15px;
 690   -moz-border-radius: 15px;
 691 }
 692
 693 #login_login h1 {
 694   margin-top: 5px;
 695 }
 696
 697 #login_signup form.button-to div {
 698   margin: 0px;
 699   padding: 0px;
 700 }
 701
 702 /* Rules for the account confirmation page */
 703
 704 div#contributorTerms {
 705   border: 1px solid black;
 706   padding: 4px;
 707   overflow: auto;
 708   width: 80%;
 709   height: 60%;
 710 }
 711
 712 div#contributorTerms p#first {
 713   margin-top: 0px;
 714 }
 715
 716 div#contributorTerms p#last {
 717   margin-bottom: 0px;
 718 }
 719
 720 div#contributorTerms ol {
 721   margin-bottom: 0px;
 722 }
 723
 724 div#contributorTerms img {
 725   display: block;
 726   margin-left: auto;
 727   margin-right: auto;
 728   margin-top: 10%;
 729 }
 730
 731 form#termsForm {
 732   width: 80%;
 733 }
 734
 735 form#termsForm div#buttons {
 736   float: right;
 737 }
 738
 739 form#termsForm input#agree {
 740   margin-left: 50px;
 741 }
 742
 743 /* Rules for the account settings page */
 744
 745 #accountForm td {
 746   padding-bottom: 10px;
 747 }
 748
 749 #accountImage td {
 750   padding-bottom: 0px;
 751 }
 752
 753 .nohome .location {
 754   display: none;
 755 }
 756
 757 #homerow .message {
 758   display: none;
 759 }
 760
 761 .nohome .message {
 762   display: inline !important;
 763 }
 764
 765 /* Rules for the user map */
 766
 767 .user_map .olControlPanZoomBar {
 768   display: none;
 769 }
 770
 771 .user_map .olControlPanZoom {
 772   display: block;
 773 }
 774
 775 /* Rules for user popups on maps */
 776
 777 .user_popup p {
 778   padding-top: 3px;
 779   padding-bottom: 3px;
 780   margin-top: 0px;
 781   margin-bottom: 0px;
 782   margin-left: 55px;
 783   margin-right: 2px;
 784 }
 785
 786 /* Rules for message in/out box page */
 787
 788 #messages {
 789   border: 1px solid #ccc;
 790 }
 791
 792 .inbox-row-unread .inbox-subject {
 793   font-weight: bold;
 794 }
 795
 796 /* Rules for "flash" notice boxes shown at the top of the content area */
 797
 798 #error {
 799   border: 1px solid red;
 800   padding: 7px;
 801   background-color: #fff0f0;
 802   margin-bottom: 20px;
 803   border-radius: 5px;
 804   -moz-border-radius: 5px;
 805 }
 806
 807 #warning {
 808   border: 1px solid orange;
 809   padding: 7px;
 810   background-color: #fff6f0;
 811   margin-bottom: 20px;
 812   border-radius: 5px;
 813   -moz-border-radius: 5px;
 814 }
 815
 816 #notice {
 817   border: 1px solid green;
 818   padding: 7px;
 819   background-color: #f0fff0;
 820   margin-bottom: 20px;
 821   border-radius: 5px;
 822   -moz-border-radius: 5px;
 823 }
 824
 825 /* Rules for highlighting fields with rails validation errors */
 826
 827 .fieldWithErrors {
 828   padding: 2px;
 829   background-color: red;
 830   display: table;
 831 }
 832
 833 /* Rules for rails validation error boxes */
 834
 835 #errorExplanation {
 836   width: 400px;
 837   border: 2px solid red;
 838   padding: 7px;
 839   padding-bottom: 12px;
 840   margin-bottom: 20px;
 841   background-color: #f0f0f0;
 842 }
 843
 844 #errorExplanation h2 {
 845   text-align: left;
 846   font-weight: bold;
 847   padding: 5px 5px 5px 15px;
 848   font-size: 12px;
 849   margin: -7px;
 850   background-color: #c00;
 851   color: #fff;
 852 }
 853
 854 #errorExplanation p {
 855   color: #333;
 856   margin-bottom: 0px;
 857   padding: 5px;
 858 }
 859
 860 #errorExplanation ul li {
 861   font-size: 12px;
 862   list-style: square;
 863 }
 864
 865 /* Rules for forms */
 866
 867 .fieldName {
 868   text-align: right;
 869   font-weight: bold;
 870 }
 871
 872 .minorNote {
 873   font-size: 0.8em;
 874 }
 875
 876 input[type="text"], input[type="password"], textarea {
 877   border: 1px solid black;
 878 }
 879
 880 input[type="submit"] {
 881   border: 1px solid black;
 882 }
 883
 884 /* Rules for user images */
 885
 886 img.user_image {
 887   max-width: 100px;
 888   max-height: 100px;
 889   border: 1px solid black;
 890 }
 891
 892 img.user_thumbnail {
 893   max-width: 50px;
 894   max-height: 100px;
 895   border: 1px solid black;
 896 }
 897
 898 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
 899
 900 .nowrap {
 901   white-space: nowrap;
 902 }
 903
 904 /* Rules for geo microformats */
 905
 906 abbr.geo {
 907   border-bottom: none;
 908 }
 909
 910 /* Rules for RSS buttons */
 911
 912 .rsssmall {
 913   position: relative;
 914   top: 4px;
 915 }
 916
 917 /* Rules for doing distinct colour of alternate table rows */
 918
 919 .table0 {
 920   background: #f6f6f6;
 921 }
 922
 923 .table1 {
 924   background: #fff;
 925 }