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: 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: 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     margin-left: auto;
 319     margin-right: auto;
 320 }
 321 div div.thumbcaption {
 322     border: none;
 323     text-align: left;
 324     padding: 0.3em 0 0.1em 0 !important;
 325 }
 326 div.magnify {
 327     float: right;
 328     border: none !important;
 329     background: none !important;
 330 }
 331 div.magnify a, div.magnify img {
 332     display: block;
 333     border: none !important;
 334     background: none !important;
 335 }
 336
 337 .urlexpansion,
 338 .hiddenStructure {
 339     display: none;
 340 }
 341 /*
 342 ** classes for special content elements like town boxes
 343 ** intended to be referenced directly from the wiki src
 344 */
 345 /* table standards */
 346 table.rimage {
 347     float:right;
 348     width:1pt;
 349     position:relative;
 350     margin-left:1em;
 351     margin-bottom:1em;
 352     text-align:center;
 353 }
 354 div.tright {
 355     float: right;
 356     border-width: 0.5em 0 0.8em 1.4em;
 357 }
 358 div.tleft {
 359     float: left;
 360     margin-right:0.5em;
 361     border: 0.5em 1.4em 0.8em 0;
 362 }
 363
 364 div.townBox {
 365     position:relative;
 366     float:right;
 367     background:White;
 368     margin-left:1em;
 369     border: 1px solid Grey;
 370     padding:0.3em;
 371     width: 200px;
 372     overflow: hidden;
 373     clear: right;
 374 }
 375 div.townBox dl {
 376     padding: 0;
 377     margin: 0 0 0.3em 0;
 378     font-size: 96%;
 379 }
 380 div.townBox dl dt {
 381     background: none;
 382     margin: 0.4em 0 0 0;
 383 }
 384 div.townBox dl dd {
 385     margin: 0.1em 0 0 1.1em;
 386     background-color: #f3f3f3;
 387 }
 388
 389 /*
 390 ** edit views etc
 391 */
 392
 393 .special li {
 394     line-height: 1.4em;
 395     margin: 0;
 396     padding: 0;
 397 }
 398 /* the auto-generated edit comments */
 399 .autocomment { color: gray; }
 400 /*
 401 ** Diff rendering
 402 */
 403 table.diff { background:white; }
 404 td.diff-otitle { background:#ffffff; }
 405 td.diff-ntitle { background:#ffffff; }
 406 td.diff-addedline { background:#ccffcc; }
 407 td.diff-deletedline { background:#ffffaa; }
 408 td.diff-context { background:#eeeeee; }
 409
 410 /*
 411 ** keep the whitespace in front of the ^=, hides rule from konqueror
 412 ** this is css3, the validator doesn't like it when validating as css2
 413 */
 414 #bodyContent a[href ^="http://"],
 415 #bodyContent a[href ^="gopher://"] {
 416     background: url(external.png) center right no-repeat;
 417     padding-right: 13px;
 418 }
 419 #bodyContent a[href ^="https://"],
 420 .link-https {
 421     background: url("lock_icon.gif") center right no-repeat;
 422     padding-right: 16px;
 423 }
 424 #bodyContent a[href ^="mailto:"],
 425 .link-mailto {
 426     background: url("mail_icon.gif") center right no-repeat;
 427     padding-right: 18px;
 428 }
 429 #bodyContent a[href ^="news://"] {
 430     background: url("news_icon.png") center right no-repeat;
 431     padding-right: 18px;
 432 }
 433 #bodyContent a[href ^="ftp://"],
 434 .link-ftp {
 435     background: url("file_icon.gif") center right no-repeat;
 436     padding-right: 18px;
 437 }
 438 #bodyContent a[href ^="irc://"],
 439 .link-irc {
 440     background: url("discussionitem_icon.gif")  center right no-repeat;
 441     padding-right: 18px;
 442 }
 443
 444 /*
 445 ** Structural Elements
 446 */
 447
 448 /*
 449 ** general portlet styles (elements in the quickbar)
 450 */
 451 .portlet {
 452     border: none;
 453     margin: 0 0 0.5em 0em;
 454     float: none;
 455     padding: 0;
 456     width: 11.6em;
 457     overflow: hidden;
 458 }
 459 .portlet h4 {
 460     font-size: 95%;
 461     font-weight: normal;
 462     white-space: nowrap;
 463 }
 464 .portlet h5 {
 465     background: transparent;
 466     padding: 0em 1em 0em 0.5em;
 467     text-transform: lowercase;
 468     display: inline;
 469     font-size: 91%;
 470     height: 1em;
 471     font-weight: normal;
 472     white-space: nowrap;
 473 }
 474 .portlet h6 {
 475     background: #ffae2e;
 476     border: 1px solid #2f6fab;
 477     border-style: solid solid none solid;
 478     padding: 0em 1em 0em 1em;
 479     text-transform: lowercase;
 480     display: block;
 481     font-size: 1em;
 482     height: 1.2em;
 483     font-weight: normal;
 484     white-space: nowrap;
 485 }
 486 .pBody {
 487     font-size: 95%;
 488     background: White;
 489     border-collapse: collapse;
 490     border: 1px solid #aaaaaa;
 491     padding: 0 0.8em 0.3em 0.5em;
 492 }
 493 .portlet h1,
 494 .portlet h2,
 495 .portlet h3,
 496 .portlet h4 {
 497     margin: 0;
 498     padding: 0;
 499 }
 500 .portlet ul {
 501     line-height: 1.5em;
 502     list-style-type: square;
 503     list-style-image: url("bullet.gif");
 504     font-size:95%;
 505 }
 506 .portlet li {
 507     padding:0;
 508     margin: 0 0 0 0;
 509     margin-bottom: 0;
 510 }
 511
 512 /*
 513 ** Logo properties
 514 */
 515
 516 #p-logo {
 517     z-index: 3;
 518     position:absolute; /*needed to use z-index */
 519     top: 0;
 520     left: 0;
 521     height: 155px;
 522     width: 12em;
 523     overflow: visible;
 524 }
 525 #p-logo h5 { display: none; }
 526 #p-logo a,
 527 #p-logo a:hover {
 528     display: block;
 529     height: 155px;
 530     width: 12.2em;
 531     background-repeat: no-repeat;
 532     background-position: 35% 50% !important;
 533     text-decoration: none;
 534 }
 535
 536 /*
 537 ** the navigation portlet
 538 */
 539
 540 #p-nav {
 541     position:relative;
 542     z-index:3;
 543 }
 544
 545 /*
 546 ** Search portlet
 547 */
 548 #p-search {
 549     position:relative;
 550     z-index:3;
 551 }
 552 #p-search .pBody {
 553     text-align: center;
 554 }
 555 input.searchButton {
 556     margin-top:1px;
 557     padding: 0 0.4em !important;
 558     font-size: 95%;
 559     cursor: pointer;
 560     background-color: White;
 561     border: 1px solid #2f6fab;
 562 }
 563
 564 #searchInput {
 565     border: 1px solid #2f6fab;
 566     width:10.9em;
 567     margin: 0 0 0 0;
 568     font-size: 95%;
 569 }
 570
 571
 572 #p-search .pBody {
 573     padding: 0.5em 0.4em 0.4em 0.4em;
 574 }
 575
 576
 577 /*
 578 ** the personal toolbar
 579 */
 580
 581 #p-personal {
 582     width:100%;
 583     white-space:nowrap;
 584     padding:0 0 0 0;
 585     margin:0;
 586     position:absolute;
 587     left:0px;
 588     top:0px;
 589     z-index: 0;
 590     border: none;
 591     background: none;
 592     overflow: visible;
 593     line-height: 1.2em;
 594 }
 595
 596 #p-personal h5 {
 597     display:none;
 598 }
 599 #p-personal .portlet,
 600 #p-personal .pBody {
 601     padding:0;
 602     margin:0;
 603     border: none;
 604     z-index:0;
 605     overflow: visible;
 606     background: none;
 607 }
 608 /* this is the ul contained in the portlet */
 609 #p-personal ul {
 610     border: none;
 611     line-height: 1.4em;
 612     color: #2f6fab;
 613     padding: 0em 2em 0 3em;
 614     margin: 0;
 615     text-align: right;
 616     text-transform: lowercase;
 617     list-style: none;
 618     z-index:0;
 619     background: none;
 620 }
 621 #p-personal li {
 622     z-index:0;
 623     border:none;
 624     padding:0;
 625     display: inline;
 626     color: #2f6fab;
 627     margin-left: 1em;
 628     line-height: 1.2em;
 629     background: none;
 630 }
 631 #p-personal li a {
 632     text-decoration: none;
 633     color: #005896;
 634     padding-bottom: 0.2em;
 635     background: none;
 636 }
 637 #p-personal li a:hover {
 638     background-color: White;
 639     padding-bottom: 0.2em;
 640     text-decoration: none;
 641 }
 642
 643 /* the icon in front of the user name, single quotes
 644 in bg url to hide it from iemac */
 645 li#pt-userpage,
 646 li#pt-anonuserpage,
 647 li#pt-login {
 648     background:  url('user.gif') center left no-repeat;
 649     background-repeat: no-repeat;
 650     padding-left: 20px;
 651     text-transform: none;
 652 }
 653
 654 /*
 655 ** the page-related actions- page/talk, edit etc
 656 */
 657
 658 #p-cactions {
 659     position:absolute;
 660     top: 1.3em;
 661     left: 11.5em;
 662     margin: 0;
 663     white-space:nowrap;
 664     width: 76%;
 665     line-height: 1.1em;
 666     overflow: visible;
 667     background: none;
 668     border-collapse: collapse;
 669     padding-left: 1em;
 670     list-style: none;
 671     font-size: 95%;
 672 }
 673 #p-cactions .hiddenStructure { display: none; }
 674 #p-cactions ul {
 675     list-style: none;
 676 }
 677 #p-cactions li {
 678     display: inline;
 679     border: 1px solid #aaaaaa;
 680     border-bottom: none;
 681     padding: 0 0 0.1em 0;
 682     margin: 0 0.3em 0 0;
 683     overflow: visible;
 684     background: White;
 685 }
 686 #p-cactions li.selected {
 687     border-color: #fabd23;
 688     padding: 0 0 0.2em 0;
 689 }
 690 #p-cactions li a {
 691     background-color: White;
 692     color: #005189;
 693     border: none;
 694     padding: 0 0.8em 0.3em 0.8em;
 695     text-decoration: none;
 696     text-transform: lowercase;
 697     position: relative;
 698     z-index: 0;
 699     margin: 0;
 700 }
 701 #p-cactions .selected a { z-index: 3; }
 702 #p-cactions .new a { color:#ba0000; }
 703 #p-cactions li a:hover {
 704     z-index: 3;
 705     text-decoration: none;
 706 }
 707 #p-cactions h5 { display: none; }
 708 #p-cactions li.istalk { margin-right: 0; }
 709 #p-cactions li.istalk a { padding-right: 0.5em; }
 710 #p-cactions #ca-addsection a {
 711     padding-left: 0.4em;
 712     padding-right: 0.4em;
 713 }
 714 /* offsets to distinguish the tab groups */
 715 li#ca-talk { margin-right: 1.6em; }
 716 li#ca-watch { margin-left: 1.6em; }
 717
 718
 719 /*
 720 ** the remaining portlets
 721 */
 722 #p-tbx,
 723 #p-lang {
 724     position:relative;
 725     z-index:3;
 726 }
 727
 728 /*
 729 ** footer
 730 */
 731 #footer {
 732     background-color: White;
 733     border-top: 1px solid #fabd23;
 734     border-bottom: 1px solid #fabd23;
 735     margin: 0.6em 0em 1em 0em;
 736     padding: 0.4em 0em 1.2em 0em;
 737     text-align: center;
 738     font-size: 90%;
 739 }
 740 #footer li {
 741     display: inline;
 742     margin: 0 1.3em;
 743 }
 744 /* hide from incapable browsers */
 745 head:first-child+body #footer li { white-space: nowrap; }
 746 #f-poweredbyico, #f-copyrightico {
 747     margin: 0 8px;
 748     position: relative;
 749     top: -2px; /* Bump it up just a tad */
 750 }
 751 #f-poweredbyico {
 752     float: right;
 753     height: 1%;
 754 }
 755 #f-copyrightico {
 756     float: left;
 757     height: 1%;
 758 }
 759
 760 /*
 761 ** IE/Mac fixes, hope to find a validating way to move this
 762 ** to a separate stylesheet. This would work but doesn't validate:
 763 ** @import("IEMacFixes.css");
 764 */
 765
 766 /* tabs: border on the a, not the div */
 767 *>html #p-cactions li { border:none; }
 768 *>html #p-cactions li a {
 769     border: 1px solid #aaaaaa;
 770     border-bottom: none;
 771 }
 772 *>html #p-cactions li.selected a { border-color: #fabd23; }
 773 /* footer icons need a fixed width */
 774 *>html #f-poweredbyico,
 775 *>html #f-copyrightico { width: 88px; }
 776
 777 /* more IE fixes */
 778 /* fixes for broken IE float handling */
 779 * html #column-content { display: inline; }
 780
 781 /* float/negative margin brokenness */
 782 /* more float brokenness */
 783 * html #bodyContent {
 784     overflow-x: auto;
 785     width: 100%;
 786     padding-bottom: 25px;
 787 }
 788 * html #footer {margin-top: 0;}
 789 * html #column-content {margin-bottom: 0;}
 790 * html div.editsection { font-size: smaller; }
 791
 792 /* debugging tool.. */
 793 /*div{ border:1px solid #000000;}*/
 794