Minor CSS cleanup for Vector and Monobook skins
[mediawiki.git] / skins / monobook / main.css
blobb3a531daefd00b941e03469f5a39e08ded1cf34f
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 /* Hide, but keep accessible for screen-readers */
28 #column-one h2 {
29 position: absolute;
30 top: -9999px;
32 div#content {
33 background: white;
34 color: black;
35 border: 1px solid #aaa;
36 border-right: none;
37 line-height: 1.5em;
39 /* the left column width is specified in class .portlet */
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
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;
58 /* scale back up to a sane default */
59 div#globalWrapper {
60 font-size: 127%;
61 width: 100%;
62 margin: 0;
63 padding: 0;
66 /* general styles */
67 a {
68 color: #002bb8;
70 a:visited {
71 color: #5a3696;
73 a.new,
74 #p-personal a.new {
75 color: #cc2200;
78 ul {
79 list-style-type: square;
80 /* @embed */
81 list-style-image: url(bullet.gif);
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;
92 pre, .mw-code {
93 line-height: 1.1em;
97 ** the main content area
100 #siteNotice {
101 font-size: 95%;
102 padding: 0 0.9em;
104 #localNotice {
105 margin: 0;
107 #siteNotice p {
108 margin: 0;
109 padding: 0;
113 ** classes for special content elements like town boxes
114 ** intended to be referenced directly from the wiki src
118 ** User styles
120 /* table standards */
121 table.rimage {
122 float: right;
123 position: relative;
124 margin-left: 1em;
125 margin-bottom: 1em;
126 text-align: center;
130 ** edit views etc
132 .special li {
133 line-height: 1.4em;
134 margin: 0;
135 padding: 0;
139 ** keep the whitespace in front of the ^=, hides rule from konqueror
140 ** this is css3, the validator doesn't like it when validating as css2
142 #bodyContent a.external,
143 #bodyContent a.external[href ^="gopher://"] {
144 /* @embed */
145 background: url(external-ltr.png) center right no-repeat;
146 padding-right: 13px;
148 #bodyContent a.external[href ^="https://"],
149 .link-https {
150 /* @embed */
151 background: url(lock_icon.gif) center right no-repeat;
152 padding-right: 16px;
154 #bodyContent a.external[href ^="mailto:"],
155 .link-mailto {
156 /* @embed */
157 background: url(mail_icon.gif) center right no-repeat;
158 padding-right: 18px;
160 #bodyContent a.external[href ^="news:"] {
161 /* @embed */
162 background: url(news_icon.png) center right no-repeat;
163 padding-right: 18px;
165 #bodyContent a.external[href ^="ftp://"],
166 .link-ftp {
167 /* @embed */
168 background: url(file_icon.gif) center right no-repeat;
169 padding-right: 18px;
171 #bodyContent a.external[href ^="irc://"],
172 #bodyContent a.external[href ^="ircs://"],
173 .link-irc {
174 /* @embed */
175 background: url(discussionitem_icon.gif) center right no-repeat;
176 padding-right: 18px;
178 #bodyContent a.external[href $=".ogg"], #bodyContent a.external[href $=".OGG"],
179 #bodyContent a.external[href $=".mid"], #bodyContent a.external[href $=".MID"],
180 #bodyContent a.external[href $=".midi"], #bodyContent a.external[href $=".MIDI"],
181 #bodyContent a.external[href $=".mp3"], #bodyContent a.external[href $=".MP3"],
182 #bodyContent a.external[href $=".wav"], #bodyContent a.external[href $=".WAV"],
183 #bodyContent a.external[href $=".wma"], #bodyContent a.external[href $=".WMA"],
184 .link-audio {
185 /* @embed */
186 background: url(audio.png) center right no-repeat;
187 padding-right: 13px;
189 #bodyContent a.external[href $=".ogm"], #bodyContent a.external[href $=".OGM"],
190 #bodyContent a.external[href $=".avi"], #bodyContent a.external[href $=".AVI"],
191 #bodyContent a.external[href $=".mpeg"], #bodyContent a.external[href $=".MPEG"],
192 #bodyContent a.external[href $=".mpg"], #bodyContent a.external[href $=".MPG"],
193 .link-video {
194 /* @embed */
195 background: url(video.png) center right no-repeat;
196 padding-right: 13px;
198 #bodyContent a.external[href $=".pdf"], #bodyContent a.external[href $=".PDF"],
199 #bodyContent a.external[href *=".pdf#"], #bodyContent a.external[href *=".PDF#"],
200 #bodyContent a.external[href *=".pdf?"], #bodyContent a.external[href *=".PDF?"],
201 .link-document {
202 /* @embed */
203 background: url(document.png) center right no-repeat;
204 padding-right: 12px;
207 /* Interwiki Styling */
208 #bodyContent a.extiw,
209 #bodyContent a.extiw:active {
210 color: #36b;
213 /* External links */
214 #bodyContent a.external {
215 color: #36b;
219 ** Structural Elements
223 ** general portlet styles (elements in the quickbar)
225 .portlet {
226 border: none;
227 margin: 0 0 .5em;
228 padding: 0;
229 float: none;
230 width: 11.6em;
231 overflow: hidden;
233 .portlet h3 {
234 background: transparent;
235 padding: 0 1em 0 .5em;
236 display: inline;
237 height: 1em;
238 text-transform: lowercase;
239 font-size: 91%;
240 font-weight: normal;
241 white-space: nowrap;
243 .pBody {
244 font-size: 95%;
245 background-color: white;
246 color: black;
247 border-collapse: collapse;
248 border: 1px solid #aaa;
249 padding: 0 .8em .3em .5em;
251 .portlet ul {
252 line-height: 1.5em;
253 font-size: 95%;
255 .portlet li {
256 padding: 0;
257 margin: 0;
261 ** Logo properties
264 #p-logo {
265 top: 0;
266 left: 0;
267 position: absolute; /*needed to use z-index */
268 z-index: 3;
269 height: 155px;
270 width: 12em;
271 overflow: visible;
273 #p-logo h3 {
274 display: none;
276 #p-logo a,
277 #p-logo a:hover {
278 display: block;
279 height: 155px;
280 width: 12.2em;
281 background-repeat: no-repeat;
282 background-position: 35% 50% !important;
283 text-decoration: none;
287 ** Search portlet
289 #p-search {
290 position: relative;
291 z-index: 3;
293 input.searchButton {
294 margin-top: 1px;
295 font-size: 95%;
297 #searchGoButton {
298 padding-left: .5em;
299 padding-right: .5em;
300 font-weight: bold;
302 #searchInput {
303 width: 10.9em;
304 margin: 0;
305 font-size: 95%;
307 #p-search .pBody {
308 padding: .5em .4em .4em .4em;
309 text-align: center;
311 #p-search #searchform div div {
312 margin-top: .4em;
313 font-size: 95%;
316 ** the personal toolbar
318 #p-personal {
319 position: absolute;
320 left: 0;
321 top: 0;
322 z-index: 0;
324 #p-personal {
325 width: 100%;
326 white-space: nowrap;
327 padding: 0;
328 margin: 0;
329 border: none;
330 background: none;
331 overflow: visible;
332 line-height: 1.2em;
334 #p-personal h3 {
335 display: none;
337 #p-personal .portlet,
338 #p-personal .pBody {
339 z-index: 0;
340 padding: 0;
341 margin: 0;
342 border: none;
343 overflow: visible;
344 background: none;
346 /* this is the ul contained in the portlet */
347 #p-personal ul {
348 border: none;
349 line-height: 1.4em;
350 color: #2f6fab;
351 padding: 0 2em 0 3em;
352 margin: 0;
353 text-align: right;
354 list-style-type: none;
355 list-style-image: none;
356 z-index: 0;
357 background: none;
358 cursor: default;
360 #p-personal li {
361 z-index: 0;
362 border: none;
363 padding: 0;
364 display: inline;
365 color: #2f6fab;
366 margin-left: 1em;
367 line-height: 1.2em;
368 background: none;
370 #p-personal li a {
371 text-decoration: none;
372 color: #005896;
373 padding-bottom: .2em;
374 background: none;
376 #p-personal li a:hover {
377 background-color: white;
378 padding-bottom: .2em;
379 text-decoration: none;
381 #p-personal li.active a:hover {
382 background-color: transparent;
384 /* The icon in front of the username / login link */
385 li#pt-userpage,
386 li#pt-anonuserpage,
387 li#pt-login {
388 /* @embed */
389 background: url(user.gif) top left no-repeat;
390 padding-left: 20px;
392 #p-personal ul {
393 text-transform: lowercase;
395 /* Don't lowercase username or IP addresses (IPv6) */
396 li#pt-userpage,
397 li#pt-anonuserpage {
398 text-transform: none;
400 #p-personal li.active {
401 font-weight: bold;
404 ** the page-related actions- page/talk, edit etc
406 #p-cactions {
407 position: absolute;
408 top: 1.3em;
409 left: 11.5em;
410 margin: 0;
411 white-space: nowrap;
412 width: 76%;
413 line-height: 1.1em;
414 overflow: visible;
415 background: none;
416 border-collapse: collapse;
417 padding-left: 1em;
418 font-size: 95%;
420 #p-cactions ul {
421 list-style-type: none;
422 list-style-image: none;
424 #p-cactions li {
425 display: inline;
426 border: 1px solid #aaa;
427 border-bottom: none;
428 padding: 0 0 .1em 0;
429 margin: 0 .3em 0 0;
430 overflow: visible;
431 background: white;
433 #p-cactions li.selected {
434 border-color: #fabd23;
435 padding: 0 0 .2em 0;
436 font-weight: bold;
438 #p-cactions li a {
439 background-color: #fbfbfb;
440 color: #002bb8;
441 border: none;
442 padding: 0 .8em .3em;
443 position: relative;
444 z-index: 0;
445 margin: 0;
446 text-decoration: none;
448 #p-cactions li.selected a {
449 z-index: 3;
450 background-color: white;
452 #p-cactions .new a {
453 color: #ba0000;
455 #p-cactions li a:hover {
456 z-index: 3;
457 text-decoration: none;
458 background-color: white;
460 #p-cactions h3 {
461 display: none;
463 #p-cactions li.istalk {
464 margin-right: 0;
466 #p-cactions li.istalk a {
467 padding-right: .5em;
469 #p-cactions #ca-addsection a {
470 padding-left: .4em;
471 padding-right: .4em;
473 /* offsets to distinguish the tab groups */
474 li#ca-talk {
475 margin-right: 1.6em;
477 li#ca-watch,
478 li#ca-unwatch,
479 li#ca-varlang-0,
480 li#ca-print {
481 margin-left: 1.6em;
483 #p-cactions .pBody {
484 font-size: 1em;
485 background-color: transparent;
486 color: inherit;
487 border-collapse: inherit;
488 border: 0;
489 padding: 0;
491 #p-cactions li a {
492 text-transform: lowercase;
495 #p-lang {
496 position: relative;
497 z-index: 3;
500 /* Override text-transform on languages where capitalization is significant */
501 .capitalize-all-nouns .portlet h3,
502 .capitalize-all-nouns #p-personal ul,
503 .capitalize-all-nouns #p-cactions ul li a {
504 text-transform: none;
507 /* TODO: #t-iscite is only used by the Cite extension, come up with some
508 * system which allows extensions to add to this file on the fly
510 #t-ispermalink, #t-iscite {
511 color: #999;
514 ** footer
516 div#footer {
517 background-color: white;
518 border-top: 1px solid #fabd23;
519 border-bottom: 1px solid #fabd23;
520 margin: .6em 0 1em 0;
521 padding: .4em 0 1.2em 0;
522 text-align: center;
523 font-size: 90%;
525 div#footer li {
526 display: inline;
527 margin: 0 1.3em;
529 #f-poweredbyico, #f-copyrightico {
530 margin: 0 8px;
531 position: relative;
532 top: -2px; /* Bump it up just a tad */
534 #f-poweredbyico {
535 float: right;
536 height: 1%;
538 #f-copyrightico {
539 float: left;
540 height: 1%;
543 .mw-htmlform-submit {
544 font-weight: bold;
545 padding-left: .3em;
546 padding-right: .3em;
547 margin-right: 2em;
550 /* js pref toc */
551 #preftoc {
552 margin: 0;
553 padding: 0;
554 width: 100%;
555 clear: both;
557 #preftoc li {
558 background-color: #f0f0f0;
559 color: #000;
561 #preftoc li {
562 margin: 1px -2px 1px 2px;
563 float: left;
564 padding: 2px 0 3px 0;
565 border: 1px solid #fff;
566 border-right-color: #716f64;
567 border-bottom: 0;
568 position: relative;
569 white-space: nowrap;
570 list-style-type: none;
571 list-style-image: none;
572 z-index: 3;
574 #preftoc li.selected {
575 font-weight: bold;
576 background-color: #f9f9f9;
577 border: 1px solid #aaa;
578 border-bottom: none;
579 cursor: default;
580 top: 1px;
581 padding-top: 2px;
582 margin-right: -3px;
584 #preftoc > li.selected {
585 top: 2px;
587 #preftoc a,
588 #preftoc a:active {
589 display: block;
590 color: #000;
591 padding: 0 .7em;
592 position: relative;
593 text-decoration: none;
595 #preftoc li.selected a {
596 cursor: default;
597 text-decoration: none;
599 #preferences {
600 margin: 0;
601 border: 1px solid #aaa;
602 clear: both;
603 padding: 1.5em;
604 background-color: #F9F9F9;
606 .prefsection {
607 border: none;
608 padding: 0;
609 margin: 0;
612 .prefsection legend {
613 font-weight: bold;
615 .prefsection table, .prefsection legend {
616 background-color: #F9F9F9;
618 .mainLegend {
619 display: none;
621 td.htmlform-tip {
622 font-size: x-small;
623 padding: .2em 2em;
624 color: #666;
627 .preferences-login {
628 clear: both;
629 margin-bottom: 1.5em;
632 .prefcache {
633 font-size: 90%;
634 margin-top: 2em;
637 div#userloginForm,
638 div#userlogin {
639 margin: 0 3em 1em 0;
640 border: 1px solid #aaa;
641 clear: both;
642 padding: 1.5em 2em;
643 background-color: #f9f9f9;
644 float: left;
647 div#userloginForm table,
648 div#userlogin table {
649 background-color: #f9f9f9;
652 div#userloginForm h2,
653 div#userlogin h2 {
654 padding-top: 0;
657 div#userlogin .captcha,
658 div#userloginForm .captcha {
659 border: 1px solid #bbb;
660 padding: 1.5em 2em;
661 background-color: white;
664 #loginend, #signupend {
665 clear: both;
668 #userloginprompt, #languagelinks {
669 font-size: 85%;
672 #login-sectiontip {
673 font-size: 85%;
674 line-height: 1.2;
675 padding-top: 2em;
678 #userlogin .loginText, #userlogin .loginPassword {
679 width: 12em;
682 #userloginlink a, #wpLoginattempt, #wpCreateaccount {
683 font-weight: bold;
687 ** IE/Mac fixes, hope to find a validating way to move this
688 ** to a separate stylesheet. This would work but doesn't validate:
689 ** @import("IEMacFixes.css");
691 /* tabs: border on the a, not the div */
692 * > html #p-cactions li {
693 border: none;
695 * > html #p-cactions li a {
696 border: 1px solid #aaa;
697 border-bottom: none;
699 * > html #p-cactions li.selected a {
700 border-color: #fabd23;
702 /* footer icons need a fixed width */
703 * > html #f-poweredbyico,
704 * > html #f-copyrightico {
705 width: 88px;
707 * > html #bodyContent,
708 * > html #bodyContent pre {
709 overflow-x: auto;
710 width: 100%;
711 padding-bottom: 25px;
714 /* more IE fixes */
715 /* float/negative margin brokenness */
716 * html div#footer {
717 margin-top: 0;
719 * html div#column-content {
720 display: inline;
721 margin-bottom: 0;
723 #pagehistory li.selected {
724 position: relative;
727 /* Mac IE 5.0 fix; floated content turns invisible */
728 * > html div#column-content {
729 float: none;
731 * > html div#column-one {
732 position: absolute;
733 left: 0;
734 top: 0;
736 * > html div#footer {
737 margin-left: 13.2em;
739 .redirectText {
740 font-size: 150%;
741 margin: 5px;
744 div.patrollink {
745 clear: both;
748 .sharedUploadNotice {
749 font-style: italic;
752 span.updatedmarker {
753 color: black;
754 background-color: #0f0;
757 .editExternally {
758 border: 1px solid gray;
759 background-color: #ffffff;
760 padding: 3px;
761 margin-top: 0.5em;
762 float: left;
763 font-size: small;
764 text-align: center;
766 .editExternallyHelp {
767 font-style: italic;
768 color: gray;
771 .toggle {
772 margin-left: 2em;
773 text-indent: -2em;
776 /* @bug 1714 */
777 input#wpSave,
778 input#wpDiff {
779 margin-right: 0.33em;
782 #wpSave {
783 font-weight: bold;
786 /* noarticletext */
787 div.noarticletext {
788 border: 1px solid #ccc;
789 background: #fff;
790 padding: .2em 1em;
791 color: #000;
794 div#searchTargetContainer {
795 left: 10px;
796 top: 10px;
797 width: 90%;
798 background: white;
801 div#searchTarget {
802 padding: 3px;
803 margin: 5px;
804 background: #F0F0F0;
805 border: solid 1px blue;
808 div#searchTarget ul li {
809 list-style-type: none;
810 list-style-image: none;
813 div#searchTarget ul li:before {
814 color: orange;
815 content: "\00BB \0020";
818 div#searchTargetHide {
819 float: right;
820 border: solid 1px black;
821 background: #DCDCDC;
822 padding: 2px;
825 #powersearch p {
826 margin-top: 0;
829 div.multipageimagenavbox {
830 border: solid 1px silver;
831 padding: 4px;
832 margin: 1em;
833 background: #f0f0f0;
836 div.multipageimagenavbox div.thumb {
837 border: none;
838 margin-left: 2em;
839 margin-right: 2em;
842 div.multipageimagenavbox hr {
843 margin: 6px;
846 table.multipageimage td {
847 text-align: center;
850 .templatesUsed {
851 margin-top: 1.5em;
854 .mw-summary-preview {
855 margin: 0.1em 0;
858 /* Friendlier slave lag warnings */
859 div.mw-lag-warn-normal,
860 div.mw-lag-warn-high {
861 padding: 3px;
862 text-align: center;
863 margin: 3px auto;
865 div.mw-lag-warn-normal {
866 border: 1px solid #FFCC66;
867 background-color: #FFFFCC;
869 div.mw-lag-warn-high {
870 font-weight: bold;
871 border: 2px solid #FF0033;
872 background-color: #FFCCCC;
875 .MediaTransformError {
876 background-color: #ccc;
877 padding: 0.1em;
879 .MediaTransformError td {
880 text-align: center;
881 vertical-align: middle;
882 font-size: 90%;
885 /* God-damned hack for the crappy layout */
886 .os-suggest {
887 font-size: 127%;
890 /* Sometimes people don't want personal tools to be lowercase! */
891 .no-text-transform {
892 text-transform: none;
895 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
896 .tipsy {
897 font-size: 127%;
900 /* mediawiki.notification */
901 .skin-monobook .mw-notification {
902 -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125);
903 -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125);
904 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125);