/*
 *	Font definitions
 */

@font-face {
	font-family: Playfair;
	src: url('fonts/PlayfairDisplay-Regular.ttf');
}

@font-face {
	font-family: CMUClassical;
	src: url('fonts/cmunci.ttf');
	font-style: italic;
}

@font-face {
	font-family: CMUSerif;
	src: url('fonts/cmunrm.ttf');
}

@font-face {
	font-family: CMUSansSerif;
	src: url('fonts/cmunss.ttf');
}

.test1 {
	font-family: CMUSerif;
}
.test2 {
	font-family: CMUSansSerif;
}
.test3 {
	font-family: CMUClassical;
	font-style: italic;
}

/*
 *	Top level randomness
 */

body {
	padding: 0;
	margin: 0;
}

/*
 *	Primary style guide. Note we use 20% bumps between font
 *	sizes; 1 -> 1.2 -> 1.44 -> 1.728 -> 2.0736. Of course we 
 *	round to 1 decimal point...
 */

h1 {
	font-family: Playfair, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 2em;
}

h2 {
	font-family: Playfair, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.7em;
}

h3 {
	font-family: Playfair, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.4em;
}

h4 {
	font-family: Playfair, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.2em;
}

h5 {
	font-family: Playfair, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1em;
}

/*
 *	Left menu formatting
 */

.subtitle {
	font-family: CMUSansSerif, sans-serif;
}

.centerimage {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}


/*
 *	Responsive layout for our top level columns. We're fundamentally a two
 *  column layout, and we have several modes we operate in depending on the
 *	layout of our overall system. Note that we only go out of a two
 *	column layout mode if we're really really narrow.
 */

/*
 *	Our column layout has three modes: really wide, normal resize, really narrow.
 */

@media (width > 1400px) {
	/* At this point stop growing our contents */
	.inner {
		width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (width > 850px) {
	/* Flexible resizable layout */
	body {
		background: #F6F6F6;
	}

	.inner {
		display: flex;
	}

	.left {
		flex: 25%;
		color: #333333;
	}

	.leftmenu {
		width: 79%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 15%;
		margin-bottom: 9%;
	}

	.right {
		flex: 75%;
		background: #F6F6F6;
	}

	.rightcontent {
		width: 93%;
		margin-top: 3%;
		margin-bottom: 3%;
		margin-left: auto;
		margin-right: auto;
	}

	.leftbutton {
		display: none;
	}
}

@media (width <= 850px) {
	/* We stack and hide stuff */
	body {
		background: white;
	}

	.leftcontents {
		display: none;
	}

	.leftbutton {
		width: 44px;
		height: 44px;
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.inner {
		margin: 0px;
		background: #FFFFFF;
	}

	.left {
		margin: 0px;
		color: #555555;
	}

	.leftmenu {
		margin: 0px;
		padding: 10px 20px;
	}

	.right {
		background: #F6F6F6;
		border-top: 1px solid #EEEEEE;
	}
}

/*
 *	Content rescaling
 */

@media (width < 1200px) {
	.left {
		font-size: 0.85em;
	}
	.right {
		font-size: 0.85em;
	}
}
@media (width < 1050px) {
	.left {
		font-size: 0.75em;
	}
	.right {
		font-size: 0.75em;
	}
}
@media (width <= 850px) {
	.left {
		font-size: 1em;
	}
	.right {
		font-size: 1em;
	}
}

.stuff {
	background: white;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	padding-right: 30px;
}

.leftcontents {
	margin-top: 30px;
}

.menu a {
	text-decoration: none;
}

.section {
	font-family: CMUSerif;
}

.menu {
	font-family: CMUSansSerif;
}

.submenu {
	margin-left: 10pt;
}

.rightcontent img {
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.rightcontent {
	font-family: CMUSerif;
}

.rightcontent img {
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.rightcontent table {
	border-collapse: collapse;
	border-left: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

.rightcontent th, td {
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	border-bottom: 1px solid #EEEEEE;
}

.rightcontent td {
	font-family: CMUClassical;
	font-style: italic;
}

.rightcontent th {
	background: #F6F6F6;
	border-top: 1px solid #EEEEEE;
	font-weight: normal;
}