Simplify a bit by adding the result inside the wfRunHooks() check
[mediawiki.git] / skins / monobook / main.css
blob72eae86fcaace065b4892d6c3ef8c3bcd2e327bc
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 :)
12 div#column-content {
13 width: 100%;
14 float: right;
15 margin: 0 0 .6em -12.2em;
16 padding: 0;
18 div#content {
19 margin: 2.8em 0 0 12.2em;
20 padding: 0 1em 1em 1em;
21 position: relative;
22 z-index: 2;
24 div#column-one {
25 padding-top: 160px;
27 div#content {
28 background: white;
29 color: black;
30 border: 1px solid #aaa;
31 border-right: none;
32 line-height: 1.5em;
34 /* the left column width is specified in class .portlet */
36 /* Font size:
37 ** We take advantage of keyword scaling- browsers won't go below 9px
38 ** More at http://www.w3.org/2003/07/30-font-size
39 ** http://style.cleverchimp.com/font_size_intervals/altintervals.html
42 body {
43 font: x-small sans-serif;
44 /* @embed */
45 background: #f9f9f9 url(headbg.jpg) 0 0 no-repeat;
46 color: black;
47 margin: 0;
48 padding: 0;
49 direction: ltr; /* Needed for RTL flipping */
50 unicode-bidi: embed;
53 /* scale back up to a sane default */
54 div#globalWrapper {
55 font-size: 127%;
56 width: 100%;
57 margin: 0;
58 padding: 0;
61 /* general styles */
62 a {
63 color: #002bb8;
65 a:visited {
66 color: #5a3696;
68 a.new, #p-personal a.new {
69 color: #cc2200;
72 ul {
73 /* @embed */
74 list-style-image: url(bullet.gif);
77 input.historysubmit {
78 padding: 0 .3em .3em .3em !important;
79 font-size: 94%;
80 cursor: pointer;
81 height: 1.7em !important;
82 margin-left: 1.6em;
85 pre {
86 line-height: 1.1em;
90 ** the main content area
93 #siteNotice {
94 font-size: 95%;
95 padding: 0 0.9em;
97 #localNotice {
98 margin: 0;
100 #siteNotice p {
101 margin: 0;
102 padding: 0;
105 /* currently unused, intended to be used by a metadata box
106 in the bottom-right corner of the content area */
107 .documentDescription {
108 /* The summary text describing the document */
109 font-weight: bold;
110 display: block;
111 margin: 1em 0;
112 line-height: 1.5em;
114 .documentByLine {
115 text-align: right;
116 font-size: 90%;
117 clear: both;
118 font-weight: normal;
119 color: #76797c;
123 ** classes for special content elements like town boxes
124 ** intended to be referenced directly from the wiki src
128 ** User styles
130 /* table standards */
131 table.rimage {
132 float: right;
133 position: relative;
134 margin-left: 1em;
135 margin-bottom: 1em;
136 text-align: center;
140 ** edit views etc
142 .special li {
143 line-height: 1.4em;
144 margin: 0;
145 padding: 0;
149 ** keep the whitespace in front of the ^=, hides rule from konqueror
150 ** this is css3, the validator doesn't like it when validating as css2
152 #bodyContent a.external,
153 #bodyContent a.external[href ^="gopher://"] {
154 /* @embed */
155 background: url(external-ltr.png) center right no-repeat;
156 padding-right: 13px;
158 #bodyContent a.external[href ^="https://"],
159 .link-https {
160 /* @embed */
161 background: url(lock_icon.gif) center right no-repeat;
162 padding-right: 16px;
164 #bodyContent a.external[href ^="mailto:"],
165 .link-mailto {
166 /* @embed */
167 background: url(mail_icon.gif) center right no-repeat;
168 padding-right: 18px;
170 #bodyContent a.external[href ^="news://"] {
171 /* @embed */
172 background: url(news_icon.png) center right no-repeat;
173 padding-right: 18px;
175 #bodyContent a.external[href ^="ftp://"],
176 .link-ftp {
177 /* @embed */
178 background: url(file_icon.gif) center right no-repeat;
179 padding-right: 18px;
181 #bodyContent a.external[href ^="irc://"],
182 #bodyContent a.external[href ^="ircs://"],
183 .link-irc {
184 /* @embed */
185 background: url(discussionitem_icon.gif) center right no-repeat;
186 padding-right: 18px;
188 #bodyContent a.external[href $=".ogg"], #bodyContent a.external[href $=".OGG"],
189 #bodyContent a.external[href $=".mid"], #bodyContent a.external[href $=".MID"],
190 #bodyContent a.external[href $=".midi"], #bodyContent a.external[href $=".MIDI"],
191 #bodyContent a.external[href $=".mp3"], #bodyContent a.external[href $=".MP3"],
192 #bodyContent a.external[href $=".wav"], #bodyContent a.external[href $=".WAV"],
193 #bodyContent a.external[href $=".wma"], #bodyContent a.external[href $=".WMA"],
194 .link-audio {
195 /* @embed */
196 background: url("audio.png") center right no-repeat;
197 padding-right: 13px;
199 #bodyContent a.external[href $=".ogm"], #bodyContent a.external[href $=".OGM"],
200 #bodyContent a.external[href $=".avi"], #bodyContent a.external[href $=".AVI"],
201 #bodyContent a.external[href $=".mpeg"], #bodyContent a.external[href $=".MPEG"],
202 #bodyContent a.external[href $=".mpg"], #bodyContent a.external[href $=".MPG"],
203 .link-video {
204 /* @embed */
205 background: url("video.png") center right no-repeat;
206 padding-right: 13px;
208 #bodyContent a.external[href $=".pdf"], #bodyContent a.external[href $=".PDF"],
209 #bodyContent a.external[href *=".pdf#"], #bodyContent a.external[href *=".PDF#"],
210 #bodyContent a.external[href *=".pdf?"], #bodyContent a.external[href *=".PDF?"],
211 .link-document {
212 /* @embed */
213 background: url("document.png") center right no-repeat;
214 padding-right: 12px;
217 /* Interwiki Styling */
218 #bodyContent a.extiw,
219 #bodyContent a.extiw:active {
220 color: #36b;
223 /* External links */
224 #bodyContent a.external {
225 color: #36b;
229 ** Structural Elements
233 ** general portlet styles (elements in the quickbar)
235 .portlet {
236 border: none;
237 margin: 0 0 .5em;
238 padding: 0;
239 float: none;
240 width: 11.6em;
241 overflow: hidden;
243 html > body .portlet {
244 float: left;
245 clear: left;
247 /* recover IEMac (might be fine with the float, but usually it's close to IE */
248 *>body .portlet {
249 float: none;
250 clear: none;
252 .portlet h4 {
253 font-size: 95%;
254 font-weight: normal;
255 white-space: nowrap;
257 .portlet h5 {
258 background: transparent;
259 padding: 0 1em 0 .5em;
260 display: inline;
261 height: 1em;
262 text-transform: lowercase;
263 font-size: 91%;
264 font-weight: normal;
265 white-space: nowrap;
267 .portlet h6 {
268 background: #ffae2e;
269 border: 1px solid #2f6fab;
270 border-style: solid solid none solid;
271 padding: 0 1em 0 1em;
272 text-transform: lowercase;
273 display: block;
274 font-size: 1em;
275 height: 1.2em;
276 font-weight: normal;
277 white-space: nowrap;
279 .pBody {
280 font-size: 95%;
281 background-color: white;
282 color: black;
283 border-collapse: collapse;
284 border: 1px solid #aaa;
285 padding: 0 .8em .3em .5em;
287 .portlet h1,
288 .portlet h2,
289 .portlet h3,
290 .portlet h4 {
291 margin: 0;
292 padding: 0;
294 .portlet ul {
295 line-height: 1.5em;
296 list-style-type: square;
297 /* @embed */
298 list-style-image: url(bullet.gif);
299 font-size: 95%;
301 .portlet li {
302 padding: 0;
303 margin: 0;
307 ** Logo properties
310 #p-logo {
311 top: 0;
312 left: 0;
313 position: absolute; /*needed to use z-index */
314 z-index: 3;
315 height: 155px;
316 width: 12em;
317 overflow: visible;
319 #p-logo h5 {
320 display: none;
322 #p-logo a,
323 #p-logo a:hover {
324 display: block;
325 height: 155px;
326 width: 12.2em;
327 background-repeat: no-repeat;
328 background-position: 35% 50% !important;
329 text-decoration: none;
333 ** Search portlet
335 #p-search {
336 position: relative;
337 z-index: 3;
339 input.searchButton {
340 margin-top: 1px;
341 font-size: 95%;
343 #searchGoButton {
344 padding-left: .5em;
345 padding-right: .5em;
346 font-weight: bold;
348 #searchInput {
349 width: 10.9em;
350 margin: 0;
351 font-size: 95%;
353 #p-search .pBody {
354 padding: .5em .4em .4em .4em;
355 text-align: center;
357 #p-search #searchform div div {
358 margin-top: .4em;
359 font-size: 95%;
362 ** the personal toolbar
364 #p-personal {
365 position: absolute;
366 left: 0;
367 top: 0;
368 z-index: 0;
370 #p-personal {
371 width: 100%;
372 white-space: nowrap;
373 padding: 0;
374 margin: 0;
375 border: none;
376 background: none;
377 overflow: visible;
378 line-height: 1.2em;
380 #p-personal h5 {
381 display: none;
383 #p-personal .portlet,
384 #p-personal .pBody {
385 z-index: 0;
386 padding: 0;
387 margin: 0;
388 border: none;
389 overflow: visible;
390 background: none;
392 /* this is the ul contained in the portlet */
393 #p-personal ul {
394 border: none;
395 line-height: 1.4em;
396 color: #2f6fab;
397 padding: 0 2em 0 3em;
398 margin: 0;
399 text-align: right;
400 list-style: none;
401 z-index: 0;
402 background: none;
403 cursor: default;
405 #p-personal li {
406 z-index: 0;
407 border: none;
408 padding: 0;
409 display: inline;
410 color: #2f6fab;
411 margin-left: 1em;
412 line-height: 1.2em;
413 background: none;
415 #p-personal li a {
416 text-decoration: none;
417 color: #005896;
418 padding-bottom: .2em;
419 background: none;
421 #p-personal li a:hover {
422 background-color: white;
423 padding-bottom: .2em;
424 text-decoration: none;
426 #p-personal li.active a:hover {
427 background-color: transparent;
429 /* the icon in front of the user name, single quotes
430 in bg url to hide it from iemac */
431 li#pt-userpage,
432 li#pt-anonuserpage,
433 li#pt-login {
434 /* @embed */
435 background: url(user.gif) top left no-repeat;
436 padding-left: 20px;
437 text-transform: none;
439 #p-personal ul {
440 text-transform: lowercase;
442 #p-personal li.active {
443 font-weight: bold;
446 ** the page-related actions- page/talk, edit etc
448 #p-cactions {
449 position: absolute;
450 top: 1.3em;
451 left: 11.5em;
452 margin: 0;
453 white-space: nowrap;
454 width: 76%;
455 line-height: 1.1em;
456 overflow: visible;
457 background: none;
458 border-collapse: collapse;
459 padding-left: 1em;
460 list-style: none;
461 font-size: 95%;
463 #p-cactions ul {
464 list-style: none;
466 #p-cactions li {
467 display: inline;
468 border: 1px solid #aaa;
469 border-bottom: none;
470 padding: 0 0 .1em 0;
471 margin: 0 .3em 0 0;
472 overflow: visible;
473 background: white;
475 #p-cactions li.selected {
476 border-color: #fabd23;
477 padding: 0 0 .2em 0;
478 font-weight: bold;
480 #p-cactions li a {
481 background-color: #fbfbfb;
482 color: #002bb8;
483 border: none;
484 padding: 0 .8em .3em;
485 position: relative;
486 z-index: 0;
487 margin: 0;
488 text-decoration: none;
490 #p-cactions li.selected a {
491 z-index: 3;
492 background-color: white;
494 #p-cactions .new a {
495 color: #ba0000;
497 #p-cactions li a:hover {
498 z-index: 3;
499 text-decoration: none;
500 background-color: white;
502 #p-cactions h5 {
503 display: none;
505 #p-cactions li.istalk {
506 margin-right: 0;
508 #p-cactions li.istalk a {
509 padding-right: .5em;
511 #p-cactions #ca-addsection a {
512 padding-left: .4em;
513 padding-right: .4em;
515 /* offsets to distinguish the tab groups */
516 li#ca-talk {
517 margin-right: 1.6em;
519 li#ca-watch, li#ca-unwatch, li#ca-varlang-0, li#ca-print {
520 margin-left: 1.6em;
522 #p-cactions .pBody {
523 font-size: 1em;
524 background-color: transparent;
525 color: inherit;
526 border-collapse: inherit;
527 border: 0;
528 padding: 0;
530 #p-cactions li a {
531 text-transform: lowercase;
534 #p-lang {
535 position: relative;
536 z-index: 3;
539 /* Override text-transform on languages where capitalization is significant */
540 .capitalize-all-nouns .portlet h5,
541 .capitalize-all-nouns .portlet h6,
542 .capitalize-all-nouns #p-personal ul,
543 .capitalize-all-nouns #p-cactions ul li a {
544 text-transform: none;
547 /* TODO: #t-iscite is only used by the Cite extension, come up with some
548 * system which allows extensions to add to this file on the fly
550 #t-ispermalink, #t-iscite {
551 color: #999;
554 ** footer
556 div#footer {
557 background-color: white;
558 border-top: 1px solid #fabd23;
559 border-bottom: 1px solid #fabd23;
560 margin: .6em 0 1em 0;
561 padding: .4em 0 1.2em 0;
562 text-align: center;
563 font-size: 90%;
565 div#footer li {
566 display: inline;
567 margin: 0 1.3em;
569 #f-poweredbyico, #f-copyrightico {
570 margin: 0 8px;
571 position: relative;
572 top: -2px; /* Bump it up just a tad */
574 #f-poweredbyico {
575 float: right;
576 height: 1%;
578 #f-copyrightico {
579 float: left;
580 height: 1%;
583 .mw-htmlform-submit {
584 font-weight: bold;
585 padding-left: .3em;
586 padding-right: .3em;
587 margin-right: 2em;
590 /* js pref toc */
591 #preftoc {
592 margin: 0;
593 padding: 0;
594 width: 100%;
595 clear: both;
597 #preftoc li {
598 background-color: #f0f0f0;
599 color: #000;
601 #preftoc li {
602 margin: 1px -2px 1px 2px;
603 float: left;
604 padding: 2px 0 3px 0;
605 border: 1px solid #fff;
606 border-right-color: #716f64;
607 border-bottom: 0;
608 position: relative;
609 white-space: nowrap;
610 list-style-type: none;
611 list-style-image: none;
612 z-index: 3;
614 #preftoc li.selected {
615 font-weight: bold;
616 background-color: #f9f9f9;
617 border: 1px solid #aaa;
618 border-bottom: none;
619 cursor: default;
620 top: 1px;
621 padding-top: 2px;
622 margin-right: -3px;
624 #preftoc > li.selected {
625 top: 2px;
627 #preftoc a,
628 #preftoc a:active {
629 display: block;
630 color: #000;
631 padding: 0 .7em;
632 position: relative;
633 text-decoration: none;
635 #preftoc li.selected a {
636 cursor: default;
637 text-decoration: none;
639 #preferences {
640 margin: 0;
641 border: 1px solid #aaa;
642 clear: both;
643 padding: 1.5em;
644 background-color: #F9F9F9;
646 .prefsection {
647 border: none;
648 padding: 0;
649 margin: 0;
652 .prefsection legend {
653 font-weight: bold;
655 .prefsection table, .prefsection legend {
656 background-color: #F9F9F9;
658 .mainLegend {
659 display: none;
661 td.htmlform-tip {
662 font-size: x-small;
663 padding: .2em 2em;
664 color: #666;
667 .preferences-login {
668 clear: both;
669 margin-bottom: 1.5em;
672 .prefcache {
673 font-size: 90%;
674 margin-top: 2em;
677 div#userloginForm,
678 div#userlogin {
679 margin: 0 3em 1em 0;
680 border: 1px solid #aaa;
681 clear: both;
682 padding: 1.5em 2em;
683 background-color: #f9f9f9;
684 float: left;
687 div#userloginForm table,
688 div#userlogin table {
689 background-color: #f9f9f9;
692 div#userloginForm h2,
693 div#userlogin h2 {
694 padding-top: 0;
697 div#userlogin .captcha,
698 div#userloginForm .captcha {
699 border: 1px solid #bbb;
700 padding: 1.5em 2em;
701 background-color: white;
704 #loginend, #signupend {
705 clear: both;
708 #userloginprompt, #languagelinks {
709 font-size: 85%;
712 #login-sectiontip {
713 font-size: 85%;
714 line-height: 1.2;
715 padding-top: 2em;
718 #userlogin .loginText, #userlogin .loginPassword {
719 width: 12em;
722 #userloginlink a, #wpLoginattempt, #wpCreateaccount {
723 font-weight: bold;
727 ** IE/Mac fixes, hope to find a validating way to move this
728 ** to a separate stylesheet. This would work but doesn't validate:
729 ** @import("IEMacFixes.css");
731 /* tabs: border on the a, not the div */
732 * > html #p-cactions li { border: none; }
733 * > html #p-cactions li a {
734 border: 1px solid #aaa;
735 border-bottom: none;
737 * > html #p-cactions li.selected a { border-color: #fabd23; }
738 /* footer icons need a fixed width */
739 * > html #f-poweredbyico,
740 * > html #f-copyrightico { width: 88px; }
741 * > html #bodyContent,
742 * > html #bodyContent pre {
743 overflow-x: auto;
744 width: 100%;
745 padding-bottom: 25px;
748 /* more IE fixes */
749 /* float/negative margin brokenness */
750 * html div#footer {margin-top: 0;}
751 * html div#column-content {
752 display: inline;
753 margin-bottom: 0;
755 #pagehistory li.selected { position: relative; }
757 /* Mac IE 5.0 fix; floated content turns invisible */
758 * > html div#column-content {
759 float: none;
761 * > html div#column-one {
762 position: absolute;
763 left: 0;
764 top: 0;
766 * > html div#footer {
767 margin-left: 13.2em;
769 .redirectText {
770 font-size: 150%;
771 margin: 5px;
774 .printfooter {
775 display: none;
778 div.patrollink {
779 clear: both;
782 .sharedUploadNotice {
783 font-style: italic;
786 span.updatedmarker {
787 color: black;
788 background-color: #0f0;
791 .editExternally {
792 border: 1px solid gray;
793 background-color: #ffffff;
794 padding: 3px;
795 margin-top: 0.5em;
796 float: left;
797 font-size: small;
798 text-align: center;
800 .editExternallyHelp {
801 font-style: italic;
802 color: gray;
805 .toggle {
806 margin-left: 2em;
807 text-indent: -2em;
810 /* @bug 1714 */
811 input#wpSave, input#wpDiff {
812 margin-right: 0.33em;
815 #wpSave {
816 font-weight: bold;
819 /* noarticletext */
820 div.noarticletext {
821 border: 1px solid #ccc;
822 background: #fff;
823 padding: .2em 1em;
824 color: #000;
827 div#searchTargetContainer {
828 left: 10px;
829 top: 10px;
830 width: 90%;
831 background: white;
834 div#searchTarget {
835 padding: 3px;
836 margin: 5px;
837 background: #F0F0F0;
838 border: solid 1px blue;
841 div#searchTarget ul li {
842 list-style: none;
845 div#searchTarget ul li:before {
846 color: orange;
847 content: "\00BB \0020";
850 div#searchTargetHide {
851 float:right;
852 border:solid 1px black;
853 background:#DCDCDC;
854 padding:2px;
857 #powersearch p {
858 margin-top:0px;
861 div.multipageimagenavbox {
862 border: solid 1px silver;
863 padding: 4px;
864 margin: 1em;
865 background: #f0f0f0;
868 div.multipageimagenavbox div.thumb {
869 border: none;
870 margin-left: 2em;
871 margin-right: 2em;
874 div.multipageimagenavbox hr {
875 margin: 6px;
878 table.multipageimage td {
879 text-align: center;
882 .templatesUsed { margin-top: 1.5em; }
884 .mw-summary-preview {
885 margin: 0.1em 0;
888 /* Friendlier slave lag warnings */
889 div.mw-lag-warn-normal,
890 div.mw-lag-warn-high {
891 padding: 3px;
892 text-align: center;
893 margin: 3px auto;
895 div.mw-lag-warn-normal {
896 border: 1px solid #FFCC66;
897 background-color: #FFFFCC;
899 div.mw-lag-warn-high {
900 font-weight: bold;
901 border: 2px solid #FF0033;
902 background-color: #FFCCCC;
905 .MediaTransformError {
906 background-color: #ccc;
907 padding: 0.1em;
909 .MediaTransformError td {
910 text-align: center;
911 vertical-align: middle;
912 font-size: 90%;
915 /* God-damned hack for the crappy layout */
916 .os-suggest {
917 font-size: 127%;
920 /* Sometimes people don't want personal tools to be lowercase! */
921 .no-text-transform {
922 text-transform: none;
925 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
926 .tipsy {
927 font-size: 127%;