/*
	P and G CSS
*/
body, h1, h2, h3, h4, h5, h6, ul, li, ol, p, a, table, td, tr, th, img {
	padding:				0;
	margin:					0;
	border:					0;
}

body {
	background-image:		url(background.jpg);
	background-repeat:		repeat-x;
	background-position:	50% 0;
	background-color:		#5E8E28;
}

/*
	Header
*/
#header {
	display:				block;
	background-image:		url(contents-border-top.png);
	background-repeat:		no-repeat;
	background-position:	0 100%;
	
	width:					868px;
	margin:					0 auto 0 auto;
}

#header h1 {
	float:					left;
	background-image:		url(logo.png);
	background-repeat:		no-repeat;
	
	width:					271px;
	height:					125px;
	margin-top:				15px;
	margin-left:			4px;
	
	overflow:				hidden;
	text-indent:			-1000px;
}

#header #search {
	float:					right;
	clear:					right;
	background-image:		url(search-background.png);
	background-repeat:		no-repeat;
	background-position:	50% 0;
	
	width:					224px;
	height:					120px;
}

#header #search label {
	float:					left;
	margin-left:			8px;
	margin-right:			4px;
	width:					56px;
}

#header #search .text {
	float:					left;
	width:					132px;
	background-color:		transparent;
	border:					0;
}

#header #menu {
	float:					right;
	clear:					right;
	
	background-image:		url(menu-background-left.png);
	background-repeat:		no-repeat;
	background-position:	0 0;
	
	padding-left:			8px;
	height:					40px;
}

#header #menu ul {
	display:				block;
	list-style-type:		none;
	
	background-image:		url(menu-background.png);
	background-repeat:		no-repeat;
	background-position:	100% 0;
	
	padding-right:			8px;
	width:					480px;
	height:					40px;
}

#header #menu li {
	float:					left;
	
	width:					120px;
	height:					32px;
	
	margin-top:				8px;
}

#header #menu li a {
	display:				block;
	height:					32px;
	background-color:		#fff;
}

#header #menu li a:hover {
	background-image:		url(menu-hover.png);
	background-repeat:		no-repeat;
	background-position:	112px 24px;
}

#header #menu li.lit a {
	background-image:		none;
	background-color:		#377135;
}

#header #menu li.lit a:hover {
	background-image:		url(menu-hover-lit.png);
}

/*
	Sub-menu - overlaps sub-area, but is not part of it.
*/
#header #menu ul li ul {
	position:				absolute;
	background-color:		none;
	background-image:		none;
	
	padding-right:			0;
	height:					26px;
	
	left:					-5000px;
	width:					850px;
	margin:					0 auto 0 auto;
}
/*
	IE Sucks...
	
#header #menu ul li:hover ul {
	left:					1%;
	right:					1%;
	z-index:				50;
}

#header #menu ul li.lit ul {
	left:					1%;
	right:					1%;
	z-index:				40;
}
*/
#header #menu ul li:hover ul {
	left:					auto;
	margin-left:			-490px;
	z-index:				50;
}

#header #menu ul li.lit ul {
	left:					auto;
	margin-left:			-490px;
	z-index:				40;
}

#header #menu ul li ul li {
	float:					right;
	background-image:		none;
	
	width:					auto;
	height:					26px;
	margin-top:				0;
}

#header #menu ul li ul li a {
	background-image:		none;
	background-color:		#377135;
	
	color:					#fff;
	height:					26px;
	padding:				0 8px 0 8px;
}

#header #menu ul li ul li a:hover {
	background-position:	100% 18px;
}
/*
	Sub-area (submenu, breadcrumb, etc)
*/
#sub-area {
	display:				block;
	background-image:		url(contents-background-top.png);
	background-repeat:		repeat-y;
	
	clear:					both;
	width:					868px;
	
	margin:					0 auto 0 auto;
}

#sub-area .breadcrumb {
	padding:				0 0 0 20px;
}

/*
	Contents
*/
#contents {
	display:				block;
	
	clear:					both;
	width:					868px;
	
	margin:					0 auto 0 auto;
}

#contents h3,
#contents p,
#contents li {
	padding-bottom:			10px;
}

.twocol #contents {
	background-image:		url(contents-background-twocol.png);
	background-repeat:		repeat-y;
	
	padding:				10px 0 10px 0;
}

.twocol #contents .col1 {
	float:					left;
	clear:					left;
	width:					560px;
	
	margin:					0 15px 0 20px;
}

.twocol #contents .col2 {
	float:					left;
	width:					240px;
	
	margin:					0 0 0 10px;
}

.twocol #contents .col2 img {
	margin:					0 0 10px 0;
}

.onecol #contents {
	background-image:		url(contents-background-onecol.png);
	background-repeat:		repeat-y;
	
	padding:				10px 0 10px 0;
}

.onecol #contents .col1 {
	float:					left;
	clear:					left;
	width:					830px;
	
	margin:					0 0 0 20px;
}

/*
	Footer
*/
#footer {
	display:				block;
	background-image:		url(contents-background-bottom.png);
	background-position:	50% 0;
	background-repeat:		no-repeat;
	
	clear:					both;
	width:					868px;
	height:					60px;
	
	margin:					0 auto 0 auto;
	padding-top:			10px;
}

#footer .rhs {
	float:					right;
}

#footer .lhs {
	float:					left;
}

#footer p {
	padding:				0 4px 0 4px;
}

/*
	Fonts
*/
body {
	font-family:			'Arial', sans-serif;
}

#header #menu li a {
	text-align:				center;
	text-decoration:		none;
	color:					#38723d;
	font-weight:			bold;
	font-size:				10pt;
	line-height:			22pt;
}

#header #menu li li a {
	font-size:				8pt;
	line-height:			20pt;
}

#header #menu li.lit a {
	color:					#fff;
}

#header #search label {
	color:					#fff;
	font-size:				8pt;
	font-weight:			bold;
	text-align:				center;
	line-height:			14pt;
}

#header #search .text {
	color:					#fff;
	font-size:				8pt;
	line-height:			14pt;
}

#sub-area .breadcrumb {
	color:					#fff;
	font-size:				8pt;
	line-height:			20pt;
}

#sub-area .breadcrumb a {
	color:					#fff;
	text-decoration:		none;
}

#contents p, #contents li {
	font-size:				9pt;
	color:					#fff;
}

#contents p a {
	color:					#CCD3DB;
}

#contents li {
	margin:					0 0 0 25px;
}

#contents h3 {
	font-size:				12pt;
	color:					#fff;
}

#contents h4 {

	font-size:				10pt;
	font-style:				italic;
	line-height:			14pt;
	color:					#fff;
}

#contents .text {

	font-size:				9pt;
	font-style:				italic;
	line-height:			14pt;
	color:					#fff;
}

#footer p {
	font-size:				8pt;
	color:					#fff;
}

#footer p a {
	color:					#fff;
	text-decoration:		none;
}