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 /* Rules for the changeset list shown by the history tab etc */
 551
 552 #changeset_list, #keyvalue {
 553   width: 100%;
 554   font-size: small;
 555   text-align: left;
 556   border-collapse: collapse;
 557   border-width: 0px;
 558 }
 559
 560 #changeset_list .date {
 561   white-space: nowrap;
 562 }
 563
 564 #changeset_list .user {
 565   white-space: nowrap;
 566 }
 567
 568 #changeset_list .area {
 569   white-space: nowrap;
 570 }
 571
 572 #changeset_list.th {
 573   font-weight: bold;
 574 }
 575
 576 /* Rules for the data browser */
 577
 578 #browse_navigation {
 579   float: right;
 580   width: 250px;
 581   text-align: center;
 582   margin-left: 10px;
 583 }
 584
 585 #browse_map {
 586   float: right;
 587   width: 250px;
 588   text-align: right;
 589   margin-left: 10px;
 590 }
 591
 592 #browse_map #small_map {
 593   width: 250px;
 594   height: 300px;
 595   border: solid 1px black;
 596 }
 597
 598 /* Rules for the trace list shown by the traces tab etc */
 599
 600 #trace_list {
 601   font-size: small;
 602   text-align: left;
 603   border-collapse: collapse;
 604   border-width: 0px;
 605 }
 606
 607 #trace_list .trace_summary {
 608   font-size: 12px;
 609   color: gray;
 610 }
 611
 612 /* Rules for the user list */
 613
 614 #user_list {
 615   width: 100%;
 616   font-size: small;
 617 }
 618
 619 #user_list tr {
 620   vertical-align: middle;
 621 }
 622
 623 #user_list p {
 624   margin-top: 0px;
 625   margin-bottom: 0px;
 626 }
 627
 628 #user_list_actions {
 629   float: right;
 630   margin-top: 10px;
 631 }
 632
 633 /* Rules for the login page */
 634
 635 #login_wrapper {
 636   float: left; /* ensures the child divs are the same size, and only as wide as they need to be */
 637 }
 638
 639 #login_wrapper div {
 640   margin: 5px;
 641   padding: 15px;
 642   border-radius: 15px;
 643   -moz-border-radius: 15px;
 644 }
 645
 646 #login_wrapper input[type=submit] {
 647   float: right;
 648 }
 649
 650 #login_login {
 651   background-color: #f0f0f0;
 652 }
 653
 654 #login_login h1 {
 655   margin-top: 5px;
 656 }
 657
 658 #login_signup form.button-to div {
 659   margin: 0px;
 660   padding: 0px;
 661 }
 662
 663 /* Rules for the account confirmation page */
 664
 665 div#contributorTerms {
 666   border: 1px solid black;
 667   padding: 4px;
 668   overflow: auto;
 669   width: 80%;
 670   height: 60%;
 671 }
 672
 673 div#contributorTerms p#first {
 674   margin-top: 0px;
 675 }
 676
 677 div#contributorTerms p#last {
 678   margin-bottom: 0px;
 679 }
 680
 681 div#contributorTerms ol {
 682   margin-bottom: 0px;
 683 }
 684
 685 div#contributorTerms img {
 686   display: block;
 687   margin-left: auto;
 688   margin-right: auto;
 689   margin-top: 10%;
 690 }
 691
 692 form#termsForm {
 693   width: 80%;
 694 }
 695
 696 form#termsForm div#buttons {
 697   float: right;
 698 }
 699
 700 form#termsForm input#agree {
 701   margin-left: 50px;
 702 }
 703
 704 /* Rules for the account settings page */
 705
 706 #accountForm td {
 707   padding-bottom: 10px;
 708 }
 709
 710 #accountImage td {
 711   padding-bottom: 0px;
 712 }
 713
 714 .nohome .location {
 715   display: none;
 716 }
 717
 718 #homerow .message {
 719   display: none;
 720 }
 721
 722 .nohome .message {
 723   display: inline !important;
 724 }
 725
 726 /* Rules for the user map */
 727
 728 .user_map .olControlPanZoomBar {
 729   display: none;
 730 }
 731
 732 .user_map .olControlPanZoom {
 733   display: block;
 734 }
 735
 736 /* Rules for user popups on maps */
 737
 738 .user_popup p {
 739   padding-top: 3px;
 740   padding-bottom: 3px;
 741   margin-top: 0px;
 742   margin-bottom: 0px;
 743   margin-left: 55px;
 744   margin-right: 2px;
 745 }
 746
 747 /* Rules for message in/out box page */
 748
 749 #messages {
 750   border: 1px solid #ccc;
 751 }
 752
 753 .inbox-row-unread .inbox-subject {
 754   font-weight: bold;
 755 }
 756
 757 /* Rules for "flash" notice boxes shown at the top of the content area */
 758
 759 #error {
 760   border: 1px solid red;
 761   padding: 7px;
 762   background-color: #fff0f0;
 763   margin-bottom: 20px;
 764   border-radius: 5px;
 765   -moz-border-radius: 5px;
 766 }
 767
 768 #warning {
 769   border: 1px solid orange;
 770   padding: 7px;
 771   background-color: #fff6f0;
 772   margin-bottom: 20px;
 773   border-radius: 5px;
 774   -moz-border-radius: 5px;
 775 }
 776
 777 #notice {
 778   border: 1px solid green;
 779   padding: 7px;
 780   background-color: #f0fff0;
 781   margin-bottom: 20px;
 782   border-radius: 5px;
 783   -moz-border-radius: 5px;
 784 }
 785
 786 /* Rules for highlighting fields with rails validation errors */
 787
 788 .fieldWithErrors {
 789   padding: 2px;
 790   background-color: red;
 791   display: table;
 792 }
 793
 794 /* Rules for rails validation error boxes */
 795
 796 #errorExplanation {
 797   width: 400px;
 798   border: 2px solid red;
 799   padding: 7px;
 800   padding-bottom: 12px;
 801   margin-bottom: 20px;
 802   background-color: #f0f0f0;
 803 }
 804
 805 #errorExplanation h2 {
 806   text-align: left;
 807   font-weight: bold;
 808   padding: 5px 5px 5px 15px;
 809   font-size: 12px;
 810   margin: -7px;
 811   background-color: #c00;
 812   color: #fff;
 813 }
 814
 815 #errorExplanation p {
 816   color: #333;
 817   margin-bottom: 0px;
 818   padding: 5px;
 819 }
 820
 821 #errorExplanation ul li {
 822   font-size: 12px;
 823   list-style: square;
 824 }
 825
 826 /* Rules for forms */
 827
 828 .fieldName {
 829   text-align: right;
 830   font-weight: bold;
 831 }
 832
 833 .minorNote {
 834   font-size: 0.8em;
 835 }
 836
 837 input[type="text"], input[type="password"], textarea {
 838   border: 1px solid black;
 839 }
 840
 841 input[type="submit"] {
 842   border: 1px solid black;
 843 }
 844
 845 /* Rules for user images */
 846
 847 img.user_image {
 848   max-width: 100px;
 849   max-height: 100px;
 850   border: 1px solid black;
 851 }
 852
 853 img.user_thumbnail {
 854   max-width: 50px;
 855   max-height: 100px;
 856   border: 1px solid black;
 857 }
 858
 859 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
 860
 861 .nowrap {
 862   white-space: nowrap;
 863 }
 864
 865 /* Rules for geo microformats */
 866
 867 abbr.geo {
 868   border-bottom: none;
 869 }
 870
 871 /* Rules for RSS buttons */
 872
 873 .rsssmall {
 874   position: relative;
 875   top: 4px;
 876 }
 877
 878 /* Rules for doing distinct colour of alternate table rows */
 879
 880 .table0 {
 881   background: #f6f6f6;
 882 }
 883
 884 .table1 {
 885   background: #fff;
 886 }