same as in the branch
[lhc/web/wiklou.git] / stylesheets / monobook / main.css
1 /*
2 ** Mediawiki 'monobook' style sheet for CSS2-capable browsers.
3 ** Copyright Gabriel Wicke - http://wikidev.net/
4 ** License: GPL
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 border:1px solid #aaaaaa;
250 border-top: none;
251 font-size: 95%;
252 padding: 0 0.9em 0 0.9em;
253 }
254 #siteNotice p { margin: none; padding: none; }
255 .error {
256 color: red;
257 font-size: larger;
258 }
259 #catlinks {
260 border:1px solid #aaaaaa;
261 background-color:#f9f9f9;
262 padding:5px;
263 margin-top: 1em;
264 clear: both;
265 }
266 /* currently unused, intended to be used by a metadata box
267 in the bottom-right corner of the content area */
268 .documentDescription {
269 /* The summary text describing the document */
270 font-weight: bold;
271 display: block;
272 margin: 1em 0em;
273 line-height: 1.5em;
274 }
275 .documentByLine {
276 text-align: right;
277 font-size: 90%;
278 clear: both;
279 font-weight: normal;
280 color: #76797c;
281 }
282
283 /* emulate center */
284 .center {
285 width: 100%;
286 text-align: center;
287 }
288 *.center * {
289 margin-left: auto;
290 margin-right: auto;
291 }
292 /* small for tables and similar */
293 .small, .small * { font-size: 94%; }
294 table.small { font-size: 100% }
295
296 /*
297 ** content styles
298 */
299
300 #toc {
301 /*border:1px solid #2f6fab;*/
302 border:1px solid #aaaaaa;
303 background-color:#f9f9f9;
304 padding:5px;
305 font-size: 95%;
306 }
307 #toc .tocindent { margin-left: 2em; }
308 #toc .tocline { margin-bottom: 0px; }
309 #toc p { margin: 0 }
310 #toc .toctoggle { font-size: 94%; }
311 #toc .editsection {
312 margin-top: 0.7em;
313 font-size: 94%;
314 }
315
316 /* images */
317 div.floatright, table.floatright {
318 clear: right;
319 float: right;
320 margin: 0;
321 position: relative;
322 border: 0.5em solid White;
323 border-width: 0.5em 0 0.8em 1.4em;
324 }
325 div.floatright p { font-style: italic; }
326 div.floatleft, table.floatleft {
327 float: left;
328 margin: 0.3em 0.5em 0.5em 0;
329 position: relative;
330 border: 0.5em solid White;
331 border-width: 0.5em 1.4em 0.8em 0;
332 }
333 div.floatleft p { font-style: italic; }
334 /* thumbnails */
335 div.thumb {
336 margin-bottom: 0.5em;
337 border-style: solid; border-color: White;
338 width: auto;
339 }
340 div.thumb div {
341 border:1px solid #cccccc;
342 padding: 3px !important;
343 background-color:#f9f9f9;
344 font-size: 94%;
345 text-align: center;
346 overflow: hidden;
347 }
348 div.thumb div a img {
349 border:1px solid #cccccc;
350 }
351 div.thumb div div.thumbcaption {
352 border: none;
353 text-align: left;
354 line-height: 1.4em;
355 padding: 0.3em 0 0.1em 0;
356 }
357 div.magnify {
358 float: right;
359 border: none !important;
360 background: none !important;
361 }
362 div.magnify a, div.magnify img {
363 display: block;
364 border: none !important;
365 background: none !important;
366 }
367 div.tright {
368 clear: right;
369 float: right;
370 border-width: 0.5em 0 0.8em 1.4em;
371 }
372 div.tleft {
373 float: left;
374 margin-right:0.5em;
375 border-width: 0.5em 1.4em 0.8em 0;
376 }
377 .urlexpansion,
378 .hiddenStructure {
379 display: none;
380 }
381 img.tex { vertical-align: middle; }
382 span.texhtml { font-family: serif; }
383
384 /*
385 ** classes for special content elements like town boxes
386 ** intended to be referenced directly from the wiki src
387 */
388
389 /*
390 ** User styles
391 */
392 /* table standards */
393 table.rimage {
394 float:right;
395 position:relative;
396 margin-left:1em;
397 margin-bottom:1em;
398 text-align:center;
399 }
400 .toccolours {
401 border:1px solid #aaaaaa;
402 background-color:#f9f9f9;
403 padding:5px;
404 font-size: 95%;
405 }
406 div.townBox {
407 position:relative;
408 float:right;
409 background:White;
410 margin-left:1em;
411 border: 1px solid Grey;
412 padding:0.3em;
413 width: 200px;
414 overflow: hidden;
415 clear: right;
416 }
417 div.townBox dl {
418 padding: 0;
419 margin: 0 0 0.3em 0;
420 font-size: 96%;
421 }
422 div.townBox dl dt {
423 background: none;
424 margin: 0.4em 0 0 0;
425 }
426 div.townBox dl dd {
427 margin: 0.1em 0 0 1.1em;
428 background-color: #f3f3f3;
429 }
430
431 /*
432 ** edit views etc
433 */
434 .special li {
435 line-height: 1.4em;
436 margin: 0;
437 padding: 0;
438 }
439
440 /* Page history styling */
441 /* the auto-generated edit comments */
442 .autocomment { color: gray; }
443 #pagehistory span.user {
444 margin-left: 1.4em;
445 margin-right: 0.4em;
446 }
447 #pagehistory span.minor { font-weight: bold; }
448 #pagehistory li { border: 1px solid White; }
449 #pagehistory li.selected {
450 background-color:#f9f9f9;
451 border:1px dashed #aaaaaa;
452 }
453 /*
454 ** Diff rendering
455 */
456 table.diff { background:white; }
457 td.diff-otitle { background:#ffffff; }
458 td.diff-ntitle { background:#ffffff; }
459 td.diff-addedline {
460 background:#ccffcc;
461 font-size: smaller;
462 }
463 td.diff-deletedline {
464 background:#ffffaa;
465 font-size: smaller;
466 }
467 td.diff-context {
468 background:#eeeeee;
469 font-size: smaller;
470 }
471 span.diffchange { color: red; }
472
473 /*
474 ** keep the whitespace in front of the ^=, hides rule from konqueror
475 ** this is css3, the validator doesn't like it when validating as css2
476 */
477 #bodyContent a[href ^="http://"],
478 #bodyContent a[href ^="gopher://"] {
479 background: url(external.png) center right no-repeat;
480 padding-right: 13px;
481 }
482 #bodyContent a[href ^="https://"],
483 .link-https {
484 background: url("lock_icon.gif") center right no-repeat;
485 padding-right: 16px;
486 }
487 #bodyContent a[href ^="mailto:"],
488 .link-mailto {
489 background: url("mail_icon.gif") center right no-repeat;
490 padding-right: 18px;
491 }
492 #bodyContent a[href ^="news://"] {
493 background: url("news_icon.png") center right no-repeat;
494 padding-right: 18px;
495 }
496 #bodyContent a[href ^="ftp://"],
497 .link-ftp {
498 background: url("file_icon.gif") center right no-repeat;
499 padding-right: 18px;
500 }
501 #bodyContent a[href ^="irc://"],
502 .link-irc {
503 background: url("discussionitem_icon.gif") center right no-repeat;
504 padding-right: 18px;
505 }
506 /* disable interwiki styling */
507 #bodyContent a.extiw,
508 #bodyContent a.extiw:active {
509 color: #3366bb;
510 background: none;
511 padding: 0;
512 }
513 #bodyContent a.external { color: #3366bb; }
514 /* this can be used in the content area to switch off
515 special external link styling */
516 #bodyContent .plainlinks a {
517 background: none !important;
518 padding: 0;
519 }
520 /*
521 ** Structural Elements
522 */
523
524 /*
525 ** general portlet styles (elements in the quickbar)
526 */
527 .portlet {
528 border: none;
529 margin: 0 0 0.5em 0em;
530 float: none;
531 padding: 0;
532 width: 11.6em;
533 overflow: hidden;
534 }
535 .portlet h4 {
536 font-size: 95%;
537 font-weight: normal;
538 white-space: nowrap;
539 }
540 .portlet h5 {
541 background: transparent;
542 padding: 0em 1em 0em 0.5em;
543 text-transform: lowercase;
544 display: inline;
545 font-size: 91%;
546 height: 1em;
547 font-weight: normal;
548 white-space: nowrap;
549 }
550 .portlet h6 {
551 background: #ffae2e;
552 border: 1px solid #2f6fab;
553 border-style: solid solid none solid;
554 padding: 0em 1em 0em 1em;
555 text-transform: lowercase;
556 display: block;
557 font-size: 1em;
558 height: 1.2em;
559 font-weight: normal;
560 white-space: nowrap;
561 }
562 .pBody {
563 font-size: 95%;
564 background: White;
565 border-collapse: collapse;
566 border: 1px solid #aaaaaa;
567 padding: 0 0.8em 0.3em 0.5em;
568 }
569 .portlet h1,
570 .portlet h2,
571 .portlet h3,
572 .portlet h4 {
573 margin: 0;
574 padding: 0;
575 }
576 .portlet ul {
577 line-height: 1.5em;
578 list-style-type: square;
579 list-style-image: url("bullet.gif");
580 font-size:95%;
581 }
582 .portlet li {
583 padding:0;
584 margin: 0 0 0 0;
585 margin-bottom: 0;
586 }
587
588 /*
589 ** Logo properties
590 */
591
592 #p-logo {
593 z-index: 3;
594 position:absolute; /*needed to use z-index */
595 top: 0;
596 left: 0;
597 height: 155px;
598 width: 12em;
599 overflow: visible;
600 }
601 #p-logo h5 { display: none; }
602 #p-logo a,
603 #p-logo a:hover {
604 display: block;
605 height: 155px;
606 width: 12.2em;
607 background-repeat: no-repeat;
608 background-position: 35% 50% !important;
609 text-decoration: none;
610 }
611
612 /*
613 ** the navigation portlet
614 */
615
616 #p-nav {
617 position:relative;
618 z-index:3;
619 }
620
621 /*
622 ** Search portlet
623 */
624 #p-search {
625 position:relative;
626 z-index:3;
627 }
628 #p-search .pBody {
629 text-align: center;
630 }
631 input.searchButton {
632 margin-top:1px;
633 padding: 0 0.4em !important;
634 font-size: 95%;
635 cursor: pointer;
636 background-color: White;
637 border: 1px solid #2f6fab;
638 }
639 #searchInput {
640 border: 1px solid #2f6fab;
641 width:10.9em;
642 margin: 0 0 0 0;
643 font-size: 95%;
644 }
645 #p-search .pBody {
646 padding: 0.5em 0.4em 0.4em 0.4em;
647 }
648
649 /*
650 ** the personal toolbar
651 */
652
653 #p-personal {
654 width:100%;
655 white-space:nowrap;
656 padding:0 0 0 0;
657 margin:0;
658 position:absolute;
659 left:0px;
660 top:0px;
661 z-index: 0;
662 border: none;
663 background: none;
664 overflow: visible;
665 line-height: 1.2em;
666 }
667
668 #p-personal h5 {
669 display:none;
670 }
671 #p-personal .portlet,
672 #p-personal .pBody {
673 padding:0;
674 margin:0;
675 border: none;
676 z-index:0;
677 overflow: visible;
678 background: none;
679 }
680 /* this is the ul contained in the portlet */
681 #p-personal ul {
682 border: none;
683 line-height: 1.4em;
684 color: #2f6fab;
685 padding: 0em 2em 0 3em;
686 margin: 0;
687 text-align: right;
688 text-transform: lowercase;
689 list-style: none;
690 z-index:0;
691 background: none;
692 }
693 #p-personal li {
694 z-index:0;
695 border:none;
696 padding:0;
697 display: inline;
698 color: #2f6fab;
699 margin-left: 1em;
700 line-height: 1.2em;
701 background: none;
702 }
703 #p-personal li a {
704 text-decoration: none;
705 color: #005896;
706 padding-bottom: 0.2em;
707 background: none;
708 }
709 #p-personal li a:hover {
710 background-color: White;
711 padding-bottom: 0.2em;
712 text-decoration: none;
713 }
714
715 /* the icon in front of the user name, single quotes
716 in bg url to hide it from iemac */
717 li#pt-userpage,
718 li#pt-anonuserpage,
719 li#pt-login {
720 background: url('user.gif') top left no-repeat;
721 background-repeat: no-repeat;
722 padding-left: 20px;
723 text-transform: none;
724 }
725
726 /*
727 ** the page-related actions- page/talk, edit etc
728 */
729 #p-cactions {
730 position:absolute;
731 top: 1.3em;
732 left: 11.5em;
733 margin: 0;
734 white-space:nowrap;
735 width: 76%;
736 line-height: 1.1em;
737 overflow: visible;
738 background: none;
739 border-collapse: collapse;
740 padding-left: 1em;
741 list-style: none;
742 font-size: 95%;
743 }
744 #p-cactions .hiddenStructure { display: none; }
745 #p-cactions ul {
746 list-style: none;
747 }
748 #p-cactions li {
749 display: inline;
750 border: 1px solid #aaaaaa;
751 border-bottom: none;
752 padding: 0 0 0.1em 0;
753 margin: 0 0.3em 0 0;
754 overflow: visible;
755 background: White;
756 }
757 #p-cactions li.selected {
758 border-color: #fabd23;
759 padding: 0 0 0.2em 0;
760 }
761 #p-cactions li a {
762 background-color: White;
763 color: #002bb8;
764 border: none;
765 padding: 0 0.8em 0.3em 0.8em;
766 text-decoration: none;
767 text-transform: lowercase;
768 position: relative;
769 z-index: 0;
770 margin: 0;
771 }
772 #p-cactions .selected a { z-index: 3; }
773 #p-cactions .new a { color:#ba0000; }
774 #p-cactions li a:hover {
775 z-index: 3;
776 text-decoration: none;
777 }
778 #p-cactions h5 { display: none; }
779 #p-cactions li.istalk { margin-right: 0; }
780 #p-cactions li.istalk a { padding-right: 0.5em; }
781 #p-cactions #ca-addsection a {
782 padding-left: 0.4em;
783 padding-right: 0.4em;
784 }
785 /* offsets to distinguish the tab groups */
786 li#ca-talk { margin-right: 1.6em; }
787 li#ca-watch, li#ca-watch { margin-left: 1.6em; }
788
789
790 /*
791 ** the remaining portlets
792 */
793 #p-tbx,
794 #p-lang {
795 position:relative;
796 z-index:3;
797 }
798
799 /*
800 ** footer
801 */
802 #footer {
803 background-color: White;
804 border-top: 1px solid #fabd23;
805 border-bottom: 1px solid #fabd23;
806 margin: 0.6em 0em 1em 0em;
807 padding: 0.4em 0em 1.2em 0em;
808 text-align: center;
809 font-size: 90%;
810 }
811 #footer li {
812 display: inline;
813 margin: 0 1.3em;
814 }
815 /* hide from incapable browsers */
816 head:first-child+body #footer li { white-space: nowrap; }
817 #f-poweredbyico, #f-copyrightico {
818 margin: 0 8px;
819 position: relative;
820 top: -2px; /* Bump it up just a tad */
821 }
822 #f-poweredbyico {
823 float: right;
824 height: 1%;
825 }
826 #f-copyrightico {
827 float: left;
828 height: 1%;
829 }
830
831 /* js pref toc */
832 #preftoc {
833 float: left;
834 margin: 1em 1em 1em 1em;
835 width: 13em;
836 }
837 #preftoc li { border: 1px solid White; }
838 #preftoc li.selected {
839 background-color:#f9f9f9;
840 border:1px dashed #aaaaaa;
841 }
842 #preftoc a,
843 #preftoc a:active {
844 display: block;
845 color: #0014a6;
846 }
847 #prefcontrol {
848 clear: both;
849 float: left;
850 margin-top: 1em;
851 }
852 div.prefsectiontip {
853 font-size: 95%;
854 margin-top: 1em;
855 }
856 fieldset.operaprefsection { margin-left: 15em }
857
858 /*
859 ** IE/Mac fixes, hope to find a validating way to move this
860 ** to a separate stylesheet. This would work but doesn't validate:
861 ** @import("IEMacFixes.css");
862 */
863 /* tabs: border on the a, not the div */
864 * > html #p-cactions li { border:none; }
865 * > html #p-cactions li a {
866 border: 1px solid #aaaaaa;
867 border-bottom: none;
868 }
869 * > html #p-cactions li.selected a { border-color: #fabd23; }
870 /* footer icons need a fixed width */
871 * > html #f-poweredbyico,
872 * > html #f-copyrightico { width: 88px; }
873 * > html #bodyContent,
874 * > html #bodyContent pre {
875 overflow-x: auto;
876 width: 100%;
877 padding-bottom: 25px;
878 }
879
880 /* more IE fixes */
881 /* float/negative margin brokenness */
882 * html #footer {margin-top: 0;}
883 * html #column-content {
884 display: inline;
885 margin-bottom: 0;
886 }
887 * html div.editsection { font-size: smaller; }
888 #pagehistory li.selected { position: relative; }
889
890 /* Mac IE 5.0 fix; floated content turns invisible */
891 * > html #column-content {
892 float: none;
893 }
894 * > html #column-one {
895 position: absolute;
896 left: 0;
897 top: 0;
898 }
899 * > html #footer {
900 margin-left: 13.2em;
901 }