/* 
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:
	#f2f2f2 - background, light light grey....
	
	#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 */
/* ------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------- */
/* 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: #f1f1f1 url('../img/bkgd.gif') no-repeat top center fixed;
	font-family: Arial, Verdana, Helvetica, san-serif;
}



/************************************************************************************************************/
/************************************************************************************************************/
/************************************************************************************************************/
/* ------------------------------------------------------------------------------------------------------- */
/* COMMON ELEMENTS */
/* ------------------------------------------------------------------------------------------------------- */
a, a:link, a:visited {
	color: #21221e;
	text-decoration: none;
}

a:visited {
	color: #878885;
}

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

a:active {
	color: #878885;
}

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.2em;
	line-height: 1.4em;
	margin-top: 0em;
	margin-bottom: 0em;
}

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

h1, b.h1, a.h1 {
	font-size: 1.8em;
	font-weight: normal;
	font-style: italic;
	font-family: Georgia;
	color: inherit;
	margin: 0em !important;
	padding: 0em !important;
	line-height: none !important;
	line-height: 1.0em;
	text-transform: uppercase;
}

h2, b.h2, a.h2, h3, b.h3, a.h3 {
	font-size: 1.0em;
	font-weight: normal;
	font-family: Georgia;
	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 {
	font-weight: normal;
	font-family: Georgia;
	color: inherit;
}

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 */
/* ------------------------------------------------------------------------------------------------------- */
.preload {
	position: absolute;
	top: 0; left: 0;
	display: none;
}

.horizontal_rule {
	clear:both;
	height: 0.1em;
	margin: 0em 2.0em;
	border-top: 0.1em solid #e4e4e4;
	overflow: hidden;

}

.horizontal_rule img {
	height: 0.1em;
}


/* ------------------------------------------------------------------------------------------------------- */
/* BODY FOG & LOAD LAYER - for dynamic content */
/* ------------------------------------------------------------------------------------------------------- */
#body_fog { /* hack for IE6 needed - background transparency */
	position: absolute;
	top: 0px; left: 0px;
	z-index: 100;
	height: 100%;
	width: 100%;
	background:url('../img/trans_white_90.png') repeat;
}

#load_layer {
	position: absolute;
	top: 0px; left: 0px;
	z-index: 200;
	height: 100%;
	width: 100%;
}


/* ------------------------------------------------------------------------------------------------------- */
/* 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 HEADER - logo
/* ------------------------------------------------------------------------------------------------------- */
#body_header {
	position: relative;
	z-index: 2;
	height: 10.0em;
	width: 100%;
}
	
	#body_header_inner {
		height: 6.0em;
		min-height: 6.0em;
		width: 94.0em;		/* becomes 980 with the 20 padding on the left and right */
		margin: 0 auto;
		padding: 0em 0.0em;
		text-align: center;
	}
	
	#body_header_logo {
		
	}
	
	/* header logo */
	#img_logo {
		margin-top: 4.0em;
		height: 3.5em;
		width: 21.9em;
	}

/* ------------------------------------------------------------------------------------------------------- */
/* BODY HEADER NAVIGATION
/* ------------------------------------------------------------------------------------------------------- */
#body_header_nav {
	position: relative;
	z-index: 2;
	height: 9.0em;
	width: 100%;
}
	
	#body_header_nav_inner {
		height: auto;
		min-height: auto;
		width: 94.0em;		/* becomes 980 with the 20 padding on the left and right */
		margin: 0 auto;
		padding: 0.8em 0.0em 0.8em 0.0em;
		text-align: center;
	}
	
	
/* ------------------------------------------------------------------------------------------------------- */
/* 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: 4.0em; 	/* match the height of the footer to prevent an overlap on small windows */
	margin-bottom: 8.0em;	/* add 40 to create a buffer */
}
	
	#body_content_inner {
		width: 94.0em;		/* becomes 980 with the 20 padding on the left and right */
		margin: 0 auto;
		padding: 0em 0.0em;
	}
	
	#body_content_container {
		
	}
	
	
/* ------------------------------------------------------------------------------------------------------- */
/* BODY FOOTER - body footer, always floats to the bottom, never overlaps the content
/* ------------------------------------------------------------------------------------------------------- */
#body_footer {
	position: absolute;
	z-index: 4;
    bottom: 0;
    height: 4.0em;
	width: 100%;
}
	
	#body_footer_inner {
		width: 94.0em;		/* becomes 980 with the 20 padding on the left and right */
		margin: 0 auto;
		padding: 0.8em 0.0em 0.8em 0.0em;
		text-align: center;
	}
	
	#body_footer_navigation {
		width: 94.0em;
		margin: 0 auto;
		padding: 0em 0.0em;
		color: #999;
	}
	
	#body_footer_navigation * {
		color: #999;
	}