skins/monobook/main.css

   1 /*
   2 ** MediaWiki 'monobook' style sheet for CSS2-capable browsers.
   3 ** Copyright Gabriel Wicke - http://wikidev.net/
   4 ** License: GPL (http://www.gnu.org/copyleft/gpl.html)
   5 **
   6 ** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John
   7 ** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher,
   8 ** Michael Zeltner and Geir Bækholt)
   9 ** All you guys rock :)
  10 */
  11
  12 div#column-content {
  13         width: 100%;
  14         float: right;
  15         margin: 0 0 .6em -12.2em;
  16         padding: 0;
  17 }
  18 div#content {
  19         margin: 2.8em 0 0 12.2em;
  20         padding: 1em;
  21         position: relative;
  22         z-index: 2;
  23 }
  24 div#column-one {
  25         padding-top: 160px;
  26 }
  27 /* Hide, but keep accessible for screen-readers */
  28 #column-one h2 {
  29         position: absolute;
  30         top: -9999px;
  31 }
  32 div#content {
  33         background: white;
  34         color: black;
  35         border: 1px solid #aaa;
  36         border-right: none;
  37         line-height: 1.5em;
  38 }
  39 /* the left column width is specified in class .portlet */
  40
  41 /* Font size:
  42 ** We take advantage of keyword scaling- browsers won't go below 9px
  43 ** More at http://www.w3.org/2003/07/30-font-size
  44 ** http://style.cleverchimp.com/font_size_intervals/altintervals.html
  45 */
  46
  47 body {
  48         font: x-small sans-serif;
  49         /* @embed */
  50         background: #f9f9f9 url(headbg.jpg) 0 0 no-repeat;
  51         color: black;
  52         margin: 0;
  53         padding: 0;
  54         direction: ltr; /* Needed for RTL flipping */
  55         unicode-bidi: embed;
  56 }
  57
  58 /* scale back up to a sane default */
  59 div#globalWrapper {
  60         font-size: 127%;
  61         width: 100%;
  62         margin: 0;
  63         padding: 0;
  64 }
  65
  66 /* general styles */
  67 a {
  68         color: #002bb8;
  69 }
  70 a:visited {
  71         color: #5a3696;
  72 }
  73 a.new,
  74 #p-personal a.new {
  75         color: #cc2200;
  76 }
  77
  78 ul {
  79         list-style-type: square;
  80         /* @embed */
  81         list-style-image: url(bullet.gif);
  82 }
  83
  84 input.historysubmit {
  85         padding: 0 .3em .3em .3em !important;
  86         font-size: 94%;
  87         cursor: pointer;
  88         height: 1.7em !important;
  89         margin-left: 1.6em;
  90 }
  91
  92 pre, .mw-code {
  93         line-height: 1.1em;
  94 }
  95
  96 #firstHeading {
  97         padding-top: 0;
  98 }
  99 /*
 100 ** the main content area
 101 */
 102
 103 #siteNotice {
 104         font-size: 95%;
 105         padding: 0 0.9em;
 106 }
 107 #localNotice {
 108         margin: 0;
 109 }
 110 #siteNotice p {
 111         margin: 0;
 112         padding: 0;
 113 }
 114
 115 /*
 116 ** classes for special content elements like town boxes
 117 ** intended to be referenced directly from the wiki src
 118 */
 119
 120 /*
 121 ** User styles
 122 */
 123 /* table standards */
 124 table.rimage {
 125         float: right;
 126         position: relative;
 127         margin-left: 1em;
 128         margin-bottom: 1em;
 129         text-align: center;
 130 }
 131
 132 /*
 133 ** edit views etc
 134 */
 135 .special li {
 136         line-height: 1.4em;
 137         margin: 0;
 138         padding: 0;
 139 }
 140
 141 /*
 142 ** keep the whitespace in front of the ^=, hides rule from konqueror
 143 ** this is css3, the validator doesn't like it when validating as css2
 144 */
 145 #bodyContent a.external {
 146         /* @embed */
 147         background: url(external-ltr.png) center right no-repeat;
 148         padding-right: 13px;
 149 }
 150 #bodyContent a.external[href ^="https://"],
 151 .link-https {
 152         /* @embed */
 153         background: url(lock_icon.gif) center right no-repeat;
 154         padding-right: 16px;
 155 }
 156 #bodyContent a.external[href ^="mailto:"],
 157 .link-mailto {
 158         /* @embed */
 159         background: url(mail_icon.gif) center right no-repeat;
 160         padding-right: 18px;
 161 }
 162 #bodyContent a.external[href ^="news:"] {
 163         /* @embed */
 164         background: url(news_icon.png) center right no-repeat;
 165         padding-right: 18px;
 166 }
 167 #bodyContent a.external[href ^="ftp://"],
 168 .link-ftp {
 169         /* @embed */
 170         background: url(file_icon.gif) center right no-repeat;
 171         padding-right: 18px;
 172 }
 173 #bodyContent a.external[href ^="irc://"],
 174 #bodyContent a.external[href ^="ircs://"],
 175 .link-irc {
 176         /* @embed */
 177         background: url(discussionitem_icon.gif) center right no-repeat;
 178         padding-right: 18px;
 179 }
 180 #bodyContent a.external[href $=".ogg"], #bodyContent a.external[href $=".OGG"],
 181 #bodyContent a.external[href $=".mid"], #bodyContent a.external[href $=".MID"],
 182 #bodyContent a.external[href $=".midi"], #bodyContent a.external[href $=".MIDI"],
 183 #bodyContent a.external[href $=".mp3"], #bodyContent a.external[href $=".MP3"],
 184 #bodyContent a.external[href $=".wav"], #bodyContent a.external[href $=".WAV"],
 185 #bodyContent a.external[href $=".wma"], #bodyContent a.external[href $=".WMA"],
 186 .link-audio {
 187         /* @embed */
 188         background: url(audio.png) center right no-repeat;
 189         padding-right: 13px;
 190 }
 191 #bodyContent a.external[href $=".ogm"], #bodyContent a.external[href $=".OGM"],
 192 #bodyContent a.external[href $=".avi"], #bodyContent a.external[href $=".AVI"],
 193 #bodyContent a.external[href $=".mpeg"], #bodyContent a.external[href $=".MPEG"],
 194 #bodyContent a.external[href $=".mpg"], #bodyContent a.external[href $=".MPG"],
 195 .link-video {
 196         /* @embed */
 197         background: url(video.png) center right no-repeat;
 198         padding-right: 13px;
 199 }
 200 #bodyContent a.external[href $=".pdf"], #bodyContent a.external[href $=".PDF"],
 201 #bodyContent a.external[href *=".pdf#"], #bodyContent a.external[href *=".PDF#"],
 202 #bodyContent a.external[href *=".pdf?"], #bodyContent a.external[href *=".PDF?"],
 203 .link-document {
 204         /* @embed */
 205         background: url(document.png) center right no-repeat;
 206         padding-right: 12px;
 207 }
 208
 209 /* Interwiki Styling */
 210 #bodyContent a.extiw,
 211 #bodyContent a.extiw:active {
 212         color: #36b;
 213 }
 214
 215 /* External links */
 216 #bodyContent a.external {
 217         color: #36b;
 218 }
 219
 220 /*
 221 ** Structural Elements
 222 */
 223
 224 /*
 225 ** general portlet styles (elements in the quickbar)
 226 */
 227 .portlet {
 228         border: none;
 229         margin: 0 0 .5em;
 230         padding: 0;
 231         float: none;
 232         width: 11.6em;
 233         overflow: hidden;
 234 }
 235 .portlet h3 {
 236         background: transparent;
 237         padding: 0 1em 0 .5em;
 238         display: inline;
 239         height: 1em;
 240         text-transform: lowercase;
 241         font-size: 91%;
 242         font-weight: normal;
 243         white-space: nowrap;
 244 }
 245 .pBody {
 246         font-size: 95%;
 247         background-color: white;
 248         color: black;
 249         border-collapse: collapse;
 250         border: 1px solid #aaa;
 251         padding: 0 .8em .3em .5em;
 252 }
 253 /* allows .pBody styles to wrap around content added via BaseTemplateAfterPortlet hook */
 254 .pBody:after {
 255         content: '';
 256         clear: both;
 257         display: block;
 258 }
 259 .portlet ul {
 260         line-height: 1.5em;
 261         font-size: 95%;
 262 }
 263 .portlet li {
 264         padding: 0;
 265         margin: 0;
 266 }
 267
 268 /*
 269 ** Logo properties
 270 */
 271
 272 #p-logo {
 273         top: 0;
 274         left: 0;
 275         position: absolute; /*needed to use z-index */
 276         z-index: 3;
 277         height: 155px;
 278         width: 12em;
 279         overflow: visible;
 280 }
 281 #p-logo h3 {
 282         display: none;
 283 }
 284 #p-logo a,
 285 #p-logo a:hover {
 286         display: block;
 287         height: 155px;
 288         width: 12.2em;
 289         background-repeat: no-repeat;
 290         background-position: 35% 50% !important;
 291         text-decoration: none;
 292 }
 293
 294 /*
 295 ** Search portlet
 296 */
 297 #p-search {
 298         position: relative;
 299         z-index: 3;
 300 }
 301 input.searchButton {
 302         margin-top: 1px;
 303         font-size: 95%;
 304 }
 305 #searchGoButton {
 306         padding-left: .5em;
 307         padding-right: .5em;
 308         font-weight: bold;
 309 }
 310 #searchInput {
 311         width: 10.9em;
 312         margin: 0;
 313         font-size: 95%;
 314 }
 315 #p-search .pBody {
 316         padding: .5em .4em .4em .4em;
 317         text-align: center;
 318 }
 319 #p-search #searchform div div {
 320         margin-top: .4em;
 321         font-size: 95%;
 322 }
 323 /*
 324 ** the personal toolbar
 325 */
 326 #p-personal {
 327         position: absolute;
 328         left: 0;
 329         top: 0;
 330         z-index: 3;
 331 }
 332 #p-personal {
 333         width: 100%;
 334         white-space: nowrap;
 335         padding: 0;
 336         margin: 0;
 337         border: none;
 338         background: none;
 339         overflow: visible;
 340         line-height: 1.2em;
 341 }
 342 #p-personal h3 {
 343         display: none;
 344 }
 345 #p-personal .portlet,
 346 #p-personal .pBody {
 347         z-index: 0;
 348         padding: 0;
 349         margin: 0;
 350         border: none;
 351         overflow: visible;
 352         background: none;
 353 }
 354 /* this is the ul contained in the portlet */
 355 #p-personal ul {
 356         border: none;
 357         line-height: 1.4em;
 358         color: #2f6fab;
 359         padding: 0 2em 0 3em;
 360         margin: 0;
 361         text-align: right;
 362         list-style-type: none;
 363         list-style-image: none;
 364         z-index: 0;
 365         background: none;
 366         cursor: default;
 367 }
 368 #p-personal li {
 369         z-index: 0;
 370         border: none;
 371         padding: 0;
 372         display: inline;
 373         color: #2f6fab;
 374         margin-left: 1em;
 375         line-height: 1.2em;
 376         background: none;
 377 }
 378 #p-personal li a {
 379         text-decoration: none;
 380         color: #005896;
 381         padding-bottom: .2em;
 382         background: none;
 383 }
 384 #p-personal li a:hover {
 385         background-color: white;
 386         padding-bottom: .2em;
 387         text-decoration: none;
 388 }
 389 #p-personal li.active a:hover {
 390         background-color: transparent;
 391 }
 392 /* The icon in front of the username / login link */
 393 li#pt-userpage,
 394 li#pt-anonuserpage,
 395 li#pt-login {
 396         /* @embed */
 397         background: url(user.gif) top left no-repeat;
 398         padding-left: 20px;
 399 }
 400 #p-personal ul {
 401         text-transform: lowercase;
 402 }
 403 /* Don't lowercase username or IP addresses (IPv6) */
 404 li#pt-userpage,
 405 li#pt-anonuserpage {
 406         text-transform: none;
 407 }
 408 #p-personal li.active {
 409         font-weight: bold;
 410 }
 411 /*
 412 ** the page-related actions- page/talk, edit etc
 413 */
 414 #p-cactions {
 415         position: absolute;
 416         top: 1.3em;
 417         left: 11.5em;
 418         margin: 0;
 419         white-space: nowrap;
 420         width: 76%;
 421         line-height: 1.1em;
 422         overflow: visible;
 423         background: none;
 424         border-collapse: collapse;
 425         padding-left: 1em;
 426         font-size: 95%;
 427 }
 428 #p-cactions ul {
 429         list-style-type: none;
 430         list-style-image: none;
 431 }
 432 #p-cactions li {
 433         display: inline;
 434         border: 1px solid #aaa;
 435         border-bottom: none;
 436         padding: 0 0 1em 0;
 437         margin: 0 .3em 0 0;
 438         overflow: visible;
 439         background: white;
 440 }
 441 #p-cactions li.selected {
 442         border-color: #fabd23;
 443         font-weight: bold;
 444 }
 445 #p-cactions li a {
 446         background-color: #fbfbfb;
 447         color: #002bb8;
 448         border: none;
 449         padding: 0 .8em .3em;
 450         position: relative;
 451         z-index: 0;
 452         margin: 0;
 453         text-decoration: none;
 454 }
 455 #p-cactions li.selected a {
 456         z-index: 3;
 457         background-color: white;
 458 }
 459 #p-cactions .new a {
 460         color: #ba0000;
 461 }
 462 #p-cactions li a:hover {
 463         z-index: 3;
 464         text-decoration: none;
 465         background-color: white;
 466 }
 467 #p-cactions h3 {
 468         display: none;
 469 }
 470 #p-cactions li.istalk {
 471         margin-right: 0;
 472 }
 473 #p-cactions li.istalk a {
 474         padding-right: .5em;
 475 }
 476 #p-cactions #ca-addsection a {
 477         padding-left: .4em;
 478         padding-right: .4em;
 479 }
 480 /* offsets to distinguish the tab groups */
 481 li#ca-talk {
 482         margin-right: 1.6em;
 483 }
 484 li#ca-watch,
 485 li#ca-unwatch,
 486 li#ca-varlang-0,
 487 li#ca-print {
 488         margin-left: 1.6em;
 489 }
 490 #p-cactions .pBody {
 491         font-size: 1em;
 492         background-color: transparent;
 493         color: inherit;
 494         border-collapse: inherit;
 495         border: 0;
 496         padding: 0;
 497 }
 498 #p-cactions li a {
 499         text-transform: lowercase;
 500 }
 501
 502 #p-lang {
 503         position: relative;
 504         z-index: 3;
 505 }
 506
 507 /* Override text-transform on languages where capitalization is significant */
 508 .capitalize-all-nouns .portlet h3,
 509 .capitalize-all-nouns #p-personal ul,
 510 .capitalize-all-nouns #p-cactions ul li a {
 511         text-transform: none;
 512 }
 513
 514 /* TODO: #t-iscite is only used by the Cite extension, come up with some
 515  * system which allows extensions to add to this file on the fly
 516  */
 517 #t-ispermalink, #t-iscite {
 518         color: #999;
 519 }
 520 /*
 521 ** footer
 522 */
 523 div#footer {
 524         background-color: white;
 525         border-top: 1px solid #fabd23;
 526         border-bottom: 1px solid #fabd23;
 527         margin: .6em 0 1em 0;
 528         overflow: hidden;
 529         padding: .4em 0 .3em 0;
 530         text-align: center;
 531         font-size: 90%;
 532 }
 533 div#footer li {
 534         display: inline;
 535         margin: 0 1.3em;
 536 }
 537 #f-poweredbyico, #f-copyrightico {
 538         margin: 0 8px;
 539         position: relative;
 540         top: -2px; /* Bump it up just a tad */
 541 }
 542 #f-poweredbyico {
 543         float: right;
 544         height: 1%;
 545 }
 546 #f-copyrightico {
 547         float: left;
 548         height: 1%;
 549 }
 550
 551 .mw-htmlform-submit {
 552         font-weight: bold;
 553         padding-left: .3em;
 554         padding-right: .3em;
 555         margin-right: 2em;
 556 }
 557
 558 /* js pref toc */
 559 #preftoc {
 560         margin: 0;
 561         padding: 0;
 562         width: 100%;
 563         clear: both;
 564 }
 565 #preftoc li {
 566         background-color: #f0f0f0;
 567         color: #000;
 568 }
 569 #preftoc li {
 570         margin: 1px -2px 1px 2px;
 571         float: left;
 572         padding: 2px 0 3px 0;
 573         border: 1px solid #fff;
 574         border-right-color: #716f64;
 575         border-bottom: 0;
 576         position: relative;
 577         white-space: nowrap;
 578         list-style-type: none;
 579         list-style-image: none;
 580         z-index: 3;
 581 }
 582 #preftoc li.selected {
 583         font-weight: bold;
 584         background-color: #f9f9f9;
 585         border: 1px solid #aaa;
 586         border-bottom: none;
 587         cursor: default;
 588         top: 1px;
 589         padding-top: 2px;
 590         margin-right: -3px;
 591 }
 592 #preftoc > li.selected {
 593         top: 2px;
 594 }
 595 #preftoc a,
 596 #preftoc a:active {
 597         display: block;
 598         color: #000;
 599         padding: 0 .7em;
 600         position: relative;
 601         text-decoration: none;
 602 }
 603 #preftoc li.selected a {
 604         cursor: default;
 605         text-decoration: none;
 606 }
 607 #preferences {
 608         margin: 0;
 609         border: 1px solid #aaa;
 610         clear: both;
 611         padding: 1.5em;
 612         background-color: #F9F9F9;
 613 }
 614 .prefsection {
 615         border: none;
 616         padding: 0;
 617         margin: 0;
 618 }
 619
 620 .prefsection legend {
 621         font-weight: bold;
 622 }
 623 .prefsection table, .prefsection legend {
 624         background-color: #F9F9F9;
 625 }
 626 .mainLegend {
 627         display: none;
 628 }
 629 td.htmlform-tip {
 630         font-size: x-small;
 631         padding: .2em 2em;
 632         color: #666;
 633 }
 634
 635 .preferences-login {
 636         clear: both;
 637         margin-bottom: 1.5em;
 638 }
 639
 640 .prefcache {
 641         font-size: 90%;
 642         margin-top: 2em;
 643 }
 644
 645 #loginend, #signupend {
 646         clear: both;
 647 }
 648
 649 #userloginprompt, #languagelinks {
 650         font-size: 85%;
 651 }
 652
 653 #login-sectiontip {
 654         font-size: 85%;
 655         line-height: 1.2;
 656         padding-top: 2em;
 657 }
 658
 659 #userloginlink a, #wpLoginattempt, #wpCreateaccount {
 660         font-weight: bold;
 661 }
 662
 663 /*
 664 ** IE/Mac fixes, hope to find a validating way to move this
 665 ** to a separate stylesheet. This would work but doesn't validate:
 666 ** @import("IEMacFixes.css");
 667 */
 668 /* tabs: border on the a, not the div */
 669 * > html #p-cactions li {
 670         border: none;
 671 }
 672 * > html #p-cactions li a {
 673         border: 1px solid #aaa;
 674         border-bottom: none;
 675 }
 676 * > html #p-cactions li.selected a {
 677         border-color: #fabd23;
 678 }
 679 /* footer icons need a fixed width */
 680 * > html #f-poweredbyico,
 681 * > html #f-copyrightico {
 682         width: 88px;
 683 }
 684 * > html #bodyContent,
 685 * > html #bodyContent pre {
 686         overflow-x: auto;
 687         width: 100%;
 688         padding-bottom: 25px;
 689 }
 690
 691 /* more IE fixes */
 692 /* float/negative margin brokenness */
 693 * html div#footer {
 694         margin-top: 0;
 695 }
 696 * html div#column-content {
 697         display: inline;
 698         margin-bottom: 0;
 699 }
 700 #pagehistory li.selected {
 701         position: relative;
 702 }
 703
 704 /* Mac IE 5.0 fix; floated content turns invisible */
 705 * > html div#column-content {
 706         float: none;
 707 }
 708 * > html div#column-one {
 709         position: absolute;
 710         left: 0;
 711         top: 0;
 712 }
 713 * > html div#footer {
 714         margin-left: 13.2em;
 715 }
 716 .redirectText {
 717         font-size: 150%;
 718         margin: 5px;
 719 }
 720
 721 div.patrollink {
 722         clear: both;
 723 }
 724
 725 .sharedUploadNotice {
 726         font-style: italic;
 727 }
 728
 729 span.updatedmarker {
 730         color: black;
 731         background-color: #0f0;
 732 }
 733
 734 .editExternally {
 735         border: 1px solid gray;
 736         background-color: #ffffff;
 737         padding: 3px;
 738         margin-top: 0.5em;
 739         float: left;
 740         font-size: small;
 741         text-align: center;
 742 }
 743 .editExternallyHelp {
 744         font-style: italic;
 745         color: gray;
 746 }
 747
 748 .toggle {
 749         margin-left: 2em;
 750         text-indent: -2em;
 751 }
 752
 753 /* @bug 1714 */
 754 input#wpSave,
 755 input#wpDiff {
 756         margin-right: 0.33em;
 757 }
 758
 759 #wpSave {
 760         font-weight: bold;
 761 }
 762
 763 /* noarticletext */
 764 div.noarticletext {
 765         border: 1px solid #ccc;
 766         background: #fff;
 767         padding: .2em 1em;
 768         color: #000;
 769 }
 770
 771 div#searchTargetContainer {
 772         left: 10px;
 773         top: 10px;
 774         width: 90%;
 775         background: white;
 776 }
 777
 778 div#searchTarget {
 779         padding: 3px;
 780         margin: 5px;
 781         background: #F0F0F0;
 782         border: solid 1px blue;
 783 }
 784
 785 div#searchTarget ul li {
 786         list-style-type: none;
 787         list-style-image: none;
 788 }
 789
 790 div#searchTarget ul li:before {
 791         color: orange;
 792         content: "\00BB \0020";
 793 }
 794
 795 div#searchTargetHide {
 796         float: right;
 797         border: solid 1px black;
 798         background: #DCDCDC;
 799         padding: 2px;
 800 }
 801
 802 #powersearch p {
 803         margin-top: 0;
 804 }
 805
 806 div.multipageimagenavbox {
 807         border: solid 1px silver;
 808         padding: 4px;
 809         margin: 1em;
 810         background: #f0f0f0;
 811 }
 812
 813 div.multipageimagenavbox div.thumb {
 814         border: none;
 815         margin-left: 2em;
 816         margin-right: 2em;
 817 }
 818
 819 div.multipageimagenavbox hr {
 820         margin: 6px;
 821 }
 822
 823 table.multipageimage td {
 824         text-align: center;
 825 }
 826
 827 .templatesUsed {
 828         margin-top: 1.5em;
 829 }
 830
 831 .mw-summary-preview {
 832         margin: 0.1em 0;
 833 }
 834
 835 /* Friendlier slave lag warnings */
 836 div.mw-lag-warn-normal,
 837 div.mw-lag-warn-high {
 838         padding: 3px;
 839         text-align: center;
 840         margin: 3px auto;
 841 }
 842 div.mw-lag-warn-normal {
 843         border: 1px solid #FFCC66;
 844         background-color: #FFFFCC;
 845 }
 846 div.mw-lag-warn-high {
 847         font-weight: bold;
 848         border: 2px solid #FF0033;
 849         background-color: #FFCCCC;
 850 }
 851
 852 .MediaTransformError {
 853         background-color: #ccc;
 854         padding: 0.1em;
 855 }
 856 .MediaTransformError td {
 857         text-align: center;
 858         vertical-align: middle;
 859         font-size: 90%;
 860 }
 861
 862 /* God-damned hack for the crappy layout */
 863 .os-suggest {
 864         font-size: 127%;
 865 }
 866
 867 /* Sometimes people don't want personal tools to be lowercase! */
 868 .no-text-transform {
 869         text-transform: none;
 870 }
 871
 872 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
 873 .tipsy {
 874         font-size: 127%;
 875 }
 876
 877 /* mediawiki.notification */
 878 .skin-monobook .mw-notification {
 879         -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125);
 880         box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125);
 881 }