/*This is layout A-4 from The Karma Wizard (karmawizard.com) ideally to be used 
in conjunction with KarmaCMS (http://karmasites.com} though along with the 
corresponding HTML can be used anywhere.  The barebones HTML file can be 
found here: http://karmawizard.com/downloads

The CSS has been developed for maximum flexibility in design.  
The corresponding HTML has been developed for maximum number of possible layouts.
Tested and working in IE6+, FF 1.1+, and Safari 1.2+  

The following CSS and corresponding HTML can be used without restriction*/

/* div#site_photo should be placed directly above the div#header for this layout */
/************************************************************************/

/*NON-ESSENTIAL PORTION*/
/*The following values can be changed to your preference or deleted*/


#header_content_footer_wrapper,
#header_content_footer_wrapper_2 { margin: auto; }
#main_links, .teaser_heading, #header h1 { text-align: center; }
#footer { padding: .5em; }
#main_links .main_link a { padding: 0 .5em; }
#content_wrapper, 
#main_links, 
#teaser_group_1 { overflow: hidden; }
#content { overflow-x: hidden }
#header h1 { padding: 50px .25em 0 .25em; }
#header, #site_photo { 	height: 150px; }
#main_links ul li img {	vertical-align: top; }

/* Uncomment the following declarations if not using KarmaCMS *//*

body { padding: 0; margin: 0; }
#main_links ul { padding-left: 0px; }
#content, .teaser_content { padding: .5em; }
*/



/***************************************************************************/


#header_content_footer_wrapper {
	position: relative;	
}

/*
 * The following declarations are necessary to make IE6 behave.
*/
#header_content_footer_wrapper_2 {
	width: 100%;	
}



/*
 * position and z-index needed for image to appear on Gecko
 */
#site_photo {
	float: left; 
	position: relative;
	z-index: 100;		
}

/*to counter-act IE6's 3px jog between floated divs and touching elements*/
* html #site_photo {	
	margin-right: -3px;	 
}

/*
 * 'display:block' is needed to remove 3px margin under inline
 *  elements in non IE6 browsers
 */
#site_photo img {
	display: block;	
}

#main_links {	
	clear: both;
}



/*
 * 'display:inline' needed for menu to display horizontally
 */
#main_links ul li {
	display: inline;
}

/*
 * 'position:relative' and 'z-index' are needed for teasers 
 * to appear on IE6
 */
#teaser_group_1 {
	float: left;
	width: 200px; /*this can be adjusted to whatever you prefer*/   
	position: relative;
	z-index: 20;	
}

#teaser_group_2 {
	clear: both;	
}

/*
 * style here enables a liquid layout with a fixed with teaser column.
 * width:100% is necessary to trigger 'hasLayout' for IE6
 * 'margin-right' must be equal to or greater than div#teaser width
 */
#content_wrapper {
	float: right;  	
	width: 100%;
	margin-left: -99%;		
} 

/* must be greater than or equal to column width */
#content {   		
	margin-left: 200px; 	 
}

#footer {
	clear: both;
}


/*hasLayout trigger that forces IE6 to display individual 
	borders and fixes the extra padding on the clearing div in that browser*/
* html #main_links, 
* html .teaser, 
* html div#footer,
* html div#teaser_group_2 {
	height: 1%; 
}

/*to counter-act IE6's double margin float bug in case margin is applied*/
* html #teaser_group_1, * html #site_photo {
	display: inline; 	
}


/*needed to counter-act IE6 quirkiness*/

* html #header_content_footer_wrapper_2,
* html #content_wrapper,
* html #header,
* html #header h1 {
	position: relative;
}