/**
 *
 * Healthcare Foundation
 * Site design by Kreck Design Solutions -- www.kreck.com
 *
**/


/*
SAMPLE OUTLINE WITH COMMENTARY

body#myuniquebodyid						-- specify a body id so that we can style individual pages based on this "id" attribute as a parent!
	#container							-- the ubiquitous #container
		#headerdiv						-- ## TOP_LEVEL_ONE ## Everything in this div will be (is supposed to be) generated by the system.
			h1							-- this is usually to be replaced by the "header_mainlogo"
			p							-- this is usually to be replaced by the "header_tagline"
		#pagediv						-- ## TOP_LEVEL_TWO ## This becomes the relatively-positioned parent for positioning identity and more importantly the accents.
			#pageleafdiv				-- solely for design --- will need to have its TOP offset customize per-page, probably, to butt up just below identity background/photo
			#identitydiv				-- provides for a background image and specific height
				h2						-- provides text description of page title, ... but is usually replaced by floating graphic replacement.
				ul#quickaccessul		-- we want the "quickaccess" to appear after the name of the page! (for accessibility, ... to be hidden from screen renders)
			#accentdiv					-- this div is positioned absolutely, and will need to be positioned accordingly to perhaps bump up to appear overlapping the identitydiv!?
				div						-- you'll want to be sure to specify positioning for this div!!! (remember, position here is relative to containing parent!
					img					-- the thing (img) to accent/highlight.
					br					-- this is needed. may be styled as a visual border, or ignored.
					span.caption		-- this is optional
				div						-- repeat of above
					img
					br
					span.caption
				div						-- repeat of above
					img
					br
					span.caption
			#contentdiv
				p.first					-- may need to mark first paragraph to allow proper margin-tops?
				p						-- p's and ul's are the order of the day for our contentdiv!
				p
				p
				p
				ul						-- p's and ul's are the order of the day for our contentdiv!
				p
				p
				ul
				p
				p.last					-- may need to mark last paragraph to allow proper margin-bottoms?
			#paneldiv					-- contains all of our page panels. might just as easily have been named "altcontent" or "subcontentdiv", etc..., but #paneldiv it is!
				div#myfirstpanel.panel	-- defines a panel, and provides the top image.
					div.paneltop
					div.panelcontent	-- place all content within this div! provides side borders/background of the box
						h3				-- the heading of the panel, which is usually replaced by a custom image graphic (utilizing negative-text-indent).
						p
						ul
						p.panelfooter	-- the last paragraph of the panel can be styled differently if desired
					div.panelbottom		-- don't forget this div! it provides the bottom of the box, as well as clear all elements for proper parent height...
			#mainnavdiv					-- this is the system-generated top nav. Yes, we structure this inside of the #identitydiv to make our lives easier!
			#pagecleardiv
			-- end inside of #pagediv
		#footerdiv						-- ## TOP_LEVEL_THREE ##   (everything in this div is supposed to be generated by the system.)



*/




/* ---- Reset all styles. Thank you, Andy! ----------------------------------------------------------------- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, address, th, td {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
ol, ul {
	list-style-type: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
fieldset, img {
	border: 0;
}



/* ---- Set new basic styles ------------------------------------------------------------------ */

body {
	overflow: -moz-scrollbars-vertical !important;
	position: relative;
	text-align: center;
	margin: 20px auto 10px auto;
	background-color: #82885B;
	font: normal 11px/1.2 Arial, Verdana, Trebuchet, "Trebuchet MS", Helvetica, sans-serif;
	color:#282a19;
}

a, a:visited { 
	color: #666; 
	text-decoration: underline;
} 
a:hover {text-decoration:underline;}

.clear {
	clear:both;
}
blockquote {
	padding-left:25px;
}

/* ---- =STRUCTURE ------------------------------------------------------------------ */
.stratplantable table{
	padding:3px;
	background-color:#5C613A;
	border:1px solid #000000;
}
.stratplantable tr td {
	font: normal 11px/1.2 Arial, Verdana, Trebuchet, "Trebuchet MS", Helvetica, sans-serif;
	padding:7px;
}

#container {
	width:798px;
	text-align:left;
	margin:0px auto;
	position:relative;
}

/* The quickaccessul is provided for screen reader assistance, and is typically hidden from the displayed screen. */
/* We prefer to read the quickaccessul before any content or navigation, but after the "headerdiv" so as to announce the site's name. */
/* Hmmm, does "display:none" get read? consider a negative text-indent or offscreen float or other way to hide from design? */
#quickaccessul {
	/* display:none; */
	position:absolute;
	text-indent:-9999px;
}

/* All document elements to fit within one of the following three divs. */
/* The pagediv will contain (all customizable content? all other divs??) other sections such as */
/* the identitydiv, contentdiv, etc. */

#headerdiv {
	width:798px;
	height:113px;
	background:url(../images/header_complete.gif) no-repeat;
	position:relative;
}
#pagediv {
	width:798px;
	background:url(../images/interior_complete.gif) repeat-y;
	text-align:center;
	position:relative;
	clear:both;
	padding-bottom:20px;
}
#footerdiv {
	width:798px;
	height:43px;
	background:url(../images/footer_complete.gif) no-repeat;
	position:relative;
	clear:both;
}

	#headerdiv a {
	position:absolute;
	display:block;
	outline:0;
	width:153px;
	height:49px;
	top:55px;
	left:614px;
	text-indent:-9999px;
	background:transparent url('/images/button_donate.jpg') no-repeat center center;
}
	#headerdiv a:hover {
	background:transparent url('/images/button_donate_over.jpg') no-repeat center center;
}

#headerdiv:hover {
	cursor:pointer;
}
#homepage #headerdiv, #homepage #headerdiv:hover {
	cursor:default;
}

/* ---- =PAGEDIV ---- Below are the #pagediv descendant STRUCTURES ---------------------------------------- */
/* Remember that all direct children of #pagediv will need to keep their margins in check! No default margins are provided! */


	#pageleafdiv {
		position: absolute;
		width: 406px;
		/* height: 486px;		we can't set this here, as we don't want to specify something that's too tall for the page! we have our KDS_INIT script set this for us... */
		left: 9px;
		top: 150px;				/* provide random guess for default */
		background: url('../images/content_leafbackground.gif') top left no-repeat;
	}



	/* --- =IDENTITYDIV --- */
	#identitydiv {
		position:relative;
		width:780px;
		margin:0 9px;			/* or can also use   margin:0 auto;   ? */
		text-align:left;
		background-repeat:no-repeat;
		/* See "pages.css" for customization of this on per-page basis! */
		
			/* z-index:-1;		HACK for IE */
	}
	
	#identitydiv h2 {
		position:absolute;
		top:200px;
		font-size:200%;
		font-weight:bold;
		margin-left:30px;
		/* text-indent:-9999px;   We will hide the text offscreen when (and if!) we do the image replacement */
	}
	#identitydiv #mainnavdiv {

	}
	
	
	
	
	/* --- =ACCENTDIV --- */
	#accentdiv {
		position:absolute;
		top:0;
		left:0;
		/* do we need define a width so that IE gives us some "layout" ?
		 width:780px;
		 height:450px;*/
		font:8pt Georgia, "Times New Roman", Times, serif;
		color:#4c5222;
		text-align:center;
	}
	#accent1, #accent2, #accent3, #accent4, #accent5, #accent6, #accent7 {
	position:absolute;
	left: 550px;
	top: 45px;
}
	
	#accentdiv div.photo {
		/* border:1px solid #5c613a;		-- don't assume this! some photos might be non-rectangular */
	}


	
	/* --- =CONTENTDIV --- */
	#contentdiv {
		float: left;
		position: relative;
		width: 500px;
		display: inline;					/* use this so that IE doesn't bug and double our margins. Rest of browsers should ignore this... */
		margin: -90px 0 0 39px;
		text-align: left;
		clear: both;
	}
	/* Reset pagediv-contained common block-type elements. (Not needed anymore, however, ever since top "set basic blocktext" was commented out at top?) */
	#contentdiv p {
		margin-bottom:15px;
		margin-left:0;
		margin-right:0;
	}
	#contentdiv ul {
		margin:15px 25px;
	}
	#contentdiv ul li {
		margin-left:25px;
	}
	#contentdiv ul li ul li{
	list-style: square inside;
	}	
	#contentcleardiv {
		/* a cleared block element must follow the floating panels to keep the height of the containg div happy */
		/* i.e., there must be something (that clears) below the panels so that the containing div will stretch the height properly. */
		clear:both;
	}
	#contentdiv h1{
	font-size: 15px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom:13px;
	font-family: arial;
	color:#4c254d;
	}
	#contentdiv h2{
	font-size: 13px;
	font-weight: bold;
	}
	#contentdiv h3{
	font-size: 11px;
	font-weight: bold;
	margin-bottom:11px;

	}
	#contentdiv h4{
	font-size: 11px;
	font-weight: bold;
	}	
	#contentdiv ul li{
	margin-left: 10px;
	list-style-position: inside;
	list-style-type: disc;
	padding:2px 0 0 10px;	
}
.main tr td {
	padding:5px;
}	
	/* --- =PANELDIV --- */
	#paneldiv {
		position: relative;
		width: 190px;
		display: inline;				/* use this so that IE doesn't bug and double our margins. rest of browsers should ignore this... */
		float: right;
		margin: -90px 39px 0 0;
	}
	
	/* Individual, contained "paneldiv"s will be further identified and selected by class, such as "div.panel" etc... */
	/* Specify important to make less-specific class styles override any other more-specific identified styles such as "#contentdiv p" etc... */
	div.panel {
		position:relative;
		text-align:left;
	}
	div.paneltop {
		height:10px;
		background:url(../images/panel190_top.gif) no-repeat;
		background-position: center bottom ;
	}
	div.panelbottom {
		clear:both;
		height:10px;
		background:url(../images/panel190_bottom.gif) no-repeat;
		background-position: center top ;
	}
	div.panelcontent {
		padding-top:10px !important;
		padding-bottom:15px !important;
		border-left:1px solid #C3C4B6 !important;
		border-right:1px solid #C3C4B6 !important;
		background-color:#F0F0E2 !important;
	}
	div.panelcontent h3 {
		/*
		This h3 has some basic, default stylings applied so that you can use regular text here, but this is 
		usually (should be!) replaced on a per-page basis that uses custom graphics and negative text-indents.
		Also, hmmm, for some reason couldn't get IE 6 to respect "margin" for proper positioning of background-image?
		so we instead make the whole thing relatively positioned and use "left" to get our indent!
		margin:0px 15px 0px 15px;
		*/
		margin:0;
		padding:0;
		position: relative;
		left:15px;
		font-size:150%;
		font-weight:bold;
		color:#666;
		background-repeat:no-repeat;
		/* height: 62px;			-- only set if you have a graphic to place? */
		/* text-indent:-9999px;		-- offset when you set the graphic */
	}

	div.panelcontent p, div.panelcontent ul {
		margin-top:15px !important;
		margin-left:15px !important;
		margin-right:15px !important;
	}
	div.panelcontent a {
		font-weight:bold;
	}
	



	/* --- =MAINNAVDIV --- */
	/* See also the separate "nav.css" stylesheet... */
	
	#mainnavdiv {
		position:absolute;
		top:0;
		left:9px;
		width:780px;
	}
	
	#mainnavdivtop {	
		width:100%;
		height:9px;
		background:url(../images/navmain_bordertop.gif) top left repeat-x;
		clear:both;
		font-size:7px;		/* IE likes this to be here... otherwise makes too tall!? */
	}
	#mainnavdivmiddle {
		width:100%;
		font:8pt Verdana, Arial, Helvetica, sans-serif;
		background-color:#5C613A;
		line-height:normal;
		text-align:center;
		position:relative;
	}
	#mainnavdivbottom {
		width:100%;
		height:9px;
		background:url(../images/navmain_borderbottom.gif) repeat-x;
		clear:both;
	}
	





/* ---- TEXT REPLACEMENT and IMAGERY ------------------------------------------------------------------ */
/* Only master template items to be defined here. Per-page items may later be defined in identities.css? */

/* Place an h1 inside the headerdiv -- will be replaced with a background image */
#headerdiv h1 {
	margin:0;
	padding:0;
	background:url(../images/header_mainlogo.gif) no-repeat;
	text-indent:-9999px;
	float:left;
	width:281px;
	height:107px;
	position:relative;
	display:inline;
	margin-top:4px;
	margin-left:39px;
	
	float:left;
}
/* A paragraph within the headerdiv -- will be replaced with our "header_tagline" */
#headerdiv p {
	float:right;
	display:inline;				/* to fix IE double-margin bug */
	margin:0;
	padding:0;
	margin-top:30px;
	margin-right:30px;
	background:url(../images/header_tagline.gif) no-repeat;
	text-indent:-9999px;
	width:435px;
	height:17px;
}
/* The h2 is the page title --- is usually replaced as part of the identitydiv background image! */

/* Hide the following, they are only for accessibility/text-only mode */
#mainnavdivmiddle h3, #mainnavdivmiddle hr, #footerdiv hr {
	display:none;
}





/* ---- =FOOTER and =SUBNAV ------------------------------------------------------------------ */

#footerdiv {
	padding:4px 0;
}
#footerdiv a {
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
}
#footerdiv a:hover {
	text-decoration:underline;
}

ul#subnavul {
	float:right;
	display:inline;			/* yay for IE double-margin bug!! */
	margin-right:20px;
}
#subnavul li {
	text-align:right;
	float:left;
}
#subnavul li.last {
	border-right:0;
}


#subnavul li a {
	font-size:1em;
	display:block;
	padding:0 10px;
	border-right:2px solid #FFFFFF;			/* could also use image if this doesn't look right */
}
#subnavul li.last a {
	border-right:0;
}






/* ---- CUSTOM HOMEPAGE PANELS ------------------------------------------------------------------ */


#homepaneldiv1, #homepaneldiv2, #homepaneldiv3 {
	float: left; 
	min-height: 345px; 
	padding-bottom: 1em;
	background-color:#f0f0e2;
}
#homepaneldiv1 p, #homepaneldiv2 p, #homepaneldiv3 p {
	margin:12px;
}
#homepaneldiv1 ul, #homepaneldiv2 ul, #homepaneldiv3 ul {
	margin:12px;
}
#homepaneldiv1 {
	width: 322px;
	margin-right: 19px; 
	background: #F0F0E2 url(../images/paneldiv_bg322.gif) no-repeat 0 100%;
}
#homepaneldiv2 {
	width: 190px;
	margin-right: 19px; 
	background: #F0F0E2 url(../images/paneldiv_bg190.gif) no-repeat 0 100%;
}
#homepaneldiv3 {
	width: 190px;
	margin-right:0;
	background: #F0F0E2 url(../images/paneldiv_bg190.gif) no-repeat 0 100%;
}

#homepaneldiv1 h3, #homepaneldiv2 h3, #homepaneldiv3 h3 {
	height: 62px;
	margin:0;
	text-indent:-9999px;
}
#homepaneldiv1 h3 {background: url(../images/homepage_homepaneldiv1_h3.gif) no-repeat 0 0; }
#homepaneldiv2 h3 {background: url(../images/homepage_homepaneldiv2_h3.gif) no-repeat 0 0; }
#homepaneldiv3 h3 {background: url(../images/homepage_homepaneldiv3_h3.gif) no-repeat 0 0; }

#homepaneldiv1 a { color: #5a6b14; } 
#homepaneldiv2 a { color: #ab6900; } 
#homepaneldiv3 a { color: #62010c; } 

/*
#homepaneldiv1 ul {
	float:left;
}
#homepaneldiv1 li {
	float:left;
	display: block; 
	width: 125px;
}
*/

p.homepanelfoot {
	font-weight:bold;
	clear:both;
}














/* OLD NOTES: We can manually specify widths of nav instead of using "auto," which could potentially allow our */
/* last items to linewrap if the text is resized. OR!! or just set px size for nav and not allow resize? */
/* THESE PIXEL SIZES ARE DETERMINED BY THE PHOTOSHOP DOCUMENT. Adding removing or changing any of */
/* the Top-Level mainnav menu items will require a recalculation for the approximate sizes below... */
/*
#mainnavdiv ul li.li1 { width: 84px !important; margin-left:0; }
#mainnavdiv ul li.li2 { width: 85px !important; }
#mainnavdiv ul li.li3 { width: 89px !important; }
#mainnavdiv ul li.li4 { width: 106px !important; }
#mainnavdiv ul li.li5 { width: 103px !important; }
#mainnavdiv ul li.li6 { width: 107px !important; }
#mainnavdiv ul li.li7 { width: 76px !important; zzzmargin-right:0;}

#mainnavdiv ul li.li7 ul { width:110px; }		-- total hack to get P7 flyout to appear in proper place, instead of in center of screen ???
*/