// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
// The rules here should only define the layout, not color or typography.

@import 'mediawiki.mixins.less';

@media screen {
	.mw-body,
	#mw-data-after-content {
		margin-left: 10em;
	}

	.mw-indicators {
		float: right;
		z-index: @z-index-indicators;
	}

	.mw-body-content {
		position: relative;
		z-index: @z-index-base;
	}

	/* Head */
	#mw-page-base {
		height: 5em;
	}

	#mw-head-base {
		margin-top: -5em;
		margin-left: 10em;
		height: 5em;
	}

	/* Hide, but keep accessible for screen-readers */
	#mw-navigation h2 {
		position: absolute;
		top: -9999px;
	}

	#mw-head {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
	}

	/* 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;
	}

	#right-navigation {
		float: right;
		margin-top: 2.5em;
	}

	#mw-panel {
		position: absolute;
		top: 0;
		width: 10em;
		left: 0;
	}

	#footer {
		margin-left: 10em;
		margin-top: 0;
	}
}

/* Vector screen styles for high definition displays. These rules cross the above components and are
   grouped together here only for the sake of the media query common to each. */
@media screen and ( min-width: 982px ) {
	.mw-body,
	#mw-head-base,
	#left-navigation,
	#mw-data-after-content,
	#footer {
		margin-left: 11em;
	}

	.mw-body {
		padding: 1.25em 1.5em 1.5em 1.5em;
	}

	#footer {
		padding: 1.25em;
	}

	#mw-panel {
		padding-left: 0.5em;
	}

	#p-search {
		margin-right: 1em;
	}

	#p-personal {
		right: 1em;
	}
}