@charset "utf-8";
/* CSS Document */

/* ---- ----- - ----- ---- -- -- --  generic styles apply everywhere  */

body {
	margin: 0 auto;
	padding: 0;
	background: #756A70;
	color: #000000;
	font-family: "Trebuchet MS", Verdana, sans-serif;
}

/*  margin and padding set to zero to remove space around the design */

#container {
	background: #FFFFFF;
	margin-bottom: 4em;
	margin-right: auto;
	margin-left: auto;
	width: 50em;
}

#banner {
	background-color: #CCCCCC;
	padding: 1px 0 1px;
}


a {
	text-decoration:none;
	color: #000000;
}
/*  removes underlining from links   */

li {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
	}

 

a img {
	border: thin solid #666666;
	float: left;
}

/*  some browsers put border on images by default 
the rule says remove the border on images inside links
this is an example of a descendent element */

p {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
	text-align: justify;
	margin: 0px 0px 1.2em;
	line-height: 1.2em;
}

#pagecontents p {
	text-align: justify;
	color:#00FF33;
}

/*  this puts a margin at the bottom of paragraphs to allow space
between p elements, but makes it possible to snug up the top of
a paragraph with a preceding element, say a header, by removing the
bottom margin from the one above.  think of margin as a transparent 
bit of tape that allows what's under to show thru.  So two margins can
be superposed, and the result won't be additive-- you just see the
distance of one margin--  this is called margin collapsing.  */

h1 	{
	color: #330033;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 2em;
	text-align: center;
	padding: .5em;
	}
	
h1 a {
	text-decoration: none;
	color: #CC3300;
	}
	
h2	{
	color: #330033;
	font-weight: bold;
	margin: 0 0 2px 0;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 1.2em;
	line-height: 1.3em;
	text-align: center;
	}
.bold {
	font-weight: bold;
	text-decoration: none;
}

	
h2 a {
	text-decoration: none;
	color: #990000;
	}
	
h3	{
	color: #330033;
	font-weight: bold;
	margin-top: 0;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	text-align: center;
	}
	
h3 a {
	text-decoration: none;
	text-transform: uppercase;
		}
 
 h4 {
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 96%;
	line-height: 130%;
	color: #000000;
}

 img {
	margin: 0 auto 0 auto;
	background: center;
	border: medium solid #666666;
		}
		
.more {
	font-weight: bold;
	color: #000066;
}
 	

/*  masthead styles  ----------------*/

#masthead   {
	background: #FFF;
	margin: 10px 0 10px;
	text-align: center;
	padding: 11px 0px 11px;
	height: 95px;
	border-bottom: 5px solid #CC0000;
}
#masthead img {
	border: none;

}


/*  padding added to contain any margins that might be inside the
masthead div.  Without the padding, the margins would allow the color of
the element below to show through and appear as a space.  With the padding,
the color of the content area shows up to the inner edge of the border.  in other words,
all the way to the edge of the div.  */



.page-title{
	/*set margin/padding to 0 to remove extra padding from h1 tag*/
  margin: 0;
	padding: 0;
	/*set the height of the <h1> block to the height of the image*/
  height: 95px;
	background: url(../images/hdr/hdr3.jpg) no-repeat center;
} 

.page-title span{
  /*hide text inside <span> tag*/
  display: none;
}

/* Basically what we're doing is hiding the text, which is placed within the <span> tag.  On the <h1> tag, we're setting the margin and padding to zero (because h1s have some built-in margin and padding) and then adding a CSS bg image and setting the height to the image height.  h1s are a block, so they span the width of the page by default, so to center the image horizontally on the page, we just set background-position: center;.  Note: if you set the height to more than the height of the page, background-position: center; would center the image horizontally and vertically in that box.  Ditto if you set the height less than the image.  */


/* navigation styles --- - --- -- - ---- - - -- - - - -- -   */

#navlinks {
	margin: 15px 0;
	padding: 0.5em 2em 0;
	background:  #CCCCCC;
	color: #000000;
	height: 2em;
}


/*  this gives the links top and bottom padding, plus 3em left and right  
  in addition, they get a background color and text color of their own 
  the 3em padding pushes the content away from the left edge and is
  set to align the start of the navlinks with the image above--it could be
  anything that makes the navlinks line up where you want */

#navlinks li   {
	display:	inline;
	margin-right: 0.5em;
	padding: 0 0.75em 0 0;
	border-right: 1px solid #990000;
	font-weight: bold;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	padding: 3px 0.75em 3px 0em;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

/*  inline takes the ordered list and makes it go horizontal
padding right controls the right side of the content area
margin right takes the space from the preceding element
the .25em difference is due to white space (the way the browser
reads, and accounts for an extra amount which, when added,
equals the .75em padding   
The right border shows up as a pipe separator
*/
	
#contents {
	background: #FFFFFF;
	float: left;
	padding: 2em 20em 4em 2em;
	width: 400px;
}

		#contents a {
	text-decoration: none;
	font-weight: bold;
	color: #990000;
}

		#contents a:hover {
	color: #CC6600;
	text-decoration: underline;
}

#menu {
	float: right;
	width: 17em;
	margin: 3em 1em 1em -18em;
	padding: 1.5em 0 1em;
	background-color: #CCCCCC;
}

#whatsnew {
	background: #FFFFFF;
	padding: 1em 0.5em 1em;
	margin: 0 1em 1em;
}

#recent {
	background: #FFFFFF;
	padding: 1em 0.5em 1em;
	margin: 0 1em 1em;
	color: #000000;
}	
	 
#photos  {
	background: #FFFFFF;
	padding: 1em 0.5em 1em;
	margin: 0 1em 1em;
}

#news  {
	background: #FFFFFF;
	padding: 1em 0.5em 1em;
	margin: 0 1em 1em;
}

#main-img {
	background: #FFFFFF center;
	margin: 3em auto 0 auto;
	text-align: center;
}

#main-img img {
	margin: 10px auto;
	padding-bottom: 0px;
	}

#description  {
	background: #FFFF66;
}

	.imagefloatright
	{
	float: right;
	padding: 2px;
	border: 1px solid #003399;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 10px;
	}
	
	.imagefloatleft
	{
	float: left;
	padding: 2px;
	border: 1px solid #003399;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	}
	
		#footer
	{
	clear: both;
	color: #000000;
	text-align: center;
	padding: 5px;
	font-size: 90%;
	border-top: 2px solid #CCCCCC;
 	}
	
	#footer p
	{
	text-align: center;
	margin-top: 5px;
	margin-bottom: 0px;
	}
	
	#pgcontents {
	margin: 2em auto 0 auto;
	padding: 1em;
}		

		#blockcontents  {
	padding: 0 1.5em .5em;
	margin: 1em 1em;
	color: #000000;
	border: 15px solid #CCCCCC;
}

		#blockcontents a {
	text-decoration: none;
	font-weight: bold;
	color: #990000;
}

		#blockcontents a:hover {
	color: #CC6600;
	text-decoration: underline;
}


		#blockcontents li {
	text-decoration: none;
	text-transform: none;
	color: #000000;
}


	
a:hover {
	color: #CC6600;
	text-decoration: underline;
}