make sitenotice a bit easier on the eye (grey border instead of red, no top border...
[mediawiki.git] / stylesheets / monobook / main.css
blob068f74470d99c654413029f9b911384f0fa13691
1 /*
2 ** Mediawiki 'monobook' style sheet for CSS2-capable browsers.
3 ** Copyright Gabriel Wicke - http://www.aulinx.de/
4 **
5 ** Loosely 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 #column-content {
15 width: 100%;
16 float: right;
17 margin: 0 0 0.6em -12.2em;
18 padding:0;
20 #content {
21 margin: 2.8em 0 0 12.2em;
22 padding: 0em 1em 1.5em 1em;
23 background: White;
24 border: 1px solid #aaaaaa;
25 border-right: none;
26 line-height: 1.5em;
27 position: relative;
28 z-index: 2;
30 #column-one { padding-top: 160px; }
31 /* the left column width is specified in class .portlet */
33 /* Font size:
34 ** We take advantage of keyword scaling- browsers won't go below 9px
35 ** More at http://www.w3.org/2003/07/30-font-size
36 ** http://style.cleverchimp.com/font_size_intervals/altintervals.html
39 body {
40 font: x-small sans-serif;
41 background: #f9f9f9 url("headbg.jpg") 0px 0px no-repeat;
42 color: Black;
43 margin: 0;
44 padding: 0;
47 /* scale back up to a sane default */
48 #globalWrapper {
49 font-size:127%;
50 width: 100%;
51 margin: 0;
52 padding: 0;
54 .visualClear { clear: both; }
56 /* general styles */
58 table {
59 font-size: 100%;
60 background: White;
62 a {
63 text-decoration: none;
64 color: #002bb8;
65 background: none;
67 a:visited { color: #5a3696; }
68 a:active { color: Orange; }
69 a:hover { text-decoration: underline; }
70 a.stub { color: #772233; }
71 a.new,
72 #p-personal a.new { color:#ba0000; }
73 a.new:visited,
74 #p-personal a.new:visited { color:#a55858; }
76 img {
77 border: none;
78 vertical-align: middle;
80 p {
81 margin: 0.4em 0em 0.5em 0em;
82 line-height: 1.5em;
85 p img { margin: 0; }
87 hr {
88 height: 1px;
89 color: #aaaaaa;
90 background-color: #aaaaaa;
91 border: 0;
92 margin: 0.2em 0 0.2em 0;
95 h1, h2, h3, h4, h5, h6 {
96 color: Black;
97 background: none;
98 font-weight: normal;
99 margin: 0;
100 padding-top: 0.5em;
101 padding-bottom: 0.17em;
102 border-bottom: 1px solid #aaaaaa;
104 h1 { font-size: 188%; }
105 h2 { font-size: 150%; }
106 h3, h4, h5, h6 {
107 border-bottom: none;
108 font-weight: bold;
110 h3 { font-size: 132%; }
111 h4 { font-size: 116%; }
112 h5 { font-size: 100%; }
113 h6 { font-size: 80%; }
115 ul {
116 line-height: 1.5em;
117 list-style-type: square;
118 margin: 0.3em 0 0 1.5em;
119 padding:0;
120 list-style-image: url("bullet.gif");
122 ol {
123 line-height: 1.5em;
124 margin: 0.3em 0 0 3.2em;
125 padding:0;
126 list-style-image: none;
128 li { margin-bottom: 0.1em; }
129 dt {
130 font-weight: bold;
131 margin-bottom: 0.1em;
134 margin-top: 0.2em;
135 margin-bottom: 0.5em;
137 dd {
138 line-height: 1.5em;
139 margin-left: 2em;
140 margin-bottom: 0.1em;
143 fieldset {
144 border: 1px solid #2f6fab;
145 margin: 1em 0em 1em 0em;
146 padding: 0em 1em 1em 1em;
147 line-height: 1.5em;
149 legend {
150 background: White;
151 padding: 0.5em;
152 font-size: 95%;
154 form {
155 border: none;
156 margin: 0;
159 textarea {
160 border: 1px solid #2f6fab;
161 color: Black;
162 background-color: white;
163 width: 100%;
164 padding: 0.1em;
165 overflow: auto;
167 /* hide this from ie/mac and konq2.2 */
168 @media All {
169 head:first-child+body input {
170 visibility: visible;
171 border: 1px solid #2f6fab;
172 color: Black;
173 background-color: white;
174 vertical-align: middle;
175 padding: 0.2em;
178 input.historysubmit {
179 padding: 0 0.3em 0.3em 0.3em !important;
180 font-size: 94%;
181 cursor: pointer;
182 height: 1.7em !important;
183 margin-left: 1.6em;
185 input[type="radio"],
186 input[type="checkbox"] { border:none; }
187 select {
188 border: 1px solid #2f6fab;
189 color: Black;
190 vertical-align: top;
192 abbr, acronym, .explain {
193 border-bottom: 1px dotted Black;
194 color: Black;
195 background: none;
196 cursor: help;
199 font-family: Times, "Times New Roman", serif;
200 font-style: italic;
202 /* disabled for now
203 blockquote {
204 font-family: Times, "Times New Roman", serif;
205 font-style: italic;
207 code { background-color: #f9f9f9; }
208 pre {
209 padding: 1em;
210 border: 1px dashed #2f6fab;
211 color: Black;
212 background-color: #f9f9f9;
213 line-height: 1.1em;
218 ** the main content area
221 #siteSub { display: none; }
222 #contentSub {
223 font-size: 84%;
224 line-height: 1.2em;
225 margin: 0 0 1.4em 1em;
226 color: #7d7d7d;
227 width: auto;
229 span.subpages { display: block; }
231 /* Some space under the headers in the content area */
232 #bodyContent h1, #bodyContent h2 { margin-bottom:0.6em; }
233 #bodyContent h3,
234 #bodyContent h4,
235 #bodyContent h5 {
236 margin-bottom: 0.3em;
238 .firstHeading { margin-bottom:0.1em; }
240 /* user notification thing */
241 .usermessage {
242 background-color: #ffce7b;
243 border: 1px solid #ffa500;
244 color: Black;
245 font-weight: bold;
246 margin: 2em 0em 1em 0em;
247 padding: 0.5em 1em;
248 vertical-align: middle;
250 #siteNotice {
251 border:1px solid #aaaaaa;
252 border-top: 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.4;
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;