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: #f0d7a1;
	font-family: arial, helvetica, serif;
	text-align: left;
}


#header-background{ /* Sets bg color of entire header section */
	width: 100%;
	height: 52px;
	background: url(../images/header-background.gif) repeat-x;
}


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

#logo {
	float: left;
	height: 112px;
	width: 242px;
	margin: 0px 0px 0px 0px;
}

#body-container {
	width: 940px;
	height: 100%;
	margin: 100px auto 0px auto;
	padding: 0px 0px 100px 0px; /* Make sure bottom padding is same as footer height */
	background: #f9ecba;
	border-radius:15px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
}

#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: #F9ECBA;
}

#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: #F9ECBA;
}

#content-border.alternate { /* Gives content border an alternate style that fits with body-container.hidden background color */
	border: 1px #C8B17D solid;
	margin: 25px;
	background: #F0D7A1;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

#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: 193px;
	height: 30px;
	background: #F0D7A1;
	border-width: 1px 1px 0px 1px;
	border-color: #c8b17d;
	border-style: solid;
	margin: 0px;
	padding: 0px 0px 0px 5px;
	border-radius:10px 10px 0px 0px;
	-webkit-border-radius:10px 10px 0px 0px;
	-moz-border-radius:10px 10px 0px 0px;
}

.left-navigation-sub {
	float: left;
	width: 198px;
	height: auto;
	background: #F0D7A1;
	border: 1px #c8b17d solid;
	margin: 0px;
	padding: 0px;
}

.left-testimonials {
	float: left;
	width: 185px;
	height: 265px;
	background: #F0D7A1 url(../images/testimonials-background.gif) no-repeat;
	border: 1px #c8b17d solid;
	margin: 20px 0px 0px 0px;
	padding: 4px 4px 4px 9px;
}

.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 15px;
	padding: 0px;
	display: inline-block;
}

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

.about-us-pictures {
	float: right;
	border: 1px solid #c8b17d;
	margin: 0px 0px 20px 0px;
	padding: 4px;
	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;
}

.category-row-container { /* Invisible container box for each row of 3 items in the category page. Need this because there are occasionally some alignment issues with the floated item-containers, and the problem is easily solved just by giving each row a container */
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.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: 1px #C8B17D solid;
	padding: 3px;
	margin: 0px 0px 3px 0px; /* Makes space between image and item-container-text */
	background: #F9ECBA;
	text-align: center; /* Horizontally centers images in non-IE7 browsers */
	width: 205px;
	height: 205px;
}

.item-container-imagebox:hover {
	border: 1px #7B5C31 solid;
}

.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: 1px #C8B17D solid;
	background: #F0D7A1;
	text-align: center;
	padding: 0px 7px 0px 7px;
	margin: 0px;
	width: 197px;
	height: auto;
}

.item-container-text.custom { /* NOTE: 11.13.2011 - Even though I left this in here and it's still being used in products.php, it's no longer needed because I made the regular item-container-text to auto height. OLD: For customizable items, need larger description box in order to display more information */
	border: 1px #C8B17D solid;
	background: #F0D7A1;
	text-align: center;
	padding: 0px 7px 0px 7px;
	margin: 0px;
	width: 197px;
	height: auto;
}

.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: 628px;
	height: 498px;
	border: 1px #C8B17D solid;
	margin: 0px 0px 20px 0px;
	text-align: center; /* Horizontally centers images in non-IE7 browsers */
	background: #F9ECBA;
}

.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: 628px;
	max-height: 498px;
	border: none;
}

.product-imagebox-thumbnail { /* Thumbnail images on product pages */
	float: left;
	width: 140px;
	height: 140px;
	border: 1px #C8B17D solid;
	margin: 0px 10px 10px 0px;
	padding: 4px;
	background: #F9ECBA;
}

.product-imagebox-thumbnail.right{ /* Eliminate right margin. Used on every 4th thumbnail image in the product page */
	margin: 0px 0px 0px 0px;
}

.product-imagebox-thumbnail img {
	width: 140px;
	height: 140px;
	border: none;
}

.product-imagebox-thumbnail:hover {
	border: 1px #7B5C31 solid;
}

.product-imagebox-thumbnail-container {
	float: left;
	width: 630px;
	margin: 0px 0px 10px 0px;
	b/ackground: red; /* Testing purposes */
}

.product-description { /* Description box on the right side of content-border */
	float: right;
	width: 248px;
	h/eight: 490px;
	background: #F0D7A1;
	border: 1px #C8B17D solid;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 10px 0px;
	text-align: center; /* Not actually using this to align the text in the description box. I just need this so I can align the color palette to the middle of the description box. The actual text is already text-aligned by the text classes below */
}

.product-description-divider {
	height: 1px;
	background: #C8B17D;
	margin: 5px 60px 0px 60px;
}

/* 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 0px 0px; /* 35 */
	bo/rder-bottom: 1px #CEB691 solid;
	b/ackground: 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;
}


.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 {
	font: normal 18px georgia, times, serif;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	border-bottom: 1px #C8B17D solid;
}

.inquiry h2 {
	font: normal 18px georgia, times, serif;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	border-bottom: 1px #B99E75 solid;
}

.product-details p, .inquiry p {
	font: normal 16px arial, helvetica, sans-serif;/*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 arial, helvetica, sans-serif;
}

.product-details { /* Box on left side of content-border2 */
	float: right;
	width: 228px;
	height: 100%;
	background: #F0D7A1 url(../images/description_orn.gif) 50% 97% no-repeat; /* Positions the ornament image at bottom of the block */
	border: 1px #C8B17D solid;
	padding: 10px 10px 140px 10px;
	margin: 0px 0px 0px 0px;
}

.product-details table {
	border-collapse: collapse;
	font-size: 12px;
	width: 100%;
}

.product-details th {
	border: 1px solid #b49b63;
	width: 75px;
	background-color: #dbc48f;
	padding: 5px;
	font-weight: normal; /* TH cells are bolded by default */
}

.product-details td {
	border: 1px solid #b49b63;
	padding: 5px;
}

/** Inquiry **/
.inquiry { /* Box on the right side product-details */
	float: left;
	width: 598px;
	background: #F0D7A1;
	border: 1px solid #C8B17D;
	padding: 15px;
	margin: 0px 0px 20px 0px;
}

/* Inquiry Form */
.inquiry input, .inquiry textarea {
	padding: 5px;
	width: 447px;
	font: normal 16px georgia, times, serif;
	margin: 0px 0px 10px 0px;
	border: 1px solid #C8B17D;
	background: #F9ECBA;
}

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

.inquiry textarea:focus, .inquiry input:focus {
	border: 1px solid #7B5C31;
}

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

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 124px;
	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: #F0D7A1;
	border: 1px #C8B17D solid;
	width: 600px;
}

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

.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;
	clear: both;
}
/* End Inquiry form */

/* Search Form */
#search-form { /* Container */
	float: right;
	width: 216px;
	height: 29px;
	margin: 13px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	b/ackground: blue; /* Useful for testing purposes */
}

#search-form input {
	float: left;
	padding: 4px;
	width: 175px;
	height: 19px;
	font: normal 18px georgia, times, serif;
	margin: 0px 0px 0px 0px;
	border: none;
	background: #F0D7A1;
	border-radius:5px 0px 0px 5px;
	-webkit-border-radius:5px 0px 0px 5px;
	-moz-border-radius:5px 0px 0px 5px;
}

#search-form input.submit-button {
	float: left;
	border-left: none;
	width: 33px;
	height: 27px;
	background: #F0D7A1 url(../images/search_icon.gif) left center no-repeat;
	border-radius:0px 5px 5px 0px;
	-webkit-border-radius:0px 5px 5px 0px;
	-moz-border-radius:0px 5px 5px 0px;
}

/* These 3 need to be individually declared due to the way the browser user agents work */
#search-form input::-webkit-input-placeholder { /* Native support for Safari and Chrome */
	color: #777;
	font-style: italic;
}

#search-form input:-moz-placeholder{ /* Native support for Safari and Chrome */
	color: #777;
	font-style: italic;
}

#search-form input.placeholder { /* Fallback solution by EnablePlaceholder */
	color: #777;
	font-style: italic;
}

/* Charts */
.patina-chart {
	float: left;
	width: 898px;
	height: 700px;
	text-align: center;
	border: 1px solid #c8b17d;
	margin: 0px auto 10px auto;
}

.stone-chart {
	float: left;
	text-align: center;
	width: 898px;
	height: 2120px;
	border: 1px solid #c8b17d;
	margin: 0px 0px 10px 0px;
}

.finishes-chart {
	float: left;
	text-align: center;
	border: 5px #F0D7A1 solid;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	height: auto;
	width: 890px;
}

.finishes-chart h3 {
	float: left;
	font: normal 18px georgia, times, serif;
	font-weight: bold;
	background: #F0D7A1;
	margin: 20px 0px 20px 0px;
	padding: 0px 20px 0px 20px;
}


/* Flash Slideshow */
#slideshow-container {
	float: right;
	border: 1px solid #c8b17d;
	padding: 4px;
	margin: 0px 0px 20px 0px;
	height: 150px;
	width: 670px;
}

#slideshow {
	float: right;
	border: none;
	height: 150px;
	width: 670px;
}

.category-box {
	float: right;
	background: #F0D7A1;
	border: 1px solid #c8b17d;
	margin: 0px 0px 20px 0px;
	padding: 4px;
	height: 200px;
	width: 670px;
}

.category-box.collapse { /* Box height is based on amount of text inside */
	float: right;
	background: #F0D7A1;
	border: 1px solid #c8b17d;
	margin: 0px 0px 20px 0px;
	padding: 0px 15px 10px 15px;
	height: auto;
	width: 648px;
	border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
}

.category-box.contact {
	float: left;
	background: #F0D7A1;
	border: 1px solid #c8b17d;
	margin: 0px 0px 20px 0px;
	padding: 15px;
	height: auto;
	width: 600px;
}

.category-box.contact-info {
	float: right;
	background: #F0D7A1;
	border: 1px solid #c8b17d;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 10px 0px;
	height: 140px;
	width: 245px;
}

.category-box.asid {
	float: left;
	background: #F0D7A1;
	border: 1px solid #c8b17d;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
	height: 183px;
	width: 198px;
}

.category-box.asid.aboutus {
	width: 290px;
	margin: 20px 0px 0px 0px;
	padding: 0px;
}

.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: #F0D7A1;
	border: 1px solid #c8b17d;
	margin: 0px 0px 0px 0px;
	padding: 15px;
	height: auto;
	width: 260px;
}

.category-box.about.right {
	float: right;
	background: #F0D7A1;
	border: 1px solid #c8b17d;
	margin: 0px 0px 20px 0px;
	padding: 15px;
	height: auto;
	width: 558px;
}

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

.category-box h1 {
	float: left;
	width: 100%;
	font: normal 24px georgia, times, serif;
	font-weight: bold;
	b/ackground: #c8b17d;
	border-bottom: 1px solid #c8b17d;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.category-box h1.about {
	margin: 0px;
}

.category-box h1.contact {
	margin: 0px;
}

.category-box h2 {
	float: left;
	width: 445px;
	font: normal 22px georgia, times, serif;
	font-weight: bold;
	border-bottom: 1px solid #c8b17d;
	margin: 10px 0px 0px 15px;
	padding: 0px 0px 0px 0px;
}

.category-box.contact-info h2 {
	font: normal 18px georgia, times, serif;
	margin: 10px 0px 0px 15px;
	width: 215px;
}

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

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

.category-box p.contact {
	margin-top: 10px;
	padding: 0px;
	width: 600px;
}

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

.category-box p.about.right {
	margin: 0px;
	width: 570px;
}

.category-box p.testimonials {
	width: 650px;
}

.category-box p.name {
	width: 650px;
	font: normal 18px arial, helvetica, sans-serif;
	text-align: right;
	padding: 0px 0px 35px 0px;
	background: url(../images/line-seperator.gif) center bottom no-repeat;
}

.category-box p.furniture { /* This is just for the furniture description in the homepage. The description is very long, and thus requires a smaller font size in order to fit inside the static sized category box. */
	font-size: 12px;
	line-height: 1.2;
}

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

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

.category-box img {
	float: left;
	border: none;
}

.category-box img.linedivider { /* Not currently used anymore (using category-box p.name instead), but keeping as a reminder on how to center an image */
	float: none;
	border-right: none;
	display: block; /* An image is inline by default. Must set to block in order to be able to center margins */
	margin: 0 auto;
	clear: both; /* The clear will make the image not allow floating elements on either side of it. Need this because in only IE8 (seems to work fine in IE7 and Firefox for some reason), after removing float and setting display to block, the image is not part of the flow anymore and is placed to the top of the container div, when we want it to be at the bottom. The clear pushes it back down to the bottom */
}

/* 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;
}

.category-images-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;
}

/* Category Page Image Links */
.category-imagebox {
	width: 203px;
	height: 203px;
	margin: 0px 20px 20px 0px;
	padding: 4px;
	float: left;
	b/ackground: red;
	border: 1px #C8B17D solid;
	ov/erflow: hidden;
	po/sition: relative;
}

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

.category-imagebox img {
	border: 0px;
	width: 203px;
	height: 203px; /* 183 Must be same as boxcaption height */
}

.category-imagebox h2 {
	font: normal 14px georgia, times, serif;
	padding: 15px 0px 0px 10px;
	color: #fff;
}

.image-container { /* Container for the image + caption */
	position: relative;
	float: left;
	width: 203px;
	height: 203px;
}

.image-container .caption {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 203px;
	height: 50px;
	background: #000;
	opacity: .6;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

/* Color Palette */
.palette-container { /* Small sized palette container for category pages */
	width: 143px;
	margin: 3px 0px 3px 0px;
	padding: 0px;
	display: inline-block;
}

.palette-container.large {
	margin: 5px 0px 0px 0px;
	width: 206px;
	border: 1px solid #7B572C;
}

.palette { /* Small sized palette for category pages */
	float: left;
	height: 15px;
	width: 15px;
	margin: 0px 1px 0px 0px;
	padding: 0px;
}

.palette.large {
	height: 22px;
	width: 22px;
}

/* reCaptcha */
#recaptcha-container{
	float: right;
	width: 461px;
	margin-bottom: 10px;
	text-align:right;
}

#recaptcha-container-contactus{
	float: right;
	width: 471px;
	margin-bottom: 10px;
	text-align:right;
}

/* 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;
}

h3 {
	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;
}

span.clearanceprice { /* For making clearance price colored red on the category pages */
	color: red;
}

/*** Navigation ***/

/* Product Nav */
#product-nav-container {
	float: left;
	width: 100%;
	border-bottom: 1px solid #c8b17d;
	margin: 0px 0px 20px 0px;
	b/ackground: green; /* Useful for testing purposes */
	padding: 0px 0px 0px 0px;
	height: auto;
}

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

#product-nav a {
	display: block;
	color: #523A1D; /*#7d6340;*/
	text-decoration: none;
	font-size: 16px;
	b/ackground: green;
}

#product-nav li {
	float: left;
	width: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	b/ackground: blue;
}

#product-nav li a { /* Links are spread here instead of in "product-nav a" or "product-nav li" because we want a larger clickable link area than just the link text itself. */
	b/ackground: red;
	padding: 0px 23px 15px 23px; /* Note: Font rendering in IE and Firefox is slightly larger than in Chrome, so we must make li padding width to fit in IE/Firefox so that the nav links do not wrap to a second line. In Chrome, the width will be slightly smaller than in IE/Firefox, but that's fine since the nav links are all still on one line. */
}

#product-nav li a.first { /* Used to indent first link a tiny bit */
	padding-left: 5px;
}

#product-nav li a.last {
	padding-right: 0px;
}

#product-nav a:hover {
	color: #888;
	te/xt-decoration: underline;
}

/* End Meta Nav */



/* Top Navigation */
#top-nav-container {
	float: left;
	width: 275px; /* Width of entire div. Increase or decrease this to set margin position from the right. Do this instead of using margin-right */
	height: auto;
	b/ackground: 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: 0px 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;
}

#top-nav, #top-nav ul { /* All lists */
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	list-style: none; /* Gets rid of list dots */
	font-family: arial, helvetica, sans-serif;
	b/ackground: #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 */
}

#top-nav a { /* All Links */
	display: block;
	width: auto;
	color: #f0d7a1;
	text-decoration: none;
	f/ont-weight: bold;
	font-size: 16px;
	b/ackground: blue;
	line-height: 44px;
	margin: 0px 0px 0px 0px;
	border-top: 5px #302120 solid;
}

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

#top-nav a:hover { /* All Links hover */
	b/ackground: #3d2e35;
	c/olor: #97744B;
	border-top: 5px #F0D7A1 solid;
}

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

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

#top-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 */
}

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

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

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

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

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

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

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

#top-nav li:hover ul, #top-nav li li:hover ul, #top-nav li.sfhover ul, #top-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 0px;
	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 0px;
}

#side-nav li ul ul { /* Subcategories */
	margin: 0px;
	padding: 0px 0px 0px 15px;
}

#side-nav li ul a {
	font-weight: normal;
	background: url(../images/subnavline.gif) 9px 3px no-repeat;
	padding: 1px 0px 1px 20px;
	display: block;
}

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

#side-nav a.indent { /* Gives small left margin to main categories */
	margin: 5px 0px 0px 5px;
}

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

#side-nav li ul a:hover {
	background-color: #B99E75;
}