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