/**
 * 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; }
		body.popup         #container { background-color: white; width: auto; height:100%}

/** 
 * @section		BRANDING
 * @note		page header / company identifier
 **/
 
 #header {
   position: relative;
 }
 
 #siteMessage {
   background: white;
 }
	
	#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;
		}
		
		body.popup #branding {
            background: transparent url(../img/design/branding/dropshadowSmallMapBG.gif) top left repeat-x;
            height: 69px;
        }
	
	#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;
			}
			
			body.popup #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: 215px;
			}
			
			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: 195px;
			}
			
			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 {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: 131;
	}
	
	#navGlobal {bottom: 40px;}
		
		#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; }
			
            /* dhauver: [12/9/2014] I don't know why, but this is necessary on the map viewer page
               to get the search arrow to show up on the same line as the search field. 
               See JIRA issue LS-69. */
            body.templateMap #navGlobal form { width: 210px;}
		
		/** 
		 * @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: 130;
		bottom: 8px;
	}
		/** 
		 * @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.templateMap   #navMain { left: 11px; 
									  min-width: 984px;
									  bottom: 10px; }
	
		/** 
		 * @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: 140;
		display: none;
		top: 0px;
	}
		body.wjs           #navSignin { left: 0; }

		/**
		 * @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: 141;
		}
		
		#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: 141;
		}
		
		#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: 142;
		}
		
		.closeButton {
		  background: url('../img/design/nav/signin/close.gif') top left no-repeat;
		  cursor: pointer;
		  height: 28px;
		  position: absolute;
		  top: 6px;
		  right: 6px;
		  width: 71px;
		}
/** 
 * @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: 142;
		}
		
			#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: 142;
		}
		
			#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;
		}
		
    /**
     * rvip = Robotic VIP - form fields we hide from normal users, used for spam prevention honeypots.
     */
 	.rvip {
 		display: none;
 	}
	
}



@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;
	}
}