/* the appropriate background class is applied based on class attached to the body */

body {
margin: 0;
padding: 0;
font:80% Verdana, Arial, Helvetica, sans-serif;
line-height:20px;
}

#twoColLayout {
background-color:#FFFFFF;
}


/* default links */

a:link {
background-color: transparent;
text-decoration: underline;
color: #451A45;
}
a:visited {
background-color: transparent;
text-decoration: underline;
color: #451A45;
}
a:hover {
text-decoration: underline;
color: #666666;
}


/* headers here */

h1 {
margin: 0;
font-family:Georgia, "Times New Roman", Times, serif;
padding: 5px;
font-size: 180%;
color: #451A45;
text-align: left;
font-style: italic;
font-weight: normal;
}

h2 {
margin: 0;
font-family:Georgia, "Times New Roman", Times, serif;
margin-top: 15px;
padding: 0;
font-size: 140%;
color: #451A45;
letter-spacing: 2px;
}

/* and then these h3 statements, unique to whichever section has been attached above, will give the headers the appropriate background color */

h3 {
font-size: 120%;
font-family:Georgia, "Times New Roman", Times, serif;
line-height: 100%;
font-style: italic;
margin: 0;
margin-top: 5px;
color: #451A45;
padding: 2px;
letter-spacing: 2px;
}


#TOC {
font-size: 90%;
border-bottom: 30px;
 }
 
#TOCHere { font-weight: bold; text-transform:uppercase; } 

p.caption  { font-size: 90%;}

/* main wrapper that holds it all centrally */

#wrapper {
width:850px;
margin:0 auto;
border: #CFCFCF 1px solid;
background-color: #FFFFFF;
padding: 0;
}

/* default masthead holding the banner and mainNav */

#header {
width: 850px;
height: 175px;
margin: 0;
}

#header h1 {display: none; }
/* default masthead holding the banner and mainNav */

#navWrap {
width: 850px;
height: 30px;
background-color: #451A45;
}


/* now the three main columns, named in order of importance and display when styles switched off */

#primaryContent {
float:left;
width:850px;
min-height: 480px;
display:inline;
margin: 0;
background: #FFFFFF;

}

#innerWrap  {
padding: 20px;
margin-bottom: 10px;
vertical-align: top;
}

#homeText {
width: 380px;
float: left;
height: auto;
margin: 15px;
margin-top: 20px;
margin-left: 20px;
padding: 20px;
background: #DFDFDF;
background-repeat: repeat;
 }

#homeText p {
color: #252034;
letter-spacing: 2px;
line-height: 180%;
font-style: italic;
 }
 
#resText {
width: 500px;
float: left;
height: auto;
margin: 15px;
margin-top: 20px;
margin-left: 20px;
padding: 20px;
background: #DFDFDF;
background-repeat: repeat;
 }

#resText p {
color: #252034;
letter-spacing: 2px;
line-height: 180%;
font-style: italic;
 }
 
 
/* #twoColLayout #primaryContent {
width:350px;
float:left;
display:inline;
margin: 0 0 20px 195px;
padding-left: 10px;
padding-top: 10px;
}  */



#leftContent{
float:left;
width:450px;
margin: 0 0 20px -850px;
padding-left: 10px;
padding-top: 10px;
}

#rightContent{
width:310px;
float: right;
clear: both;
margin: 5px;
margin-right: 25px;
margin-top: 20px;
}

#RESrightContent{
float: right;
clear: both;
width:190px;
margin: 5px;
margin-right: 30px;
margin-top: 20px;
}

#RESrightContent img {
border: solid #FFCCCC 8px;
}

ul {
padding: 0;
margin: 0;
margin-left: 35px;
margin-bottom: 10px;
color: #cccccc;
line-height: 140%;
 }



#rightContent img{
border: solid ##FF9999 8px;
}
/*  footer */

#footer{
clear:both;
width: 850px;
height: 45px;
background-color: #FFCCCC;
color: #FF99CC;
padding: 0px;
font-size: 70%;
}
#footer p {
margin: 10px 10px 0 0;
padding: 20px 10x 10px 0;
padding-top: 15px;
text-align: center;
}

#footer a:link, #footer a:visited {
color: #451A45;
text-decoration: underline;
}
#footer a:hover {
color: #FFFFFF;
background: #330033;
}

/* image control. First we define stuff common to ALL images on the page. */

img {
border: 0;
}

/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */

.default img {
border: 0;
}



/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */

.spacer {
clear: both;
}


p.sale  {
height: 98 px;
background: url("../images/SaleButtonBG.jpg");
background-repeat: no-repeat;
margin-top: 15px;
padding: 25px;
font-size: 150%;
font-style: normal;
color: #ffffff;
line-height: 100%;
letter-spacing: 2px;
text-align: right;
}

/* horizontal main menu navigation - based on a method from Richard Rutter */

 #mainNav
{
margin: 8px 0 0 0;
padding-top: 7px;
width: 840px;
height: 25px;
font-weight: bold;
font-size: 90%;

}

#mainNav ul
{
list-style: none;
margin: 0;
margin-bottom: 8px;
padding: 0;
border: none;
}

#mainNav li
{
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
}

#mainNav a
{
color: #FFFFFF;
display: inline;
width: auto;
letter-spacing: 1px;
text-decoration: none;
font-style:italic;
font-weight: normal;
margin: 0;
padding: 8px 10px;
border-right: 1px solid #6C6D6D;
}

#mainNav a.contact
{
color: #FFFFFF;
display: inline;
width: auto;
letter-spacing: 1px;
text-decoration: none;
font-style:italic;
font-weight: normal;
margin: 0;
padding: 10px 10px;
border: none;
}

#mainNav a:hover, #mainNav a:active { color: #CCCCCC; text-decoration: underline;}



/* Highlighting the current page */

#mainNav a#HERE { 
color: #FFFFFF
text-decoration: underline;
font-weight: bold;
font-style: normal;
}

#welcome { font-size: 200%;
line-height: 160%;
color: #451A45;
font-style: italic; }