Fixes bug #19866
[mediawiki.git] / skins / vector / main-ltr.css
blobd59c286f76c258336b3c7161b3fef66721bfb09b
1 /*
2 * main-rtl.css is automatically generated using CSSJanus, a python script for
3 * creating RTL versions of otherwise LTR stylesheets.
4 *
5 * You may download the tool to rebuild this stylesheet
6 * http://code.google.com/p/cssjanus/
7 *
8 * An online version of this tool can be used at:
9 * http://cssjanus.commoner.com/
11 * The following command is used to generate the RTL version of this file
12 * ./cssjanus.py --swap_ltr_rtl_in_url < main-ltr.css > main-rtl.css
14 * Any rules which should not be flipped should be prepended with @noflip in
15 * a comment block.
17 /* Framework */
18 html,
19 body {
20 height: 100%;
21 margin: 0;
22 padding: 0;
23 font-family: sans-serif;
24 font-size: 9.75pt;
26 body {
27 background-color: #f3f3f3;
28 background-image: url(images/page-base.png);
30 /* Content */
31 #content {
32 margin-left: 12em;
33 padding: 1em;
34 background-image: url(images/border.png);
35 background-position: top left;
36 background-repeat: repeat-y;
37 background-color: white;
39 /* Head */
40 #page-base {
41 height: 6em;
42 background-color: white;
43 background-image: url(images/page-fade.png);
44 background-position: bottom left;
45 background-repeat: repeat-x;
47 #head-base {
48 margin-top: -6em;
49 margin-left: 12em;
50 height: 6em;
51 background-image: url(images/border.png);
52 background-position: bottom left;
53 background-repeat: repeat-x;
55 #head {
56 position: absolute;
57 top: 0;
58 right: 0;
59 width: 100%;
61 #head h5 {
62 margin: 0;
63 padding: 0;
65 /* Personal */
66 #p-personal {
67 position: absolute;
68 top: 0;
69 right: 0.75em;
71 #p-personal h5 {
72 display: none;
74 #p-personal ul {
75 list-style: none;
76 margin: 0;
77 padding: 0;
79 /* @noflip */
80 #p-personal li {
81 float: left;
83 #p-personal li {
84 margin-left: 0.75em;
85 margin-top: 0.5em;
86 font-size: 0.9em;
88 /* Navigation Containers */
89 #left-navigation {
90 position: absolute;
91 left: 12em;
92 top: 3em;
94 #right-navigation {
95 float: right;
96 margin-top: 3em;
98 /* Navigation Labels */
99 div.vectorTabs h5,
100 div.vectorMenu h5 span {
101 display: none;
103 /* Namespaces and Views */
104 /* @noflip */
105 div.vectorTabs {
106 float: left;
108 div.vectorTabs {
109 background-image: url(images/tab-break.png);
110 background-position: bottom left;
111 background-repeat: no-repeat;
112 padding-left: 1px;
114 /* @noflip */
115 div.vectorTabs ul {
116 float: left;
118 div.vectorTabs ul {
119 height: 100%;
120 list-style: none;
121 margin: 0;
122 padding: 0;
124 /* @noflip */
125 div.vectorTabs ul li {
126 float: left;
128 /* OVERRIDDEN BY COMPLIANT BROWSERS */
129 div.vectorTabs ul li {
130 display: inline-block;
131 height: 100%;
132 margin: 0;
133 padding: 0;
134 background-color: #f3f3f3;
135 background-image: url(images/tab-normal-fade.png);
136 background-position: bottom left;
137 background-repeat: repeat-x;
139 /* IGNORED BY IE6 */
140 div.vectorTabs ul > li {
141 display: block;
143 div.vectorTabs li.selected {
144 background-image: url(images/tab-current-fade.png);
146 /* OVERRIDDEN BY COMPLIANT BROWSERS */
147 div.vectorTabs li a {
148 display: inline-block;
149 height: 3em;
150 padding-left: 0.5em;
151 padding-right: 0.5em;
152 background-image: url(images/tab-break.png);
153 background-position: bottom right;
154 background-repeat: no-repeat;
156 div.vectorTabs li a,
157 div.vectorTabs li a span {
158 color: #0645ad;
159 cursor: pointer;
161 /* IGNORED BY IE6 */
162 div.vectorTabs li > a {
163 display: block;
165 /* OVERRIDDEN BY COMPLIANT BROWSERS */
166 div.vectorTabs a span {
167 display: inline-block;
168 padding-top: 1.25em;
170 /* IGNORED BY IE6 */
171 /* @noflip */
172 div.vectorTabs a > span {
173 float: left;
174 display: block;
176 div.vectorTabs li.selected a,
177 div.vectorTabs li.selected a span,
178 div.vectorTabs li.selected a:visited
179 div.vectorTabs li.selected a:visited span {
180 color: #333333;
181 text-decoration: none;
183 div.vectorTabs li.new a,
184 div.vectorTabs li.new a span,
185 div.vectorTabs li.new a:visited,
186 div.vectorTabs li.new a:visited span {
187 color: #a55858;
189 /* Variants and Actions */
190 /* @noflip */
191 div.vectorMenu {
192 direction: ltr;
193 float: left;
194 background-image: url(images/arrow-down-icon.png);
195 background-position: center center;
196 background-repeat: no-repeat;
198 body.rtl div.vectorMenu {
199 direction: rtl;
201 /* @noflip */
202 div.vectorMenu h5 {
203 float: left;
205 /* OVERRIDDEN BY COMPLIANT BROWSERS */
206 div.vectorMenu h5 a {
207 display: inline-block;
208 width: 24px;
209 height: 3em;
210 text-decoration: none;
211 background-image: url(images/tab-break.png);
212 background-position: bottom right;
213 background-repeat: no-repeat;
215 /* IGNORED BY IE6 */
216 div.vectorMenu h5 > a {
217 display: block;
219 div.vectorMenu div.menu {
220 position: relative;
221 display: none;
222 clear: both;
223 text-align: left;
225 /* OVERRIDDEN BY COMPLIANT BROWSERS */
226 body.rtl div.vectorMenu div.menu {
227 margin-right: 24px;
229 /* IGNORED BY IE6 */
230 body.rtl div.vectorMenu > div.menu {
231 margin-right: auto;
233 /* Fixes old versions of FireFox */
234 body.rtl div.vectorMenu > div.menu,
235 x:-moz-any-link {
236 margin-right: 24px;
238 div.vectorMenu:hover div.menu {
239 display: block;
241 div.vectorMenu ul {
242 position: absolute;
243 background-color: white;
244 border: solid 1px silver;
245 border-top-width: 0;
246 list-style: none;
247 padding: 0;
248 margin: 0;
249 margin-left: -1px;
250 text-align: left;
252 /* Fixes old versions of FireFox */
253 div.vectorMenu ul,
254 x:-moz-any-link {
255 min-width: 6em;
257 /* Returns things back to normal in modern versions of FireFox */
258 div.vectorMenu ul,
259 x:-moz-any-link,
260 x:default {
261 min-width: 0;
263 div.vectorMenu li {
264 padding: 0;
265 margin: 0;
266 text-align: left;
268 /* OVERRIDDEN BY COMPLIANT BROWSERS */
269 div.vectorMenu li a {
270 display: inline-block;
271 padding: 0.5em;
272 white-space: nowrap;
274 /* IGNORED BY IE6 */
275 div.vectorMenu li > a {
276 display: block;
278 /* Search */
279 #p-search h5 {
280 display: none;
282 /* @noflip */
283 #p-search {
284 float: left;
286 #p-search {
287 margin-right: 0.5em;
288 margin-left: 0.5em;
290 #p-search form,
291 #p-search input {
292 margin: 0;
293 margin-top: 0.4em;
295 #simpleSearch {
296 margin-top: 0.75em;
297 position: relative;
298 border: solid 1px #AAAAAA;
299 background-color: white;
300 background-image: url(images/search-fade.png);
301 background-position: top left;
302 background-repeat: repeat-x;
304 #simpleSearch input#searchInput {
305 margin: 0;
306 border-width: 0;
307 padding: 0.25em;
308 line-height: 1em;
309 font-size: 9.75pt;
310 width: 10em;
311 background-color: transparent;
313 /* OVERRIDDEN BY COMPLIANT BROWSERS */
314 #simpleSearch button#searchButton {
315 position: absolute;
316 top: 0;
317 right: 0;
318 margin: 0;
319 padding: 0;
320 width: 1.75em;
321 height: 2em;
322 border: none;
323 cursor: pointer;
324 background-color: transparent;
325 background-image: url(images/search.png);
326 background-position: center center;
327 background-repeat: no-repeat;
329 /* IGNORED BY IE6 */
330 #simpleSearch > button#searchButton {
331 height: 100%;
333 /* Panel */
334 #panel {
335 position: absolute;
336 top: 12em;
337 width: 12em;
338 left: 0;
340 #panel div.portal {
341 padding-top: 1.5em;
343 #panel div.portal h5 {
344 font-weight: normal;
345 color: #444444;
346 padding: 0.5em;
347 padding-top: 0;
348 padding-left: 1.25em;
349 cursor: default;
350 border: none;
351 font-size: 0.9em;
353 #panel div.portal div.body {
354 margin: 0;
355 padding-top: 0.5em;
356 margin-left: 1.25em;
357 background-image: url(images/portal-break-ltr.png);
358 background-repeat: no-repeat;
359 background-position: top left;
361 #panel div.portal div.body ul {
362 list-style: none;
363 padding: 0;
364 margin: 0;
366 #panel div.portal div.body ul li {
367 padding: 0;
368 padding-bottom: 0.5em;
369 margin: 0;
370 overflow: hidden;
371 font-size: 0.9em;
373 #panel div.portal div.body ul li a {
374 color: #0645ad;
376 #panel div.portal div.body ul li a:visited {
377 color: #0b0080;
379 /* Foot */
380 #foot {
381 margin-left: 12em;
382 margin-top: 0;
383 padding: 0.75em;
384 background-image: url(images/border.png);
385 background-position: top left;
386 background-repeat: repeat-x;
388 #foot ul {
389 list-style: none;
390 margin: 0;
391 padding: 0;
393 #foot ul li {
394 margin: 0;
395 padding: 0;
396 padding-top: 0.5em;
397 padding-bottom: 0.5em;
398 color: #333333;
399 font-size: 0.9em;
401 #foot #foot-icons {
402 float: right;
404 #foot #foot-places {
405 float: left;
407 #foot #foot-info li {
408 line-height: 1.4em;
410 #foot #foot-icons li {
411 float: left;
412 margin-left: 0.5em;
413 line-height: 2em;
415 #foot #foot-places li {
416 float: left;
417 margin-right: 1em;
418 line-height: 2em;
420 /* Logo */
421 #p-logo {
422 position: absolute;
423 top: 0;
424 left: 0;
425 height: 12em;
426 width: 12em;
428 #p-logo a {
429 display: block;
430 width: 12em;
431 height: 12em;
432 background-repeat: no-repeat;
433 background-position: 50% 50%;
434 text-decoration: none;
439 * The following code is highly modified from monobook. It would be nice if the
440 * preftoc id was more human readable like preferences-toc for instance,
441 * howerver this would require backporting the other skins.
444 /* Preferences */
445 #preftoc {
446 /* Tabs */
447 width: 100%;
448 float: left;
449 clear: both;
450 margin: 0 !important;
451 padding: 0 !important;
452 background-image: url(images/preferences-break.png);
453 background-position: bottom left;
454 background-repeat: no-repeat;
456 #preftoc li {
457 /* Tab */
458 float: left;
459 margin: 0;
460 padding: 0;
461 padding-right: 1px;
462 height: 2.25em;
463 white-space: nowrap;
464 list-style-type: none;
465 list-style-image: none;
466 background-image: url(images/preferences-break.png);
467 background-position: bottom right;
468 background-repeat: no-repeat;
470 /* IGNORED BY IE6 */
471 #preftoc li:first-child {
472 margin-left: 1px;
474 #preftoc a,
475 #preftoc a:active {
476 display: inline-block;
477 position: relative;
478 color: #0645ad;
479 padding: 0.5em;
480 text-decoration: none;
481 background-image: none;
482 font-size: 0.9em;
484 #preftoc a:hover {
485 text-decoration: underline;
487 #preftoc li.selected a {
488 background-image: url(images/preferences-fade.png);
489 background-position: bottom;
490 background-repeat: repeat-x;
491 color: #333333;
492 text-decoration: none;
494 #preferences {
495 float: left;
496 width: 100%;
497 margin: 0;
498 margin-top: -2px;
499 clear: both;
500 border: solid 1px #cccccc;
501 background-color: #f9f9f9;
502 background-image: url(images/preferences-base.png);
504 #preferences fieldset.prefsection {
505 border: none;
506 padding: 0;
507 margin: 1em;
509 #preferences fieldset.prefsection fieldset {
510 border: none;
511 border-top: solid 1px #cccccc;
513 #preferences legend {
514 color: #666666;
516 #preferences fieldset.prefsection legend.mainLegend {
517 display: none;
519 #preferences td {
520 padding-left: 0.5em;
521 padding-right: 0.5em;
523 #preferences td.htmlform-tip {
524 font-size: x-small;
525 padding: .2em 2em;
526 color: #666666;
528 #preferences div.mw-prefs-buttons {
529 padding: 1em;
531 #preferences div.mw-prefs-buttons input {
532 margin-right: 0.25em;
537 * The following code is slightly modified from monobook
540 #content {
541 line-height: 1.5em;
543 /* Links */
545 text-decoration: none;
546 color: #0645ad;
547 background: none;
549 a:visited {
550 color: #0b0080;
552 a:active {
553 color: #faa700;
555 a:hover {
556 text-decoration: underline;
558 a.stub {
559 color: #772233;
561 a.new, #p-personal a.new {
562 color: #ba0000;
564 a.new:visited, #p-personal a.new:visited {
565 color: #a55858;
568 /* Inline Elements */
569 img {
570 border: none;
571 vertical-align: middle;
573 hr {
574 height: 1px;
575 color: #aaa;
576 background-color: #aaa;
577 border: 0;
578 margin: .2em 0 .2em 0;
581 /* Structural Elements */
587 h6 {
588 color: black;
589 background: none;
590 font-weight: normal;
591 margin: 0;
592 padding-top: .5em;
593 padding-bottom: .17em;
594 border-bottom: 1px solid #aaa;
595 width: auto;
597 h1 { font-size: 188%; }
598 h1 .editsection { font-size: 53%; }
599 h2 { font-size: 150%; }
600 h2 .editsection { font-size: 67%; }
604 h6 {
605 border-bottom: none;
606 font-weight: bold;
608 h3 { font-size: 132%; }
609 h3 .editsection { font-size: 76%; font-weight: normal; }
610 h4 { font-size: 116%; }
611 h4 .editsection { font-size: 86%; font-weight: normal; }
612 h5 { font-size: 100%; }
613 h5 .editsection { font-weight: normal; }
614 h6 { font-size: 80%; }
615 h6 .editsection { font-size: 125%; font-weight: normal; }
617 margin: .4em 0 .5em 0;
618 line-height: 1.5em;
620 p img {
621 margin: 0;
623 abbr,
624 acronym,
625 .explain {
626 border-bottom: 1px dotted black;
627 color: black;
628 background: none;
629 cursor: help;
632 font-family: Times, "Times New Roman", serif;
633 font-style: italic;
635 /* Disabled for now
636 blockquote {
637 font-family: Times, "Times New Roman", serif;
638 font-style: italic;
640 code {
641 background-color: #f9f9f9;
643 pre {
644 padding: 1em;
645 border: 1px dashed #2f6fab;
646 color: black;
647 background-color: #f9f9f9;
648 line-height: 1.1em;
650 #content ul {
651 line-height: 1.5em;
652 list-style-type: square;
653 margin: .3em 0 0 1.5em;
654 padding: 0;
655 list-style-image: url(images/bullet-icon.png);
657 #content ol {
658 line-height: 1.5em;
659 margin: .3em 0 0 3.2em;
660 padding: 0;
661 list-style-image: none;
663 #content li {
664 margin-bottom: .1em;
666 #content dt {
667 font-weight: bold;
668 margin-bottom: .1em;
670 #content dl {
671 margin-top: .2em;
672 margin-bottom: .5em;
674 #content dd {
675 line-height: 1.5em;
676 margin-left: 2em;
677 margin-bottom: .1em;
679 /* Tables */
680 table {
681 font-size: 100%;
682 color: black;
683 /* we don't want the bottom borders of <h2>s to be visible through
684 * floated tables */
685 background-color: white;
687 #content fieldset table {
688 /* but keep table layouts in forms clean... */
689 background: none;
691 /* Forms */
692 #content fieldset {
693 border: 1px solid #2f6fab;
694 margin: 1em 0 1em 0;
695 padding: 0 1em 1em;
696 line-height: 1.5em;
698 fieldset.nested {
699 margin: 0 0 0.5em 0;
700 padding: 0 0.5em 0.5em;
702 #content legend {
703 padding: .5em;
704 font-size: 95%;
706 #content form {
707 border: none;
708 margin: 0;
710 #content textarea {
711 width: 100%;
712 padding: .1em;
714 #content select {
715 vertical-align: top;
717 /* Table of Contents */
718 #toc,
719 .toc,
720 .mw-warning {
721 border: 1px solid #aaa;
722 background-color: #f9f9f9;
723 padding: 5px;
724 font-size: 95%;
726 #toc h2,
727 .toc h2 {
728 display: inline;
729 border: none;
730 padding: 0;
731 font-size: 100%;
732 font-weight: bold;
734 #toc #toctitle,
735 .toc #toctitle,
736 #toc .toctitle,
737 .toc .toctitle {
738 text-align: center;
740 #toc ul,
741 .toc ul {
742 list-style-type: none;
743 list-style-image: none;
744 margin-left: 0;
745 padding-left: 0;
746 text-align: left;
748 #toc ul ul,
749 .toc ul ul {
750 margin: 0 0 0 2em;
752 #toc .toctoggle,
753 .toc .toctoggle {
754 font-size: 94%;
756 /* Images */
757 div.floatright, table.floatright {
758 clear: right;
759 float: right;
760 position: relative;
761 margin: 0 0 .5em .5em;
762 border: 0;
764 div.floatright p { font-style: italic; }
765 div.floatleft, table.floatleft {
766 float: left;
767 clear: left;
768 position: relative;
769 margin: 0 .5em .5em 0;
770 border: 0;
772 div.floatleft p { font-style: italic; }
773 /* Thumbnails */
774 div.thumb {
775 margin-bottom: .5em;
776 border-style: solid;
777 border-color: white;
778 width: auto;
779 background-color: transparent;
781 div.thumbinner {
782 border: 1px solid #ccc;
783 padding: 3px !important;
784 background-color: #f9f9f9;
785 font-size: 94%;
786 text-align: center;
787 overflow: hidden;
789 html .thumbimage {
790 border: 1px solid #ccc;
792 html .thumbcaption {
793 border: none;
794 text-align: left;
795 line-height: 1.4em;
796 padding: 3px !important;
797 font-size: 94%;
799 div.magnify {
800 float: right;
801 border: none !important;
802 background: none !important;
804 div.magnify a, div.magnify img {
805 display: block;
806 border: none !important;
807 background: none !important;
809 div.tright {
810 clear: right;
811 float: right;
812 border-width: .5em 0 .8em 1.4em;
814 div.tleft {
815 float: left;
816 clear: left;
817 margin-right: .5em;
818 border-width: .5em 1.4em .8em 0;
820 img.thumbborder {
821 border: 1px solid #dddddd;
823 .hiddenStructure {
824 display: none;
826 /* Warning */
827 .mw-warning {
828 margin-left: 50px;
829 margin-right: 50px;
830 text-align: center;
832 /* User Message */
833 .usermessage {
834 background-color: #ffce7b;
835 border: 1px solid #ffa500;
836 color: black;
837 font-weight: bold;
838 margin: 2em 0 1em;
839 padding: .5em 1em;
840 vertical-align: middle;
842 /* Site Notice */
843 #siteNotice {
844 text-align: center;
845 font-size: 95%;
846 margin-bottom: 0.9em;
848 #siteNotice p {
849 margin: 0;
850 padding: 0;
852 /* Categories */
853 .catlinks {
854 border: 1px solid #aaa;
855 background-color: #f9f9f9;
856 padding: 5px;
857 margin-top: 1em;
858 clear: both;
860 /* Sub-navigation */
861 #siteSub {
862 display: none;
864 #jump-to-nav {
865 display: none;
867 #contentSub, #contentSub2 {
868 font-size: 84%;
869 line-height: 1.2em;
870 margin: 0 0 1.4em 1em;
871 color: #7d7d7d;
872 width: auto;
874 span.subpages {
875 display: block;
877 /* Emulate Center */
878 .center {
879 width: 100%;
880 text-align: center;
882 *.center * {
883 margin-left: auto;
884 margin-right: auto;
886 /* Small for tables and similar */
887 .small, .small * {
888 font-size: 94%;
890 table.small {
891 font-size: 100%;
893 /* Edge Cases for Content */
894 #content h1, #content h2 {
895 margin-bottom: .6em;
897 #content h3, #content h4, #content h5 {
898 margin-bottom: .3em;
900 #firstHeading {
901 padding-top: 0;
902 margin-top: 0;
903 padding-top: 0;
904 margin-bottom: 0.1em;
905 line-height: 1.2em;
906 padding-bottom: 0;
908 #content a.external,
909 #content a[href ^="gopher://"] {
910 background: url(images/external-link-ltr-icon.png) center right no-repeat;
911 padding: 0 13px 0 0;
913 #content a[href ^="https://"],
914 .link-https {
915 background: url(images/lock-icon.png) center right no-repeat;
916 padding: 0 18px 0 0;
918 #content a[href ^="mailto:"],
919 .link-mailto {
920 background: url(images/mail-icon.png) center right no-repeat;
921 padding: 0 18px 0 0;
923 #content a[href ^="news://"] {
924 background: url(images/news-icon.png) center right no-repeat;
925 padding: 0 18px 0 0;
927 #content a[href ^="ftp://"],
928 .link-ftp {
929 background: url(images/file-icon.png) center right no-repeat;
930 padding: 0 18px 0 0;
932 #content a[href ^="irc://"],
933 #content a.extiw[href ^="irc://"],
934 .link-irc {
935 background: url(images/talk-icon.png) center right no-repeat;
936 padding: 0 18px 0 0;
938 #content a.external[href $=".ogg"], #content a.external[href $=".OGG"],
939 #content a.external[href $=".mid"], #content a.external[href $=".MID"],
940 #content a.external[href $=".midi"], #content a.external[href $=".MIDI"],
941 #content a.external[href $=".mp3"], #content a.external[href $=".MP3"],
942 #content a.external[href $=".wav"], #content a.external[href $=".WAV"],
943 #content a.external[href $=".wma"], #content a.external[href $=".WMA"],
944 .link-audio {
945 background: url("images/audio-icon.png") center right no-repeat;
946 padding: 0 18px 0 0;
948 #content a.external[href $=".ogm"], #content a.external[href $=".OGM"],
949 #content a.external[href $=".avi"], #content a.external[href $=".AVI"],
950 #content a.external[href $=".mpeg"], #content a.external[href $=".MPEG"],
951 #content a.external[href $=".mpg"], #content a.external[href $=".MPG"],
952 .link-video {
953 background: url("images/video-icon.png") center right no-repeat;
954 padding: 0 18px 0 0;
956 #content a.external[href $=".pdf"], #content a.external[href $=".PDF"],
957 #content a.external[href *=".pdf#"], #content a.external[href *=".PDF#"],
958 #content a.external[href *=".pdf?"], #content a.external[href *=".PDF?"],
959 .link-document {
960 background: url("images/document-icon.png") center right no-repeat;
961 padding: 0 18px 0 0;
963 /* Interwiki Styling (Disabled) */
964 #content a.extiw,
965 #content a.extiw:active {
966 color: #36b;
967 background: none;
968 padding: 0;
970 #content a.external {
971 color: #36b;
973 #content .printfooter {
974 display: none;
976 /* Icon for Usernames */
977 #pt-userpage,
978 #pt-anonuserpage,
979 #pt-login {
980 background: url(images/user-icon.png) left top no-repeat;
981 padding-left: 15px !important;
982 text-transform: none;
984 /* To be sorted */
985 span.newpage, span.minor, span.bot {
986 font-weight: bold;
988 .toccolours {
989 border: 1px solid #aaa;
990 background-color: #f9f9f9;
991 padding: 5px;
992 font-size: 95%;
994 #bodyContent {
995 position: relative;
996 width: 100%;