A different fix for ':' in definitions that makes
[mediawiki.git] / skins / monobook / main.css
blob8101aafd750600ed7d61c7936a2e3715ec5004bf
1 /*
2 ** MediaWiki 'monobook' style sheet for CSS2-capable browsers.
3 ** Copyright Gabriel Wicke - http://wikidev.net/
4 ** License: GPL (http://www.gnu.org/copyleft/gpl.html)
5 **
6 ** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John
7 ** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher,
8 ** Michael Zeltner and Geir Bækholt)
9 ** All you guys rock :)
12 #column-content {
13 width: 100%;
14 float: right;
15 margin: 0 0 0.6em -12.2em;
16 padding:0;
18 #content {
19 margin: 2.8em 0 0 12.2em;
20 padding: 0em 1em 1.5em 1em;
21 background: White;
22 border: 1px solid #aaaaaa;
23 border-right: none;
24 line-height: 1.5em;
25 position: relative;
26 z-index: 2;
28 #column-one { padding-top: 160px; }
29 /* the left column width is specified in class .portlet */
31 /* Font size:
32 ** We take advantage of keyword scaling- browsers won't go below 9px
33 ** More at http://www.w3.org/2003/07/30-font-size
34 ** http://style.cleverchimp.com/font_size_intervals/altintervals.html
37 body {
38 font: x-small sans-serif;
39 background: #f9f9f9 url("headbg.jpg") 0px 0px no-repeat;
40 color: Black;
41 margin: 0;
42 padding: 0;
45 /* scale back up to a sane default */
46 #globalWrapper {
47 font-size:127%;
48 width: 100%;
49 margin: 0;
50 padding: 0;
52 .visualClear { clear: both; }
54 /* general styles */
56 table {
57 font-size: 100%;
58 background: White;
60 a {
61 text-decoration: none;
62 color: #002bb8;
63 background: none;
65 a:visited { color: #5a3696; }
66 a:active { color: Orange; }
67 a:hover { text-decoration: underline; }
68 a.stub { color: #772233; }
69 a.new,
70 #p-personal a.new { color:#ba0000; }
71 a.new:visited,
72 #p-personal a.new:visited { color:#a55858; }
74 img {
75 border: none;
76 vertical-align: middle;
78 p {
79 margin: 0.4em 0em 0.5em 0em;
80 line-height: 1.5em;
83 p img { margin: 0; }
85 hr {
86 height: 1px;
87 color: #aaaaaa;
88 background-color: #aaaaaa;
89 border: 0;
90 margin: 0.2em 0 0.2em 0;
93 h1, h2, h3, h4, h5, h6 {
94 color: Black;
95 background: none;
96 font-weight: normal;
97 margin: 0;
98 padding-top: 0.5em;
99 padding-bottom: 0.17em;
100 border-bottom: 1px solid #aaaaaa;
102 h1 { font-size: 188%; }
103 h2 { font-size: 150%; }
104 h3, h4, h5, h6 {
105 border-bottom: none;
106 font-weight: bold;
108 h3 { font-size: 132%; }
109 h4 { font-size: 116%; }
110 h5 { font-size: 100%; }
111 h6 { font-size: 80%; }
113 ul {
114 line-height: 1.5em;
115 list-style-type: square;
116 margin: 0.3em 0 0 1.5em;
117 padding:0;
118 list-style-image: url("bullet.gif");
120 ol {
121 line-height: 1.5em;
122 margin: 0.3em 0 0 3.2em;
123 padding:0;
124 list-style-image: none;
126 li { margin-bottom: 0.1em; }
127 dt {
128 font-weight: bold;
129 margin-bottom: 0.1em;
132 margin-top: 0.2em;
133 margin-bottom: 0.5em;
135 dd {
136 line-height: 1.5em;
137 margin-left: 2em;
138 margin-bottom: 0.1em;
141 fieldset {
142 border: 1px solid #2f6fab;
143 margin: 1em 0em 1em 0em;
144 padding: 0em 1em 1em 1em;
145 line-height: 1.5em;
147 legend {
148 background: White;
149 padding: 0.5em;
150 font-size: 95%;
152 form {
153 border: none;
154 margin: 0;
157 textarea {
158 border: 1px solid #2f6fab;
159 color: Black;
160 background-color: white;
161 width: 100%;
162 padding: 0.1em;
163 overflow: auto;
165 /* hide this from ie/mac and konq2.2 */
166 @media All {
167 head:first-child+body input {
168 visibility: visible;
169 border: 1px solid #2f6fab;
170 color: Black;
171 background-color: white;
172 vertical-align: middle;
173 padding: 0.2em;
176 input.historysubmit {
177 padding: 0 0.3em 0.3em 0.3em !important;
178 font-size: 94%;
179 cursor: pointer;
180 height: 1.7em !important;
181 margin-left: 1.6em;
183 input[type="radio"],
184 input[type="checkbox"] { border:none; }
185 select {
186 border: 1px solid #2f6fab;
187 color: Black;
188 vertical-align: top;
190 abbr, acronym, .explain {
191 border-bottom: 1px dotted Black;
192 color: Black;
193 background: none;
194 cursor: help;
197 font-family: Times, "Times New Roman", serif;
198 font-style: italic;
200 /* disabled for now
201 blockquote {
202 font-family: Times, "Times New Roman", serif;
203 font-style: italic;
205 code { background-color: #f9f9f9; }
206 pre {
207 padding: 1em;
208 border: 1px dashed #2f6fab;
209 color: Black;
210 background-color: #f9f9f9;
211 line-height: 1.1em;
216 ** the main content area
219 #siteSub { display: none; }
220 #contentSub {
221 font-size: 84%;
222 line-height: 1.2em;
223 margin: 0 0 1.4em 1em;
224 color: #7d7d7d;
225 width: auto;
227 span.subpages { display: block; }
229 /* Some space under the headers in the content area */
230 #bodyContent h1, #bodyContent h2 { margin-bottom:0.6em; }
231 #bodyContent h3,
232 #bodyContent h4,
233 #bodyContent h5 {
234 margin-bottom: 0.3em;
236 .firstHeading { margin-bottom:0.1em; }
238 /* user notification thing */
239 .usermessage {
240 background-color: #ffce7b;
241 border: 1px solid #ffa500;
242 color: Black;
243 font-weight: bold;
244 margin: 2em 0em 1em 0em;
245 padding: 0.5em 1em;
246 vertical-align: middle;
248 #siteNotice {
249 text-align: center;
250 font-size: 95%;
251 padding: 0 0.9em 0 0.9em;
253 #siteNotice p { margin: none; padding: none; }
254 .error {
255 color: red;
256 font-size: larger;
258 #catlinks {
259 border:1px solid #aaaaaa;
260 background-color:#f9f9f9;
261 padding:5px;
262 margin-top: 1em;
263 clear: both;
265 /* currently unused, intended to be used by a metadata box
266 in the bottom-right corner of the content area */
267 .documentDescription {
268 /* The summary text describing the document */
269 font-weight: bold;
270 display: block;
271 margin: 1em 0em;
272 line-height: 1.5em;
274 .documentByLine {
275 text-align: right;
276 font-size: 90%;
277 clear: both;
278 font-weight: normal;
279 color: #76797c;
282 /* emulate center */
283 .center {
284 width: 100%;
285 text-align: center;
287 *.center * {
288 margin-left: auto;
289 margin-right: auto;
291 /* small for tables and similar */
292 .small, .small * { font-size: 94%; }
293 table.small { font-size: 100% }
296 ** content styles
299 #toc {
300 /*border:1px solid #2f6fab;*/
301 border:1px solid #aaaaaa;
302 background-color:#f9f9f9;
303 padding:5px;
304 font-size: 95%;
306 #toc .tocindent { margin-left: 2em; }
307 #toc .tocline { margin-bottom: 0px; }
308 #toc p { margin: 0 }
309 #toc .toctoggle { font-size: 94%; }
310 #toc .editsection {
311 margin-top: 0.7em;
312 font-size: 94%;
315 /* images */
316 div.floatright, table.floatright {
317 clear: right;
318 float: right;
319 margin: 0;
320 position: relative;
321 border: 0.5em solid White;
322 border-width: 0.5em 0 0.8em 1.4em;
324 div.floatright p { font-style: italic; }
325 div.floatleft, table.floatleft {
326 float: left;
327 margin: 0.3em 0.5em 0.5em 0;
328 position: relative;
329 border: 0.5em solid White;
330 border-width: 0.5em 1.4em 0.8em 0;
332 div.floatleft p { font-style: italic; }
333 /* thumbnails */
334 div.thumb {
335 margin-bottom: 0.5em;
336 border-style: solid; border-color: White;
337 width: auto;
339 div.thumb div {
340 border:1px solid #cccccc;
341 padding: 3px !important;
342 background-color:#f9f9f9;
343 font-size: 94%;
344 text-align: center;
345 overflow: hidden;
347 div.thumb div a img {
348 border:1px solid #cccccc;
350 div.thumb div div.thumbcaption {
351 border: none;
352 text-align: left;
353 line-height: 1.4em;
354 padding: 0.3em 0 0.1em 0;
356 div.magnify {
357 float: right;
358 border: none !important;
359 background: none !important;
361 div.magnify a, div.magnify img {
362 display: block;
363 border: none !important;
364 background: none !important;
366 div.tright {
367 clear: right;
368 float: right;
369 border-width: 0.5em 0 0.8em 1.4em;
371 div.tleft {
372 float: left;
373 margin-right:0.5em;
374 border-width: 0.5em 1.4em 0.8em 0;
376 .urlexpansion,
377 .hiddenStructure {
378 display: none;
380 img.tex { vertical-align: middle; }
381 span.texhtml { font-family: serif; }
384 ** classes for special content elements like town boxes
385 ** intended to be referenced directly from the wiki src
389 ** User styles
391 /* table standards */
392 table.rimage {
393 float:right;
394 position:relative;
395 margin-left:1em;
396 margin-bottom:1em;
397 text-align:center;
399 .toccolours {
400 border:1px solid #aaaaaa;
401 background-color:#f9f9f9;
402 padding:5px;
403 font-size: 95%;
405 div.townBox {
406 position:relative;
407 float:right;
408 background:White;
409 margin-left:1em;
410 border: 1px solid Grey;
411 padding:0.3em;
412 width: 200px;
413 overflow: hidden;
414 clear: right;
416 div.townBox dl {
417 padding: 0;
418 margin: 0 0 0.3em 0;
419 font-size: 96%;
421 div.townBox dl dt {
422 background: none;
423 margin: 0.4em 0 0 0;
425 div.townBox dl dd {
426 margin: 0.1em 0 0 1.1em;
427 background-color: #f3f3f3;
431 ** edit views etc
433 .special li {
434 line-height: 1.4em;
435 margin: 0;
436 padding: 0;
439 /* Page history styling */
440 /* the auto-generated edit comments */
441 .autocomment { color: gray; }
442 #pagehistory span.user {
443 margin-left: 1.4em;
444 margin-right: 0.4em;
446 #pagehistory span.minor { font-weight: bold; }
447 #pagehistory li { border: 1px solid White; }
448 #pagehistory li.selected {
449 background-color:#f9f9f9;
450 border:1px dashed #aaaaaa;
453 ** Diff rendering
455 table.diff { background:white; }
456 td.diff-otitle { background:#ffffff; }
457 td.diff-ntitle { background:#ffffff; }
458 td.diff-addedline {
459 background:#ccffcc;
460 font-size: smaller;
462 td.diff-deletedline {
463 background:#ffffaa;
464 font-size: smaller;
466 td.diff-context {
467 background:#eeeeee;
468 font-size: smaller;
470 span.diffchange { color: red; }
473 ** keep the whitespace in front of the ^=, hides rule from konqueror
474 ** this is css3, the validator doesn't like it when validating as css2
476 #bodyContent a[href ^="http://"],
477 #bodyContent a[href ^="gopher://"] {
478 background: url(external.png) center right no-repeat;
479 padding-right: 13px;
481 #bodyContent a[href ^="https://"],
482 .link-https {
483 background: url("lock_icon.gif") center right no-repeat;
484 padding-right: 16px;
486 #bodyContent a[href ^="mailto:"],
487 .link-mailto {
488 background: url("mail_icon.gif") center right no-repeat;
489 padding-right: 18px;
491 #bodyContent a[href ^="news://"] {
492 background: url("news_icon.png") center right no-repeat;
493 padding-right: 18px;
495 #bodyContent a[href ^="ftp://"],
496 .link-ftp {
497 background: url("file_icon.gif") center right no-repeat;
498 padding-right: 18px;
500 #bodyContent a[href ^="irc://"],
501 .link-irc {
502 background: url("discussionitem_icon.gif") center right no-repeat;
503 padding-right: 18px;
505 /* disable interwiki styling */
506 #bodyContent a.extiw,
507 #bodyContent a.extiw:active {
508 color: #3366bb;
509 background: none;
510 padding: 0;
512 #bodyContent a.external { color: #3366bb; }
513 /* this can be used in the content area to switch off
514 special external link styling */
515 #bodyContent .plainlinks a {
516 background: none !important;
517 padding: 0;
520 ** Structural Elements
524 ** general portlet styles (elements in the quickbar)
526 .portlet {
527 border: none;
528 margin: 0 0 0.5em 0em;
529 float: none;
530 padding: 0;
531 width: 11.6em;
532 overflow: hidden;
534 .portlet h4 {
535 font-size: 95%;
536 font-weight: normal;
537 white-space: nowrap;
539 .portlet h5 {
540 background: transparent;
541 padding: 0em 1em 0em 0.5em;
542 text-transform: lowercase;
543 display: inline;
544 font-size: 91%;
545 height: 1em;
546 font-weight: normal;
547 white-space: nowrap;
549 .portlet h6 {
550 background: #ffae2e;
551 border: 1px solid #2f6fab;
552 border-style: solid solid none solid;
553 padding: 0em 1em 0em 1em;
554 text-transform: lowercase;
555 display: block;
556 font-size: 1em;
557 height: 1.2em;
558 font-weight: normal;
559 white-space: nowrap;
561 .pBody {
562 font-size: 95%;
563 background: White;
564 border-collapse: collapse;
565 border: 1px solid #aaaaaa;
566 padding: 0 0.8em 0.3em 0.5em;
568 .portlet h1,
569 .portlet h2,
570 .portlet h3,
571 .portlet h4 {
572 margin: 0;
573 padding: 0;
575 .portlet ul {
576 line-height: 1.5em;
577 list-style-type: square;
578 list-style-image: url("bullet.gif");
579 font-size:95%;
581 .portlet li {
582 padding:0;
583 margin: 0 0 0 0;
584 margin-bottom: 0;
588 ** Logo properties
591 #p-logo {
592 z-index: 3;
593 position:absolute; /*needed to use z-index */
594 top: 0;
595 left: 0;
596 height: 155px;
597 width: 12em;
598 overflow: visible;
600 #p-logo h5 { display: none; }
601 #p-logo a,
602 #p-logo a:hover {
603 display: block;
604 height: 155px;
605 width: 12.2em;
606 background-repeat: no-repeat;
607 background-position: 35% 50% !important;
608 text-decoration: none;
612 ** the navigation portlet
615 #p-nav {
616 position:relative;
617 z-index:3;
621 ** Search portlet
623 #p-search {
624 position:relative;
625 z-index:3;
627 #p-search .pBody {
628 text-align: center;
630 input.searchButton {
631 margin-top:1px;
632 padding: 0 0.4em !important;
633 font-size: 95%;
634 cursor: pointer;
635 background-color: White;
636 border: 1px solid #2f6fab;
638 #searchInput {
639 border: 1px solid #2f6fab;
640 width:10.9em;
641 margin: 0 0 0 0;
642 font-size: 95%;
644 #p-search .pBody {
645 padding: 0.5em 0.4em 0.4em 0.4em;
649 ** the personal toolbar
652 #p-personal {
653 width:100%;
654 white-space:nowrap;
655 padding:0 0 0 0;
656 margin:0;
657 position:absolute;
658 left:0px;
659 top:0px;
660 z-index: 0;
661 border: none;
662 background: none;
663 overflow: visible;
664 line-height: 1.2em;
667 #p-personal h5 {
668 display:none;
670 #p-personal .portlet,
671 #p-personal .pBody {
672 padding:0;
673 margin:0;
674 border: none;
675 z-index:0;
676 overflow: visible;
677 background: none;
679 /* this is the ul contained in the portlet */
680 #p-personal ul {
681 border: none;
682 line-height: 1.4em;
683 color: #2f6fab;
684 padding: 0em 2em 0 3em;
685 margin: 0;
686 text-align: right;
687 text-transform: lowercase;
688 list-style: none;
689 z-index:0;
690 background: none;
692 #p-personal li {
693 z-index:0;
694 border:none;
695 padding:0;
696 display: inline;
697 color: #2f6fab;
698 margin-left: 1em;
699 line-height: 1.2em;
700 background: none;
702 #p-personal li a {
703 text-decoration: none;
704 color: #005896;
705 padding-bottom: 0.2em;
706 background: none;
708 #p-personal li a:hover {
709 background-color: White;
710 padding-bottom: 0.2em;
711 text-decoration: none;
714 /* the icon in front of the user name, single quotes
715 in bg url to hide it from iemac */
716 li#pt-userpage,
717 li#pt-anonuserpage,
718 li#pt-login {
719 background: url('user.gif') top left no-repeat;
720 background-repeat: no-repeat;
721 padding-left: 20px;
722 text-transform: none;
726 ** the page-related actions- page/talk, edit etc
728 #p-cactions {
729 position:absolute;
730 top: 1.3em;
731 left: 11.5em;
732 margin: 0;
733 white-space:nowrap;
734 width: 76%;
735 line-height: 1.1em;
736 overflow: visible;
737 background: none;
738 border-collapse: collapse;
739 padding-left: 1em;
740 list-style: none;
741 font-size: 95%;
743 #p-cactions .hiddenStructure { display: none; }
744 #p-cactions ul {
745 list-style: none;
747 #p-cactions li {
748 display: inline;
749 border: 1px solid #aaaaaa;
750 border-bottom: none;
751 padding: 0 0 0.1em 0;
752 margin: 0 0.3em 0 0;
753 overflow: visible;
754 background: White;
756 #p-cactions li.selected {
757 border-color: #fabd23;
758 padding: 0 0 0.2em 0;
760 #p-cactions li a {
761 background-color: White;
762 color: #002bb8;
763 border: none;
764 padding: 0 0.8em 0.3em 0.8em;
765 text-decoration: none;
766 text-transform: lowercase;
767 position: relative;
768 z-index: 0;
769 margin: 0;
771 #p-cactions .selected a { z-index: 3; }
772 #p-cactions .new a { color:#ba0000; }
773 #p-cactions li a:hover {
774 z-index: 3;
775 text-decoration: none;
777 #p-cactions h5 { display: none; }
778 #p-cactions li.istalk { margin-right: 0; }
779 #p-cactions li.istalk a { padding-right: 0.5em; }
780 #p-cactions #ca-addsection a {
781 padding-left: 0.4em;
782 padding-right: 0.4em;
784 /* offsets to distinguish the tab groups */
785 li#ca-talk { margin-right: 1.6em; }
786 li#ca-watch, li#ca-watch { margin-left: 1.6em; }
790 ** the remaining portlets
792 #p-tbx,
793 #p-lang {
794 position:relative;
795 z-index:3;
799 ** footer
801 #footer {
802 background-color: White;
803 border-top: 1px solid #fabd23;
804 border-bottom: 1px solid #fabd23;
805 margin: 0.6em 0em 1em 0em;
806 padding: 0.4em 0em 1.2em 0em;
807 text-align: center;
808 font-size: 90%;
810 #footer li {
811 display: inline;
812 margin: 0 1.3em;
814 /* hide from incapable browsers */
815 head:first-child+body #footer li { white-space: nowrap; }
816 #f-poweredbyico, #f-copyrightico {
817 margin: 0 8px;
818 position: relative;
819 top: -2px; /* Bump it up just a tad */
821 #f-poweredbyico {
822 float: right;
823 height: 1%;
825 #f-copyrightico {
826 float: left;
827 height: 1%;
830 /* js pref toc */
831 #preftoc {
832 float: left;
833 margin: 1em 1em 1em 1em;
834 width: 13em;
836 #preftoc li { border: 1px solid White; }
837 #preftoc li.selected {
838 background-color:#f9f9f9;
839 border:1px dashed #aaaaaa;
841 #preftoc a,
842 #preftoc a:active {
843 display: block;
844 color: #0014a6;
846 #prefcontrol {
847 clear: both;
848 float: left;
849 margin-top: 1em;
851 div.prefsectiontip {
852 font-size: 95%;
853 margin-top: 1em;
855 fieldset.operaprefsection { margin-left: 15em }
858 ** IE/Mac fixes, hope to find a validating way to move this
859 ** to a separate stylesheet. This would work but doesn't validate:
860 ** @import("IEMacFixes.css");
862 /* tabs: border on the a, not the div */
863 * > html #p-cactions li { border:none; }
864 * > html #p-cactions li a {
865 border: 1px solid #aaaaaa;
866 border-bottom: none;
868 * > html #p-cactions li.selected a { border-color: #fabd23; }
869 /* footer icons need a fixed width */
870 * > html #f-poweredbyico,
871 * > html #f-copyrightico { width: 88px; }
872 * > html #bodyContent,
873 * > html #bodyContent pre {
874 overflow-x: auto;
875 width: 100%;
876 padding-bottom: 25px;
879 /* more IE fixes */
880 /* float/negative margin brokenness */
881 * html #footer {margin-top: 0;}
882 * html #column-content {
883 display: inline;
884 margin-bottom: 0;
886 * html div.editsection { font-size: smaller; }
887 #pagehistory li.selected { position: relative; }
889 /* Mac IE 5.0 fix; floated content turns invisible */
890 * > html #column-content {
891 float: none;
893 * > html #column-one {
894 position: absolute;
895 left: 0;
896 top: 0;
898 * > html #footer {
899 margin-left: 13.2em;
901 .redirectText {
902 font-size:150%;
903 margin:5px;
906 .printfooter {
907 display: none;
910 ul.special li.not_patrolled, ol.special li.not_patrolled {
911 background-color: #ffa;
913 div.patrollink {
914 font-size: 75%;
915 text-align: right;
917 span.newpage, span.minor, span.searchmatch {
918 font-weight: bold;
920 span.searchmatch {
921 color: red;