/***********************************************************
 *	BACKGROUND & GENERAL PROPERTIES
 **********************************************************/

#header_content_footer_wrapper {
	position: relative;	/*needed to absolutely position elements if width less than 100%*/
	margin: auto; /*needed to center site if fixed or less than 100%*/
}
#header_content_footer_wrapper_2 {	/*once you have your content in and images and such, you may need the following to make IE behave:*/
	width: 100%;
	position: relative;
	margin: auto;	
}
	


/**********************************************************
 *	HEADER & SITE PHOTO
 *	If you want the user not to be able to change the main
 *	photo and/or site title, place "display: none" in the 
 *	style for that element.
 **********************************************************/

#header {
	position: relative; /*needed for BG to render in IE6*/	
}

#header h1 {
	padding: .25em;	
}
* html #header h1,
* html #main_links,
* html .teaser {
	height: 1%; /*hasLayout trigger that forces IE6 to display individual borders*/
}

#site_photo {
	display: block;
	float: right; 
	position: relative; /*this and z-index needed for image to appear on Gecko*/
	z-index: 2000;	
}
* html #site_photo {
	display: inline; /* to counter-act IE6's double margin float bug*/
}
#site_photo img {
	display: block; /*needed to remove 3px margin under inline elements in non IE6 browsers*/
	width: 100%;
}


/*********************************************************
 *	MAIN MENU
 *********************************************************/
#main_links {
	text-align: center;
	padding: .25em;
}

#main_links ul li {
	display: inline; /*needed for menu to display horizontally*/
}
#main_links ul li a {
	padding: 0 .5em;
}

#main_links ul li img {
	vertical-align: top; /*aligns images to the top of their container*/
}


/*********************************************************
 *	TEASERS
 *********************************************************/
 #teasers {
	 overflow: visible;
 }
#teaser_group_1 {
	float: right;
	clear: right;
	width: 200px;   
	position: relative; /*this together with z-index needed for teasers to appear on IE6*/
	z-index: 20;
	overflow: hidden;
	padding: 1px 0; /*to counter-act Gecko's collapsing margin bug*/
}
* html #teaser_group_1 {
	display: inline; /*to counter-act IE6's double margin float bug*/
}
#teaser_group_2 {
	clear: left;
}

.teaser_heading span {
	display: block;
	padding: .25em;
}
* html div.teaser_heading span {
	height: 1%;
}
.teaser {
	padding-top: 0px;
	position: relative;
}




/***********************************************************
 *	CONTENT
 ***********************************************************/

#content_wrapper { /*style here enables a liquid layout with a fixed with teaser column*/
	float: left;  	
	width: 100%; /*hasLayout trigger for IE6 */
	margin-right: -99%; 	
	position: relative;
	overflow: hidden;
}

#content {   		
	margin-right: 200px;
	overflow: hidden;  		
}

* html div#content {
	overflow: visible;
	overflow-x: hidden;
}

#content h2#page_title {
	position: relative;
}
/*************************************************
 *	FOOTER
 *************************************************/

#footer {
	clear: both; /*to keep the footer below the content and/or the teasers*/     	
	padding: .5em;    /*right and left padding plus width equal 100%*/	
}
* html div#footer {
	height: 1%;
}