/* ---------->>> global position styles: <<<-----------------------------------------------------------------------*/
/* ------------  the following styles govern the position/style html, body and wrapper elements -------------------*/

/* note: this is a global white space reset.
 (asterisk is the universal css selector - all descendents will have this setting applied.) 
 this is necessary to make sure thickbox overlay has no gaps in covering 100% of the screen,
 but it is also useful for forcing me to explicitly specify only those elements that really need 
 padding/margins, like stuff (paragraphs, images, etc.) contained in bodyText div. */   
*{padding: 0px; margin: 0px;}
				
/* 'min-height: 101%' forces firefox to always have a scrollbar, even on short pages,
   so that layout doesn't shift, which can throw off the sub-menus by a pixel or two. */		  
html, body, #outer_wrapper  {
	min-height: 100%; 
	height: auto !important;
	height: 100%;
}
	
/* specify a min-width for the body as wide as the wrapper div: 
(prevents negative (inaccessible) left-margins in narrow browser windows 
when using netscape 6+/mozilla on win32.) */					
body {			
	/* position:absolute; */ /* wrapper divs seem to need absolute positioning in order to force 100% height */
	text-align:center; /* this centers all child divs for ie (ie doesn't center based on auto-margins) */	
	width:100%; /* also seem to need a width defined */
	min-width:1000px;		
	background-color: #000000; /* set a background color in case background image can't be displayed */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
	border:0px solid #999999;
}

/* ---------->>> layout positioning styles: <<<--------------------------------------------------------------------*/
/* ------------  the following styles govern the position and style of the basic parts of the layout --------------*/	

#outer_wrapper {
	position:relative; /* wrapper divs seem to need absolute positioning in order to force 100% height */
	width:1000px;
	margin:0px auto;
	background-image: url(../graphics/layout/back.gif);
	background-repeat: repeat-y;
	background-position: left top;
	background-color: #000000; /* set a background color in case background image can't be displayed */
	border:0px double #CC0000;
}

#header {
	position:relative;
	top:0px;
	height:126px;	
	text-align:left;
	width:1000px;
	padding-right:0px;
	padding-top:0px;
	background-image: url(../graphics/layout/header_utility.gif);
	background-repeat: no-repeat;
	border:0px #cccccc dotted;
}

#masthead {
	position:relative;
	top:0px;
	left:0px;
	width:376px;
	height:126px;
	padding-right:0px;
	border:0px dashed #333333;
}	
	
#mainNav {	
	position:absolute;
	top:30px;
	right:0px;
	padding-right:105px; /* this spaces it out from outer_wrapper, so it lines up with end of content area */
	width:300px;
	text-align:left;
	height:auto;
	border:0px solid #cccccc;
}

#subNav {	
	position:relative;
	width:auto;
	height:29px;
	border:0px solid #cccccc;
}

/* (overflow:auto setting is needed here to force content div to automatically expand around bodytext, 
 which has a float:right setting - this takes it out of the normal page flow, like using position:absolute.) */
/* container for left, center and right columns */
#content {
	position:relative;		
	padding-left:108px;      /* LC fullwidth */
	padding-right:108px;     /* RC fullwidth + CC padding */
	text-align:left;
	top:0px;
	left:0px;
	height:auto;
	overflow:auto;	
	margin-bottom:75px; /* build in some bottom-margin */ 
	border:0px #cc0000 double;	
}

#content .column {
	position: relative;
	float: left;
}

/* center column */

#bodyTextArea {
	width:782px;
	min-height:400px;
	/* padding: 0px;   */    /* CC padding */
	background-image: url(../graphics/layout/content_screen.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
	background-color: #0C0C0C; 
	/* border:1px #ffffff solid; */
	padding-bottom:75px; /* build in some bottom padding to equal height of footer */ 
}

/* this spaces the actual text away from the left and right columns */
#bodyText {
	padding-top:50px;
	padding-right:50px;
	padding-left:50px;
	padding-bottom:25px;
	border:0px #ffcccc dashed;
}

/* left column (not present in Flash layout) */
#leftColumn {
	position:relative;
	width:108px;			  /* LC width */
	/* height:280px;  */
	padding:0px;			  /* LC padding */
	right:108px;              /* LC fullwidth + CC padding */
	margin-left:-784px;
	/* 	background-image: url(../graphics/layout/back_left.gif);
	background-repeat: none;
	background-position: left top; */
	border:0px #ffcccc solid;
}

/* right column (not present in Flash layout)  */
#rightColumn {
	position:relative;
	width:108px;        	 /* RC width */
	/* height:280px;  */
	padding:0px;    		  /* RC padding */
	margin-right:-475px;
	/* background-image: url(../graphics/layout/back_right.gif);
	background-repeat: none;
	background-position: right top; */
	border:0px #ffcccc solid;
}

/* make sure to build in enough margin-bottom in the #content div to space this footer out;
otherwise, on long pages, the footer might overlap the text */
#footer {	
	clear:both;
	position:absolute;
	text-align:left;
	bottom:0px;
	left:170px;					/* IE 7 didn't like margin-left , so use left instead if needed */
	padding-bottom:30px;
	width:500px;				/* outer_wrapper width minus LC width */
	border:0px #333333 double;	
}