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