Added hook SkinTemplateNavigation which provides a way to tweak the navigation before...
[lhc/web/wiklou.git] / skins / vector / main-ltr.css
1 /* Framework */
2 html,
3 body {
4 height: 100%;
5 margin: 0;
6 padding: 0;
7 font-family: sans-serif;
8 font-size: small;
9 }
10 body {
11 background-image: url(images/page-base.png);
12 }
13 /* Content */
14 div#content {
15 margin-left: 12em;
16 padding: 1em;
17 background-image: url(images/content-base.png);
18 background-position: top left;
19 background-repeat: repeat-y;
20 background-color: white;
21 }
22 /* Head */
23 div#page-base {
24 height: 6em;
25 background-color: white;
26 background-image: url(images/page-fade.png);
27 background-position: bottom left;
28 background-repeat: repeat-x;
29 }
30 div#head-base {
31 margin-top: -6em;
32 margin-left: 12em;
33 height: 6em;
34 background-image: url(images/head-base.png);
35 background-position: bottom left;
36 background-repeat: repeat-x;
37 }
38 div#head {
39 position: absolute;
40 top: 0;
41 right: 0;
42 width: 100%;
43 }
44 div#head ul,
45 div#head li {
46 list-style: none;
47 margin: 0;
48 padding: 0;
49 }
50 div#head h5 {
51 margin: 0;
52 padding: 0;
53 }
54 /* Personal */
55 div#personal {
56 position: absolute;
57 top: 0;
58 right: 0.75em;
59 }
60 div#personal h5 {
61 display: none;
62 }
63 div#personal li {
64 float: left;
65 margin-left: 0.75em;
66 margin-top: 0.5em;
67 font-size: 0.9em;
68 }
69 div#left-navigation {
70 position: absolute;
71 left: 12em;
72 top: 3em;
73 }
74 div#right-navigation {
75 float: right;
76 margin-top: 3em;
77 }
78 /* Navigation Labels */
79 div#namespaces h5,
80 div#variants h5,
81 div#views h5,
82 div#actions h5 span,
83 div#search h5 {
84 display: none;
85 }
86 /* Namespaces and Views */
87 div#namespaces,
88 div#views {
89 float: left;
90 background-image: url(images/tab-break.png);
91 background-position: bottom left;
92 background-repeat: no-repeat;
93 padding-left: 1px;
94 }
95 div#namespaces ul,
96 div#views ul {
97 float: left;
98 height: 100%;
99 }
100 /* OVERRIDDEN BY COMPLIANT BROWSERS */
101 div#namespaces ul li,
102 div#views ul li {
103 display: inline-block;
104 float: left;
105 height: 100%;
106 background-image: url(images/tab-normal-fade.png);
107 background-position: bottom left;
108 background-repeat: repeat-x;
109 }
110 /* IGNORED BY IE6 */
111 div#namespaces ul > li,
112 div#views ul > li {
113 display: block;
114 }
115 div#namespaces li.selected,
116 div#views li.selected {
117 background-image: url(images/tab-current-fade.png);
118 }
119 /* OVERRIDDEN BY COMPLIANT BROWSERS */
120 div#namespaces li a,
121 div#views li a {
122 display: inline-block;
123 height: 3em;
124 padding-left: 0.5em;
125 padding-right: 0.5em;
126 background-image: url(images/tab-break.png);
127 background-position: bottom right;
128 background-repeat: no-repeat;
129 }
130 /* IGNORED BY IE6 */
131 div#namespaces li > a,
132 div#views li > a {
133 display: block;
134 }
135 /* OVERRIDDEN BY COMPLIANT BROWSERS */
136 div#namespaces a span,
137 div#views a span {
138 color: #0645ad;
139 display: inline-block;
140 padding-top: 1.25em;
141 cursor: pointer;
142 }
143 /* IGNORED BY IE6 */
144 div#namespaces a > span,
145 div#views a > span {
146 float: left;
147 display: block;
148 }
149 div#namespaces li.selected a span,
150 div#views li.selected a:visited span {
151 color: #333333;
152 cursor: default;
153 text-decoration: none;
154 }
155 div#namespaces li.new a span,
156 div#namespaces li.new a:visited span{
157 color: #a55858;
158 }
159 /* Variants and Actions */
160 div#variants,
161 div#actions {
162 float: left;
163 background-image: url(images/arrow-down-icon.png);
164 background-position: center center;
165 background-repeat: no-repeat;
166 }
167 div#variants h5,
168 div#actions h5 {
169 float: left;
170 }
171 /* OVERRIDDEN BY COMPLIANT BROWSERS */
172 div#variants h5 a,
173 div#actions h5 a {
174 display: inline-block;
175 width: 24px;
176 height: 3em;
177 text-decoration: none;
178 background-image: url(images/tab-break.png);
179 background-position: bottom right;
180 background-repeat: no-repeat;
181 }
182 /* IGNORED BY IE6 */
183 div#variants h5 > a,
184 div#actions h5 > a {
185 display: block;
186 }
187 div#variants div.menu,
188 div#actions div.menu {
189 display: none;
190 clear: both;
191 }
192 div#variants:hover div.menu,
193 div#actions:hover div.menu {
194 display: block;
195 }
196 div#variants ul,
197 div#actions ul {
198 position: absolute;
199 background-color: white;
200 border: solid 1px silver;
201 border-top-width: 0;
202 padding: 0;
203 margin: 0;
204 margin-left: -1px;
205 }
206 /* OVERRIDDEN BY COMPLIANT BROWSERS */
207 div#variants:hover li a,
208 div#actions li a {
209 display: inline-block;
210 padding: 0.5em;
211 }
212 /* IGNORED BY IE6 */
213 div#variants:hover li > a,
214 div#actions li > a {
215 display: block;
216 }
217 /* Search */
218 div#search {
219 float: left;
220 margin-right: 0.75em;
221 }
222 div#search form,
223 div#search input {
224 float: left;
225 margin-top: 0.4em;
226 margin-left: 0.25em;
227 }
228 /* Panel */
229 div#panel {
230 position: absolute;
231 top: 12em;
232 width: 12em;
233 left: 0;
234 }
235 div#panel div.portal {
236 padding-top: 1.5em;
237 }
238 div#panel div.portal h5 {
239 font-weight: normal;
240 color: #666666;
241 padding: 0.5em;
242 padding-top: 0;
243 padding-left: 1.25em;
244 cursor: default;
245 border: none;
246 font-size: 0.9em;
247 }
248 div#panel div.portal div.body {
249 margin: 0;
250 padding-top: 0.5em;
251 margin-left: 1.25em;
252 background-image: url(images/portal-break-ltr.png);
253 background-repeat: no-repeat;
254 background-position: top left;
255 }
256 div#panel div.portal div.body ul {
257 list-style: none;
258 padding: 0;
259 margin: 0;
260 }
261 div#panel div.portal div.body ul li {
262 padding: 0;
263 padding-bottom: 0.5em;
264 margin: 0;
265 overflow: hidden;
266 font-size: 0.9em;
267 }
268 div#panel div.portal div.body ul li a {
269 color: #0645ad;
270 }
271 div#panel div.portal div.body ul li a:visited {
272 color: #0b0080;
273 }
274 /* Foot */
275 div#foot {
276 margin-left: 12em;
277 margin-top: 0;
278 padding: 0.75em;
279 background-image: url(images/foot-base.png);
280 background-position: top left;
281 background-repeat: repeat-x;
282 }
283 div#foot ul {
284 list-style: none;
285 margin: 0;
286 padding: 0;
287 }
288 div#foot ul li {
289 margin: 0;
290 padding: 0;
291 padding-top: 0.5em;
292 padding-bottom: 0.5em;
293 color: #333333;
294 font-size: 0.9em;
295 }
296 div#foot ul#foot-icons {
297 float: right;
298 }
299 div#foot ul#foot-places {
300 float: left;
301 }
302 div#foot ul#foot-info li {
303 line-height: 1.4em;
304 }
305 div#foot ul#foot-icons li {
306 float: left;
307 margin-left: 0.5em;
308 line-height: 2em;
309 }
310 div#foot ul#foot-places li {
311 float: left;
312 margin-right: 1em;
313 line-height: 2em;
314 }
315 /* Logo */
316 div#logo {
317 position: absolute;
318 top: 0;
319 left: 0;
320 height: 12em;
321 width: 12em;
322 }
323 div#logo a {
324 display: block;
325 width: 12em;
326 height: 12em;
327 background-repeat: no-repeat;
328 background-position: 50% 50%;
329 text-decoration: none;
330 }
331
332 /*
333 *
334 * The following code is highly modified from monobook. It would be nice if the
335 * preftoc id was more human readable like preferences-toc for instance,
336 * howerver this would require backporting the other skins.
337 */
338
339 /* Preferences */
340 #preftoc {
341 /* Tabs */
342 float: left;
343 clear: both;
344 margin: 0 !important;
345 padding: 0 !important;
346 height: 2.25em;
347 background-image: url(images/preferences-break.png);
348 background-position: bottom left;
349 background-repeat: no-repeat;
350 }
351 #preftoc li {
352 /* Tab */
353 float: left;
354 margin: 0;
355 padding: 0;
356 padding-right: 1px;
357 height: 2.25em;
358 white-space: nowrap;
359 list-style-type: none;
360 list-style-image: none;
361 background-image: url(images/preferences-break.png);
362 background-position: bottom right;
363 background-repeat: no-repeat;
364 }
365 /* IGNORED BY IE6 */
366 #preftoc li:first-child {
367 margin-left: 1px;
368 }
369 #preftoc a,
370 #preftoc a:active {
371 display: inline-block;
372 position: relative;
373 color: #0645ad;
374 padding: 0.5em;
375 text-decoration: none;
376 background-image: none;
377 }
378 #preftoc a:hover {
379 text-decoration: underline;
380 }
381 #preftoc li.selected a {
382 cursor: default;
383 background-image: url(images/preferences-fade.png);
384 background-position: bottom;
385 background-repeat: repeat-x;
386 color: #333333;
387 cursor: default;
388 text-decoration: none;
389 }
390 #preferences {
391 float: left;
392 zoom: 1;
393 width: 100%;
394 margin: 0;
395 clear: both;
396 border: solid 1px #cccccc;
397 background-color: #f9f9f9;
398 background-image: url(images/preferences-base.png);
399 }
400 #preferences fieldset.prefsection {
401 border: none;
402 padding: 0;
403 margin: 1em;
404 }
405 #preferences fieldset.prefsection fieldset {
406 border: none;
407 border-top: solid 1px #cccccc;
408 }
409 #preferences legend {
410 color: #666666;
411 }
412 #preferences fieldset.prefsection legend.mainLegend {
413 display: none;
414 }
415 #preferences td {
416 padding-left: 0.5em;
417 padding-right: 0.5em;
418 }
419 #preferences td.htmlform-tip {
420 font-size: x-small;
421 padding: .2em 2em;
422 color: #666666;
423 }
424 #preferences div.mw-prefs-buttons {
425 padding: 1em;
426 }
427 #preferences div.mw-prefs-buttons input {
428 margin-right: 0.25em;
429 }
430
431 /*
432 *
433 * The following code is slightly modified from monobook
434 *
435 */
436 #content {
437 line-height: 1.5em;
438 }
439 /* Links */
440 a {
441 text-decoration: none;
442 color: #0645ad;
443 background: none;
444 }
445 a:visited {
446 color: #0b0080;
447 }
448 a:active {
449 color: #faa700;
450 }
451 a:hover {
452 text-decoration: underline;
453 }
454 a.stub {
455 color: #772233;
456 }
457 a.new, #p-personal a.new {
458 color: #ba0000;
459 }
460 a.new:visited, #p-personal a.new:visited {
461 color: #a55858;
462 }
463
464 /* Inline Elements */
465 img {
466 border: none;
467 vertical-align: middle;
468 }
469 hr {
470 height: 1px;
471 color: #aaa;
472 background-color: #aaa;
473 border: 0;
474 margin: .2em 0 .2em 0;
475 }
476
477 /* Structural Elements */
478 h1,
479 h2,
480 h3,
481 h4,
482 h5,
483 h6 {
484 color: black;
485 background: none;
486 font-weight: normal;
487 margin: 0;
488 padding-top: .5em;
489 padding-bottom: .17em;
490 border-bottom: 1px solid #aaa;
491 width: auto;
492 }
493 h1 { font-size: 188%; }
494 h1 .editsection { font-size: 53%; }
495 h2 { font-size: 150%; }
496 h2 .editsection { font-size: 67%; }
497 h3,
498 h4,
499 h5,
500 h6 {
501 border-bottom: none;
502 font-weight: bold;
503 }
504 h3 { font-size: 132%; }
505 h3 .editsection { font-size: 76%; font-weight: normal; }
506 h4 { font-size: 116%; }
507 h4 .editsection { font-size: 86%; font-weight: normal; }
508 h5 { font-size: 100%; }
509 h5 .editsection { font-weight: normal; }
510 h6 { font-size: 80%; }
511 h6 .editsection { font-size: 125%; font-weight: normal; }
512 p {
513 margin: .4em 0 .5em 0;
514 line-height: 1.5em;
515 }
516 p img {
517 margin: 0;
518 }
519 abbr,
520 acronym,
521 .explain {
522 border-bottom: 1px dotted black;
523 color: black;
524 background: none;
525 cursor: help;
526 }
527 q {
528 font-family: Times, "Times New Roman", serif;
529 font-style: italic;
530 }
531 /* Disabled for now
532 blockquote {
533 font-family: Times, "Times New Roman", serif;
534 font-style: italic;
535 }*/
536 code {
537 background-color: #f9f9f9;
538 }
539 pre {
540 padding: 1em;
541 border: 1px dashed #2f6fab;
542 color: black;
543 background-color: #f9f9f9;
544 line-height: 1.1em;
545 }
546 div#content ul {
547 line-height: 1.5em;
548 list-style-type: square;
549 margin: .3em 0 0 1.5em;
550 padding: 0;
551 list-style-image: url(images/bullet-icon.png);
552 }
553 div#content ol {
554 line-height: 1.5em;
555 margin: .3em 0 0 3.2em;
556 padding: 0;
557 list-style-image: none;
558 }
559 div#content li {
560 margin-bottom: .1em;
561 }
562 div#content dt {
563 font-weight: bold;
564 margin-bottom: .1em;
565 }
566 div#content dl {
567 margin-top: .2em;
568 margin-bottom: .5em;
569 }
570 div#content dd {
571 line-height: 1.5em;
572 margin-left: 2em;
573 margin-bottom: .1em;
574 }
575 /* Tables */
576 div#content table {
577 font-size: 100%;
578 color: black;
579 /* we don't want the bottom borders of <h2>s to be visible through
580 * floated tables */
581 background-color: white;
582 }
583 div#content fieldset table {
584 /* but keep table layouts in forms clean... */
585 background: none;
586 }
587 /* Forms */
588 div#content fieldset {
589 border: 1px solid #2f6fab;
590 margin: 1em 0 1em 0;
591 padding: 0 1em 1em;
592 line-height: 1.5em;
593 }
594 fieldset.nested {
595 margin: 0 0 0.5em 0;
596 padding: 0 0.5em 0.5em;
597 }
598 div#content legend {
599 padding: .5em;
600 font-size: 95%;
601 }
602 div#content form {
603 border: none;
604 margin: 0;
605 }
606 div#content textarea {
607 width: 100%;
608 padding: .1em;
609 }
610 div#content select {
611 vertical-align: top;
612 }
613 /* Table of Contents */
614 #toc,
615 .toc,
616 .mw-warning {
617 border: 1px solid #aaa;
618 background-color: #f9f9f9;
619 padding: 5px;
620 font-size: 95%;
621 }
622 #toc h2,
623 .toc h2 {
624 display: inline;
625 border: none;
626 padding: 0;
627 font-size: 100%;
628 font-weight: bold;
629 }
630 #toc #toctitle,
631 .toc #toctitle,
632 #toc .toctitle,
633 .toc .toctitle {
634 text-align: center;
635 }
636 #toc ul,
637 .toc ul {
638 list-style-type: none;
639 list-style-image: none;
640 margin-left: 0;
641 padding-left: 0;
642 text-align: left;
643 }
644 #toc ul ul,
645 .toc ul ul {
646 margin: 0 0 0 2em;
647 }
648 #toc .toctoggle,
649 .toc .toctoggle {
650 font-size: 94%;
651 }
652 /* Images */
653 div.floatright, table.floatright {
654 clear: right;
655 float: right;
656 position: relative;
657 margin: 0 0 .5em .5em;
658 border: 0;
659 }
660 div.floatright p { font-style: italic; }
661 div.floatleft, table.floatleft {
662 float: left;
663 clear: left;
664 position: relative;
665 margin: 0 .5em .5em 0;
666 border: 0;
667 }
668 div.floatleft p { font-style: italic; }
669 /* Thumbnails */
670 div.thumb {
671 margin-bottom: .5em;
672 border-style: solid;
673 border-color: white;
674 width: auto;
675 }
676 div.thumbinner {
677 border: 1px solid #ccc;
678 padding: 3px !important;
679 background-color: #f9f9f9;
680 font-size: 94%;
681 text-align: center;
682 overflow: hidden;
683 }
684 html .thumbimage {
685 border: 1px solid #ccc;
686 }
687 html .thumbcaption {
688 border: none;
689 text-align: left;
690 line-height: 1.4em;
691 padding: 3px !important;
692 font-size: 94%;
693 }
694 div.magnify {
695 float: right;
696 border: none !important;
697 background: none !important;
698 }
699 div.magnify a, div.magnify img {
700 display: block;
701 border: none !important;
702 background: none !important;
703 }
704 div.tright {
705 clear: right;
706 float: right;
707 border-width: .5em 0 .8em 1.4em;
708 }
709 div.tleft {
710 float: left;
711 clear: left;
712 margin-right: .5em;
713 border-width: .5em 1.4em .8em 0;
714 }
715 img.thumbborder {
716 border: 1px solid #dddddd;
717 }
718 .hiddenStructure {
719 display: none;
720 }
721 /* Warning */
722 .mw-warning {
723 margin-left: 50px;
724 margin-right: 50px;
725 text-align: center;
726 }
727 /* User Message */
728 .usermessage {
729 background-color: #ffce7b;
730 border: 1px solid #ffa500;
731 color: black;
732 font-weight: bold;
733 margin: 2em 0 1em;
734 padding: .5em 1em;
735 vertical-align: middle;
736 }
737 /* Site Notice */
738 #siteNotice {
739 text-align: center;
740 font-size: 95%;
741 padding-top: 0.9em;
742 }
743 #siteNotice p {
744 margin: 0;
745 padding: 0;
746 }
747 /* Categories */
748 .catlinks {
749 border: 1px solid #aaa;
750 background-color: #f9f9f9;
751 padding: 5px;
752 margin-top: 1em;
753 clear: both;
754 }
755 /* Sub-navigation */
756 #siteSub {
757 display: none;
758 }
759 #jump-to-nav {
760 display: none;
761 }
762 #contentSub, #contentSub2 {
763 font-size: 84%;
764 line-height: 1.2em;
765 margin: 0 0 1.4em 1em;
766 color: #7d7d7d;
767 width: auto;
768 }
769 span.subpages {
770 display: block;
771 }
772 /* Emulate Center */
773 .center {
774 width: 100%;
775 text-align: center;
776 }
777 *.center * {
778 margin-left: auto;
779 margin-right: auto;
780 }
781 /* Small for tables and similar */
782 .small, .small * {
783 font-size: 94%;
784 }
785 table.small {
786 font-size: 100%;
787 }
788 /* Edge Cases for Content */
789 #content h1, #content h2 {
790 margin-bottom: .6em;
791 }
792 #content h3, #content h4, #content h5 {
793 margin-bottom: .3em;
794 }
795 h1#firstHeading {
796 padding-top: 0;
797 margin-top: 0;
798 padding-top: 0;
799 margin-bottom: 0.1em;
800 line-height: 1.2em;
801 padding-bottom: 0;
802 }
803 #content a.external,
804 #content a[href ^="gopher://"] {
805 background: url(images/external-link-ltr-icon.png) center right no-repeat;
806 padding: 0 13px 0 0;
807 }
808 #content a[href ^="https://"],
809 .link-https {
810 background: url(images/lock-icon.png) center right no-repeat;
811 padding: 0 18px 0 0;
812 }
813 #content a[href ^="mailto:"],
814 .link-mailto {
815 background: url(images/mail-icon.png) center right no-repeat;
816 padding: 0 18px 0 0;
817 }
818 #content a[href ^="news://"] {
819 background: url(images/news-icon.png) center right no-repeat;
820 padding: 0 18px 0 0;
821 }
822 #content a[href ^="ftp://"],
823 .link-ftp {
824 background: url(images/file-icon.png) center right no-repeat;
825 padding: 0 18px 0 0;
826 }
827 #content a[href ^="irc://"],
828 #content a.extiw[href ^="irc://"],
829 .link-irc {
830 background: url(images/talk-icon.png) center right no-repeat;
831 padding: 0 18px 0 0;
832 }
833 #content a.external[href $=".ogg"], #content a.external[href $=".OGG"],
834 #content a.external[href $=".mid"], #content a.external[href $=".MID"],
835 #content a.external[href $=".midi"], #content a.external[href $=".MIDI"],
836 #content a.external[href $=".mp3"], #content a.external[href $=".MP3"],
837 #content a.external[href $=".wav"], #content a.external[href $=".WAV"],
838 #content a.external[href $=".wma"], #content a.external[href $=".WMA"],
839 .link-audio {
840 background: url("images/audio-icon.png") center right no-repeat;
841 padding: 0 18px 0 0;
842 }
843 #content a.external[href $=".ogm"], #content a.external[href $=".OGM"],
844 #content a.external[href $=".avi"], #content a.external[href $=".AVI"],
845 #content a.external[href $=".mpeg"], #content a.external[href $=".MPEG"],
846 #content a.external[href $=".mpg"], #content a.external[href $=".MPG"],
847 .link-video {
848 background: url("images/video-icon.png") center right no-repeat;
849 padding: 0 18px 0 0;
850 }
851 #content a.external[href $=".pdf"], #content a.external[href $=".PDF"],
852 #content a.external[href *=".pdf#"], #content a.external[href *=".PDF#"],
853 #content a.external[href *=".pdf?"], #content a.external[href *=".PDF?"],
854 .link-document {
855 background: url("images/document-icon.png") center right no-repeat;
856 padding: 0 18px 0 0;
857 }
858 /* Interwiki Styling (Disabled) */
859 #content a.extiw,
860 #content a.extiw:active {
861 color: #36b;
862 background: none;
863 padding: 0;
864 }
865 #content a.external {
866 color: #36b;
867 }
868 #content .plainlinks a {
869 /* this can be used in the content area to switch off special external link
870 * styling */
871 background: none !important;
872 padding: 0 !important;
873 }
874 #content .printfooter {
875 display: none;
876 }
877
878
879 li#pt-userpage,
880 li#pt-anonuserpage,
881 li#pt-login {
882 background: url(images/user-icon.png) left top no-repeat;
883 padding-left: 15px !important;
884 text-transform: none;
885 }