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