/* Oxygen */
/* Ball State red: rgb(186, 30, 47) */

html, body {
	margin: 0;
	padding: 0;
}

body {
	min-height: 100%;
	background-color: #EEE;
	display: flex;
	align-items: center;
	flex-direction: column;
}

a {
	color: teal;
}


#banner, #footer {
	width: 100%;
	max-width: 70em;
	border-image: linear-gradient(to right, #EEE 0, rgb(186, 30, 47) 40%, rgb(186, 30, 47) 60%, #EEE 100%) 1;
}

#banner {
	height: 20em;
	max-height: 20em;
	padding-top: 2em;

	padding-bottom: 2em;
	border-bottom: thin #888 solid;
	margin-bottom: 1em;

	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;

	font-family: Oxygen, sans-serif;
}

#banner-text {
	flex: 1 1 auto;
	padding: 0 1em 0 2em;
	box-sizing: border-box;
	text-align: center;
}

#banner-name {
	font-size: 3em;
	margin-bottom: 1em;
}

#banner-desc {
	font-size: 1.2em;
	font-family: Oxygen, sans-serif;
}

#desc-title {
	margin-bottom: 0.5em;
}

#banner-picture {
	flex: 0 1 auto;
	box-sizing: border-box;
	padding: 0 2em 0 1em;
	max-height: 100%;
}

#body {
	max-width: 70em;
	width: 100%;

	display: flex;
	justify-content: center;
}

/* unify padding */
#sidebar, #content > p {
	margin: 0;
	padding: 1em;
	box-sizing: border-box;
}

#hamburger {
	display: none;
}

#sidebar {
	position: relative;
	flex: 0 0 20%;
	box-sizing: border-box;
}

.sidebar-item {
	position: relative;
	padding: 0.65em;
	margin-bottom: 0.65em;
	font-size: 1.2em;
	border-left: 1px #BBB solid;
	transition: color 0.4s;

	font-family: Oxygen, sans-serif;
	font-weight: bold;
	color: #555;
}

.sidebar-item.selected {
	border-color: #444;
	color: #222;
}

.sidebar-item.selected:before {
	z-index: 0;
}

.sidebar-item:after, .sidebar-item:before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
}

.sidebar-item:before {
	background: linear-gradient(to right, #BBB 0%, #EEE 40%);
	z-index: 2;
}

.sidebar-item:after {
	background: linear-gradient(to right, #444 0%, #EEE 80%);
	z-index: 1;
}

.sidebar-item:not(.selected):hover {
	color: #222;
	border-color: #444;
	cursor: pointer;
}

.sidebar-item:not(.selected):hover:before {
	z-index: 0;
}

#content {
	position: relative;
	flex: 0 0 75%;
	box-sizing: border-box;
	padding: 0 1em 2em 1em;

	font-family: Oxygen, sans-serif;
	color: #333;
}

#content p, #content h2 {
	margin-bottom: 1.5em;
}

.content-section {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	height: auto;

	display: none;
	opacity: 0;
}

.content-section.visible {
	display: block;
}

.lecture {
	margin-bottom: 2em;
}

.lecture-title {
	font-weight: bold;
	margin-bottom: 0.75em;
}

.lecture-abstract {
	margin-left: 0.75em;
}

#email-inst:before {
	content: '@';
}

#email-inst:after {
	content: '.';
}

#footer {
	width: 100%;
	text-align: center;

	margin: auto 0 1.5em 0;
	padding-top: 1.5em;

	border-top: thin #888 solid;
}

#footer div {
	font-family: Oxygen, sans-serif;
	font-size: 0.9em;
}

/**
 * -Preventing the image from crushing the text (line break at Distinguished and Professor) 
 * -Turning the hamburger menu on
 */
@media only screen and (max-width: 783px) {
	#banner {
		height: auto;
		max-height: none;
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#banner-name {
		font-size: 2em;
		margin-bottom: 0.5em;
	}

	#banner-desc {
		font-size: 1em;
	}

	#banner-text {
		flex: 1 1 auto;
		margin-bottom: 2em;
	}

	#banner-picture{
		max-height: 200px;
	}

	#body {
		display: block;
	}

	#sidebar {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		position: absolute;
		right: 0;

		margin-top: -0.3333em;
		padding: 0;

		z-index: 4;
	}

	#sidebar #sidebar-contents {
		display: none;
		background-color: #EEE;
		border-bottom: thin #BBB solid;
	}

	#sidebar-contents .sidebar-item {
		border-top: thin #BBB solid;
		margin: 0;
		padding-right: 5em;
	}

	#sidebar-contents .sidebar-item.selected {
		border-top: thin #444 solid;
	}

	#sidebar-contents .sidebar-item.selected + .sidebar-item {
		border-top: thin #444 solid;
	}

	#sidebar-contents .sidebar-item:after, #sidebar-contents .sidebar-item:before {
		display: none;
	}

	#sidebar.visible #sidebar-contents {
		display: block;
	}

	#hamburger {
		display: inline-block;
		position: relative;

		font-size: 1em;

		padding: 1em;
		margin-top: 0.75em;
		margin-right: 1em;
	}

	#hamburger:before {
		font-size: 1.5em;
	}

	#hamburger:hover, #sidebar.visible #hamburger {
		cursor: pointer;
		background-color: #BBB;
	}
}