/*Shirley Rutland Watercolor Art*/
/*Copyright 2008, Internetfirstaid.com*/
/* CSS Document */

 /*--This gets rid of ALL the margin and padding in the whole site, since each Web browser vendor sets their own default sizes. This allows you to set whatever padding and margin you would like on any element--*/
* { margin: 0; padding: 0; }

body { 
	font-size: 100%;
	font-family: Gill Sans MT, verdana, sans-serif;
	color: #efe2a7;
	background-color: #1a1f18;
}

img, img a { border: none; } /*--This gets rid of ALL the default borders applied to images. You can change this option in the CSS to have borders on images if you want--*/

/*-----------------------------------------------------------------------
      Main Container div
        --- The main container encloses the whole template to make sure
		--- everything is positioned correctly
-------------------------------------------------------------------------*/
#container {
	width: 974px;
	height: 100%;
	margin: 0 auto;
	background-image: url(../images/backgrounds/bkg-container.gif);
	background-repeat: repeat-y;
}

/*-----------------------------------------------------------------------
      Background Container div
	    It is identical to, and located within, the main container <div>.
		It is used to contain an additional background image when needed.
		It can be used in conjunction with the container div to create a
		layered background effect.
-------------------------------------------------------------------------*/
#background-container {
	width: 974px;
	height: 100%;
	margin: 0 auto;
	background-color: transparent;
} /*--The background div is used to apply a secondary background to the overall container--*/

/*-----------------------------------------------------------------------
        Skip Link Div
-------------------------------------------------------------------------*/
#container #background-container #skip {
	width: 974px;
	height: 13px;
	background-color: #1a1f18;
/*	text-align: right;*/  /*comment out this property if .offLeft class is used to move skip link off-screen*/
}
#skip a{
	padding: 3px 10px 3px 0;
	font-size: 60%;
}
#skip a:link    { color: #999; text-decoration: none; }
#skip a:visited { color: #999; text-decoration: none; }
#skip a:hover   { color: #f33; text-decoration: underline; }
#skip a:focus   { color: #3f3; text-decoration: underline; }
#skip a:active  { color: #33f; text-decoration: underline; }

/*-----------------------------------------------------------------------
        Header Div
-------------------------------------------------------------------------*/
#container #background-container #header {
	width: 974px;
	padding: 30px 0 10px 0;
	border-bottom: 1px solid #b97a27;
	background-color: #1a1f18;
}
#logo a, #logo a:hover, #logo a:focus, #logo a:active {
	margin: 0 0 0 10px;
	font-size: 230%;
	font-family: Garamond, Palatino Linotype, "Times New Roman", Times, serif;
	color: #efe2a7;
	text-decoration: none;
}
/*-----------------------------------------------------------------------
        Horizontal Navigation
-------------------------------------------------------------------------*/
#container #background-container #siteNav {
	display: none;
}

/*-----------------------------------------------------------------------
        Left Column Navigation Div
-------------------------------------------------------------------------*/
#container #background-container #left-column {
	width: 160px;
	height: 100%;
	padding: 0px 0px 0px 0px;
	float: left;
}
/*-----------------------------------------------------------------------
								Left Navigation
------------------------------------------------------------------------*/
#left-column #left-nav {
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
/*----------------------------
	 Left Nav 1st level links
-----------------------------*/
#left-column #left-nav ul {
	list-style-image: none;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#left-column #left-nav ul p {
	font-size: 100%;
	color: #b97a27;
	padding: 8px 10px 3px 1px;
}
#left-column #left-nav ul li {
	margin: 0px;
	padding: 0px;
}
#left-column #left-nav ul a {
	display: block;
	font-size: 100%;
	color: #b97a27;
	padding: 8px 10px 3px 1px;
	text-decoration: none;
}
#left-column #left-nav ul a:hover, #left-column #left-nav ul a:focus, #left-column #left-nav ul a:active {
	text-decoration: none;
	color: #efe2a7;
}
/*----------------------------
	 Left Nav 2nd level links
-----------------------------*/
#left-column #left-nav ul ul {
	margin: 0px;
/*	padding: 0px 0px 0px 8px;*/
}
#left-column #left-nav ul ul li {
	margin: 0px;
	padding: 0px;
}
#left-column #left-nav ul ul a {
	display: block;
	font-size: 95%;
	color: #b97a27;
	padding: 1px 10px 1px 20px;
	text-decoration: none;
/*	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #b32c3c;*/
}
#left-column #left-nav ul ul a:hover, #left-column #left-nav ul ul a:focus, #left-column #left-nav ul ul a:active {
	text-decoration: none;
	color: #efe2a7;
/*	background-color: #bc864a;*/
}

/*-----------------------------------------------------------------------
  structure-content div
        Main content area - the structure-content <div> contains a <div> 
		within which the main body content is contained.  The type of
		<div> contained within the structure-content <div> is optional so
		that various types page contents/layouts can be developed.
		(in other words, this accomodates the substitution for a different 
		<div> container so that different DW templates can be developed.
		There is no padding on this <div>, so it represents the full width
		of the page body less the left column.
		e.g. of an optional content/layout <div id="map-content">
-------------------------------------------------------------------------*/
#container #background-container #structure-content {
	width: 814px;
	float: right;
	padding: 0;
	background-color: transparent;
	height: 100%;
}

#structure-content a:link    { color: #b97a27; text-decoration: underline; }
#structure-content a:visited { color: #b97a27; text-decoration: underline; }
#structure-content a:hover   { color: #b97a27; text-decoration: underline; background-color: #3a4535; }
#structure-content a:active  { color: #b97a27; text-decoration: underline; background-color: transparent; }

#structure-content p {
	font-size: 80%;
	padding: 0 0 3% 0;
}
/*#structure-content p.centered {
text-align: center;
}*/
#structure-content p.rule {
	border-bottom: 1px solid #efe2a7;
	width: 80%;
	padding: 1% 0 1% 0;
}
#structure-content h1 {
	color: #efe2a7;
	font-family: Garamond, Palatino Linotype, "Times New Roman", Times, serif;
	font-size: 140%;
	font-style: normal;
	padding: 1% 0 2% 0;
}
#structure-content h2 {
	color: #c6be98;
	font-family: Garamond, Palatino Linotype, "Times New Roman", Times, serif;
	font-size: 130%;
	padding: 3% 0 0 0;
}
#structure-content h3 {
	color: #efe2a7;
	font-family: Garamond, Palatino Linotype, "Times New Roman", Times, serif;
	font-size: 100%;
	font-weight: bold;
	padding: 2% 0 0 0;
}

/*-----------------------------------------------------------------------
  main-content div
  		Width allows for 30px padding on both sides: 814-(30+30)=754
        The main-content div is contained within the structure-content div
		and is an optional container used to contain primary (or main body) content.
-------------------------------------------------------------------------*/
#container #background-container  #structure-content #main-content {
	width: 754px;
	background-color: transparent;
	height: 100%;
	padding-top: 35px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
}
/*-------------begin promo classes-----------------*/
#main-content h1.promo{
	color: #ccc;
	font-size: 100%;
	font-weight: normal;
	text-align: center;
	padding: 0% 0% 2% 0%;
}
#main-content h2.promo{
	color: #ccc;
	font-size: 100%;
	text-align: center;
	padding: 0% 0% 1% 0%;
}
#main-content h3.promo{
	color: #ccc;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
	padding: 0% 0% 0% 0%;
}
#main-content p.promo {
	margin: 0 auto;
	text-align: center;
	padding: 0% 10% 3% 10%;
}
/*-------------end promo classes-----------------*/

#main-content p {
	line-height: 120%;
	font-size: 100%;
}
#main-content .smalltext {
	font-size: 70%;
}
#main-content .centered {
	margin: 0 auto;
	text-align: center;
	padding: 0 0 2% 0;
}
#main-content .highlight {
	color: #89322B;
	font-weight: bold;
	font-size: 120%;
}	
/*-----------------------------------------------------------------------
					Quotebox, Quote text and Inset box in main-content
------------------------------------------------------------------------*/
#main-content .quote {
	font-size: 90%;
	color: #535a76;
	line-height: 100%;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	border: none;
	text-align: center;

}
#main-content .quote2 {
	font-size: 100%;
	color: #535a76;
	line-height: 100%;
	font-weight: normal;
	margin: 0px;
	padding: 1% 0 0 5%;
	border: none;

}
#main-content .quotebyline {
	font-size: 60%;
	color: #666666;
	text-align: center;
	line-height: 9px;
	margin: 0px;
	padding: 5px 0px 0px 0px;
}
#main-content .quotebox {
	margin: 10px auto 15px auto;
	padding: 10px 20px 10px 20px;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	width: 80%;
	background-color: #ffffe2;
	clear: both;
}
#main-content .insetbox {
	margin: 0px;
	padding: 10px;
	border: 1px solid #999980;
	width: 30%;
	background-color:  #fdfdf4;
	clear: both;
}
/*-----------------------------------------------------------------------
					Data Table in main-content
------------------------------------------------------------------------*/
#main-content table {
	border-collapse: collapse;
	border: #fff 1px solid;
	margin: 1% 5%;
	background-color:#e5efa2;
}
#main-content table caption {
	font-size: 100%;
	color: #1c6a90;
	font-size: 130%;
	font-family: Garamond, Palatino Linotype, "Times New Roman", Times, serif;
	font-weight: normal;
	text-align: center;
	padding: 0 0 0 0;
}
#main-content table td {
	font-size: 100%;
	border: #fff 1px solid;
	padding: 4px 10px 4px 10px;
	text-align: left;
	vertical-align: top;
	width: 33%;
}
#main-content table tr.shade-row {
	background-color:#ffffa0;
}
#main-content table th {
	border: #fff 1px solid;
	border-bottom: #7fcdcb 2px solid;
	background-color:#bde1e0;
	padding: 4px 4px 4px 4px;
	text-align: left;
}
#main-content table th p {
	font-size: 90%;
	padding: 0;
}
/*-----------------------------------------------------------------------
					Layout Table in main-content
------------------------------------------------------------------------*/

#main-content table.layout {
	border-collapse: collapse;
	border: none;
	margin: 1% auto 1% auto;
}
#main-content table.layout td {
	font-size: 100%;
	border: none;
	padding: 4px 4px 4px 4px;
	text-align: left;
	vertical-align: top;
}
#main-content table.layout tr.shade-row {
	background-color:#ffffa0;
}
#main-content table.layout th {
	font-size: 100%;
	border: none;
	background-color:#fff38b;
	padding: 4px 4px 4px 4px;
	text-align: left;
}

/*-----------------------------------------------------------------------
								Images
------------------------------------------------------------------------*/
#structure-content img {/*border: #68030f solid 2px;*/ padding: 0px;}
#structure-content img.imageright { float: right; margin: 0 0 10px 10px; padding: 0px;}
#structure-content img.imageleft  { float: left; margin: 0 10px 10px 0; padding: 0px; }
#structure-content img.imagecentered   {display:block; margin-left:auto; margin-right:auto; padding: 0px;}

#structure-content img a:link, a:visited, a:hover, a:active  { color: #FFFFFF; text-decoration: none; background-color: transparent; }
/*#structure-content img a:visited { color: #FFFFFF; text-decoration: none; background-color: transparent; }
#structure-content img a:hover   { color: #FFFFFF; text-decoration: none; background-color: transparent; }
#structure-content img a:active  { color: #FFFFFF; text-decoration: none; background-color: transparent; }*/


/*-----------------------------------------------------------------------
 custom-content div
	The custom-content div is contained within the structure-content div
	and is an optional container used to contain custom content. This div can be used
	for assigning special content within the structure-content <div> such as a custom background, custom sizing, etc.
	Simply add a <div> inside of the structure-content <div> with the class=custom-content
	Its max width is that of the structure-content <div>
	Width = #structure-content - right-side padding: 814-20=794
------------------------------------------------------------------------*/
#container #background-container  #structure-content #customContent {
	width: 794px;
	padding: 35px 0px 30px 20px;
	/*margin-top: 50px;*/
	background-color: transparent;
	height: 100%;
}
#custom-content  a:link    { color: #89322B; text-decoration: none; }
#custom-content  a:visited { color: #3f3f3f; text-decoration: none; }
#custom-content  a:hover   { color: #541e19; text-decoration: underline; background-color: transparent; }
#custom-content  a:active  { color: #89322B; text-decoration: underline; background-color: transparent; }

#container #background-container  #structure-content #custom-content p {
	font-size: 80%;
	padding: 3% 0% 0% 0%;
	line-height: 98%;
}

/*-----------------------------------------------------------------------
						Custom Content
						Feature Image Area
------------------------------------------------------------------------*/
#customContent #featureImage {
	width: 450px;
	padding: 25px 0 0 0;
}
#customContent #featureImage p.centered{
	text-align:center; 
}
#customContent #featureImage p{
	text-align:left;
	line-height: 120%;
	font-size: 90%;
}
/*-----------------------------------------------------------------------
						Custom Content
				Gallery Column and Gallery Images
				Column is 300px wide plus a 20px right-side padding
				Horz images can line up two wide (150+150)
				Vert images can line up three wide (100+100+100)
				Square image can line up two wide (150+150)
				Note: must use .galleryImageSquare class for square images
				inorder to provide sufficient space under the image
------------------------------------------------------------------------*/
#customContent #galleryColumn {
	float:right;
	width:300px;
	padding: 50px 20px 0 0;
} 
#customContent #galleryColumn .galleryImageVert{
	float: left;
	width: 100px;
	height: 150px;
/*	border: 1px solid #fff;*/
	margin: 0 0 0px 0;
} 
#customContent #galleryColumn .galleryImageHorz{
	float: left;
	width: 150px;
	height: 120px;
/*	border: 1px solid #fff;*/
	margin: 0 0 0px 0;
}
#customContent #galleryColumn .galleryImageSquare{
	float: left;
	width: 150px;
	height: 140px;
/*	border: 1px solid #fff;*/
	margin: 0 0 0px 0;
} 
#customContent #galleryColumn .galleryImageVert p{
	font-size: 70%;
	text-align:center; 
} 
#customContent #galleryColumn .galleryImageHorz p{
	font-size: 70%;
	text-align:center; 
}
#customContent #galleryColumn .galleryImageSquare p{
	font-size: 70%;
	text-align:center; 
}

/*-----------------------------------------------------------------------
								Footer
------------------------------------------------------------------------*/

#container #background-container #footer {
	clear: both;
	width: 974px;
	height: 100%;
	border-top: 1px solid #b97a27;
	background-color: #1a1f18;
}

#container #background-container #footer p {
	font-size: 60%;
	text-align: center;
	padding: .5em 0% 2em 0%;
	line-height: 98%;
	color:#fff;
}

#container #background-container #footer a:link    { color: #b97a27; text-decoration: underline; }
#container #background-container #footer a:visited { color: #3f3f3f; text-decoration: underline; }
#container #background-container #footer a:hover   { color: #541e19; text-decoration: underline; background-color: #e9f3a9; }
#container #background-container #footer a:active  { color: #89322B; text-decoration: underline; background-color: transparent; }

/*-----------------------------------------------------------------------
  copyrightInfo div
        Contains copyright information 
-------------------------------------------------------------------------*/
#container #background-container #footer #copyrightInfo {
	bottom: 0;
/*	width: 33%;*/
/*	background: #ffcc00;*/
}

#container #background-container #footer #copyrightInfo p {
	font-size: 60%;
	color: #b97a27;
	padding: 8px 0px 3px 1px;
}
/*-----------------------------------------------------------------------
								Photo Gallery
------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------
								Utilities
------------------------------------------------------------------------*/
.clearFloat  { 
	clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}
/* .offLeft is used to push an element off of the screen (to the left)*/
.offLeft {
	margin-left: -9000px;
	position: absolute;
}