/*
 * #01 - General 
 * #02 - Masthead
 * #03 - Header
 * #04 - Navigation
 * #05 - Content (Note: Anything within the content
 *				  area should be in layout_content.css)  
 * #06 - Footer
 * #07 - ThickBox 
 * #08 - Other 
 */

/* #01 - GENERAL **************************************************************/

* { margin: 0;  padding: 0; }

html
{
	/* footerStickAlt */
	height: 100%;
}

body
{
	/* centering */
	text-align: center;
	
	/* footerStickAlt */
	height: 100%;
}

#nonfooter
{
	/* centering 
	margin: 0 auto;
	text-align: center;*/
	
	/* footerStickAlt */
	position: relative;
	min-height: 100%;
		    
	background: #000 url('../images/nonfooter_bg.jpg') 50% 104px repeat-y;
	/* see comment in #wrapper re: backgrounds */
	/* margin-top is to align pattern with masthead pattern */ 
}

* html #nonfooter
{
	/* footerStickAlt */
	height: 100%;
}

#wrapper
{
	/* centering */
	width: 970px;
	margin: 0 auto;
	
	/* footerStickAlt */
	padding-bottom: 154px; /* same height as footer, plus extra padding below content */
	overflow: hidden; /* required if #wrapper contains floats */
	
	text-align: left;
	/* if #wrapper contains content, set this as left.  Otherwise, if #wrapper
	 * will contain an inner-wrapper, set this as center.
	 */
	
	background: transparent url('../images/wrapper_bg.gif') 50% 192px no-repeat;
	/* due to rounding techniques for centering, in different browsers this
	   image will shift L/R by 1px. To mask this, the image is really tall so
	   if it does shift, the break happens 4000px down the page, which in almost
	   all cases will be longer than the content and thus invisible. */
	
	/* height of #wrapper does not stretch to full height of screen like
	 * #nonfooter does.  #nonfooter background image may need to contain #wrapper
	 * section and should repeat-y in order to give impression that #wrapper is
	 * full height of screen.
	 */ 
}

/* #02 - MASTHEAD *************************************************************/

#masthead
{
	/* should not contain content, only #inner-masthead */
	/* height determined by height of #inner-masthead */
	
	background: #fff url('../images/masthead_bg.jpg') 50% 0 no-repeat;
}

#inner-masthead
{
	/* centering */
	width: 970px;
	margin: 0 auto;
	
	height: 104px;
	overflow: hidden;
	
	text-align: left;
	background: transparent url('../images/masthead_bg.jpg') 50% 0 no-repeat;	
}

/* #03 - HEADER ***************************************************************/

#header
{
	width: 970px;
	height: 192px;
	display: block;
	overflow: hidden;
}

/* #04 - NAVIGATION ***********************************************************/

#nav
{
	width: 530px;
	margin-left: 392px;
	height: 53px;
	margin-top: 4px;
}
#nav.dropped { padding-top: 0px; }

#nav ul { list-style: none; }
#nav ul li
{
	float: left;
	display: block;
}

#nav a
{
	width: 106px;
	height: 53px;
	display: block;
	border: none;
	
	text-indent: -9999px;
	overflow: hidden;
	background: transparent no-repeat;
}

#nav li#nav-home a { background: url('../images/navigation.gif') 0 0; }
#nav li#nav-home a:hover { background: url('../images/navigation.gif') 0 -53px; }
body.index #nav li#nav-home a { background: url('../images/navigation.gif') 0 -106px; }

#nav li#nav-services a { background: url('../images/navigation.gif') -106px 0; }
#nav li#nav-services a:hover { background: url('../images/navigation.gif') -106px -53px; }
body.services #nav li#nav-services a { background: url('../images/navigation.gif') -106px -106px; }

#nav li#nav-process a { background: url('../images/navigation.gif') -212px 0; }
#nav li#nav-process a:hover { background: url('../images/navigation.gif') -212px -53px; }
body.process #nav li#nav-process a { background: url('../images/navigation.gif') -212px -106px; }

#nav li#nav-portfolio a { background: url('../images/navigation.gif') -318px 0; }
#nav li#nav-portfolio a:hover { background: url('../images/navigation.gif') -318px -53px; }
body.portfolio #nav li#nav-portfolio a { background: url('../images/navigation.gif') -318px -106px; }

#nav li#nav-articles a { background: url('../images/navigation.gif') -424px 0; }
#nav li#nav-articles a:hover { background: url('../images/navigation.gif') -424px -53px; }
body.articles #nav li#nav-articles a { background: url('../images/navigation.gif') -424px -106px; }

#nav li#nav-about a { background: url('../images/navigation.gif') -530px 0; }
#nav li#nav-about a:hover { background: url('../images/navigation.gif') -530px -53px; }
body.about #nav li#nav-about a { background: url('../images/navigation.gif') -530px -106px; }

/* #05 - CONTENT **************************************************************/

#inner-wrapper
{
	overflow: hidden; /* to contain floats */
	margin-top: 38px;
}

/* #06 - FOOTER ***************************************************************/

#footer
{
	/* should not contain content, only #inner-footer */
	
	/* footerStickAlt */
	position: relative;
	margin-top: -104px;
	height: 104px;
	background: transparent url('../images/footer_bg.jpg') 50% 0 no-repeat;
    clear: both;
}

#sub-footer
{
	/* centering */
	width: 970px;
	margin: 0 auto;
	
	height: 76px;
	padding-top: 4px;
	overflow: hidden;
	
	text-align: left;
	
	background: transparent url('../images/footer_bg.jpg') 50% 0 no-repeat;
}

#bottom-footer
{
	/* centering */
	width: 970px;
	margin: 0 auto;
	
	height: 24px;
	overflow: hidden;
	
	text-align: left;
	
	background: transparent url('../images/footer_bg.jpg') 50% -80px no-repeat;	
}

/* #07 - THICKBOX (DO NOT EDIT) ***********************************************/

/* Overlay */

#TB_overlay
{
	position: fixed;
	z-index: 100;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

.TB_overlayBG
{
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

.TB_overlayMacFFBGHack { background: url('../images/thickbox_macFFBgHack.png') repeat; }

* html #TB_overlay
{
	/* ie6 hack */
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

/* Window */

#TB_window
{
	position: fixed;
	z-index: 102;
	display: none;
	text-align: left;
	top: 50%;
	left: 50%;
}

* html #TB_window
{
	/* ie6 hack */
	position: absolute;
	margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_title { display: none; /* fake modal=true functionality, but retain options for closing window (e.g. esc key, click overlay) */ }

#TB_ajaxContent
{
	clear: both;
	overflow: auto;
}

/* Loader */

#TB_load
{
	position: fixed;
	display: none;
	height: 13px;
	width: 208px;
	z-index: 103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load
{
	/* ie6 hack */
	position: absolute;
	margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}


/* #08 - OTHER ****************************************************************/

.print { display: none; }