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 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: #0014a6;
  65     background: none;
  66 }
  67 a:visited { color: #5a3696; }
  68 a:active { color: Orange; }
  69 a:hover { text-decoration: underline; }
  70 a.stub { color: #772233; }
  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: 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 3.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: 2em;
 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: 95%;
 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         visibility: visible;
 161         border: 1px solid #2f6fab;
 162         color: Black;
 163         background-color: white;
 164         vertical-align: middle;
 165         padding: 0.2em;
 166     }
 167 }
 168 input.historysubmit {
 169     padding: 0 0.3em 0.3em 0.3em !important;
 170     font-size: 94%;
 171     cursor: pointer;
 172     height: 1.7em !important;
 173     margin-left: 1.6em;
 174 }
 175 input[type="radio"],
 176 input[type="checkbox"] { border:none; }
 177 select {
 178     border: 1px solid #2f6fab;
 179     color: Black;
 180     vertical-align: top;
 181 }
 182 abbr, acronym, .explain {
 183     border-bottom: 1px dotted Black;
 184     color: Black;
 185     background: none;
 186     cursor: help;
 187 }
 188 q {
 189     font-family: Times, "Times New Roman", serif;
 190     font-style: italic;
 191 }
 192 /* disabled for now
 193 blockquote {
 194     font-family: Times, "Times New Roman", serif;
 195     font-style: italic;
 196 }*/
 197 code { background-color: #f9f9f9; }
 198 pre {
 199     padding: 1em;
 200     border: 1px dashed #2f6fab;
 201     color: Black;
 202     background-color: #f9f9f9;
 203     line-height: 1.1em;
 204 }
 205
 206
 207 /*
 208 ** the main content area
 209 */
 210
 211 #siteSub { display: none; }
 212 #contentSub {
 213     font-size: 84%;
 214     line-height: 1.2em;
 215     margin: 0 0 1.4em 1em;
 216     color: #7d7d7d;
 217     width: auto;
 218 }
 219 span.subpages { display: block; }
 220
 221 /* Some space under the headers in the content area */
 222 #bodyContent h1,
 223 #bodyContent h2,
 224 #bodyContent h3,
 225 #bodyContent h4,
 226 #bodyContent h5 {
 227     margin-bottom:0.8em;
 228 }
 229 .firstHeading { margin-bottom:0.1em; }
 230
 231 /* user notification thing */
 232 .usermessage {
 233     background-color: #ffce7b;
 234     border: 1px solid #ffa500;
 235     color: Black;
 236     font-weight: bold;
 237     margin: 2em 0em 1em 0em;
 238     padding: 0.5em 1em;
 239     vertical-align: middle;
 240 }
 241 .error {
 242     color: red;
 243     font-size: larger;
 244 }
 245 #catlinks {
 246     border:1px solid #aaaaaa;
 247     background-color:#f9f9f9;
 248     padding:5px;
 249     margin-top: 1em;
 250 }
 251 /* currently unused, intended to be used by a metadata box
 252 in the bottom-right corner of the content area */
 253 .documentDescription {
 254     /* The summary text describing the document */
 255     font-weight: bold;
 256     display: block;
 257     margin: 1em 0em;
 258     line-height: 1.5em;
 259 }
 260 .documentByLine {
 261     text-align: right;
 262     font-size: 90%;
 263     clear: both;
 264     font-weight: normal;
 265     color: #76797c;
 266 }
 267
 268 /* emulate center */
 269 .center {
 270     width: 100%;
 271     text-align: center;
 272 }
 273 *.center * {
 274     margin-left: auto;
 275     margin-right: auto;
 276 }
 277
 278
 279 /*
 280 ** content styles
 281 */
 282
 283 #toc {
 284     /*border:1px solid #2f6fab;*/
 285     border:1px solid #aaaaaa;
 286     background-color:#f9f9f9;
 287     padding:5px;
 288     font-size: 95%;
 289 }
 290 #toc .tocindent { margin-left: 2em; }
 291 #toc .tocline { margin-bottom: 0px; }
 292 #toc p { margin: 0 }
 293 #toc .toctoggle { font-size: 94%; }
 294 #toc .editsection {
 295     margin-top: 0.7em;
 296     font-size: 94%;
 297 }
 298
 299 /* images */
 300 div.floatright {
 301     float: right;
 302     margin: 0;
 303     position:relative;
 304     border: 0.5em solid White;
 305     border-width: 0.5em 0 0.8em 1.4em;
 306 }
 307 div.floatright p { font-style: italic;}
 308 div.floatleft {
 309     float: left;
 310     margin: 0.3em 0.5em 0.5em 0;
 311     position:relative;
 312     border: 0.5em solid White;
 313     border-width: 0.5em 1.4em 0.8em 0;
 314 }
 315 div.floatleft p { font-style: italic; }
 316 /* thumbnails */
 317 div.thumb {
 318     margin-bottom: 0.5em;
 319     border-style: solid; border-color: White;
 320     width: auto;
 321 }
 322 div.thumb div {
 323     border:1px solid #cccccc;
 324     padding: 3px !important;
 325     background-color:#f9f9f9;
 326     font-size: 94%;
 327     text-align: center;
 328 }
 329 div.thumb div a img {
 330     border:1px solid #cccccc;
 331 }
 332 div.thumb div div.thumbcaption {
 333     border: none;
 334     text-align: left;
 335     padding: 0.3em 0 0.1em 0;
 336 }
 337 div.magnify {
 338     float: right;
 339     border: none !important;
 340     background: none !important;
 341 }
 342 div.magnify a, div.magnify img {
 343     display: block;
 344     border: none !important;
 345     background: none !important;
 346 }
 347
 348 .urlexpansion,
 349 .hiddenStructure {
 350     display: none;
 351 }
 352 img.tex { vertical-align: middle; }
 353 /*
 354 ** classes for special content elements like town boxes
 355 ** intended to be referenced directly from the wiki src
 356 */
 357 /* table standards */
 358 table.rimage {
 359     float:right;
 360     width:1pt;
 361     position:relative;
 362     margin-left:1em;
 363     margin-bottom:1em;
 364     text-align:center;
 365 }
 366 div.tright {
 367     float: right;
 368     border-width: 0.5em 0 0.8em 1.4em;
 369 }
 370 div.tleft {
 371     float: left;
 372     margin-right:0.5em;
 373     border: 0.5em 1.4em 0.8em 0;
 374 }
 375
 376 div.townBox {
 377     position:relative;
 378     float:right;
 379     background:White;
 380     margin-left:1em;
 381     border: 1px solid Grey;
 382     padding:0.3em;
 383     width: 200px;
 384     overflow: hidden;
 385     clear: right;
 386 }
 387 div.townBox dl {
 388     padding: 0;
 389     margin: 0 0 0.3em 0;
 390     font-size: 96%;
 391 }
 392 div.townBox dl dt {
 393     background: none;
 394     margin: 0.4em 0 0 0;
 395 }
 396 div.townBox dl dd {
 397     margin: 0.1em 0 0 1.1em;
 398     background-color: #f3f3f3;
 399 }
 400
 401 /*
 402 ** edit views etc
 403 */
 404
 405 .special li {
 406     line-height: 1.4em;
 407     margin: 0;
 408     padding: 0;
 409 }
 410
 411
 412 /* Page history styling */
 413 /* the auto-generated edit comments */
 414 .autocomment { color: gray; }
 415 #pagehistory span.user {
 416     margin-left: 1.4em;
 417     margin-right: 0.4em;
 418 }
 419 #pagehistory span.minor { font-weight: bold; }
 420 #pagehistory li { border: 1px solid White; }
 421 #pagehistory li.selected {
 422     background-color:#f9f9f9;
 423     border:1px dashed #aaaaaa;
 424 }
 425 /*
 426 ** Diff rendering
 427 */
 428 table.diff { background:white; }
 429 td.diff-otitle { background:#ffffff; }
 430 td.diff-ntitle { background:#ffffff; }
 431 td.diff-addedline { background:#ccffcc; }
 432 td.diff-deletedline { background:#ffffaa; }
 433 td.diff-context { background:#eeeeee; }
 434
 435 /*
 436 ** keep the whitespace in front of the ^=, hides rule from konqueror
 437 ** this is css3, the validator doesn't like it when validating as css2
 438 */
 439 #bodyContent a[href ^="http://"],
 440 #bodyContent a[href ^="gopher://"] {
 441     background: url(external.png) center right no-repeat;
 442     padding-right: 13px;
 443 }
 444 #bodyContent a[href ^="https://"],
 445 .link-https {
 446     background: url("lock_icon.gif") center right no-repeat;
 447     padding-right: 16px;
 448 }
 449 #bodyContent a[href ^="mailto:"],
 450 .link-mailto {
 451     background: url("mail_icon.gif") center right no-repeat;
 452     padding-right: 18px;
 453 }
 454 #bodyContent a[href ^="news://"] {
 455     background: url("news_icon.png") center right no-repeat;
 456     padding-right: 18px;
 457 }
 458 #bodyContent a[href ^="ftp://"],
 459 .link-ftp {
 460     background: url("file_icon.gif") center right no-repeat;
 461     padding-right: 18px;
 462 }
 463 #bodyContent a[href ^="irc://"],
 464 .link-irc {
 465     background: url("discussionitem_icon.gif")  center right no-repeat;
 466     padding-right: 18px;
 467 }
 468 /* this can be used in the content area to switch off
 469 special external link styling */
 470 #bodyContent .plainlinks a {
 471     background: none;
 472     padding: 0;
 473 }
 474 /*
 475 ** Structural Elements
 476 */
 477
 478 /*
 479 ** general portlet styles (elements in the quickbar)
 480 */
 481 .portlet {
 482     border: none;
 483     margin: 0 0 0.5em 0em;
 484     float: none;
 485     padding: 0;
 486     width: 11.6em;
 487     overflow: hidden;
 488 }
 489 .portlet h4 {
 490     font-size: 95%;
 491     font-weight: normal;
 492     white-space: nowrap;
 493 }
 494 .portlet h5 {
 495     background: transparent;
 496     padding: 0em 1em 0em 0.5em;
 497     text-transform: lowercase;
 498     display: inline;
 499     font-size: 91%;
 500     height: 1em;
 501     font-weight: normal;
 502     white-space: nowrap;
 503 }
 504 .portlet h6 {
 505     background: #ffae2e;
 506     border: 1px solid #2f6fab;
 507     border-style: solid solid none solid;
 508     padding: 0em 1em 0em 1em;
 509     text-transform: lowercase;
 510     display: block;
 511     font-size: 1em;
 512     height: 1.2em;
 513     font-weight: normal;
 514     white-space: nowrap;
 515 }
 516 .pBody {
 517     font-size: 95%;
 518     background: White;
 519     border-collapse: collapse;
 520     border: 1px solid #aaaaaa;
 521     padding: 0 0.8em 0.3em 0.5em;
 522 }
 523 .portlet h1,
 524 .portlet h2,
 525 .portlet h3,
 526 .portlet h4 {
 527     margin: 0;
 528     padding: 0;
 529 }
 530 .portlet ul {
 531     line-height: 1.5em;
 532     list-style-type: square;
 533     list-style-image: url("bullet.gif");
 534     font-size:95%;
 535 }
 536 .portlet li {
 537     padding:0;
 538     margin: 0 0 0 0;
 539     margin-bottom: 0;
 540 }
 541
 542 /*
 543 ** Logo properties
 544 */
 545
 546 #p-logo {
 547     z-index: 3;
 548     position:absolute; /*needed to use z-index */
 549     top: 0;
 550     left: 0;
 551     height: 155px;
 552     width: 12em;
 553     overflow: visible;
 554 }
 555 #p-logo h5 { display: none; }
 556 #p-logo a,
 557 #p-logo a:hover {
 558     display: block;
 559     height: 155px;
 560     width: 12.2em;
 561     background-repeat: no-repeat;
 562     background-position: 35% 50% !important;
 563     text-decoration: none;
 564 }
 565
 566 /*
 567 ** the navigation portlet
 568 */
 569
 570 #p-nav {
 571     position:relative;
 572     z-index:3;
 573 }
 574
 575 /*
 576 ** Search portlet
 577 */
 578 #p-search {
 579     position:relative;
 580     z-index:3;
 581 }
 582 #p-search .pBody {
 583     text-align: center;
 584 }
 585 input.searchButton {
 586     margin-top:1px;
 587     padding: 0 0.4em !important;
 588     font-size: 95%;
 589     cursor: pointer;
 590     background-color: White;
 591     border: 1px solid #2f6fab;
 592 }
 593
 594 #searchInput {
 595     border: 1px solid #2f6fab;
 596     width:10.9em;
 597     margin: 0 0 0 0;
 598     font-size: 95%;
 599 }
 600
 601
 602 #p-search .pBody {
 603     padding: 0.5em 0.4em 0.4em 0.4em;
 604 }
 605
 606
 607 /*
 608 ** the personal toolbar
 609 */
 610
 611 #p-personal {
 612     width:100%;
 613     white-space:nowrap;
 614     padding:0 0 0 0;
 615     margin:0;
 616     position:absolute;
 617     left:0px;
 618     top:0px;
 619     z-index: 0;
 620     border: none;
 621     background: none;
 622     overflow: visible;
 623     line-height: 1.2em;
 624 }
 625
 626 #p-personal h5 {
 627     display:none;
 628 }
 629 #p-personal .portlet,
 630 #p-personal .pBody {
 631     padding:0;
 632     margin:0;
 633     border: none;
 634     z-index:0;
 635     overflow: visible;
 636     background: none;
 637 }
 638 /* this is the ul contained in the portlet */
 639 #p-personal ul {
 640     border: none;
 641     line-height: 1.4em;
 642     color: #2f6fab;
 643     padding: 0em 2em 0 3em;
 644     margin: 0;
 645     text-align: right;
 646     text-transform: lowercase;
 647     list-style: none;
 648     z-index:0;
 649     background: none;
 650 }
 651 #p-personal li {
 652     z-index:0;
 653     border:none;
 654     padding:0;
 655     display: inline;
 656     color: #2f6fab;
 657     margin-left: 1em;
 658     line-height: 1.2em;
 659     background: none;
 660 }
 661 #p-personal li a {
 662     text-decoration: none;
 663     color: #005896;
 664     padding-bottom: 0.2em;
 665     background: none;
 666 }
 667 #p-personal li a:hover {
 668     background-color: White;
 669     padding-bottom: 0.2em;
 670     text-decoration: none;
 671 }
 672
 673 /* the icon in front of the user name, single quotes
 674 in bg url to hide it from iemac */
 675 li#pt-userpage,
 676 li#pt-anonuserpage,
 677 li#pt-login {
 678     background:  url('user.gif') top left no-repeat;
 679     background-repeat: no-repeat;
 680     padding-left: 20px;
 681     text-transform: none;
 682 }
 683 #p-personal a.new { color:#ba0000; }
 684
 685 /*
 686 ** the page-related actions- page/talk, edit etc
 687 */
 688
 689 #p-cactions {
 690     position:absolute;
 691     top: 1.3em;
 692     left: 11.5em;
 693     margin: 0;
 694     white-space:nowrap;
 695     width: 76%;
 696     line-height: 1.1em;
 697     overflow: visible;
 698     background: none;
 699     border-collapse: collapse;
 700     padding-left: 1em;
 701     list-style: none;
 702     font-size: 95%;
 703 }
 704 #p-cactions .hiddenStructure { display: none; }
 705 #p-cactions ul {
 706     list-style: none;
 707 }
 708 #p-cactions li {
 709     display: inline;
 710     border: 1px solid #aaaaaa;
 711     border-bottom: none;
 712     padding: 0 0 0.1em 0;
 713     margin: 0 0.3em 0 0;
 714     overflow: visible;
 715     background: White;
 716 }
 717 #p-cactions li.selected {
 718     border-color: #fabd23;
 719     padding: 0 0 0.2em 0;
 720 }
 721 #p-cactions li a {
 722     background-color: White;
 723     color: #0014a6;
 724     border: none;
 725     padding: 0 0.8em 0.3em 0.8em;
 726     text-decoration: none;
 727     text-transform: lowercase;
 728     position: relative;
 729     z-index: 0;
 730     margin: 0;
 731 }
 732 #p-cactions .selected a { z-index: 3; }
 733 #p-cactions .new a { color:#ba0000; }
 734 #p-cactions li a:hover {
 735     z-index: 3;
 736     text-decoration: none;
 737 }
 738 #p-cactions h5 { display: none; }
 739 #p-cactions li.istalk { margin-right: 0; }
 740 #p-cactions li.istalk a { padding-right: 0.5em; }
 741 #p-cactions #ca-addsection a {
 742     padding-left: 0.4em;
 743     padding-right: 0.4em;
 744 }
 745 /* offsets to distinguish the tab groups */
 746 li#ca-talk { margin-right: 1.6em; }
 747 li#ca-watch { margin-left: 1.6em; }
 748
 749
 750 /*
 751 ** the remaining portlets
 752 */
 753 #p-tbx,
 754 #p-lang {
 755     position:relative;
 756     z-index:3;
 757 }
 758
 759 /*
 760 ** footer
 761 */
 762 #footer {
 763     background-color: White;
 764     border-top: 1px solid #fabd23;
 765     border-bottom: 1px solid #fabd23;
 766     margin: 0.6em 0em 1em 0em;
 767     padding: 0.4em 0em 1.2em 0em;
 768     text-align: center;
 769     font-size: 90%;
 770 }
 771 #footer li {
 772     display: inline;
 773     margin: 0 1.3em;
 774 }
 775 /* hide from incapable browsers */
 776 head:first-child+body #footer li { white-space: nowrap; }
 777 #f-poweredbyico, #f-copyrightico {
 778     margin: 0 8px;
 779     position: relative;
 780     top: -2px; /* Bump it up just a tad */
 781 }
 782 #f-poweredbyico {
 783     float: right;
 784     height: 1%;
 785 }
 786 #f-copyrightico {
 787     float: left;
 788     height: 1%;
 789 }
 790
 791 /* js pref toc */
 792 #preftoc {
 793     float: left;
 794     margin: 1em 1em 1em 1em;
 795     width: 13em;
 796 }
 797 #preftoc li { border: 1px solid White; }
 798 #preftoc li.selected {
 799     background-color:#f9f9f9;
 800     border:1px dashed #aaaaaa;
 801 }
 802 #preftoc a,
 803 #preftoc a:active {
 804     display: block;
 805     color: #0014a6;
 806 }
 807 #prefcontrol {
 808     clear: both;
 809     float: left;
 810     margin-top: 1em;
 811 }
 812 div.prefsectiontip {
 813     font-size: 95%;
 814     margin-top: 1em;
 815 }
 816 fieldset.operaprefsection { margin-left: 15em }
 817
 818 /*
 819 ** IE/Mac fixes, hope to find a validating way to move this
 820 ** to a separate stylesheet. This would work but doesn't validate:
 821 ** @import("IEMacFixes.css");
 822 */
 823
 824 /* tabs: border on the a, not the div */
 825 * > html #p-cactions li { border:none; }
 826 * > html #p-cactions li a {
 827     border: 1px solid #aaaaaa;
 828     border-bottom: none;
 829 }
 830 * > html #p-cactions li.selected a { border-color: #fabd23; }
 831 /* footer icons need a fixed width */
 832 * > html #f-poweredbyico,
 833 * > html #f-copyrightico { width: 88px; }
 834 * > html #bodyContent,
 835 * > html #bodyContent pre {
 836     overflow-x: auto;
 837     width: 100%;
 838     padding-bottom: 25px;
 839 }
 840
 841 /* more IE fixes */
 842 /* float/negative margin brokenness */
 843 * html #footer {margin-top: 0;}
 844 * html #column-content {
 845     display: inline;
 846     margin-bottom: 0;
 847 }
 848 * html div.editsection { font-size: smaller; }
 849 #pagehistory li.selected { position: relative; }
 850
 851 /* debugging tool.. */
 852 /*div{ border:1px solid #000000;}*/
 853
 854 #siteNotice {
 855     border: 1px solid red;
 856 }
 857
 858
 859 /* Mac IE 5.0 fix; floated content turns invisible */
 860 * > html #column-content {
 861     float: none;
 862 }
 863 * > html #column-one {
 864     position: absolute;
 865     left: 0;
 866     top: 0;
 867 }
 868 * > html #footer {
 869     margin-left: 13.2em;
 870 }