/* -----------------------------------------------------------------------
 @todo: Remake this. Modern. Get rid of ID selectors, use Sass, alphabetize selectors, make it responsive. Do it already.  2012-11-13

 Matt Stauffer Design Reset
 Adapted from Blueprint CSS Framework
 Created by Matthew Stauffer on 2010-07-29.
 Search for 'base styles' in this file to find the non-reset CSS
----------------------------------------------------------------------- */

/* TODO: Iepngfix.htc */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, summary { 
  display: block;
}
/* CSS Reset
-------------------------------------------------------------- */
html, body, div, span, object, iframe,   h1, h2, h3, h4, h5, h6, p, blockquote, pre,   a, abbr, acronym, address, code,   del, dfn, em, img, q, dl, dt, dd, ol, ul, li,   fieldset, form, label, legend,   table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;  padding: 0;  border: 0; font-weight: inherit;  font-style: inherit;  font-size: 100%; font-family: inherit; vertical-align: baseline;}
body { line-height: 1.5; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
a img { border: none; }

/* Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body { font-size: 100%; color: #333; background: #fff; font-family: 'Cardo', "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;}

/* Text elements
-------------------------------------------------------------- */
p           { margin: 0 0 1.5em; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; border: 2px solid #ddd; padding:3px;}

a:focus, 
a:hover     { color: #000; }
a           { color: #0000aa; text-decoration: underline; }


/* Lists
-------------------------------------------------------------- */
li ul, li ol{ margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }
 ul          { list-style-type: disc; }
 ol          { list-style-type: decimal; }
dl          { margin: 0 0 1.5em 0; }
 dl dt       { font-weight: bold; }
 dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */
th          { font-weight: bold; }
thead th 		{ background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
tr.even td  { background: #e5ecf9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Misc classes
-------------------------------------------------------------- */
.small      { font-size: 80%; }
.large      { font-size: 120%; }
.hide       { display: none; }

.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }
.center		{ text-align: center;}
.alert		{ padding: 5px; background: #ffeeee; border: 1px solid red;}


/* Form fields
-------------------------------------------------------------- */
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }

input[type=text], input[type=password],
input.text, input.title, 
textarea, select { 
  background-color:#fff; 
  border:1px solid #bbb; 
}
input[type=text]:focus, input[type=password]:focus, 
input.text:focus, input.title:focus, 
textarea:focus, select:focus { 
  border-color:#666; 
}

input[type=text], input[type=password],
input.text, input.title,
textarea, select {
  margin:0.5em 0;
}

input.text, 
input.title   { width: 300px; padding:5px; }
input.title   { font-size:1.5em; }
textarea      { width: 390px; height: 250px; padding:5px; }

input[type=checkbox], input[type=radio], 
input.checkbox, input.radio { position:relative; top:.25em; }

form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* Success, notice and error boxes
-------------------------------------------------------------- */
.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }










/* -----------------------------------------------------------------------
 Matt Stauffer Design
 Base styles for all pages
----------------------------------------------------------------------- */

* html #container { height: 1%; } /* For IE. */

body{
	background: url('../../images/bg.gif') repeat-x #f6f1dd;
	text-align: center; 
}


/* Main content sections
------------------------------------*/

#container { 
	text-align: left;
	width: 960px;
	margin: 0 auto;
	position: relative;
}
#head {
	position: relative;
/*	overflow: hidden; */
}
	/* @todo: Rework with new knowledge of best SEO (no more IR) */
	h1#logo {
		width: 300px;
		height: 54px;
		float: left;
		background: url('../../images/logo.gif') no-repeat;
		margin: 14px 0 0 10px; 
		padding: 0;
		text-indent: -5000px; 
		font-size: 1px;
	}
	img.matt {
		display: block;
		position: absolute;
		right: -42px;
		}
#topnav {
	float: left;
	margin-left: 50px;
	width: 60px 0;
}
	#topnav ul {
		margin:0;
		}
	#topnav ul a {
		text-decoration: none;
		font-size: 100%;
		color: #fff;
		display: block;
		padding: 30px 12px 5px 12px;
		list-style-type: none;
		
		text-shadow: 1px 1px rgba(0,0,0,.75);
	}
	nav#topnav ul li {
		display: block;
		float: left;
		height: 68px;
		text-transform: lowercase;
		margin-right: 25px;
	}
	#topnav ul li.selected, #topnav ul li:hover {
		background: #a50000;
		height: 68px;
		box-shadow: 1px 0 1px rgba(0, 0, 0, 0.4);
	  	-moz-box-shadow: 1px 0 1px rgba(0, 0, 0, 0.4);
	  	-webkit-box-shadow: 1px 0 1px rgba(0, 0, 0, 0.4);
	}

#body {
	clear: both;
/*	overflow: auto; */
	padding-top: 6px;
}
#greeting {
	font-size: 195%;
	margin: 30px 100px 30px 20px;
	line-height: 115%;
}
	#greeting a {
		text-decoration: none;
		color: #04586a;
	}
	#greeting a:hover {
		text-decoration: underline;
		color: #a50000;
	}
#featured {
	background: #882507;
	color: #fff;
	padding: 20px;
	overflow: auto;
	border: 1px solid black;
	border-width: 0px 20px;
	margin-bottom: 20px;
}
	#featured a {
		color: #fff;
	}
	#featured .head {
		border-bottom: 1px solid #fff;
		border-bottom: 1px solid rgba(255, 255, 255, .4);
		overflow: auto;
		margin: 0 20px 10px 0;
	}
	#featured  .head h2 {
		width: 200px;
		float: left;
	}
	#featured .head span {
		float: right;
	}
	#featured h3 {
		clear: left;
		font-size: 200%;
		}
	img.portfolio {
		float: right;
		border: 6px solid  rgba(0, 0, 0, 0.4);
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		margin: -6px;
	}
	#featured p, #featured .see_more {
		color: rgba(255,255,255,.88);
	}
	#featured p {
		width: 380px;
		margin-left: 10px;
		line-height: 130%;
		margin-bottom: 10px;
	}
	#featured a.see_more {
		margin-right: 20px;
	}
	
#fpcols {
	margin-top: 35px; 
	display: none;
}
	#fpcols section {
		line-height: 125%;
	}
	#fpcols header h1 {
		text-transform: uppercase;
		color: #04586a;
		font-style: italic;
	}
.three_cols {
	padding: 0 10px;
}
	.three_cols section.column {
		float: left;
		width: 300px;
		margin-left: 20px;
	}
	.three_cols section.column:first-child {/* @todo: Check in IE. */
		margin-left: 0;
	}
	.three_cols header {
		margin-bottom: 4px;
	}
	.three_cols header h1 {
		font-size: 120%;
		letter-spacing: .10em;
		text-shadow: 1px 1px rgba(0,0,0,.20);
		border-bottom: 1px solid rgba(0,0,0,.14);
		}
		
footer {
	background: #001c22;
	color: #fff;
	margin: 10px 0 0 0;
	padding: 20px;
	border-top: 1px solid #fff;
	overflow: auto;
	text-align: left;
	
	   -moz-box-shadow: 0 0 15px rgba(0,0,0,.25);
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,.25); 
	        box-shadow: 0 0 30px rgba(0,0,0,.25);
	}
	
	footer a {
		color: #ff5858; 
		text-decoration: none;
	}
	footer a:hover {
		color: #fff; 
		text-decoration: underline;
	}

	footer .three_cols {
		overflow: auto;
	}
		footer .three_cols h1 { 
			font-family: 'Droid Sans', Arial, Sans-Serif;
		} 
		footer .three_cols header {
			margin: 5px 0 0 0;
			color: #fff;
		}
			footer .three_cols h1 {
				font-size: 135%;
				letter-spacing: 0;
			}
			
	footer .inner {
		margin: 0 auto;
		width: 960px;
	}
	footer .column {
		color: #fff;
		color: rgba(255,255,255,.9);
		font-size: 90%;
	}
		footer .column p, footer .column ul {
			margin-bottom: 8px; 
			padding-left: 10px;
			}
		footer .column section {
			border-bottom: 1px solid rgba(255,255,255,.3);
			margin-bottom: 15px;
		}
	footer .end {
		clear: both; 
		margin: 20px -20px -20px -20px;
		padding: 10px;
		text-align: center;
		
		background: #22515b;
		color: #fff;
		font-style: italic;
		font-size: 75%;
		text-shadow: 1px 1px rgba(0,0,0,.25);
	}


/* Reusable 
------------------------------------*/
a.see_more {
	float: right;
	padding-right: 20px;
}

a.external:hover {
	padding-left: 13px;
	background: url('/images/frame/external_link.gif') no-repeat;
}