* more ie6-related fixes: height hack removed, pre area width reduced
[mediawiki.git] / stylesheets / monobook / main.css
blob4cc7e03bb2e1e271be7410a7ddb0595a75e5d41c
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 :)
14 #portal-columns {
15 width: 100%;
16 margin: 0;
18 #portal-column-content {
19 width: 100%;
20 float: right;
21 margin: 0 0 0 -12.2em;
22 padding:0;
24 #portal-column-content #content {
25 margin: 2.8em 0 0 12.2em;
27 #portal-column-one {
28 padding-top: 160px;
30 /* the left column width is specified in class .portlet */
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
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;
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;
54 /* general styles */
56 table, td {
57 font-size: 100%;
58 background: White;
60 a {
61 text-decoration: none;
62 /*color: #436976;*/
63 color: #005189;
64 background-color: transparent;
66 img {
67 border: none;
68 vertical-align: middle;
70 p {
71 margin: 0.4em 0em 0.7em 0em;
72 line-height: 1.5em;
74 p a {
75 text-decoration: none;
77 p a:visited {
78 color: #5a3696;
79 background-color: transparent;
81 p a:active {
82 color: Red;
83 background-color: transparent;
85 p img {
86 border: 0;
87 margin: 0;
90 hr {
91 height: 1px;
92 color: #aaaaaa;
93 background-color: #aaaaaa;
94 border: 0;
95 margin: 0.2em 0 0.2em 0;
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;
111 h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
112 color: Black ! important;
114 h1 {
115 font-size: 188%;
117 h2 {
118 font-size: 150%;
120 h3 {
121 font-size: 132%;
122 border-bottom: none;
123 font-weight: bold;
125 h4 {
126 font-size: 116%;
127 border-bottom: none;
128 font-weight: bold;
131 h5 {
132 font-size: 100%;
133 border-bottom: none;
134 font-weight: bold;
137 h6 {
138 font-size: 80%;
139 border-bottom: none;
140 font-weight: bold;
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");
151 ol {
152 line-height: 1.5em;
153 margin: 0.3em 0 0 1.5em;
154 padding:0;
156 ul a, ol a {
157 text-decoration: none;
159 li {
160 margin-bottom: 0.1em;
162 dt {
163 font-weight: bold;
165 dt a {
166 text-decoration: none;
169 dd {
170 line-height: 1.5em;
171 margin-bottom: 0.8em;
172 margin-left: 1.4em;
174 dd a {
175 text-decoration: none;
178 dd.link a {
179 text-decoration: none;
180 color: Black;
183 fieldset {
184 border: 1px solid #2f6fab;
185 margin: 1em 0em 1em 0em;
186 padding: 0em 1em 1em 1em;
187 line-height: 1.5em;
189 legend {
190 background: White;
191 padding: 0.5em;
192 font-size: 90%;
195 form {
196 border: none;
197 margin: 0;
200 textarea {
201 border: 1px solid #2f6fab;
202 color: Black;
203 background-color: white;
204 width: 100%;
205 padding: 0.1em;
206 overflow: auto;
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;
220 input[type="radio"],
221 input[type="checkbox"] {
222 border:none;
224 select {
225 border: 1px solid #2f6fab;
226 color: Black;
227 vertical-align: top;
229 abbr, acronym, .explain {
230 border-bottom: 1px dotted Black;
231 color: Black;
232 background-color: transparent;
233 cursor: help;
236 font-family: Times, "Times New Roman", serif;
237 font-style: italic;
239 blockquote {
240 font-family: Times, "Times New Roman", serif;
241 font-style: italic;
243 code {
244 color: Black;
245 background-color: #f9f9f9;
247 pre {
248 padding: 1em;
249 border: 1px dashed #2f6fab;
250 color: Black;
251 background-color: #f9f9f9;
253 .pre a {
254 text-decoration: none;
259 ** the main content area
262 #documentSubtitle {
263 font-size: 84%;
264 line-height: 1.2em;
265 margin: -1.6em 0 0.6em 1em;
266 color: #7d7d7d;
268 #siteSubtitle {
269 display: none;
271 #catlinks {
272 width: 40%;
273 text-align: right;
274 float: right;
275 position: relative;
276 top: -1.5em;
279 #content {
280 padding: 0 0 1em 0em;
281 margin: 0;
284 #bodyContent a:hover {
285 text-decoration: underline;
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;
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;
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;
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;
328 .documentByLine {
329 text-align: right;
330 font-size: 90%;
331 clear: both;
332 font-weight: normal;
333 color: #76797c;
335 .documentByLine a {
336 text-decoration: none;
339 /* emulate center */
340 .center {
341 width: 100%;
342 text-align: center;
344 div.center * {
345 margin-left: auto;
346 margin-right: auto;
349 ** mediawiki-specific styles
352 a.stub,
353 a.new { color:#ba0000; text-decoration:none; }
355 #toc {
356 /*border:1px solid #2f6fab;*/
357 border:1px solid #aaaaaa;
358 background-color:#f9f9f9;
359 padding:5px;
360 font-size: 95%;
362 .tocindent {
363 margin-left: 2em;
365 .tocline {
366 margin-bottom: 0px;
368 .toctoggle, .editsection {
369 font-size: smaller;
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;
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;
387 div.floatleft p { font-style: italic; }
388 /* thumbnails */
389 div.thumbnail-none,
390 div.thumbnail-right,
391 div.thumbnail-left {
392 /* border:1px solid #2f6fab;*/
393 background-color:#f9f9f9;
394 padding: 2px;
395 position:relative;
396 margin: 0.3em 0 0.5em;
397 font-size: 95%;
398 text-align: center;
400 div.thumbnail-none div,
401 div.thumbnail-right div,
402 div.thumbnail-left div{
403 border:1px solid #cccccc;
405 div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
406 margin-top:3px; margin-bottom:3px;
407 text-align: left;
409 div.thumbnail-right {
410 float: right;
411 position:relative;
412 border: 0.5em solid White;
413 border-width: 0.5em 0 0.8em 1.4em;
415 div.thumbnail-left {
416 float: left;
417 position:relative;
418 margin-right:0.5em;
419 border: 0.5em solid White;
420 border: 0.5em 1.4em 0.8em 0;
422 /* table standards */
423 table.rimage {
424 float:right;
425 width:1pt;
426 position:relative;
427 margin-left:1em;
428 margin-bottom:1em;
429 text-align:center;
433 ** Link rendering
436 .urlexpansion,
437 .hiddenStructure {
438 display: none;
441 ** Diff rendering
443 table.diff {
444 background:white;
446 td.diff-otitle {
447 background:#ffffff;
449 td.diff-ntitle {
450 background:#ffffff;
452 td.diff-addedline {
453 background:#ccffcc;
455 td.diff-deletedline {
456 background:#ffffaa;
458 td.diff-context {
459 background:#eeeeee;
463 ** keep the whitespace in front of the ^=, hides rule from konqueror
464 ** this is css3, the validator doesn't like it when validating as css2
466 #bodyContent a[href ^="http://"],
467 #bodyContent a[href ^="gopher://"] {
468 background: url(external.png) center right no-repeat;
469 padding-right: 13px;
471 #bodyContent a[href ^="https://"],
472 .link-https {
473 background: transparent url("lock_icon.gif") center right no-repeat;
474 padding-right: 16px;
476 #bodyContent a[href ^="mailto:"],
477 .link-mailto {
478 background: transparent url("mail_icon.gif") center right no-repeat;
479 padding-right: 18px;
481 #bodyContent a[href ^="news://"] {
482 background: transparent url("news_icon.png") center right no-repeat;
483 padding-right: 18px;
485 #bodyContent a[href ^="ftp://"],
486 .link-ftp {
487 background: transparent url("file_icon.gif") center right no-repeat;
488 padding-right: 18px;
490 #bodyContent a[href ^="irc://"],
491 .link-irc {
492 background: transparent url("discussionitem_icon.gif") center right no-repeat;
493 padding-right: 18px;
495 .visualClear {
496 clear: both;
500 ** classes for special content elements like town boxes
502 div.townBox {
503 position:relative;
504 float:right;
505 background:White;
506 margin-left:1em;
507 border: 1px solid Grey;
508 padding:0.3em;
509 line-height: 1.0em;
510 width: 200px;
511 overflow: hidden;
513 div.townBox dl {
514 padding: 0;
515 margin: 0 0 0.3em 0;
516 font-size: 96%;
518 div.townBox dl dt {
519 background-color: transparent;
520 margin: 0.4em 0 0 0;
522 div.townBox dl dd {
523 margin: 0.1em 0 0 1.1em;
524 background-color: #f3f3f3;
528 ** Special content area views
530 .special li {
531 line-height: 1.4em;
532 margin: 0;
533 padding: 0;
535 /* the auto-generated edit comments */
536 .autocomment { color: gray; }
540 ** Structural Elements
544 ** the portlets (elements in the quickbar)
546 .portlet {
547 border: none;
548 margin: 0 0 1em 0em;
549 float: none;
550 padding: 0;
551 width: 11.6em;
552 overflow: hidden;
554 .portlet h4 {
555 font-size: 95%;
556 font-weight: normal;
557 white-space: nowrap;
559 .portlet h5 {
560 background: transparent;
561 padding: 0em 1em 0em 0.5em;
562 text-transform: lowercase;
563 display: inline;
564 font-size: 91%;
565 height: 1em;
566 font-weight: normal;
567 white-space: nowrap;
569 .portlet h6 {
570 background: #ffae2e;
571 border: 1px solid #2f6fab;
572 border-style: solid solid none solid;
573 padding: 0em 1em 0em 1em;
574 text-transform: lowercase;
575 display: block;
576 font-size: 1em;
577 height: 1.2em;
578 font-weight: normal;
579 white-space: nowrap;
581 .portletBody {
582 font-size: 95%;
583 background: White;
584 border-collapse: collapse;
585 border: 1px solid #aaaaaa;
587 .portletDetails {
588 text-align: right;
590 .portletMore {
591 display: block;
592 text-align: right;
594 .portletContent {
595 padding: 0.1em 0.8em 0.7em 0.5em;
597 .portletClose {
598 float: right;
599 text-transform: none;
600 border-left: 1px solid #2f6fab;
601 padding: 0em 0.2em;
603 .portlet h1,
604 .portlet h2,
605 .portlet h3,
606 .portlet h4 {
607 margin: 0;
608 padding: 0;
610 .portlet .even {
611 background-color: #f7f9fa;
613 .portlet .odd {
614 background-color: transparent;
616 .portlet input {
617 font-size: 100%;
619 .portlet ul {
620 line-height: 1.5em;
621 list-style-type: square;
622 list-style-image: url("bullet.gif");
623 font-size:95%;
625 .portlet li {
626 padding:0;
627 margin: 0 0 0 0;
628 margin-bottom: 0;
630 .even {
631 background-color: #f7f9fa;
633 .odd {
634 background-color: transparent;
636 .visualHighlight {
637 background-color: #f7f9fa;
639 .discreet {
640 color: #76797c;
641 font-size: 80%;
642 font-weight: normal;
646 ** Logo properties
649 #portlet-logo {
650 z-index: 3;
651 position:absolute; /*needed to use z-index */
652 top: 0;
653 left: 0;
654 height: 155px;
655 width: 135px;
656 overflow: visible;
658 #portlet-logo h5 { display: none; }
659 #portlet-logo a,
660 #portlet-logo a:hover {
661 display: block;
662 height: 155px;
663 width: 135px;
664 background: url(wiki.png) no-repeat;
665 background-repeat: no-repeat;
666 text-decoration: none;
670 ** the navigation portlet
674 #portlet-navigation {
675 position:relative;
676 z-index:3;
678 #portlet-navigation .plain {
679 white-space: nowrap;
683 ** Search portlet
685 #portlet-search {
686 position:relative;
687 z-index:3;
689 #portlet-search .portletBody {
690 text-align: center;
692 input.searchButton {
693 margin-top:1px;
694 padding: 0 0.4em!important;
695 font-size: 95%;
696 cursor: pointer;
697 background-color: White;
698 border: 1px solid #2f6fab;
701 #searchGadget {
702 border: 1px solid #2f6fab;
703 width:11.0em;
704 margin: 0 0 0 0;
705 font-size: 95%;
709 #portlet-search .portletContent {
710 padding: 0.5em 0.4em 0.4em 0.4em;
715 ** the personal toolbar
718 #portlet-personal {
719 width:100%;
720 white-space:nowrap;
721 padding:0 0 0 0;
722 margin:0;
723 position:absolute;
724 left:0px;
725 top:0px;
726 z-index: 0;
727 border: none;
728 background-color: transparent;
729 overflow: visible;
730 line-height: 1.2em;
733 #portlet-personal h5 {
734 display:none;
736 #portlet-personal .portlet,
737 #portlet-personal .portletBody,
738 #portlet-personal .portletContent,
739 #portlet-personal .odd{
740 padding:0;
741 margin:0;
742 border: none;
743 z-index:0;
744 overflow: visible;
745 background-color: transparent;
747 #portal-personal ul,
748 #portal-personal li {
749 z-index:0;
750 border:none;
751 background-color: transparent;
754 /* this is the ul contained in the portlet */
756 #portal-personaltools {
757 /* background-color: #fabd23;*/
758 /* border-bottom-color: #2f6fab;*/
759 border: none;
760 line-height: 1.4em;
761 color: #2f6fab;
762 padding: 0em 2em 0 3em;
763 margin: 0;
764 text-align: right;
765 text-transform: lowercase;
766 list-style: none;
767 z-index:0;
768 background-color: transparent;
771 #portal-personaltools .portalNotLoggedIn {
772 color: #2f6fab;
773 padding: 0;
774 background: transparent;
775 background-image: none;
776 } /* Used on all descriptions relevant to those not logged in */
778 #portal-personaltools li {
779 padding:0;
780 display: inline;
781 color: #2f6fab;
782 margin-left: 1em;
783 line-height: 1.2em;
784 background-color: transparent;
786 #portal-personaltools li a {
787 text-decoration: none;
788 /* color: #436976;*/
789 color: #005896;
790 padding-bottom: 0.2em;
791 background-color: transparent;
793 #portal-personaltools li a:hover {
794 text-decoration: none;
795 /* color: #436976;*/
796 background-color: White;
797 padding-bottom: 0.2em;
800 /* the icon in front of the user name, single quotes
801 in bg url to hide it from iemac */
802 li#personaltools-userpage,
803 li#personaltools-login {
804 background: transparent url('user.gif') center left no-repeat;
805 background-repeat: no-repeat;
806 padding-left: 20px;
807 text-transform: none;
811 ** the page-related actions- page/talk, edit etc
814 #portlet-contentViews {
815 position:absolute;
816 top: 1.3em;
817 left: 11.5em;
818 margin: 0;
819 white-space:nowrap;
820 /*width:auto;*/
821 width: 76%;
822 line-height: 1.1em;
823 overflow: visible;
824 background-color: transparent;
825 border-collapse: collapse;
826 padding-left: 1em;
827 list-style: none;
828 font-size: 95%;
831 #portlet-contentViews .hiddenStructure {
832 display: none;
835 #portlet-contentViews ul {
836 list-style: none;
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;
847 #portlet-contentViews li.selected {
848 border-color: #fabd23;
849 padding: 0 0 0.2em 0;
852 #portlet-contentViews li a {
853 background-color: White;
854 color: #005189;
855 border: none;
856 padding: 0 0.8em 0.3em 0.8em;
857 text-decoration: none;
858 text-transform: lowercase;
859 position: relative;
860 z-index: 0;
861 margin: 0;
864 #portlet-contentViews .selected a {
865 z-index: 3;
867 #portlet-contentViews .new a {
868 color:#ba0000;
870 #portlet-contentViews li a:hover {
871 z-index: 3;
873 #portlet-contentViews h5 { display: none; }
875 /* offsets to distinguish the tab groups */
876 li#contentaction-talk {
877 margin-right: 1.6em;
879 li#contentaction-watch {
880 margin-left: 1.6em;
885 ** the remaining portlets
887 #portlet-toolbox,
888 #portlet-language {
889 position:relative;
890 z-index:3;
894 ** footer
896 #portal-footer {
897 background-color: White;
898 border-top: 1px solid #fabd23;
899 border-bottom: 1px solid #fabd23;
900 margin: 0.3em 0em 1em 0em;
901 padding: 0.4em 0em 1em 0em;
902 text-align: center;
903 font-size: 90%;
905 #portal-footer li {
906 display: inline;
907 margin: 0 1.3em;
909 /* hide from incapable browsers */
910 head:first-child+body #portal-footer li {
911 white-space: nowrap;
913 #footer-poweredbyico, #footer-copyrightico {
914 margin: 0 8px;
915 position: relative;
916 top: -2px; /* Bump it up just a tad */
918 #footer-poweredbyico {
919 float: right;
920 height: 1%;
922 #footer-copyrightico {
923 float: left;
924 height: 1%;
928 ** IE/Mac fixes, hope to find a validating way to move this
929 ** to a separate stylesheet. This would work but doesn't validate:
930 ** @import("IEMacFixes.css");
933 /* tabs: border on the a, not the div */
934 *>html #portlet-contentViews li {
935 border:none;
937 *>html #portlet-contentViews li a {
938 border: 1px solid #aaaaaa;
939 border-bottom: none;
941 *>html #portlet-contentViews li.selected a {
942 border-color: #fabd23;
944 /* footer icons need a fixed width */
945 *>html #footer-poweredbyico,
946 *>html #footer-copyrightico {
947 width: 88px;
950 /* more IE fixes */
951 /* fixes for broken IE float handling */
952 * html #portal-column-content {
953 display: inline;
955 /* float/negative margin brokenness */
956 * html #bodyContent pre,
957 * html #bodyContent div.fullImage {
958 overflow: auto;
959 overflow-y: hidden;
960 width: 98%;
961 margin-bottom: 25px;
962 margin-right: 0;
964 /* more float brokenness */
965 * html #bodyContent {
966 display: inline;
967 overflow: auto;
968 width: 100%;
970 * html #bodyContent table,
971 * html #bodyContent div {
972 position: relative;
975 /* opera 6 fixes */
976 html>body #portal-column-one {
977 position: relative;
978 max-width: 11.7em;
980 head:first-child+body #portal-column-one {
981 position: static;
982 width: auto;
985 html>body #portlet-personal {
986 width: 45em;
987 margin-left: 8.6em;
988 right: 0;
990 head:first-child+body #portlet-personal {
991 margin-left: 0;
992 width: 100%;
994 /* debugging tool.. */
995 /*div{ border:1px solid #000000;}*/