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: #f6f6f6;
30 /* Border on top, left, and bottom side */
31 border: 1px solid
#a7d7f9;
32 border-right-width: 0;
33 /* Merge the border with tabs' one (in their background image) */
35 background-color: white
;
39 /* Hide, but keep accessible for screen-readers */
47 background-color: white
;
49 background-image: url
(images
/page-fade
.png
);
50 background-position: bottom left
;
51 background-repeat: repeat-x
;
68 /* Hide empty portlets */
77 /* Display on top of page tabs - bugs 37158, 48078 */
84 list-style-type: none
;
85 list-style-image: none
;
87 padding-left: 10em; /* Keep from overlapping logo */
101 /* Navigation Containers */
106 /* When right nav would overlap left nav, it's placed below it
107 (normal CSS floats behavior). This rule ensures that no empty space
108 is shown between them due to right nav's margin-top. Page layout
109 is still broken, but at least the nav overlaps only the page title
110 instead of half the content. */
111 margin-bottom: -2.5em;
112 /* IE 6 double-margin bug fix */
119 /* Navigation Labels */
121 div
.vectorMenu h3 span
{
124 /* Namespaces and Views */
132 background-image: url
(images
/tab-break
.png
);
133 background-position: bottom left
;
134 background-repeat: no-repeat
;
143 list-style-type: none
;
144 list-style-image: none
;
149 div
.vectorTabs ul li
{
152 /* OVERRIDDEN BY COMPLIANT BROWSERS */
153 div
.vectorTabs ul li
{
154 line-height: 1.125em;
155 display: inline-block
;
159 background-color: #f3f3f3;
161 background-image: url
(images
/tab-normal-fade
.png
);
162 background-position: bottom left
;
163 background-repeat: repeat-x
;
167 div
.vectorTabs ul
> li
{
170 div
.vectorTabs li
.selected
{
172 background-image: url
(images
/tab-current-fade
.png
);
174 /* OVERRIDDEN BY COMPLIANT BROWSERS */
175 div
.vectorTabs li a
{
176 display: inline-block
;
179 padding-right: 0.5em;
185 div
.vectorTabs li
> a
{
188 div
.vectorTabs li
.icon a
{
189 background-position: bottom right
;
190 background-repeat: no-repeat
;
192 /* OVERRIDDEN BY COMPLIANT BROWSERS */
193 div
.vectorTabs span a
{
194 display: inline-block
;
199 div
.vectorTabs span
> a
{
203 div
.vectorTabs span
{
204 display: inline-block
;
206 background-image: url
(images
/tab-break
.png
);
207 background-position: bottom right
;
208 background-repeat: no-repeat
;
210 div
.vectorTabs li
.selected a
,
211 div
.vectorTabs li
.selected
a:visited
{
213 text-decoration: none
;
215 div
.vectorTabs li
.new a
,
216 div
.vectorTabs li
.new
a:visited
{
219 /* Variants and Actions */
225 background-image: url
(images
/arrow-down-icon
.png
);
226 /* SVG support using a transparent gradient to guarantee cross-browser
227 * compatibility (browsers able to understand gradient syntax support also SVG) */
229 background-image: -webkit-linear-gradient
(transparent
, transparent
), url
(images
/arrow-down-icon
.svg
);
231 background-image: linear-gradient
(transparent
, transparent
), url
(images
/arrow-down-icon
.svg
);
232 background-position: 100% 60%;
233 background-repeat: no-repeat
;
236 div
.vectorMenuFocus
{
238 background-image: url
(images
/arrow-down-focus-icon
.png
);
239 /* SVG support using a transparent gradient to guarantee cross-browser
240 * compatibility (browsers able to understand gradient syntax support also SVG) */
242 background-image: -webkit-linear-gradient
(transparent
, transparent
), url
(images
/arrow-down-focus-icon
.svg
);
244 background-image: linear-gradient
(transparent
, transparent
), url
(images
/arrow-down-focus-icon
.svg
);
245 background-position: 100% 60%;
248 body
.rtl div
.vectorMenu
{
251 /* OVERRIDDEN BY COMPLIANT BROWSERS */
253 div#mw-head div
.vectorMenu h3
{
256 background-image: url
(images
/tab-break
.png
);
257 background-repeat: no-repeat
;
259 /* This will be flipped - unlike the one above it */
260 div#mw-head div
.vectorMenu h3
{
261 background-position: bottom left
;
265 div#mw-head div
.vectorMenu
> h3
{
266 background-image: none
;
268 div#mw-head div
.vectorMenu h4
,
269 div
.vectorMenu#p-variants #mw-vector-current-variant
{
270 display: inline-block
;
274 padding-top: 1.375em;
278 /* OVERRIDDEN BY COMPLIANT BROWSERS */
280 div
.vectorMenu h3 a
{
281 display: inline-block
;
284 text-decoration: none
;
286 background-image: url
(images
/tab-break
.png
);
287 background-repeat: no-repeat
;
289 /* This will be flipped - unlike the one above it */
290 div
.vectorMenu h3 a
{
291 background-position: bottom right
;
294 div
.vectorMenu h3
> a
{
297 div
.vectorMenu div
.menu
{
303 /* OVERRIDDEN BY COMPLIANT BROWSERS */
305 body
.rtl div
.vectorMenu div
.menu
{
310 body
.rtl div
.vectorMenu
> div
.menu
{
314 /* Also fixes old versions of FireFox */
316 body
.rtl div
.vectorMenu
> div
.menu
,
320 /* Enable forcing showing of the menu for accessibility */
321 div
.vectorMenu:hover div
.menu
,
322 div
.vectorMenu div
.menuForceShow
{
327 background-color: white
;
328 border: solid
1px silver
;
330 list-style-type: none
;
331 list-style-image: none
;
337 /* Fixes old versions of FireFox */
342 /* Returns things back to normal in modern versions of FireFox */
354 /* OVERRIDDEN BY COMPLIANT BROWSERS */
355 div
.vectorMenu li a
{
356 display: inline-block
;
364 div
.vectorMenu li
> a
{
367 div
.vectorMenu li
.selected a
,
368 div
.vectorMenu li
.selected
a:visited
{
370 text-decoration: none
;
395 min-height: 1px; /* Gotta trigger hasLayout for IE7 */
396 border: solid
1px #aaa;
398 background-color: white
;
400 background-image: url
(images
/search-fade
.png
);
401 background-position: top left
;
402 background-repeat: repeat-x
;
404 div#simpleSearch
input:focus
{
407 div#simpleSearch input
.placeholder
{
410 div#simpleSearch
input::-webkit-input-placeholder
{
413 div#simpleSearch
input:-moz-placeholder
{
416 div#simpleSearch
input:-ms-input-placeholder
{
419 div#simpleSearch input#searchInput
{
428 padding-bottom: 0.2em;
432 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
433 * this from ever being shown anyways.
437 background-color: transparent
;
440 div#simpleSearch button#searchButton
{
447 padding-bottom: 0.2em;
448 padding-right: 0.4em;
452 background-color: transparent
;
453 background-image: none
;
455 /* OVERRIDDEN BY COMPLIANT BROWSERS */
456 div#simpleSearch button#searchButton img
{
463 div#simpleSearch button#searchButton
> img
{
474 div#mw-panel div
.portal
{
475 padding-bottom: 1.5em;
478 div#mw-panel div
.portal h3
{
483 padding-left: 1.75em;
488 div#mw-panel div
.portal div
.body
{
493 background-image: url
(images
/portal-break
.png
);
494 background-repeat: no-repeat
;
495 background-position: top left
;
497 div#mw-panel div
.portal div
.body ul
{
498 list-style-type: none
;
499 list-style-image: none
;
503 div#mw-panel div
.portal div
.body ul li
{
504 line-height: 1.125em;
506 padding-bottom: 0.5em;
509 word-wrap: break-word
;
511 div#mw-panel div
.portal div
.body ul li a
{
514 div#mw-panel div
.portal div
.body ul li
a:visited
{
525 list-style-type: none
;
526 list-style-image: none
;
534 padding-bottom: 0.5em;
538 div#footer #footer-icons
{
542 body
.ltr div#footer #footer-places
{
545 div#footer #footer-info li
{
548 div#footer #footer-icons li
{
554 div#footer #footer-places li
{
571 background-repeat: no-repeat
;
572 background-position: center center
;
573 text-decoration: none
;
578 * The following code is highly modified from monobook. It would be nice if the
579 * preftoc id was more human readable like preferences-toc for instance,
580 * howerver this would require backporting the other skins.
589 margin: 0 !important
;
590 padding: 0 !important
;
592 background-image: url
(images
/preferences-break
.png
);
593 background-position: bottom left
;
594 background-repeat: no-repeat
;
604 list-style-type: none
;
605 list-style-image: none
;
607 background-image: url
(images
/preferences-break
.png
);
608 background-position: bottom right
;
609 background-repeat: no-repeat
;
611 /* Sadly, IE6 won't understand this */
612 #preftoc li:first-child
{
617 display: inline-block
;
621 text-decoration: none
;
622 background-image: none
;
627 text-decoration: underline
;
629 #preftoc li
.selected a
{
631 background-image: url
(images
/preferences-fade
.png
);
632 background-position: bottom
;
633 background-repeat: repeat-x
;
635 text-decoration: none
;
643 border: solid
1px #ccc;
644 background-color: #fafafa;
646 #preferences fieldset
{
648 border-top: solid
1px #ccc;
650 #preferences fieldset
.prefsection
{
655 #preferences legend
{
658 #preferences fieldset
.prefsection legend
.mainLegend
{
663 padding-right: 0.5em;
670 #preferences div
.mw-prefs-buttons
{
673 #preferences div
.mw-prefs-buttons input
{
674 margin-right: 0.25em;
678 * The following code is slightly modified from monobook
688 list-style-type: disc
;
690 list-style-image: url
(images
/bullet-icon
.png
);
697 /* Site Notice (includes notices from CentralNotice extension) */
706 div#content a
.external
,
707 div#content a
.external
[href ^
="gopher://"] {
709 background: url
(images
/external-link-ltr-icon
.png
) center right no-repeat
;
712 div#content a
.external
[href ^
="https://"],
715 background: url
(images
/lock-icon
.png
) center right no-repeat
;
718 div#content a
.external
[href ^
="mailto:"],
721 background: url
(images
/mail-icon
.png
) center right no-repeat
;
724 div#content a
.external
[href ^
="news:"] {
726 background: url
(images
/news-icon
.png
) center right no-repeat
;
729 div#content a
.external
[href ^
="ftp://"],
732 background: url
(images
/file-icon
.png
) center right no-repeat
;
735 div#content a
.external
[href ^
="irc://"],
736 div#content a
.external
[href ^
="ircs://"],
739 background: url
(images
/talk-icon
.png
) center right no-repeat
;
742 div#content a
.external
[href $
=".ogg"], div#content a
.external
[href $
=".OGG"],
743 div#content a
.external
[href $
=".mid"], div#content a
.external
[href $
=".MID"],
744 div#content a
.external
[href $
=".midi"], div#content a
.external
[href $
=".MIDI"],
745 div#content a
.external
[href $
=".mp3"], div#content a
.external
[href $
=".MP3"],
746 div#content a
.external
[href $
=".wav"], div#content a
.external
[href $
=".WAV"],
747 div#content a
.external
[href $
=".wma"], div#content a
.external
[href $
=".WMA"],
750 background: url
(images
/audio-icon
.png
) center right no-repeat
;
753 div#content a
.external
[href $
=".ogm"], div#content a
.external
[href $
=".OGM"],
754 div#content a
.external
[href $
=".avi"], div#content a
.external
[href $
=".AVI"],
755 div#content a
.external
[href $
=".mpeg"], div#content a
.external
[href $
=".MPEG"],
756 div#content a
.external
[href $
=".mpg"], div#content a
.external
[href $
=".MPG"],
759 background: url
(images
/video-icon
.png
) center right no-repeat
;
762 div#content a
.external
[href $
=".pdf"], div#content a
.external
[href $
=".PDF"],
763 div#content a
.external
[href
*=".pdf#"], div#content a
.external
[href
*=".PDF#"],
764 div#content a
.external
[href
*=".pdf?"], div#content a
.external
[href
*=".PDF?"],
767 background: url
(images
/document-icon
.png
) center right no-repeat
;
771 /* Icon for Usernames */
776 background: url
(images
/user-icon
.png
) left top no-repeat
;
777 /* SVG support using a transparent gradient to guarantee cross-browser
778 * compatibility (browsers able to understand gradient syntax support also SVG) */
780 background-image: -webkit-linear-gradient
(transparent
, transparent
), url
(images
/user-icon
.svg
);
782 background-image: linear-gradient
(transparent
, transparent
), url
(images
/user-icon
.svg
);
783 padding-left: 15px !important
;
791 vertical-align: text-bottom
;
802 /* mediawiki.notification */
803 .skin-vector .mw-notification-area {
806 .skin-vector .mw-notification-area-layout {
809 .skin-vector .mw-notification {
810 background-color: #fff;
811 background-color: rgba
(255, 255, 255, 0.93);
812 padding: 0.75em 1.5em;
813 border: solid
1px #a7d7f9;
814 border-radius: 0.75em;
815 -webkit-box-shadow: 0 2px 10px 0 rgba
(0, 0, 0, 0.125);
816 box-shadow: 0 2px 10px 0 rgba
(0, 0, 0, 0.125);
819 /* Watch/Unwatch Icon Styling */
827 /* This hides the text but shows the background image */
830 /* Only applied in IE6 */
831 margin-top: -0.8em !ie
;
835 background-image: url
(images
/watch-icons
.png
);
838 background-position: -43px 60%;
841 background-position: 5px 60%;
843 #ca-unwatch.icon
a:hover
,
844 #ca-unwatch.icon
a:focus
{
845 background-position: -67px 60%;
847 #ca-watch.icon
a:hover
,
848 #ca-watch.icon
a:focus
{
849 background-position: -19px 60%;
851 #ca-unwatch.icon a
.loading
,
852 #ca-watch.icon a
.loading
{
854 background-image: url
(images
/watch-icon-loading
.gif
);
855 background-position: 5px 60%;
857 #ca-unwatch.icon a span
,
858 #ca-watch.icon a span
{
863 background-image: url
(images
/tab-break
.png
);
864 background-position: right bottom
;
865 background-repeat: no-repeat
;
868 /* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
873 /* Animate between standard and high definition layouts */
875 body
.vector-animateLayout div#content
,
876 body
.vector-animateLayout div#footer
,
877 body
.vector-animateLayout #left-navigation
{
878 -moz-transition: margin-left
250ms, padding
250ms;
879 -webkit-transition: margin-left
250ms, padding
250ms;
880 -o-transition: margin-left
250ms, padding
250ms;
881 transition: margin-left
250ms, padding
250ms;
883 body
.vector-animateLayout #p-logo
{
884 -moz-transition: left
250ms;
885 -webkit-transition: left
250ms;
886 -o-transition: left
250ms;
887 transition: left
250ms;
889 body
.vector-animateLayout #mw-panel
{
890 -moz-transition: padding-left
250ms;
891 -webkit-transition: padding-left
250ms;
892 -o-transition: padding-left
250ms;
893 transition: padding-left
250ms;
895 body
.vector-animateLayout #p-search
{
896 -moz-transition: margin-right
250ms;
897 -webkit-transition: margin-right
250ms;
898 -o-transition: margin-right
250ms;
899 transition: margin-right
250ms;
901 body
.vector-animateLayout #p-personal
{
902 -moz-transition: right
250ms;
903 -webkit-transition: right
250ms;
904 -o-transition: right
250ms;
905 transition: right
250ms;
907 body
.vector-animateLayout #mw-head-base
{
908 -moz-transition: margin-left
250ms;
909 -webkit-transition: margin-left
250ms;
910 -o-transition: margin-left
250ms;
911 transition: margin-left
250ms;