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