Revert r52410 (Put the [edit] link after the section header instead of before, and...
[mediawiki.git] / skins / vector / main.css
blobd111d1ec760a7b4d2cb2ab713b76d2f26a76bfe9
1 /* Framework */
2 html,
3 body {
4 height: 100%;
5 margin: 0;
6 padding: 0;
7 font-family: sans-serif;
8 font-size: small;
10 body.rtl {
11 direction: rtl;
12 unicode-bidi: embed;
14 body {
15 background-image: url(images/page-base.png);
17 /* Content */
18 div#content {
19 margin-left: 12em;
20 padding: 1em;
21 background-image: url(images/content-base.png);
22 background-position: top left;
23 background-repeat: repeat-y;
24 background-color: white;
26 body.rtl div#content {
27 margin-left: auto;
28 margin-right: 12em;
29 background-position: top right;
31 /* Head */
32 div#page-base {
33 height: 6em;
34 background-color: white;
35 background-image: url(images/page-fade.png);
36 background-position: bottom left;
37 background-repeat: repeat-x;
39 body.rtl div#page-base {
40 background-position: bottom left;
42 div#head-base {
43 margin-top: -6em;
44 margin-left: 12em;
45 height: 6em;
46 background-image: url(images/head-base.png);
47 background-position: bottom left;
48 background-repeat: repeat-x;
50 body.rtl div#head-base {
51 margin-left: auto;
52 margin-right: 12em;
53 background-position: bottom right;
55 div#head {
56 position: absolute;
57 top: 0;
58 right: 0;
59 width: 100%;
60 margin-right: 0.75em;
62 body.rtl div#head {
63 right: auto;
64 left: 0;
65 margin-right: auto;
66 margin-left: 0.75em;
68 div#head ul,
69 div#head li {
70 list-style: none;
71 margin: 0;
72 padding: 0;
74 div#head h5 {
75 margin: 0;
76 padding: 0;
78 /* Personal */
79 div#personal {
80 position: absolute;
81 top: 0;
82 right: 0;
84 body.rtl div#personal {
85 left: 0;
86 right: auto;
88 div#personal h5 {
89 display: none;
91 div#personal li {
92 float: left;
93 margin-left: 0.75em;
94 margin-top: 0.5em;
95 font-size: 0.9em;
97 body.rtl div#personal li {
98 margin-left: auto;
99 margin-right: 0.75em;
101 /* Navigation */
102 div#left-navigation {
103 margin-top: 3em;
104 margin-left: 12.75em;
107 body.rtl div#left-navigation {
108 margin-left: auto;
109 margin-right: 12.75em;
112 div#right-navigation {
113 float: right;
116 body.rtl div#right-navigation {
117 float: left;
120 /* Navigation Labels */
121 div#namespaces h5,
122 div#variants h5,
123 div#views h5,
124 div#actions h5 span,
125 div#search h5 {
126 display: none;
128 /* Namespaces and Views */
129 div#namespaces,
130 div#views {
131 float: left;
132 background-image: url(images/tab-break.png);
133 background-position: bottom left;
134 background-repeat: no-repeat;
135 padding-left: 1px;
138 body.rtl div#namespaces,
139 body.rtl div#views {
140 float: right;
141 background-position: bottom right;
142 padding-left: 0;
143 padding-right: 1px;
146 div#namespaces ul,
147 div#views ul {
148 float: left;
151 body.rtl div#namespaces ul,
152 body.rtl div#views ul {
153 float: right;
156 div#namespaces li,
157 div#views li {
158 float: left;
159 height: 3em;
160 background-image: url(images/tab-normal-fade.png);
161 background-position: bottom left;
162 background-repeat: repeat-x;
165 body.rtl div#namespaces li,
166 body.rtl div#views li {
167 float: right;
168 background-position: bottom right;
171 div#namespaces li.selected,
172 div#views li.selected {
173 background-image: url(images/tab-current-fade.png);
175 div#namespaces a,
176 div#views a {
177 display: inline-block;
178 height: 3em;
179 padding-left: 0.5em;
180 padding-right: 0.5em;
181 background-image: url(images/tab-break.png);
182 background-position: bottom right;
183 background-repeat: no-repeat;
186 body.rtl div#namespaces a,
187 body.rtl div#views a {
188 background-position: bottom left;
191 div#namespaces a span,
192 div#views a span {
193 color: #0645ad;
194 display: inline-block;
195 padding-top: 1.25em;
196 cursor: pointer;
198 div#namespaces li.selected a span,
199 div#views li.selected a:visited span {
200 color: #333333;
201 cursor: default;
202 text-decoration: none;
204 div#namespaces li.new a span,
205 div#namespaces li.new a:visited span{
206 color: #a55858;
208 /* Variants and Actions */
209 div#variants,
210 div#actions {
211 float: left;
212 background-image: url(images/arrow-down-icon.png);
213 background-position: center center;
214 background-repeat: no-repeat;
217 body.rtl div#variants,
218 body.rtl div#actions {
219 float: right;
222 div#variants h5,
223 div#actions h5 {
224 float: left;
227 body.rtl div#variants h5,
228 body.rtl div#actions h5 {
229 float: right;
232 div#variants h5 a,
233 div#actions h5 a {
234 display: inline-block;
235 width: 24px;
236 height: 3em;
237 text-decoration: none;
238 background-image: url(images/tab-break.png);
239 background-position: bottom right;
240 background-repeat: no-repeat;
243 body.rtl div#variants h5 a,
244 body.rtl div#actions h5 a {
245 display: inline-block;
246 background-position: bottom left;
249 div#variants div.menu,
250 div#actions div.menu {
251 display: none;
252 clear: both;
254 div#variants:hover div.menu,
255 div#actions:hover div.menu {
256 display: block;
258 div#variants ul,
259 div#actions ul {
260 position: absolute;
261 background-color: white;
262 border: solid 1px silver;
263 border-top-width: 0;
264 padding: 0;
265 margin: 0;
266 margin-left: -1px;
269 body.rtl div#variants ul,
270 body.rtl div#actions ul {
271 margin-left: 0;
272 margin-right: -1px;
275 div#variants:hover li a,
276 div#actions li a {
277 display: inline-block;
278 padding: 0.5em;
280 /* Search */
281 div#search {
282 float: left;
285 body.rtl div#search {
286 float: right;
289 div#search form,
290 div#search input {
291 float: left;
292 margin-top: 0.4em;
293 margin-left: 0.25em;
296 body.rtl div#search form,
297 body.rtl div#search input {
298 float: right;
299 margin-left: 0;
300 margin-right: 0.25em;
303 /* Panel */
304 div#panel {
305 position: absolute;
306 top: 12em;
307 width: 12em;
308 left: 0;
310 body.rtl div#panel {
311 left: auto;
312 right: 0;
314 div#panel div.portal {
315 padding-top: 1.5em;
317 div#panel div.portal h5 {
318 font-weight: normal;
319 color: #666666;
320 padding: 0.5em;
321 padding-top: 0;
322 padding-left: 1.25em;
323 cursor: default;
325 body.rtl div#panel div.portal h5 {
326 padding: 0;
327 margin: 0;
328 padding-left: 0;
329 padding-right: 1.25em;
331 div#panel div.portal div.body {
332 margin-top: 0.25em;
333 padding-top: 0.5em;
334 margin-left: 1.25em;
335 background-image: url(images/portal-break.png);
336 background-repeat: no-repeat;
337 background-position: top left;
339 body.rtl div#panel div.portal div.body {
340 padding-left: 0;
341 margin-right: 1.25em;
342 background-position: top right;
344 div#panel div.portal div.body ul {
345 list-style: none;
346 padding: 0;
347 margin: 0;
349 div#panel div.portal div.body ul li {
350 padding: 0;
351 padding-bottom: 0.5em;
352 margin: 0;
353 overflow: hidden;
355 div#panel div.portal div.body ul li a {
356 color: #0645ad;
358 div#panel div.portal div.body ul li a:visited {
359 color: #0b0080;
361 /* Foot */
362 div#foot {
363 margin-left: 12em;
364 margin-top: 0;
365 padding: 0.75em;
366 background-image: url(images/foot-base.png);
367 background-position: top left;
368 background-repeat: repeat-x;
370 body.rtl div#foot {
371 margin-left: 0;
372 margin-right: 12em;
373 background-position: top right;
375 div#foot ul {
376 list-style: none;
377 margin: 0;
378 padding: 0;
380 div#foot ul li {
381 margin: 0;
382 padding: 0;
383 padding-top: 0.5em;
384 padding-bottom: 0.5em;
385 color: #333333;
386 font-size: 0.9em;
388 div#foot ul#foot-icons {
389 float: right;
391 body.rtl div#foot ul#foot-icons {
392 float: left;
394 div#foot ul#foot-places {
395 float: left;
397 body.rtl div#foot ul#foot-places {
398 float: right;
400 div#foot ul#foot-icons li {
401 float: left;
402 margin-left: 0.5em;
403 line-height: 2em;
405 body.rtl div#foot ul#foot-icons li {
406 float: right;
407 margin-left: 0;
408 margin-right: 0.5em;
410 div#foot ul#foot-places li {
411 float: left;
412 margin-right: 0.5em;
413 line-height: 2em;
415 body.rtl div#foot ul#foot-places li {
416 float: right;
417 margin-left: 0.5em;
418 margin-right: 0;
421 /* Logo */
422 div#logo {
423 position: absolute;
424 top: 0;
425 left: 0;
426 height: 12em;
427 width: 12em;
429 body.rtl #logo {
430 left: auto;
431 right: 0;
433 div#logo a {
434 display: block;
435 width: 12em;
436 height: 12em;
437 background-repeat: no-repeat;
438 background-position: 50% 50%;
439 text-decoration: none;
444 * The following code is highly modified from monobook. It would be nice if the
445 * preftoc id was more human readable like preferences-toc for instance,
446 * howerver this would require backporting the other skins.
449 /* Preferences */
450 #preftoc {
451 /* Tabs */
452 float: left;
453 zoom: 1;
454 clear: both;
455 margin: 0 !important;
456 padding: 0 !important;
457 height: 2.25em;
458 background-image: url(images/preferences-break.png);
459 background-position: bottom left;
460 background-repeat: no-repeat;
462 body.rtl #preftoc {
463 background-position: bottom right;
465 #preftoc li {
466 /* Tab */
467 float: left;
468 zoom: 1;
469 margin: 0;
470 padding: 0;
471 padding-right: 1px;
472 height: 2.25em;
473 white-space: nowrap;
474 list-style-type: none;
475 list-style-image: none;
476 background-image: url(images/preferences-break.png);
477 background-position: bottom right;
478 background-repeat: no-repeat;
480 #preftoc li:first-child {
481 margin-left: 1px;
483 body.rtl #preftoc li {
484 float: right;
485 padding-right: 0;
486 padding-left: 1px;
487 background-position: bottom left;
489 #preftoc a,
490 #preftoc a:active {
491 display: inline-block;
492 position: relative;
493 color: #0645ad;
494 padding: 0.5em;
495 text-decoration: none;
496 background-image: none;
498 #preftoc a:hover {
499 text-decoration: underline;
501 #preftoc li.selected a {
502 cursor: default;
503 background-image: url(images/preferences-fade.png);
504 background-position: bottom;
505 background-repeat: repeat-x;
506 color: #333333;
507 cursor: default;
508 text-decoration: none;
510 #preferences {
511 float: left;
512 zoom: 1;
513 width: 100%;
514 margin: 0;
515 clear: both;
516 border: solid 1px #cccccc;
517 background-color: #f9f9f9;
518 background-image: url(images/preferences-base.png);
520 #preferences > fieldset.prefsection {
521 border: none;
522 padding: 0;
523 margin: 1em;
525 #preferences > fieldset.prefsection > fieldset {
526 border: none;
527 border-top: solid 1px #cccccc;
529 #preferences legend {
530 color: #666666;
532 #preferences > fieldset.prefsection > legend.mainLegend {
533 display: none;
535 #preferences td {
536 padding-left: 0.5em;
537 padding-right: 0.5em;
539 #preferences td.htmlform-tip {
540 font-size: x-small;
541 padding: .2em 2em;
542 color: #666666;
544 #preferences div.mw-prefs-buttons {
545 padding: 1em;
547 #preferences div.mw-prefs-buttons input {
548 margin-right: 0.25em;
553 * The following code is slightly modified from monobook
557 /* Links */
559 text-decoration: none;
560 color: #0645ad;
561 background: none;
563 a:visited {
564 color: #0b0080;
566 a:active {
567 color: #faa700;
569 a:hover {
570 text-decoration: underline;
572 a.stub {
573 color: #772233;
575 a.new, #p-personal a.new {
576 color: #ba0000;
578 a.new:visited, #p-personal a.new:visited {
579 color: #a55858;
582 /* Inline Elements */
583 img {
584 border: none;
585 vertical-align: middle;
587 hr {
588 height: 1px;
589 color: #aaa;
590 background-color: #aaa;
591 border: 0;
592 margin: .2em 0 .2em 0;
595 /* Structural Elements */
601 h6 {
602 color: black;
603 background: none;
604 font-weight: normal;
605 margin: 0;
606 padding-top: .5em;
607 padding-bottom: .17em;
608 border-bottom: 1px solid #aaa;
609 width: auto;
611 h1 { font-size: 188%; }
612 h1 .editsection { font-size: 53%; }
613 h2 { font-size: 150%; }
614 h2 .editsection { font-size: 67%; }
618 h6 {
619 border-bottom: none;
620 font-weight: bold;
622 h3 { font-size: 132%; }
623 h3 .editsection { font-size: 76%; font-weight: normal; }
624 h4 { font-size: 116%; }
625 h4 .editsection { font-size: 86%; font-weight: normal; }
626 h5 { font-size: 100%; }
627 h5 .editsection { font-weight: normal; }
628 h6 { font-size: 80%; }
629 h6 .editsection { font-size: 125%; font-weight: normal; }
630 body.rtl .editsection {
631 float: left;
632 margin-right: 5px;
633 margin-left: 0; /* bug 9122: undo default LTR */
636 margin: .4em 0 .5em 0;
637 line-height: 1.5em;
639 p img {
640 margin: 0;
642 abbr,
643 acronym,
644 .explain {
645 border-bottom: 1px dotted black;
646 color: black;
647 background: none;
648 cursor: help;
651 font-family: Times, "Times New Roman", serif;
652 font-style: italic;
654 /* Disabled for now
655 blockquote {
656 font-family: Times, "Times New Roman", serif;
657 font-style: italic;
659 code {
660 background-color: #f9f9f9;
662 pre {
663 padding: 1em;
664 border: 1px dashed #2f6fab;
665 color: black;
666 background-color: #f9f9f9;
667 line-height: 1.1em;
669 div#content ul {
670 line-height: 1.5em;
671 list-style-type: square;
672 margin: .3em 0 0 1.5em;
673 padding: 0;
674 list-style-image: url(images/bullet-icon.png);
676 body.rtl div#content ul {
677 margin-left: 0;
678 margin-right: 1.5em;
680 div#content ol {
681 line-height: 1.5em;
682 margin: .3em 0 0 3.2em;
683 padding: 0;
684 list-style-image: none;
686 body.rtl div#content ol {
687 margin-left: 0;
688 margin-right: 2.4em;
690 div#content li {
691 margin-bottom: .1em;
693 div#content dt {
694 font-weight: bold;
695 margin-bottom: .1em;
697 div#content dl {
698 margin-top: .2em;
699 margin-bottom: .5em;
701 div#content dd {
702 line-height: 1.5em;
703 margin-left: 2em;
704 margin-bottom: .1em;
706 body.rtl div#content dd {
707 margin-left: 0;
708 margin-right: 1.6em;
711 * The following lines don't have a visible effect on non-Gecko browsers
712 * They fix a problem ith Gecko browsers rendering lists to the right of
713 * left-floated objects in an RTL layout.
715 body.rtl div#content ul {
716 display: table;
717 text-align: right;
718 margin-left: 0;
719 margin-right: 1.5em;
721 body.rtl div#content ul#filetoc {
722 display: block;
723 text-align: right;
726 /* Tables */
727 div#content table {
728 font-size: 100%;
729 color: black;
730 /* we don't want the bottom borders of <h2>s to be visible through
731 * floated tables */
732 background-color: white;
734 div#content fieldset table {
735 /* but keep table layouts in forms clean... */
736 background: none;
739 /* Forms */
740 div#content fieldset {
741 border: 1px solid #2f6fab;
742 margin: 1em 0 1em 0;
743 padding: 0 1em 1em;
744 line-height: 1.5em;
746 fieldset.nested {
747 margin: 0 0 0.5em 0;
748 padding: 0 0.5em 0.5em;
750 div#content legend {
751 padding: .5em;
752 font-size: 95%;
754 div#content form {
755 border: none;
756 margin: 0;
758 div#content textarea {
759 width: 100%;
760 padding: .1em;
762 div#content select {
763 vertical-align: top;
766 /* Table of Contents */
767 #toc,
768 .toc,
769 .mw-warning {
770 border: 1px solid #aaa;
771 background-color: #f9f9f9;
772 padding: 5px;
773 font-size: 95%;
775 #toc h2,
776 .toc h2 {
777 display: inline;
778 border: none;
779 padding: 0;
780 font-size: 100%;
781 font-weight: bold;
783 #toc #toctitle,
784 .toc #toctitle,
785 #toc .toctitle,
786 .toc .toctitle {
787 text-align: center;
789 #toc ul,
790 .toc ul {
791 list-style-type: none;
792 list-style-image: none;
793 margin-left: 0;
794 padding-left: 0;
795 text-align: left;
797 #toc ul ul,
798 .toc ul ul {
799 margin: 0 0 0 2em;
801 #toc .toctoggle,
802 .toc .toctoggle {
803 font-size: 94%;
806 /* Images */
807 div.floatright, table.floatright {
808 clear: right;
809 float: right;
810 position: relative;
811 margin: 0 0 .5em .5em;
812 border: 0;
814 div.floatright p { font-style: italic; }
815 div.floatleft, table.floatleft {
816 float: left;
817 clear: left;
818 position: relative;
819 margin: 0 .5em .5em 0;
820 border: 0;
822 div.floatleft p { font-style: italic; }
824 /* Thumbnails */
825 div.thumb {
826 margin-bottom: .5em;
827 border-style: solid;
828 border-color: white;
829 width: auto;
831 div.thumbinner {
832 border: 1px solid #ccc;
833 padding: 3px !important;
834 background-color: #f9f9f9;
835 font-size: 94%;
836 text-align: center;
837 overflow: hidden;
839 html .thumbimage {
840 border: 1px solid #ccc;
842 html .thumbcaption {
843 border: none;
844 text-align: left;
845 line-height: 1.4em;
846 padding: 3px !important;
847 font-size: 94%;
849 div.magnify {
850 float: right;
851 border: none !important;
852 background: none !important;
854 div.magnify a, div.magnify img {
855 display: block;
856 border: none !important;
857 background: none !important;
859 div.tright {
860 clear: right;
861 float: right;
862 border-width: .5em 0 .8em 1.4em;
864 div.tleft {
865 float: left;
866 clear: left;
867 margin-right: .5em;
868 border-width: .5em 1.4em .8em 0;
870 img.thumbborder {
871 border: 1px solid #dddddd;
873 .hiddenStructure {
874 display: none;
877 /* Warning */
878 .mw-warning {
879 margin-left: 50px;
880 margin-right: 50px;
881 text-align: center;
884 /* User Message */
885 .usermessage {
886 background-color: #ffce7b;
887 border: 1px solid #ffa500;
888 color: black;
889 font-weight: bold;
890 margin: 2em 0 1em;
891 padding: .5em 1em;
892 vertical-align: middle;
895 /* Site Notice */
896 #siteNotice {
897 text-align: center;
898 font-size: 95%;
899 padding-top: 0.9em;
901 #siteNotice p {
902 margin: 0;
903 padding: 0;
906 /* Categories */
907 .catlinks {
908 border: 1px solid #aaa;
909 background-color: #f9f9f9;
910 padding: 5px;
911 margin-top: 1em;
912 clear: both;
915 /* Sub-navigation */
916 #siteSub {
917 display: none;
919 #jump-to-nav {
920 display: none;
922 #contentSub, #contentSub2 {
923 font-size: 84%;
924 line-height: 1.2em;
925 margin: 0 0 1.4em 1em;
926 color: #7d7d7d;
927 width: auto;
929 span.subpages {
930 display: block;
933 /* Emulate Center */
934 .center {
935 width: 100%;
936 text-align: center;
938 *.center * {
939 margin-left: auto;
940 margin-right: auto;
943 /* Small for tables and similar */
944 .small, .small * {
945 font-size: 94%;
947 table.small {
948 font-size: 100%;
951 /* Edge Cases for Content */
952 #content h1, #content h2 {
953 margin-bottom: .6em;
955 #content h3, #content h4, #content h5 {
956 margin-bottom: .3em;
958 div.firstHeading {
959 padding-top: 0;
960 margin-top: 0;
962 div.firstHeading h1 {
963 padding-top: 0;
964 margin-top: 0;
965 padding-top: 0;
966 margin-bottom: 0.1em;
967 line-height: 1.2em;
968 padding-bottom: 0;
970 #content a.external,
971 #content a[href ^="gopher://"] {
972 background: url(images/external-link-ltr-icon.png) center right no-repeat;
973 padding: 0 13px;
975 .rtl #content a.external,
976 .rtl #content a[href ^="gopher://"] {
977 background-image: url(images/external-link-rtl-icon.png);
979 #content a[href ^="https://"],
980 .link-https {
981 background: url(images/lock-icon.png) center right no-repeat;
982 padding: 0 18px;
984 #content a[href ^="mailto:"],
985 .link-mailto {
986 background: url(images/mail-icon.png) center right no-repeat;
987 padding: 0 18px;
989 #content a[href ^="news://"] {
990 background: url(images/news-icon.png) center right no-repeat;
991 padding: 0 18px;
993 #content a[href ^="ftp://"],
994 .link-ftp {
995 background: url(images/file-icon.png) center right no-repeat;
996 padding: 0 18px;
998 #content a[href ^="irc://"],
999 #content a.extiw[href ^="irc://"],
1000 .link-irc {
1001 background: url(images/talk-icon.png) center right no-repeat;
1002 padding: 0 18px;
1004 #content a.external[href $=".ogg"], #content a.external[href $=".OGG"],
1005 #content a.external[href $=".mid"], #content a.external[href $=".MID"],
1006 #content a.external[href $=".midi"], #content a.external[href $=".MIDI"],
1007 #content a.external[href $=".mp3"], #content a.external[href $=".MP3"],
1008 #content a.external[href $=".wav"], #content a.external[href $=".WAV"],
1009 #content a.external[href $=".wma"], #content a.external[href $=".WMA"],
1010 .link-audio {
1011 background: url("images/audio-icon.png") center right no-repeat;
1012 padding: 0 18px;
1014 #content a.external[href $=".ogm"], #content a.external[href $=".OGM"],
1015 #content a.external[href $=".avi"], #content a.external[href $=".AVI"],
1016 #content a.external[href $=".mpeg"], #content a.external[href $=".MPEG"],
1017 #content a.external[href $=".mpg"], #content a.external[href $=".MPG"],
1018 .link-video {
1019 background: url("images/video-icon.png") center right no-repeat;
1020 padding: 0 18px;
1022 #content a.external[href $=".pdf"], #content a.external[href $=".PDF"],
1023 #content a.external[href *=".pdf#"], #content a.external[href *=".PDF#"],
1024 #content a.external[href *=".pdf?"], #content a.external[href *=".PDF?"],
1025 .link-document {
1026 background: url("images/document-icon.png") center right no-repeat;
1027 padding: 0 18px;
1029 .rtl #content a.external {
1030 background-position: left;
1031 padding-right: 0;
1033 .rtl #panel a.feedlink {
1034 background-position: right;
1035 padding-right: 16px;
1036 padding-left: 0;
1038 .ltr #content a.external {
1039 padding-left: 0;
1042 /* Interwiki Styling (Disabled) */
1043 #content a.extiw,
1044 #content a.extiw:active {
1045 color: #36b;
1046 background: none;
1047 padding: 0;
1049 #content a.external {
1050 color: #36b;
1052 #content .plainlinks a {
1053 /* this can be used in the content area to switch off special external link
1054 * styling */
1055 background: none !important;
1056 padding: 0 !important;
1058 #content .printfooter {
1059 display: none;