@charset "utf-8";
    

  body { margin: 0pt;
    padding: 0pt;
    background-image:   url(images/bgbrown.png);
	background-attachment: fixed;
	background-position: top center;
 	background-repeat: repeat-y;
	background-color: #a28c70; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
	font-color: #C0C0C0;
    font-size-adjust: none;
    font-stretch: normal;
    font-size: small;
    text-align: center;
        }
	h1	{
	font: normal small-caps bold 3em Trebuchet, Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	color: #ffcc00;
}
	h2	{
	font: normal bold 2em Trebuchet, Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	color: #ffffff;
	}
	h3	{
	font: normal bold 1.5em Trebuchet, Verdana, Arial, Helvetica, sans-serif;
	color: #ffcc00;
	text-align: center;
	}
	h4	{
	color: #ffffff;
	line-height: 200%;
	}
	p	{
	font: normal 1em Trebuchet, Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	color: #c0c0c0;
	}
	p.c	{
	font: normal 1em Trebuchet, Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	color: #c0c0c0;
	}
	ol	{
	font: normal 1em Trebuchet, Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	color: #c0c0c0;
	list-style:  url(images/arrow.png);	
	}
	ol a:link	{
	color: #ffffff;
	}
	ol a:visited{
	color: #ff9900;
	}
	ol a:hover	{
	color: #c0c0c0;
	}
	hr	{
	color: #ff9900;
	width: 530px;
	}

	a:link	{
	color: #ffffff;
	}
	a:visited	{
	color: #ff9900;
	}
	a:hover	{
	color: #c0c0c0;
	}
	
	#container { 
    margin: 0pt auto;
    width: 1050px;
	text-align: center;
	position: relative;
    }
	#header {border: 0;
	height: 250px;
	width: 868px;
	margin: 0 0 0 91px;
	display: block;
	background-image:  url(images/treekingheader.png);
	background-repeat: no-repeat;
	background-color: #ffcc00;
	background-attachment: scroll;
	background-position: top center;
		position: relative;
	}
	#menubar {border: 0pt;
	width: 200px;
	height: 100%;
	display: block;
	background-color: #ffcc00;
	position: absolute;
	top: 189px;
	left: 91px;
	padding: 50px 0 0 15px;
	}
/*treeline ad in left hand menu bar*/	
	#treeline	{
	border: 0pt;
	display: block;
	position: relative ;
	float: left;
	margin: 400px 0 0px 0px;
	}
/*on front page only, this is the div that contains the changing pictures at the top of the front page*/
	#photobar {
	height: 330px;
	width: 500px;
	display: block;
	margin: 10px 0px 0 350px;
	padding: 30px 10px 0px 0px;
	position: relative;


	}
/*front page photo slide show inside photobar*/	
	.dyncontent	{
	margin: 0px 250px 0 0;
	padding: 0px 100px 0px 0px;
	position: relative;
	display: block;
	overflow: visible;

	}
	/*slide show css ends*/

/*the text on the front page is in this box. The text on the other pages is in the .textbox div*/
	.textboxfront {border: 0;
	margin: 0px 0px 0px 350px;
	width: 440pt;
	position: relative;
	padding: 5px 50px 10px 0px;
	color: c0c0c0;
	}
	

	.textbox {border: 0;
	margin: 0px 0px 0px 350px;
	width: 440pt;
	float: none;
	position: relative;
	padding: 30px 50px 10px 0px;
	color: c0c0c0;
	}
	

/*front page gallery css*/
/*credit: Copyright © 2009 Jamp Mark Web Creations. All Rights Reserved.*/
.slideshow {
	font-family:Arial, Helvetica, sans-serif;
	line-height:normal;
	width:417px;
	height:750px;/*this sets the height of the box that contains all the pictures. If you add more pictures to the gallery you will need to increase the height of the box*/
	overflow:hidden;
	background-color:#000000;
	color:#FFFFFF;
	border:5px solid #ff9900;
	margin: 0 0 0 70px;
}
.slideshow > ul {
	margin: 0;
	padding: 0;
}
.slideshow > ul > li {
	display:inline;
	margin:0px;
	padding:0px;
	font-size:1px;
	margin-right: -1px;
}
.slideshow > ul > li > div {
  display: none;
  text-decoration: none;
  float:left;
}
.slideshow > ul > li > div > p {
  font-size:11px;
  text-align:center;
  padding:10px 0px 0px 0px;
  margin:0px;
  color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
	border:2px solid #FFFFFF;
	width:440px;
}
.slideshow  > ul > li > img {
	border:2px solid #FFFFFF;
	margin:0px;
	padding:0px;
	width:100px;
	height:80px;
}
/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
	display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
	border-color:#000000;
}
/* gallery ends*/


	/*contact form*/
	/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#myform.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 15px 0 20px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 3%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}
/*css form ends*/

		
	ul {
	list-style: none;
	font-weight: bold;
	font-size: 120%;
	text-align: left;
	margin: 0;
	padding: 0;
	}
	
/* =-=-=-=-=-=-=-[Navigation Menu]-=-=-=-=-=-=-=- */
	
#nav {
	width: 200px;
	margin-top: 0px;
	}
	
#nav li a {
	text-decoration: none;
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
	}
	
#nav li a:link	{
	color: #000000;
	display: block;
	padding: 8px 0 0 5px;
	}

 #nav li a:visited {
	color: #000000;
	display: block;
	padding: 8px 0 0 5px;
	}
	
#nav li a:hover {
	color: #000000;
	padding: 8px 0 0 15px;

	}
	
#nav li a:active {
	color: #000000;
	padding: 8px 0 0 15px;
	/*background: url(images/arrow.png) no-repeat 100% 20%;
	decided to try using img src in html doc on sep pages*/
	}

/* =-=-=-=-=-=-=-[Navigation Menu Ends]-=-=-=-=-=-=-=- */


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: fff;
padding: 5px;
left: -1000px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -400px; /*position where enlarged image should offset horizontally */

}



	#footer	{
	clear: both;
	border-top: 5px;
	bottom: 1px;
	}