/*----------------------------------------------------------------------------------

Data
----
Created by:  Dwight House
Created for: Dwight Design (http://dwightdesign.com/)
Copyright:   Styles © Dwight House 2008-2009
             Reuse allowed, no credit required (but it would be nice)
Purpose:     Contains resets, text and image styling, and layout.

Colors Used
-----------
#fff    - White - Footer Text Color
#eee    - Very Light Grey - Page Content Supportive Color, Input Backgrounds
#ddd    - Light Grey - Even Table Row Background Color
#ccc    - Medium Light Grey - Subpage Navigation Supportive Color, Table Borders, Horizontal Rule Color, Post Title Underlines, Comments Area Borders, Search Input Text Color
#cb2b33 - Dark Red - Hyperlink Active Color
#bebebe - Medium Grey - Color Line Between Sidebar and Blog Content, Comment Input Borders, Search Input Border
#888    - Grey - Footer Supportive Color
#5a4eff - Blue - Hyperlink Color
#404040 - Dark Grey - HTML Supportive Color, Subpage Navigation Hover Supportive Color
#279831 - Dark Green - Hyperlink Visited Color
#222    - Almost Black - Default Text Color, Subpage Navigation Active Supportive Color, Post Title Hyperlinks
#000    - Black - Layout Edges

Contents
--------
Search for "Sec #" to find given section, where # is the section number
Sec 01 ........ Simplified Reset
Sec 02 ........ Base Layout
Sec 03 ........ Header
Sec 04 ........ Main Navigation
    Sec 04.01 - Link Styles
Sec 05 ........ Body [Contains Sub-Navigation and Content for Pages]
    Sec 05.01 - Subpage Links
    Sec 05.02 - Info Area
Sec 06 ........ Content [General Styles Applying to Pages and Posts]
    Sec 06.01 - Headers
    Sec 06.02 - Paragraphs
    Sec 06.03 - Blockquotes
    Sec 06.04 - Hyperlinks
    Sec 06.05 - Unordered Lists
    Sec 06.06 - Ordered Lists
    Sec 06.07 - Preformatted Text [Code]
    Sec 06.08 - Tables
    Sec 06.09 - Images
    Sec 06.10 - Horizontal Rules
    Sec 06.11 - Objects
    Sec 06.12 - Sample Posts
Sec 07 ........ Blog
Sec 08 ........ Blog Sidebar
Sec 09 ........ Post
Sec 10 ........ Page Progression Links
Sec 11 ........ Comments
Sec 12 ........ Footer
Sec 13 ........ Showcase Area
Sec 14 ........ Two Column Structure
Sec 15 ........ Gallery
Sec 16 ........ Search
Sec 17 ........ Other
Sec 18 ........ Resume Styles

----------------------------------------------------------------------------------*/


/* Sec 01 - Simplified Reset */
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, input, address, a, img
{
	margin:0;
	padding:0;
	border:0;
	outline:0;
}


/* Sec 02 - Base Layout */
body
{
	background:url(images/binaryBG.png) #404040;
	font-size:76%;
	font-family:Helvetica, Verdana, Arial, Sans-Serif;
	color:#222;
}

#document
{
	margin:0 auto;
	padding:30px 0;
	width:900px;
}

#page
{
	padding:30px 0 0 0;
}


/* Sec 03 - Header */
#header
{
	position:relative;
	overflow:hidden;
	height:138px;
}

	#pixels
	{
		padding:0 1px;
		position:relative;
		height:138px;
	}
	
		#pixels .p
		{
			position:absolute;
			width:34px;
			height:21px;
		}
	
	#header img
	{
		position:absolute;
		top:35px;
		left:45px;
	}
	
	#header a
	{
		text-decoration:none;
	}


/* Sec 04 - Main Navigation */
#navigation
{
	position:relative;
	width:900px;
	height:50px;
	background:url(images/navigationButtons.gif) no-repeat;
	overflow:hidden;
}

	#navigation li
	{
		display:inline;
	}
	
	#navigation a
	{
		padding-top:50px;
		float:left;
		width:151px;
		background:url(images/navigationButtons.gif) no-repeat;
	}
	
		/* Sec 04.01 - Link Styles */
		#navigation .nav_portfolio a
		{
			background-position:0 0;
		}
		
			#navigation .nav_portfolio a:hover
			{
				background-position:0 -50px;
			}
			
			#navigation .nav_portfolio a:active
			{
				background-position:0 -100px;
			}
		
		#navigation .nav_resume a
		{
			background-position:-151px 0;
		}
		
			#navigation .nav_resume a:hover
			{
				background-position:-151px -50px;
			}
			
			#navigation .nav_resume a:active
			{
				background-position:-151px -100px;
			}
		
		#navigation .nav_projects a
		{
			background-position:-302px 0;
		}
		
			#navigation .nav_projects a:hover
			{
				background-position:-302px -50px;
			}
			
			#navigation .nav_projects a:active
			{
				background-position:-302px -100px;
			}
		
		#navigation .nav_blog a
		{
			background-position:-453px 0;
		}
		
			#navigation .nav_blog a:hover
			{
				background-position:-453px -50px;
			}
			
			#navigation .nav_blog a:active
			{
				background-position:-453px -100px;
			}
		
		#navigation .nav_contact a
		{
			background-position:-604px 0;
		}
		
			#navigation .nav_contact a:hover
			{
				background-position:-604px -50px;
			}
			
			#navigation .nav_contact a:active
			{
				background-position:-604px -100px;
			}
		
		#navigation .nav_home a
		{
			background-position:-755px 0;
			width:145px;
		}
		
			#navigation .nav_home a:hover
			{
				background-position:-755px -50px;
			}
			
			#navigation .nav_home a:active
			{
				background-position:-755px -100px;
			}


/* Sec 05 - Body [Contains Sub-Navigation and Content for Pages] */
#body
{
	padding:1em;
	border-bottom:1px solid #000;
	background:url(images/mainBGs.gif) repeat-y #eee;
	overflow:auto;
}

	#body h1#title
	{
		padding:0 0 10px 0;
		color:#000;
		font-size:3.5em;
		text-align:center;
	}
	
	/* Sec 05.01 - Subpage Links */
	#body .subpages
	{
		margin:0 0 1em 0;
		padding:8px 0 5px 0;
		border:1px solid #000;
		background:url(images/subpageNavBG.png) repeat-x #ccc;
	}
	
		#body .subpages ul
		{
			text-align:center;
		}
	
		#body .subpages li
		{
			padding:0 1px 0 0;
			font-size:1.2em;
			display:inline;
		}
		
		#body .subpages a
		{
			padding:8px 15px 5px 15px;
			border:0;
			background:url(images/subpageNavBG.png) repeat-x #ccc;
			color:#000;
			text-decoration:none;
			font-weight:bold;
		}
		
			#body .subpages a:hover
			{
				background-position:0 -100px;
				background-color:#404040;
				color:#fff;
				text-shadow:#000 0 0 5px;
			}
			
			#body .subpages a:active
			{
				background-position:0 -200px;
				background-color:#222;
				color:#fff;
				text-shadow:#aaa 0 0 5px;
			}
	
	/* Sec 05.02 - Info Area */
	#body #info
	{
		clear:both;
		font-size:0.8em;
	}
	
		#body #info a
		{
			padding:1px 2px;
			color:#5a4eff;
			text-decoration:none;
		}


/* Sec 06 - Content [General Styles Applying to Pages and Posts] */
#content
{
	font-size:1.2em;
	overflow:hidden;
}

	/* Sec 06.01 - Headers */
	#content h1, #content h2, #content h3, #content h4, #content h5, #content h6
	{
		font-weight:bold;
	}
	
		#content h1
		{
			font-size:2.6em;
		}
		
		#content h2
		{
			font-size:2em;
		}
		
		#content h3
		{
			font-size:1.5em;
		}
		
		#content h4
		{
			font-size:1.2em;
		}
		
		#content h5
		{
			font-size:0.9em;
		}
		
		#body h6
		{
			font-size:0.7em;
		}
		
		#content h1.center, #content h2.center, #content h3.center, #content h4.center, #content h5.center, #content h6.center
		{
			text-align:center;
		}
	
	/* Sec 06.02 - Paragraphs */
	#content p
	{
		padding:0 0 1.2em 0;
		line-height:1.3em;
		text-align:justify;
	}
	
		#content p.center
		{
			text-align:center;
		}
	
	/* Sec 06.03 - Blockquotes */
	#content blockquote
	{
		padding:0 0 0.7em 2em;
		background:url(images/quotes.gif) no-repeat;
		font-family:Times, Sans-Serif;
		font-size:1.5em;
		font-weight:bold;
		font-style:italic;
		text-align:justify;
	}
	
		#content blockquote p
		{
			padding:0;
		}
	
	/* Sec 06.04 - Hyperlinks */
	#content a
	{
		padding:1px 2px;
		color:#5a4eff;
		text-decoration:none;
	}
		
		#content a:hover
		{
			border-bottom:1px solid #5a4eff;
		}
			
		#content a:visited
		{
			border-bottom:1px solid #279831;
			color:#279831;
		}
		
		#content a:active
		{
			border-bottom:1px solid #cb2b33;
			color:#cb2b33;
		}
		
		#content a.nostyle, #content a.nostyle:active:hover
		{
			padding:0;
			border:none;
		}
	
	/* Sec 06.05 - Unordered Lists */
	#content ul
	{
		padding:0 0 1.2em 1.5em;
		line-height:1.3em;
		list-style:square;
	}

		#content ul ul
		{
			padding:0 0 0 1.5em;
		}
		
		#content ul ol
		{
			padding:0 0 0 1.5em;
		}
	
	/* Sec 06.06 - Ordered Lists */
	#content ol
	{
		padding:0 0 1.2em 2em;
		line-height:1.3em;
		list-style:decimal;
	}

		#content ol ol
		{
			padding:0 0 0 1.5em;
			list-style:lower-latin;
		}
		
		#content ol ul
		{
			padding:0 0 0 1.5em;
		}
	
	/* Sec 06.07 - Preformatted Text [Code] */
	#content pre
	{
		margin:0 0 1em 0;
		padding:1em;
		border:1px solid #ccc;
		font-size:14px;
		overflow:auto;
	}
	
		#content pre.cpp
		{
			background:url(images/code/cpp.gif) center 5px no-repeat;
		}
		
		#content pre.csharp
		{
			background:url(images/code/csharp.gif) center 5px no-repeat;
		}
		
		#content pre.glsl
		{
			background:url(images/code/glsl.gif) center 5px no-repeat;
		}
		
		#content pre.javascript
		{
			background:url(images/code/javascript.gif) center 5px no-repeat;
		}
		
		#content pre.css
		{
			background:url(images/code/css.gif) center 5px no-repeat;
		}
		
		#content pre.htmlcss
		{
			background:url(images/code/htmlcss.gif) center 5px no-repeat;
		}
		
		#content pre.html
		{
			background:url(images/code/html.gif) center 5px no-repeat;
		}
	
	/* Sec 06.08 - Tables */
	#content table
	{
		margin:0 0 1em 0;
		border:1px solid #ccc;
		width:100%;
	}
	
		#content table th
		{
			padding:5px;
			border-bottom:1px solid #ccc;
			text-align:left;
			font-weight:bold;
		}
	
		#content table td
		{
			padding:5px;
			text-align:left;
			vertical-align:top;
		}
	
	/* Sec 06.09 - Images */
	#content img
	{
		padding:0 10px 1em 0;
		display:block;
		float:left;
		max-width:100%;
	}
	
		#content img.left
		{
			padding:0 10px 1em 0;
			clear:left;
			float:left;
		}
		
		#content img.right
		{
			padding:0 0 1em 10px;
			clear:right;
			float:right;
		}
		
		#content img.center
		{
			margin:0 auto;
			padding:0;
			display:block;
			float:none;
		}
		
		#content img.nostyle
		{
			margin:0;
			padding:0;
			float:none;
			display:inline;
			max-width:none;
		}
		
		#content img.top
		{
			padding-top:1em;
		}
		
		#content img.full
		{
			margin:0 auto 0 0;
			padding:0 0 1em 0;
			float:none;
		}
	
	/* Sec 06.10 - Horizontal Rules */
	#content hr
	{
		margin:0 0 1em 0;
		border:none;
		border-bottom:1px solid #ccc;
	}
	
	/* Sec 06.11 - Objects */
	#content object
	{
		display:block;
	}
	
		#content object.center
		{
			margin:0 auto;
		}
	
	/* Sec 06.12 - Sample Posts */
	#content .samplePost
	{
		padding:0 0 10px 0;
	}
	
		.samplePost .inner
		{
			padding-left:5px;
			border-left:3px solid #ccc;
		}
	
			.samplePost .inner:hover
			{
				border-left:3px solid #444;
			}
		
		#content .samplePost h3
		{
			padding-bottom:3px;
		}
		
		#content .samplePost a, #content .samplePost a:visited, #content .samplePost a:active
		{
			color:#5a4eff;
			border:none;
		}
		
			#content .samplePost a:hover
			{
				border-bottom:1px solid #5a4eff;
			}
		
		#content .samplePost p
		{
			padding-bottom:0;
			color:#444;
		}
		
			#content .samplePost p.categories
			{
				font-size:0.9em;
			}
			
			#content .samplePost p.date
			{
				font-size:0.9em;
				float:right;
			}


/* Sec 07 - Blog */
#blog
{
	padding:5px 15px 15px 15px;
	border-bottom:1px solid #000;
	background:url(images/mainBGs.gif) -900px 0 repeat-y #eee;
	overflow:auto;
}

	#blog h1#title
	{
		padding:5px 0 10px 0;
		color:#000;
		font-size:2.5em;
		text-align:center;
	}

	#blog #content
	{
		width:670px;
		float:left;
	}


/* Sec 08 - Blog Sidebar */
#sidebar
{
	width:175px;
	float:right;
	font-size:1.3em;
}

	#sidebar ul
	{
		list-style:none;
	}
	
		#sidebar li
		{
			padding:10px 0 0.2em 0;
			border-bottom:1px solid #ccc;
			font-weight:bold;
		}
		
			#sidebar li li
			{
				padding:0.2em 0 0 0;
				border:0;
				font-weight:normal;
			}
	
	#sidebar ul ul
	{
		padding:0 0 0.5em 1em;
	}
	
	#sidebar a
	{
		padding:1px 2px;
		color:#5a4eff;
		text-decoration:none;
	}
		
		#sidebar a:hover
		{
			border-bottom:1px solid #5a4eff;
		}
			
		#sidebar a:visited
		{
			border-bottom:1px solid #279831;
			color:#279831;
		}
		
		#sidebar a:active
		{
			border-bottom:1px solid #cb2b33;
			color:#cb2b33;
		}
		
		#sidebar a.nostyle, #sidebar a.nostyle:active:hover
		{
			border:none;
		}


/* Sec 09 - Post */
.post
{
	padding:10px 0;
}

	.post .postTitle
	{
		border-bottom:1px solid #ccc;
	}
	
		.post .postTitle a
		{
			border:0 !important;
			color:#222 !important;
		}
	
	.post .postContent
	{
		padding:5px 0 0 0;
	}
	
	.post .postMeta
	{
		clear:both;
	}
	
		.post .postMeta p
		{
			padding:0.2em 0 !important;
			font-size:0.8em;
		}
		
			.post .postMeta p.date
			{
				float:right;
			}


/* Sec 10 - Page Progression Links */
.pageProgression
{
	margin-top:10px;
	padding:8px 0;
	border-top:1px solid #ccc;
	font-size:1.2em;
}

	.pageProgression .futureColumn
	{
		float:right;
	}


/* Sec 11 - Comments */
#comments
{
	padding:1em;
	border:1px solid #ccc;
}

	#comments input
	{
		padding:5px;
		border:1px solid #bebebe;
		font-family:Helvetica, Verdana, Arial, Sans-Serif;
		font-size:1.1em;
	}
	
		#comments h3
		{
			padding:0 0 10px 0;
		}
	
		#comments input.submitComment
		{
			padding:10px;
			font-size:1.1em;
			font-weight:bold;
			color:#222;
			background:#eee;
		}
		
			#comments input.submitComment:hover
			{
				border:1px solid #bebebe;
				color:#000;
				background:#ccc;
				cursor:pointer;
			}
		
		#comments textarea
		{
			padding:5px;
			border:1px solid #bebebe;
			font-family:Helvetica, Verdana, Arial, Sans-Serif;
			font-size:1.1em;
		}


/* Sec 12 - Footer */
#footer
{
	padding:1em;
	border-bottom:1px solid #000;
	background:url(images/mainBGs.gif) -1800px 0 repeat-y #888;
}

	#footer p
	{
		color:#fff;
		text-align:center;
	}
	
	#footer a
	{
		color:#fff;
		text-decoration:none;
	}
	
		#footer a:hover
		{
			cursor:text;
		}


/* Sec 13 - Showcase Area */
.showcase300
{
	padding:0 0 1em 0;
	position:relative;
	clear:both;
	width:100%;
	overflow:auto;
}

	.showcase300 .image
	{
		float:left;
		width:320px;
	}
	
		#content .showcase300 .image a
		{
			border:none;
		}
	
		#content .showcase300 .image img
		{
			margin:0;
			padding:0;
			float:none;
			display:inline;
		}
	
	.showcase300 .text
	{
		margin:0 0 0 320px;
	}


/* Sec 14 - Two Column Structure */
.twoColumns
{
	clear:both;
	width:100%;
	overflow:auto;
}

	.twoColumns .leftColumn
	{
		float:left;
		width:48%;
	}
	
	.twoColumns .rightColumn
	{
		float:right;
		width:48%;
	}


/* Sec 15 - Gallery */
.gallery
{
	overflow:auto;
}

	#content .gallery a
	{
		padding:0;
		border:none;
	}
	
	.gallery br
	{
		display:none;
	}


/* Sec 16 - Search */
#searchForm
{
	margin:0 auto;
	width:170px;
}

	#searchForm div
	{
		padding:10px 0 0 0;
	}

	#searchForm .searchButton
	{
		margin:2px 0;
		float:right;
		width:18px;
		height:26px;
		background:url(images/searchArrow.gif) no-repeat;
		cursor:pointer;
	}
	
	#searchForm .searchButton:hover
	{
		background-position:0 -26px;
	}
	
	#searchForm .searchInput
	{
		padding:5px;
		border:1px solid #bebebe;
		float:left;
		width:135px;
		background:#ccc;
		font-size:1.1em;
		color:#222;
	}


/* Sec 17 - Other */
/* Table even rows background color */
.e
{
	background:#ddd;
}

/* Arbitrary indention. Only use when must */
.indent
{
	padding:0 0 0 2em;
}

/* Only use when you must. Clears past any floated element. */
.clear
{
	clear:both;
}

/* Make the anchor links really small */
#content div.anchor
{
	line-height:0;
	height:0;
}


/* Sec 18 - Resume */
#content .resume
{
	margin-bottom:1em;
	padding:2em;
	border:1px solid #ccc;
	background:#fff;
	color:#000;
}

	#content .resume table
	{
		margin:0;
		padding:0;
		border:0;
	}
	
		#content .resume table td
		{
			padding:0;
		}
		
		#content .resume table th
		{
			border:0;
			background:#ccc;
		}
		
		#content .resume table.jobs
		{
			padding:0 !important;
			border:1px solid #000;
			border-radius:5px;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
		}
		
			#content .resume table.jobs th
			{
				padding:5px;
			}
			
				#content .resume table.jobs th.left
				{
					border-right:1px solid #000;
					width:38%;
				}
				
				#content .resume table.jobs th.middle
				{
					border-right:1px solid #000;
					width:20%;
				}
		
			#content .resume table.jobs td
			{
				padding:5px;
			}
			
				#content .resume table.jobs td.left
				{
					border-right:1px solid #000;
					width:28%;
					font-weight:bold;
				}
				
				#content .resume table.jobs td.middle
				{
					border-right:1px solid #000;
					width:20%;
				}
			
			#content .resume table.jobs th:first-child
			{
				border-top-left-radius:4px;
				-moz-border-radius-topleft:4px;
				-webkit-border-top-left-radius:4px;
			}
			
			#content .resume table.jobs th:last-child
			{
				border-top-right-radius:4px;
				-moz-border-radius-topright:4px;
				-webkit-border-top-right-radius:4px;
			}
		
		#content .resume table.projects .left, #content .resume table.projects .middle
		{
			width:33%
		}
	
	#content .resume h1
	{
		font-family:serif;
		font-size:3.5em;
	}
	
	#content .resume h2
	{
		font-size:2em;
	}
	
	#content .resume h3
	{
		font-family:serif;
		font-size:1.2em;
	}
	
	#content .resume p
	{
		padding:0;
	}
	
	#content .resume ul
	{
		padding-bottom:0;
	}
	
	#content .resume hr.invisible
	{
		border:0;
		padding:5px 0;
	}
	
	#content .resume .topMargin
	{
		margin-top:5px;
	}
	
	#content .resume .right
	{
		font-size:1.1em;
		text-align:right;
	}
	
	#content .resume .border
	{
		margin-bottom:1em;
		padding:5px;
		border:1px solid #000;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
	}