crop logo at very small font sizes to avoid overlapping the content area
[lhc/web/wiklou.git] / stylesheets / monobook / main.css
1 /*
2 ** Mediawiki 'monobook' 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 2.2em;
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.6em;
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: 0 0 1.4em 1em;
266 color: #7d7d7d;
267 width: auto;
268 }
269 #siteSubtitle {
270 display: none;
271 }
272 #catlinks {
273 margin: 0;
274 padding: 0;
275 width: 34%;
276 text-align: right;
277 float: right;
278 }
279
280 #content {
281 padding: 0 0 1em 0em;
282 margin: 0;
283 }
284
285 a:hover {
286 text-decoration: underline;
287 }
288
289 /* Some space under the headers in the content area */
290 #bodyContent h1,
291 #bodyContent h2,
292 #bodyContent h3,
293 #bodyContent h4,
294 #bodyContent h5 {
295 margin-bottom:0.8em;
296 }
297 .documentFirstHeading {
298 margin-bottom:0.1em;
299 }
300
301
302 #documentContent {
303 padding: 0em 1em 1.5em 1em;
304 background: White;
305 border: 1px solid #aaaaaa;
306 border-right: none;
307 margin:0;
308 line-height: 1.5em;
309 position: relative;
310 z-index: 2;
311 }
312
313 /* this will be the user notification thing */
314 .portalMessage {
315 background-color: #ffce7b;
316 border: 1px solid #ffa500;
317 color: Black;
318 font-size: 100%;
319 font-weight: bold;
320 margin: 2em 0em 1em 0em;
321 padding: 0.5em 1em;
322 vertical-align: middle;
323 }
324 .documentDescription {
325 /* The summary text describing the document */
326 font-weight: bold;
327 display: block;
328 margin: 1em 0em;
329 line-height: 1.5em;
330 }
331 .documentByLine {
332 text-align: right;
333 font-size: 90%;
334 clear: both;
335 font-weight: normal;
336 color: #76797c;
337 }
338 .documentByLine a {
339 text-decoration: none;
340 }
341
342 /* emulate center */
343 .center {
344 width: 100%;
345 text-align: center;
346 }
347 div.center * {
348 margin-left: auto;
349 margin-right: auto;
350 }
351 /*
352 ** mediawiki-specific styles
353 */
354
355 a.stub,
356 a.new { color:#ba0000; text-decoration:none; }
357
358 #toc {
359 /*border:1px solid #2f6fab;*/
360 border:1px solid #aaaaaa;
361 background-color:#f9f9f9;
362 padding:5px;
363 font-size: 95%;
364 }
365 .tocindent {
366 margin-left: 2em;
367 }
368 .tocline {
369 margin-bottom: 0px;
370 }
371 .toctoggle, .editsection {
372 font-size: 94%;
373 }
374 /* images */
375 div.floatright {
376 float: right;
377 margin: 0;
378 position:relative;
379 border: 0.5em solid White;
380 border-width: 0.5em 0 0.8em 1.4em;
381 }
382 div.floatright p { font-style: italic;}
383 div.floatleft {
384 float: left;
385 margin: 0.3em 0.5em 0.5em 0;
386 position:relative;
387 border: 0.5em solid White;
388 border-width: 0.5em 1.4em 0.8em 0;
389 }
390 div.floatleft p { font-style: italic; }
391 /* thumbnails */
392 div.thumb {
393 margin-bottom: 0.5em;
394 border-style: solid; border-color: White;
395 width: auto;
396 }
397 div.thumb div {
398 border:1px solid #cccccc;
399 padding: 3px !important;
400 background-color:#f9f9f9;
401 font-size: 94%;
402 }
403 div.thumb div a img {
404 border:1px solid #cccccc;
405 }
406 div div.thumbcaption {
407 border: none;
408 text-align: left;
409 padding: 0.3em 0 0.1em 0 !important;
410 }
411 div.magnify {
412 float: right;
413 border: none !important;
414 background: none !important;
415 }
416 div.magnify a, div.magnify img {
417 display: block;
418 border: none !important;
419 background: none !important;
420 }
421 /* table standards */
422 table.rimage {
423 float:right;
424 width:1pt;
425 position:relative;
426 margin-left:1em;
427 margin-bottom:1em;
428 text-align:center;
429 }
430 div.tright {
431 float: right;
432 border-width: 0.5em 0 0.8em 1.4em;
433 }
434 div.tleft {
435 float: left;
436 margin-right:0.5em;
437 border: 0.5em 1.4em 0.8em 0;
438 }
439 /*
440 ** Link rendering
441 */
442
443 .urlexpansion,
444 .hiddenStructure {
445 display: none;
446 }
447 /*
448 ** Diff rendering
449 */
450 table.diff {
451 background:white;
452 }
453 td.diff-otitle {
454 background:#ffffff;
455 }
456 td.diff-ntitle {
457 background:#ffffff;
458 }
459 td.diff-addedline {
460 background:#ccffcc;
461 }
462 td.diff-deletedline {
463 background:#ffffaa;
464 }
465 td.diff-context {
466 background:#eeeeee;
467 }
468
469 /*
470 ** keep the whitespace in front of the ^=, hides rule from konqueror
471 ** this is css3, the validator doesn't like it when validating as css2
472 */
473 #bodyContent a[href ^="http://"],
474 #bodyContent a[href ^="gopher://"] {
475 background: url(external.png) center right no-repeat;
476 padding-right: 13px;
477 }
478 #bodyContent a[href ^="https://"],
479 .link-https {
480 background: transparent url("lock_icon.gif") center right no-repeat;
481 padding-right: 16px;
482 }
483 #bodyContent a[href ^="mailto:"],
484 .link-mailto {
485 background: transparent url("mail_icon.gif") center right no-repeat;
486 padding-right: 18px;
487 }
488 #bodyContent a[href ^="news://"] {
489 background: transparent url("news_icon.png") center right no-repeat;
490 padding-right: 18px;
491 }
492 #bodyContent a[href ^="ftp://"],
493 .link-ftp {
494 background: transparent url("file_icon.gif") center right no-repeat;
495 padding-right: 18px;
496 }
497 #bodyContent a[href ^="irc://"],
498 .link-irc {
499 background: transparent url("discussionitem_icon.gif") center right no-repeat;
500 padding-right: 18px;
501 }
502 .visualClear {
503 clear: both;
504 }
505
506 /*
507 ** classes for special content elements like town boxes
508 */
509 div.townBox {
510 position:relative;
511 float:right;
512 background:White;
513 margin-left:1em;
514 border: 1px solid Grey;
515 padding:0.3em;
516 width: 200px;
517 overflow: hidden;
518 clear: right;
519 }
520 div.townBox dl {
521 padding: 0;
522 margin: 0 0 0.3em 0;
523 font-size: 96%;
524 }
525 div.townBox dl dt {
526 background-color: transparent;
527 margin: 0.4em 0 0 0;
528 }
529 div.townBox dl dd {
530 margin: 0.1em 0 0 1.1em;
531 background-color: #f3f3f3;
532 }
533
534 /*
535 ** Special content area views
536 */
537 .special li {
538 line-height: 1.4em;
539 margin: 0;
540 padding: 0;
541 }
542 /* the auto-generated edit comments */
543 .autocomment { color: gray; }
544
545
546 /*
547 ** Structural Elements
548 */
549
550 /*
551 ** the portlets (elements in the quickbar)
552 */
553 .portlet {
554 border: none;
555 margin: 0 0 0.5em 0em;
556 float: none;
557 padding: 0;
558 width: 11.6em;
559 overflow: hidden;
560 }
561 .portlet h4 {
562 font-size: 95%;
563 font-weight: normal;
564 white-space: nowrap;
565 }
566 .portlet h5 {
567 background: transparent;
568 padding: 0em 1em 0em 0.5em;
569 text-transform: lowercase;
570 display: inline;
571 font-size: 91%;
572 height: 1em;
573 font-weight: normal;
574 white-space: nowrap;
575 }
576 .portlet h6 {
577 background: #ffae2e;
578 border: 1px solid #2f6fab;
579 border-style: solid solid none solid;
580 padding: 0em 1em 0em 1em;
581 text-transform: lowercase;
582 display: block;
583 font-size: 1em;
584 height: 1.2em;
585 font-weight: normal;
586 white-space: nowrap;
587 }
588 .portletBody {
589 font-size: 95%;
590 background: White;
591 border-collapse: collapse;
592 border: 1px solid #aaaaaa;
593 }
594 .portletDetails {
595 text-align: right;
596 }
597 .portletMore {
598 display: block;
599 text-align: right;
600 }
601 .portletContent {
602 padding: 0.1em 0.8em 0.7em 0.5em;
603 }
604 .portletClose {
605 float: right;
606 text-transform: none;
607 border-left: 1px solid #2f6fab;
608 padding: 0em 0.2em;
609 }
610 .portlet h1,
611 .portlet h2,
612 .portlet h3,
613 .portlet h4 {
614 margin: 0;
615 padding: 0;
616 }
617 .portlet .even {
618 background-color: #f7f9fa;
619 }
620 .portlet .odd {
621 background-color: transparent;
622 }
623 .portlet input {
624 font-size: 100%;
625 }
626 .portlet ul {
627 line-height: 1.5em;
628 list-style-type: square;
629 list-style-image: url("bullet.gif");
630 font-size:95%;
631 }
632 .portlet li {
633 padding:0;
634 margin: 0 0 0 0;
635 margin-bottom: 0;
636 }
637 .even {
638 background-color: #f7f9fa;
639 }
640 .odd {
641 background-color: transparent;
642 }
643 .visualHighlight {
644 background-color: #f7f9fa;
645 }
646 .discreet {
647 color: #76797c;
648 font-size: 80%;
649 font-weight: normal;
650 }
651
652 /*
653 ** Logo properties
654 */
655
656 #portlet-logo {
657 z-index: 3;
658 position:absolute; /*needed to use z-index */
659 top: 0;
660 left: 0;
661 height: 155px;
662 width: 12em;
663 overflow: visible;
664 }
665 #portlet-logo h5 { display: none; }
666 #portlet-logo a,
667 #portlet-logo a:hover {
668 display: block;
669 height: 155px;
670 width: 12.2em;
671 background-repeat: no-repeat;
672 text-decoration: none;
673 }
674
675 /*
676 ** the navigation portlet
677 */
678
679
680 #portlet-navigation {
681 position:relative;
682 z-index:3;
683 }
684 #portlet-navigation .plain {
685 white-space: nowrap;
686 }
687
688 /*
689 ** Search portlet
690 */
691 #portlet-search {
692 position:relative;
693 z-index:3;
694 }
695 #portlet-search .portletBody {
696 text-align: center;
697 }
698 input.searchButton {
699 margin-top:1px;
700 padding: 0 0.4em!important;
701 font-size: 95%;
702 cursor: pointer;
703 background-color: White;
704 border: 1px solid #2f6fab;
705 }
706
707 #searchGadget {
708 border: 1px solid #2f6fab;
709 width:10.9em;
710 margin: 0 0 0 0;
711 font-size: 95%;
712 }
713
714
715 #portlet-search .portletContent {
716 padding: 0.5em 0.4em 0.4em 0.4em;
717 }
718
719
720 /*
721 ** the personal toolbar
722 */
723
724 #portlet-personal {
725 width:100%;
726 white-space:nowrap;
727 padding:0 0 0 0;
728 margin:0;
729 position:absolute;
730 left:0px;
731 top:0px;
732 z-index: 0;
733 border: none;
734 background-color: transparent;
735 overflow: visible;
736 line-height: 1.2em;
737 }
738
739 #portlet-personal h5 {
740 display:none;
741 }
742 #portlet-personal .portlet,
743 #portlet-personal .portletBody,
744 #portlet-personal .portletContent,
745 #portlet-personal .odd{
746 padding:0;
747 margin:0;
748 border: none;
749 z-index:0;
750 overflow: visible;
751 background-color: transparent;
752 }
753 #portal-personal ul,
754 #portal-personal li {
755 z-index:0;
756 border:none;
757 background-color: transparent;
758 }
759
760 /* this is the ul contained in the portlet */
761
762 #portal-personaltools {
763 /* background-color: #fabd23;*/
764 /* border-bottom-color: #2f6fab;*/
765 border: none;
766 line-height: 1.4em;
767 color: #2f6fab;
768 padding: 0em 2em 0 3em;
769 margin: 0;
770 text-align: right;
771 text-transform: lowercase;
772 list-style: none;
773 z-index:0;
774 background-color: transparent;
775 }
776
777 #portal-personaltools .portalNotLoggedIn {
778 color: #2f6fab;
779 padding: 0;
780 background: transparent;
781 background-image: none;
782 } /* Used on all descriptions relevant to those not logged in */
783
784 #portal-personaltools li {
785 padding:0;
786 display: inline;
787 color: #2f6fab;
788 margin-left: 1em;
789 line-height: 1.2em;
790 background-color: transparent;
791 }
792 #portal-personaltools li a {
793 text-decoration: none;
794 color: #005896;
795 padding-bottom: 0.2em;
796 background: none;
797 }
798 #portal-personaltools li a:hover {
799 background-color: White;
800 padding-bottom: 0.2em;
801 text-decoration: none;
802 }
803
804 /* the icon in front of the user name, single quotes
805 in bg url to hide it from iemac */
806 li#personaltools-userpage,
807 li#personaltools-anonuserpage,
808 li#personaltools-login {
809 background: transparent url('user.gif') center left no-repeat;
810 background-repeat: no-repeat;
811 padding-left: 20px;
812 text-transform: none;
813 }
814
815 /*
816 ** the page-related actions- page/talk, edit etc
817 */
818
819 #portlet-contentViews {
820 position:absolute;
821 top: 1.3em;
822 left: 11.5em;
823 margin: 0;
824 white-space:nowrap;
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 #portlet-contentViews .hiddenStructure { display: none; }
835 #portlet-contentViews ul {
836 list-style: none;
837 }
838 #portlet-contentViews li {
839 display: inline;
840 border: 1px solid #aaaaaa;
841 border-bottom: none;
842 padding: 0 0 0.1em 0;
843 margin: 0 0.3em 0 0;
844 overflow: visible;
845 background: White;
846 }
847 #portlet-contentViews li.selected {
848 border-color: #fabd23;
849 padding: 0 0 0.2em 0;
850 }
851 #portlet-contentViews li a {
852 background-color: White;
853 color: #005189;
854 border: none;
855 padding: 0 0.8em 0.3em 0.8em;
856 text-decoration: none;
857 text-transform: lowercase;
858 position: relative;
859 z-index: 0;
860 margin: 0;
861 }
862 #portlet-contentViews .selected a {
863 z-index: 3;
864 }
865 #portlet-contentViews .new a {
866 color:#ba0000;
867 }
868 #portlet-contentViews li a:hover {
869 z-index: 3;
870 text-decoration: none;
871 }
872 #portlet-contentViews h5 { display: none; }
873
874 /* offsets to distinguish the tab groups */
875 li#contentaction-talk {
876 margin-right: 1.6em;
877 }
878 li#contentaction-watch {
879 margin-left: 1.6em;
880 }
881
882
883 /*
884 ** the remaining portlets
885 */
886 #portlet-toolbox,
887 #portlet-language {
888 position:relative;
889 z-index:3;
890 }
891
892 /*
893 ** footer
894 */
895 #portal-footer {
896 background-color: White;
897 border-top: 1px solid #fabd23;
898 border-bottom: 1px solid #fabd23;
899 margin: 0.3em 0em 1em 0em;
900 padding: 0.4em 0em 1em 0em;
901 text-align: center;
902 font-size: 90%;
903 }
904 #portal-footer li {
905 display: inline;
906 margin: 0 1.3em;
907 }
908 /* hide from incapable browsers */
909 head:first-child+body #portal-footer li {
910 white-space: nowrap;
911 }
912 #footer-poweredbyico, #footer-copyrightico {
913 margin: 0 8px;
914 position: relative;
915 top: -2px; /* Bump it up just a tad */
916 }
917 #footer-poweredbyico {
918 float: right;
919 height: 1%;
920 }
921 #footer-copyrightico {
922 float: left;
923 height: 1%;
924 }
925
926 /*
927 ** IE/Mac fixes, hope to find a validating way to move this
928 ** to a separate stylesheet. This would work but doesn't validate:
929 ** @import("IEMacFixes.css");
930 */
931
932 /* tabs: border on the a, not the div */
933 *>html #portlet-contentViews li {
934 border:none;
935 }
936 *>html #portlet-contentViews li a {
937 border: 1px solid #aaaaaa;
938 border-bottom: none;
939 }
940 *>html #portlet-contentViews li.selected a {
941 border-color: #fabd23;
942 }
943 /* footer icons need a fixed width */
944 *>html #footer-poweredbyico,
945 *>html #footer-copyrightico {
946 width: 88px;
947 }
948
949 /* more IE fixes */
950 /* fixes for broken IE float handling */
951 * html #portal-column-content {
952 display: inline;
953 }
954
955 /* float/negative margin brokenness */
956 * html #bodyContent pre,
957 * html #bodyContent div.fullImage {
958 overflow: auto;
959 overflow-y: hidden;
960 width: 96%;
961 margin-bottom: 25px;
962 margin-right: 0;
963 }
964 /* more float brokenness */
965 * html #bodyContent {
966 display: inline;
967 overflow: auto;
968 width: 100%;
969 }
970 * html div.editsection {
971 font-size: smaller;
972 }
973
974 /* debugging tool.. */
975 /*div{ border:1px solid #000000;}*/
976
977 .error {
978 color: red;
979 font-size: larger;
980 }