/* 
STYLE.CSS
AUTHOR - metal@flat.com
DATE   - August, 2009
NOTES  - This layout and stylesheet uses an em based configuration with a ratio of 1.0em => 10px
		 
		 colors used:
		 #21221e - dark grey: nav headers, body text
		 	aliased as ".black"
		 	
		 #878885 - light grey: navigation, footer links, 
		 	aliased as ".grey"
		 	
		 #888888 - light grey: slide captions
		 	
		 #22bbcc - cyan: used on links and is the color of the slides' right hash
			aliased as ".cyan"
		
*/
/************************************************************************************************************/
/************************************************************************************************************/
/************************************************************************************************************/
/* ------------------------------------------------------------------------------------------------------- */
/* 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: Georgia, Adobe Garmond, Garamond, Palatino, Times New Roman, serif, Arial, Verdana, Helvetica, 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: none;
	outline: none;
}

html, body {
	height: 100%;
	color: #21221e;
	background: #edeeeb url('../img/bkgd.gif') no-repeat top center fixed;
}

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

a, a:link, a:visited {
	color: #878885;
	text-decoration: none;
}

a:visited {
	color: #878885;
}

a:hover, a.on {	
	color: #22bbcc;
	text-decoration: none;
}

a:active {
	color: #21221e;
}

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

a.inactive, a.inactive:hover {
	color: #21221e !important;
	background-color: none !important;
	cursor: default !important;
	border: none;
}

p {
	font-size: 1.4em;
	line-height: 1.3em;
	margin-top: 0.0em;
	margin-bottom: 0.0em;
	color: inherit;
}

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

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

h2, b.h2, a.h2, h3, b.h3, a.h3 {
	font-size: 1.1em;
	font-size: 0.8em;		/* 78% (or 80) of 14 = 11 */
	font-weight: normal;
	font-family: inherit;
	color: inherit;
	margin: 0em !important;
	line-height: none !important;
	line-height: 1.4em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

h3, b.h3, a.h3 {
	color: #878885; /* light grey */
}

legend, label {
	display: none;
}

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

ul, ol, li {
	list-style: none;
	list-style-type: none;
	margin: 0em !important;
	padding: 0em !important;
	background-color: transparent;
	text-decoration: none;
	display: block;
}

/************************************************************************************************************/
/************************************************************************************************************/
/************************************************************************************************************/
/* ------------------------------------------------------------------------------------------------------- */
/* CONTENT AND LAYOUTS */
/* ------------------------------------------------------------------------------------------------------- */
.horizontal_rule {
	clear:both;
	height: 0.1em;
	margin: 0em 0em;
	border-top: 0.1em solid #000;
	overflow: hidden;
}

.horizontal_rule img {
	height: 0.1em;
}


/* ------------------------------------------------------------------------------------------------------- */
/* DEBUGGER, BODY FOG & LOAD LAYER - for dynamic content */
/* ------------------------------------------------------------------------------------------------------- */
#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%;
}
	
	#load_layer_content {
		margin: 3.5em auto;
	}
	
	#load_layer_data, #load_layer_close {
		width: 90.0em;
		margin: 0em auto;
		padding: 0em 0em;
	}
		
		#load_layer_close a:link img, #load_layer_close a:visited img {
			background-image: url('../img/button-close.gif') !important;
			background-repeat: no-repeat !important;
			background-position: 0.0em 0.0em;
			border: none;
		}
		#load_layer_close a:hover img {
			background-image: url('../img/button-close.gif') !important;
			background-repeat: no-repeat !important;
			background-position: 0.0em -3.5em !important;
			border: none;
		}
	
	


/* ------------------------------------------------------------------------------------------------------- */
/* BODY CONTAIER - main wrapper
/* ------------------------------------------------------------------------------------------------------- */
#body_container {
	position: absolute;
	z-index: 1;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

html>body #body_container {
	height: auto;
}

#body_band_top, #body_band_bottom  {
	min-height: 0.5em;
	height: 0.5em;
	width: 100%;
	background: url('../img/bkgd-band.gif') repeat;
}


/* ------------------------------------------------------------------------------------------------------- */
/* BODY HEADER - logo and navigation
/* ------------------------------------------------------------------------------------------------------- */
#body_header {
	position: relative;
	z-index: 2;
	height: 3.5em;
	width: 100%;
}
	
	#body_header_inner {
		height: 3.0em;
		min-height: 3.0em;
		width: 90.0em;
		margin: 0em auto;
		padding: 0em 0em;
	}
	
	/* 
	FLAT LOGO
	*/
	.logo_container {
		min-height: 6.5em;
		height: 6.5em;
		max-width: 12.0em;
		width: 12.0em;
		overflow: hidden; 
		clear: both;
	}
	
	.logo_wrapper {
		height: auto;
		width: 3.5em;
		max-width: 15.5em;
		width: 3.5em;
		overflow: hidden;
		text-align: right;
		float: left;
	}
	
/* ------------------------------------------------------------------------------------------------------- */
/* BODY CONTENT - section breadcrumb nav, section nav on the left, and content container on the right
/* ------------------------------------------------------------------------------------------------------- */
#body_content {
	position: relative;
	z-index: 3;
	width: 100%;
	margin-bottom: 11.5em; 	/* match the height (assumed) of the footer + margin to prevent an overlap on small windows */
	margin-bottom: 11.5em; 	/* match the height (assumed) of the footer + margin to prevent an overlap on small windows */
}
	
	#body_content_inner {
		width: 90.0em;
		margin: 0em auto;
		padding: 0em 0em;
	}
	
	#body_content_area {
		
	}
	
	#content_left {
		width: 14.0em;
		padding-right: 1.0em;
		overflow: hidden;
		float: left;
	}
	
	#content_right {
		width: 74.0em;
		padding-right: 1.0em;
		float: left;
	}
	
	.body_content_clear {
		clear: both;
		height: 0.1em;
		margin-top: -0.1em;
		overflow: hidden;
	}
	
	.body_content_clear img {
		height: 0.1em;
	}
	
	
	
/* ------------------------------------------------------------------------------------------------------- */
/* BODY FOOTER - body footer, always floats to the bottom, never overlaps the content
/* ------------------------------------------------------------------------------------------------------- */
#body_footer { /* IE hack might be needed */
	position: absolute;
	z-index: 1;
	bottom: 0;
	min-height: 7.0em;
	width: 100%;
}
	
	#body_footer_inner {
		width: 90.0em;
		margin: 0em auto 1.7em auto; /* will appear as 20, after compensating for cleffs... */
		padding: 0em 0em;
	}
	
	#body_footer_navigation {
		width: 90.0em;
		padding-bottom: 0.2em;
		color: inherit;
	}
	
	#body_footer_navigation * {
		
	}
	
	#body_footer_navigation * p {
		font-size: 1.0em;
		margin-bottom: 0em;
		line-height: 1.4em;
	}
	
	.footer_cell {
		height: auto;
		width: 14.0em;
		padding-top: 0.8em;
		margin-right: 1.0em;
		float: left;
		background: transparent url('../img/bkgd-dashed.gif') repeat-x top left;
	}