/*This is layout B-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; }
#content_wrapper, 
#main_links, 
#teaser_group_1 { overflow: hidden; }
#content { overflow-x: hidden; }
#header h1 { padding: 50px .25em 0 .25em; }
#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;
}
#header_content_footer_wrapper_2 {
	width: 100%;	
}

#header {
	height: 150px;
}


/* postion and z-index needed for photo to be visible on Gecko*/
/* width needed to center image when less than max width*/
#site_photo {
	float: left;
	position: relative;
	z-index: 20;	
	height: 150px;	
}
/*height here instead of div#header to avoide 3px space when
 *  photo is uploaded*/

* html #site_photo {
	margin-right: -3px;
}

/* 'display:block' gets rid of 3px margin applied to inline
  *  elements on Gecko when in Strict mode
  */
#site_photo img {
	display: block;	
}

#main_links {
	width: 200px;
	float: left;	
	clear: left;
}
#main_links ul li a {
	display: block;
}

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

#teaser_group_1 {
	width: 200px;    	
	float: left;
	clear: left;		
}


#teaser_group_2 {
	clear: both;
}




/* width 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 correctly in IE6
 */ 
#content_wrapper {
	float: right;
	clear: right;
	width: 100%; /* hasLayout trigger needed for IE6*/
	margin-left: -99%;		
}

/* margin-right must be greater than the width of the menu/teaser column 
 * to uncover it
 */
#content {			
	margin-left: 200px;		
}

#footer {
	clear: both;	
}

div#teaser_group_2 div.teaser { width: 100% } /*needed for Safari to render the 
divs all the way across the page*/

div#main_links ul li { position: relative; } /*needed for Gecko*/

/* position: relative is needed for IE6 to render backgrounds and counter-act 
other quirkiness */
 
* html .teaser, 
* html #teaser_group_1, 
* html #header,
* html div.teaser_heading {
	position: relative;
}

/*hasLayout trigger to coax IE6 into displaying individual borders with no 
background, not go haywire on blocked a's inside li's,  and get rid of extra 
top space in clearing divs*/
* html div#footer,
* html div#teaser_group_2,
* html #main_links ul li a,
* html .teaser {
	height: 1%;
}

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