body {
     font: 100.01% Arial, Helvetica, sans-serif;
     background: #FFF url(images/back.jpg) repeat-x;
     margin: 0;
     padding: 0;
     text-align: center;
}
#holder {
	margin: 4px auto 0;
	padding: 0;
	width: 760px;
	text-align: left;
	position: relative;
	background: #E8EDD5 url(images/bar2.gif) repeat-x;
}
/* this is simply an empty div nested in the #holder to give me a hook to hang the bottom curve on */
#hook { 
	background: url(images/tophold.gif) no-repeat;
}

/* top navigation */
#nav {
	margin: 0;
	padding: 13px 0 0;
}
/* the rest of the menu styling is in the PVII sheet */
#header {
	border-bottom: 1px solid #82653D; /* you probably won't need this later... I just didn't slice that one border */
	margin: 0 0 3px; /* this keeps the bottom of the header away from the links below */
}

/* this is the right sidebar */
#news { 
	width: 175px;
	padding: 0;
	margin: 0;
	float: right;
}
#news p {
	font-size: 80%;
	color: #7E4E17;
}
#news .inner {
	margin: 0 10px 0 30px;
	font-size: 90%;
}
/* anywhere you'd like the small horse and underline as a divider, you can use this */
.horse {
	background: url(images/smhorse.gif) no-repeat -3px 0;
	padding-left: 40px;
	padding-top: 7px;
	height: 15px;
	text-align: right;
	border-bottom: 1px solid #BE5126;
}

/* this is your content area ... just the basics. */
#content {
	margin: 0 180px 0 0;
	padding: 0 10px;
	color: #656E51;
}
#content .inner {
	margin: 0 0 0 25px;
	padding: 0;
}
#content h1 {
	font-size: 120%;
	color: #262A23;
}
body#homepg #content h1 {
	font-style: italic;
}
/* this creates the indented second row of the h1 on the main page */
#content h1 span {
	margin-left: 130px;
}
#content h3 {
	font-size: 90%;
	background: url(images/headback.gif) no-repeat 0 8px;
	padding: 10px 0 3px 38px;
}
#content h4 {
	font-size: 85%;
	color: #262A23;
}
#content p, #content ul, #content ol {
	font-size: 80%;
}
/* this creates the larger text on the front page... or anything you need larger */
#content p.callout {
	font-size: 105%;
	font-weight: bold;
}
/* this creates the two column list */
#content ul.two {
	font-weight: bold;
	float: left;
  	width: 520px;
  	margin: 0 0 15px;
  	padding: 0;
	background: url(images/watermark.gif) no-repeat 190px 20px;
	font-size: 70%;
	color: #535B45;
	list-style: none;
}
#content ul.two li {
  	float: left;
  	width: 175px;
  	margin: 0;
  	padding: 0 0 0 8px;
  	margin-left: 60px;
	background: url(images/bullet.gif) no-repeat left center;
	display: inline;
}
/* the base of sitewide links... but there are MANY different styles below. :) */
a:link {
	color: #BE5126;
	text-decoration: underline;
	font-weight: bold;
}
a:visited {
	font-weight: normal;
	color: #BE5126;
}
a:hover, a:active, a:focus {
	color: #7E4E17;
	text-decoration: none;
}
/* this is the two links at the top beneath the banner as well as any links you want in the orange, with the arrow and aligned to the right (used by the floated images) */
p.top {
	text-align:right; 
	margin-top: 0;
	margin-right: 5px;
}
p.top a:link, p.top a:visited, p.caption a:link, p.caption a:visited {
	background: url(images/arrow.gif) no-repeat left center;
	padding-left: 10px;
	font-size: 80%;
	font-weight: bold;
}
p.caption {
	clear: left;
	margin-top: 5px;
}
/* this is the divider before the blog (to be used anywhere you need a one line divider */
.divide {
	border-top: 1px solid #97A57D;
	clear:left;
    height:1px;
	width: 65%;
	margin: 20px 12% 0;
}
/* blog styles */
#blog h2 {
	font-size: 85%;
}
#blog .more {
	text-align: right;
}
#blog .more a:link, #blog .more a:visited {
	color: #000;
	background: url(images/arrowbl.gif) no-repeat left center;
	padding-left: 10px;
}

/* info area is the bottom of the page where the images, addresses and links reside */
#info {
	margin: 0 8px 0;
	padding: 50px 0 0;
	text-align: center;
	font-size: 70%;
	background: url(images/horses.gif) no-repeat top center;
}
/* this selector puts the extra icons at the bottom of the home page only */
body#homepg #info {
	padding: 0;
}
#info p {
	margin: 0;
	padding: 0;
	line-height: 130%;
}
/* Carly made the links on each row a different color so you have the following styles to create this */
#info .rowone {
	color: #838F6B;
}
#info .rowone a:link, #info .rowone a:visited {
	color: #838F6B;
	text-decoration: none;
}
#info .rowtwo {
	color: #BE5126;
}
#info .rowtwo a:link, #info .rowtwo a:visited {
	font-weight: normal;
	text-decoration: none;
	color: #BE5126;
}
#info .rowthree {
	color: #41463D;
	font-weight: bold;
	letter-spacing: .05em;
	border-top: 1px solid #41463D;
	margin-top: 5px;
}
#info .rowthree a:link, #info .rowthree a:visited {
	color: #41463D;
}
#info a:hover, #info a:active, #info a:focus {
	color: #7E4E17 !important;
	text-decoration: underline !important;
}
/* this footer is the copyright and site development credit */
#footer {
	color: #465529;
	font-size: 65%;
	margin: 0 auto;
	width: 760px;
	background: url(images/botthold.gif) no-repeat;
}
#footer p {
	margin: 0;
	padding: 15px 5px 10px;
}
/*\*//*/
#footer span.fltlft { 
	width: 35%;
}/*this selector shows only to IE Mac and can be removed if you don't mind IE Mac having the two footer elements stacked on the right instead of side by side */
#footer a {
	text-decoration: underline;
	color: #465529;
}
#footer a:hover, #footer a:active, #footer a:focus {
	text-decoration: none;
}

/* these are your float and clear classes */
.fltrt {
	float: right;
	margin-left: 5px;
}
.fltlft {
	float: left;
	margin-right: 5px;
}
.brclear { 
     clear:both; 
     height:0; 
     margin:0;
     font-size: 1px;
     line-height: 0;
}
.clearlft { 
     clear:left; 
     height:0; 
     margin:0;
     font-size: 1px;
     line-height: 0;
}

/* form styles -- need to match them to the site */
#content form {
	border: 1px solid #656E51;
	width: 450px;
	margin-left: 25px;
	padding: 10px;
}
#content form input, #content form textarea {
	color: #656E51;
	border: 1px solid #656E51;
	padding: 1px;
	background: #F4F6DF;
}
#content form input:focus, #content form input:active, #content form textarea:focus, #content form textarea:active {
	background-color: #656E51;
	color: #FFF;
}
/*special float left class for images next to lists*/
.fltul {
    float: left;
    margin-right: 20px;
}