@charset "utf-8";
/* CSS Document */
/* This css document and all web pages associated with it were designed and written by Red Pearl Design Company. Using these works without the consent of Red Pearl Design Company is strictly prohibited. If you would like to use any of this content in your own work or if you would like to have work created for you, please visit http://redpearldesigncompany.com and contact us via email. Have a great day */

/* ------------------------- General styles site wide go here ------------------------- */

body  {
	font: 100%  Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/background/background_04.png);
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	font-size: 10pt;
}
a:hover {
	color: #9e6214;
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.2em;
}
h3 {
	font-size: 1em;
}
p {
	font-size: 10pt;
}
/* ------------------------- End of general styles site wide  ------------------------- */

/* ------------------------- Header styles site wide go here ------------------------- */

#header {
	width: 1400px;
	height: 200px;
	margin: 0 auto 1em auto;
	padding: 0;
	background-image: url(../images/header/web_header_wide.png);
	background-repeat: no-repeat;
	background-position: center;
/*	padding: 0 10px 0 20px;*/  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	text-indent: -1000em;
}
#header a{
	line-height: 200px;
	width: 470px;
	display: block;
	color: #9e6214;
}

/* ------------------------- End of header styles site wide ------------------------- */

/* ------------------------- Top Background styles site wide go here ------------------------- */

#topbackground{
	width: 1100px;
	margin: 1em auto 1em auto;
	padding: 1em 0 0 0;
	background: url(../images/background/background_nowheat_01.png);
}

/* ------------------------- End of top background styles site wide ------------------------- */

/* ------------------------- Main Container styles site wide go here ------------------------- */

#container { 
	width: 1000px;  /* If having issues with browser horizontal scroll bars, changing this to 780px will help. Using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 1em auto 1em auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 


/* ------------------------- Sidebar styles site wide go here ------------------------- */

#sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 110px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
/*	background: #EBEBEB;*/ /* the background color will be displayed for the length of the content in the column, but no further */
/*	padding: 15px 10px 15px 20px;*/
	padding: 0;
	margin: 0;
}

/* ------------------------- Navlinks text styles site wide go here ------------------------- */

#navlinks {
	padding: 0;
	margin: 0;
}
#navlinks li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#navlinks li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #9e6214;
	text-decoration: none;
	line-height: 44px;
	margin: 0;
/*	border-bottom: 1px solid #fff;*/
	width: 110px;
/*	padding-left: 30px;*/
	display: block;
	text-indent: -1000em;
}

/* ------------------------- End of navlinks text styles site wide ------------------------- */

/* ------------------------- Navlinks image button styles site wide go here ------------------------- */

/* ---Note: Navlinks are made from a single background image that is 330px wide x 38px high. 
On hover the background image shifts 110px to the left to reveal the hover position and the same happens for the current state. 
There is "a" text for each link that shifts 1000em to the left to become invisible for typical screen view. --- */

#navlinks li#index {
	line-height: 38px;
	width: 110px;
	background: url(../images/buttons/button_about.png) no-repeat left center;
}
#navlinks li#index:hover {
	background-position: -110px;
}
#navlinks li#index.current {
	background-position: top right;
}
#navlinks li#contact {
	line-height: 38px;
	width: 110px;
	background: url(../images/buttons/button_contact.png) no-repeat left center;
}
#navlinks li#contact:hover {
	background-position: -110px;
}
#navlinks li#contact.current {
	background-position: top right;
}
#navlinks li#gallery {
	line-height: 38px;
	width: 110px;
	background: url(../images/buttons/button_gallery.png) no-repeat left center;
}
#navlinks li#gallery:hover {
	background-position: -110px;
}
#navlinks li#gallery.current {
	background-position: top right;
}
#navlinks li#events {
	line-height: 38px;
	width: 110px;
	background: url(../images/buttons/button_events.png) no-repeat left center;
}
#navlinks li#events:hover {
	background-position: -110px;
}
#navlinks li#events.current {
	background-position: top right;
}
#navlinks li#membership {
	line-height: 38px;
	width: 110px;
	background: url(../images/buttons/button_member.png) no-repeat left center;
}
#navlinks li#membership:hover {
	background-position: -110px;
}
#navlinks li#membership.current {
	background-position: top right;
}
#navlinks li#links {
	line-height: 38px;
	width: 110px;
	background: url(../images/buttons/button_links.png) no-repeat left center;
}
#navlinks li#links:hover {
	background-position: -110px;
}
#navlinks li#links.current {
	background-position: top right;
}
#navlinks li#started {
	line-height: 38px;
	width: 110px;
	background: url(../images/buttons/button_started.png) no-repeat left center;
}
#navlinks li#started:hover {
	background-position: -110px;
}
#navlinks li#started.current {
	background-position: top right;
}
#navlinks li#blog {
	line-height: 38px;
	width: 110px;
	background: url(../images/buttons/button_blog.png) no-repeat left center;
}
#navlinks li#blog:hover {
	background-position: -110px;
}
#navlinks li#blog.current {
	background-position: top right;
}
#navlinks li#projectbook {
	line-height: 38px;
	width: 110px;
	background: url(../images/buttons/button_project_book.png) no-repeat left center;
}
#navlinks li#projectbook:hover {
	background-position: -110px;
}
#navlinks li#projectbook.current {
	background-position: top right;
}

/* ------------------------- End of navlinks image button styles site wide ------------------------- */

/* ------------------------- End of sidebar styles site wide ------------------------- */

/* ------------------------- Main Content styles site wide go here ------------------------- */

#maincontent-bkgtop {
	width: 784px;
	height: 20px;
	margin: 0 0 0 216px;
	padding: 0;
	background-image: url(../images/background/curvedbox_top.png);
}
#maincontent { 
	margin: 0 0 0 216px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 18px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 748px;
	background: #e3d8b9;
/*	background-image: url(../images/background/curvedbox_top.png);*/
}
.imgflrt{
	margin-left: 10px;
}
#directions-text {
	margin: 0;
	padding: 0;
	width: 748px;
}
.directions-box {
	clear: both;
	width: 748px;
	margin: 0;
	padding: 0;
}
.directions-box img{
	width: 200px;
	margin-bottom: 18px;
	float: right;
}
.directions-box p{
	padding-right: 218px;
}
#maincontent-bkgbottom {
	width: 784px;
	height: 20px;
	margin: 0 0 0 0;
	padding: 0;
	background-image: url(../images/background/curvedbox_bottom.png);
	float: right;
	clear: right;
}
.project-book-cover img {
  width: 400px;
  margin-bottom: 18px;
  margin-left:  10px;
  float: right;
}

/* ------------------------- End of main content styles site wide ------------------------- */

/* ------------------------- Footer styles site wide go here ------------------------- */

#footer { 
/*	padding: 0 10px 0 20px;*/ /* Use this padding only if using a text footer instead of an image footer. This padding matches the left alignment of the elements in the divs that appear above it. */
	padding: 0 0 1em 0; /* Use this padding with a background image for the footer */
	margin: 5em auto 2em 0;
	width: 1000px;
	height: 46px;
	background: url(../images/footer/footer_text.png) no-repeat; 
	clear: both
} 
#footer a{
	line-height: 1.5em;
	width: 400px;
	display: block;
	color: #9e6214;
	text-decoration: none;
}
#footer h1 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	text-indent: -1000em;
}

/* ------------------------- End of footer styles site wide ------------------------- */

/* ------------------------- End of main container styles site wide ------------------------- */

/* ------------------------- Clear element styles site wide go here ------------------------- */

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.clearboth { /* This class can be assigned to any div element to cause it to clear any floats within the same container. */
	clear: both;
}

/* ------------------------- End of clear element styles site wide ------------------------- */

/* ------------------------- These are unused styles. They can be used anywhere you want. ------------------------- */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}

/* ------------------------- End of unused styles ------------------------- */