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