/**
 * BASE.CSS
 * 
 * @note		This file holds core styles for layout and overall site design. 
 * 				This document is commented in a method defined by cssDoc: http://cssdoc.net/
 * @author		NavigationArts (tstephens@navigationarts.com)
 **/

@import url(reset.css);
@import url(content.css);
@import url(niceforms.css);
/*@import url(diagnostics.css);*/

@media screen {

/** 
 * @section		CONTAINER
 **/
	
	body {
		background: #a1a19f url(../img/design/temp1.gif) top center repeat-x;
	}
		body.wjs { background: #eeede7 url(../img/design/html.gif) top left repeat-x; }
		body.templateMap { background: #a1a19f url(../img/design/temp1.gif) top left repeat-x; }
	
		/** 
		 * @note	these are DIVs inserted via JavaScript
		 *          all JS inserted objects (not attribtues) should be prefixed with js, 
		 *			the easiest way to see what these DIVs are displaying is to 
		 *			comment out the CSS and see what disappears on the site.
		 *			also check out how the page looks without JS.
		 **/
	 
		#jsMountains {
			background: url(../img/design/mountains.jpg) 50% 105px repeat-x;
		}
			body.templateDrill #jsMountains { background-position: 50% 75px; }
			body.templateMap   #jsMountains { background: none; }

		#jsGradient {
			background: #a1a19f url(../img/design/temp1.gif) top center repeat-x;
			min-height: 100%;
			margin: 0 auto;
			min-width: 986px;
			max-width: 1020px;
		}
			body.templateMap #jsGradient {
				max-width: 100%;
			}
	
	#container {
		width: 984px;
		margin: 0 auto;
		position: relative;
		z-index: 3;
	}
		body.templateHome  #container { background: #a1a19f url(../img/design/containerHome.gif) top left repeat-y; }
		body.templateDrill #container { background: #a1a19f url(../img/design/containerDrill.gif) top left repeat-y; }
		body.templateMap   #container { width: auto; }

/** 
 * @section		BRANDING
 * @note		page header / company identifier
 **/
	
	#branding {
		border-bottom: 6px solid #a1a19f;
		padding: 0 2px;
	}
		/** 
		 * @note		since the drop shadows of the BRANDING section are a background image, 
		 *				a different one is needed depending on the template used.
		 **/
		body.templateHome #branding {
			background: transparent url(../img/design/branding/dropshadowLarge.gif) top left no-repeat;
			height: 139px;
		}
		body.templateDrill #branding {
			background: transparent url(../img/design/branding/dropshadowSmall.gif) top left no-repeat;
			height: 109px;
		}
		body.templateMap #jsBrandingWrapperLeft {
			background: transparent url(../img/design/branding/dropshadowSmallMapBG.gif) top right repeat-x;
			height: 109px;
			margin: 0 8px 0 9px;
			border-bottom: 6px solid #a1a19f;
		}
		body.templateMap #jsBrandingWrapperRight {
			background: transparent url(../img/design/branding/dropshadowSmallMapLeft.gif) top left no-repeat;
			height: 109px;
		}
		body.templateMap #branding {
			background: transparent url(../img/design/branding/dropshadowSmallMapRight.gif) top right no-repeat;
			height: 109px;
			border: 0;
			min-width: 984px;
		}
	
	#brandingLogo {
		padding: 5px 0 0;
		position: relative;
	}

		/** 
		 * @note	Phark Image Replacemet used to display a screen logo. 
		 *          a print quality image is in the HTML. since the visual design is a logo 
		 *			on a gradient background, and we decided not to use PNGs, we are replacing 
		 *			the image for screen display. and since we use a different size header 
		 *			image/gradient per template, we need two different logo images.
		 **/
		#brandingLogo a {
			display: block;
			height: 64px;
			text-indent: -9999px;
		}
			body.templateHome #brandingLogo a {
				background: url(../img/design/branding/logoLarge.gif) top left no-repeat;
				width: 224px;
			}
			body.templateDrill #brandingLogo a {
				background: url(../img/design/branding/logoSmall.gif) top left no-repeat;
				width: 231px;
			}
			body.templateMap #brandingLogo a {
				background: url(../img/design/branding/logoSmall.gif) top left no-repeat;
				width: 231px;
			}
			
			/**
			* @note	The following code is used to link the NatureServe and National Geographic logos that
			*		appear in both the header and footers to the respective homepages. The backgound images
			*		were overlaid with a transparent gif image and that was used as the link.
			*
			**/
			
			div.logoLinks	{
				position: absolute;
				top: 20px;
				right: 0px;
				width: 190px;
			}
			
			div.logoLinks img	{
				float: left;
			}
				
			div.logoLinks a.nsngLink	{
				background: none !important;
				display: inline !important;
			}
				
			body.templateDrill div.logoLinks	{
				display: none;
			}
				
			div.logoLinksBottom	{
				position: absolute;
				top: 5px;
				right: 0px;
				width: 170px;
			}
			
			div.logoLinksBottom img	{
				float: left;
			}
				
			div.logoLinksBottom a.nsngLink	{
				background: none !important;
				display: inline !important;
			}
				
			body.templateHome div.logoLinksBottom	{
				display: none;
			}
			
			div#logoLinksBottomMap	{
				position: absolute;
				top: 5px;
				right: 20px;
				}
				
/** 
 * @section		NAVIGATION
 **/
	
	#nav {}
		body.templateMap #nav {
			position: relative;
		}
		
/** 
 * @section		GLOBAL NAVIGATION
 * @note		persitant navigation that appears in the upper right side of the page
 **/
 
	#navGlobal {
		overflow: hidden;
		position: absolute;
		right: 7px;
		width: 972px;
		z-index: 31;
	}
		body.templateDrill #navGlobal { top: 45px; }
		body.templateHome  #navGlobal { top: 75px; }
		body.templateMap   #navGlobal { top: -70px; }
		
		#navGlobal ul {
			float: right;
		}
			/** 
			 * @note	this is being bumped to push the UL so that it's last LI (the form)
			 *          will be partially outside of #navGlobal. this is done so that the background
			 *          image of the LI (for this last item) will be hidden (because of the overflow:
			 *          hidden on #navGlobal). this eliminates the need for a unique class/style on 
			 *          the last LI. we dont want to target LI.last-child because there are two ULs
			 **/
			#navGlobal ul.first-child { margin-right: -3px; }
			
		#navGlobal li {
			float: left;
		}
		
		/** 
		 * @note	the background image includes the 'bar' underneath the text and the 
		 *          'pipe bar' between the navigation items, AND the gradient behind the
		 *			text on hover. It's not a typical bg image because it's anchored in
		 *			the lower right.
		 **/
		#navGlobal a {
			background: url(../img/design/nav/global/bgGlobal.gif) 100% -71px no-repeat;
			color: #666;
			display: block;
			font: 11px/11px normal Tahoma, Arial, Helvetica, sans-serif;
			height: 19px;
			padding: 5px 9px;
			text-decoration: none;
		}
			/**
			 * @workaround		IE6 treats the A as width: 100%, so it's floated to colapse it.
			 **/
			* html #navGlobal a { float: left; }
			
			#navGlobal a:hover { background-position: 100% -21px; }
			
			#navGlobal a span {
				background: url(../img/design/nav/global/signIn.gif) right center no-repeat;
				padding: 0 15px 0 0;
			}
				
		#navGlobal form {
			background: url(../img/design/nav/global/bgGlobal.gif) 100% -71px no-repeat;
			display: block;
			height: 29px;
			padding: 0 9px 0 9px;
			width: 198px;
		}
			/**
			 * @workaround		IE6 treats the A as width: 100%, so it's floated to colapse it.
			 **/
			* html #navGlobal form { float: left; }
			
			/**
			 * @workaround		to get the INPUTs to display next to each other without undo
			 * 					and odd spacing.
			 **/
			* html #navGlobal form input { float: left; }
			*+html #navGlobal form input { float: left; }
		
		/** 
		 * @note	the following classes are inserted via JS. they turn the regular looking
		 *			INPUT into a designed one. this is accomplished via two 'cap' (background)
		 *			images in the WRAPPER SPANs, and a background image on the INPUT.
		 **/
		#navGlobal .jsTextWrapperLeft {
			background: url(../img/design/niceforms/textLeftGlobal.gif) top left no-repeat;
			float: left;
			height: 23px;
			padding: 0 0 0 21px;
		}
		
		#navGlobal .jsTextWrapperRight {
			background: url(../img/design/niceforms/textRightGlobal.gif) top right no-repeat;
			float: left;
			height: 23px;
			padding: 0 7px 0 0;
		}
		
		#navGlobal .jsTextWrapperLeft .jsTextWrapperRight input {
			background: url(../img/design/niceforms/textBgGlobal.gif) repeat-x left top;
			border: none;
			color: #666;
			font: 13px/13px normal Tahoma, Arial, Helvetica, sans-serif;
			height: 15px;
			padding: 4px 0;
			vertical-align: middle;
			width: 145px;
		}
			/**
			 * @workaround		the line height renders differently in IE, so this bumps the text
			 * 					down 2 more pixels.
			 **/
			* html #navGlobal .jsTextWrapperLeft .jsTextWrapperRight input { padding: 6px 0 2px; }
			*+html #navGlobal .jsTextWrapperLeft .jsTextWrapperRight input { padding: 6px 0 2px; }
		
/** 
 * @section		MAIN NAVIGATION
 * @note		primary navigation that appears across the top of the page (brown bar)
 **/
	
	#navMain {
		left: 3px;
		position: absolute;
		z-index: 30;
	}
		/** 
		 * @note	the main nav is pushed back left by one pixel so that the hover state
		 *			can overlap the background dropshadow.
		 **/
		body.wjs           #navMain { left: 2px; }
		body.templateDrill #navMain { top: 75px; }
		body.templateHome  #navMain { top: 105px; }
		body.templateMap   #navMain { top: -40px; 
		                              left: 11px; 
									  min-width: 984px; }
	
		/** 
		 * @note	position relative so we can absolutly position the second level nav.
		 **/
		#navMain li {
			float: left;
			position: relative;
		}
	
		#navMain li a {
			color: #fff;
			display: block;
			font: normal 13px/13px Verdana, Arial, Helvetica, sans-serif;
			height: 23px;
			padding: 7px 0 0 0;
			text-align: center;
			text-decoration: none;
			width: 163px;
		}
			#navMain li         a:hover { text-decoration: underline; }
			#navMain li.hover   a       { background-position: 0 -30px !important; }
			#navMain li.active  a       { background-position: 0 -60px !important; }
			
			/** 
			 * @note	if the browser has JS enabled, hide the text and show the BG image
			 **/
			body.wjs #navMain li a {
				height: 30px;
				padding: 0;
				text-indent: -999em;
				width: 200px;
			}
			
			/**
			 * @note	define a unique background image per top level nav
			            since we are using an image replacement technique (Phark)
						instead of embedding the images in the HTML
			 * @workaround		defining 156 for each A except one is becuase of IE6. IE6 wouldn't 
			                    render one item a different width (200) but it would render five items
								a different width (156). it's not invalid code, so I didn't localize it to
								just IE6.
			 **/
			#navMain #navMainLI0 a { background: url(../img/design/nav/main/introduction.gif) top left no-repeat;
			                         width: 156px; }
			#navMain #navMainLI1 a { background: url(../img/design/nav/main/explore.gif)      top left no-repeat; }
			#navMain #navMainLI2 a { background: url(../img/design/nav/main/focus.gif)        top left no-repeat;
			                         width: 156px; }
			#navMain #navMainLI3 a { background: url(../img/design/nav/main/action.gif)       top left no-repeat;
			                         width: 156px; }
			#navMain #navMainLI4 a { background: url(../img/design/nav/main/connect.gif)      top left no-repeat;
			                         width: 156px; }
			#navMain #navMainLI5 a { background: url(../img/design/nav/main/map.gif)          top left no-repeat;
			                         width: 156px; }
			body.templateMap 
			#navMain #navMainLI5 a { background-image: url(../img/design/nav/main/mapTemplateMap.gif) }
	
	
		/**
		 * @note	this is the drop down menu, each block is a unique width. 
		 *          the UL has a background gradient that starts from the bottom 
		 *			and works it's way up. 
		 *			the first LI has a background gradient that starts from the top
		 *			and works it's way down.
		 **/
		#navMain li ul {
			background: #fff url(../img/design/nav/main/bgDropdown.gif) bottom left repeat-x;
			display: none;
			left: 0;
			padding-bottom: 10px;
			position: absolute;
			top: 30px;
		}
			#navMainLI0       ul { width: 230px; }
			#navMainLI1       ul { width: 200px; }
			#navMainLI2       ul { width: 235px; }
			#navMainLI3       ul { width: 205px; }
			#navMainLI4       ul { width: 265px; }
			
			/**
			 * @note	show the drop down menu. the class HOVER gets added via JavaScript
			 **/
			#navMain li.hover ul { display: block; }
			
			/**
			 * @note	most of the following is to reset the CSS that is defined 
			 *          for the nonJS version of the first level nav
			 **/
			#navMain li ul li {
				float: none;
				padding: 0 2px;
			}
				/**
				 * @note	this odd approach to background gradients is because in the LI#NAVMAINLI0
				 *          the first pixel column must be white to match the background. so the gradient
				 *			isn't repeated, it's a big image that is normally right justified, but in 
				 *			#NAVMAINLI0 it is left justified so we can see that white column. this becomes
				 *			more obvious if you look at the background image for #NAVMAINLI0.
				 **/
				#navMain li          ul li.first-child { background: url(../img/design/nav/main/bgDropdownLI.gif) top right no-repeat; }
				#navMain #navMainLI0 ul li.first-child { background-position: top left; }
			
			body.wjs #navMain li ul li a {
				background-image: none !important;
				border-bottom: 1px solid #cbcbca;
				color: #3c3838;
				font: normal 12px/16px Arial, Helvetica, sans-serif;
				height: auto;
				padding: 5px 5px 5px 20px;
				text-indent: 0 !important;
				text-align: left;
				width: auto !important;
			}
				/**
				 * @workaround		this prevents extra spacing around the A
				 **/
				* html body.wjs #navMain li ul li a { zoom: 1; }
				
				body.wjs #navMain li ul li.last-child a       { border-bottom: 0; }
				body.wjs #navMain li ul li            a:hover { text-decoration: underline; }
	
/** 
 * @section		SIGN IN FORM/NAVIGATION
 * @note		this is the slide down login form. without JS, we can't show this
 *				DIV at all (since it overlaps main navigation. So without JS it is positioned
 *				off left, with the WJS class - we bring it back in view.
 **/
	#navSignin {
		background: url(../img/design/nav/signin/middle.gif) top left repeat-y;
		left: -9999px;
		position: absolute;
		width: 984px;
		z-index: 40;
	}
		body.wjs           #navSignin { left: 0; }
		body.templateDrill #navSignin { top: 75px; }
		body.templateHome  #navSignin { top: 105px; }
		body.templateMap   #navSignin { top: -40px; }
		
		/**
		 * @note	JS inserted DIVs. They provide the gradients (positioned behind the content), and
		 *          the close button.
		 **/
		#navSignin #jsImgTop {
			background: url(../img/design/nav/signin/top.gif) top left no-repeat;
			height: 10px;
			left: 0;
			position: absolute;
			top: 0;
			width: 984px;
			z-index: 41;
		}
		
		#navSignin #jsImgBottom {
			background: url(../img/design/nav/signin/bottom.gif) top left no-repeat;
			bottom: 0;
			height: 100px;
			left: 0;
			position: absolute;
			width: 984px;
			z-index: 41;
		}
		
		#navSignin #jsImgClose {
			background: url(../img/design/nav/signin/close.gif) top left no-repeat;
			cursor: pointer;
			height: 28px;
			position: absolute;
			right: 23px;
			top: 6px;
			width: 71px;
			z-index: 42;
		}
/** 
 * @section		SIGN IN FORM
 * @note		left side section of the slide down layer
 **/
		#navSigninAccount {
			color: #4b4b4b;
			float: left;
			font: normal 11px/14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
			padding: 13px 0 23px 112px;
			position: relative;
			width: 330px;
			z-index: 42;
		}
		
			#navSigninAccount form.forgot {
				padding: 10px 0 0 0;
			}
		
			#navSigninAccount form div.field {
				padding: 0 0 10px 0;
				position: relative;
			}
				#navSigninAccount form div.submit {
					padding: 0 5px;
					text-align: right;
				}
				
			#navSigninAccount h2 {
				background: transparent url(../img/design/nav/signin/signinHeader.gif) top left no-repeat;
				height: 14px;
				margin: 0 0 7px 0;
				text-indent: -9999px;
				width: 270px;
			}
			
			#navSigninAccount label {
				cursor: pointer;
			}
				/**
				 * @note	the following two labels are absolutely positioned over their INPUTs.
				 *			this is to accomplish a mock pre-populated form field. JS events hides
				 *			these labels when focus is put onto the form field.
				 **/
				#navSigninAccount label#txtEmailLabel {
					color: #fff;
					cursor: text;
					left: 10px;
					position: absolute;
					top: 3px;
				}
					/**
					 * @workaround		positioning is different on IE.
					 **/
					* html #navSigninAccount label#txtEmailLabel { top: 2px; }
					*+html #navSigninAccount label#txtEmailLabel { top: 2px; }
				
				#navSigninAccount label#txtPasswordLabel {
					color: #fff;
					cursor: text;
					left: 10px;
					position: absolute;
					top: 3px;
				}
					/**
					 * @workaround		positioning is different on IE.
					 **/
					* html #navSigninAccount label#txtPasswordLabel { top: 2px; }
					*+html #navSigninAccount label#txtPasswordLabel { top: 2px; }
		
			#navSigninAccount p {
				margin: 0 0 7px 0;
			}
			
/** 
 * @section		REGISTRATION INFO/LINK
 * @note		right side section of the slide down layer.
 **/
		#navSigninRegister {
			color: #4b4b4b;
			float: left;
			font: normal 11px/14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
			padding: 13px 0 13px 71px;
			position: relative;
			width: 330px;
			z-index: 42;
		}
		
			#navSigninRegister form div { }
				#navSigninRegister form div.submit {
					padding: 0 5px;
					text-align: right;
				}
		
			#navSigninRegister h2 {
				background: transparent url(../img/design/nav/signin/registerHeader.gif) top left no-repeat;
				height: 14px;
				margin: 0 0 7px 0;
				text-indent: -9999px;
				width: 270px;
			}
		
			#navSigninRegister p {
				margin: 0 0 7px 0;
			}
			
/** 
 * @section		CONTENT
 **/
			
	#content {
		min-height: 800px;
		padding: 0 2px; /* @note	to account for the dropshadows */
	}
		* html #content { height: 800px; }
		body.templateMap #content {
			background-color: #fff;
			margin: 0 10px 0 11px;
			padding: 0;
			min-height: 0;
		}
	
	
/** 
 * @section		SITEINFO
 * @note		footer and information about the site/page
 **/
	
	#siteinfo {
		position: relative;
		background: url(../img/design/siteinfo/bg.gif) top left repeat-x;
		color: #808080;
		font: normal 10px/10px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		margin: 20px 0 0 22px;
		padding: 10px 0 20px 0;
		clear: both;
	}
	
	/**
	 * @note	The following styles the part of the footer that
	 *			inlcudes the photo credits for the revolving
	 *			images at the top of the homepage
	**/
	
	#imageCredits	{
		position: relative;
		text-align: center;
		background: url(../img/design/siteinfo/bg.gif) top left repeat-x;
		color: #808080;
		font: normal 10px/10px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		margin: 10px 0 0 0;
		padding: 10px 0 20px 0;
		clear: both;
	}
	
	/** 
	 * @note	the logos are in the (right side of the) background image (it's a very wide image). 
	 * 			on pages that we dont want to show the logos the BG image is aligned to the left.
	 * 			when we do want to show the logos, the image is aligned right.
	 **/
		body.templateDrill #siteinfo {
			background-position: top right;
			width: 660px;
		}
		body.templateHome #siteinfo {
			background-position: top left;
			width: 650px;
		}
		body.templateMap #siteinfo {
			width: auto;
			margin: 0 10px 0 11px;
			background: #fff url(../img/design/siteinfo/bgMap.gif) top right repeat-x;
		}
	
/** 
 * @section		SITEINFO LINKS
 * @note		general footer links, designed to be geared towards 'about this site' instead of 'content'.
 **/
	#siteinfoLinks {
		}
		
		body.templateMap #siteinfoLinks {
			padding: 0 0 0 22px;
		}
	
		#siteinfoLinks ul {
			overflow: auto;
			padding-bottom: 4px;
		}	
			/** 
			 * @workaround		overflow doesn't work in IE6. this is the same result as the .clearfix class (google it).
			 **/
			* html #siteinfoLinks ul {
				height: 1%;
				overflow: visible;
			}
			
		#siteinfoLinks a {
			color: #666;
			text-decoration: none;
		}
			#siteinfoLinks a:hover { text-decoration: underline; }
			
		#siteinfoLinks li {
			background: url(../img/design/siteinfo/li.gif) center right no-repeat;
			float: left;
			padding: 2px 7px;
		}
			#siteinfoLinks li.first-child { padding-left: 0; }
			#siteinfoLinks li.last-child  { background-image: none; }
	
/** 
 * @section		SITEINFO LEGAL
 * @note		required legelease on a site.
 **/
	#siteinfoLegal {
		}
		
		body.templateMap #siteinfoLegal {
			padding: 0 0 0 22px;
		}
	
		#siteinfoLegal ul {
			padding-top: 6px;
		}
		
		#siteinfoLegal li {
			padding: 1px 0;
		}
	
}



@media print {
	#nav,
	#contentDccNav,
	#contentFunctions,
	#contentNav,
	#contentRelated,
	#siteinfoLinks {
		display: none !important;
	}
	
	#branding {
		border-bottom: 2px solid #b0afac;
		padding: 0 0 12px 0;
	}

	#contentTitle {
		color: #362f2d;
		padding: 12px 0 6px 0;
	}
		#contentTitle h1 {
			font: normal 20px/26px Arial, Helvetica, sans-serif;
		}
	#contentBody {
		font: normal 12px/18px Arial, Helvetica, sans-serif;
		color: #4b4b4b;
		padding: 12px 0 48px 0;
	}

/**
 * @section		PRINT HOMEPAGE
 **/
	#contentDcc {
		margin: 0;
		padding: 0;
	}
	#contentDccSlides ul,
	#contentDccSlides p,
	#contentDccSlides li {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}
	#contentDccSlides li {
		display: none;
	}
		#contentDccSlides #contentDccSlidesLi0 {
			display: block;
		}

	#contentBody ul.tabs {
		display: none;
	}

/** 
 * @section		PRINT MAIN CONTENT BASIC STYLES
 **/

	#contentBody a { 
		color: #00476e;
		text-decoration: underline;
	}
	#contentBody abbr, 
	#contentBody acronym {
		text-transform: uppercase;
		font-size: 85%;
		letter-spacing: 0.1em;
	}
	#contentBody abbr[title], 
	#contentBody acronym[title], 
	#contentBody dfn[title] {
		border-bottom: 1px dotted #362f2d;
	}
	#contentBody b,
	#contentBody i,
	#contentBody u {
		font-style: normal;
		text-decoration: none;
	}
	#contentBody blockquote {
		padding-left: 1em;
		border-left: 1px solid #ccc;
		margin-left: 2em;
	}
	#contentBody code,
	#contentBody kbd,
	#contentBody samp,
	#contentBody pre,
	#contentBody tt,
	#contentBody var {
		color: #d48a2d;
		font-family: monospace;
	}
	#contentBody cite, 
	#contentBody em, 
	#contentBody dfn {
		font-style: italic;
	}
	#contentBody dt {
		margin: 8px 0 4px 0;
		font-weight: bold;
	}
	#contentBody fieldset {
		border: 1px solid #ccc;
		padding: 16px 16px 4px 16px;
	}
	#contentBody h1,
	#contentBody h2 {
		color: #00543d;
		font: normal 16px/20px Arial, Helvetica, sans-serif;
		border-bottom: 1px solid #babab9;
		padding-bottom: 8px;
		margin: 24px 0 12px 0;
	}
		#contentBody h1 a,
		#contentBody h2 a,
		#contentBody h1 a:visited,
		#contentBody h2 a:visited {
			color: #00543d;
			text-decoration: none;
		}
	#contentBody h3 {
		color: #362f2d;
		font: bold 14px/18px Arial, Helvetica, sans-serif;
		margin: 0 0 5px 0;
		text-decoration: none;
	}
		#contentBody h3 a,
		#contentBody h3 a:visited {
			color: #362f2d;
			text-decoration: none;
		}
	#contentBody h4 {
		color: #00543d;
		font: bold 12px/16px Arial, Helvetica, sans-serif;
		margin: 0 0 3px 0;
		text-decoration: none;
	}
		#contentBody h4 a,
		#contentBody h4 a:visited {
			color: #00543d;
			text-decoration: none;
		}
	#contentBody h5,
	#contentBody h6 {
		color: #362f2d;
		font: bold 12px/16px Arial, Helvetica, sans-serif;
		margin: 0 0 1px 0;
		text-decoration: none;
	}
		#contentBody h5 a,
		#contentBody h6 a,
		#contentBody h5 a:visited,
		#contentBody h6 a:visited {
			color: #362f2d;
			text-decoration: none;
		}
	#contentBody hr, 
	#contentBody p, 
	#contentBody ul, 
	#contentBody ol, 
	#contentBody dl, 
	#contentBody pre, 
	#contentBody address, 
	#contentBody table, 
	#contentBody form {
		margin: 0 0 12px 0;
	}
	#contentBody ins {
		text-decoration: none;
		border-bottom: 1px dotted #362f2d;
	}
	#contentBody legend {
		padding: 0 16px;
	}
	#contentBody q {
		quotes: "\201C""\201D""\2018""\2019";
	}
	#contentBody q:before {
		content:'\201C';
	}
	#contentBody q:after {
		content:'\201D';
	}
	#contentBody q q:before {
		content:'\2018';
	}
	#contentBody q q:after {
		content:'\2019';
	}
	#contentBody strong,
	#contentBody th {
		font-weight: bold;
	}
	#contentBody sub {
		font-size: 85%;
		vertical-align: sub;
	}
	#contentBody sup {
		font-size: 85%;
		vertical-align: super;
	}
	
	#contentBody table {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
	}
	#contentBody th,
	#contentBody td {
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ccc;
	}
	#contentBody th,
	#contentBody td {
		padding: .8em;
	}
	#contentBody table.noborder {
		border-top: 0px;
		border-left: 0px;
	}
	#contentBody table.noborder th,
	#contentBody table.noborder td {
		border-bottom: 0px;
		border-right: 0px;
	}
	#contentBody ol {
		list-style: decimal outside;
	}
	#contentBody ul {
		list-style: disc outside;
	}
	#contentBody ul,
	#contentBody ol {
		margin-left: 2.2em;
	}
	#contentBody ul ul,
	#contentBody ol ul,
	#contentBody ul ol,
	#contentBody ol ol {
		margin-bottom: 0;
	}
	#contentBody table {
		border-collapse: collapse;
	}

/** 
 * @section		PRINT MAIN CONTENT CUSTOM CLASSES
 **/
	#contentBody h2.alt {
		color: #362f2d;
		font: normal 20px/26px Arial, Helvetica, sans-serif;
		border-bottom: 0;
		margin: 0;
		padding: 0 0 4px 0;
	}
	/**
	 * @note	this is the wrapper that goes around each inserted image. it contains a BG dropshadow
	 * 			and a wrapper to contain a copyright notice.
	 **/
	#contentBody div.featuredImage {
		float: right;
		width: 160px;
		padding: 3px 0 6px 12px;
	}
		#contentBody div.featuredImage p {
			margin: 0;
			padding: 3px 0;
			text-align: right;
			font: normal 9px/9px Tahoma, Arial, Helvetica, sans-serif;
		}
	/**
	 * @note	a stylized list. meant for a collection of important children. This list is generated via the CMS.
	 * 			content authors will not be able to choose this CLASS. it is used on landing pages. it consists
	 * 			of two columns, the DIV.featuredImage and the DIV.content objects.
	 * 			this contains a slightly smaller version of the DIV.featuredImage wrapper.
	 **/
	#contentBody ul.featuredChildren {
		list-style: none;
		margin-left: 0;
	}
		#contentBody ul.featuredChildren li {
			padding: 12px 0 0 0;
			border-bottom: 1px dotted #b3b3b3;
			clear: both;
			min-height: 116px;
			overflow: auto;
		}
			/**
			 * @workaround	clearfix
			 **/
			* html #contentBody ul.featuredChildren li {
				height: 1%;
			}
			#contentBody ul.featuredChildren li.last-child {
				border-bottom: none;
			}
			#contentBody ul.featuredChildren li div.featuredImage {
				width: 120px;
				float: left;
				padding: 0 12px 0 0;
			}
				#contentBody ul.featuredChildren li div.featuredImage p {
					text-align: left;
					padding: 3px 3px 3px 15px;
					text-indent: -11px;
				}
			#contentBody ul.featuredChildren li div.content {
				float: left;
				width: 524px;
			}
				#contentBody ul.featuredChildren li div.content h3 a {
					color: #000;
					font: bold 14px/18px Arial, Helvetica, sans-serif;
				}
	
	/**
	 * @note	a stylized list. meant for a collection of not so important children. This list is generated via the CMS.
	 * 			content authors will not be able to choose this CLASS. it is used on landing pages.
	 **/	
	#contentBody ul.additionalChildren {
		list-style: none;
		margin-left: 0;
		margin-bottom: 0;
	}
		#contentBody ul.additionalChildren li {
			padding: 12px 0 0 0;
			border-bottom: 1px dotted #b3b3b3;
			clear: both;
		}
			#contentBody ul.additionalChildren li.last-child {
				border-bottom: none;
			}

/** 
 * @section		PRINT BREADCRUMB
 **/
	#contentBreadcrumb {
		height: 16px;
	}
		#contentBreadcrumb ul,
		#contentBreadcrumb li,
		#contentBreadcrumb a {
			float: left;
		}
		#contentBreadcrumb a {
			color: #808080;
			font: normal 11px/12px Tahoma, Arial, Helvetica, sans-serif;
			text-decoration: none;
			padding: 0 10px 0 0;
		}
			#contentBreadcrumb a:after {
				content: " >";
				font: normal 11px/12px Tahoma, Arial, Helvetica, sans-serif;
			}
			#contentBreadcrumb li.last-child a:after {
				content: "";
			}

/** 
 * @section		PRINT SITEINFO
 **/
	#siteinfo {
		position: relative;
		border-top: 1px solid #b0afac;
		font: normal 10px/10px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
		margin: 20px 0 0 0;
		padding: 10px 0 0 0;
		clear: both;
	}
}