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