#div__body {
  width: 900px;
}
#itemList, #itemList table {
  width:721px;
}
.customizer #categoryDescriptionArea { /* left col */
  width:370px;
  padding-bottom:0;
  padding-left:15px;
  padding-right:0;
  padding-top:0;
  float:left;
}
.customizer .descriptionArea-2 { /* right col */
  width:308px;
/* spacing between left and right cols is implied. padding added to be explicit. problem: IE requires 20px less spacing. solution: don't be explicit.. commented out: */
/*
  padding-left:28px;
*/
  float:right;
}
#outerwrapper .customizer .listItemDetails {
  width:308px;
}
.fabric_grade_container,
.fabric_swatch_heading,
.fabric_main_swatches {
  width:370px;
}
.fabric_main_swatches {
  margin-top: 15px;
}

.fabric_grade_container														{clear:both; padding: 10px 12px 5px 0;}

.fabric_grade_label															{float:left; line-height:16px; color:#7C8EAF; text-transform:uppercase; font-size:1em; font-weight:bolder; font-family: arial,sans-serif;}
.fabric_grade_selector,
.fabric_grade_help															{float:left; line-height:16px; padding-left:10px;}
/* following 1 line is only necessary to over-ride rules in index.css */
#categoryDescriptionArea .fabric_grade_selector a,
.fabric_grade_selector a														{text-decoration:none; text-transform:uppercase; color:#666666; font-size:12px; font-family:"Times New Roman",serif,sans-serif,Arial,Helvetica;}
.fabric_grade_selector .pipe_spacer											{margin-left: .9em; margin-right: .9em;          color:#666666; font-size:11px; font-family:sans-serif,Arial,Helvetica;}
/* following 1 line is only necessary to over-ride rules in index.css */
#categoryDescriptionArea .fabric_grade_help a,
.fabric_grade_help a															{color:#666666; font-size:0.7em}

.fabric_grade_container.hidden .fabric_grade_label,
.fabric_grade_container.hidden .fabric_grade_selector,
.fabric_grade_container.hidden .fabric_grade_help							{display: none;}

.fabric_swatch_heading														{white-space:nowrap;}
.fabric_swatch_heading .left													{float: left;}
/* following 3 lines are only necessary to over-ride rules in index.css */
.fabric_swatch_heading .left img,
.fabric_swatch_heading .left span,
.fabric_swatch_heading .left span.fabric_name,
.fabric_swatch_heading .left div												{display:inline; white-space:nowrap; float:none; font-family:Arial,Helvetica,sans-serif; font-size:11px; clear:none;}
.fabric_swatch_heading .left													{margin-left:0; margin-right:auto;}
.fabric_swatch_heading .left .main,
.fabric_swatch_heading .left .piping											{width:50%; padding:5px 10px 5px 0;}
/* following 2 lines are only necessary to over-ride rules in index.css */
.customizer .main   .swatch_title,
.customizer .piping .swatch_title,
.fabric_swatch_heading .left .swatch_title									{padding:0 5px 0 0; width:44px;}
/* following 2 lines are only necessary to over-ride rules in index.css */
.customizer .main   .title,
.customizer .piping .title,
.fabric_swatch_heading .left .title											{padding:0;}
.fabric_swatch_heading .buy,
.fabric_swatch_heading .buy .main,
.fabric_swatch_heading .buy .piping											{margin:0; float:right;}
/* following 3 lines are only necessary to over-ride rules in index.css */
#categoryDescriptionArea .fabric_swatch_heading .buy a,
#categoryDescriptionArea .fabric_swatch_heading .buy a.link,
#categoryDescriptionArea .fabric_swatch_heading .buy a.visited,
.fabric_swatch_heading .buy a												{text-decoration:none; text-transform:uppercase; color:#AAB9D5; font-size:11px; font-weight:bold; font-family:sans-serif,Arial,Helvetica;}
.fabric_swatch_heading .buy a img												{border: none;}

.fabric_row_terminator														{clear:both;}

.fabric_grade_container img,
.fabric_swatch_heading img													{vertical-align: bottom;}

.fabric_main_swatches a {
  width: 50px;
  margin: 0;
  margin-left: 9px;
  margin-bottom: 9px;
}
.fabric_main_swatches a.nth_child {
  margin-left: 0;
}
.fabric_main_swatches div.swatch_spacer {
  clear:both;
  height:9px;
  overflow:hidden;
  line-height:9px;
  font-size:2em;
}

.fabric_swatches_shopping_popup {
/* if: first col in each row removes margin-left */
/*
N = cols per row
WC = width of each col = 75
M = left margin = 10
W = width of each row = (75)(N) + (10)(N-1)

when:
N = 5
W = (75)(5) + (10)(5-1) = 375 + 40 = 415
*/

/* otherwise */
/*
N = cols per row
WC = width of each col = 75
M = left margin = 10
W = width of each row = (75 + 10)(N) + 10

note:
  the extra 10 added to the row's width is serve as right margin, equal to that on the left.
  all cols float left, so the extra is too narrow to allow another col to display.. and hence will be empty.

when:
N = 5
W = (85)(5) = 425 + 10 = 435
*/

/*
note:
  this version places all swatches into a fixed-height container with a vertical scrollbar.
  the scrollbar width needs to be added to the width of this element.
  the most accurate way to do this would be to calculate its width in javascript, then add it.
		see: http://plugins.jquery.com/project/scrollbarWidth
*/
	width:			435px;
	border:			1px solid #8692a8;
	padding-bottom:	10px;
}
.fabric_swatches_shopping_popup  .fabric_swatches_shopping_popup_heading {
	height:			30px;
	background:		#8692a8 url("/site/custom_upholstery_tool/images/buy_swatches_popup/heading.gif") no-repeat 10px 0px !important; /* "important" is needed to over-ride a colorbox css rule. */
}
.fabric_swatches_shopping_popup  .fabric_swatches_shopping_popup_header,
.fabric_swatches_shopping_popup  .fabric_swatches_shopping_popup_footer {
	width:			425px;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_header .fabric_swatches_shopping_popup_header_copy {
	padding-left:	10px;
	padding-top:	10px;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_header .fabric_swatches_shopping_popup_titlebar {
	height:			1.5em;
	line-height:	1.5em;
	text-align:		right;
	color:			#8692a8;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_element_container {
/*
height per row = height per element = 10 (element: margin-bottom) + 75 (img) + 5 (img: margin-bottom) + 13 (input) = 103
# visible rows = 4
H = (103)(4) = 412
*/
	height:			412px;
	overflow:		scroll;
	overflow-x:		hidden;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_element {
	float:			left;
	margin-left:	10px;
	margin-bottom:	10px;	/* 5px or 10px ? */
	text-align:		center;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_element,
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_element img {
	width:			75px;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_element img {
	display:		block;
	height:			75px;
	margin-bottom:	5px;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_element input {
	display:		inline;
	border-style:	none;
	border-width:	0px;
	margin:			0px;
	padding:		0px;
	width:			13px;
	height:			13px;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_footer {
	margin-top:		15px;
	position:		relative;
	height:			23px;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_footer .fabric_swatches_shopping_popup_footer_price {
	position:		absolute;
	top:			0px;
	left:			0px;
	width:			100px;
	height:			 23px;
	background:		url("/site/custom_upholstery_tool/images/buy_swatches_popup/price.gif") 0 0 no-repeat;
}
.fabric_swatches_shopping_popup .fabric_swatches_shopping_popup_footer .fabric_swatches_shopping_popup_footer_submit {
	position:		absolute;
	top:			0px;
	right:			0px;
	width:			 86px;
	height:			 23px;
	background:		url("/site/images_site/btn_addtobasket.gif") 0 0 no-repeat;
	cursor:			pointer;
}

#outerwrapper .customizer .listItemOptions table								{display:block; border-collapse:separate; border-spacing:5px;}
#outerwrapper .customizer .listItemOptions table td								{text-align:left;}
#outerwrapper .customizer .listItemOptions table td .smalltextnolink			{color:#7C8EAF !important; font-size:14px; font-family: arial,sans-serif; /* font-family:"Times New Roman",Times,serif; */}
#outerwrapper .customizer .listItemOptions table td.descript					{padding:0;}
#outerwrapper .customizer .listItemOptions table tr#quantity_fields_row td		{padding-top:10px;}

#outerwrapper .customizer .listItemDetails,
#outerwrapper .customizer .listItemDetails .listItemButtons,
#outerwrapper .customizer .listItemDetails .listItemButtons a					{display:block; float:none;}

.descriptionArea-2 .note,
.descriptionArea-2 .returns													{display:none;}

/*
.descriptionArea-2 .related_items											{clear:both; float:none; margin-top:15px; width:100%;}
.descriptionArea-2 .related_items											{background-color:#eceff6; height:100px; text-align:center; line-height:100px; color:#aeafb2; font-size:1.25em;}
*/
.descriptionArea-2 .related_items											{display:none;}

.listItemOptions td.smalltextnolink,
.listItemOptions td.smalltextnolink span.smalltextnolink img					{vertical-align:middle;}

#outerwrapper .customizer .upholstery_related_items							{width: 900px; white-space: nowrap;}
#outerwrapper .customizer .upholstery_related_items *							{margin:0; padding:0; overflow:hidden;}
#outerwrapper .customizer .upholstery_related_items > div						{display:inline; width: 290px;}
#outerwrapper .customizer .upholstery_related_items > div.centerpiece			{margin-left: 15px; margin-right: 15px;}
#outerwrapper .customizer .upholstery_related_items > div a img					{display:inline; width: 290px; border:none;}

.hover_content_on															{padding-top: 0px;}
.hover_teaser_on,
.hover_teaser_off															{font-size: .75em;}