/* 
 * Page layout, including header, footer, side menu, and main content.
 * 
 */

* {
	outline: none;
}

html {
	height:100%;
}

body {
	font-family:'Varela Round',Verdana,Arial,sans-serif;
	position:absolute;
	top:75px;
	right:0;
	left:0;
	bottom:0;
	font-size:15px;
	min-width:350px;
	margin:0;
	overflow:hidden;
}

/*
 * Header
 *
 */

header, footer, aside {
	user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
}

header, footer {
	font-family:'Montserrat',Verdana,Arial,sans-serif;
}

header {
	position:fixed;
	display:block;
	left:0;
	right:0;
	margin:0;
}

header, main > aside {
	line-height:30px;
}

header {
	top:0;
	padding:20px;
	min-height:35px;
	z-index:20;
}

header img.logo {
	max-height:35px !important;
	float:left;
	max-width:10em !important;
}

header nav, header aside {
	display:inline-block;
	font-size:15px;
}

/* firefox glitch */
header nav.bigscreen {
	min-width:40em;
}

header nav.bigscreen {
	min-width:40em;
}

header nav.mobile {
	z-index:1000;
	position:fixed;
	display:none;
	top:0;
	bottom:0;
	left:0;
	right:0;
	padding:20px;
	overflow:auto;
}

header nav a {
	display:inline-block;
	text-decoration:none;
	margin-left:2.5em;
}

header nav a.selected {
	border-bottom:1px solid;
}

header nav.mobile a {
	display:block;
	font-size:17px;
	max-width:11em;
	line-height:40px;
}

header nav.mobile a.sep-bottom {
	padding-bottom:1em;
	margin-bottom:1em;
}

header nav.mobile a[name=closeNav] {
	position:absolute;
	top:10px;
	right:20px;
	width:40px;
	height:40px;
	display:inline-block;
	text-align:right;
}

header nav.mobile a .fa, header nav.mobile a .fas, header nav.mobile a .fab {
	width:40px;
}

header aside, footer aside {
	float:right;
}

header aside a {
	display:inline-block;
	text-decoration:none;
	margin-left:0.5em;
	margin-right:0.5em;
}

header div.dropdown div {
	margin-left:0.5em;
}

header aside div.dropdown div {
	margin-left:-1.5em;
}

header div.dropdown div a {
	margin-left:1.5em;
}

header aside div.dropdown {
	margin-right:2em;
}

/*
 * Main content
 *
 */

main {
	display:block;
	line-height:30px;
	height:100%;
	overflow-y:auto;
	overflow-x:hidden;
}

/* move content over if side menu is showing */
body > aside:not([data-show='0']):not([data-hide='1']) + main {
	margin-left:300px;
}

main > section {
	max-width:1200px;
	margin:auto;
	padding:40px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:center;
	align-content:start;
	min-height:calc(100% - 130px);
}

main.background > section {
	padding-left:20px;
	padding-right:20px;
	width:calc(100% - 40px);
	max-width:100%;
	background-size:100% 1000px;
	background-repeat:no-repeat;
	background-position:top;
}

main > section > h1:not(.copy) {
	width:100%;
	padding:15px;
	margin:0 0 30px 0;
}

main > section > h1.copy {
	display:block;
	margin-right:auto;
	margin-left:20px;
	font-size:35px;
	line-height:35px;
	padding:15px;
}

main > section > div.info, main > section > div.flex > div.info {
	padding:0 30px;
}

/*
 * Side nav
 *
 */

body > aside {
	position:fixed;
	display:block;
	top:75px;
	bottom:0;
	left:0;
	width:300px;
	overflow-y:auto;
	overflow-x:hidden;
	z-index:0;
	line-height:30px;
	scrollbar-width:thin;
}

body > aside nav {
	padding:40px;
	position:relative;
	display:block;
	font-size:17px;
}

body > aside h3 {
	font-family:'Montserrat',Verdana,Arial,sans-serif;
	padding-top:1em;
	padding-left:1em;
	font-size:18px;
	white-space:nowrap;
}

body > aside i[class*=fa-]::before {
	font-size:15px;
}

body > aside h3 i[class*=fa-]::before {
	vertical-align:10%;
}

body > aside nav h3:first-of-type {
	margin:0;
}

body > aside nav h3 {
	padding:0;
	margin-bottom:0;
	overflow:hidden;
	text-overflow:ellipsis;
}

body > aside h3.sep-bottom, body > aside nav h3.sep-bottom {
	padding-bottom:4px;
	margin-bottom:7px;
}

body > aside nav a {
	display:block;
	text-decoration:none;
	width:100%;
	max-width:12em;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

body > aside nav a.section {
	margin-left:10px;
}

/*
 * Footer
 *
 */

footer {
	display:block;
	font-size:14px;
	padding:15px;
	line-height:20px;
}

footer a {
	text-decoration:none;
	display:inline-block;
}

footer aside i.inline {
	max-width:1em;
}

footer aside a:not(:last-child), footer aside span {
	margin-right:1.5em;
}

/*
 * Hide or show based on external variables
 * 
 */

/* Pro user */
html[data-pro='1'] [data-pro='0'], html[data-pro='0'] [data-pro='1'] {
	display:none !important;
}

/* Feed user */
html[data-feed='1'] [data-feed='0'], html[data-feed='0'] [data-feed='1'] {
	display:none !important;
}

/* admin */
html[data-role='2'] [data-admin='0'], html:not([data-role='2']) [data-admin='1'] {
	display:none !important;
}

/* contributor */
html:not([data-role='0']) [data-contributor='0'], html:not([data-role='1']):not([data-role='2']) [data-contributor='1'] {
	display:none !important;
}

/* customer */
html[data-customer='1'] [data-customer='0'], html[data-customer='0'] [data-customer='1'] {
	display:none !important;
}

/* Enterprise user */
html[data-enterprise='1'] [data-enterprise='0'], html[data-enterprise='0'] [data-enterprise='1'] {
	display:none !important;
}

/* logged in/out */
html[data-username=''] [data-auth='1'], html:not([data-username='']) [data-auth='0'] {
	display:none !important;
}

/* crawler */
html[data-crawler='1'] [data-crawler='0'], html[data-crawler='0'] [data-crawler='1'] {
	display:none !important;
}

/* theme */
html[data-theme=light] [data-theme=dark] {
	display:none !important;
}

html[data-theme=dark] [data-theme=light] {
	display:none !important;
}

/* hide/show */
[data-hide='1'], [data-hide='true'], [data-show]:not([data-show='1']):not([data-show='true']) {
	display:none !important;
}

/* 
 * Layout on bigger screens only
 * 
 */

@media only screen and (min-width:1321px) {
	
	.midscreen:not(.bigscreen), .smallscreen:not(.bigscreen) {
		display:none !important;
		height:0 !important;
		margin:0 !important;
		padding:0 !important;
		border:none !important;
		outline:none !important;
	}
	
}

/*
 * Layout on medium/smaller screens
 *
 */

@media only screen and (min-width:901px) and (max-width:1320px) {
	
	.bigscreen:not(.midscreen), .smallscreen:not(.midscreen) {
		display:none !important;
		height:0 !important;
		margin:0 !important;
		padding:0 !important;
		border:none !important;
		outline:none !important;
	}
	
	header nav.midscreen a i[class*=fa-] {
		text-align:center;
	}
	
	main > section {
		min-height:calc(100% - 190px);
	}
	
	footer {
		padding:25px;
	}
	
	footer aside {
		float:none;
		margin-top:20px;
	}
	
}

@media only screen and (max-width:900px) {
	
	body {
		top:0;
		overflow-y:auto;
	}
	
	header, footer {
		position:static;
		display:block;
		padding:10px;
	}
	
	header img.logo {
		max-height:35px !important;
	}
	
	header nav a {
		margin-left:25px;
	}
	
	header aside a {
		margin-right:0px;
	}
	
	footer {
		padding:25px;
	}
	
	footer aside {
		float:none;
		margin-top:20px;
		line-height:40px;
	}
	
	main {
		position:relative;
		display:block;
		overflow-y:visible;
		height:auto;
	}
	
	body > aside:not([data-show='0']):not([data-hide='1']) + main {
		margin-left:auto;
	}
	
	main > section {
		min-height:500px;
		padding:7px 15px;
		top:0;
	}
	
	main.background > section {
		background-size:1000px 1000px;
	}
	
	main > section > h1 {
		padding:10px;
	}
	
	main > section > h1.copy {
		margin-left:0;
	}
	
	main > section > div.info, main > section > div.flex > div.info {
		padding:0;
	}
	
	body > aside {
		position:relative;
		display:block;
		width:100%;
		top:auto;
		bottom:auto;
		max-height:15.25em;
		overflow-y:auto;
		border-bottom:1px solid;
		box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 0.2);
		padding-bottom:20px;
	}
	
	body > aside nav {
		top:0;
		bottom:0;
		padding:20px;
	}
	
	body > aside nav a {
		display:inline-block;
		max-width:9em;
		white-space:nowrap;
	}
	
	.midscreen:not(.smallscreen), .bigscreen:not(.smallscreen) {
		display:none !important;
		height:0 !important;
		margin:0 !important;
		padding:0 !important;
		border:none !important;
		outline:none !important;
	}
	
}