/* CSS Document */

* {padding: 0; margin: 0;}

body {
	text-align: center;
	font-family: verdana, arial;
	background-image: url("images/backgroundPattern3.jpg"); 
}

h1 { font-size: .987em; }

h6 { font-size: .825em; font-weight: normal; margin: 3px; }
p {
	text-spacing: .9em; 
	font-size: .875em; 
	margin-top: 1.05em; 
}

img { border: 0px solid #000; }


/* Flower Pattern Border at top of each page */
/* -------------------------------------------------------- */
div#topFlowerPattern {
	height: 70px;
	background-image: url("images/backgrounds/patterns/TopBar-Pattern1.jpg");
}


/* Top Navigation */
/* -------------------------------------------------------- */
div#topNav {
	border-top: solid 3px #2F3017;
	border-bottom: solid 1px #333;
	background-color: #6C750F;
}

div#topNavContainer {
	text-align: left;
	width: 800px;
	margin: 0 auto;
	/* border: 1px solid #333;
	background-color: #DBDFA3; */
}

div#topNavContainer ul {                            /* <---      UL      */
	float: left;
	/* border: 15px solid #fff; */
}

div#topNavContainer a {
	display: block;
	text-decoration: none; /*removes underline*/
	padding: 0 10px; /* this should be as wide as the ul li's padding*/
	color: #DBDFA3;  /* 807830 */
}

div#topNavContainer ul li {
	float: left; /*causes the list to align horizontally instead of stack */ 
	position: relative; /* this set with the absolute positioning of the ul li ul puts the drop down directly below the top li */
	padding: 2px 0; /*creates width of individual top links to be 10 pixels wider on both sides*/
	list-style-type: none; /*removes bullets*/
	border-right: 2px solid #333;
	/* border-right: 2px solid #807830; darker brown */
	/*background-color: #A9AD76;  D3D0AB or 6C750F */          
}

div#topNavContainer ul li:first-child {
	border-left: 2px solid #333;
}

* html div#topNavContainer ul{ /* IE hack */                     
	float: left;
	border-left: 2px solid #333; /* allows the li to have a border on the left */
}

div#topNavContainer ul li:hover {
	background-color: #b5ac57;  /*background color of top navigation when hovered*/
}




/* Page Content */
/* -------------------------------------------------------- */
div#pageContainer{
	text-align: left;
	width: 800px;
	margin: auto;
	margin-top: 20px;
	padding: 10px;
	border: 1px solid #333;
	background-color: #DBDFA3;
}

div#productList {
	width: 550px; 
	margin: 0 0 0 35px;
	padding: 0;
	}

div#productList td {
	border: 1px solid #333;
}

div#productList p {
	margin: 0;
	padding: 20px 0 0 15px;
}

div#productList img { 
	margin: 0 15px 0 0;
	padding: 0; 
	float: left; 
	border: 1px solid #333;
}


/* Body Left Column */
/* ---------------------------------------------------------------- */
div#pageContainerLeft {
	width: 600px;
	float: left;
	margin: 0 0 0 35px;
	/* border: 1px solid #333;	*/
}

div#pageContainerLeft p {
	margin: 20px 20px 10px 50px;
}


/* Body Right Column */
/* ----------------------------------------------------------------- */
div#pageContainerRight {
	margin-left: 300px;
	height: 290px;
	margin-top: 80px;
	border-left: 1px solid #868B43;
	/* background-color: #333; */
}

* html div#pageContainerRight {
	margin-left: 300px;
}
/* html div#pageContainerRight {
	position: absolute;
	float: right;
	width: 330px;
	height: 291px;
	margin-top: 80px;
	border-left: 1px solid #868B43;
	background-color: #333; 
} */

div#pageContainerRight p {
	margin: 10px 25px 10px 10px;
	padding: 0;
}

div#pageContainerRight h4 {
	margin: 10px 25px 10px 10px;
	font-size: 1.15em;
	padding: 0;
}

div#pageContainerRight img {
	margin-left: 10px;
	border: 2px solid #868B43;
}

/* space at bottom */
div#clearBottom
{
clear: both;
margin: 0;
padding: 2.5em;
}

* html div#clearBottom
{
padding: .5em;
}


/* Footer */
/* -------------------------------------------------------- */
#footerContainerCentered {
	text-align: center;
	margin: 10px auto;
	padding: 3px auto;
	width: 800px;
	background-color: #DBDFA3;
	border: 1px solid #333;			
}

#footerContainerCentered a {
	text-decoration: none;
}



/* Clear Floats Fix */
/* this is what allows the pageContainer div to be filled by the pageContainerRight and pageContainerLeft divs */

div.clearfloats {clear: both;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix {height: 1%;}
.clearfix {display: block;}