stylesheets/monobook/main.css

   1 /*
   2 ** Mediawiki 'monobook' style sheet for CSS2-capable browsers.
   3 ** Copyright Gabriel Wicke - http://www.aulinx.de/
   4 **
   5 ** Based on http://www.positioniseverything.net/ordered-floats.html by Big John
   6 ** and the Plone 2.0 styles, see http://plone.org/.
   7 ** Alexander Limi - http://www.plonesolutions.com
   8 ** additional plone work:
   9 ** Joe Geldart & Tom Croucher - http://www.netalleynetworks.com, Michael Zeltner - http://niij.org,
  10 ** Geir Bækholt - http://www.plonesolutions.com
  11 ** All you guys rock :)
  12 */
  13
  14 #column-content {
  15     width: 100%;
  16     float: right;
  17     margin: 0 0 0.6em -12.2em;
  18     padding:0;
  19 }
  20 #content {
  21     margin: 2.8em 0 0 12.2em;
  22     padding: 0em 1em 1.5em 1em;
  23     background: White;
  24     border: 1px solid #aaaaaa;
  25     border-right: none;
  26     line-height: 1.5em;
  27     position: relative;
  28     z-index: 2;
  29 }
  30 #column-one { padding-top: 160px; }
  31 /* the left column width is specified in class .portlet */
  32
  33 /* Font size:
  34 ** We take advantage of keyword scaling- browsers won't go below 9px
  35 ** More at http://www.w3.org/2003/07/30-font-size
  36 ** http://style.cleverchimp.com/font_size_intervals/altintervals.html
  37 */
  38
  39 body {
  40     font: x-small "Bitstream Vera Sans", "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  41     background: #f9f9f9 url("headbg.jpg") 0px 0px no-repeat;
  42     color: Black;
  43     margin: 0;
  44     padding: 0;
  45 }
  46
  47 /* scale back up to a sane default */
  48 #globalWrapper {
  49     font-size:123%;
  50     width: 100%;
  51     margin: 0;
  52     padding: 0;
  53 }
  54 .visualClear { clear: both; }
  55
  56 /* general styles */
  57
  58 table {
  59     font-size: 100%;
  60     background: White;
  61 }
  62 a {
  63     text-decoration: none;
  64     color: #005189;
  65     background: none;
  66 }
  67 a:visited { color: #5a3696; }
  68 a:active { color: Orange; }
  69 a:hover { text-decoration: underline; }
  70 a.stub,
  71 a.new { color:#ba0000; }
  72
  73 img {
  74     border: none;
  75     vertical-align: middle;
  76 }
  77 p {
  78     margin: 0.4em 0em 0.7em 0em;
  79     line-height: 1.5em;
  80 }
  81
  82 p img { margin: 0; }
  83
  84 hr {
  85     height: 1px;
  86     color: #aaaaaa;
  87     background-color: #aaaaaa;
  88     border: 0;
  89     margin: 0.2em 0 0.2em 0;
  90 }
  91
  92 h1, h2, h3, h4, h5, h6 {
  93     color: Black;
  94     background: none;
  95     font-family: "Bitstream Vera Sans", "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
  96     font-weight: normal;
  97     margin: 0;
  98     padding-top: 0.5em;
  99     padding-bottom: 0.17em;
 100     border-bottom: 1px solid #aaaaaa;
 101 }
 102 h1 { font-size: 188%; }
 103 h2 { font-size: 150%; }
 104 h3, h4, h5, h6 {
 105     border-bottom: none;
 106     font-weight: bold;
 107 }
 108 h3 { font-size: 132%; }
 109 h4 { font-size: 116%; }
 110 h5 { font-size: 100%; }
 111 h6 { font-size: 80%;  }
 112
 113 ul {
 114     line-height: 1.5em;
 115     list-style-type: square;
 116     margin: 0.3em 0 0 1.5em;
 117     padding:0;
 118     list-style-image: url("bullet.gif");
 119 }
 120 ol {
 121     line-height: 1.5em;
 122     margin: 0.3em 0 0 2.2em;
 123     padding:0;
 124 }
 125 li { margin-bottom: 0.1em; }
 126 dt { font-weight: bold; }
 127 dd {
 128     line-height: 1.5em;
 129     margin-bottom: 0.8em;
 130     margin-left: 1.6em;
 131 }
 132
 133 fieldset {
 134     border: 1px solid #2f6fab;
 135     margin: 1em 0em 1em 0em;
 136     padding: 0em 1em 1em 1em;
 137     line-height: 1.5em;
 138 }
 139 legend {
 140     background: White;
 141     padding: 0.5em;
 142     font-size: 90%;
 143 }
 144 form {
 145     border: none;
 146     margin: 0;
 147 }
 148
 149 textarea {
 150     border: 1px solid #2f6fab;
 151     color: Black;
 152     background-color: white;
 153     width: 100%;
 154     padding: 0.1em;
 155     overflow: auto;
 156 }
 157 /* hide this from ie/mac and konq2.2 */
 158 @media All {
 159     head:first-child+body input {
 160         font-family: "Bitstream Vera Sans", "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
 161         visibility: visible;
 162         border: 1px solid #2f6fab;
 163         color: Black;
 164         background-color: white;
 165         vertical-align: middle;
 166         padding: 0.2em;
 167     }
 168 }
 169 input[type="radio"],
 170 input[type="checkbox"] { border:none; }
 171 select {
 172     border: 1px solid #2f6fab;
 173     color: Black;
 174     vertical-align: top;
 175 }
 176 abbr, acronym, .explain {
 177     border-bottom: 1px dotted Black;
 178     color: Black;
 179     background: none;
 180     cursor: help;
 181 }
 182 q {
 183     font-family: Times, "Times New Roman", serif;
 184     font-style: italic;
 185 }
 186 blockquote {
 187     font-family: Times, "Times New Roman", serif;
 188     font-style: italic;
 189 }
 190 code { background-color: #f9f9f9; }
 191 pre {
 192     padding: 1em;
 193     border: 1px dashed #2f6fab;
 194     color: Black;
 195     background-color: #f9f9f9;
 196 }
 197
 198
 199 /*
 200 ** the main content area
 201 */
 202
 203 #siteSub { display: none; }
 204 #contentSub {
 205     font-size: 84%;
 206     line-height: 1.2em;
 207     margin: 0 0 1.4em 1em;
 208     color: #7d7d7d;
 209     width: auto;
 210 }
 211 span.subpages { display: block; }
 212 #catlinks {
 213     margin: 0;
 214     padding: 0;
 215     width: 34%;
 216     text-align: right;
 217     float: right;
 218 }
 219
 220 /* Some space under the headers in the content area */
 221 #bodyContent h1,
 222 #bodyContent h2,
 223 #bodyContent h3,
 224 #bodyContent h4,
 225 #bodyContent h5 {
 226     margin-bottom:0.8em;
 227 }
 228 .firstHeading { margin-bottom:0.1em; }
 229
 230 /* user notification thing */
 231 .usermessage {
 232     background-color: #ffce7b;
 233     border: 1px solid #ffa500;
 234     color: Black;
 235     font-weight: bold;
 236     margin: 2em 0em 1em 0em;
 237     padding: 0.5em 1em;
 238     vertical-align: middle;
 239 }
 240 .error {
 241     color: red;
 242     font-size: larger;
 243 }
 244 /* currently unused, intended to be used by a metadata box
 245 in the bottom-right corner of the content area */
 246 .documentDescription {
 247     /* The summary text describing the document */
 248     font-weight: bold;
 249     display: block;
 250     margin: 1em 0em;
 251     line-height: 1.5em;
 252 }
 253 .documentByLine {
 254     text-align: right;
 255     font-size: 90%;
 256     clear: both;
 257     font-weight: normal;
 258     color: #76797c;
 259 }
 260
 261 /* emulate center */
 262 .center {
 263     width: 100%;
 264     text-align: center;
 265 }
 266 *.center * {
 267     margin-left: auto;
 268     margin-right: auto;
 269 }
 270
 271
 272 /*
 273 ** content styles
 274 */
 275
 276 #toc {
 277     /*border:1px solid #2f6fab;*/
 278     border:1px solid #aaaaaa;
 279     background-color:#f9f9f9;
 280     padding:5px;
 281     font-size: 95%;
 282 }
 283 .tocindent { margin-left: 2em; }
 284 .tocline { margin-bottom: 0px; }
 285 .toctoggle, .editsection { font-size: 94%; }
 286
 287 /* images */
 288 div.floatright {
 289     float: right;
 290     margin: 0;
 291     position:relative;
 292     border: 0.5em solid White;
 293     border-width: 0.5em 0 0.8em 1.4em;
 294 }
 295 div.floatright p { font-style: italic;}
 296 div.floatleft {
 297     float: left;
 298     margin: 0.3em 0.5em 0.5em 0;
 299     position:relative;
 300     border: 0.5em solid White;
 301     border-width: 0.5em 1.4em 0.8em 0;
 302 }
 303 div.floatleft p { font-style: italic; }
 304 /* thumbnails */
 305 div.thumb {
 306     margin-bottom: 0.5em;
 307     border-style: solid; border-color: White;
 308     width: auto;
 309 }
 310 div.thumb div {
 311     border:1px solid #cccccc;
 312     padding: 3px !important;
 313     background-color:#f9f9f9;
 314     font-size: 94%;
 315 }
 316 div.thumb div a img {
 317     border:1px solid #cccccc;
 318 }
 319 div div.thumbcaption {
 320     border: none;
 321     text-align: left;
 322     padding: 0.3em 0 0.1em 0 !important;
 323 }
 324 div.magnify {
 325     float: right;
 326     border: none !important;
 327     background: none !important;
 328 }
 329 div.magnify a, div.magnify img {
 330     display: block;
 331     border: none !important;
 332     background: none !important;
 333 }
 334
 335 .urlexpansion,
 336 .hiddenStructure {
 337     display: none;
 338 }
 339 /*
 340 ** classes for special content elements like town boxes
 341 ** intended to be referenced directly from the wiki src
 342 */
 343 /* table standards */
 344 table.rimage {
 345     float:right;
 346     width:1pt;
 347     position:relative;
 348     margin-left:1em;
 349     margin-bottom:1em;
 350     text-align:center;
 351 }
 352 div.tright {
 353     float: right;
 354     border-width: 0.5em 0 0.8em 1.4em;
 355 }
 356 div.tleft {
 357     float: left;
 358     margin-right:0.5em;
 359     border: 0.5em 1.4em 0.8em 0;
 360 }
 361
 362 div.townBox {
 363     position:relative;
 364     float:right;
 365     background:White;
 366     margin-left:1em;
 367     border: 1px solid Grey;
 368     padding:0.3em;
 369     width: 200px;
 370     overflow: hidden;
 371     clear: right;
 372 }
 373 div.townBox dl {
 374     padding: 0;
 375     margin: 0 0 0.3em 0;
 376     font-size: 96%;
 377 }
 378 div.townBox dl dt {
 379     background: none;
 380     margin: 0.4em 0 0 0;
 381 }
 382 div.townBox dl dd {
 383     margin: 0.1em 0 0 1.1em;
 384     background-color: #f3f3f3;
 385 }
 386
 387 /*
 388 ** edit views etc
 389 */
 390
 391 .special li {
 392     line-height: 1.4em;
 393     margin: 0;
 394     padding: 0;
 395 }
 396 /* the auto-generated edit comments */
 397 .autocomment { color: gray; }
 398 /*
 399 ** Diff rendering
 400 */
 401 table.diff {
 402     background:white;
 403 }
 404 td.diff-otitle {
 405     background:#ffffff;
 406 }
 407 td.diff-ntitle {
 408     background:#ffffff;
 409 }
 410 td.diff-addedline {
 411     background:#ccffcc;
 412 }
 413 td.diff-deletedline {
 414     background:#ffffaa;
 415 }
 416 td.diff-context {
 417     background:#eeeeee;
 418 }
 419
 420 /*
 421 ** keep the whitespace in front of the ^=, hides rule from konqueror
 422 ** this is css3, the validator doesn't like it when validating as css2
 423 */
 424 #bodyContent a[href ^="http://"],
 425 #bodyContent a[href ^="gopher://"] {
 426     background: url(external.png) center right no-repeat;
 427     padding-right: 13px;
 428 }
 429 #bodyContent a[href ^="https://"],
 430 .link-https {
 431     background: url("lock_icon.gif") center right no-repeat;
 432     padding-right: 16px;
 433 }
 434 #bodyContent a[href ^="mailto:"],
 435 .link-mailto {
 436     background: url("mail_icon.gif") center right no-repeat;
 437     padding-right: 18px;
 438 }
 439 #bodyContent a[href ^="news://"] {
 440     background: url("news_icon.png") center right no-repeat;
 441     padding-right: 18px;
 442 }
 443 #bodyContent a[href ^="ftp://"],
 444 .link-ftp {
 445     background: url("file_icon.gif") center right no-repeat;
 446     padding-right: 18px;
 447 }
 448 #bodyContent a[href ^="irc://"],
 449 .link-irc {
 450     background: url("discussionitem_icon.gif")  center right no-repeat;
 451     padding-right: 18px;
 452 }
 453
 454 /*
 455 ** Structural Elements
 456 */
 457
 458 /*
 459 ** general portlet styles (elements in the quickbar)
 460 */
 461 .portlet {
 462     border: none;
 463     margin: 0 0 0.5em 0em;
 464     float: none;
 465     padding: 0;
 466     width: 11.6em;
 467     overflow: hidden;
 468 }
 469 .portlet h4 {
 470     font-size: 95%;
 471     font-weight: normal;
 472     white-space: nowrap;
 473 }
 474 .portlet h5 {
 475     background: transparent;
 476     padding: 0em 1em 0em 0.5em;
 477     text-transform: lowercase;
 478     display: inline;
 479     font-size: 91%;
 480     height: 1em;
 481     font-weight: normal;
 482     white-space: nowrap;
 483 }
 484 .portlet h6 {
 485     background: #ffae2e;
 486     border: 1px solid #2f6fab;
 487     border-style: solid solid none solid;
 488     padding: 0em 1em 0em 1em;
 489     text-transform: lowercase;
 490     display: block;
 491     font-size: 1em;
 492     height: 1.2em;
 493     font-weight: normal;
 494     white-space: nowrap;
 495 }
 496 .pBody {
 497     font-size: 95%;
 498     background: White;
 499     border-collapse: collapse;
 500     border: 1px solid #aaaaaa;
 501     padding: 0 0.8em 0.3em 0.5em;
 502 }
 503 .portlet h1,
 504 .portlet h2,
 505 .portlet h3,
 506 .portlet h4 {
 507     margin: 0;
 508     padding: 0;
 509 }
 510 .portlet ul {
 511     line-height: 1.5em;
 512     list-style-type: square;
 513     list-style-image: url("bullet.gif");
 514     font-size:95%;
 515 }
 516 .portlet li {
 517     padding:0;
 518     margin: 0 0 0 0;
 519     margin-bottom: 0;
 520 }
 521
 522 /*
 523 ** Logo properties
 524 */
 525
 526 #p-logo {
 527     z-index: 3;
 528     position:absolute; /*needed to use z-index */
 529     top: 0;
 530     left: 0;
 531     height: 155px;
 532     width: 12em;
 533     overflow: visible;
 534 }
 535 #p-logo h5 { display: none; }
 536 #p-logo a,
 537 #p-logo a:hover {
 538     display: block;
 539     height: 155px;
 540     width: 12.2em;
 541     background-repeat: no-repeat;
 542     background-position: 35% 50% !important;
 543     text-decoration: none;
 544 }
 545
 546 /*
 547 ** the navigation portlet
 548 */
 549
 550 #p-nav {
 551     position:relative;
 552     z-index:3;
 553 }
 554
 555 /*
 556 ** Search portlet
 557 */
 558 #p-search {
 559     position:relative;
 560     z-index:3;
 561 }
 562 #p-search .pBody {
 563     text-align: center;
 564 }
 565 input.searchButton {
 566     margin-top:1px;
 567     padding: 0 0.4em !important;
 568     font-size: 95%;
 569     cursor: pointer;
 570     background-color: White;
 571     border: 1px solid #2f6fab;
 572 }
 573
 574 #searchInput {
 575     border: 1px solid #2f6fab;
 576     width:10.9em;
 577     margin: 0 0 0 0;
 578     font-size: 95%;
 579 }
 580
 581
 582 #p-search .pBody {
 583     padding: 0.5em 0.4em 0.4em 0.4em;
 584 }
 585
 586
 587 /*
 588 ** the personal toolbar
 589 */
 590
 591 #p-personal {
 592     width:100%;
 593     white-space:nowrap;
 594     padding:0 0 0 0;
 595     margin:0;
 596     position:absolute;
 597     left:0px;
 598     top:0px;
 599     z-index: 0;
 600     border: none;
 601     background: none;
 602     overflow: visible;
 603     line-height: 1.2em;
 604 }
 605
 606 #p-personal h5 {
 607     display:none;
 608 }
 609 #p-personal .portlet,
 610 #p-personal .pBody {
 611     padding:0;
 612     margin:0;
 613     border: none;
 614     z-index:0;
 615     overflow: visible;
 616     background: none;
 617 }
 618 /* this is the ul contained in the portlet */
 619 #p-personal ul {
 620     border: none;
 621     line-height: 1.4em;
 622     color: #2f6fab;
 623     padding: 0em 2em 0 3em;
 624     margin: 0;
 625     text-align: right;
 626     text-transform: lowercase;
 627     list-style: none;
 628     z-index:0;
 629     background: none;
 630 }
 631 #p-personal li {
 632     z-index:0;
 633     border:none;
 634     padding:0;
 635     display: inline;
 636     color: #2f6fab;
 637     margin-left: 1em;
 638     line-height: 1.2em;
 639     background: none;
 640 }
 641 #p-personal li a {
 642     text-decoration: none;
 643     color: #005896;
 644     padding-bottom: 0.2em;
 645     background: none;
 646 }
 647 #p-personal li a:hover {
 648     background-color: White;
 649     padding-bottom: 0.2em;
 650     text-decoration: none;
 651 }
 652
 653 /* the icon in front of the user name, single quotes
 654 in bg url to hide it from iemac */
 655 li#pt-userpage,
 656 li#pt-anonuserpage,
 657 li#pt-login {
 658     background:  url('user.gif') center left no-repeat;
 659     background-repeat: no-repeat;
 660     padding-left: 20px;
 661     text-transform: none;
 662 }
 663
 664 /*
 665 ** the page-related actions- page/talk, edit etc
 666 */
 667
 668 #p-cactions {
 669     position:absolute;
 670     top: 1.3em;
 671     left: 11.5em;
 672     margin: 0;
 673     white-space:nowrap;
 674     width: 76%;
 675     line-height: 1.1em;
 676     overflow: visible;
 677     background: none;
 678     border-collapse: collapse;
 679     padding-left: 1em;
 680     list-style: none;
 681     font-size: 95%;
 682 }
 683 #p-cactions .hiddenStructure { display: none; }
 684 #p-cactions ul {
 685     list-style: none;
 686 }
 687 #p-cactions li {
 688     display: inline;
 689     border: 1px solid #aaaaaa;
 690     border-bottom: none;
 691     padding: 0 0 0.1em 0;
 692     margin: 0 0.3em 0 0;
 693     overflow: visible;
 694     background: White;
 695 }
 696 #p-cactions li.selected {
 697     border-color: #fabd23;
 698     padding: 0 0 0.2em 0;
 699 }
 700 #p-cactions li a {
 701     background-color: White;
 702     color: #005189;
 703     border: none;
 704     padding: 0 0.8em 0.3em 0.8em;
 705     text-decoration: none;
 706     text-transform: lowercase;
 707     position: relative;
 708     z-index: 0;
 709     margin: 0;
 710 }
 711 #p-cactions .selected a { z-index: 3; }
 712 #p-cactions .new a { color:#ba0000; }
 713 #p-cactions li a:hover {
 714     z-index: 3;
 715     text-decoration: none;
 716 }
 717 #p-cactions h5 { display: none; }
 718 /* offsets to distinguish the tab groups */
 719 li#ca-talk { margin-right: 1.6em; }
 720 li#ca-watch { margin-left: 1.6em; }
 721
 722
 723 /*
 724 ** the remaining portlets
 725 */
 726 #p-tbx,
 727 #p-lang {
 728     position:relative;
 729     z-index:3;
 730 }
 731
 732 /*
 733 ** footer
 734 */
 735 #footer {
 736     background-color: White;
 737     border-top: 1px solid #fabd23;
 738     border-bottom: 1px solid #fabd23;
 739     margin: 0.6em 0em 1em 0em;
 740     padding: 0.4em 0em 1.2em 0em;
 741     text-align: center;
 742     font-size: 90%;
 743 }
 744 #footer li {
 745     display: inline;
 746     margin: 0 1.3em;
 747 }
 748 /* hide from incapable browsers */
 749 head:first-child+body #footer li { white-space: nowrap; }
 750 #f-poweredbyico, #f-copyrightico {
 751     margin: 0 8px;
 752     position: relative;
 753     top: -2px; /* Bump it up just a tad */
 754 }
 755 #f-poweredbyico {
 756     float: right;
 757     height: 1%;
 758 }
 759 #f-copyrightico {
 760     float: left;
 761     height: 1%;
 762 }
 763
 764 /*
 765 ** IE/Mac fixes, hope to find a validating way to move this
 766 ** to a separate stylesheet. This would work but doesn't validate:
 767 ** @import("IEMacFixes.css");
 768 */
 769
 770 /* tabs: border on the a, not the div */
 771 *>html #p-cactions li { border:none; }
 772 *>html #p-cactions li a {
 773     border: 1px solid #aaaaaa;
 774     border-bottom: none;
 775 }
 776 *>html #p-cactions li.selected a { border-color: #fabd23; }
 777 /* footer icons need a fixed width */
 778 *>html #f-poweredbyico,
 779 *>html #f-copyrightico { width: 88px; }
 780
 781 /* more IE fixes */
 782 /* fixes for broken IE float handling */
 783 * html #column-content { display: inline; }
 784
 785 /* float/negative margin brokenness */
 786 /* more float brokenness */
 787 * html #bodyContent {
 788     overflow-x: auto;
 789     width: 100%;
 790     padding-bottom: 25px;
 791 }
 792 * html #footer {margin-top: 0;}
 793 * html #column-content {margin-bottom: 0;}
 794 * html div.editsection { font-size: smaller; }
 795
 796 /* debugging tool.. */
 797 /*div{ border:1px solid #000000;}*/
 798