$purple: #563d7c;
$gold: #fdd017;
$lightgray: #f8f8f8;
$midgray: #969499;
$darkgray: #4b4a4d;
$text: #252526;
$shadowgray: rgba(0, 0, 0, .8);

// size constants
$pad-s: 2px;
$pad-m: 8px;
$pad-l: 16px;
$pad-xl: 36;

body {
	color: $text;
	font-family: sans-serif;
	background-color: $lightgray;
	padding-bottom: 0px;
	margin: 0px $pad-l;
}

.nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;;
	box-sizing: border-box;
	padding: 16px;
	background-color: $purple;
	color: $gold;
	box-shadow: 0px 3px 12px $shadowgray;
	z-index: 10;

	h3 {
		font-weight: lighter;
		font-size: 16px;
		margin: 0;
	}

	a {
		float: right;
		color: $gold;
		text-decoration: none;
		font-size: 16px;
		margin-left: $pad-m;
	}
}

.pull-right {
	float: right;
	margin: $pad-l;
}

.container {
	margin-bottom: $pad-xl;

	& > div {
		margin-left: auto;
		margin-right: auto;
		margin-top: 64px;
		max-width: 960;
		background-color: #fff;
		border: solid 1px $midgray;
		box-shadow: 0px 3px 9px lighten($shadowgray, 20%);
	}

}

.btn {
	border-radius: $pad-s;
	border: 1px solid $midgray;
	color: $purple;

	display: inline-block;
	padding: $pad-m $pad-l;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	

	&:hover {
		background-color: lighten($purple, 35%);
	}
}