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


#header_content_footer_wrapper {
	margin: auto; /*to center anything in pixels or percentage less than 100*/
	position: relative; /*enables you to position things relative to the container*/
}
#header_content_footer_wrapper_2 {
	width: 100%;
	margin: auto;
	position: relative;
}

/**********************************************************
 *	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.
 **********************************************************/

* html #header {
	position: relative; /*needed for IE6 to render background*/	
}

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

#site_photo {
	float: left;
	position: relative; /*this along with z-index needed for photo to be visible on Gecko*/
	z-index: 2000; /*needs a z-index higher that the Karma default for the menu*/
}

#site_photo img {
	display: block; /*gets rid of 3px margin applied to inline elements on Gecko when in Strict mode*/
	margin: auto;	/*centers block elements*/		
}
* html #site_photo {
	display: inline; /*to counter-act IE6's double float margin bug*/
	margin-right: -3px; /*to counter-act IE6's 3px jog*/
}

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

#main_links ul li {
	 display: inline;
}

#main_links ul li a {
	padding: 0 .5em;
}

#main_links ul li img {
	vertical-align: top; /*gets rid of extra spacing in IE*/
}


/*********************************************************
 *	TEASERS
 *********************************************************/

#teaser_group_1 {
	width: 200px;    	
	float: left;
	clear: left;
	position: relative; /*makes teasers appear in IE*/
	overflow: hidden;
	padding: 1px 0px;
}

* html #teaser_group_1 {
	display: inline; /*to counter-act IE6's double float margin bug*/	
}

#teaser_group_2 {
	clear: both;
}
.teaser {
	padding-top: 0px;
	position: relative; /* so IE will display the BG*/
}
.teaser_heading span {
	display: block;
	padding: .25em;
}
* html div.teaser_heading span {
	height: 1%;
}



/***********************************************************
 *	CONTENT
 ***********************************************************/
#content_wrapper {
	float: right;	
	width: 100%;
	margin-left: -99%; /* must be greater than the width of the menu/teaser column so that content is clickable but less than 100% for the footer to clear in IE*/
	overflow: hidden;
}
#content {			
	margin-left: 200px; /*must be greater than the width of the menu/teaser column to uncover it*/
}

/*************************************************
 *	FOOTER
 *************************************************/

#footer {
	clear: both;	/*causes footer to go below content and/or menu/teaser column, whichever is longer*/
	padding: .5em; 
}
* html div#footer,
* html div#teaser_group_2 {
	height: 1%;
}