html {
	height: 100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	
	background: #f9f9f9;
	color: #000;
	
	position: relative;
	margin: 0;
	min-height: 100%;
	min-width: 360px;
	
	overflow: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

strong {
	font-weight: 700;
}

img {
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

a {
	text-decoration: none;
	color: #5d2b82;
}

a:hover {
	text-decoration: underline;
}

a.Button {
	color: inherit;
	display: inline-block;
	border: 1px solid;
	padding: 12px 24px;
	border-radius: 4px;
	margin: 16px;
}

.Panel {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
}

.sparse {
	line-height: 2;
}

.split {
	margin: 0 -16px;
}

.split:after {
	content: '';
	display: block;
	clear: both;
}

.split-left, .split-right {
	box-sizing: border-box;
	padding: 0 16px;
}

.split-left {
	float: left;
	width: 30%;
}

.split-right {
	float: right;
	width: 70%;
}

@media screen and (max-width: 800px) {
	.split-left, .split-right {
		float: none;
		width: 100%;
	}
}

#Layout {
	background: #fff;
}

.Content {
	max-width: 960px;
	
	padding: 32px;
	margin: 0 auto;
}

.Narrow {
	max-width: 640px;
	margin: 0 auto;
}

a.link-ninja {
	color: inherit;
}

body > header {
	text-align: center;
	border-bottom: 6px solid #5d2b82;
	padding: 16px;
}

#nav-main ul {
	list-style: none;
	padding: 0 16px;
}

#nav-main li {
	display: inline-block;
	padding: 0 16px;
	border-right: 1px solid #ccc;
}

#nav-main li.current, #nav-main li.section {
	font-weight: 400;
}

#nav-main li:last-of-type {
	border: 0;
}

body > footer {
	text-align: center;
}

#FooterPanels {
	margin: 0 -32px;
}

#FooterPanels .Panel {
	width: 25%;
	padding: 32px;
}

#FooterPanels.js .Panel {
	border-right: 1px solid #f2f2f2;
}

#FooterPanels .Panel:last-of-type {
	border: 0;
}

@media screen and (min-width: 961px) {
	#FooterPanels .Panel:nth-of-type(4n+4) {
		border: 0;
	}
}

@media screen and (max-width: 960px) and (min-width: 641px) {
	#FooterPanels .Panel {
		width: 33.333%;
	}
	
	#FooterPanels .Panel:nth-of-type(3n+3) {
		border: 0;
	}
}

@media screen and (max-width: 640px) and (min-width: 481px) {
	#FooterPanels .Panel {
		width: 50%;
	}
	
	#FooterPanels .Panel:nth-of-type(2n+2) {
		border: 0;
	}
}

@media screen and (max-width: 480px) {
	#FooterPanels .Panel {
		width: 100%;
		border: 0;
	}
}