Merge "De-duplicate pages in replaceInternal"
[mediawiki.git] / skins / MonoBook / main.css
blobcb76ae3e2aaa616914596e3150e353e3d2cf7ab4
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;
19 div#content {
20 margin: 2.8em 0 0 12.2em;
21 padding: 1em;
22 position: relative;
23 z-index: 2;
26 div#column-one {
27 padding-top: 160px;
30 /* Hide, but keep accessible for screen-readers */
31 #column-one h2 {
32 position: absolute;
33 top: -9999px;
36 div#content {
37 background: white;
38 color: black;
39 border: 1px solid #aaa;
40 border-right: none;
41 line-height: 1.5em;
44 /* the left column width is specified in class .portlet */
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
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;
63 /* scale back up to a sane default */
64 div#globalWrapper {
65 font-size: 127%;
66 width: 100%;
67 margin: 0;
68 padding: 0;
71 /* general styles */
72 a {
73 color: #002bb8;
76 a:visited {
77 color: #5a3696;
80 a.new,
81 #p-personal a.new {
82 color: #cc2200;
85 ul {
86 list-style-type: square;
87 /* @embed */
88 list-style-image: url(bullet.gif);
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;
99 pre, .mw-code {
100 line-height: 1.1em;
103 #firstHeading {
104 padding-top: 0;
108 ** the main content area
111 #siteNotice {
112 font-size: 95%;
113 padding: 0 0.9em;
116 #localNotice {
117 margin: 0;
120 #siteNotice p {
121 margin: 0;
122 padding: 0;
126 ** classes for special content elements like town boxes
127 ** intended to be referenced directly from the wiki src
131 ** User styles
133 /* table standards */
134 table.rimage {
135 float: right;
136 position: relative;
137 margin-left: 1em;
138 margin-bottom: 1em;
139 text-align: center;
143 ** edit views etc
145 .special li {
146 line-height: 1.4em;
147 margin: 0;
148 padding: 0;
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
155 #bodyContent a.external {
156 /* @embed */
157 background: url(external-ltr.png) center right no-repeat;
158 padding-right: 13px;
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;
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;
175 #bodyContent a.external[href ^="news:"] {
176 /* @embed */
177 background: url(news_icon.png) center right no-repeat;
178 padding-right: 18px;
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;
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;
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;
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;
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;
227 /* Interwiki Styling */
228 #bodyContent a.extiw,
229 #bodyContent a.extiw:active {
230 color: #36b;
233 /* External links */
234 #bodyContent a.external {
235 color: #36b;
239 ** Structural Elements
243 ** general portlet styles (elements in the quickbar)
245 .portlet {
246 border: none;
247 margin: 0 0 .5em;
248 padding: 0;
249 float: none;
250 width: 11.6em;
251 overflow: hidden;
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;
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;
274 /* allows .pBody styles to wrap around content added via BaseTemplateAfterPortlet hook */
275 .pBody:after {
276 content: '';
277 clear: both;
278 display: block;
281 .portlet ul {
282 line-height: 1.5em;
283 font-size: 95%;
286 .portlet li {
287 padding: 0;
288 margin: 0;
292 ** Logo properties
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;
305 #p-logo h3 {
306 display: none;
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;
320 ** Search portlet
322 #p-search {
323 position: relative;
324 z-index: 3;
327 input.searchButton {
328 margin-top: 1px;
329 font-size: 95%;
332 #searchGoButton {
333 padding-left: .5em;
334 padding-right: .5em;
335 font-weight: bold;
338 #searchInput {
339 width: 10.9em;
340 margin: 0;
341 font-size: 95%;
344 #p-search .pBody {
345 padding: .5em .4em .4em .4em;
346 text-align: center;
349 #p-search #searchform div div {
350 margin-top: .4em;
351 font-size: 95%;
355 ** the personal toolbar
357 #p-personal {
358 position: absolute;
359 left: 0;
360 top: 0;
361 z-index: 3;
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;
375 #p-personal h3 {
376 display: none;
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;
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;
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;
415 #p-personal li a {
416 text-decoration: none;
417 color: #005896;
418 padding-bottom: .2em;
419 background: none;
422 #p-personal li a:hover {
423 background-color: white;
424 padding-bottom: .2em;
425 text-decoration: none;
428 #p-personal li.active a:hover {
429 background-color: transparent;
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;
441 #p-personal ul {
442 text-transform: lowercase;
445 /* Don't lowercase username or IP addresses (IPv6) */
446 li#pt-userpage,
447 li#pt-anonuserpage {
448 text-transform: none;
451 #p-personal li.active {
452 font-weight: bold;
456 ** the page-related actions- page/talk, edit etc
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%;
473 #p-cactions ul {
474 list-style-type: none;
475 list-style-image: none;
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;
488 #p-cactions li.selected {
489 border-color: #fabd23;
490 font-weight: bold;
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;
504 #p-cactions li.selected a {
505 z-index: 3;
506 background-color: white;
509 #p-cactions .new a {
510 color: #ba0000;
513 #p-cactions li a:hover {
514 z-index: 3;
515 text-decoration: none;
516 background-color: white;
519 #p-cactions h3 {
520 display: none;
523 #p-cactions li.istalk {
524 margin-right: 0;
527 #p-cactions li.istalk a {
528 padding-right: .5em;
531 #p-cactions #ca-addsection a {
532 padding-left: .4em;
533 padding-right: .4em;
536 /* offsets to distinguish the tab groups */
537 li#ca-talk {
538 margin-right: 1.6em;
541 li#ca-watch,
542 li#ca-unwatch,
543 li#ca-varlang-0,
544 li#ca-print {
545 margin-left: 1.6em;
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;
557 #p-cactions li a {
558 text-transform: lowercase;
561 #p-lang {
562 position: relative;
563 z-index: 3;
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;
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
576 #t-ispermalink, #t-iscite {
577 color: #999;
581 ** footer
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%;
594 div#footer li {
595 display: inline;
596 margin: 0 1.3em;
599 #f-poweredbyico, #f-copyrightico {
600 margin: 0 8px;
601 position: relative;
602 top: -2px; /* Bump it up just a tad */
605 #f-poweredbyico {
606 float: right;
607 height: 1%;
610 #f-copyrightico {
611 float: left;
612 height: 1%;
615 .mw-htmlform-submit {
616 font-weight: bold;
617 padding-left: .3em;
618 padding-right: .3em;
619 margin-right: 2em;
622 /* js pref toc */
623 #preftoc {
624 margin: 0;
625 padding: 0;
626 width: 100%;
627 clear: both;
630 #preftoc li {
631 background-color: #f0f0f0;
632 color: #000;
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;
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;
660 #preftoc > li.selected {
661 top: 2px;
664 #preftoc a,
665 #preftoc a:active {
666 display: block;
667 color: #000;
668 padding: 0 .7em;
669 position: relative;
670 text-decoration: none;
673 #preftoc li.selected a {
674 cursor: default;
675 text-decoration: none;
678 #preferences {
679 margin: 0;
680 border: 1px solid #aaa;
681 clear: both;
682 padding: 1.5em;
683 background-color: #F9F9F9;
686 .prefsection {
687 border: none;
688 padding: 0;
689 margin: 0;
692 .prefsection legend {
693 font-weight: bold;
696 .prefsection table, .prefsection legend {
697 background-color: #F9F9F9;
700 .mainLegend {
701 display: none;
704 td.htmlform-tip {
705 font-size: x-small;
706 padding: .2em 2em;
707 color: #666;
710 .preferences-login {
711 clear: both;
712 margin-bottom: 1.5em;
715 .prefcache {
716 font-size: 90%;
717 margin-top: 2em;
720 #userloginprompt, #languagelinks {
721 font-size: 85%;
724 #login-sectiontip {
725 font-size: 85%;
726 line-height: 1.2;
727 padding-top: 2em;
730 #userloginlink a, #wpLoginattempt, #wpCreateaccount {
731 font-weight: bold;
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.
741 #pagehistory li.selected {
742 position: relative;
745 .redirectText {
746 font-size: 150%;
747 margin: 5px;
750 div.patrollink {
751 clear: both;
754 .sharedUploadNotice {
755 font-style: italic;
758 span.updatedmarker {
759 color: black;
760 background-color: #0f0;
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;
773 .editExternallyHelp {
774 font-style: italic;
775 color: gray;
778 .toggle {
779 margin-left: 2em;
780 text-indent: -2em;
783 /* @bug 1714 */
784 input#wpSave,
785 input#wpDiff {
786 margin-right: 0.33em;
789 #wpSave {
790 font-weight: bold;
793 /* noarticletext */
794 div.noarticletext {
795 border: 1px solid #ccc;
796 background: #fff;
797 padding: .2em 1em;
798 color: #000;
801 div#searchTargetContainer {
802 left: 10px;
803 top: 10px;
804 width: 90%;
805 background: white;
808 div#searchTarget {
809 padding: 3px;
810 margin: 5px;
811 background: #F0F0F0;
812 border: solid 1px blue;
815 div#searchTarget ul li {
816 list-style-type: none;
817 list-style-image: none;
820 div#searchTarget ul li:before {
821 color: orange;
822 content: "\00BB \0020";
825 div#searchTargetHide {
826 float: right;
827 border: solid 1px black;
828 background: #DCDCDC;
829 padding: 2px;
832 #powersearch p {
833 margin-top: 0;
836 div.multipageimagenavbox {
837 border: solid 1px silver;
838 padding: 4px;
839 margin: 1em;
840 background: #f0f0f0;
843 div.multipageimagenavbox div.thumb {
844 border: none;
845 margin-left: 2em;
846 margin-right: 2em;
849 div.multipageimagenavbox hr {
850 margin: 6px;
853 table.multipageimage td {
854 text-align: center;
857 .templatesUsed {
858 margin-top: 1.5em;
861 .mw-summary-preview {
862 margin: 0.1em 0;
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;
873 div.mw-lag-warn-normal {
874 border: 1px solid #FFCC66;
875 background-color: #FFFFCC;
878 div.mw-lag-warn-high {
879 font-weight: bold;
880 border: 2px solid #FF0033;
881 background-color: #FFCCCC;
884 .MediaTransformError {
885 background-color: #ccc;
886 padding: 0.1em;
889 .MediaTransformError td {
890 text-align: center;
891 vertical-align: middle;
892 font-size: 90%;
895 /* God-damned hack for the crappy layout */
896 .os-suggest {
897 font-size: 127%;
900 /* Sometimes people don't want personal tools to be lowercase! */
901 .no-text-transform {
902 text-transform: none;
905 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
906 .tipsy {
907 font-size: 127%;
910 /* mediawiki.notification */
911 .skin-monobook .mw-notification {
912 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125);