/* 
STYLE.CSS
AUTHOR - metal@flat.com
DATE   - June, 2009
NOTES  - 
	This layout and stylesheet uses an em based configuration with a ratio of 1.0em => 10px
	Colors used:
	
	#232f29 - fonts, general
	#66bb01 - fonts, bold h2/h3
	#e3efe9 - ligth blue green, navigation background
	#d3dfd9 - darker blue green, related items
	
	 
*/
/************************************************************************************************************/
/************************************************************************************************************/
/************************************************************************************************************/
/* ------------------------------------------------------------------------------------------------------- */
/* BODY ATTRIBUTES - this will zero things out and prep the font size for 'em' based relations */
/* ------------------------------------------------------------------------------------------------------- */

*::-moz-selection {
	background-color: #ccc;
	color: #333;
}

*::selection {
	background-color: #ccc;
	color: #333;
}

* {
	outline: none;
}

html {
	font-size: 100%; /* failsafe for IE6 */
	overflow-y: scroll;
}

body {
	font-family: verdana, san-serif;
	font-size: 62.5%; /* this will render a default 16pt font as 10px ( 10px/16 * 100% = 62.5), thus 1em == 10px */
	margin: 0;
	padding: 0;
}

html>body {
	font-size: 10px; /* ignored by IE6, recognized by Firefox, Safari, IE7, Opera */
}

/* this will zero out unwanted or expected borders and margins....unless specified later */
body,img,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,table,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

/************************************************************************************************************/
/************************************************************************************************************/
/************************************************************************************************************/
/* ------------------------------------------------------------------------------------------------------- */
/* COMMON ELEMENTS */
/* ------------------------------------------------------------------------------------------------------- */

html, body {
	height: 100%;
	font-family: Arial, Verdana, Helvetica, san-serif;
	color: #232f29;
	background: #c3cfc9 url('../img/bkgd.gif') no-repeat top center fixed; */
}

a, a:link, a:visited {
	color: inherit;
	text-decoration: none;
	margin: -0.1em -0.1em;
	padding: 0.1em 0.1em;
	color: #66bb00;
	background-color: transparent;
}

a:hover, a.on {	
	color: inherit;
	text-decoration: none;
	margin: -0.1em -0.1em;
	padding: 0.1em 0.1em;
	color: #ffffff;
	background-color: #66bb00;
}

a.nohover, a.nohover:link, a.nohover:hover, a.nohover:visited, a img, a:hover img {
	background: transparent !important;
}

p {
	font-size: 1.2em;
	line-height: 1.4em;
	margin-top: 0em;
	margin-bottom: 0em;
}

small {
	color: inherit;
	font-size: 1.0em;
	text-transform: uppercase;
}

h1, b.h1 {
	font-size: 2.4em;
	font-weight: bold;
	font-family: inherit;
	color: inherit;
	margin: 0em !important;
	line-height: none !important;
}

h2, b.h2 {
	font-size: 2.4em;
	font-weight: bold;
	font-family: inherit;
	color: inherit;
	margin: 0em !important;
	line-height: none !important;
}

h3, b.h3 {
	font-weight: bold;
	font-family: inherit;
	color: inherit;
	margin: 0em !important;
	line-height: none !important;
}

legend, label {
	display: none;
}

img { -ms-interpolation-mode: bicubic; }



/************************************************************************************************************/
/************************************************************************************************************/
/************************************************************************************************************/
/* ------------------------------------------------------------------------------------------------------- */
/* CONTENT AND LAYOUTS */
/* ------------------------------------------------------------------------------------------------------- */
.preload {
	position: absolute;
	top: 0; left: 0;
	display: none;
}

.horizontal_rule {
	clear:both;
	height: 0.1em;
	margin: 1.6em 0em 1.2em 0em;
	border-top: 0.1em solid #e3efe9;
	overflow: hidden;
}

.horizontal_rule img {
	height: 0.1em;
}


/* ------------------------------------------------------------------------------------------------------- */
/* DEBUGGER, BODY FOG & LOAD LAYER - for dynamic content */
/* ------------------------------------------------------------------------------------------------------- */
#debugger_div {
	position: absolute;
	top:0; right:0;
	z-index: 1001;
	display: block;
	background-color: #e5e5e5;
	padding: 1.0em 1.0em;
}

#body_fog { /* hack for IE6 needed - background transparency */
	position: fixed;
	top: 0px; left: 0px;
	z-index: 100;
	height: 100%;
	width: 100%;
	background:url('../img/bkgd-fog.png') repeat;
}

#load_layer {
	position: absolute;
	top: 0px; left: 0px;
	z-index: 200;
	height: 100%;
	width: 100%;
	background:url('../img/bkgd-load_layer.png') repeat;
}
	
	#load_layer_content {
		margin: 5.6em auto;
		text-align: center;
	}
	
	#load_layer_data {
		text-align: center !important;
	}

/* ------------------------------------------------------------------------------------------------------- */
/* BODY CONTAIER - main wrapper
/* ------------------------------------------------------------------------------------------------------- */
#body_container {
	position: relative;
	height: 100%;
	min-height: 100%;
	width: 93.6em;
	width: 78.0em;
	border-left: 15.6em solid #e3efe9;
	margin: 0em 1.6em;
	background-color: #ffffff;
}

html>body #body_container {
	height: auto;
}


/* ------------------------------------------------------------------------------------------------------- */
/* BODY HEADER - logo and navigation
/* ------------------------------------------------------------------------------------------------------- */
#body_header {
	position: relative;
	z-index: 10;
	height: 10.4em;
	min-height: 10.4em;
	width: 93.6em;
	background-color: #c3cfc9;
	margin-left: -15.6em;
}
	
	#body_header_left {
		width: 15.6em;		/* total width */
		float: left;
	}
	
	#body_header_right {
		width: 62.4em;
		float: left;
	}
	
	#body_header_logo {
		width: 15.6em;
		float: left;
	}
	
/* ------------------------------------------------------------------------------------------------------- */
/* BODY CONTENT - section breadcrumb nav, section nav on the left, and content container on the right
/* ------------------------------------------------------------------------------------------------------- */
#body_content {
	position: relative;
	z-index: 1;
	height: 100%;
	width: 93.6em;
	margin-left: -15.6em;
	margin-bottom: 2.4em;	/* match the height of the footer to prevent an overlap on small windows */
	margin-bottom: 8.0em;	/* add a buffer of 56 to the overall height... */
}
	
	.body_content_clear {	/* this element is directly under the body_content div, and prevents the footer from floating above the content area */
		clear: both;
		height: 0.1em;
		margin-top: -0.1em;
		overflow: hidden;
	}
	
	.body_content_clear img {
		height: 0.1em;
	}
	
	
/* ------------------------------------------------------------------------------------------------------- */
/* CONTENT COLUMN - content area definitions
/* ------------------------------------------------------------------------------------------------------- */
#body_content_left {
	width: 15.6em;		/* total width */
	float: left;
}

#body_content_left div.offset { /* this will account for the navigation's 8pt border, that hangs outside the column */
	position: relative;
	left: -0.8em;
	width: 16.4em;
	overflow: hidden;
	float: left;
}


#body_content_right {
	width: 78.0em;
	float: left;
}

#body_content_right div.content {
	width: 45.2em;
	padding: 0em 0.8em;
	float: left;
}

#body_content_right div.offset { /* this will account for the navigation's 8pt border, that hangs outside the column */
	position: relative;
	margin-right: -0.8em;
	width: 32.0em;
	float: left;
}

.related_items_header {
	background-color: #535f59 !important;
	border-right: 0.8em solid #434f49 !important;
	padding: 0.8em 0.8em;
	margin-bottom: 0.1em;
}

.related_items_header p { /* match the navigation on the left */
	color: #ffffff !important;
	font-size: 1.2em;
	line-height: 1.0em;
	font-weight: bold;
	display: block;
}

.related_items_content, .related_items_content_child {
	background-color: #d3dfd9;
	border-right: 0.8em solid #b3bfb9;
	padding: 1.4em 0.8em 1.4em 0.8em;
	margin-bottom: 0.1em;
}

.related_items_content_child {
	padding: 1.6em 0.8em 1.0em 0.8em;
}

.related_items_content p, .related_items_content_child p {
	color: #535f59;
	font-size: 1.1em;
	line-height: 1.4em;
	font-weight: bold;
}


#related_items.view .related_items_header {
	background-color: #e3efe9;
	border-right: 0.8em solid #d3dfd9;
}

#related_items.view .related_items_header p {
	color: #535f59;
}

#related_items.view .related_items_content, .related_items_content_child {
	background-color: #e3efe9;
	border-right: 0.8em solid #d3dfd9;
}

#related_items.view .related_items_content p, .related_items_content_child p {
	color: #535f59;
}

#related_items * p.body_caption * a, #related_items * p.body_caption a { font-weight: bold !important; }

/* ------------------------------------------------------------------------------------------------------- */
/* BODY FOOTER - body footer
/* ------------------------------------------------------------------------------------------------------- */
#body_footer {
	position: absolute;
	z-index: 1;
    bottom: 0;
    height: 2.4em;
	width: 78.0em;
	overflow: hidden;
	border-left: 15.6em solid #c3cfc9;
	margin-left: -15.6em;
	padding-bottom: 1.2em;
	background-color: #c3cfc9;
}
	
	#body_footer_left {
		width: 60.8em;
		padding: 0.7em 0.8em;
		float: left;
		background: #ffffff url('../img/bkgd-footer.gif') repeat top left;
	}
	
	#body_footer_right {
		width: 14.0em;
		padding: 0.7em 0.8em;
		float: left;
		background: #ffffff url('../img/bkgd-footer.gif') repeat top left;
	}
	
	#body_footer_left *, #body_footer_right * {
		font-size: 1.0em;
		color: #838f89;
	}
	
	#body_footer_left a:hover, #body_footer_right a:hover {
		color: #ffffff !important;
	}