Fix Bug 11270 & Bug 11555 : Make editsection link more understandable by positioning...
[lhc/web/wiklou.git] / skins / modern / main.css
1 body {
2 margin: 0;
3 padding: 0;
4 /*font-size: 10pt;*/
5 font-size: x-small;
6
7
8 font-family: sans-serif;
9 color: black;
10 background-color: #f0f0f0;
11
12 direction: ltr;
13 unicode-bidi: embed;
14 }
15
16 #mw_main,
17 #p-personal,
18 #mw_header,
19 .os-suggest {
20 font-size: 130%;
21 }
22
23 #mw_header {
24 position: absolute;
25 top: 0;
26 left: 0;
27 margin: 0;
28 padding: 0;
29 border: none;
30 height: 2em;
31 width: 100%;
32
33 background-color: #036;
34 color: white;
35 }
36
37 #mw_header h1 {
38 margin: 0 0 0 .5em;
39 padding: 0;
40 text-decoration: none;
41 font-size: 150%;
42 }
43
44 #p-personal {
45 position: absolute;
46 top: 2em;
47 left: 0;
48 height: 1.5em;
49 margin: 0;
50 padding: 0;
51 width: 100%;
52
53 }
54
55 #p-personal div.pBody {
56 margin: 0;
57 padding: 0;
58 height: 1.5em;
59 font-variant: small-caps;
60 }
61
62 #p-personal h5 {
63 display: none;
64 }
65
66 #p-personal ul {
67 margin: 0;
68 padding: 0;
69 display: block;
70 height: 1.5em;
71 background-color: #3c78b5;
72 }
73
74 #p-personal li {
75 display: block;
76 float: left;
77 height: 1.5em;
78 margin: 0;
79 vertical-align: middle;
80
81 font-weight: bold;
82 text-transform: lowercase;
83 }
84
85 #p-personal li a {
86 text-decoration: none;
87 color: white;
88 padding: 0 1em;
89 }
90
91 #p-personal li a:hover {
92 text-decoration: none;
93 color: white;
94 }
95
96 #p-personal li:hover {
97 background-color: #036;
98 }
99
100 #jump-to-nav {
101 display: none;
102 }
103
104 #mw_contentwrapper {
105 width: 100%;
106 margin: 0 0 0 -15em;
107 float: right;
108 }
109
110 #mw_content {
111 margin: 0 0 0 14em;
112
113 background-color: white;
114 border-top: solid 1px #bbb;
115 border-left: solid 1px #bbb;
116 border-bottom: solid 1px #bbb;
117
118 line-height: 1.5em;
119 padding: 0 1em 1em;
120 }
121
122 #mw_portlets {
123 width: 14em;
124
125 border-right: solid 1px #bbb;
126 background-color: #f0f0f0;
127 }
128
129 #mw_main {
130 padding: 0;
131 margin: 0;
132 margin-top: 3.5em;
133 }
134
135 div.mw_clear {
136 margin: 0;
137 padding: 0;
138 clear: both;
139 }
140
141 .portlet {
142 padding: 0;
143 margin: 0;
144 }
145
146 .portlet div.pBody {
147 padding: 0 0 .5em;
148 }
149
150 textarea {
151 width: 100%;
152 padding: .1em;
153 }
154
155 #searchBody {
156 text-align: center;
157 }
158
159 #searchInput {
160 width: 85%;
161 margin-left: auto;
162 margin-right: auto;
163 }
164
165 #p-search #searchform div div {
166 margin-top: .4em;
167 }
168
169 .portlet h5 {
170 padding: .1em 0 .3em 1em;
171 margin: 0;
172 background-color: #ddd;
173 font-weight: bold;
174 border-bottom: solid 1px #3c78b5;
175 height: 1.1em;
176 }
177
178 .portlet ul {
179 margin: 0 0 0 1.5em;
180 padding: 0;
181 }
182
183 #mw_portlets .portlet ul {
184 line-height: 1.4em;
185 }
186
187 ul {
188 /* @embed */
189 list-style-image: url(bullet.gif);
190 }
191
192 #p-cactions {
193 height: 1.5em;
194 padding: 0;
195 margin: 0 0 0 14em;
196 }
197
198 #p-cactions div.pBody {
199 margin: 0;
200 padding: 0;
201 }
202
203 #p-cactions a,
204 #p-cactions a:hover {
205 color: black;
206 text-decoration: none;
207 }
208
209 #p-cactions ul {
210 display: inline;
211 margin: 0;
212 padding: 0;
213 }
214
215 #p-cactions li {
216 margin: 0 .5em;
217 padding: 0 .2em;
218 display: block;
219 float: left;
220 height: 1.5em;
221 text-transform: lowercase;
222 }
223
224 #p-cactions li.selected {
225 background-color: #bbb;
226 }
227
228 #p-cactions li a,
229 #p-cactions li a:hover,
230 #p-cactions li a:visited {
231 text-decoration: underline;
232 color: #036;
233 }
234
235 #p-cactions li.selected a,
236 #p-cactions li.selected a:hover,
237 #p-cactions li.selected a:visited {
238 text-decoration: none;
239 color: white;
240 }
241
242 #p-cactions h5 {
243 display: none;
244 }
245
246 #siteSub {
247 display: none;
248 }
249
250 #footer {
251 background-color: #f0f0f0;
252 /* @embed */
253 background: url(footer-grad.png) repeat-x 0 0;
254 padding: 10px 1em 1em;
255 clear:both;
256 color: #444;
257 }
258
259 #footer a,
260 #footer a:hover,
261 #footer a:visited {
262 color: #444;
263 text-decoration: underline;
264 }
265
266 img {
267 border: none;
268 }
269
270 #footer li {
271 display: inline;
272 list-style-type: none;
273 padding: 0;
274 margin: 0;
275 }
276
277 #footer ul {
278 padding: 0;
279 margin: 0;
280 }
281
282 div.printfooter {
283 display: none;
284 }
285
286 p {
287 margin: 1em 0;
288 }
289
290 hr {
291 height: 1px;
292 color: #aaa;
293 background-color: #aaa;
294 border: 0;
295 margin: .2em 0;
296 }
297
298 #contentSub {
299 color: #888;
300 font-size: small;
301 padding-left: 2em;
302 }
303
304 #mw_portlets form {
305 margin: 0;
306 padding: 0;
307 }
308
309 a {
310 text-decoration: none;
311 color: #036;
312 background: none;
313 }
314 a:visited {
315 color: #5a3696;
316 }
317 a:active {
318 color: #faa700;
319 }
320 a:hover {
321 text-decoration: underline;
322 }
323 a.stub {
324 color: #772233;
325 }
326 a.new {
327 color: #ba0000;
328 }
329 a.new:visited {
330 color: #a55858;
331 }
332
333 span.editsection {
334 font-size: small;
335 }
336
337 .mw-h1,
338 .mw-h2,
339 .mw-h3,
340 .mw-h4,
341 .mw-h5,
342 .mw-h6 {
343 overflow: hidden;
344 border-bottom: solid 1px #036;
345 }
346 .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
347 border-bottom: none;
348 }
349
350 #preftoc {
351 width: 100%;
352 margin: 0;
353 padding: 0;
354 height: 1.5em;
355 clear: right;
356 }
357
358 #preftoc li {
359 margin: 0 .5em;
360 padding: 0 .2em;
361 display: block;
362 float: left;
363 height: 1.5em;
364 text-transform: lowercase;
365 }
366
367 #preferences {
368 margin: 0;
369 padding: 0 1em 1em;
370 border: solid 1px #bbb;
371 clear: left; /* Multi-line toc should not push data to horizontally */
372 }
373
374 #preferences fieldset {
375 margin-top: 0;
376 border: none;
377 }
378
379 #preferences h2 {
380 }
381
382 .mainLegend {
383 display: none;
384 }
385
386 .htmlform-tip {
387 font-size: x-small;
388 padding: .2em 2em;
389 color: #666;
390 }
391
392 .prefsection legend {
393 font-weight: bold;
394 }
395
396 #preftoc li.selected {
397 background-color: #bbb;
398 }
399
400 #preftoc li a,
401 #preftoc li a:hover,
402 #preftoc li a:visited {
403 text-decoration: underline;
404 color: #036;
405 }
406
407 #preftoc li.selected a,
408 #preftoc li.selected a:hover,
409 #preftoc li.selected a:visited {
410 text-decoration: none;
411 color: white;
412 }
413
414 #mw-pref-clear {
415 clear: both;
416 }
417
418 #mw_content a.external,
419 #mw_content a[href ^="gopher://"] {
420 /* @embed */
421 background: url(external.png) center right no-repeat;
422 padding-right: 13px;
423 }
424 #mw_content a[href ^="https://"],
425 .link-https {
426 /* @embed */
427 background: url(lock_icon.gif) center right no-repeat;
428 padding-right: 16px;
429 }
430 #mw_content a[href ^="mailto:"],
431 .link-mailto {
432 /* @embed */
433 background: url(mail_icon.gif) center right no-repeat;
434 padding-right: 18px;
435 }
436 #mw_content a[href ^="news://"] {
437 /* @embed */
438 background: url(news_icon.png) center right no-repeat;
439 padding-right: 18px;
440 }
441 #mw_content a[href ^="ftp://"],
442 .link-ftp {
443 /* @embed */
444 background: url(file_icon.gif) center right no-repeat;
445 padding-right: 18px;
446 }
447 #mw_content a[href ^="irc://"],
448 #mw_content a.extiw[href ^="irc://"],
449 #mw_content a[href ^="ircs://"],
450 #mw_content a.extiw[href ^="ircs://"],
451 .link-irc {
452 /* @embed */
453 background: url(discussionitem_icon.gif) center right no-repeat;
454 padding-right: 18px;
455 }
456
457 #mw_content a.external[href $=".ogg"], #mw_content a.external[href $=".OGG"],
458 #mw_content a.external[href $=".mid"], #mw_content a.external[href $=".MID"],
459 #mw_content a.external[href $=".midi"], #mw_content a.external[href $=".MIDI"],
460 #mw_content a.external[href $=".mp3"], #mw_content a.external[href $=".MP3"],
461 #mw_content a.external[href $=".wav"], #mw_content a.external[href $=".WAV"],
462 #mw_content a.external[href $=".wma"], #mw_content a.external[href $=".WMA"],
463 .link-audio {
464 /* @embed */
465 background: url("audio.png") center right no-repeat;
466 padding-right: 13px;
467 }
468 #mw_content a.external[href $=".ogm"], #mw_content a.external[href $=".OGM"],
469 #mw_content a.external[href $=".avi"], #mw_content a.external[href $=".AVI"],
470 #mw_content a.external[href $=".mpeg"], #mw_content a.external[href $=".MPEG"],
471 #mw_content a.external[href $=".mpg"], #mw_content a.external[href $=".MPG"],
472 .link-video {
473 /* @embed */
474 background: url("video.png") center right no-repeat;
475 padding-right: 13px;
476 }
477 #mw_content a.external[href $=".pdf"], #mw_content a.external[href $=".PDF"],
478 #mw_content a.external[href *=".pdf#"], #mw_content a.external[href *=".PDF#"],
479 #mw_content a.external[href *=".pdf?"], #mw_content a.external[href *=".PDF?"],
480 .link-document {
481 /* @embed */
482 background: url("document.png") center right no-repeat;
483 padding-right: 12px;
484 }
485
486 /* images */
487 /* @noflip */div.floatright, table.floatright {
488 margin: 0 0 .5em .5em;
489 border: 0;
490 /*
491 border: .5em solid white;
492 border-width: .5em 0 .8em 1.4em;
493 */
494 }
495 div.floatright p { font-style: italic; }
496 /* @noflip */div.floatleft, table.floatleft {
497 margin: 0 .5em .5em 0;
498 border: 0;
499 /*
500 margin: .3em .5em .5em 0;
501 border: .5em solid white;
502 border-width: .5em 1.4em .8em 0;
503 */
504 }
505 div.floatleft p { font-style: italic; }
506 /* thumbnails */
507 div.thumb {
508 margin-bottom: .5em;
509 width: auto;
510 }
511 div.thumbinner {
512 border: 1px solid #ccc;
513 padding: 3px !important;
514 background-color: #f9f9f9;
515 font-size: 94%;
516 text-align: center;
517 overflow: hidden;
518 }
519 html .thumbimage {
520 border: 1px solid #ccc;
521 }
522 html .thumbcaption {
523 border: none;
524 text-align: left;
525 line-height: 1.4em;
526 padding: 3px !important;
527 font-size: 94%;
528 }
529 div.magnify {
530 float: right;
531 border: none !important;
532 background: none !important;
533 }
534 div.magnify a, div.magnify img {
535 display: block;
536 border: none !important;
537 background: none !important;
538 }
539 /* @noflip */div.tright {
540 margin: .5em 0 .8em 1.4em;
541 }
542 /* @noflip */div.tleft {
543 margin: .5em 1.4em .8em 0;
544 }
545 img.thumbborder {
546 border: 1px solid #ddd;
547 }
548 .mw-warning {
549 border: 1px solid #aaa;
550 background-color: #f9f9f9;
551 padding: 5px;
552 font-size: 95%;
553 }
554
555 #toc,
556 .toc {
557 margin: 0;
558 padding: 0;
559 border-spacing: 0;
560 background-color: #f0f0f0;
561 border: solid 1px #bbb;
562 }
563
564 #toctitle {
565 border-bottom: solid 1px #3c78b5;
566 background-color: #ddd;
567 margin: 0;
568 }
569
570 #toc h2,
571 .toc h2 {
572 display: inline;
573 border: none;
574 padding: 0;
575 font-size: 100%;
576 font-weight: bold;
577 }
578 #toc #toctitle,
579 .toc #toctitle,
580 #toc .toctitle,
581 .toc .toctitle {
582 text-align: center;
583 }
584
585 #toc ul,
586 .toc ul {
587 list-style-type: none;
588 list-style-image: none;
589 margin: 0 1em;
590 padding: 0;
591 text-align: left;
592 }
593
594 .mw-content-ltr .toc ul,
595 .mw-content-rtl .toc ul,
596 .mw-content-ltr #toc ul,
597 .mw-content-rtl #toc ul {
598 margin: 0 1em;
599 }
600
601 #toc ul ul,
602 .toc ul ul {
603 margin: 0 0 0 2em;
604 }
605
606 #toc .toctoggle,
607 .toc .toctoggle {
608 font-size: 94%;
609 }
610
611 .mw-warning {
612 margin-left: 50px;
613 margin-right: 50px;
614 text-align: center;
615 }
616
617 .catlinks {
618 border: solid 1px #bbb;
619 background-color: #f0f0f0;
620 padding: .1em .3em;
621 margin: 0;
622 }
623
624 #mw_header h1,
625 #p-personal,
626 #p-cactions {
627 overflow: hidden;
628 }
629
630 /* disable interwiki styling */
631 #mw_content a.extiw,
632 #mw_content a.extiw:active {
633 color: #36b;
634 background: none;
635 padding: 0;
636 }
637 #mw_content a.external {
638 color: #36b;
639 }
640
641
642 .redirectText {
643 font-size: 150%;
644 margin: 5px;
645 }
646
647 .printfooter {
648 display: none;
649 }
650
651 .sharedUploadNotice {
652 font-style: italic;
653 }
654
655 span.updatedmarker {
656 color: black;
657 background-color: #0f0;
658 }
659
660 .previewnote {
661 text-indent: 3em;
662 color: #c00;
663 border-bottom: 1px solid #aaa;
664 padding-bottom: 1em;
665 margin-bottom: 1em;
666 }
667
668 .previewnote p {
669 margin: 0;
670 padding: 0;
671 }
672
673 .editExternally {
674 border: 1px solid gray;
675 background-color: #FFF;
676 padding: 3px;
677 margin-top: .5em;
678 float: left;
679 font-size: small;
680 text-align: center;
681 }
682 .editExternallyHelp {
683 font-style: italic;
684 color: gray;
685 }
686
687 .toggle {
688 margin-left: 2em;
689 text-indent: -2em;
690 }
691
692 table.collapsed tr.collapsable {
693 display: none;
694 }
695
696 input#wpSummary {
697 width: 80%;
698 }
699
700 /* @bug 1714 */
701 input#wpSave, input#wpDiff {
702 margin-right: .33em;
703 }
704
705 #wpSave {
706 font-weight: bold;
707 }
708
709 /* noarticletext */
710 div.noarticletext {
711 border: 1px solid #ccc;
712 background: #fff;
713 padding: .2em 1em;
714 color: #000;
715 }
716
717 div#searchTargetContainer {
718 left: 10px;
719 top: 10px;
720 width: 90%;
721 background: white;
722 }
723
724 div#searchTarget {
725 padding: 3px;
726 margin: 5px;
727 background: #F0F0F0;
728 border: solid 1px blue;
729 }
730
731 div#searchTarget ul li {
732 list-style: none;
733 }
734
735 div#searchTarget ul li:before {
736 color: orange;
737 content: "\00BB \0020";
738 }
739
740 div#searchTargetHide {
741 float: right;
742 border: solid 1px black;
743 background: #DCDCDC;
744 padding: 2px;
745 }
746
747 div.multipageimagenavbox {
748 border: solid 1px silver;
749 padding: 4px;
750 margin: 1em;
751 background: #f0f0f0;
752 }
753
754 div.multipageimagenavbox div.thumb {
755 border: none;
756 margin-left: 2em;
757 margin-right: 2em;
758 }
759
760 div.multipageimagenavbox hr {
761 margin: 6px;
762 }
763
764 table.multipageimage td {
765 text-align: center;
766 }
767
768 .templatesUsed { margin-top: 1.5em; }
769
770 .mw-summary-preview {
771 margin: .1em 0;
772 }
773
774 /* Friendlier slave lag warnings */
775 div.mw-lag-warn-normal,
776 div.mw-lag-warn-high {
777 padding: 3px;
778 text-align: center;
779 margin: 3px auto;
780 }
781 div.mw-lag-warn-normal {
782 border: 1px solid #FC6;
783 background-color: #FFC;
784 }
785 div.mw-lag-warn-high {
786 font-weight: bold;
787 border: 2px solid #F03;
788 background-color: #FCC;
789 }
790
791 .MediaTransformError {
792 background-color: #ccc;
793 padding: .1em;
794 }
795 .MediaTransformError td {
796 text-align: center;
797 vertical-align: middle;
798 font-size: 90%;
799 }
800 ul {
801 line-height: 1.5em;
802 list-style-type: square;
803 margin: .3em 0 0 1.5em;
804 padding: 0;
805 /* @embed */
806 list-style-image: url(bullet.gif);
807 }
808 ol {
809 line-height: 1.5em;
810 margin: .3em 0 0 3.2em;
811 padding: 0;
812 list-style-image: none;
813 }
814 li {
815 margin-bottom: .1em;
816 }
817 dt {
818 font-weight: bold;
819 margin-bottom: .1em;
820 }
821 dl {
822 margin-top: .2em;
823 margin-bottom: .5em;
824 }
825
826 #p-cactions li.new a {
827 color: #c20;
828 }
829
830 span.subpages {
831 font-size: 80%;
832 display: block;
833 }
834
835 pre {
836 border: solid 1px #3c78b5;
837 padding: .4em;
838 background-color: #f0f0f0;
839 }
840
841 .usermessage {
842 background-color: #dadaff;
843 }
844
845 .mw-topboxes {
846 border-collapse: collapse;
847 margin: 0 -1em 1em;
848 padding: 0 0 8px;
849 /* @embed */
850 background: url(footer-grad.png) repeat-x bottom left;
851 }
852
853 .mw-topbox p {
854 padding: 0;
855 margin: 0;
856 }
857
858 .mw-topbox {
859 color: black;
860 font-weight: bold;
861 margin: 0;
862 padding: 0 1em;
863 vertical-align: middle;
864 border-collapse: collapse;
865 border-bottom: solid 1px #bbb;
866 }
867
868 #siteSub {
869 background-color: #ddd;
870 }
871
872 /* emulate center */
873 .center {
874 width: 100%;
875 text-align: center;
876 }
877 *.center * {
878 margin-left: auto;
879 margin-right: auto;
880 }
881
882 /* table standards */
883 .toccolours {
884 border: 1px solid #bbb;
885 background-color: #f0f0f0;
886 border-spacing: 0;
887 margin: 0;
888 padding: 0;
889 }
890
891 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
892 .tipsy {
893 font-size: 130%;
894 }
895
896 /**
897 * Lists:
898 * The following lines don't have a visible effect on non-Gecko browsers
899 * They fix a problem ith Gecko browsers rendering lists to the right of
900 * left-floated objects in an RTL layout.
901 */
902 /* @noflip */
903 html > body.rtl div#mw_contentholder ul {
904 display: table;
905 }
906
907 /* @noflip */
908 html > body.rtl div#mw_contentholder ul#filetoc {
909 display: block;
910 }