* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
header,
footer,
section,
aside,
nav,
article {
	display: block;
}
header {
	width: 100%;
	z-index: 90;
	left: 0;
	top: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
	header.fix,
	header.shrink {
		position: fixed;
	}
	header .inner {
		position: relative;
		margin: 0 auto;
		max-width: var(--page-width);
		padding: 20px;
	}
	header nav#menu {
		width: 100%;
	}
		header nav#menu .inner {
			position: relative;
			margin: 0 auto;
			max-width: var(--page-width);
			padding: 0 20px;
		}
	header #loginInfo {
		width: 100%;
	}
		header #loginInfo .inner {
			position: relative;
			margin: 0 auto;
			max-width: var(--page-width);
			padding: 0 20px;
		}
	header .toolbar {
		width: 100%;
	}
		header .toolbar .inner {
			position: relative;
			margin: 0 auto;
			max-width: var(--page-width);
			padding: 0 20px;
		}
	
	header.maintenance {
		background-color: var(--color-yellow);
	}
section.content {
	z-index: 1;
	background-color: var(--color-background);
	max-width: var(--page-width);
	margin: 0	auto;
	min-height: 100vh;
	padding: 20px 20px 62px 20px;
}
	section.content.shrink,
	section.content.fix {
		padding-top: 196px;
	}
	section.content.shrink.loggedIn,
	section.content.fix.loggedIn {
		padding-top: 225px;
	}
#mobile-header,
#mobile-logout,
#mobile-switch {
	display: none;
}
nav ul {
	list-style-type: none;
	margin: 0;
}
nav li {
	display: inline-block;
	position: relative;
}
	nav ul ul {
		display: none;
		position: absolute;
		z-index: 100;
		top: 34px;
		left: 0;
		min-width: 100%;
	}
		nav ul ul li {
			position: relative;
			width: 100%;
		}
			nav ul li:hover > ul {
				display: inline-block;
			}
		nav ul ul ul {
			top: 0;
			left: 100%;
		}
nav a,
nav p {
	display: inline-block;
	margin: 0;
	padding: 10px 25px;
	line-height: 1em;
	text-decoration: none;
}
	nav a.tight,
	nav p.tight {
		min-width: inherit;
		padding: 10px;
	}
		nav li ul a,
		nav li ul p {
			display: block;
			white-space: nowrap;
			width: 100%;
			padding: 10px 25px;
			line-height: 18px;
			text-align: left;
		}
#loginInfo .inner,
#navToolbar .inner {
	text-align: left;
}
	#loginInfo .inner ul,
	#navToolbar .inner ul {
		list-style-type: none;
		margin: 0;
	}
	#loginInfo .inner li {
		display: inline-block;
		margin-right: 20px;
		padding: 6px 0;
	}
	#loginInfo .inner a {
		text-decoration: none;
	}
	
#mobile-switch-div {
	display: none;
}
#userNotes h3,
#songComments h3,
#changelogAddPopup h3,
#userNotes h4,
#songComments h4,
#changelogAddPopup h4 {
	margin-bottom: 10px;
}
#userNotes p,
#songComments p,
#changelogAddPopup p {
	display: block;
	margin: 0 0 10px 0;
	padding: 0;
}
#userNotes p:last-child,
#songComments p:last-child,
#changelogAddPopup p:last-child {
	margin-bottom: 0;
}
#userNotes em,
#songComments em,
#changelogAddPopup em {
	display: block;
	margin-top: 20px;
	font-size: 80%;
}
footer {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 90;
	padding: 15px 0;
	clear: both;
	text-align: right;
}
	footer .inner {
		position: relative;
		margin: 0 auto;
		max-width: var(--page-width);
		padding: 0 20px;
	}
	footer .leftSide {
		display: inline-block;
		float: left;
	}
	footer .rightSide {
		display: inline-block;
	}

@media only screen and (max-width: 1200px) {
	table.list td i,
	table.list th i {
		margin-top: 3px;
		margin-bottom: 3px;
	}
}