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