changed languages-directory to lower case, for Unix
[mediawiki.git] / stylesheets / monobook / main.css
blobf16d7346cd3ee98ba106faca65e492d65e1c8fb9
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 {
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 2.4em;
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.6em;
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: 0 0 1.4em 1em;
266 color: #7d7d7d;
267 width: auto;
269 #siteSubtitle {
270 display: none;
272 #catlinks {
273 margin: 0;
274 padding: 0;
275 width: 34%;
276 text-align: right;
277 float: right;
280 #content {
281 padding: 0 0 1em 0em;
282 margin: 0;
285 #bodyContent a:hover {
286 text-decoration: underline;
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;
297 .documentFirstHeading {
298 margin-bottom:0.1em;
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;
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;
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;
331 .documentByLine {
332 text-align: right;
333 font-size: 90%;
334 clear: both;
335 font-weight: normal;
336 color: #76797c;
338 .documentByLine a {
339 text-decoration: none;
342 /* emulate center */
343 .center {
344 width: 100%;
345 text-align: center;
347 div.center * {
348 margin-left: auto;
349 margin-right: auto;
352 ** mediawiki-specific styles
355 a.stub,
356 a.new { color:#ba0000; text-decoration:none; }
358 #toc {
359 /*border:1px solid #2f6fab;*/
360 border:1px solid #aaaaaa;
361 background-color:#f9f9f9;
362 padding:5px;
363 font-size: 95%;
365 .tocindent {
366 margin-left: 2em;
368 .tocline {
369 margin-bottom: 0px;
371 .toctoggle, .editsection {
372 font-size: 94%;
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;
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;
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;
397 div.thumb div {
398 border:1px solid #cccccc;
399 padding: 3px !important;
400 background-color:#f9f9f9;
401 font-size: 94%;
403 div.thumb div a img {
404 border:1px solid #cccccc;
406 div div.thumbcaption {
407 border: none;
408 text-align: left;
409 padding: 0.3em 0 0.1em 0 !important;
411 div.magnify {
412 float: right;
413 border: none !important;
414 background: none !important;
416 div.magnify a, div.magnify img {
417 display: block;
418 border: none !important;
419 background: none !important;
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;
430 div.tright {
431 float: right;
432 border-width: 0.5em 0 0.8em 1.4em;
434 div.tleft {
435 float: left;
436 margin-right:0.5em;
437 border: 0.5em 1.4em 0.8em 0;
440 ** Link rendering
443 .urlexpansion,
444 .hiddenStructure {
445 display: none;
448 ** Diff rendering
450 table.diff {
451 background:white;
453 td.diff-otitle {
454 background:#ffffff;
456 td.diff-ntitle {
457 background:#ffffff;
459 td.diff-addedline {
460 background:#ccffcc;
462 td.diff-deletedline {
463 background:#ffffaa;
465 td.diff-context {
466 background:#eeeeee;
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
473 #bodyContent a[href ^="http://"],
474 #bodyContent a[href ^="gopher://"] {
475 background: url(external.png) center right no-repeat;
476 padding-right: 13px;
478 #bodyContent a[href ^="https://"],
479 .link-https {
480 background: transparent url("lock_icon.gif") center right no-repeat;
481 padding-right: 16px;
483 #bodyContent a[href ^="mailto:"],
484 .link-mailto {
485 background: transparent url("mail_icon.gif") center right no-repeat;
486 padding-right: 18px;
488 #bodyContent a[href ^="news://"] {
489 background: transparent url("news_icon.png") center right no-repeat;
490 padding-right: 18px;
492 #bodyContent a[href ^="ftp://"],
493 .link-ftp {
494 background: transparent url("file_icon.gif") center right no-repeat;
495 padding-right: 18px;
497 #bodyContent a[href ^="irc://"],
498 .link-irc {
499 background: transparent url("discussionitem_icon.gif") center right no-repeat;
500 padding-right: 18px;
502 .visualClear {
503 clear: both;
507 ** classes for special content elements like town boxes
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;
520 div.townBox dl {
521 padding: 0;
522 margin: 0 0 0.3em 0;
523 font-size: 96%;
525 div.townBox dl dt {
526 background-color: transparent;
527 margin: 0.4em 0 0 0;
529 div.townBox dl dd {
530 margin: 0.1em 0 0 1.1em;
531 background-color: #f3f3f3;
535 ** Special content area views
537 .special li {
538 line-height: 1.4em;
539 margin: 0;
540 padding: 0;
542 /* the auto-generated edit comments */
543 .autocomment { color: gray; }
547 ** Structural Elements
551 ** the portlets (elements in the quickbar)
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;
561 .portlet h4 {
562 font-size: 95%;
563 font-weight: normal;
564 white-space: nowrap;
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;
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;
588 .portletBody {
589 font-size: 95%;
590 background: White;
591 border-collapse: collapse;
592 border: 1px solid #aaaaaa;
594 .portletDetails {
595 text-align: right;
597 .portletMore {
598 display: block;
599 text-align: right;
601 .portletContent {
602 padding: 0.1em 0.8em 0.7em 0.5em;
604 .portletClose {
605 float: right;
606 text-transform: none;
607 border-left: 1px solid #2f6fab;
608 padding: 0em 0.2em;
610 .portlet h1,
611 .portlet h2,
612 .portlet h3,
613 .portlet h4 {
614 margin: 0;
615 padding: 0;
617 .portlet .even {
618 background-color: #f7f9fa;
620 .portlet .odd {
621 background-color: transparent;
623 .portlet input {
624 font-size: 100%;
626 .portlet ul {
627 line-height: 1.5em;
628 list-style-type: square;
629 list-style-image: url("bullet.gif");
630 font-size:95%;
632 .portlet li {
633 padding:0;
634 margin: 0 0 0 0;
635 margin-bottom: 0;
637 .even {
638 background-color: #f7f9fa;
640 .odd {
641 background-color: transparent;
643 .visualHighlight {
644 background-color: #f7f9fa;
646 .discreet {
647 color: #76797c;
648 font-size: 80%;
649 font-weight: normal;
653 ** Logo properties
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: 135px;
663 overflow: visible;
665 #portlet-logo h5 { display: none; }
666 #portlet-logo a,
667 #portlet-logo a:hover {
668 display: block;
669 height: 155px;
670 width: 135px;
671 background-repeat: no-repeat;
672 text-decoration: none;
676 ** the navigation portlet
680 #portlet-navigation {
681 position:relative;
682 z-index:3;
684 #portlet-navigation .plain {
685 white-space: nowrap;
689 ** Search portlet
691 #portlet-search {
692 position:relative;
693 z-index:3;
695 #portlet-search .portletBody {
696 text-align: center;
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;
707 #searchGadget {
708 border: 1px solid #2f6fab;
709 width:10.9em;
710 margin: 0 0 0 0;
711 font-size: 95%;
715 #portlet-search .portletContent {
716 padding: 0.5em 0.4em 0.4em 0.4em;
721 ** the personal toolbar
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;
739 #portlet-personal h5 {
740 display:none;
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;
753 #portal-personal ul,
754 #portal-personal li {
755 z-index:0;
756 border:none;
757 background-color: transparent;
760 /* this is the ul contained in the portlet */
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;
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 */
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;
792 #portal-personaltools li a {
793 text-decoration: none;
794 color: #005896;
795 padding-bottom: 0.2em;
796 background: none;
798 #portal-personaltools li a:hover {
799 background-color: White;
800 padding-bottom: 0.2em;
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;
815 ** the page-related actions- page/talk, edit etc
818 #portlet-contentViews {
819 position:absolute;
820 top: 1.3em;
821 left: 11.5em;
822 margin: 0;
823 white-space:nowrap;
824 width: 76%;
825 line-height: 1.1em;
826 overflow: visible;
827 background-color: transparent;
828 border-collapse: collapse;
829 padding-left: 1em;
830 list-style: none;
831 font-size: 95%;
833 #portlet-contentViews .hiddenStructure { display: none; }
834 #portlet-contentViews ul {
835 list-style: none;
837 #portlet-contentViews li {
838 display: inline;
839 border: 1px solid #aaaaaa;
840 border-bottom: none;
841 padding: 0 0 0.1em 0;
842 margin: 0 0.3em 0 0;
843 overflow: visible;
844 background: White;
846 #portlet-contentViews li.selected {
847 border-color: #fabd23;
848 padding: 0 0 0.2em 0;
850 #portlet-contentViews li a {
851 background-color: White;
852 color: #005189;
853 border: none;
854 padding: 0 0.8em 0.3em 0.8em;
855 text-decoration: none;
856 text-transform: lowercase;
857 position: relative;
858 z-index: 0;
859 margin: 0;
861 #portlet-contentViews .selected a {
862 z-index: 3;
864 #portlet-contentViews .new a {
865 color:#ba0000;
867 #portlet-contentViews li a:hover {
868 z-index: 3;
870 #portlet-contentViews h5 { display: none; }
872 /* offsets to distinguish the tab groups */
873 li#contentaction-talk {
874 margin-right: 1.6em;
876 li#contentaction-watch {
877 margin-left: 1.6em;
882 ** the remaining portlets
884 #portlet-toolbox,
885 #portlet-language {
886 position:relative;
887 z-index:3;
891 ** footer
893 #portal-footer {
894 background-color: White;
895 border-top: 1px solid #fabd23;
896 border-bottom: 1px solid #fabd23;
897 margin: 0.3em 0em 1em 0em;
898 padding: 0.4em 0em 1em 0em;
899 text-align: center;
900 font-size: 90%;
902 #portal-footer li {
903 display: inline;
904 margin: 0 1.3em;
906 /* hide from incapable browsers */
907 head:first-child+body #portal-footer li {
908 white-space: nowrap;
910 #footer-poweredbyico, #footer-copyrightico {
911 margin: 0 8px;
912 position: relative;
913 top: -2px; /* Bump it up just a tad */
915 #footer-poweredbyico {
916 float: right;
917 height: 1%;
919 #footer-copyrightico {
920 float: left;
921 height: 1%;
925 ** IE/Mac fixes, hope to find a validating way to move this
926 ** to a separate stylesheet. This would work but doesn't validate:
927 ** @import("IEMacFixes.css");
930 /* tabs: border on the a, not the div */
931 *>html #portlet-contentViews li {
932 border:none;
934 *>html #portlet-contentViews li a {
935 border: 1px solid #aaaaaa;
936 border-bottom: none;
938 *>html #portlet-contentViews li.selected a {
939 border-color: #fabd23;
941 /* footer icons need a fixed width */
942 *>html #footer-poweredbyico,
943 *>html #footer-copyrightico {
944 width: 88px;
947 /* more IE fixes */
948 /* fixes for broken IE float handling */
949 * html #portal-column-content {
950 display: inline;
953 /* float/negative margin brokenness */
954 * html #bodyContent pre,
955 * html #bodyContent div.fullImage {
956 overflow: auto;
957 overflow-y: hidden;
958 width: 96%;
959 margin-bottom: 25px;
960 margin-right: 0;
962 /* more float brokenness */
963 * html #bodyContent {
964 display: inline;
965 overflow: auto;
966 width: 100%;
968 * html div.editsection {
969 font-size: smaller;
972 /* debugging tool.. */
973 /*div{ border:1px solid #000000;}*/
975 .error {
976 color: red;
977 font-size: larger;