/* MAIN
///////////////// 

Author: Brad Whitcomb
Site: Digitalstar Studios

Please don't reproduce this design.

///////////////// */

html, body { height: 100%; }

body {
	font-family: "Delicious", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
	font-size: 62.5%;
	color: #FFFFFF;
	letter-spacing: 1px;
	background: #0d0c0a url("../images/stripe_2.png") top center repeat;
	overflow: auto;
}

/* HTML5 Elements */
header, section, footer, aside, nav { display: block }

h1 { font-size: 24px }
h2 { font-size: 22px }
h3 { font-size: 20px }
h4 { font-size: 18px }
h5 { font-size: 16px }
h6 { font-size: 12px }

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

a { 
	color: #FFFFFF; 
	font-weight: bold;
	text-decoration: underline;
}

a.button, button {
	padding: 4px 7px;
	font-weight: normal;
	text-decoration: none;
	border: none;
	background-color: #024439;
	/* A66000 3D623D */
}

a.button:hover, button:hover {
	background-color: #1C3B36;
	/* 183750 */
}

button {
	color: #FFFFFF;
}

h1 {
	text-indent: -9999px;
	height: 1px;
}

abbr { cursor: help; }

/*/////////////////////////////// Layout */

/* Allows everything to stay in place at smaller resolutions. */
div#wrapper {
	width: 100%;
	height: 100%;
	min-width: 970px;
	position: relative;
}

div#container {
	display: none;
}

/*/////////////////////////////// Header */

div#container > header {
	float: left;
	width: 298px;
}

div#container header nav a.button {
	float: right;
	margin: 10px 10px 0 0;
	font-size: 18px;
}

div#container header aside p,
div#container header aside ul li {
	font-size: 16px;
	line-height: 22px;
	text-align: right;
}

div#container header aside p {
	float: right; clear: both;
	margin: 20px 10px 0 0;
}

div#container header aside ul {
	float: left; clear: both;
	margin: 5px 10px 0 0;
}

div#container header aside li {
	margin-bottom: 10px;
}

/*/////////////////////////////// Section */

div#container section {
	float: left;
	margin-left: 10px;
	min-width: 555px;
}

div#container.home section {
	width: 600px;
}

div#container.about section {
	width: 650px;
}

div#container section h2 {
	font-size: 30px;
	line-height: 38px;
	margin: 4px 0 7px 0;
	width: inherit;
}

div#container section p {
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 24px;
}

div#container section p.fine {
	margin-top: 20px;
	font-size: 11px;
	line-height: 16px;
}

div#container section nav {
	width: 100%;
	margin-top: 15px;
}

div#container section nav ul li {
	display: inline;
	font-size: 28px; /* 22 */
	margin-right: 15px;
}

div#container section nav ul li span {
	font-size: 14px;
}

/*/////////////////////////////// About */

div#container.about section div {
	margin-left: 115px;
}

div#container.about section img {
	float: left;
	border: 1px solid #FFFFFF;
}

div#container.about section h3,
div#container.about section h4 {
	margin-bottom: 5px;
}

div#container.about section p {
	margin-top: 10px;
	font-size: 16px;
	line-height: 22px;
}

div#container.about section ul {
	padding-top: 5px;
}

div#container.about section ul li {
	display: inline;
	padding: 3px 5px;
	margin-right: 5px;
	font-size: 15px;
	font-weight: bold;
	color: #191919;
	background-color: #FFFFFF;
}

/*/////////////////////////////// Projects */

div#container.projects header a.button {
	margin-bottom: 20px;
}

/* Github */

div#container.projects div.side_projects {
	margin-top: 5px;
	float: left; clear: both;
}

div#container.projects div.side_projects a,
div#container.projects div.side_projects a:visited { text-decoration: none; }
div#container.projects div.side_projects a:hover { text-decoration: underline; }

div#container.projects div.side_projects h3 {
	margin-bottom: 2px;
	text-align: left;
}

div#container.projects div.side_projects h4,
div#container.projects div.side_projects p { text-align: left; }

div#container.projects div.side_projects h4 {
	font-weight: bold;
	color: orange;
}

div#container.projects div.side_projects h4 span {
	font-size: 14px;
}

div#container.projects div.side_projects p {
	float: left;
	margin: 2px 0 15px 0;
	font-size: 13px;
	line-height: 18px;
}

/* Section */

div#container.projects section h2, 
div#container.contact section h2 {
	margin: 7px 0 10px 0;
}

div#container.projects section p {
	margin-bottom: 15px;
}

div#container.projects section img.most_recent {
	float: right;
}

div#container.projects section li {
	margin-bottom: 5px;
	width: 400px;
	height: 114px;
	border: 4px solid #FFFFFF;
	position: relative;
}

div#container.projects section li a {
	font-weight: normal;
	border: none;
	text-decoration: none;
}

div#container.projects section li h3 {
	display: none;
	position: absolute;
	top: 0; left: 0;
	width: 400px;
	height: 114px;
	font-size: 22px;
	
	color: #FFFFFF;
	line-height: 114px;
	font-weight: normal;
	text-align: center;
	background: url('../images/projects_bg.png') repeat;
}

/*/////////////////////////////// Form */

form {
	display: block;
}

form label {
	display: block;
	margin-bottom: 8px;
	font-size: 18px;
}

form input, form textarea {
	margin-bottom: 15px;
	font-size: 16px;
	padding: 5px;
	border: 1px solid #FFFFFF;
}

form textarea {
	width: 545px;
}

form button {
	font-size: 18px;
}

/* Form Errors */

ul.errors {
	float: right;
	margin: 23px 0 0 0;
	padding: 10px 15px 5px 10px;
	width: 240px;
	color: #FFFFFF;
	background: #A60F0B;
}

ul.errors h3 {
	font-size: 18px;
	margin-bottom: 10px;
}

ul.errors li {
	font-size: 16px; /* 14 */
	margin-bottom: 10px;
}

/*/////////////////////////////// Flash and Notices */

div.flash, p.site_notice, #ie_message {
	position: absolute;
}

div.flash p, p.site_notice, #ie_message {
	margin-bottom: 5px;
	display: block;
	width: auto;
	color: #FFFFFF;
	padding: 5px 10px;
	text-align: center;
	font-size: 14px; /* 12 */
}

div.flash p.notice {
	background-color: #076959;
}

div.flash p.error, p.site_notice, #ie_message {
	background-color: #A60F0B;
}

div.flash {
	top: 10px; left: 10px;
}

p.site_notice {
	top: 10px; right: 10px;
}

div#ie_message {
	display: none;
}

/*/////////////////////////////// Footer */

footer {
	position: absolute;
	right: 10px; bottom: 10px;
}

footer p {
	margin-left: 10px;
	display: inline-block;
	padding: 5px 10px;
	font-size: 13px; /* 11 */
	background-color: #073E6B;
}