#containermasterdocument {
    float:left;
    width:796px;
	overflow:none;
	display:inline;

}


/*the container width set to 796 to match screen resolutions up to 800 px */
/* Positioning is relative and set to zero to line up with the start of the parent container */

#containermasterheader {
    float:left;
    width:760px;
	border-style:none;
	overflow:hidden;
		margin-left:1.0%;
	margin-right:1%;
display:inline;
position:relative;left:0px;
padding-top:2%;
}


/* Positioning is relative and set to "0x" zero to line up with the main document area - don't know why this is so
may have to check into the CSS behind the menus */
/* float is set to left, positioning is set to zero, overflow is set to "NONE" so allow the menus to show */

#containermasterheadernavbar {
    float:left;
    width:760px;
	border-style:none;
	overflow:none;
		margin-left:1%;
	margin-right:1%;
display:inline;
position:relative;left:0px;
}

/* This is the main document area - I have set it to 754 px wide - just my choice - however, this requires that
the sum of the "column 1" and "column 2" widths add up to 754 - keep this in mind when setting the column widths and relative
positioning of the respective divs */
/* Positioning is relative and set to zero to line up with the start of the parent container */
	
#containermaster {
    float:left;
    width:754px; /* adjust width of main container box */
	border-style:solid;
border-color:#E3E3E3;
	border-width:3px;	/* adjust border of main container box */
	overflow:hidden;
	margin-left:1%;
	margin-right:1%
	display:inline;
	position:relative;left:0px;	/* adjust position of main container box */
}

/* This is tfooter area - I have set it to 754 px wide to match the main document area */
/* Positioning is relative and set to zero to line up with the start of the parent container */

#containermasterfooter {
    float:left;
    width:754px; /* adjust width of footer container box */
	border-style:solid;border-color:#E3E3E3;
	border-width:0px;
	border-top-style:none;	
	overflow:hidden;
	background:rgb(0,0,0);
		margin-left:1%;
	margin-right:1%;	
	position:relative;left:0px;	/* adjust position of footer container box */

}
/*the container widths can also be set to 754 without affecting the layout - MH to test this */
/* since these two containers will be nested within a parent float div that is set to 754 px */
/* Container 1 is shifted to the right by 242 px to expose the color of the container 2 div (green)
underneath it - this will provide the background for the 242 pix wide column 1 */

#container1 {
    float:left;
    width:796px;
    background:rgb(0,0,0);
	position:relative;
	left:270px;	border-left-style:solid;	border-width:6px;border-color:#E3E3E3;

}

/* container 2 div provides the background color, and does not need to be shifted) */

#container2 {
    float:left;
    width:796px;
    background:rgb(0,0,0);	
}

/* Both columns 1 and 2 are contained in the "Container 1" div. Since we shifted container 1 div to the right by 
242 px to expose the background underneath, we then need to shift back both columns 1 and 2 by 242 px to be aligned over
their respective colors */

#col1 {
    float:left;
    width:245px;
    position:relative;
    right:270px;
	margin-top:0.25em;
	margin-bottom:0.25em;
	margin-left:1%;
	margin-right:3%;
}

/* width of column 2 is set to 754 - 242 = 512, minus 6 pixels for the middle margin area,  = 506 */
#col2 {
    float:left;
    width:460px;
    position:relative;
    right:270px;
	margin-top:0.25em;
	margin-bottom:0.25em;
	margin-left:0%;
	margin-right:4%;
}