/*
 * Any rules which should not be flipped automatically in right-to-left situations should be
 * prepended with @noflip in a comment block.
 *
 * This stylesheet employs a few CSS trick to accomplish compatibility with a wide range of web
 * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
 * a rule that makes things work in IE6, and then following it with a rule that begins with
 * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
 * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
 * "IGNORED BY IE6" comments.
 */
@import "mediawiki.mixins";

/* Framework */
html {
	font-size: @html-font-size;
}
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: @content-font-family;
}
body {
	background-color: #f6f6f6;
	font-size: @body-font-size;
}
/* Content */
div#content {
	line-height: @content-line-height;
	margin-left: 10em;
	padding: @content-padding;
	/* Border on top, left, and bottom side */
	border: 1px solid #a7d7f9;
	border-right-width: 0;
	/* Merge the border with tabs' one (in their background image) */
	margin-top: -1px;
	background-color: white;
	color: @content-font-color;
	direction: ltr;
}
/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
	position: absolute;
	top: -9999px;
}
/* Head */
#mw-page-base {
	height: 5em;
	background-color: white;
	.background-image('images/page-fade.png');
	background-position: bottom left;
	background-repeat: repeat-x;
}
#mw-head-base {
	margin-top: -5em;
	margin-left: 10em;
	height: 5em;
}
div#mw-head {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
}
div#mw-head h3 {
	margin: 0;
	padding: 0;
}
/* Hide empty portlets */
div.emptyPortlet {
		display: none;
}
/* Personal */
#p-personal {
	position: absolute;
	top: 0.33em;
	right: 0.75em;
	/* Display on top of page tabs - bugs 37158, 48078 */
	z-index: 100;
}
#p-personal h3 {
	display: none;
}
#p-personal ul {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding-left: 10em; /* Keep from overlapping logo */
}
#p-personal li {
	line-height: 1.125em;
	/* @noflip */
	float: left;
	margin-left: 0.75em;
	margin-top: 0.5em;
	font-size: @menu-personal-font-size;
	white-space: nowrap;
}
/* Navigation Containers */
#left-navigation {
	float: left;
	margin-left: 10em;
	margin-top: 2.5em;
	/* When right nav would overlap left nav, it's placed below it
	   (normal CSS floats behavior). This rule ensures that no empty space
	   is shown between them due to right nav's margin-top. Page layout
	   is still broken, but at least the nav overlaps only the page title
	   instead of half the content. */
	margin-bottom: -2.5em;
	/* IE 6 double-margin bug fix */
	display: inline;
}
#right-navigation {
	float: right;
	margin-top: 2.5em;
}
/* Navigation Labels */
div.vectorTabs h3,
div.vectorMenu h3 span {
	display: none;
}
/* Namespaces and Views */
div.vectorTabs {
	/* @noflip */
	float: left;
	height: 2.5em;
}
div.vectorTabs {
	.background-image('images/tab-break.png');
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-left: 1px;
}
div.vectorTabs ul {
	/* @noflip */
	float: left;
	height: 100%;
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs ul li {
	/* @noflip */
	float: left;
	line-height: 1.125em;
	display: inline-block;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #f3f3f3;
	.background-image('images/tab-normal-fade.png');
	background-position: bottom left;
	background-repeat: repeat-x;
	white-space: nowrap;
}
/* IGNORED BY IE6 */
div.vectorTabs ul > li {
	display: block;
}
div.vectorTabs li.selected {
	.background-image('images/tab-current-fade.png');
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs li a {
	display: inline-block;
	height: 1.9em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	color: @menu-link-color;
	cursor: pointer;
	font-size: 0.8em;
}
/* IGNORED BY IE6 */
div.vectorTabs li > a {
	display: block;
}
div.vectorTabs li.icon a {
	background-position: bottom right;
	background-repeat: no-repeat;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs span a  {
	display: inline-block;
	padding-top: 1.25em;
}
/* IGNORED BY IE6 */
div.vectorTabs span > a {
	/* @noflip */
	float: left;
	display: block;
}
div.vectorTabs span {
	display: inline-block;
	.background-image('images/tab-break.png');
	background-position: bottom right;
	background-repeat: no-repeat;
}
div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited{
	color: #333;
	text-decoration: none;
}
div.vectorTabs li.new a,
div.vectorTabs li.new a:visited{
	color: #a55858;
}
/* Variants and Actions */
div.vectorMenu {
	/* @noflip */
	direction: ltr;
	/* @noflip */
	float: left;
	/* SVG support using a transparent gradient to guarantee cross-browser
	 * compatibility (browsers able to understand gradient syntax support also SVG) */
	.background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
	/* @noflip */
	background-position: 100% 60%;
	background-repeat: no-repeat;
	cursor: pointer;
}
div.vectorMenuFocus {
	/* SVG support using a transparent gradient to guarantee cross-browser
	 * compatibility (browsers able to understand gradient syntax support also SVG) */
	.background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
	background-position: 100% 60%;
}
body.rtl div.vectorMenu {
	/* @noflip */
	direction: rtl;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div#mw-head div.vectorMenu h3 {
	/* @noflip */
	float: left;
	.background-image('images/tab-break.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	margin-left: -1px;
}
/* IGNORED BY IE6 */
div#mw-head div.vectorMenu > h3 {
	background-image: none;
}
div#mw-head div.vectorMenu h4,
div.vectorMenu#p-variants #mw-vector-current-variant {
	display: inline-block;
	float: left;
	font-size: 0.8em;
	padding-left: 0.5em;
	padding-top: 1.375em;
	font-weight: normal;
	border: none;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorMenu h3 a {
	display: inline-block;
	width: 24px;
	height: 1.9em;
	text-decoration: none;
	.background-image('images/tab-break.png');
	background-repeat: no-repeat;
	background-position: bottom right;
}
/* IGNORED BY IE6 */
div.vectorMenu h3 > a {
	display: block;
}
div.vectorMenu div.menu {
	position: relative;
	display: none;
	clear: both;
	text-align: left;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
body.rtl div.vectorMenu div.menu {
	/* @noflip */
	margin-left: 24px;
}
/* IGNORED BY IE6 */
body.rtl div.vectorMenu > div.menu {
	/* @noflip */
	margin-left: auto;
}
/* IGNORED BY IE6 */
/* Also fixes old versions of FireFox */
body.rtl div.vectorMenu > div.menu,
x:-moz-any-link {
	/* @noflip */
	margin-left: 23px;
}
/* Enable forcing showing of the menu for accessibility */
div.vectorMenu:hover div.menu,
div.vectorMenu div.menuForceShow {
	display: block;
}
div.vectorMenu ul {
	position: absolute;
	background-color: white;
	border: solid 1px silver;
	border-top-width: 0;
	list-style-type: none;
	list-style-image: none;
	padding: 0;
	margin: 0;
	margin-left: -1px;
	text-align: left;
}
/* Fixes old versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link {
	min-width: 5em;
}
/* Returns things back to normal in modern versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link,
x:default {
	min-width: 0;
}
div.vectorMenu li {
	padding: 0;
	margin: 0;
	text-align: left;
	line-height: 1em;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorMenu li a {
	display: inline-block;
	padding: 0.5em;
	white-space: nowrap;
	color: @menu-link-color;
	cursor: pointer;
	font-size: 0.8em;
}
/* IGNORED BY IE6 */
div.vectorMenu li > a {
	display: block;
}
div.vectorMenu li.selected a,
div.vectorMenu li.selected a:visited {
	color: #333;
	text-decoration: none;
}
/* Search */
#p-search h3 {
	display: none;
}
#p-search {
	/* @noflip */
	float: left;
}
#p-search {
	margin-right: 0.5em;
	margin-left: 0.5em;
}
#p-search form,
#p-search input {
	margin: 0;
	margin-top: 0.4em;
}
div#simpleSearch {
	display: block;
	width: 14em;
	height: 1.4em;
	margin-top: 0.65em;
	position: relative;
	min-height: 1px; /* Gotta trigger hasLayout for IE7 */
	border: solid 1px #aaa;
	color: black;
	background-color: white;
	.background-image('images/search-fade.png');
	background-position: top left;
	background-repeat: repeat-x;
}
div#simpleSearch input:focus {
	outline: none;
}
div#simpleSearch input {
	color: black;
}
div#simpleSearch input.placeholder {
	color: #999;
}
div#simpleSearch input::-webkit-input-placeholder {
	color: #999;
}
div#simpleSearch input:-moz-placeholder {
	color: #999;
}
div#simpleSearch input:-ms-input-placeholder {
	color: #999;
}
div#simpleSearch input#searchInput {
	position: absolute;
	top: 0;
	left: 0;
	width: 90%;
	margin: 0;
	padding: 0;
	padding-left: 0.2em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	outline: none;
	border: none;
	/*
	 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
	 * this from ever being shown anyways.
	*/
	font-size: 13px;
	background-color: transparent;
	direction: ltr;
}
div#simpleSearch button#searchButton {
	position: absolute;
	width: 10%;
	right: 0;
	top: 0;
	padding: 0;
	padding-top: 0.3em;
	padding-bottom: 0.2em;
	padding-right: 0.4em;
	margin: 0;
	border: none;
	cursor: pointer;
	background-color: transparent;
	background-image: none;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div#simpleSearch button#searchButton img {
	border: none;
	margin: 0;
	margin-top: -3px;
	padding: 0;
}
/* IGNORED BY IE6 */
div#simpleSearch button#searchButton > img {
	margin: 0;
}
/* Panel */
div#mw-panel {
	font-size: @menu-main-font-size;
	position: absolute;
	top: 160px;
	padding-top: 1em;
	width: 10em;
	left: 0;
}
div#mw-panel div.portal {
	padding-bottom: 1.5em;
	direction: ltr;
}
div#mw-panel div.portal h3 {
	font-weight: normal;
	color: #444;
	padding: @menu-main-heading-padding;
	cursor: default;
	border: none;
	font-size: @menu-main-heading-font-size;
}
div#mw-panel div.portal div.body {
	padding-top: 0.5em;
	margin: @menu-main-body-margin;

	.background-image('images/portal-break.png');
	background-repeat: no-repeat;
	background-position: top left;
}
div#mw-panel div.portal div.body ul {
	list-style-type: none;
	list-style-image: none;
	padding: @menu-main-body-padding;
	margin: 0;
}
div#mw-panel div.portal div.body ul li {
	line-height: 1.125em;
	padding: 0;
	padding-bottom: 0.5em;
	margin: 0;
	font-size: @menu-main-body-font-size;
	word-wrap: break-word;
}
div#mw-panel div.portal div.body ul li a {
	color: @menu-main-body-link-color;
	&:visited {
		color: @menu-main-body-link-visited-color;
	}
}

/* Footer */
div#footer {
	margin-left: 10em;
	margin-top: 0;
	padding: 0.75em;
	direction: ltr;
}
div#footer ul {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
div#footer ul li {
	margin: 0;
	padding: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	color: #333;
	font-size: 0.7em;
}
div#footer #footer-icons {
	float: right;
}

body.ltr div#footer #footer-places {
	/* @noflip */
	float: left;
}
div#footer #footer-info li {
	line-height: 1.4em;
}
div#footer #footer-icons li {
	float: left;
	margin-left: 0.5em;
	line-height: 2em;
	text-align: right;
}
div#footer #footer-places li {
	float: left;
	margin-right: 1em;
	line-height: 2em;
}
/* Logo */
#p-logo {
	position: absolute;
	top: -160px;
	left: 0;
	width: 10em;
	height: 160px;
}
#p-logo a {
	display: block;
	width: 10em;
	height: 160px;
	background-repeat: no-repeat;
	background-position: center center;
	text-decoration: none;
}

/*
 *
 * The following code is highly modified from monobook. It would be nice if the
 * preftoc id was more human readable like preferences-toc for instance,
 * howerver this would require backporting the other skins.
 */

/* Preferences */
#preftoc {
	/* Tabs */
	width: 100%;
	float: left;
	clear: both;
	margin: 0 !important;
	padding: 0 !important;
	.background-image('images/preferences-break.png');
	background-position: bottom left;
	background-repeat: no-repeat;
}
	#preftoc li {
		/* Tab */
		float: left;
		margin: 0;
		padding: 0;
		padding-right: 1px;
		height: 2.25em;
		white-space: nowrap;
		list-style-type: none;
		list-style-image: none;
		.background-image('images/preferences-break.png');
		background-position: bottom right;
		background-repeat: no-repeat;
	}
	/* Sadly, IE6 won't understand this */
	#preftoc li:first-child {
		margin-left: 1px;
	}
	#preftoc a,
	#preftoc a:active {
		display: inline-block;
		position: relative;
		color: @menu-link-color;
		padding: 0.5em;
		text-decoration: none;
		background-image: none;
		font-size: 0.9em;
	}
	#preftoc a:hover,
	#preftoc a:focus {
		text-decoration: underline;
	}
	#preftoc li.selected a {
		.background-image('images/preferences-fade.png');
		background-position: bottom;
		background-repeat: repeat-x;
		color: #333;
		text-decoration: none;
	}
#preferences {
	float: left;
	width: 100%;
	margin: 0;
	margin-top: -2px;
	clear: both;
	border: solid 1px #ccc;
	background-color: #fafafa;
}
#preferences fieldset {
	border: none;
	border-top: solid 1px #ccc;
}
#preferences fieldset.prefsection {
	border: none;
	padding: 0;
	margin: 1em;
}
#preferences legend {
	color: #666;
}
#preferences fieldset.prefsection legend.mainLegend {
	display: none;
}
#preferences td {
	padding-left: 0.5em;
	padding-right: 0.5em;
}
.htmlform-tip {
	font-size: x-small;
	padding: .2em 2em;
	color: #666;
}
#preferences div.mw-prefs-buttons {
	padding: 1em;
}
#preferences div.mw-prefs-buttons input {
	margin-right: 0.25em;
}

ul {
	list-style-type: disc;
	.list-style-image('images/bullet-icon.png');
}

pre, .mw-code {
	line-height: 1.3em;
}

/* Site Notice (includes notices from CentralNotice extension) */
#siteNotice {
	font-size: 0.8em;
}
#firstHeading {
	padding-top: 0;
	margin-top: 0;
	font-size: @content-heading-font-size;
}

/* Icon for Usernames */
#pt-userpage,
#pt-anonuserpage,
#pt-login {
	background-position: left top;
	background-repeat: no-repeat;
	/* SVG support using a transparent gradient to guarantee cross-browser
	 * compatibility (browsers able to understand gradient syntax support also SVG) */
	.background-image-svg('images/user-icon.svg', 'images/user-icon.png');
	padding-left: 15px !important;
}

.redirectText {
	font-size: 140%;
}

.redirectMsg img {
	vertical-align: text-bottom;
}

#bodyContent {
	position: relative;
	width: 100%;
	line-height: 1.5em;
	font-size: @content-font-size;
}

/* mediawiki.notification */
.skin-vector .mw-notification-area {
	font-size: 0.8em;
}
.skin-vector .mw-notification-area-layout {
	top: 7em;
}
.skin-vector .mw-notification {
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.93);
	padding: 0.75em 1.5em;
	border: solid 1px #a7d7f9;
	border-radius: 0.75em;
	-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
}

/* Watch/Unwatch Icon Styling */
#ca-unwatch.icon a,
#ca-watch.icon a {
	margin: 0;
	padding: 0;
	outline: none;
	display: block;
	width: 26px;
	/* This hides the text but shows the background image */
	padding-top: 3.1em;
	margin-top: 0;
	/* Only applied in IE6 */
	margin-top: -0.8em !ie;
	height: 0;
	overflow: hidden;
	.background-image('images/watch-icons.png');
}
#ca-unwatch.icon a {
	background-position: -43px 60%;
}
#ca-watch.icon a {
	background-position: 5px 60%;
}
#ca-unwatch.icon a:hover,
#ca-unwatch.icon a:focus {
	background-position: -67px 60%;
}
#ca-watch.icon a:hover,
#ca-watch.icon a:focus {
	background-position: -19px 60%;
}
#ca-unwatch.icon a.loading,
#ca-watch.icon a.loading {
	.background-image('images/watch-icon-loading.gif');
	background-position: 5px 60%;
}
#ca-unwatch.icon a span,
#ca-watch.icon a span {
	display: none;
}
div.vectorTabs ul {
	.background-image('images/tab-break.png');
	background-position: right bottom;
	background-repeat: no-repeat;
}

/* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
.tipsy {
	font-size: 0.8em;
}

/* Animate between standard and high definition layouts */
body.vector-animateLayout {
	div#content,
	div#footer,
	#left-navigation {
		.transition(margin-left 250ms, padding 250ms;);
	}

	#p-logo {
		.transition(left 250ms);
	}

	#mw-panel {
		.transition(padding-right 250ms);
	}

	#p-search {
		.transition(margin-right 250ms);
	}

	#p-personal {
		.transition(right 250ms);
	}

	#mw-head-base {
		.transition(margin-left 250ms);
	}
}