@import url(/css/default.css);

h1 {
	font-size:24px;
	font-weight:normal;
	line-height:30px;
	color:#B2000D;
}

#banner {
	height:224px;
}

#main {
	background:none;
}

#main #content {
	margin-left:0px;
}

#main #content .intro {
	width:auto;
	margin-right:8px;
	padding-right:0;
	padding-bottom:0;
	
	background-image:url(../images/bg/sidebar_bg_vert_gradient_02.jpg);
	background-position:bottom left;
	background-repeat:repeat-x;
}

#main #content .intro p {
}

#main .sidebar.left {
	position:absolute;
	z-index:0;
	top:-120px;
	width:200px;
	height:200px;

	background-image:url(../images/bg/main_bg.jpg);
	background-position:top left;
	background-repeat:no-repeat;
}

* html #main .sidebar.left {
	top:-104px;
}

#main .intro {
	margin-bottom:16px;
	padding-right:8px;
}

#main .intro .sidebar.right {
	position:relative;
	float:right;
	width:250px;
	margin-left:24px;
	margin-bottom:0;
	
	background-color:#fbf8e6;
	background-image:url(../images/bg/sidebar_bg_vert_gradient_01.jpg);
	background-position:bottom left;
	background-repeat:repeat-x;

	font-size:11px;
	line-height:16px;
}

* html #main .intro .sidebar.right {
	margin-bottom:-9px;
}

#main .member {
	position:relative;
	background-image:none;
	background:transparent;
}

#main #content .intro .member h2 {
	position:relative;
	
	font-size:20px;
	line-height:24px;
}

#main #content .bodyCopy {
	clear:both;
	min-height:0;
	padding-left:0;
	padding-right:0;
	
	background:none;
}

* html #main #content .bodyCopy {
	height:0;
}

#main #content .bodyCopy .sectionCallout {
	position:relative;
	display:block;
	float:left;
	z-index:100;
	width:256px;
	margin:0 4px 0 0;
	padding:0 0;
}

#main #content .bodyCopy .sectionCallout.first {
	clear:both;
}

#main #content .bodyCopy .sectionCallout.last {
	margin-right:0;
}

/*
	if the section callouts at the bottom of the home page become unbalanced in height,
	use the "min-height" attribute of the following rule, and the "height" attribute
	of the rule after that, to 'open them up' to the same height
*/
#main #content .bodyCopy .sectionCallout .content {
	min-height:216px;
	padding:0 8px 8px 0;
	
	background-color:white;
	background-image:url(../images/bg/bodycopy_bg.jpg);
	background-position:top right;
	background-repeat:repeat-y;
}

* html #main #content .bodyCopy .sectionCallout .content {
	height:216px;
}

#main #content .bodyCopy .sectionCallout .contentFooter {
	margin-top:0;
	margin-bottom:0;
}

#main #content .bodyCopy .sectionCallout h2 {
	clear:both;
	left:0;
	margin-top:0;
	margin-bottom:0;
}

#main #content .bodyCopy .sectionCallout.vegFacts h2 {
	/* these styles need to be repeated here for IE, since it's ignoring the rule that
		a more highly-qualified selector should take precedence (see the "#main #content .bodyCopy .vegFacts h2"
		selector in "default.css"
	*/
	background-color:#788103;
	background-image:url(../images/bg/veg_facts_subhead_bg.jpg);
	background-repeat:repeat-y;
}

#main #content .bodyCopy .sectionCallout h3 {
	margin:12px 8px 8px 2px;
	
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	font-size:20px;
	line-height:24px;
	color:#178896;
}

#main #content .bodyCopy .sectionCallout p {
	margin:0 8px 8px 2px;
}

#main #content .bodyCopy .sectionCallout p a {
	font-weight:bold;
	color:#ea560c;
	text-decoration:none;
}

#main #content .bodyCopy .sectionCallout img {
	position:relative;
	float:right;
	z-index:100;
	margin:0 0;
}