/*
  -----------------------------------------------------------------------------
  change widths of two column layout
  -----------------------------------------------------------------------------
*/

#div__body {
  width: 900px;
}
#itemList, #itemList table {
  width: 900px;
}
.customizer #categoryDescriptionArea { /* left col */
  width: 453px;
}
.customizer .descriptionArea-2 { /* right col */
  width: 391px;
}
#outerwrapper .customizer .listItemDetails {
  width: 391px;
}
.fabric_grade_container,
.fabric_main_swatches {
  width: 453px;
}
.customizer #categoryDescriptionArea .displayImage,
.fabric_swatch_heading {
  width:432px;  /* actual width of .fabric_main_swatches */
}
.customizer #categoryDescriptionArea .displayImage {
  padding: 0;
}

/*
  -----------------------------------------------------------------------------
  fix css used in global theme

  currently:
	* #innerwrapper:
		width: 977px
	* #div__header:
		width: 896px
		padding-left: 40px
		padding-right: 44px
		(total width = 980px)
	* #div__body:
		width: 900px
		padding-left: 44px
		padding-right: 36px
		(total width = 980px)

  Steph wants content to be aligned to the top navigation bar..
  which is really hard when the two blocks are offset horizontally..
  this css fix is just to gain a little symmetry.
  -----------------------------------------------------------------------------
*/

#innerwrapper {
  width: 980px;
  margin-left: 2px;
}
#div__header,
#div__body {
  width: 900px;
  padding-left:  40px;
  padding-right: 40px;
}
#div__header #slb_bread_crumb {
  padding-left: 4px;
}
#div__body .customizer #categoryDescriptionArea { /* left col */
  padding-left: 0px;
}

/*
  -----------------------------------------------------------------------------
  remove unnecessary indent from left nav bar.
  note:
    * the nav is organized like a tree with no root.
      each of the top level root nodes are treated as orphaned children, being displayed with left indentation in the same way that child nodes are shown.
    * this can be fixed by removing the first <td> of each <tr>, which contains a 1 pixel image and is assigned a larger inline width.
  -----------------------------------------------------------------------------
*/

/* ---------------------------------------------------------------------------- deprecated:
div#outerwrapper div#innerwrapper div#div__body div#SL_sideBar div.navigationList table.firstTable tr.portletHandle > td > table > tbody > tr > td:first-child {
  display: none;
}
------------------------------------------------------------------------------- */

/*
  -----------------------------------------------------------------------------
  misc css visual tweaks
  -----------------------------------------------------------------------------
*/

.fabric_main_swatches div.swatch_spacer  {
  height: 18px;
}
.cross_sell {
  display: none;
}

/*
  -----------------------------------------------------------------------------
  center the "you may also like" section in the footer..

  note: contains 5 items, each in a 100px div with 15px right margin
		width(x) = (x)(100) + (x-1)(15)
		width(5) = 560px
		width of parent block = 900px
		left padding needed to center within parent block = (900 - 560) /2 = 170px

  note: it's supposed to be aligned left; commented out.
  -----------------------------------------------------------------------------
*/
/*
#suggestions,
#suggestions .suggestions,
#suggestions .suggestions h3,
#suggestions .suggestions h3 table {
  width: 900px;
  padding: 0;
}
#suggestions .suggestions .items {
  width: 900px;
  padding-left: 170px;
}

*/

/*
  -----------------------------------------------------------------------------
  fix for legacy popup script:

  replace hard coded css dimensions with a fluid layout
  -----------------------------------------------------------------------------
*/
#box_Icon.box,
#box_Icon .quickLook,
#box_Icon .popupMainArea {
	width:		auto !important;
	height:		auto !important;
}
#box_Icon .popupHead {
	height:		20px;
}

/*
  -----------------------------------------------------------------------------
  legacy css class used by custom upholstery:
  -----------------------------------------------------------------------------
*/
.margin_top_10px {
	margin-top: 10px !important;
}