/* #################################################################### */
				/* --- | GLOBAL HTML STYLES | ----- */
/* #################################################################### */	
	*		{ margin: 0; padding: 0; }
	body	{ background: #c6c8ca url(../_images/bg_body-gradient.gif) repeat-x; font: 11px helvetica, arial, sans-serif; color: #9d9fa2; text-transform: lowercase; }
	a 		{ color: #9d9fa2; text-decoration: none; }
	a:hover	{ color: #00aeef; }
	a img   { border: 0; }
	.series	{ display: none; }
	
/* #################################################################### */
				/* --- | MAIN LAYOUT CONTAINER | --- */
/* #################################################################### */	
		
	#container	{ padding: 40px 25px; width: 845px; }


/* #################################################################### */
			/* --- | HEADER AND NAVIGATION LAYOUT | --- */
/* #################################################################### */	
		
	/* Site Logo */
	h1 a		{ display: block; position: absolute; top: 180px; background: url(../_images/logo_magnifico-design.gif) 0 0 no-repeat; width: 427px; height: 128px; text-indent: -10000px; }
	h1 a:hover	{ background: url(../_images/logo_magnifico-design.gif) 0 -128px no-repeat; cursor: default; }
				
	#mainNav			{ list-style: none; }
	#mainNav li			{ float: left; margin-right: 3px; }
	#mainNav li a			{ color: #9d9fa2; }
	#mainNav li a:hover		{ color: #77787b; }
	
	
	/* Main Nav items */
	#navContact,
	#navResume,
	#navTimeline,
	#navLinks		{ position: absolute; top: 80px; left: 25px; width: 700px; }
	
	
	#navContact ul,
	#navResume ul	{ list-style: none; }
	#navContact li,
	#navResume li	{ margin-bottom: 10px; }
	
	#navTimeline li	{ list-style: none; display: inline; }
			
	#navLinks li	{ display: inline; list-style: none; }
	#navLinks li a	{ background: url(../_images/bullet_plus.gif) no-repeat 0 2px; padding-left: 10px; margin: 4px 3px 0 0; }
		
			
/* #################################################################### */	
			/* --- | MAIN PAGE CONTENT AND LAYOUT | --- */
/* #################################################################### */
	
	h2	{ background: url(../_images/bg_h2-underline.gif) no-repeat 0 100%; padding-left: 10px; margin-bottom: 4px; color: #c6c8ca; font-size: 11px; font-weight: normal; }
	
	#portfolioPrinted		{ clear: both; margin-top: 290px; }
	
	#portfolioPrinted,
	#portfolioIdentity,
	#portfolioInteractive,
	#portfolioCampaigns,
	#portfolioArchives	{ width: 150px; margin-top: 290px; margin-right: 15px; float: left; }
	
	#portfolioPrinted li,
	#portfolioIdentity li,
	#portfolioInteractive li,
	#portfolioCampaigns li,
	#portfolioArchives li	{ list-style: none; background: url(../_images/bullet_plus.gif) no-repeat 0 2px; padding-left: 10px; margin-top: 4px; }
	
	#portfolioPrinted li a:hover,
	#portfolioIdentity li a:hover,
	#portfolioInteractive li a:hover,
	#portfolioCampaigns li a:hover,
	#portfolioArchives li a:hover	{ color: #00aeef; }
	
	
				
/* #################################################################### */	
				/* --- | CSS HACKS AND FIXES | --- */
/* #################################################################### */
	/* Clear floats to extent background around floated elements */
	.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; min-width: 0; }
	
	.clearfix { display: inline-block; }
	.clearfix { display: block; }
	/* Hide from IE Mac \*/
  	* html .clearfix { height:1px; }
	/* End hide from IE Mac */

	/* IE HACK FOR CENTER ALIGN */
		* html body {padding-left: 1px;}
	
	
		
/* #################################################################### */	
				/* --- | CSS STYLES FOR LIGHTBOX | --- */
/* #################################################################### */		
	/* Main Lightbox positioning and styles */
		#lightbox		{ position: absolute; top: 40px; left: 0; width: 100%; z-index: 100; text-align: center; }
		#lightbox a img	{ border: none; }
		#lightboxArray	{ display: none; }

	
		#outerImageContainer		{ position: relative; background-color: #f6f8f7; width: 250px; height: 250px; margin: 0 auto; color: inherit; }
		#imageContainer				{ padding: 10px; }	
		#loading					{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; }
		#hoverNav					{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
		#imageContainer>#hoverNav	{ left: 0; }
		#hoverNav a					{ outline: none;}

	/* Previous and Next controls for lightbox image*/
		#prevLink, 
		#nextLink				{ width: 49%; height: 100%; background: transparent url(/_images/blank.gif) no-repeat; display: block; }
		#prevLink				{ left: 0; float: left; }
		#nextLink				{ right: 0; float: right; }
		#prevLink:hover, 
		#prevLink:visited:hover { background: url(/_images/button-previous.jpg) 0 15% no-repeat; }
		#nextLink:hover, 
		#nextLink:visited:hover { background: url(/_images/button-next.jpg) 100% 15% no-repeat; }

	/* Image description text for lightbox image */
		#imageDataContainer			{ font: 11px helvetica, arial, sans-serif; background-color: #f6f8f7; margin: 0 auto; line-height: 1.4em; color: inherit; }
		#imageData					{ padding:0 10px; }
		#imageData #imageDetails	{ width: 85%; float: left; text-align: left; }
		#imageData #caption			{ font-weight: normal; }
		#imageData #numberDisplay	{ visibility: hidden; display: block; clear: left; padding-bottom: 1.0em; }
		#imageData #bottomNavClose	{ width: 23px; float: right;  padding-bottom: 0.7em; }
		
	/* Lightbox overlay for popup transparency */	
		#overlay	{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; color: inherit; }