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

	Title: Style
	Author: Jason Orr
	Date: 2009 

***********************************************************************************************

	1. Global Reset
	
	2. General Elements
	
	3. Layout	
	
	4. Sections		
		
***********************************************************************************************/


/* 1. Global Reset
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, images, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

	ul {
		list-style: none;
	}
	
	table {
		border-collapse: separate; 
		border-spacing: 0;
	}

	caption, th, td {
		text-align: left; 
		font-weight: normal;
	}
	h1, h2, h3, h4, h5, h6 {
		font-weight:normal;
	}
	a, img {
		border: 0;
		text-decoration: none;
	}
	a, img, input {
		outline: 0;
	}

/* 2. General Elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	body {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 70%;
		line-height: 1.5;
		text-align: center;
		color: #666666;
		background: #f2f5f8 url(/images/bg.gif) repeat-x;
		padding-top: 193px;
	}

	hr { 
		display: none;
	}
		
	strong {
		font-weight: bold;
	}
		
	em {
		font-style: italic;
	}
	
	address {
		font-style: normal;
	}

	input, textarea, select {
		font: 1em Arial, Helvetica, sans-serif;
	}

	a {
		color: #f74e77;
		text-decoration: none;
		outline: none;
		cursor: pointer;
	}
	a:hover {
		text-decoration: underline;
	}

	a:visited {}

	a:active {}
	
	ul#dirList {
		list-style: none;
	}
	ul#dirList li {
		background: #fff;
		font-size: 34px;	
		margin-bottom: 15px;
		position: relative;
	}
	ul#dirList li span {
		position: absolute;
		width: 100px;
		top:50%;
		right: 8px;
		font-size: 13px;
		text-align: right;
		display: block;
		height: 13px;
		margin-top: -7px;
		color: #82B3EC;
	}
	ul#dirList li:hover span {
		color: #fff;
	}
	ul#dirList li:hover {
		background: #82B3EC;
	}
	ul#dirList li a {
		color: #000;
		display: block;
		padding: 25px;
		font-weight: bold;
		letter-spacing: -.03em;
	}
	ul#dirList li a:hover {
		text-decoration: none;
		color: #fff;
	}

	p {
		padding-bottom: 8px;
	}
	
	h1 {
		display: block;
		float: right;
		width: 362px;
		height: 23px;
		margin-top:123px;
		font-size: 23px;
		color: #000;
		font-weight: bold;
		letter-spacing: -.03em;
	}

	h3 {
		font-size: 180%;
		padding-bottom: 8px;
		font-weight: bold;
		color: #71a6e8;
		line-height: 1;
	}

	h4 {
		font-size: 140%;
		padding-bottom: 8px;
		color: #71a6e8;
		line-height: 1;
	}
	


/* 3. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	#header {
		width: 900px;
		height: 193px;
		position: absolute;
		top: 0px;
		left: 50%;
		margin-left: -450px;
		text-align: left;
	}
	#header img {
		float: left;
		padding-top: 55px;
	}
	#header #nav {
		float: right;
		width: 362px;
		height: 23px;
		margin-top:123px;
	}
	#header #nav a {
		height: 23px;
		background: #fff url(/images/nav.png) no-repeat 0px 0px;
		display: block;
		float: left;
	}
	#header #nav a.about {
		width: 128px;
		background-position:-0px top;
	}
	#header #nav a.about:hover {
		background-position:0px -25px;
	}
	#header #nav a.work {
		width: 112px;
		background-position:-128px top;
	}
	#header #nav a.work:hover {
		background-position:-128px -25px;
	}
	#header #nav a.contact {
		width: 122px;
		background-position:-240px top;
	}
	#header #nav a.contact:hover {
		background-position:-240px -25px;
	}
	#container {
		width: 900px;
		margin: 0 auto;
		text-align: left;
		font-size: 1.3em;
		position: relative;
	}
	body#projects #container {
		padding-top: 60px;
	}
	body#projects input {
		border: none;
		padding: 15px;
		font-size: 34px;
		border: 0;	
	}
	body#projects input.submit {
		background: #ABEA4F;
		margin-left: 20px;
		color: #fff;
		font-weight: bold;
		padding-left: 10px;
		letter-spacing: -.03em;
		width: 3em;
		*padding:7px 15px;
	}
	body#projects input.passwordField {
		letter-spacing: .5em;
		width: 8em;
		color: #ABEA4F;
		font-weight: bold;
		text-align: center;
	}
	.clearer {
		clear:both;
	}
	.clear {
		float:left;
		width:100%;
		height: 8px;
	}
	a.top {
		text-transform: uppercase;
		font-size: 70%;
		display: block;
		padding: 3px;
		background: #90e63e;
		text-align: center;
		color: #0b141f;
		width: 3em;
		font-weight: bold;
		margin-top: 15px;
	}
	a.top:hover {
		text-decoration: none;
		background: #fbad3d;
	}


/* 4. Sections
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	
	#about {
		padding-top: 60px;
		position: relative;
	}
	img#resume {
		position: absolute;
		right: 0;
		top: 60px;
	}
	#about img {
		padding-bottom: 15px;
	}
	#about p {
		width:650px;
		font-weight: bold;
		font-size: 100%;
	}
	#about div {
		display: none;
	}
	#work {
		padding-top: 60px;
		position: relative;
	}
	#work ul {
		width: 900px;
		overflow: hidden;
	}
	#work ul li {
		width: 900px;
		overflow: visible;
		float: left;
		display: none;
	}
	.workDisplay {
		float: left;
		width: 540px;
		min-height: 200px;
	}
	#moreWork {
		width: 540px;
		min-height: 200px;
		background: transparent url(/images/loader.gif) no-repeat center 76px;
		position: absolute;
		top:141px;
		left: 0;
		display: none;
	}
	#work ul li.eduLink {
		width: 900px;
		display: block;
	}
	#work ul li img {
	}
	#work ul li .caption {
		width: 340px;
		padding: 0 0 0 20px;
		float: left;
	}
		#work ul.relatedImages {
			width: 300px;
		}
		#work ul.relatedImages li {
			width: 274px;
			float: none;
			display: block;
			background: #609FE7;
			padding: 10px;
			color: #fff;
			margin-bottom: 8px;
			cursor: pointer;
		}
		#work ul.relatedImages li:hover {
			color: #D1DFEF;
		}
		#work ul.relatedImages li.first {
			background: #A4C8EF;
		}
	a.next {
		width:61px;
		height: 24px;
		display: block;
		background: transparent url(/images/next.gif) no-repeat;
		float: left;
	}
	a.previous {
		width:93px;
		height: 24px;
		display: block;
		background: transparent url(/images/previous.gif) no-repeat;
		float: left;
	}
	#contact {
		padding-top: 60px;
	}
	#contact img {
		padding-bottom: 15px;
	}
	#contact a, #contact p {
		font-weight: bold;
	}
	#footer p {
		font-size: 90%;
		line-height: 10;
	}
	ul.liveSites li a {
		color: #71A6E8;
	}