* {margin: 0; padding: 0;}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.5em; 
font-size: 1.0 ;  
color: #000; 
background:  #FFF;
text-align: center;
margin: 0 auto;
}

img {border: 0;}

h1, h2, h3, h4, h5, h6 {margin-bottom: 1.2em; line-height: 1.5em;}
h1 { font-size: 2em; }
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.2em;}
h5, p {font-size: 1em;}
h6 {font-size: 0.8em;}
p{ text-indent: 0.5em;
margin-bottom: 0.9em;
font-weight: 600;
}

a {text-decoration: none;
color: blue;}

a:hover {text-decoration: underline;
}

/*div#leftshadow {
background: url(leftshadow25_50.gif) repeat-y top left;
}

div#rightshadow {
background: url(rightshadow25_50.gif) repeat-y top right;
}   */

/* this is the div that controls the width of the display */
div#container_wrapper {
	
	/* This is the width that controls the width of the entire layout window. You can expand or contract this and everything will adjust to fit. 
	If you use an EM width, all of the columns will expand and the text will grow larger, although the window will expand. This EM layout width is perfect for those with wide-screen monitors, as they can expand the layout to fill any screen. 
	The percent width will keep the layout at the percentage you set, but after several expansions you will lose text, however, because the text will expand beyond the column width. This layout is better for those who have regular monitors, though, because the text will expand a little for those with accessibility issues. Obviously, the smaller the column the easier it is to lose text when the user zooms in. For a 3 column layout the user could expand several times without losing text. The percent layout resembles a table layout.
	Experiment and see what works best for you.
	*/
	width: /*950px;*//*88%;*/925px; 
	margin: 0 auto;
	text-align: center;
	background: #FFF;
}

/* this is the div that places the shadows on each side. The total width of the div is container_wrapper - 50px, which is the length of each of the two 25px shadows */
/*div#shadow_container {
	overflow: hidden;/*this overflow: hidden prevents the containers from being seen when they are slid off to the left!!!  */
/*	margin: 0 25px;
	position: relative;
}
*/

/* masthead stuff */

div#masthead {
height: 189px;
overflow: hidden;
background: url(Banner.jpg);
}


/* NAV div stuff   */

/*div#nav {
height: 75px; 
background:#CCCC00;
}
*/

/* This is the container that holds the main (middle) section .
It is composed of maintop, main, and mainbottom */
div#maincontainer {position: relative;
overflow: auto;
margin: 0 auto 0 auto;
width: 925px;

} 

div#maintop {
width: 925px;
height: 110px;
background: url(BannerShadowTop.jpg);
}


div#leftshadow {
background: url(ShadowLeft.jpg) repeat-y top left;  /* 20px wide  */
}

div#rightshadow {
background: url(ShadowRight.jpg) repeat-y top right;   /* 20px wide  */
}

div#main {
width: 885px;  /* 925px  -20px  -20px  = 885px  */
background: #FFF;
/*height: 400px;*/
margin: 0 auto;
overflow: auto; /* need this to expand main div to cover floated content   */
}

div#news {width: 650px;
height: 60px;
margin: 0 auto;
}

#news ul {list-style: none;
text-align: center;
}



/* global parameters for the 5 container divs */

/* container_1 = 15% , container_2 = 12% container_3 = 40% container_4 = 20% container_5 = 13%  The containers are all 100% width and are pushed to the right to create the background columns. In HTML, order is 5 4,3,2,1. Each are relatively positioned.
since container_1 is on top and container_5 is on the bottom, container_1 covers them all. We move container_4 over  to the left the width of container_5, which moves 3 2 and 1 as well (since they are relatively positioned to container_4). This exposes the background color of the 5th container on the bottom. Then we move container_3 over to the left the width of container_4. This moves container_2 and container_1 over as well, since they are relatively positioned to container_3, and exposes the background color of container 4. `Then we move container_2 over to the left the width of container_3. This moves container_1 over as well, since it is relatively positioned to container_2, and exposes the background color of container_3. To finish our equal height columns, all we have to do is move container_1 over to the left the width of container_2. This exposes the background color of container_2, and leaves the background color of container_1 on the left, as the first column.
Because we make overflow:hidden on shadow_container, which holds all of the containers, we don't see the containers as they slop off to the left, all we see are the nice backgrounds that will define each column of data.
Note that if you don't want to place all 5 containers inside another div, you put overflow:hidden on all of the containers.
This system is the easiest and most elegant i have found, and you can create as much padding as you want by shortening the data columns below and shifting them to the middle of the container backgrounds.

*/

div#container_2 {
/* container_2 stays where it is, percectly aligned with the conyainer (shadow) window*/
	overflow: hidden; /* this is the ONLY concession we make to IE 6. Because IE 6 doesn't handle positioning correctly, we need this to cut off the other container divs when they are pushed left. */
	float:left; 
    width:100%;
    text-align: left;
    position:relative;
/*background:  url(mandelbrot11.jpg) top right repeat-y ;*/
	
}



div#container_1 {
/* container_1 moves to the left the width of container_2, to expose it. Because all of the column divs are contained within container_1, they have all been moved over precisely the width of  container_2. Therefore, each column div must be pushed back to the right exactly this distance to line up with the container backgrounds.
*/
    float:left;
    width:100%;
    text-align: left;
    position:relative;
    right:40%;  
	/*background: url(mandelbrot4.jpg) top right repeat-y ;*/
	
}


/* These are the data columns that hold text, images, multimedia, etc. */
/* global parameters for the 2 columns  */
/* can space these columns anyway you'd like. Remember that they are  contained within container_1 div and are offset to the left, precisely: width container_2, so they have to be pushed back to the right exactly that amount.  
*/
/* container_1 = 60% , container_2 = 40% In this case, the data columns are all offset to the left (being hrld in container_1) by 40%
*/
div#column1 {
    float:left;
    width:58%;  /* reduce width by 2% to create 1% padding on each column */    
    position:relative;
    left:41%;  /* move col over an extra 1%  */
	overflow: hidden; /* prevent data from leaking out under extreme exppansion */
}

#column1 img {display: block;
margin: 1em auto 2em auto;
}

#column1 h4 {text-align: center;
}

div#column2 {
    float:left;
    width:38%;  /* reduce width by 2% to create 1% padding on each column */    
    position:relative;
	left: 43%; /* move col over 1 + 1 + 1 % to account for padding on 1st col plus 1% padding for indent on column2 */
	overflow: hidden; /* prevent data from leaking out under extreme exppansion */
	
}

#column2 img {margin: 2em auto 4em auto;}

div#mainbottom {
	width: 925px;
	height: 110px;
	background: url(BannerShadowBottom.jpg);
	margin-top: -20px; /* bring the text down into mainbottom */
}


div#footer {
	
	height: 189px;
    overflow: hidden;
    background: url(Footer.jpg);
}