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