/* NORMALIZING styles
-------------------------------------------*/
body, div, ul, li, td, h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-family: "Lucida Grande", Trebuchet, "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height: 1.8;
}

div, span, img, form, h1, h2, h3, h4, h5, h6 {
	margin: 0px; padding: 0px;
	background-color: transparent;
	border: 0px;
}
table { border: 0px;}


/* MAIN styles
-------------------------------------------*/
body {
	background: transparent url('../images/bg_body.gif') 0 0 repeat-x;
	font: 11px/1.5em Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0 0 40px 0;
	color: #424242;
}

h1 {
	font-family: normal 21px Verdana, Arial, Helvetica, sans-serif;
	color: #363636;
	margin:0;
}

h2 {
	font: normal 20px Trebuchet, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #687362;
	margin:50px 0px 15px;
}

body.home h2{
	color: #fff;
	margin:12px 0px 35px;
	font: bold 13px Trebuchet, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:1px;
}

/* text-replaced h2's */
.title-about, .title-parents, .title-contact, .title-philosophy {
	display: block;
	height: 19px;
	padding: 19px 0px 0px 0px; 
	height: 0px !important;
	height /**/:19px;
	overflow:hidden;
	font-size: 1px;	
}
.title-about {
	background: transparent url('../images/title_aboutus.gif') 0 0 no-repeat; width: 85px;
}
.title-parents {
	background: transparent url('../images/title_parents.gif') 0 0 no-repeat; width: 145px;
}
.title-contact {
	background: transparent url('../images/title_contact.gif') 0 0 no-repeat; width: 102px; height: 20px;
}
.title-philosophy {
	background: transparent url('../images/title_philosophy.gif') 0 0 no-repeat; width: 209px; 
	height: 24px;
	padding: 24px 0px 0px 0px;
	height: 0px !important;
	height /**/:24px;
}

h3{
	font:normal 14px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color: #AAA06E;
	margin:10px 0 5px;
}

p {
	padding:0;
	margin:0 0 1.25em 0;
}

td { vertical-align: top;}

a:link{color: #83421e;}
a:visited{color: #83421e;}
a:hover{color: #a14e20;}
a:active{color: #83421e;}


dt {font-weight: bold;}

hr {
	border: 0;
	width: 100%;
	color: #ccc;
	background-color: #ccc;
	height: 1px;
	margin: 0px;
	padding: 0px;
}

.clr {
	clear: both;
	height: 0px;
}
.clearfix:after { /*http://positioniseverything.net/easyclearing.html*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */


/* CONTAINER styles
------------------------------------------- */
#container{
	width: 751px;
	position:relative;
	left: 50%;
	margin:  12px 0px 0px -375px;
	background: transparent url('../images/bg_content.gif') 0 125px no-repeat;
}


/* HEADER styles
------------------------------------------- */
#header{
	margin: 0;
	padding: 0px;
	text-align: right;
	background: transparent url('../images/bg_header_full.gif') left bottom repeat-x;
	width: 751px;
	height: 125px;
	position:relative;
}

	#header h1 { 
	text-align: left; 
	position: absolute;
	top: 40px;
	left: 28px;
}


#header h1 a {
background: transparent url('../images/logo_whitepine.gif') 0 0 no-repeat;
display: block;
height: 76px;
width: 287px;
color: #DADFCE;
padding: 76px 0px 0px 0px; 
height: 0px !important;
height /**/:76px;
overflow:hidden;
font-size: 1px;
}


#contain-nav {  /* container for ul */
	background: transparent;
	height: 42px;
	width: 285px;
	float:right;
	clear:right;
	margin: 0 4px 0 0;
	padding: 0;
	position:relative;	
	display:inline;
}

	#header-nav { /* the nav UL */
	margin: 0;
	padding: 0;
	list-style: none;
	color:#fff;
	height:42px;
	width: 285px;
	background: transparent url('../images/mainnav.gif') 0 0 no-repeat;
	position:relative;
	}
	
#header-nav li{
	margin: 0px; 
	padding: 0px; 
	list-style:none;
	position: absolute;
	top:0;
}


div#contain-nav ul#header-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}
	
ul#header-nav li, ul#header-nav a {
	height: 42px;
	display: block;
	}
	
div#contain-nav ul#header-nav li a {
	text-decoration: none;
	padding: 42px 0px 0px 0px; 
	height: 0px !important;
	height /**/:42px;
	overflow:hidden;
	font-size: 1px;
	}


#nav-about	{left: 0; width: 62px;}
#nav-contact	{left: 64px; width: 72px;}
#nav-philosophy	{left: 138px; width: 147px;}

#nav-about a:hover {background: transparent url('../images/mainnav.gif') 0 -100px; no-repeat;}
#nav-contact a:hover {background: transparent url('../images/mainnav.gif') -64px -100px no-repeat;}
#nav-philosophy a:hover {background: transparent url('../images/mainnav.gif') -138px -100px no-repeat;}

body.about #nav-about a {background: transparent url('../images/mainnav.gif') 0 -100px; no-repeat;}
body.contact #nav-contact a {background: transparent url('../images/mainnav.gif') -64px -100px no-repeat;}
body.philosophy #nav-philosophy a {background: transparent url('../images/mainnav.gif') -138px -100px no-repeat;}


	#header-nav-sup { /* double margin bug in IE, fixed with display: inline; */
		margin: 0 5px 0 0;
		padding: 0px;
		list-style: none;
		float:right;
		background: transparent url('../images/btn_currentparents.gif') 0 0 no-repeat;
		height: 30px;
		width:150px;
		display:inline;
	}

	#header-nav-sup a {
		background: transparent url('../images/btn_currentparents.gif') 0 0 no-repeat;
		display: block;
		height: 30px;
		width:150px;
		padding: 30px 0px 0px 0px; 
		height: 0px !important;
		height /**/:30px;
		overflow:hidden;
		font-size: 1px;
	}

	#header-nav-sup a:hover {
		background: transparent url('../images/btn_currentparents.gif') 0 -60px no-repeat;
	}
body.parents #header-nav-sup a {
		background: transparent url('../images/btn_currentparents.gif') 0 -60px no-repeat;
	}


/* SIDEBAR styles
-------------------------------------------*/
/* this is here because textile is throwing extra UL's around any UL I'm putting into the CMS */
#sidebar ul {margin:0;padding:0;} 

#sidebar {
	margin: 0 4px 0 0;
	padding: 70px 0 50px 10px;
 	width:233px; 
	background: transparent;
 	float:right;
	font: 11px/2em "Lucida Grande", trebuchet, "trebuchet ms", arial, sans-serif; color:#556e48;
	display:inline;
 }


/* CONTENT styles
-------------------------------------------*/
body.home #content { /* home has a slightly different layout */
	margin: 0 0 0 4px;
	padding: 0px;
	background: transparent;
	width: 751px;
	float: left;
	display: inline;
}

#content { /* inside pages */
	margin: 0 0 0 4px;
	padding: 0 30px 0 30px; 
	width: 440px;
	float: left;
	display: inline;
	background: transparent;
}

p.photo {
	color: #556e48;
	width:238px;
	height: 238px;
	margin:0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}


p.introduction {
	font: 14px/20px Trebuchet, "Trebuchet MS", "Lucida Grande" sans-serif;
	color: #556e48;
	width:475px;
	height: 218px;
	margin:0px 0px 0px 0px;
	padding: 20px 10px 0px 20px;
	float:left;
	display:inline;
	background: #fff5cb url('../images/bg_introduction.jpg') 0 0 no-repeat;
}

p.biointro {
	font: 14px/20px Trebuchet, "Trebuchet MS", "Lucida Grande" sans-serif;
	color: #556e48;
	width:475px;
	height: 1400px;
	margin:0px 0px 0px 0px;
	padding: 20px 10px 0px 20px;
	float:left;
	display:inline;
	background: #fff5cb url('../images/bg_introduction.jpg') 0 0 no-repeat;
}
#box-01 {
	font: 12px/20px Trebuchet, "Trebuchet MS", "Lucida Grande" sans-serif;
	float:left;
	width:281px;
	padding:0px 20px 0px 20px;
	margin:0px 0px 20px 0px;
	display:inline;
	background:#fff url('../images/bg_h2.gif') 0 0 repeat-x;
}

#box-02 {
	font: 12px/20px Trebuchet, "Trebuchet MS", "Lucida Grande" sans-serif;
	float:left;
	width:142px;
	padding: 0px 20px 0px 20px;
	margin:0px 0px 20px 0px;
	display:inline;
	background:#fff url('../images/bg_h2.gif') 0 0 repeat-x;
	border-left: 1px solid #fff;
}

#box-03 {
	font: 12px/20px Trebuchet, "Trebuchet MS", "Lucida Grande" sans-serif;
	float:left;
	width:198px;
	padding: 0px 20px 0px 20px;
	margin:0px 0px 20px 0px;
	display:inline;
	background:#fff url('../images/bg_h2.gif') 0 0 repeat-x;
	border-left: 1px solid #fff;
}

/* if the following line isn't here, then the three boxes on the homepage areabout 5 pixels 
lower than they should be. I cannot pinpoint the problem. This is an IE-only problem */
#box-01, #box-02, #box-03 {_margin-top:-4px;}


/* standard UL
the div.ulwrap is for any UL that is stored in the CMS.
========================================================== */
ul.links, div.ulwrap ul {
	list-style:none;
	margin:0;
	padding:0;
	line-height:2em;
	position:relative;
}

ul.links li, div.ulwrap ul li {
	list-style:none;
	margin:0;
	padding:0;
	border-bottom:1px dotted #dee7e4;
/*	vertical-align: bottom;*/
	position:relative;
	}
	
ul.links li a, ul.links li a:visited, div.ulwrap ul li a, div.ulwrap ul li a:visited {
	display:block;
	margin:0;
	width:100%;
	padding: 0 5px;
	background: transparent url('../images/arrow_green.gif') 98% 6px no-repeat; 
	position:relative;
	}

ul.links li a:hover, div.ulwrap ul li a:hover {
	background: #fff8da url('../images/arrow_green.gif') 98% 6px no-repeat;
	margin:0;
/*	display:block;*/
/*	width:100%;*/
	padding: 0 5px;
	position:relative;
	}



#content ul.links, #content ul.links li, #content div.ulwrap, #content div.ulwrap li {
 width:342px;
position:relative;
}

#sidebar ul.links, #sidebar ul.links li, #sidebar div.ulwrap ul, #sidebar div.ulwrap li {
 width:194px;
}



.link-right {
	float:right;
	height:13px;
	padding-right: 14px;
	text-align:right;
	background: transparent url('../images/arrow_green.gif') right 3px no-repeat;
}





/* FOOTER styles
-------------------------------------------*/
#footer {
	clear: both;
	margin: 0;
	padding: 50px 0 0 0;
	background:#fff url('../images/bg_footer.gif') 50% 40px no-repeat;
	width: 751px;
	font: 10px Verdana, Arial, helvetica, sans-serif;
	color:#585858;
	position:relative;
}
	#footer p {
		padding: 0;
		float: left;
		text-align:center;
		margin: 0 0 0 30px;
	}
	
	#footer p.nav{
		float: right;
		margin: 0 30px 0 0;
	}