2 * Any rules which should not be flipped automatically in right-to-left situations should be
3 * prepended with @noflip in a comment block. Images that should be embedded as base64 data-URLs
4 * should be prepended with @embed in a comment block.
6 * This style-sheet employs a few CSS trick to accomplish compatibility with a wide range of web
7 * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
8 * a rule that makes things work in IE6, and then following it with a rule that begins with
9 * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
10 * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
11 * "IGNORED BY IE6" comments.
20 font-family: sans-serif;
24 background-color: #f3f3f3;
26 background-image: url(images/page-base.png);
33 background-image: url(images/border.png);
34 background-position: top left;
35 background-repeat: repeat-y;
36 background-color: white;
43 background-color: white;
45 background-image: url(images/page-fade.png);
46 background-position: bottom left;
47 background-repeat: repeat-x;
54 background-image: url(images/border.png);
55 background-position: bottom left;
56 background-repeat: repeat-x;
68 /* Hide empty portlets */
84 padding-left: 10em; /* Keep from overlapping logo */
98 /* Navigation Containers */
108 /* Navigation Labels */
110 div.vectorMenu h5 span {
113 /* Namespaces and Views */
121 background-image: url(images/tab-break.png);
122 background-position: bottom left;
123 background-repeat: no-repeat;
137 div.vectorTabs ul li {
140 /* OVERRIDDEN BY COMPLIANT BROWSERS */
141 div.vectorTabs ul li {
142 line-height: 1.125em;
143 display: inline-block;
147 background-color: #f3f3f3;
149 background-image: url(images/tab-normal-fade.png);
150 background-position: bottom left;
151 background-repeat: repeat-x;
155 div.vectorTabs ul > li {
158 div.vectorTabs li.selected {
160 background-image: url(images/tab-current-fade.png);
162 /* OVERRIDDEN BY COMPLIANT BROWSERS */
163 div.vectorTabs li a {
164 display: inline-block;
167 padding-right: 0.5em;
169 background-image: url(images/tab-break.png);
170 background-position: bottom right;
171 background-repeat: no-repeat;
177 div.vectorTabs li > a {
180 /* OVERRIDDEN BY COMPLIANT BROWSERS */
181 div.vectorTabs span a {
182 display: inline-block;
187 div.vectorTabs span > a {
191 div.vectorTabs li.selected a,
192 div.vectorTabs li.selected a:visited{
194 text-decoration: none;
196 div.vectorTabs li.new a,
197 div.vectorTabs li.new a:visited{
200 /* Variants and Actions */
206 background-image: url(images/arrow-down-icon.png);
207 background-position: 100% 60%;
208 background-repeat: no-repeat;
212 body.rtl div.vectorMenu {
215 /* OVERRIDDEN BY COMPLIANT BROWSERS */
217 div#mw-head div.vectorMenu h5 {
220 background-image: url(images/tab-break.png);
221 background-repeat: no-repeat;
223 /* This will be flipped - unlike the one above it */
224 div#mw-head div.vectorMenu h5 {
225 background-position: bottom left;
229 div#mw-head div.vectorMenu > h5 {
230 background-image: none;
232 div#mw-head div.vectorMenu h4 {
233 display: inline-block;
237 padding-top: 1.375em;
241 /* OVERRIDDEN BY COMPLIANT BROWSERS */
243 div.vectorMenu h5 a {
244 display: inline-block;
247 text-decoration: none;
249 background-image: url(images/tab-break.png);
250 background-repeat: no-repeat;
252 /* This will be flipped - unlike the one above it */
253 div.vectorMenu h5 a {
254 background-position: bottom right;
257 div.vectorMenu h5 > a {
260 div.vectorMenu div.menu {
266 /* OVERRIDDEN BY COMPLIANT BROWSERS */
268 body.rtl div.vectorMenu div.menu {
273 body.rtl div.vectorMenu > div.menu {
277 /* Also fixes old versions of FireFox */
279 body.rtl div.vectorMenu > div.menu,
283 div.vectorMenu:hover div.menu {
288 background-color: white;
289 border: solid 1px silver;
292 list-style-image: none;
293 list-style-type: none;
299 /* Fixes old versions of FireFox */
304 /* Returns things back to normal in modern versions of FireFox */
316 /* OVERRIDDEN BY COMPLIANT BROWSERS */
317 div.vectorMenu li a {
318 display: inline-block;
326 div.vectorMenu li > a {
329 div.vectorMenu li.selected a,
330 div.vectorMenu li.selected a:visited {
332 text-decoration: none;
357 min-height: 1px; /* Gotta trigger hasLayout for IE7 */
358 border: solid 1px #AAAAAA;
360 background-color: white;
362 background-image: url(images/search-fade.png);
363 background-position: top left;
364 background-repeat: repeat-x;
366 div#simpleSearch label {
368 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
369 * this from ever being shown anyways.
375 div#simpleSearch input {
379 div#simpleSearch input:focus {
382 div#simpleSearch input.placeholder {
385 div#simpleSearch input::-webkit-input-placeholder {
388 div#simpleSearch input#searchInput {
397 padding-bottom: 0.2em;
401 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
402 * this from ever being shown anyways.
405 background-color: transparent;
408 div#simpleSearch button#searchButton {
415 padding-bottom: 0.2em;
416 padding-right: 0.4em;
420 background-color: transparent;
422 /* OVERRIDDEN BY COMPLIANT BROWSERS */
423 div#simpleSearch button#searchButton img {
430 div#simpleSearch button#searchButton > img {
441 div#mw-panel div.portal {
442 padding-bottom: 1.5em;
445 div#mw-panel div.portal h5 {
450 padding-left: 1.75em;
455 div#mw-panel div.portal div.body {
460 background-image: url(images/portal-break.png);
461 background-repeat: no-repeat;
462 background-position: top left;
464 div#mw-panel div.portal div.body ul {
466 list-style-image: none;
467 list-style-type: none;
471 div#mw-panel div.portal div.body ul li {
472 line-height: 1.125em;
474 padding-bottom: 0.5em;
479 div#mw-panel div.portal div.body ul li a {
482 div#mw-panel div.portal div.body ul li a:visited {
491 background-image: url(images/border.png);
492 background-position: top left;
493 background-repeat: repeat-x;
498 list-style-image: none;
499 list-style-type: none;
507 padding-bottom: 0.5em;
511 div#footer #footer-icons {
515 body.ltr div#footer #footer-places {
518 div#footer #footer-info li {
521 div#footer #footer-icons li {
526 div#footer #footer-places li {
543 background-repeat: no-repeat;
544 background-position: center center;
545 text-decoration: none;
550 * The following code is highly modified from monobook. It would be nice if the
551 * preftoc id was more human readable like preferences-toc for instance,
552 * howerver this would require backporting the other skins.
561 margin: 0 !important;
562 padding: 0 !important;
564 background-image: url(images/preferences-break.png);
565 background-position: bottom left;
566 background-repeat: no-repeat;
576 list-style-type: none;
577 list-style-image: none;
579 background-image: url(images/preferences-break.png);
580 background-position: bottom right;
581 background-repeat: no-repeat;
583 /* Sadly, IE6 won't understand this */
584 #preftoc li:first-child {
589 display: inline-block;
593 text-decoration: none;
594 background-image: none;
599 text-decoration: underline;
601 #preftoc li.selected a {
603 background-image: url(images/preferences-fade.png);
604 background-position: bottom;
605 background-repeat: repeat-x;
607 text-decoration: none;
615 border: solid 1px #cccccc;
616 background-color: #f9f9f9;
618 background-image: url(images/preferences-base.png);
620 #preferences fieldset.prefsection {
625 #preferences fieldset.prefsection fieldset {
627 border-top: solid 1px #cccccc;
629 #preferences legend {
632 #preferences fieldset.prefsection legend.mainLegend {
637 padding-right: 0.5em;
639 #preferences td.htmlform-tip {
644 #preferences div.mw-prefs-buttons {
647 #preferences div.mw-prefs-buttons input {
648 margin-right: 0.25em;
652 * Styles for the user login and create account forms
654 #userlogin, #userloginForm {
655 border: solid 1px #cccccc;
669 * The following code is slightly modified from monobook
680 text-decoration: none;
691 text-decoration: underline;
696 a.new, #p-personal a.new {
699 a.new:visited, #p-personal a.new:visited {
703 /* Inline Elements */
706 vertical-align: middle;
711 background-color: #aaa;
713 margin: .2em 0 .2em 0;
716 /* Structural Elements */
729 padding-bottom: .17em;
730 border-bottom: 1px solid #aaa;
733 h1 { font-size: 188%; }
734 h1 .editsection { font-size: 53%; }
735 h2 { font-size: 150%; }
736 h2 .editsection { font-size: 67%; }
744 h3 { font-size: 132%; }
745 h3 .editsection { font-size: 76%; font-weight: normal; }
746 h4 { font-size: 116%; }
747 h4 .editsection { font-size: 86%; font-weight: normal; }
748 h5 { font-size: 100%; }
749 h5 .editsection { font-weight: normal; }
750 h6 { font-size: 80%; }
751 h6 .editsection { font-size: 125%; font-weight: normal; }
752 .editsection { float: right; }
754 margin: .4em 0 .5em 0;
761 font-family: Times, "Times New Roman", serif;
766 font-family: Times, "Times New Roman", serif;
769 pre, code, tt, kbd, samp {
771 * It's important for this rule to first reference an actual font name, some browsers will render the monospace text
772 * too small otherwise, namely Firefox, Chrome and Safari
774 font-family: monospace, "Courier New";
777 background-color: #f9f9f9;
781 border: 1px dashed #2f6fab;
783 background-color: #f9f9f9;
788 list-style-type: square;
789 margin: .3em 0 0 1.5em;
792 list-style-image: url(images/bullet-icon.png);
796 margin: .3em 0 0 3.2em;
798 list-style-image: none;
822 border: 1px solid #2f6fab;
829 padding: 0 0.5em 0.5em;
846 /* Table of Contents */
850 border: 1px solid #aaa;
851 background-color: #f9f9f9;
871 list-style-type: none;
872 list-style-image: none;
886 div.floatright, table.floatright {
890 margin: 0 0 .5em .5em;
893 div.floatright p { font-style: italic; }
894 div.floatleft, table.floatleft {
898 margin: 0 .5em .5em 0;
901 div.floatleft p { font-style: italic; }
906 background-color: transparent;
909 border: 1px solid #ccc;
910 padding: 3px !important;
911 background-color: #f9f9f9;
917 border: 1px solid #ccc;
923 padding: 3px !important;
928 border: none !important;
929 background: none !important;
931 div.magnify a, div.magnify img {
933 border: none !important;
934 background: none !important;
940 margin: .5em 0 1.3em 1.4em;
946 margin: .5em 1.4em 1.3em 0;
949 border: 1px solid #dddddd;
962 background-color: #ffce7b;
963 border: 1px solid #ffa500;
968 vertical-align: middle;
970 /* Site Notice (includes notices from CentralNotice extension) */
978 margin-bottom: 0.9em;
982 border: 1px solid #aaa;
983 background-color: #f9f9f9;
995 #contentSub, #contentSub2 {
998 margin: 0 0 1.4em 1em;
1005 /* Emulate Center */
1014 /* Small for tables and similar */
1021 /* Edge Cases for Content */
1023 margin-bottom: .6em;
1026 margin-bottom: .3em;
1032 margin-bottom: 0.1em;
1037 div#content a.external,
1038 div#content a[href ^="gopher://"] {
1040 background: url(images/external-link-ltr-icon.png) center right no-repeat;
1041 padding-right: 13px;
1043 div#content a[href ^="https://"],
1046 background: url(images/lock-icon.png) center right no-repeat;
1047 padding-right: 13px;
1049 div#content a[href ^="mailto:"],
1052 background: url(images/mail-icon.png) center right no-repeat;
1053 padding-right: 13px;
1055 div#content a[href ^="news://"] {
1057 background: url(images/news-icon.png) center right no-repeat;
1058 padding-right: 13px;
1060 div#content a[href ^="ftp://"],
1063 background: url(images/file-icon.png) center right no-repeat;
1064 padding-right: 13px;
1066 div#content a[href ^="irc://"],
1067 div#content a.extiw[href ^="irc://"],
1070 background: url(images/talk-icon.png) center right no-repeat;
1071 padding-right: 13px;
1073 div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"],
1074 div#content a.external[href $=".mid"], div#content a.external[href $=".MID"],
1075 div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"],
1076 div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"],
1077 div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"],
1078 div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"],
1081 background: url("images/audio-icon.png?2") center right no-repeat;
1082 padding-right: 13px;
1084 div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"],
1085 div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"],
1086 div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"],
1087 div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"],
1090 background: url("images/video-icon.png?2") center right no-repeat;
1091 padding-right: 13px;
1093 div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"],
1094 div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"],
1095 div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"],
1098 background: url("images/document-icon.png?2") center right no-repeat;
1099 padding-right: 13px;
1101 /* Interwiki Styling (Disabled) */
1102 div#content a.extiw,
1103 div#content a.extiw:active {
1108 div#content a.external {
1111 div#content .printfooter {
1114 /* Icon for Usernames */
1119 background: url(images/user-icon.png) left top no-repeat;
1120 padding-left: 15px !important;
1121 text-transform: none;
1125 border: 1px solid #aaa;
1126 background-color: #f9f9f9;
1141 /* Watch/Unwatch Icon Styling */
1153 /* This hides the text but shows the background image */
1156 /* Only applied in IE6 */
1157 margin-top: -0.8em !ie;
1161 background-image: url(images/watch-icons.png);
1163 #ca-unwatch.icon a {
1164 background-position: -43px 60%;
1167 background-position: 5px 60%;
1169 #ca-unwatch.icon a:hover,
1170 #ca-unwatch.icon a:focus {
1171 background-position: -67px 60%;
1173 #ca-watch.icon a:hover,
1174 #ca-watch.icon a:focus {
1175 background-position: -19px 60%;
1177 #ca-unwatch.icon a.loading,
1178 #ca-watch.icon a.loading {
1180 background-image: url(images/watch-icon-loading.gif);
1181 background-position: 5px 60%;
1183 #ca-unwatch.icon a span,
1184 #ca-watch.icon a span {
1189 background-image:url(images/tab-break.png);
1190 background-position:right bottom;
1191 background-repeat:no-repeat;
1194 /* Convenience links to edit block, delete and protect reasons */
1195 p.mw-ipb-conveniencelinks, p.mw-protect-editreasons,
1196 p.mw-filedelete-editreasons, p.mw-delete-editreasons {
1200 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */