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