html, body, #wrap{ /* This takes away the spacing from the top of browser. Wrap is for sticky footer */
	height: 100%;
	margin: 0px;
	padding: 0px;
}

body > #wrap { /* For sticky footer */
	height: auto;
	min-height: 100%;
}

body {
	background: #b99e75;
	font-family: arial, helvetica, serif;
	text-align: left;
}


#header-background{ /* Sets bg color of entire header section */
	width: 100%;
	height: auto;
	background: #201413;
}

/* Page Design containers and border shadows */
#header-border-container{ /* Always set at layout width + 40px */
	width: 980px;
	margin: auto;
}

#header-left-border {
	width: 100%;
	margin: auto;
	background: url(../images/header_shadow_left.gif) repeat-y left top;
}

#header-right-border {
	width: 100%;
	margin:	auto;
	background: url(../images/header_shadow_right.gif) repeat-y right top;
}

#body-border-container{ /* Always set at layout width + 40px */
	width: 980px;
	margin: auto;
	height: 100%;
}

#body-left-border {
	width: 100%;
	margin: auto;
	height: 100%;
	background: url(../images/body_shadow_left.gif) repeat-y left top;
}

#body-right-border {
	width: 100%;
	margin:	auto;
	height: 100%;
	background: url(../images/body_shadow_right.gif) repeat-y right top;
}
/* End page design containers and border shadows */

/* Line that seperates header from body */
#seperator-bg {
	width: 100%;
	height: 5px;
	background: #523a1d;
}

#seperator-main {
	width: 940px;
	height: 5px;
	background: #7b572c;
	margin: auto;
}
/* End seperators */


#header-container{
	width: 940px;
	margin: auto;
}

#header {
	height: 97px; /* 110px */
	width: 940px;
	background: #302120;
	padding: 0px;
	margin: 0px;
}

#logo {
	float: left;
	height: 87px;
	width: 207px;
	margin: 5px 0px 0px 20px;
}

#body-container {
	width: 940px;
	height: 100%;
	margin: auto;
	padding: 0px 0px 100px 0px; /* Make sure bottom padding is same as footer height */
	background: #E1CBA9; /*url(../images/content_bg.gif) repeat-x bottom;*/
	border-bottom: 1px #7B572C solid; /* This is only visible on short pages where there is empty space between bodycontainer and footer */
}

#body-container.hidden { /* Sets body-container background to same color as the page background. Use for pages where content is too little to stretch out body-container to the footer */
	background: #B99E75;
}

#content-border { /* Sets padding space inside body-container */
	float:left;
	width: 900px; /* BodyContainer width(940px) - ContentBorder margin(20px X 2 = 40px) - ContentBorder border(10px X 2 = 20px) - ContentBorder padding(10px X 2 = 20px) = 860px Note: Multiplied borders by 2 because have to subtract left and right side of border */
	margin: 20px; /* Creates empty space between body-container and content-border */
	padding: 0px 0px 0px 0px;
	border: 0px #B99E75 solid;
	background: #E1CBA9;
}

#content-border.alternate { /* Gives content border an alternate style that fits with body-container.hidden background color */
	border: 5px #CFB691 solid;
	margin: 25px;
	background: #e1cba9;
}

#sidebar-a {
	float: right;
	height: 300px;
	width: 280px;
	background: none;
}

#footer {
	position: relative;
	height: 100px;
	width: 100%;
	margin-top: -100px; /* Make sure this is negative value of desired footer height */
	background: #201413 url(../images/ek_footer.gif) no-repeat center 5px;
	clear: both;
}

#footer-seperator {
	width: 100%;
	height: 5px;
	background: #7B572C;
}

/* Clearfix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

/*** Regular Page Layout ***/
.left-description { /* Description box on the left side of content-border. Home page, Contact Us page */
	float: left;
	width: 270px;
	background: #D9C29D;
	border: 5px #CEB691 solid;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
}

.left-navigation-container {
	float: left;
	width: 200px;
	margin: 0px 10px 0px 0px;
	padding: 0px;
}

.left-navigation-top {
	float: left;
	width: 185px;
	height: 20px;
	background: #d9c29d;
	border-width: 5px 5px 0px 5px;
	border-color: #ceb691;
	border-style: solid;
	margin: 0px;
	padding: 0px 0px 0px 5px;
}

.left-navigation-sub {
	float: left;
	width: 190px;
	height: auto;
	background: #d9c29d;
	border: 5px #ceb691 solid;
	margin: 0px;
	padding: 0px;
}

.left-testimonials {
	float: left;
	width: 185px;
	height: 265px;
	background: #d9c29d url(../images/testimonials-background.gif) no-repeat;
	border: 5px #ceb691 solid;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 5px;
}

.left-testimonials p {
	font: italic 12px georgia, times, serif;
	color: #523A1D;
	margin: 20px 0px 0px 0px;
	padding: 0px;
}

.left-testimonials p.header {
	font-style: normal;
	font-weight: bold;
	margin: 10px 0px 0px 0px;
}

.left-testimonials a {
	font: normal 12px arial, helvetica, sans-serif;
	color: #523A1D;
	margin: 15px 0px 0px 75px;
	padding: 0px;
	display: inline-block;
}

#contact-information ul {
	float: left;
	font: normal 13px arial, helvetica, sans-serif;
	color: #523A1D;
	margin: 5px 0px 0px 10px;
	padding: 0px;
	display: inline-block;
}

#contact-information li {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.about-us-pictures {
	float: right;
	border: 5px solid #CEB691;
	margin: 0px 0px 20px 0px;
	width: 580px;
	height: auto;
}

.about-us-pictures img {
	margin: 0px;
	padding: 0px;
	display: block; /* Need this because pictures were leaving a bottom gap */
}

h1.home {
	padding: 40px 10px 0px 10px;
	margin: 5px 0px 0px 0px;
	background: url(../images/orn-2.gif) center top no-repeat;
}

p.home {
	padding: 0px 10px 10px 10px;
}
/*** End Home Page Layout ***/

/*** Category Page Layout ***/
.category-right-container {
	float: right;
	padding: 0px;
	margin: 0px;
	width: 680px;
}

.item-container {
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 20px 20px 0px; /* Make sure bottom margin is same as .right. Also note: There is a 21px space on the right-most margin rather than a 20px margin like the rest. This is unavoidable due to the fact that each item-container element has an odd numbered width, when content-border is 860px, an even number. */
	width: 213px; /* Keep this width at: ItemContainer img width(205px) + ItemContainer img border(3px X 2 = 6px) + ItemContainer img padding(1px X 2 = 2px) */
}

.right {
	margin: 0px 0px 20px 0px; /* Make sure bottom margin is same as item-container */
}

.item-container-imagebox {
	border: 3px #CEB691 solid;
	padding: 1px;
	margin: 0px 0px 3px 0px; /* Makes space between image and item-container-text */
	background: #E1CBA9;
	text-align: center; /* Horizontally centers images in non-IE7 browsers */
	width: 205px;
	height: 205px;
}

.item-container-imagebox:hover {
	border: 3px #947E5E solid; /* old regular:B99E75 old hover:947E5E*/
}

.item-container-imagebox a.linkblock{ /* Will make entire imagebox area clickable instead of just the image itself (in cases where the image is smaller than the imagebox). Doesn't work in IE. */
	height: 205px;
	width: 205px;
	display: table-cell; /* Needed for vertically centering images */
	vertical-align: middle; /* Needed for vertically centering images */
	margin: 0px;
	padding: 0px;
}

.item-container img {
	border: none; /* Need to specify none or else it will use another img class */
}

.item-container-text {
	border: 3px #CEB691 solid;
	background: #D9C29D;
	text-align: center;
	padding: 0px 5px 0px 5px;
	margin: 0px;
	width: 197px; /* 197px + padding(5px X 2 = 10px) + border(3px X 2 = 6px) = 213px (Item-Container width) */
	height: 75px;
}

.item-container-text p {
	font: 12px normal arial, helvetica, sans-serif;
	font-style: italic;
	color: #7B572C;
	margin: 0px;
	padding: 0px;
}

.item-container-text a {
	font: 12px normal arial, helvetica, sans-serif;
	height: 30px;
	color: #7B572C;
	text-decoration: underline;
	font-weight: bold;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	display: inline-block;
	vertical-align: top; /* Need this because a href was leaving a small top margin gap even though margin and padding is set to 0. Still not sure what is causing this */
}

.item-container-text a:hover {
	color: #523A1D;
	text-decoration: underline;
}

/*** Product Page ***/
.product-imagebox { /* Image area on the left side of content-border */
	float: left;
	width: 620px;
	height: 490px;
	border: 5px #B99E75 solid;
	margin: 0px 0px 20px 0px;
	text-align: center; /* Horizontally centers images in non-IE7 browsers */
	background: #E1CBA9;
}

.product-imagebox a.linkblock{ /* Will make entire imagebox area clickable instead of just the image itself (in cases where the image is smaller than the imagebox). Doesn't work in IE. */
	width: 620px;
	height: 490px;
	display: table-cell; /* Needed for vertically centering images */
	vertical-align: middle; /* Needed for vertically centering images */
}

.product-imagebox img {
	max-width: 620px;
	max-height: 490px;
	border: none;
}

.product-description { /* Description box on the right side of content-border */
	float: right;
	width: 240px;
	height: 490px;
	background: #cfb691 url(../images/orn-4.gif) 50% 360px no-repeat; /* Positions the ornament image at bottom of the block */
	border: 5px #B99E75 solid;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
}

/* Product Description Text */
.product-description h1 {
	font: normal 20px georgia, times, serif;
	color: #523A1D;
	text-align: center;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 35px 0px;
	background: url(../images/orn-11.gif) center bottom no-repeat;
}

.product-description h2 {
	font: normal 12px georgia, times, serif;
	color: #8d724a;
	text-align: center;
	text-transform: uppercase;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 30px 0px;
	background: url(../images/orn-11.gif) center bottom no-repeat;
}


.product-description p {
	font: italic 14px georgia, times, serif;
	color: #523A1D;
	text-align: center;
	line-height: 2.0;
	margin: 0px 0px 0px 0px;
	padding: 0px 20px 0px 20px
}

p.smalltxt {
	font: italic 14px georgia, times, serif;
	line-height: 1.5;
	padding: 0px 15px 0px 15px;
}

p.verysmalltxt {
	font: italic 14px georgia, times, serif;
	line-height: 1.5;
	padding: 0px 10px 0px 10px;
	margin: 0px 0px 0px 0px;
}

p.smallesttxt {
	font: italic 14px georgia, times, serif;
	line-height: 1.25;
	padding: 0px 10px 0px 10px;
	margin: 0px 0px 0px 0px;
}

p.largetxt {
	font: italic 16px georgia, times, serif;
	line-height: 2.0;
	padding: 0px 20px 0px 20px;
}
/* End Product Description Text */

/** Product Page - Ordering and Details **/
.content-border2 { /* Border below content-border */
	float:left;
	width: 860px;
	margin: 0px 20px 20px 20px;
	padding: 10px;
	border: 10px #B99E75 solid;
}

.product-details h2, .inquiry h2 {
	font: normal 18px georgia, times, serif;
	padding: 0px;
	margin: 0px 0px 10px 0px;
}

h2.no-linebreak { /* Prevents a line break after an h2 tag is used. This is only used to get the product number to display to the right of "Order Inquiry" */
	display: inline;
}

.product-details p, .inquiry p {
	font: normal 16px georgia, times, serif;
	color: #523A1D;
	margin: 0px;
	padding: 0px;
}

p.inquiry-description { /* Description inside Order Inquiry box */
	margin: 10px 0px 10px 0px;
}

p.item-number {
	font: normal 12px georgia, times, serif;
}

p.inquiry-item-number {
	font: normal 16px georgia, times, serif;
	color: #000;
	display: inline; /* See h2.no-linebreak */
}


.product-details { /* Box on left side of content-border2 */
	float: left;
	width: 330px;
	background: #cfb691;
	border: 5px #B99E75 solid;
	padding: 10px;
	margin: 0px 0px 0px 0px;
}

/** Inquiry **/
.inquiry { /* Box on the right side product-details */
	float: right;
	width: 490px;
	background: #cfb691;
	border: 5px #B99E75 solid;
	padding: 10px;
	margin: 0px 0px 20px 0px;
}

/* Inquiry Form */
.inquiry input, .inquiry textarea {
	padding: 5px;
	width: 359px;
	font: normal 16px georgia, times, serif;
	margin: 0px 0px 10px 0px;
	border: 3px solid #CEB691;
	background: #E1CBA9;
}

.inquiry textarea {
	height: 90px;
	overflow: auto; /* Gets rid of scrollbar in IE when textarea is empty */
}

.inquiry textarea:focus, .inquiry input:focus {
	border: 3px solid #B99E75;
}

.inquiry input.submit-button {
	width: 100px;
	float: right;
	margin-bottom: 0px;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font: normal 16px georgia, times, serif;
}

.inquiry.contactus { /* Makes the form box slightly wider for the contact us page */
	float: left;
	background: #D9C29D;
	border: 5px #CEB691 solid;
	width: 610px;
}

.inquiry.contactus input, .inquiry.contactus textarea { /* Wider forms for contact us page */
	width: 439px;
}

.inquiry.contactus input.submit-button { /* This is needed even though it is the same as the regular inquiry one */
	width: 100px;
	float: right;
	margin-bottom: 0px;
}
/* End Inquiry form */

/* Search Form */
#search-form { /* Container */
	float: right;
	width: 337px;
	height: 27px;
	margin: 10px 20px 0px 0px;
	padding: 0px 0px 0px 0px;
	back/ground: blue; /* Useful for testing purposes */
}

#search-form input {
	padding: 3px;
	width: 125px;
	font: normal 12px georgia, times, serif;
	margin: 0px 0px 0px 0px;
	border: 3px solid #7B572C;
	background: #E1CBA9;
}

#search-form input.submit-button {
	width: 60px;
	padding: 2px;
}

#search-form input:hover {
	border: 3px solid #523A1D;
}

#search-form select {
	padding: 2px;
	margin: 0px 0px 0px 0px;
	font: normal 12px georgia, times, serif;
	border: 3px solid #7B572C;
	background: #E1CBA9;
}

#search-form select:hover {
	border: 3px solid #523A1D;
}

/* Patina Chart */
.patina-chart {
	float: left;
	width: 890px;
	height: 700px;
	text-align: center;
	background: #E1CBA9;
	border: 5px #B99E75 solid;
	margin: 0px auto 10px auto;
}

.stone-chart {
	float: left;
	text-align: center;
	width: 890px;
	height: 2120px;
	border: 5px #B99E75 solid;
	margin: 0px 0px 10px 0px;
}


/* Flash Slideshow */
#flash_slideshow {
	float: right;
	border: 5px solid #ceb691;
	margin: 0px 0px 20px 0px;
	height: 200px;
	width: 670px;
}

.category-box {
	float: right;
	background: #D9C29D;
	border: 5px solid #ceb691;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	height: 200px;
	width: 670px;
}

.category-box.collapse { /* Box height is based on amount of text inside */
	float: right;
	background: #D9C29D;
	border: 5px solid #ceb691;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 10px 0px;
	height: auto;
	width: 670px;
}

.category-box.contact {
	float: left;
	background: #D9C29D;
	border: 5px solid #ceb691;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 10px 0px;
	height: auto;
	width: 630px;
}

.category-box.contact-info {
	float: right;
	background: #D9C29D;
	border: 5px solid #ceb691;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 10px 0px;
	height: 140px;
	width: 230px;
}

.category-box.asid {
	float: left;
	background: #D9C29D;
	border: 5px solid #ceb691;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
	height: 175px;
	width: 190px;
}

.category-box.asid.about {
	width: 280px;
	margin: 20px 0px 0px 0px;
}

.category-box.asid p {
	float: left;
	font: normal 12px georgia, times, serif;
	font-weight: bold;
	background: #ceb691;
	margin: 20px 0px 0px 0px;
	padding: 3px 0px 3px 10px;
	width: 80px;
}

.category-box.asid.about p {
	font-size: 20px;
	width: 130px;
	padding: 0px 0px 0px 10px;
}

.category-box.asid img {
	margin: 20px 0px 0px 20px;
	border: none;
}

.about-left-container {
	float: left;
	width: 290px;
	margin: 0px;
	padding: 0px;
}

.category-box.about {
	float: left;
	background: #D9C29D;
	border: 5px solid #ceb691;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
	height: auto;
	width: 280px;
}

.category-box h1 {
	float: left;
	font: normal 24px georgia, times, serif;
	font-weight: bold;
	background: #ceb691;
	margin: 20px 0px 0px 0px;
	padding: 0px 20px 0px 20px;
}

.category-box h2 {
	float: left;
	font: normal 24px georgia, times, serif;
	font-weight: bold;
	background: #ceb691;
	margin: 20px 0px 0px 0px;
	padding: 0px 20px 0px 20px;
}

.category-box.contact-info h2 {
	font: normal 18px georgia, times, serif;
}

.category-box p {
	float: left;
	font: normal 13px georgia, times, serif;
	color: #523A1D;
	margin: 5px 0px 0px 10px;
	padding: 0px;
	width: 450px;
}

.category-box p.left { /* Used for category boxes that do not have an image */
	margin-top: 10px;
	width: 650px;
}

.category-box p.contact {
	margin-top: 10px;
	width: 610px;
}

.category-box p.about {
	margin-top: 10px;
	width: 260px;
}

.category-box img {
	float: left;
	border: none; /* This is needed. Basically a short way of setting just 1 border side instead of having to write border none for 3 sides */
	border-right: 5px solid #ceb691;
}

/* Request Catalog */
#request-catalog {
	float: right;
	margin: 0px 0px 0px 0px;
	height: 100px;
	width: 680px;
}

/* Catalog Image */
#catalog-image {
	float: right;
	margin: 90px 0px 0px 10px;
}

.boxgrid-container { /* Contains all the boxgrids so they will be aligned properly with each other */
	float: right;
	width: 680px; /* 610 This is the width of 3 boxgrids, including margin spaces */
	height: auto;
}

/* Image Slider */
.boxgrid {
	width: 203px;
	height: 203px;
	margin: 0px 20px 20px 0px;
	float: left;
	background: #161613;
	border: 5px #CEB691 solid;
	overflow: hidden;
	position: relative;
}

.boxgrid.right { /* Used to get rid of right-margin on rightmost boxgrid item */
	margin: 0px 0px 0px 0px;
}

.boxgrid img {
	position: absolute;
	top: 0px;
	left: 0px;
	border: 0px;
	width: 203px;
	height: 203px; /* 183 Must be same as boxcaption height */
}

.boxcaption {
	float: left;
	position: absolute;
	background: #000;
	height: 203px;
	width: 100%;
	opacity: .6;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

.boxcaption h2 {
	font: normal 14px georgia, times, serif;
	padding: 10px 0px 0px 10px;
	color: #ffffff;
}

.captionfull .boxcaption {
	top: 203px;
	left: 0px;
}

.caption .boxcaption {
	top: 165px;
	left: 0px;
}

/* General Typography */

h1 {
	font: normal 20px georgia, times, serif;
	color: #523A1D;
	padding: 0px;
	margin: 0px;
}

h2 {
	font: normal 18px georgia, times, serif;
	color: #523A1D;
	padding: 0px;
	margin: 0px;
}

p {
	font: normal 14px georgia, times, serif;
	color: #523A1D;
	margin: 0px;
	padding: 0px;
}

.center {
	text-align: center;
}

.italic {
	font-style: italic;
}

.margintop { /* Add top margin. Only using this for text. Contact Us page */
	margin-top: 10px;
}

/*** Navigation ***/

/* Meta Nav */
#meta-nav-container {
	float: right;
	margin: 5px 0px 0px 0px;
	back/ground: green; /* Useful for testing purposes */
	padding: 0px 0px 0px 0px;
}

#meta-nav, #meta-nav ul {
	float: left;
	padding: 0px;
	margin: 0px;
	list-style: none;
	font-family: arial, helvetica, sans-serif;
}

#meta-nav li {
	float: left;
	padding: 0px 20px 0px 0px;
	margin: 0px 0px 0px 0px;
	color: #7B572C;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
}

#meta-nav li.fax { /* Positions fax number to be right underneath telephone number by using negative margins */
	margin: 10px 0px 0px -119px;
}

#meta-nav a {
	color: #7B572C;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
}

#meta-nav a:hover {
	color: #97744B;
}

/* End Meta Nav */



/* Main Navigation */
#main-navigation {
	float: right;
	width: 695px; /* Width of entire div. Increase or decrease this to set margin position from the right. Do this instead of using margin-right */
	height: auto;
	backg/round: red; /* Useful for testing purposes */
	border-top: none;
	b.order-right: 5px solid #937247; /* Taken out because new design does not have a border here */
	b.order-left: 5px solid #937247; /* Same as above */
	border-bottom: none;
	margin: 9px 0px 0px 0px; /* Position navigation */
}

.right-arrow { /* Note: Reason I put the span BEFORE the link text is because this was the only way to make it work properly in IE7 */
	float: right;
	margin-right: 5px;
}

#main-nav, #main-nav ul { /* All lists */
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	list-style: none; /* Gets rid of list dots */
	font-weight: bold;
	line-height: 1.5;
	font-family: arial, helvetica, sans-serif;
	background: #302120; /* Background of actual nav area. The leftover areas with no text */
	w/idth: 940px; /* 940px for page wide, but not using this anymore */
	z-index: 1; /* Gives navigation dropdown a higher stack order than other elements of website. Needed because there were problems where the dropdown menu would go beneath some page elements, mainly images */
}

#main-nav a { /* All Links */
	display: block;
	width: auto;
	color: #7B572C;
	text-decoration: none;
	font-size: 16px;
}

#main-nav li a {
	padding: 0px 12px 0px 12px; /*Spacing between links 16 */
}

#main-nav a:hover { /* All Links hover */
	b/ackground: #3d2e35;
	color: #97744B;
}

#main-nav li { /* All list items: Main top navbar. Color is for links with a submenu, e.g. Rugs */
	float: left;
	width: auto;
	background: #302120; /* Background color of main navigation and submenus */
	b/order-right: 1px solid #fff;
	color: #937247;
}

#main-nav li:hover { /* List hover: e.g. Rugs hover */
	b/ackground: #3d2e35;
}

#main-nav li ul { /* First-Level lists - Controls position of drop down box */
	position: absolute;
	height: auto;
	width: 190px;
	left: -999em;
	background: #7b572c; /* Drop down border color */
	font-weight: normal;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	b.order: 5px green solid; /* Use this just for testing purposes */
	margin-left: -5px; /* Shifts drop-down box to left */
}

#main-nav li ul.wide{ /* For drop downs that need more width due to longer text links */
	width: 230px;
}

#main-nav li ul a { /* First-Level drop down list links background */
	text-align: left;
	width: 185px; /* Must be 5px less than main-nav li ul width */
	background:transparent;
	padding: 0px 0px 0px 5px; /* Shifts dropdown text to the right by 5px */
	border-bottom: 1px dotted black;
}

#main-nav li ul.wide a {
	width: 225px;
}

#main-nav li ul a:hover { /* First-Level list link hover */
	background: #3d2e35;
}

#main-nav li:hover ul, #main-nav li.sfhover ul {
	left: auto;
}

/* Everything below has to do with third-level menus */
#main-nav li ul ul {
	position: absolute;
	margin: -30px 0 0 190px;
	border-top: 5px #7b572c solid;
}

#main-nav li:hover ul ul, #main-nav li.sfhover ul ul {
	left: -999em;
}

#main-nav li:hover ul, #main-nav li li:hover ul, #main-nav li.sfhover ul, #main-nav li li.sfhover ul {
	left: auto;
	z-index:-1; /* Need this so that the third level menu will go underneath the first-level menu in case there is overlapping. This only occurs when the first link in the second-level dropdown has a third level menu */
}


/* Side Navigation */
#side-nav, #side-nav ul  {
	margin: 5px 0px 0px 5px;
	padding: 0px;
	font: normal 12px georgia, times, serif;
}

#side-nav li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
}

#side-nav li ul {
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 15px;
}

#side-nav li ul ul {
	margin: 0px;
}

#side-nav li li a {
	font-weight: normal;
}

#side-nav a {
	color: #523A1D;
	text-decoration: none;
}

#side-nav a:hover {
	text-decoration: underline;
}