body {
	padding:0;
	margin:0 auto;
	width:720px;
}

#sidebar {
	margin:0;
	padding:0;
	background-color:#848aa5;
	position:fixed;
	top:42px;
	margin:auto;
	left:0;
	right:0;
	width:720px;
	height:38px;
	overflow:hidden;
	z-index:1;
}

#sidebar a {
	display:block;
	color:#e7eaf5;
	padding:10px 13px;
	text-decoration:none;
	float:left;
}
 
#sidebar a.active {
	background-color:#cfd5ea;
	color:#384060;
}

#sidebar a:hover:not(.active) {
	color:#384060;
}

div.container {
	position:relative;
	margin:auto;
	width:720px;
	top:80px;
	left:0;
	right:0;
	padding-bottom:40px;
}

.header {
	z-index:1;
	background-color:#384060;
	font-size:1.3em;
	white-space:nowrap;
	padding:6px 0;
	position:fixed;
	width:720px;
	margin:auto;
	left:0;
	right:0;
	top:0;
	height:30px;
}
.header img {
	padding-left:6px;
	vertical-align:middle;
}
.header a {
	color:#ffffff;
	vertical-align:middle;
}
.header a:hover {
	text-decoration:none;
}
.header .hamburger {
	display:none;
	position:absolute;
	right:6px;
	top:6px;
	width:24px;
}
.header .hamburger svg {
	height:30px;
	width:24px;
}
.header .hamburger svg line {
	stroke:#ffffff;
	stroke-width:2;
}

.footer {
	background-color:#384060;
	position:fixed;
	width:720px;
	margin:auto;
	left:0;
	right:0;
	bottom:0;
	height:24px;
}
.footer div.schedule {
	position:absolute;
	left:4px;
	height:16px;
	width:320px;
	color:#ffffff;
	font-size:9px;
	top:2px;
}
.footer div.social {
	float:right;
	padding:4px;
}
.footer img.twitter {
	height:16px;
	width:16px;
}
.footer img.reddit {
	height:16px;
	width:16px;
}


@media screen and (max-width:720px) {
	#sidebar {
		position:relative;
		z-index:0;
	}
	#sidebar a {float:left;}
	div.container {
		top:42px;
		padding-bottom:initial;
	}
	.header {
		position:absolute;
	}
	.footer {
		position:relative;
		height:24px;
		margin-top:16px;
	}
}
@media screen and (max-width:720px) {
	body, #sidebar, div.container, .header, .footer {
		width:100%;
	}
}
@media screen and (max-width:460px) {
	#sidebar {
		width:200px;
		height:auto;
		position:absolute;
		right:0;
		left:auto;
		z-index:1;
	}
	#sidebar a {
		text-align:right;
		float:none;
	}
	#sidebar.collapsed {
		display:none;
	}

	.header .hamburger {
		display:block;
	}
	.header {
		border-bottom:solid 1px #848aa5;
	}
	.optional {
		display:none;
	}
}
