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