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