50fae8415bbb7636fabcefd6df0c99355252a43c
[lhc/web/wiklou.git] / skins / monobook / main.css
1 /*
2 ** MediaWiki 'monobook' style sheet for CSS2-capable browsers.
3 ** Copyright Gabriel Wicke - http://wikidev.net/
4 ** License: GPL (http://www.gnu.org/copyleft/gpl.html)
5 **
6 ** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John
7 ** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher,
8 ** Michael Zeltner and Geir Bækholt)
9 ** All you guys rock :)
10 */
11
12 #column-content {
13 width: 100%;
14 float: right;
15 margin: 0 0 0.6em -12.2em;
16 padding:0;
17 }
18 #content {
19 margin: 2.8em 0 0 12.2em;
20 padding: 0em 1em 1.5em 1em;
21 background: White;
22 border: 1px solid #aaaaaa;
23 border-right: none;
24 line-height: 1.5em;
25 position: relative;
26 z-index: 2;
27 }
28 #column-one { padding-top: 160px; }
29 /* the left column width is specified in class .portlet */
30
31 /* Font size:
32 ** We take advantage of keyword scaling- browsers won't go below 9px
33 ** More at http://www.w3.org/2003/07/30-font-size
34 ** http://style.cleverchimp.com/font_size_intervals/altintervals.html
35 */
36
37 body {
38 font: x-small sans-serif;
39 background: #f9f9f9 url("headbg.jpg") 0px 0px no-repeat;
40 color: Black;
41 margin: 0;
42 padding: 0;
43 }
44
45 /* scale back up to a sane default */
46 #globalWrapper {
47 font-size:127%;
48 width: 100%;
49 margin: 0;
50 padding: 0;
51 }
52 .visualClear { clear: both; }
53
54 /* general styles */
55
56 table {
57 font-size: 100%;
58 background: White;
59 }
60 a {
61 text-decoration: none;
62 color: #002bb8;
63 background: none;
64 }
65 a:visited { color: #5a3696; }
66 a:active { color: Orange; }
67 a:hover { text-decoration: underline; }
68 a.stub { color: #772233; }
69 a.new,
70 #p-personal a.new { color:#ba0000; }
71 a.new:visited,
72 #p-personal a.new:visited { color:#a55858; }
73
74 img {
75 border: none;
76 vertical-align: middle;
77 }
78 p {
79 margin: 0.4em 0em 0.5em 0em;
80 line-height: 1.5em;
81 }
82
83 p img { margin: 0; }
84
85 hr {
86 height: 1px;
87 color: #aaaaaa;
88 background-color: #aaaaaa;
89 border: 0;
90 margin: 0.2em 0 0.2em 0;
91 }
92
93 h1, h2, h3, h4, h5, h6 {
94 color: Black;
95 background: none;
96 font-weight: normal;
97 margin: 0;
98 padding-top: 0.5em;
99 padding-bottom: 0.17em;
100 border-bottom: 1px solid #aaaaaa;
101 }
102 h1 { font-size: 188%; }
103 h2 { font-size: 150%; }
104 h3, h4, h5, h6 {
105 border-bottom: none;
106 font-weight: bold;
107 }
108 h3 { font-size: 132%; }
109 h4 { font-size: 116%; }
110 h5 { font-size: 100%; }
111 h6 { font-size: 80%; }
112
113 ul {
114 line-height: 1.5em;
115 list-style-type: square;
116 margin: 0.3em 0 0 1.5em;
117 padding:0;
118 list-style-image: url("bullet.gif");
119 }
120 ol {
121 line-height: 1.5em;
122 margin: 0.3em 0 0 3.2em;
123 padding:0;
124 list-style-image: none;
125 }
126 li { margin-bottom: 0.1em; }
127 dt {
128 font-weight: bold;
129 margin-bottom: 0.1em;
130 }
131 dl{
132 margin-top: 0.2em;
133 margin-bottom: 0.5em;
134 }
135 dd {
136 line-height: 1.5em;
137 margin-left: 2em;
138 margin-bottom: 0.1em;
139 }
140
141 fieldset {
142 border: 1px solid #2f6fab;
143 margin: 1em 0em 1em 0em;
144 padding: 0em 1em 1em 1em;
145 line-height: 1.5em;
146 }
147 legend {
148 background: White;
149 padding: 0.5em;
150 font-size: 95%;
151 }
152 form {
153 border: none;
154 margin: 0;
155 }
156
157 textarea {
158 border: 1px solid #2f6fab;
159 color: Black;
160 background-color: white;
161 width: 100%;
162 padding: 0.1em;
163 overflow: auto;
164 }
165 /* hide this from ie/mac and konq2.2 */
166 @media All {
167 head:first-child+body input {
168 visibility: visible;
169 border: 1px solid #2f6fab;
170 color: Black;
171 background-color: white;
172 vertical-align: middle;
173 padding: 0.2em;
174 }
175 }
176 input.historysubmit {
177 padding: 0 0.3em 0.3em 0.3em !important;
178 font-size: 94%;
179 cursor: pointer;
180 height: 1.7em !important;
181 margin-left: 1.6em;
182 }
183 input[type="radio"],
184 input[type="checkbox"] { border:none; }
185 select {
186 border: 1px solid #2f6fab;
187 color: Black;
188 vertical-align: top;
189 }
190 abbr, acronym, .explain {
191 border-bottom: 1px dotted Black;
192 color: Black;
193 background: none;
194 cursor: help;
195 }
196 q {
197 font-family: Times, "Times New Roman", serif;
198 font-style: italic;
199 }
200 /* disabled for now
201 blockquote {
202 font-family: Times, "Times New Roman", serif;
203 font-style: italic;
204 }*/
205 code { background-color: #f9f9f9; }
206 pre {
207 padding: 1em;
208 border: 1px dashed #2f6fab;
209 color: Black;
210 background-color: #f9f9f9;
211 line-height: 1.1em;
212 }
213
214
215 /*
216 ** the main content area
217 */
218
219 #siteSub { display: none; }
220 #contentSub {
221 font-size: 84%;
222 line-height: 1.2em;
223 margin: 0 0 1.4em 1em;
224 color: #7d7d7d;
225 width: auto;
226 }
227 span.subpages { display: block; }
228
229 /* Some space under the headers in the content area */
230 #bodyContent h1, #bodyContent h2 { margin-bottom:0.6em; }
231 #bodyContent h3,
232 #bodyContent h4,
233 #bodyContent h5 {
234 margin-bottom: 0.3em;
235 }
236 .firstHeading { margin-bottom:0.1em; }
237
238 /* user notification thing */
239 .usermessage {
240 background-color: #ffce7b;
241 border: 1px solid #ffa500;
242 color: Black;
243 font-weight: bold;
244 margin: 2em 0em 1em 0em;
245 padding: 0.5em 1em;
246 vertical-align: middle;
247 }
248 #siteNotice {
249 text-align: center;
250 font-size: 95%;
251 padding: 0 0.9em 0 0.9em;
252 }
253 #siteNotice p { margin: none; padding: none; }
254 .error {
255 color: red;
256 font-size: larger;
257 }
258 #catlinks {
259 border:1px solid #aaaaaa;
260 background-color:#f9f9f9;
261 padding:5px;
262 margin-top: 1em;
263 clear: both;
264 }
265 /* currently unused, intended to be used by a metadata box
266 in the bottom-right corner of the content area */
267 .documentDescription {
268 /* The summary text describing the document */
269 font-weight: bold;
270 display: block;
271 margin: 1em 0em;
272 line-height: 1.5em;
273 }
274 .documentByLine {
275 text-align: right;
276 font-size: 90%;
277 clear: both;
278 font-weight: normal;
279 color: #76797c;
280 }
281
282 /* emulate center */
283 .center {
284 width: 100%;
285 text-align: center;
286 }
287 *.center * {
288 margin-left: auto;
289 margin-right: auto;
290 }
291 /* small for tables and similar */
292 .small, .small * { font-size: 94%; }
293 table.small { font-size: 100% }
294
295 /*
296 ** content styles
297 */
298
299 #toc {
300 /*border:1px solid #2f6fab;*/
301 border:1px solid #aaaaaa;
302 background-color:#f9f9f9;
303 padding:5px;
304 font-size: 95%;
305 }
306 #toc .tocindent { margin-left: 2em; }
307 #toc .tocline { margin-bottom: 0px; }
308 #toc p { margin: 0 }
309 #toc .toctoggle { font-size: 94%; }
310 #toc .editsection {
311 margin-top: 0.7em;
312 font-size: 94%;
313 }
314
315 /* images */
316 div.floatright, table.floatright {
317 clear: right;
318 float: right;
319 margin: 0;
320 position: relative;
321 border: 0.5em solid White;
322 border-width: 0.5em 0 0.8em 1.4em;
323 }
324 div.floatright p { font-style: italic; }
325 div.floatleft, table.floatleft {
326 float: left;
327 margin: 0.3em 0.5em 0.5em 0;
328 position: relative;
329 border: 0.5em solid White;
330 border-width: 0.5em 1.4em 0.8em 0;
331 }
332 div.floatleft p { font-style: italic; }
333 /* thumbnails */
334 div.thumb {
335 margin-bottom: 0.5em;
336 border-style: solid; border-color: White;
337 width: auto;
338 }
339 div.thumb div {
340 border:1px solid #cccccc;
341 padding: 3px !important;
342 background-color:#f9f9f9;
343 font-size: 94%;
344 text-align: center;
345 overflow: hidden;
346 }
347 div.thumb div a img {
348 border:1px solid #cccccc;
349 }
350 div.thumb div div.thumbcaption {
351 border: none;
352 text-align: left;
353 line-height: 1.4em;
354 padding: 0.3em 0 0.1em 0;
355 }
356 div.magnify {
357 float: right;
358 border: none !important;
359 background: none !important;
360 }
361 div.magnify a, div.magnify img {
362 display: block;
363 border: none !important;
364 background: none !important;
365 }
366 div.tright {
367 clear: right;
368 float: right;
369 border-width: 0.5em 0 0.8em 1.4em;
370 }
371 div.tleft {
372 float: left;
373 margin-right:0.5em;
374 border-width: 0.5em 1.4em 0.8em 0;
375 }
376 .urlexpansion,
377 .hiddenStructure {
378 display: none;
379 }
380 img.tex { vertical-align: middle; }
381 span.texhtml { font-family: serif; }
382
383 /*
384 ** classes for special content elements like town boxes
385 ** intended to be referenced directly from the wiki src
386 */
387
388 /*
389 ** User styles
390 */
391 /* table standards */
392 table.rimage {
393 float:right;
394 position:relative;
395 margin-left:1em;
396 margin-bottom:1em;
397 text-align:center;
398 }
399 .toccolours {
400 border:1px solid #aaaaaa;
401 background-color:#f9f9f9;
402 padding:5px;
403 font-size: 95%;
404 }
405 div.townBox {
406 position:relative;
407 float:right;
408 background:White;
409 margin-left:1em;
410 border: 1px solid Grey;
411 padding:0.3em;
412 width: 200px;
413 overflow: hidden;
414 clear: right;
415 }
416 div.townBox dl {
417 padding: 0;
418 margin: 0 0 0.3em 0;
419 font-size: 96%;
420 }
421 div.townBox dl dt {
422 background: none;
423 margin: 0.4em 0 0 0;
424 }
425 div.townBox dl dd {
426 margin: 0.1em 0 0 1.1em;
427 background-color: #f3f3f3;
428 }
429
430 /*
431 ** edit views etc
432 */
433 .special li {
434 line-height: 1.4em;
435 margin: 0;
436 padding: 0;
437 }
438
439 /* Page history styling */
440 /* the auto-generated edit comments */
441 .autocomment { color: gray; }
442 #pagehistory span.user {
443 margin-left: 1.4em;
444 margin-right: 0.4em;
445 }
446 #pagehistory span.minor { font-weight: bold; }
447 #pagehistory li { border: 1px solid White; }
448 #pagehistory li.selected {
449 background-color:#f9f9f9;
450 border:1px dashed #aaaaaa;
451 }
452 /*
453 ** Diff rendering
454 */
455 table.diff { background:white; }
456 td.diff-otitle { background:#ffffff; }
457 td.diff-ntitle { background:#ffffff; }
458 td.diff-addedline {
459 background:#ccffcc;
460 font-size: smaller;
461 }
462 td.diff-deletedline {
463 background:#ffffaa;
464 font-size: smaller;
465 }
466 td.diff-context {
467 background:#eeeeee;
468 font-size: smaller;
469 }
470 span.diffchange { color: red; }
471
472 /*
473 ** keep the whitespace in front of the ^=, hides rule from konqueror
474 ** this is css3, the validator doesn't like it when validating as css2
475 */
476 #bodyContent a[href ^="http://"],
477 #bodyContent a[href ^="gopher://"] {
478 background: url(external.png) center right no-repeat;
479 padding-right: 13px;
480 }
481 #bodyContent a[href ^="https://"],
482 .link-https {
483 background: url("lock_icon.gif") center right no-repeat;
484 padding-right: 16px;
485 }
486 #bodyContent a[href ^="mailto:"],
487 .link-mailto {
488 background: url("mail_icon.gif") center right no-repeat;
489 padding-right: 18px;
490 }
491 #bodyContent a[href ^="news://"] {
492 background: url("news_icon.png") center right no-repeat;
493 padding-right: 18px;
494 }
495 #bodyContent a[href ^="ftp://"],
496 .link-ftp {
497 background: url("file_icon.gif") center right no-repeat;
498 padding-right: 18px;
499 }
500 #bodyContent a[href ^="irc://"],
501 .link-irc {
502 background: url("discussionitem_icon.gif") center right no-repeat;
503 padding-right: 18px;
504 }
505 /* disable interwiki styling */
506 #bodyContent a.extiw,
507 #bodyContent a.extiw:active {
508 color: #3366bb;
509 background: none;
510 padding: 0;
511 }
512 #bodyContent a.external { color: #3366bb; }
513 /* this can be used in the content area to switch off
514 special external link styling */
515 #bodyContent .plainlinks a {
516 background: none !important;
517 padding: 0;
518 }
519 /*
520 ** Structural Elements
521 */
522
523 /*
524 ** general portlet styles (elements in the quickbar)
525 */
526 .portlet {
527 border: none;
528 margin: 0 0 0.5em 0em;
529 float: none;
530 padding: 0;
531 width: 11.6em;
532 overflow: hidden;
533 }
534 .portlet h4 {
535 font-size: 95%;
536 font-weight: normal;
537 white-space: nowrap;
538 }
539 .portlet h5 {
540 background: transparent;
541 padding: 0em 1em 0em 0.5em;
542 text-transform: lowercase;
543 display: inline;
544 font-size: 91%;
545 height: 1em;
546 font-weight: normal;
547 white-space: nowrap;
548 }
549 .portlet h6 {
550 background: #ffae2e;
551 border: 1px solid #2f6fab;
552 border-style: solid solid none solid;
553 padding: 0em 1em 0em 1em;
554 text-transform: lowercase;
555 display: block;
556 font-size: 1em;
557 height: 1.2em;
558 font-weight: normal;
559 white-space: nowrap;
560 }
561 .pBody {
562 font-size: 95%;
563 background: White;
564 border-collapse: collapse;
565 border: 1px solid #aaaaaa;
566 padding: 0 0.8em 0.3em 0.5em;
567 }
568 .portlet h1,
569 .portlet h2,
570 .portlet h3,
571 .portlet h4 {
572 margin: 0;
573 padding: 0;
574 }
575 .portlet ul {
576 line-height: 1.5em;
577 list-style-type: square;
578 list-style-image: url("bullet.gif");
579 font-size:95%;
580 }
581 .portlet li {
582 padding:0;
583 margin: 0 0 0 0;
584 margin-bottom: 0;
585 }
586
587 /*
588 ** Logo properties
589 */
590
591 #p-logo {
592 z-index: 3;
593 position:absolute; /*needed to use z-index */
594 top: 0;
595 left: 0;
596 height: 155px;
597 width: 12em;
598 overflow: visible;
599 }
600 #p-logo h5 { display: none; }
601 #p-logo a,
602 #p-logo a:hover {
603 display: block;
604 height: 155px;
605 width: 12.2em;
606 background-repeat: no-repeat;
607 background-position: 35% 50% !important;
608 text-decoration: none;
609 }
610
611 /*
612 ** the navigation portlet
613 */
614
615 #p-nav {
616 position:relative;
617 z-index:3;
618 }
619
620 /*
621 ** Search portlet
622 */
623 #p-search {
624 position:relative;
625 z-index:3;
626 }
627 #p-search .pBody {
628 text-align: center;
629 }
630 input.searchButton {
631 margin-top:1px;
632 padding: 0 0.4em !important;
633 font-size: 95%;
634 cursor: pointer;
635 background-color: White;
636 border: 1px solid #2f6fab;
637 }
638 #searchInput {
639 border: 1px solid #2f6fab;
640 width:10.9em;
641 margin: 0 0 0 0;
642 font-size: 95%;
643 }
644 #p-search .pBody {
645 padding: 0.5em 0.4em 0.4em 0.4em;
646 }
647
648 /*
649 ** the personal toolbar
650 */
651
652 #p-personal {
653 width:100%;
654 white-space:nowrap;
655 padding:0 0 0 0;
656 margin:0;
657 position:absolute;
658 left:0px;
659 top:0px;
660 z-index: 0;
661 border: none;
662 background: none;
663 overflow: visible;
664 line-height: 1.2em;
665 }
666
667 #p-personal h5 {
668 display:none;
669 }
670 #p-personal .portlet,
671 #p-personal .pBody {
672 padding:0;
673 margin:0;
674 border: none;
675 z-index:0;
676 overflow: visible;
677 background: none;
678 }
679 /* this is the ul contained in the portlet */
680 #p-personal ul {
681 border: none;
682 line-height: 1.4em;
683 color: #2f6fab;
684 padding: 0em 2em 0 3em;
685 margin: 0;
686 text-align: right;
687 text-transform: lowercase;
688 list-style: none;
689 z-index:0;
690 background: none;
691 }
692 #p-personal li {
693 z-index:0;
694 border:none;
695 padding:0;
696 display: inline;
697 color: #2f6fab;
698 margin-left: 1em;
699 line-height: 1.2em;
700 background: none;
701 }
702 #p-personal li a {
703 text-decoration: none;
704 color: #005896;
705 padding-bottom: 0.2em;
706 background: none;
707 }
708 #p-personal li a:hover {
709 background-color: White;
710 padding-bottom: 0.2em;
711 text-decoration: none;
712 }
713
714 /* the icon in front of the user name, single quotes
715 in bg url to hide it from iemac */
716 li#pt-userpage,
717 li#pt-anonuserpage,
718 li#pt-login {
719 background: url('user.gif') top left no-repeat;
720 background-repeat: no-repeat;
721 padding-left: 20px;
722 text-transform: none;
723 }
724
725 /*
726 ** the page-related actions- page/talk, edit etc
727 */
728 #p-cactions {
729 position:absolute;
730 top: 1.3em;
731 left: 11.5em;
732 margin: 0;
733 white-space:nowrap;
734 width: 76%;
735 line-height: 1.1em;
736 overflow: visible;
737 background: none;
738 border-collapse: collapse;
739 padding-left: 1em;
740 list-style: none;
741 font-size: 95%;
742 }
743 #p-cactions .hiddenStructure { display: none; }
744 #p-cactions ul {
745 list-style: none;
746 }
747 #p-cactions li {
748 display: inline;
749 border: 1px solid #aaaaaa;
750 border-bottom: none;
751 padding: 0 0 0.1em 0;
752 margin: 0 0.3em 0 0;
753 overflow: visible;
754 background: White;
755 }
756 #p-cactions li.selected {
757 border-color: #fabd23;
758 padding: 0 0 0.2em 0;
759 }
760 #p-cactions li a {
761 background-color: White;
762 color: #002bb8;
763 border: none;
764 padding: 0 0.8em 0.3em 0.8em;
765 text-decoration: none;
766 text-transform: lowercase;
767 position: relative;
768 z-index: 0;
769 margin: 0;
770 }
771 #p-cactions .selected a { z-index: 3; }
772 #p-cactions .new a { color:#ba0000; }
773 #p-cactions li a:hover {
774 z-index: 3;
775 text-decoration: none;
776 }
777 #p-cactions h5 { display: none; }
778 #p-cactions li.istalk { margin-right: 0; }
779 #p-cactions li.istalk a { padding-right: 0.5em; }
780 #p-cactions #ca-addsection a {
781 padding-left: 0.4em;
782 padding-right: 0.4em;
783 }
784 /* offsets to distinguish the tab groups */
785 li#ca-talk { margin-right: 1.6em; }
786 li#ca-watch, li#ca-watch { margin-left: 1.6em; }
787
788
789 /*
790 ** the remaining portlets
791 */
792 #p-tbx,
793 #p-lang {
794 position:relative;
795 z-index:3;
796 }
797
798 /*
799 ** footer
800 */
801 #footer {
802 background-color: White;
803 border-top: 1px solid #fabd23;
804 border-bottom: 1px solid #fabd23;
805 margin: 0.6em 0em 1em 0em;
806 padding: 0.4em 0em 1.2em 0em;
807 text-align: center;
808 font-size: 90%;
809 }
810 #footer li {
811 display: inline;
812 margin: 0 1.3em;
813 }
814 /* hide from incapable browsers */
815 head:first-child+body #footer li { white-space: nowrap; }
816 #f-poweredbyico, #f-copyrightico {
817 margin: 0 8px;
818 position: relative;
819 top: -2px; /* Bump it up just a tad */
820 }
821 #f-poweredbyico {
822 float: right;
823 height: 1%;
824 }
825 #f-copyrightico {
826 float: left;
827 height: 1%;
828 }
829
830 /* js pref toc */
831 #preftoc {
832 float: left;
833 margin: 1em 1em 1em 1em;
834 width: 13em;
835 }
836 #preftoc li { border: 1px solid White; }
837 #preftoc li.selected {
838 background-color:#f9f9f9;
839 border:1px dashed #aaaaaa;
840 }
841 #preftoc a,
842 #preftoc a:active {
843 display: block;
844 color: #0014a6;
845 }
846 #prefcontrol {
847 clear: both;
848 float: left;
849 margin-top: 1em;
850 }
851 div.prefsectiontip {
852 font-size: 95%;
853 margin-top: 1em;
854 }
855 fieldset.operaprefsection { margin-left: 15em }
856
857 /*
858 ** IE/Mac fixes, hope to find a validating way to move this
859 ** to a separate stylesheet. This would work but doesn't validate:
860 ** @import("IEMacFixes.css");
861 */
862 /* tabs: border on the a, not the div */
863 * > html #p-cactions li { border:none; }
864 * > html #p-cactions li a {
865 border: 1px solid #aaaaaa;
866 border-bottom: none;
867 }
868 * > html #p-cactions li.selected a { border-color: #fabd23; }
869 /* footer icons need a fixed width */
870 * > html #f-poweredbyico,
871 * > html #f-copyrightico { width: 88px; }
872 * > html #bodyContent,
873 * > html #bodyContent pre {
874 overflow-x: auto;
875 width: 100%;
876 padding-bottom: 25px;
877 }
878
879 /* more IE fixes */
880 /* float/negative margin brokenness */
881 * html #footer {margin-top: 0;}
882 * html #column-content {
883 display: inline;
884 margin-bottom: 0;
885 }
886 * html div.editsection { font-size: smaller; }
887 #pagehistory li.selected { position: relative; }
888
889 /* Mac IE 5.0 fix; floated content turns invisible */
890 * > html #column-content {
891 float: none;
892 }
893 * > html #column-one {
894 position: absolute;
895 left: 0;
896 top: 0;
897 }
898 * > html #footer {
899 margin-left: 13.2em;
900 }
901 .redirectText {
902 font-size:150%;
903 margin:5px;
904 }
905
906 .printfooter {
907 display: none;
908 }
909
910 .not_patrolled {
911 background-color: #ffa;
912 }
913 div.patrollink {
914 font-size: 75%;
915 text-align: right;
916 }
917 span.newpage, span.minor, span.searchmatch {
918 font-weight: bold;
919 }
920 span.searchmatch {
921 color: red;
922 }
923 .sharedUploadNotice {
924 font-style: italic;
925 }