
/* ---------->>> 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:auto;
	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-left:25px;
	padding-right:0px;
	border:0px dashed #333333;
}	
	
#mainNav {	
	position:absolute;
	top:30px;
	right:0px;
	padding-right:70px; /* 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 {	
	display:none;
}

/* (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;	
	clear:both;	
	padding-left:67px;     /* LC fullwidth */
	padding-right:67px;   /* RC fullwidth + CC padding */
	text-align:left;
	left:0px;
	min-height:403px;
	overflow:auto;	
	margin-bottom:75px;     /* build in some bottom-margin */ 
	border:0px #cc0000 double;
}

#content .column {
	position: relative;
	float: left;
}

/* center column */
/* remove bkg image, reset bkg color and remove borders for Flash layout */
#bodyTextArea  {
	width:100%;
	background-image:none;
	background-color:##000000;						
	padding-right:0px;	
	padding-top:29px;
	padding-bottom:60px;
	border:0px solid #ffffff;
}

/* remove padding for Flash layout */
#bodyText {
	padding:0px;
}

/* left column - since Flash interior is wider, increase margin-left further */
#leftColumn {
	width:67px;           /* LC width */
	/* height:260px; */
	padding:0px;			  /* LC padding */
	right:67px;              /* LC fullwidth + CC padding */
	margin-left:-866px;
	background-image: url(../graphics/layout/back_left.gif);
	background-repeat: none;
	background-position: left bottom;
	border:0px #ffcccc solid;
}

/* right column  */
#rightColumn {
	position:relative;
	width:67px;     /* RC width */
	/* height:260px; */
	padding:0px;    		  /* RC padding */
	margin-right:-450px;
	background-image: url(../graphics/layout/back_right.gif);
	background-repeat: none;
	background-position:right bottom;
	border:0px #ffcccc solid;
}

/* don't display the sub-nav hr divider on flash layouts */
#subNavRule {
	display:none;
}

/* don't display the normal page title on flash layouts */
#pageTitle {
	display:none;
}

/* 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 */
/* drag footer out closer to left side of layout, and change padding, for Flash layout  */
#footer {
	clear:both;
	position:absolute;
	text-align:left;
	bottom:0px;
	left:75px;		
	padding-top:0px;
	padding-bottom:0px;
	width:500px;				
	border:0px #333333 double;		
}