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