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