/* ---------->>> the following styles govern the positioning and size of objects comprising the
 basic interior layout structure <<<-------------------------------------------------------------------------*/

/* ---------->>> 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.) */   
*{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%;
}

/* ie7 understands min-height, but ie6 (and under) does not; this hack should force the height
for these browsers and allow the left background graphic to scroll all the way to the bottom of viewport */
/* mac hide \*/
/* html, body, #outer_wrapper {height:100%} */
/* end hide */
	
/* 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 */
	width:100%;	    	 /* also seem to need a width defined */
	min-width:800px;     /* 2 x (left column full width + center column padding) + right column full width */
	text-align:center; 
	background-color:#043167;
	border:0px solid #ffffff;
}		

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

#outer_wrapper {
	position:absolute; /* wrapper divs seem to need absolute positioning in order to force 100% height */
	/* width:951px; */
	width:924px;
	left:50%;
	margin-left:-461px; /* this centers horizontally for absolute positioning */
	background-image: url(../graphics/layout/back.gif);
	background-repeat: repeat-y;
	background-position: left top;
	background-color: #ffffff;
	border:0px double #CC0000;
}

/* margin-bottom doesn't seem to work when set in the body with absolute positioning (although top margin does);
 so create two separate styles (below) to get this same effect */
	
/* 30 pixel gap at top of page alyout */
#topMargin {
	position:relative;
	top:0px;
	height:30px;
	width:100%; 
	background-color:#043167;
	border:0px solid #ffffff;
}

/* 30 pixel gap at bottom of page layout */
#bottomMargin {
	position:absolute;
	bottom:-5px;
	height:35px;
	width:101%;
	background-color:#043167;
	border:0px solid #ffffff;
}

#header {
	position:relative;
	top:0px;
	width:100%;  /* make this automatically expand to outer_wrapper width */
	background-color: #296DC0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF; 
}

#pageCollage {
	position:relative;
	width:284px; height:70px;	/* *** DMS 11-19-07 - added height */
	float:right; 
	border:0px #666666 solid;
}

/* *** DMS 11-19-07 - added this style to space teaser out after collage, now in same div together. not sure where 
neg margin coming from yet, but whatever. 11-20-07 - ok, not needed after all - just had to clear the floats above this thing. */
#rightColTeaser {
	position:relative;
	margin-top:0px;	
}
	
/* container for left, center and right columns */
#content {
	position:relative;
	padding-left:180px; 
	padding-right:284px;    /* right column full width + any center column padding */
	text-align:left;
	top:0px;				/* *** DMS 11-19-07 - was -75px */
	left:0px;
	height:auto;
	overflow:auto;	
	min-height:300px;	
	margin-bottom:175px;   /* build in some bottom-margin to equal height of the footer */ 
	/* clear:both; */
	clear:right;	 	   /* clear right and left floats contained in subNavArea and pageImgArea */
	border:0px #666666 solid;
}

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

/* center column - interior pages */
#bodyTextArea {
	width:100%; 
	/* width:460px; */			/* *** DMS 11-19-07 - safari wants 460px here. Well, maybe not. Hold on... ok, nevermind. */
	padding-top:23px;   	 /* spaces the page title down away from the header */
	border:0px #333333 solid;
}

/* this spaces the actual text away from the left and right columns 
(pretty much the same as the #centerColumn on index page) */
#bodyText {
	padding-top:10px;
	padding-left:35px;
	padding-right:60px;
	border:0px #ffcccc solid;
}

/* left column */
#subNavArea {
	width:160px;             /* LC width */
	/* padding: 0 10px; */    /* LC padding */
	right:160px;             /* LC fullwidth + CC padding */
	margin-left:-480px;
	padding-top:60px;
	padding-left:20px;
	border:0px solid #cccccc;
}

/* right column - interior pages (pretty much the same as the #rightColumn on index page) */
#pageImgArea {
	width:284px;                /* RC width was 284 */
	/* min-height:400px; */
	/* padding-left:10px; */    /* RC padding */
	margin-right:-470px;
	padding-top:0px;			/* *** DMS 11-19-07 - was 70px (spaces the teaser ad down so it doesn't cover the pageCollage) */
	border:0px #333333 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:0px;       /* IE 7 didn't like margin-left , so use left instead */
	padding-left:0px;
	padding-top:15px;
	padding-bottom:0px;
	height:150px;
	width:100%; 	/* make this automatically expand to outer_wrapper width */
	border:0px #ffcccc solid;	
}	

.footerCopy {   	
	padding-left:210px;
	padding-right:225px;
	font-size:11px;
	color:#999999;
	text-decoration:none;
	border:0px solid #000000;
}

div.footerCopy p {
	color:#999999;
	padding-top:15px; 
}