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