@import "variables.less";

// Override from desktop collapsing
#header-container .dropdown,
#header-navigation-container .dropdown {
	display: block !important;
}

/* Extra stuff mobile doesn't need */
.sitesubtitle,
.p-logo,
#content-header ul li#ca-view,
#header-navigation .navigation,
#header-navigation .navigation-tools,
#footer-banner {
	display: none;
}

#header-navigation-container {
	border-bottom: none;
}

#header-navigation {
	padding: 0;
}

/* misc */
#content-header {
	border-bottom: none;
	padding-bottom: 0.125em;
}

#content {
	overflow: auto;
}

#p-personal-extra {
	margin: 1em 1.25em 0 1em;
}

/* Full-width search */
#header-container #p-search {
	float: none;
}

#searchInput-container-container {
	margin-right: -7em;
	width: 100%;
	display: inline-block;
}

#searchInput-container {
	margin-right: 7em;
}

#header-container #p-search #searchInput {
	width: 100%;
	box-sizing: border-box;
}

#searchGoButton {
	width: 6em;
	float: right;
	position: relative;
	z-index: @z-index-stacking-1;
}

/* Full-width thumbnails */
div.thumb {
	float: none;
}

.thumb {
	width: 100%;
	margin: 1em auto;
}

.tright {
	margin-left: 0;

	.thumbinner {
		padding-left: 0;
	}
}

.tleft {
	margin-right: 0;

	.thumbinner {
		padding-right: 0;
	}
}

.thumbinner {
	width: 100% !important;
}

.thumbimage {
	display: block;
	margin: 0 auto 0.5em;
}

/* Keep images from overflowing */
#content a > img {
	height: auto !important;
	max-width: 100% !important;
}

/* Table of contents */
#toc,
.toc,
.mw-warning {
	width: 100%;
}

/* Mobile float cleanup */
.mobileClear,
#content-header .mobileClear {
	display: block;
	clear: both;
}

/* Footer links and icons */
#footer #f-list li#lastmod {
	display: block;
	margin-bottom: 1em;
}

#footer .footer-icons {
	float: none;
	display: inline;
}

#footer-list {
	font-size: 100%;
}

/* Footer */
#footer-navigation {
	font-size: 100%;

	.navigation {
		border-top: solid 1px @bold-border;
	}

	.mw-portlet {
		float: none;
		padding: 1em 0 1.5em;
		border-bottom: solid 1px @bold-border;
	}

	.p-body ul {
		columns: 12em 2;
		-moz-columns: 12em 2;
		-webkit-columns: 12em 2;
	}
}

#return-to-top,
// We could do something fancy with the top nav...
// Or we could just send them to the nav at the bottom.
.client-nojs #p-personal-label,
.client-nojs #jump-to-end {
	display: block;
	content: '';
	width: 35px;
	height: 35px;
	cursor: pointer;
}

#return-to-top {
	background-image: url( images/top-icon.svg );
	margin: 0.5em auto 0.5em;
}

.client-nojs {
	#return-to-top {
		margin: -0.5em auto 1em;
	}

	#jump-to-end {
		background-image: url( images/menu-icon.svg );
		float: left;
		margin: 0.5em 0.5em 0 0;
	}

	#p-personal-label {
		background-image: url( images/user-icon.svg );
		overflow: hidden;
		text-indent: -99999px;
		margin: 0;
	}

	#p-personal {
		position: relative;
		padding: 0.5em 0 0 0.5em;

		.dropdown {
			display: none !important;
			.generic-dropdown();
			top: 40px;
			left: unset;
			right: 0;
		}

		&:hover .dropdown {
			display: block !important;
		}
	}

	#p-personal-container {
		display: flex;
		float: right;
	}

	#p-personal-extra,
	#p-personal {
		float: none;
	}
}
