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
 284 {
 285   background: #fff;
 286 }
 287
 288 #tabnav a.disabled
 289 {
 290   font-style: italic;
 291 }
 292
 293 /* Rules for greeting bar in the top right corner */
 294
 295 #greeting {
 296   float: right;
 297   height: 20px;
 298   margin: 0px;
 299   padding-right: 10px;
 300   padding-top: 5px;
 301   font-size: 13px;
 302   line-height: 14px;
 303   background: url('../images/tab_bottom.gif') repeat-x bottom;
 304 }
 305
 306 .greeting-bar-unread {
 307   font-weight: bold;
 308 }
 309
 310 /* Rules for the message shown in place of the map when javascript is disabled */
 311
 312 #noscript {
 313   z-index: 20000000;
 314   position: absolute;
 315   top: 15px;
 316   left: 15px
 317 }
 318
 319 /* Rules for OpenLayers maps */
 320
 321 #map {
 322   position: absolute;
 323   border: 1px solid black;
 324   margin: 0px;
 325   padding: 0px;
 326   left: 0px;
 327   right: 2px;
 328   top: 0px;
 329   bottom: 0px;
 330 }
 331
 332 .olControlAttribution {
 333   display: none !important;
 334 }
 335
 336 #map #permalink {
 337   z-index:10000;
 338   position:absolute;
 339   bottom:15px;
 340   right:15px;
 341   font-size:smaller;
 342   text-align: right;
 343 }
 344
 345 /* Rules for attribution text under the main map shown on printouts */
 346
 347 #attribution {
 348   display: none;
 349 }
 350
 351 /* Rules for the popout map sidebar */
 352
 353 #sidebar {
 354   display: none;
 355   position: absolute;
 356   border: 1px solid black;
 357   margin: 0px;
 358   padding: 0px;
 359   width: 30%;
 360   left: 0px;
 361   top: 0px;
 362   bottom: 0px;
 363 }
 364
 365 #sidebar_content {
 366   overflow: auto;
 367   position: absolute;
 368   font-size: 13px;
 369   line-height: 14px;
 370   top: 29px;
 371   bottom: 0px;
 372   left: 0px;
 373   right: 0px;
 374 }
 375
 376 .sidebar_title {
 377   margin: 0px;
 378   padding: 3px 6px;
 379   height: 29px;
 380   font-size: 14px;
 381   line-height: 15px;
 382   border-bottom: 1px solid black;
 383   background: #bbb;
 384 }
 385
 386 /* Rules for the map key which appears in the popout sidebar */
 387
 388 #mapkey h3 {
 389     font-size: 110%;
 390     font-weight: normal;
 391     text-align: center;
 392 }
 393
 394 #mapkey .mapkey-table {
 395     padding-left: 5px;
 396     padding-right: 5px;
 397 }
 398
 399 #mapkey .mapkey-table-key {
 400 }
 401
 402 #mapkey .mapkey-table-value {
 403     font-size: 90%;
 404 }
 405
 406 /* Rules for search results which appear in the popout sidebar */
 407
 408 .search_searching {
 409   margin-top: 5px;
 410   margin-bottom: 5px;
 411 }
 412
 413 .search_results_heading {
 414   margin: 0px;
 415   padding: 3px 6px;
 416   border: 1px solid #ccc;
 417   background: #ddd;
 418 }
 419
 420 .search_results_entry {
 421   margin: 0px;
 422   padding: 2px 6px;
 423 }
 424
 425 .search_results_error {
 426   margin: 0px;
 427   padding: 2px 6px 0px;
 428   color: #f00;
 429 }
 430
 431 /* Rules for data browser information which appears in the popout sidebar */
 432
 433 .browse_heading {
 434   margin: 0px;
 435   padding: 3px 6px;
 436   border: 1px solid #ccc;
 437   background: #ddd;
 438 }
 439
 440 .browse_details {
 441   margin: 0px;
 442   padding: 0px 6px;
 443 }
 444
 445 /* Rules for export information which appears in the popout sidebar */
 446
 447 .export_heading {
 448   margin: 0px;
 449   padding: 3px 6px;
 450   border: 1px solid #ccc;
 451   background: #ddd;
 452 }
 453
 454 .export_bounds {
 455   width: 100%;
 456   text-align: center;
 457 }
 458
 459 .export_bound {
 460   margin: 5px;
 461 }
 462
 463 .export_details {
 464   padding: 2px 6px;
 465 }
 466
 467 #export_osm {
 468   display: none;
 469 }
 470
 471 #export_mapnik {
 472   display: none;
 473 }
 474
 475 #export_osmarender {
 476   display: none;
 477 }
 478
 479 .export_hint {
 480   padding: 0px 12px;
 481   font-style: italic;
 482 }
 483
 484 .export_buttons {
 485   width: 100%;
 486   text-align: center;
 487 }
 488
 489 /* Rules for the main content area */
 490
 491 #content {
 492   padding: 0px;
 493   margin: 0px;
 494   position: absolute;
 495   right: 10px;
 496   bottom: 10px;
 497   line-height: 1.2em;
 498   text-align: left;
 499 }
 500
 501 /* Rules for the changeset list shown by the history tab etc */
 502
 503 #changeset_list, #keyvalue {
 504   width: 100%;
 505   font-size: small;
 506   text-align: left;
 507   border-collapse: collapse;
 508   border-width: 0px;
 509 }
 510
 511 #changeset_list .date {
 512   white-space: nowrap;
 513 }
 514
 515 #changeset_list .user {
 516   white-space: nowrap;
 517 }
 518
 519 #changeset_list .area {
 520   white-space: nowrap;
 521 }
 522
 523 #changeset_list.th {
 524   font-weight: bold;
 525 }
 526
 527 /* Rules for the trace list shown by the traces tab etc */
 528
 529 #trace_list {
 530   font-size: small;
 531   text-align: left;
 532   border-collapse: collapse;
 533   border-width: 0px;
 534 }
 535
 536 #trace_list .trace_summary {
 537   font-size: 12px;
 538   color: gray;
 539 }
 540
 541 /* Rules for the account settings page */
 542
 543 #accountForm td {
 544   padding-bottom: 10px;
 545 }
 546
 547 #accountImage td {
 548   padding-bottom: 0px;
 549 }
 550
 551 .nohome .location {
 552   display: none;
 553 }
 554
 555 #homerow .message {
 556   display: none;
 557 }
 558
 559 .nohome .message {
 560   display: inline !important;
 561 }
 562
 563 /* Rules for the user map */
 564
 565 .user_map .olControlPanZoomBar {
 566   display: none;
 567 }
 568
 569 .user_map .olControlPanZoom {
 570   display: block;
 571 }
 572
 573 /* Rules for user popups on maps */
 574
 575 .user_popup p {
 576   padding-top: 3px;
 577   padding-bottom: 3px;
 578   margin-top: 0px;
 579   margin-bottom: 0px;
 580   margin-left: 55px;
 581   margin-right: 2px;
 582 }
 583
 584 /* Rules for message in/out box page */
 585
 586 #messages {
 587   border: 1px solid #ccc;
 588 }
 589
 590 .inbox-row-unread .inbox-subject {
 591   font-weight: bold;
 592 }
 593
 594 /* Rules for "flash" notice boxes shown at the top of the content area */
 595
 596 #error {
 597   border: 1px solid red;
 598   padding: 7px;
 599   background-color: #fff0f0;
 600   margin-bottom: 20px;
 601 }
 602
 603 #warning {
 604   border: 1px solid orange;
 605   padding: 7px;
 606   background-color: #fff6f0;
 607   margin-bottom: 20px;
 608 }
 609
 610 #notice {
 611   border: 1px solid green;
 612   padding: 7px;
 613   background-color: #f0fff0;
 614   margin-bottom: 20px;
 615 }
 616
 617 /* Rules for highlighting fields with rails validation errors */
 618
 619 .fieldWithErrors {
 620   padding: 2px;
 621   background-color: red;
 622   display: table;
 623 }
 624
 625 /* Rules for rails validation error boxes */
 626
 627 #errorExplanation {
 628   width: 400px;
 629   border: 2px solid red;
 630   padding: 7px;
 631   padding-bottom: 12px;
 632   margin-bottom: 20px;
 633   background-color: #f0f0f0;
 634 }
 635
 636 #errorExplanation h2 {
 637   text-align: left;
 638   font-weight: bold;
 639   padding: 5px 5px 5px 15px;
 640   font-size: 12px;
 641   margin: -7px;
 642   background-color: #c00;
 643   color: #fff;
 644 }
 645
 646 #errorExplanation p {
 647   color: #333;
 648   margin-bottom: 0px;
 649   padding: 5px;
 650 }
 651
 652 #errorExplanation ul li {
 653   font-size: 12px;
 654   list-style: square;
 655 }
 656
 657 /* Rules for forms */
 658
 659 .fieldName {
 660   text-align: right;
 661   font-weight: bold;
 662 }
 663
 664 .minorNote {
 665   font-size: 0.8em;
 666 }
 667
 668 input[type="text"], input[type="password"], textarea {
 669   border: 1px solid black;
 670 }
 671
 672 input[type="submit"] {
 673   border: 1px solid black;
 674 }
 675
 676 /* Rules for user images */
 677
 678 img.user_image {
 679   max-width: 100px;
 680   max-height: 100px;
 681   border: 1px solid black;
 682 }
 683
 684 img.user_thumbnail {
 685   max-width: 50px;
 686   max-height: 100px;
 687   border: 1px solid black;
 688 }
 689
 690 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
 691
 692 .nowrap {
 693   white-space: nowrap;
 694 }
 695
 696 /* Rules for geo microformats */
 697
 698 abbr.geo {
 699   border-bottom: none;
 700 }
 701
 702 /* Rules for RSS buttons */
 703
 704 .rsssmall {
 705   position: relative;
 706   top: 4px;
 707 }
 708
 709 /* Rules for doing distinct colour of alternate table rows */
 710
 711 .table0 {
 712   background: #f6f6f6;
 713 }
 714
 715 .table1 {
 716   background: #fff;
 717 }