public/stylesheets/common.css

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