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