/* BODY/WRAPPERS --------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

	* { margin: 0; padding: 0; border: 0px; outline: 0px; }
	.clear { clear: both; }
 
	html {
		background: #333333 url('../images/interface/bg.jpg') repeat;
		color: #a0a0a0; font: 12px/16px Arial, sans-serif;
	}
	body { background: url('../images/interface/bg_body.png') repeat-x top center; }
	#wrapper { 
		position: relative; 
		width: 890px; margin: 0 auto; padding: 0 40px;
	}


/* HEADER/NAVIGATION ----------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

	#header {
		height: 272px; margin: 0 auto;
		background: url('../images/interface/bg_header.png') no-repeat center 45px;
	}
	#header h1 { display: none; }
	
	#navigation { 
		width: 390px; height: 40px; padding: 0 0 0 510px; 
		/* background: url('../images/interface/bg_support.png') no-repeat 780px -270px; */
	}
	#navigation li { 
		float: left; list-style-type: none;
	}
	#navigation li a {
		display: block; padding: 10px 15px;
		color: #6b6b6b; font: bold italic 18px Georgia, Arial, sans-serif;
		text-decoration: none;
	}
	#navigation li a:hover { color: #b9b9b9; }
	#navigation li.current a { background-color: #d9c05e; color: #fafafa; }
	
	
/* CONTENT --------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

	#content { width: 496px; float: left; padding: 0 14px; }
	#support { 
		width: 270px; float: left; padding: 0 50px 0 40px; 
		background: url('../images/interface/bg_support.png') no-repeat right top;
	}

	h2 { 
		padding: 0 0 8px 0; clear: left;
		font: bold italic 18px/20px Georgia, Arial, sans-serif; 
		background: url('../images/interface/bg_h2.png') no-repeat left 12px;
	}
	
	h3 { color: #d9c05e; font: bold italic 16px/22px Georgia, Arial, sans-serif; padding-bottom: 0; }
	h4 { font: bold italic 16px/18px Georgia, Arial, sans-serif; }
	h2 strong, h3 strong, h3 a { color: #d9c05e; text-decoration: none; }

	p { padding: 3px 0 7px 0; }
	strong { color: #dedede; }
	em { color: #dedede; }
	
	.tag { padding-top: 0; color: #4a4a4a; font-style: italic; text-transform: uppercase; }
	.instructions { color: #4a4a4a; font-style: italic; }

	p a, li a, dl a { color: #91afa4; text-decoration: none; }
	p a:hover, li a:hover, dl a:hover { color: #6b8f82; text-decoration: none; }
	
		/* CSS3 TRANSITIONS */
		a { -webkit-transition: color .4s ease-in; 
			 }
		
	
	/* IMAGES ----------------------------------------------------------------------------------------- */
	/* ------------------------------------------------------------------------------------------------ */
	
	img { border: solid 1px #4a4a4a; }
	
	.project { 
		position: relative; margin: 0 0 20px 0; padding: 6px 6px 4px 6px;
		background-color: #303030; border: solid 1px #4a4a4a; 
	}
	.project h3 { 
		position: absolute; bottom: 8px; right: 6px; 
		width: 462px; padding: 5px 10px;
		color: #ccc; font: bold 13px Georgia, Arial, sans-serif;	
		background: url('../images/interface/bg_projectdetails.png') repeat; 
	}
	.project p { padding: 0; }
	.project a { display: block; padding: 0px; }
		
	.thumbnails { margin: 30px 0 0 0; overflow: hidden; border-bottom: dashed 1px #4a4a4a; }
	.thumbnails p { margin: 15px 12px 8px 0; float: left; }

	.bigthumbnail { 
		margin: 0 0 20px 0; padding: 6px; line-height: 0px;
		background-color: #303030; border: solid 1px #4a4a4a; 
	}	
	.thumbnail { padding: 0px; line-height: 0px; border: solid 1px #4a4a4a; }
	.site_link { clear: left; margin: 5px 0 0 0;}
	
	#comments { 
		clear: left;
		position: relative; left: -20px; bottom: -20px; padding: 10px 0 20px 20px;
		background: url('../images/interface/comment_bubble_large.png') no-repeat 0 0; 
	}
	#post_comments dt {
		display: inline-block; width: 100px;
		margin: 5px 0px 8px 0; padding: 3px 10px;
		color: #d9c05e; background-color: #2a2a2a;
	}	
	#post_comments dt em { display: block; color: #4a4a4a; }
	#post_comments dd {
		display: inline-block; width: 325px;
		margin: 5px 0px 8px 0; padding: 3px 10px; 
		background-color: #2a2a2a; 
	}

	/* LISTS ------------------------------------------------------------------------------------------ */
	/* ------------------------------------------------------------------------------------------------ */

	ul { margin: 0 0 0 10px; line-height: 18px; }
	li { list-style: none; }
	li a { 
		display: block; padding: 3px 5px 3px 5px;
		text-decoration: none;
	}	
	#support li a:hover { background-color: #2a2a2a; }

	#project_types { margin: 0 0 40px 10px; }

	#support ul .current { 
		position: relative; left: -35px; padding: 3px 5px 3px 40px;
		background: url('../images/interface/right_arrow.png') no-repeat 0 0; 
	}
	ul .date { width: 90px; float: right; color: #4a4a4a; }
	
	ul.services { margin: 20px 0 40px 40px; line-height: 18px; }
	ul.services li { list-style: url('../images/interface/checkmark.png') outside; }
	ul.services em { color: #4a4a4a; }
	
	dt { 
		display: block; margin: 0 8px 8px 0; 
		clear: left; float: left; 
		font-style: italic; color: #4a4a4a;
	}
	dt:first-child { margin-top: 0px;}
	dd { margin: 0 8px 8px 0; }	


	/* POSTS ------------------------------------------------------------------------------------------ */
	/* ------------------------------------------------------------------------------------------------ */

	.extra { clear: left; margin-top: 75px; }
	.extra:first-child { margin-top: 0px; }
	.extra img { 
		float: left; margin: 8px 15px 20px 0; padding: 0 25px 0 10px; 
		border: none; border-right: dashed 1px #4a4a4a; 
	}
	.extra h3 { padding-top: 20px; }
	.extra a {
		display: block; height: 50px; width: 150px;
		float: right; margin-right: 140px; position: relative; left: -15px;
		background: url('../images/interface/download2.png') no-repeat;
		text-indent: -9999px;
	}
	.extra a:hover {
		background: url('../images/interface/download2.png') center -50px no-repeat;
	}	
	
	.post h3 + p { color: #4a4a4a; font-style: italic;}
	
	.post a + p { margin-top: 10px; } 
		
	.post_footer { margin: 10px 0 50px 0; clear: both; border-top: dashed 1px #4a4a4a; }
	.post_footer dt, .post_footer dd { float: left; margin: 3px 0 0 3px; padding: 0 0 0 3px; list-style-type: none; }
	.post_footer dd + dd { border-left: solid 1px #4a4a4a; }
	.post_commentlink { float: right; padding: 3px 0 0 0; }
	.post_commentlink a {
		display: block;
		position: relative; top: -32px; right: -85px; width: 31px; 
		padding: 4px 0 12px 0;
		font-size: 11px; text-align: center;
		background: url('../images/interface/comment_bubble.png') no-repeat right 0;
	}
	
	.page_nav { margin: 20px 0 0 0; padding: 2px 2px 0 2px; font-size: 11px; clear: both; }
	.page_nav li { margin: 2px 0; float: left; list-style-type: none; }
	.page_nav li:first-child { 
		margin-right: 7px; padding: 4px 6px 4px 4px; word-spacing: 3px;
		background: #555555 url('../images/interface/bg_pagenav.png') repeat-x left top;
		color: #FFFFFF; border: solid 2px #ECECEC;
	}
	.page_nav li a { 
		display: block; margin: 3px 1px; padding: 3px 5px;
		font-weight: bold; text-decoration: none; color: #424242; 
	}
	.page_nav li a:hover { background-color: #ECECEC; color: #FFFFFF; }
	.page_nav li a.current, .page_nav li a.current:hover { background: #555555 url('../images/interface/bg_pagenav.png') repeat-x left top; color: #FFFFFF; }
	.page_nav li.ellipsis { 
		background-color: transparent; 
		margin: 8px 2px 0px 2px; font-weight: bold; 
	}
	
	.download { 
		display: block; margin: 20px 0 0 0; width: 280px; height: 46px;
		text-indent: -9999px; background: url('../images/interface/download.png') no-repeat -10px -2px;
	}
	.download:hover { background: url('../images/interface/download.png') no-repeat -10px -52px; }


	
	
	/* FORMS ------------------------------------------------------------------------------------------ */
	/* ------------------------------------------------------------------------------------------------ */
	form { clear: both; margin: 35px 0 0 0; }
	form p { margin: 10px 0; }
	
	form label { 
		clear: left; float: left;
		width: 60px; padding: 0 3px 2px 30px; 
		color: #dedede; font-weight: bold;
	}
	form label strong { color: #d9c05e; }
	
	form .formfield input, form .formfield textarea { 
		width: 300px; padding: 3px 6px; 
		color: #6b6b6b; font-style: italic;
	}
	form #submit { margin-left: 90px; }		
	.errormsg { color: #d9c05e; font-style: italic; }
	
	#searchform { margin: 0 20px 70px 0; }	
	#searchform p { margin: 0 0 5px 0; float: left; }
	#tag { 
		width: 150px; margin: 0 6px 0 0; padding: 3px 6px;
		color: #6b6b6b; font-style: italic;
	}
	#search { position: relative; top: -6px; }	
	
/* FOOTER ---------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */

	#footer { 
		clear: both;
		margin: 40px 0 30px 0; padding: 10px 0;
		border-top: solid 1px #4a4a4a;
		color: #4a4a4a; font: 11px/18px Arial, sans-serif;
	}
	#footer p { padding: 0 0 3px 0; }
	
	#footer .contact { 
		position: relative; top: -30px;
		width: 180px; float: right; padding: 30px 0 0 0;
		background: url('../images/interface/email.png') no-repeat 60px top; 
	}

	#footer ul { width: 90px; margin: 0 30px 0 0; float: right; }
	#footer li { list-style-type: none; }
	#footer li a {
		display: block; padding: 3px 5px 3px 5px;
		color: #4a4a4a; text-decoration: none;
	}
	#footer li a:hover { background-color: #2a2a2a; color: #91afa4; }