/*********************************************************
   Author - Sean Connors of Web Merchant Services
   www.WMSmerchantservices.com - 707-443-4447

   This CSS file defines the structural elements of the CSS; styling is handled in the style.css file.
   Tested against: IE 6 & IE 7, FF 2 & FF 3, Safari 3 for PC's, Opera 9.6, and Google Chrome 0.2 beta
   Some fixes were needed for IE 6 -- go figure!
 *********************************************************/

html {
	height: 100%
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
}
#outer-wrapper {
/* This wrapper is here solely to house the background image so that is doesn't bleed below the footer. */
/* See style.css */	
	margin: 0;
	padding: 0;
}
#header-wrapper {
/* This wrapper is here that we can override the background image in the outer-wrapper for the header. */
	height: 184px;
}
#header {
	margin: auto;
	width: 918px;
}
#header #logo {
	position: relative;
	top: 39px;
	left: 5px;
}
#bounding-container {
/* This container is used to fix the width and center the layout if desired */
	position: relative;		/* This is just to assist with any relative positioning or z-indexing below */
	width: 918px;			/* Fixed width */
	margin: auto;			/* Center it */
	/*margin-top: 20px;*/
}
#contents-container {
/* This container wraps around the left and right column contents; it's used structurally to setting 
   both columns to equal height. */
	/* This is part of getting colums to have equal display height; see below */
	/*overflow: hidden;*/
}
#contents-col {
/* This container houses the main contents of the page; it occurs above the left column in the markup, 
   but to the right of it in the display. */
	float: right;			/* Here in lies the trick: by floating this AND the left colum to the 
						   right, they naturally flow in reverse order ;-) */
	/* This div started with a width of 580px ( 780px - 200px ), but had to be reduced to account for 
	   borders and padding below */
	width: 738px;			/* The width is also crucial to get things positioned correctly using the 
						   float property */
	/* If adding borders, be sure to shave off the width of the borders from the width of the div */
	/* If adding padding, be sure to shave off the width of the left and right padding from the width 
	   of the div */
	margin-top: 23px;
	padding: 0 10px 10px 10px;			/* Padding is pretty much always called for here, eh? */
	/* This trick is used to get the colums displaying at equal length. The value for X is the largest. */
	/*margin-bottom: -20000px;  /* X */
	/*padding-bottom: 20010px;  /* X + padding-bottom */
}
#contents-col #rightbar {
/* This container houses optional content in a right sidebar withing the main contents column so that 
   the main contents will wrap under this sidebar. */
/* NOTE: To have this content preceed the main contents of a page using this sidebar, some more 
   structural work is needed so that both the main contents and the sidebar can be floated left of each 
   other and again appear in reverse order. */
	float: right; 
	margin-left: 5px;
	padding: 0;
	width: 200px; 
}
#nav-col {
/* This container houses the left column, typically a navication menu. It is floated to the right of 
   the main contents so that is ends up to the left of the main contents. */
	float: right;		/* Same as with the contents-col div */
	width: 149px;		/* Again, same as above, only if this is changed, remember to change the 
					   width of the contents-col */
	/* This trick is used to get the colums displaying at equal length. The value for X is the 
	   largest */
	margin-top: 22px;
	/*margin-bottom: -20000px;  /* X */
	/*padding-bottom: 20000px;  /* X + padding-bottom */
	padding-left: 10px;
}
#subcontents {
	clear: both;
	margin: auto;
	width: 777px;
}
#subcontents-right {
	float: right;
	width: 390px;
}
#subcontents-left {
	float: right;
	width: 387px;
}
#footer-wrapper {
/* This wrapper is here that we can override the background image in the outer-wrapper for the footer. */
	clear: both;		/* Clear the floats in the above two columns */
	margin: 0;
	padding: 0;
}
#footer {
/* This container houses the footer contents; all that is needed here is to clear the above foats. */
	/*width: 1000px;*/
	height: 207px;
	margin: auto;
	/*padding: 5px;*/
}

/* IE 6 hack: */
* html #nav-col {
	width: 146px;
}

/* IE 6 & 7 hack: */
* html #contents-col, *+html #contents-col {
	margin-top: 34px;
}