@charset "utf-8";
/*


Developer Notes

Try to keep your declarations organized. Practically, it can be a pain when you're trying
to figure something out although taking ten minutes at the end of a project to tidy things up is well worth it
when you come back six months later. Below is a list that seems pretty long and rarely have I found the need to 
set even half of these on one class or id. Generally I just keep in mind three - box properties and layout rules
(the first five below), background and border properties and typography.

    * Position
    * Float and Clear
    * Width and Height
    * Margin and Padding
    * Overflow
    * Border
    * Background
    * Font and Text effects
	
Try to keep the file organized by the type of declaration. That said, there will be times where you need to add
a class to a child of an element with an id (i.e. #header #header.content) and those should be placed close to the
parent element's declaration. As in don't place #header.copy in the custom classes section but rather under the
#header declaration. When working with the element, all its styles are in the same area of the document.
	
Add or replace all relevant color values from the PSD layout to the list below
If Pantone colors are avaialable, list the number and if applicable the tint percent. If Pantone's aren't
applicable, just give the color a name that can be used to describe the color to other developers or designers.
Of course, hex values do not have tints so the tint colums will only apply to Pantone colors.
Don't bother with the # sign for hex values - double clicking the numbers won't pick up the symbol anyway.
If you'd really like to be helpful, adding some hints as to where the color is used on the page under the usage
column will give the person a visual reference. The whole idea of listing the colors here is to prevent the
developer from having to switch back and forth between DW & Photoshop or a browser. It also ensures consistent use
of color on the site to prevent slightly different color values from being picked up by the color picker.

Color Scheme:
Pantone / Color Name 		Tint		Hex				Usage
---------------------		----		-------			-----
n/a / dark red				100			642f29			wrapper bgs, 
n/a / med red				100			734641			page border, footer bg
n/a / light red				100			B27D75			page bg color
n/a / dark grey				100			535353			body copy

*/

 
/* ///////////////////////////

@import rules

/////////////////////////// */

@import url("reset.css");

/* ///////////////////////////

Global Overrides

/////////////////////////// */

body {
	background: #B27D75 url(../../images/body-bg.jpg) repeat-y scroll 0% 0%;
	background-position: center top;
	font: bold 13px Arial, sans-serif;
	color: #444;
	text-align: justify;
}

h1 {
	margin-bottom: 1em;
	font: bold 160% Georgia, "Times New Roman", Times, serif;
	color: #734641;
	font-style:italic;
	text-align:center;
}

h2 {
	margin-bottom: 1em;
	font: bold 140% Verdana, Arial, Helvetica, sans-serif;
	color: #734641;
}

h3 {
	font: bold 16px Georgia;
	color: #734641;
}
h4 {
	margin-bottom: 1em;
    font: bold 110% Georgia, "Times New Roman", Times, serif;
	color: #734641;
	font-style:italic;
}
h5 {font: bold 14px Georgia;
	line-height:12px;
	color: #734641;}

p {
	margin-bottom: 1em;
}

a {
	color: #734641;
	text-decoration: underline;
}

input, select {
	margin-bottom: 3px;
}

/* ///////////////////////////

ID Declarations

/////////////////////////// */
#site {
	width: 850px;
	margin: 0 auto;
	margin-top: 10px;
	padding-top: 12px;
	background: #B27D75 url(../../images/bg.jpg) repeat-y scroll 0% 0%;
	background-position: left top;
}

#wrapper-top {
	width: 780px;
	height: 15px;
	background: transparent url(../../images/body_top.png) no-repeat scroll 0% 0%;
	background-position: center;
	margin: 0 auto;
}

#wrapper {
	width: 770px;
	background-color: #B98B84;
	margin: 0 auto;
	
}

#header {
	width: 770px;
	min-width: 770px;
	margin: 0 auto;
	background: transparent url(../../images/header_bg4.jpg) no-repeat scroll 0% 0%;
	background-position: center top;
}

#header h1 {	
	height: 22px;
	text-align: left;
	text-indent: -9999px;
	font: 18px "Georgia";
}

#masthead {
	margin: 0 auto;
}

#header-nav {
	margin: 12px 12px 36px auto;
	text-align: right;
}

#flash-pics {
	
}


#main-nav {
	height: 31px;
	background: transparent url(../../images/m-sf-a.gif) repeat-x scroll 0% 0%;
}

/*
#main-nav ul {
	margin: 0 auto;
	
}


#main-nav li {
	display: inline;
	margin-left: 8px;
	font: bold 12px Arial;
	height: 31px;

}

#main-nav li a {
	display: block;
	float: left;
	padding: 8px 13px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	
}

#main-nav li a:hover {
	background: transparent url(../../images/nav_bg_over.jpg) repeat-x scroll 0% 0%;

}
*/

#page {
	width: 750px;
	min-width: 750px;
	margin: 0 auto;
	margin-bottom: 2em;
	background: transparent url(../../images/content_bg_lg.jpg) repeat-y scroll 0% 0%;
}

#content {
	width: 543px;
	float: left;
	
}
#content2 {
 width:100%;
	float: left;
	
}
#content2 h2 {
	text-align:center;
	
}

#content-wide {
	width: 750px;
	float: left;
	
}

#content h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}

#article {
	padding: 15px;
}

#sidebar {
	float: left;
	width: 207px;
}

#related-links {
	margin: 24px 0 0 11px;
}

#related-links li {
	width: 181px;
	height: 41px;
	margin-bottom: 3px;
	
	font: bold 12px Arial;
	font-weight: bold;
}

#related-links li a {
	display: block;
	width: 135px;
	margin-bottom: 3px;
	padding: 12px 8px 12px 45px;
	background: transparent url(../../images/link_bg.jpg) no-repeat scroll 0% 0%;
	color: #734641;
	text-decoration: none;
}

#related-links li a:hover {
	text-decoration: underline;
}

#specific {
	background-color: #366;
}

#footer {
	min-width: 770px;
	height: 77px;
	background: transparent url(../../images/footer_bg.jpg) no-repeat scroll 0% 0%;
	background-position: center;
}

#footer-nav {
	padding-top: 18px;
	text-align: center;
	
}

#footer-nav ul {
	padding: 0 0 2px 8px;
}

#footer-nav li {
	display: inline;
	padding: 3px;
	font: 11px "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#footer-nav li a {
	color: #FFF;
	text-decoration: none;
}

#legal {
	margin: 0 15px;
	text-align: center;
}

#legal ul {
		
}

#legal li {
	display: inline;
	padding: 3px;
	font: 9px Arial, Helvetica, sans-serif;
	color: #FFF;
}
#legal li a {
	display: inline;
	padding: 3px;
	font: 9px Arial, Helvetica, sans-serif;
	color: #FFF;
}

/* ///////////////////////////

Custom Classes

/////////////////////////// */
.clear-both {
	height: 0px;
	clear: both;
}

.no-margin, #content.no-margin {
	margin:0;
}

.one-col {
	width: 100%;
}

.two-col {
	width: 49%;
	
}

.three-col {
	width: 30%;
	padding-left: 8px;
	padding-right: 8px;
	
}


.four-col {
	width: 24%;
	
}

.five-col {
	width: 19%;
}

.two-col, .three-col, .four-col, .five-col {
	float: left;
	margin: 0 0 10px 10px;
}

#sidebar.first-col, .first-col {
	margin: 0;
}

.feature {
	padding: 3px;
}

.logo, .search {
	float: left;
	
}

.logo {
	width: 445px;
	height: 135px;
	margin: 8px 0 0 12px;
	padding: 0;
	overflow: hidden;
}

.search {
	width: 286px;
	margin: 8px 0 10px 12px;
	padding:0;
	background: transparent url(../../images/header_bg.jpg) no-repeat scroll 0% 0%;
	
}

.content-images img {
	border-right: 3px solid #B98B84;
	border-bottom: 3px solid #B98B84;
}

#sidebar #photo-fader {
	height: 295px;
	border-bottom: 3px solid #B98B84;
}


.bold {
	font-weight: bold;
}

.contentTitle {
	font-size: 14px;
	color: #734641;
}

.smallCaps {
	font-size: 16px;
	font-variant: small-caps;
}

#watercolors {
	height: 125px;
	overflow: hidden;
	text-align: center;
}

#col-left {
	float: left;
	width: 175px;
	line-height: 22px;
}
#col-right {
	float: left;
	width: 350px;
}
.ext-link {
	font-size:1.0em;
	text-align:center;
	line-height:2em;
}
.ext-link a {
	color:#fdf6ec;
	border:#734641 .1em solid;
	padding:.2em .5em .2em .5em;
	background: url(../../images/m-sf-a.gif) repeat-x;
}
.ext-link a:hover {
	color:#fdf6ec;
	border:#734641 .1em solid;
	padding:.2em .5em .2em .5em;
	background: url(../../images/m-sf-a.gif) repeat-x;
	background-position: -0px -31px;

}
.centerimage {
	text-align:center;
}

/*//////////////// forms */

.form {
	background-color:#ffffff;
}
.input.small {
	background-color:#ffffff;}

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

.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: 200px;
}

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

.watermark {
	background: transparent url(../../images/content_bg.png) no-repeat scroll 0% 0%;
	background-position: center top;
}

img.photo {
	border: 2px solid #734641;
}

p.dropCap {
	line-height: 200%;
}

p.dropCap:first-letter {
	float: left;
	margin-left: -8px;
	margin-right: 5px;
	margin-top: 5px;
	padding: 5px;
	color: #734641;
	font: italic 400% Georgia, "Times New Roman", Times, serif;
}

.links-box {
	width: 650px;
	height: 30px;
}	

.links {
	width: 300px;
	float: left;
	margin-left: 50px;
	text-align: right;
	padding-bottom: 5px;
}	

.address {
	float: left;
	width: 200px;
	text-align: left;
	margin-left: 25px;
	padding-bottom: 5px;
}	

.spacer {
	width: 200px;
	float: left;
}

.spacer2 {
	width: 500px;
	float: left;
}	

.spacer3 {
	width: 265px;
	float: left;
}		

.half-break {
	margin-bottom: 8px;
}

.half-break2 {
	margin-bottom: 8px;
	width: 515px;
	float: left;
}

.class-pics {
	width: 175px;
	float: right;
}

.underline {
	border-bottom: 1px dotted #B98B84;
}		


/*************/
.bio-pic
{
	
	width: 200px;
	float:right;
}

.bios
{
	
}

.bios ul
{
	list-style: none;
	display:inline;
	padding: 10px;
}

.bios li
{
	list-style: none;
	display:inline;
	padding:5px;
}