/* Styles for all '*-column' layouts and display widths. ------------------- */

div#page-content
{
	margin-bottom:				20px;
}

div.product-nav
{
	padding:					0 0 12px 0;
}

div.product-nav a
{
	margin-right:				20px;
	white-space:				nowrap;
}

div.product-detail
{
	/* No styles so far. */
}

div.table
{
	display:					table;
}

div.image-area,
div.info-area,
div.pricing-area
{
	display:					table-cell;
	vertical-align:				top;
}

div.pricing-area div.mdlite-container,
div.pricing-area p
{
	border-left:				1px solid #ccc;
	border-right:				1px solid #ccc;
	padding:					0 12px 12px 12px;
}

div.pricing-area div.below-table
{
	padding:					0 12px 12px 12px;
}

div.pricing-area-alternative
{
	border-left:				1px solid #ccc;
	border-right:				1px solid #ccc;
	padding:					0 12px;
}

img.product-detail-image-primary
{
	cursor:						zoom-in;
}

div.product-detail-image-secondary
{
	display:					inline-block;
}

img.product-detail-image-secondary
{
	cursor:						pointer;
}

/* Resource hub document links */

div.wi-hub-link
{
	padding:					10px 0 0 0;
	text-align:					center;
}

div.blog-document-area
{
	padding-top:				12px;
}

div.blog-document-link
{
	display:					table;
}

div.blog-document-link-cell
{
	display:					table-cell;
	padding:					4px 6px;
	vertical-align:				top;
}

div.blog-document-link-cell img
{
	width:						24px;
}

div.blog-document-cell a
{
	/* No styles so far. */
}

/* Detail info area. */

div.info-area
{
	/* No styles so far. */
}

div.pricing-area-heading,
div.product-info-group-heading,
div.side-scroll-area-heading
{
	background-color:			#c9d9e5;
	color:						#243a54;
	display:					table;
	margin-bottom:				6px;
	padding:					6px;
	width:						100%;
}

div.product-info-group-heading
{
	cursor:						pointer;

	/* No double-click text selection: */
	-webkit-user-select:		none; /* Webkit (Safari, Chrome) browsers. */
	-moz-user-select:			none; /* Mozilla browsers. */
	-khtml-user-select:			none; /* Webkit (Konqueror) browsers. */
	-ms-user-select:			none; /* IE10+. */
}

div.info-group-heading-label,
div.pricing-area-heading-label,
div.product-info-group-heading-icon
{
	display:					table-cell;
}

div.detail-heading-bullet
{
	color:						#aa3939;
	display:					table-cell;
	max-width:					16px;
	min-width:					16px;
	width:						16px;
}

div.product-info-group-heading-icon
{
	/* Including padding; see above. */
	max-width:					24px;
	width:						24px;
}

img.product-info-group-heading-icon
{
	width:						12px;
}

div.product-detail-container-hidden,
img.product-info-group-heading-icon-hidden
{
	display:					none;
}

div.product-info-container
{
	border-left:				1px solid #ccc;
	border-right:				1px solid #ccc;
	margin-bottom:				12px;
}

div.product-info-sub-heading
{
	font-weight:				bold;
	padding:					6px 12px;
}

/* Used (with 'info-table-label' and 'info-table-value') when product info
 * consists of a pair of values (the majority case). */
div.info-table
{
	display:					table;
	width:						100%;
}

div.info-table .row
{
	/* No styles so far. */
}

div.info-table-column-heading,
div.info-table-heading
{
	font-weight:				bold;
}

div.info-table-column-heading,
div.info-table-label,
div.info-table-value
{
	display:					table-cell;
	padding:					4px 12px;
	word-wrap:					break-word;
}

div.info-table-value > div
{
	padding-bottom:				4px;
}

div.product-info-blurb
{
	padding:					0 12px 4px 12px;
}

div.product-info-blurb-hr
{
	border-top:					1px solid #ccc;
	margin:						15px 12px;
}

div.document-table
{
	display:					table;
	padding:					2px 12px;
}

div.document-table-row
{
	display:					row;
}

div.document-cell
{
	display:					table-cell;
	width:						290px;
}

div.document-line
{
	display:					table;
}

div.document-line-row
{
	display:					row;
}

div.document-icon-cell,
div.document-link-text-cell
{
	display:					table-cell;
	vertical-align:				middle;
}

div.document-icon-cell
{
	height:						32px;
	width:						35px;
}

img.document-link-icon
{
	padding:					4px 12px 4px 0;
	/* The following width includes the specified 'padding-right': */
	width:						36px;
}

img.document-locked
{
	padding-left:				8px;
	vertical-align:				middle;
	/* The following width includes the specified 'padding-left': */
	width:						20px;
}

table.cable-prep-table
{
	/* No styles yet. */
}

td.cable-prep-strip-dims,
td.cable-prep-image
{
	padding:					4px 12px;
}

table.cable-prep-table img,
table.cable-prep-table video
{
	width:						220px;
}

table.strip-dims-table
{
	margin:						0 auto;
}

div.strip-dim-table-container
{
	padding:					12px 24px 0 24px;
}

div.strip-dim-table-container td
{
	padding:					2px;
}

div.pricing-detail-table div.row:nth-child(even)
{
	background-color:			#edf3f7;
}

/* Pricing box. */

table.order-info-table,
table.pricing-table
{
	border-left:				1px solid #ccc;
	border-right:				1px solid #ccc;
}

table.order-info-table tr:nth-child(even),
table.pricing-table tr:nth-child(even)
{
	background-color:			#edf3f7;
}

table.order-info-table td.stock-summary-link
{
	text-align:					right;
}

table.order-info-table td.order-info-value,
table.pricing-table td.price
{
	text-align:					right;
}

table.pricing-table td.quantity
{
	white-space:				nowrap;
}

table.pricing-table .applicable-price
{
	/* To discourage (but not prevent) word breaking between the applicable
	 * price and 'each': */
	display:					inline-block;
}

table.pricing-table .inapplicable-price
{
	text-decoration:			line-through;
}

/* Add-to-cart box. */

div.add-to-cart
{
	display:					table;
	padding-bottom:				12px;
	width:						100%;
}

div.add-to-cart div.form-group
{
	display:					table-cell;
}

div.add-to-cart div.form-group:first-child
{
	padding-right:				6px;
}

div.add-to-cart div.form-group input
{
	margin:						0;
}

div.add-to-cart input[type="text"]
{
	width:						100%;
}

/* Associated product thumbnail area. */

div.side-scroll-area
{
	padding-top:				5px;
	/* 'relative' to allow absolute positioning of scroll left/right divs: */
	position:					relative;
}

div.side-scroll-thumbnails-container
{
	overflow-x:					auto;
	white-space:				nowrap;
}

div.side-scroll-left,
div.side-scroll-right
{
	background-color:			#ccc;
	bottom:						119px;
	cursor:						pointer;
	display:					none;
	opacity:					0.4;
	padding:					65px 5px 0 5px;
	position:					absolute;
	top:						155px;

	/* No double-click text selection. */
	-webkit-user-select:		none; /* Webkit (Safari, Chrome) browsers. */
	-moz-user-select:			none; /* Mozilla browsers. */
	-khtml-user-select:			none; /* Webkit (Konqueror) browsers. */
	-ms-user-select:			none; /* IE10+. */
}

div.side-scroll-right
{
	right:						0;
}

div.side-scroll-left:hover,
div.side-scroll-right:hover
{
	opacity:					0.75;
}

div.side-scroll-area a
{
	border-bottom:				none;
}

div.side-scroll-thumbnail-cell
{
	border:						2px solid #eee;
	display:					inline-block;
	margin:						4px 7px 10px 6px;
	/* Image width plus left and right border: */
	max-width:					228px;
	min-width:					228px;
	/* Left/right padding provided by img element; see below. */
	padding:					10px 0;
	text-align:					center;
	vertical-align:				top;
	white-space:				initial;
}

/* With a 4:3 aspect ratio, min-height (minus padding) is 0.75 of the width
 * (again minus padding), e.g., (149px - 5px) = (212px - 20px) * 0.75. */
img.side-scroll-thumbnail
{
	/* The actual image min-height is the following minus the top/bottom
	 * padding. */
	min-height:					153px;
	/* Left/right padding on image rather than cell to allow caption to be
	 * wider than the image. */
	padding:					0 10px 5px 10px;
	/* The actual image width is the following minus the left/right padding. */
	width:						224px;
}

div.side-scroll-area div.thumbnail-caption
{
	color:						#333;
	font-family:				consolas, "Lucida Console", Monaco, monospace;
	font-size:					13px;
}

div.side-scroll-area div.thumbnail-desc
{
	color:						#666;
	height:						122px;
	padding:					10px 10px 0 10px;
}

div.side-scroll-area div.side-scroll-detail-button
{
	padding-top:				10px;
}

/* Primary image fullsize 'popup'. */

div#product-detail-fullsize-image-container
{
	background-color:			rgb(0, 0, 0); /* Fallback colour. */
	background-color:			rgba(0, 0, 0, 0.5);
	display:					none;
	height:						100%;
	left:						0;
	overflow:					auto;
	position:					fixed;
	top:						0;
	width:						100%;
	z-index:					1;
}

div.product-detail-fullsize-image-title
{
	background-color:			#c9d9e5;
	display:					table;
	height:						40px;
	margin:						100px auto 0 auto;
	padding:					5px 10px;
}

div.product-detail-fullsize-image-heading-bullet,
div#product-detail-fullsize-image-heading-text,
div#product-detail-fullsize-image-close
{
	display:					table-cell;
}

div.product-detail-fullsize-image-heading-bullet
{
	color:						#aa3939;
	width:						16px;
}

div.product-detail-fullsize-image-close
{
	font-size:					150%;
	text-align:					right;
	cursor:						pointer;
}

div.product-detail-fullsize-image-close,
div.product-detail-fullsize-image,
div.product-detail-fullsize-image-nav
{
	/* No double-click text selection: */
	-webkit-user-select:		none; /* Webkit (Safari, Chrome) browsers. */
	-moz-user-select:			none; /* Mozilla browsers. */
	-khtml-user-select:			none; /* Webkit (Konqueror) browsers. */
	-ms-user-select:			none; /* IE10+. */
}

div.product-detail-fullsize-image
{
	margin:						0 auto;
}

div.product-detail-fullsize-image-nav-container
{
	display:					table;
	/* The following coupled with a negative 'margin-left' half the width (see
	 * further down) of this element causes horizontal centring where auto
	 * left/right margins don't appear to work for elements with 'position:
	 * absolute'. */
	left:						50%;
	position:					absolute;
	top:						140px;
}

div.product-detail-fullsize-image-nav-container > div
{
	display:					table-cell;
}

div.product-detail-fullsize-image-nav-container div.fill-width
{
	width:						100%;
}

div.product-detail-fullsize-image-nav
{
	color:						#808080;
	cursor:						pointer;
	max-width:					50px;
	min-width:					50px;
	text-align:					center;
	transition:					0.3s;
	vertical-align:				middle;
	width:						50px;
}

div.product-detail-fullsize-image-nav:hover
{
	background-color:			#ccc;
	color:						black;
	opacity:					0.5;
}

/* Styles for all '*-column' layouts. -------------------------------------- */

/* ... */

/* Styles for all display widths. ------------------------------------------ */

/* ... */

/* Styles for width >= 1279px (three-column layout). ----------------------- */

div#page-content
{
	padding:					0 8px;
}

div.three-column-layout
{
	display:					table;
}

div.two-column-layout
{
	display:					none;
}

div.info-area
{
	max-width:					616px;
	padding:					0 8px;
	width:						616px;
}

div.info-table-label,
td.cable-prep-strip-dims
{
	min-width:					240px;
	width:						240px;
}

div.info-table-value
{
	/* 616px ('info-area' width) - 16px ('info-area.padding') - 2px ('product-
	 * info-container.border'): 598px. */
	/* 598 - 240 ('info-table-label.width'): */
	max-width:					358px;
}

div.document-cell
{
	width:						290px;
}

div.image-area
{
	padding:					0 6px 0 0;
}

img.product-detail-image-primary
{
	width:						300px;
}

img.product-detail-image-secondary
{
	width:						98px;
}

/* Every child image, starting with the second. This has the effect of
 * resetting all previous nth-children that may have different multiples. */
div.product-detail-image-secondary:nth-child(n+2)
{
	padding-right:				3px;
}

/* Every third product image, starting with the fourth. */
div.product-detail-image-secondary:nth-child(3n+4)
{
	padding-right:				0;
}

div.image-area,
div.pricing-area
{
	max-width:					306px;
	width:						306px;
}

div.pricing-area
{
	padding:					0 0 0 6px;
}

div.pricing-area-heading div.fill-width
{
	display:					table-cell;
	width:						100%;
}
g
div.pricing-area-heading select:focus
{
	background-color:			#edf3f7;
	outline:					none;
}

table.order-info-table,
table.pricing-table
{
	max-width:					300px;
	width:						300px;
}

div.product-detail-fullsize-image-title,
div.product-detail-fullsize-image,
img.product-detail-fullsize-image,
div.product-detail-fullsize-image-nav-container
{
	width:						624px;
}

div.product-detail-fullsize-image-nav-container
{
	height:						468px; /* 75% of image (image ratio: 4/3). */
	margin-left:				-312px; /* 50% of element width. */
}

/* Styles for width 960px to 1278px (three-column layout). ----------------- */

@media only screen
	and (max-width: 1278px)
{

div#page-content
{
	padding:					0 8px;
}

div.three-column-layout
{
	display:					table;
}

div.two-column-layout
{
	display:					none;
}

div.info-area
{
	max-width:					460px;
	padding:					0 8px;
	width:						460px;
}

div.document-cell
{
	width:						210px;
}

div.info-table-label,
td.cable-prep-strip-dims
{
	min-width:					178px;
	width:						178px;
}

div.info-table-value
{
	/* 460px ('info-area' width) - 16px ('info-area.padding') - 2px ('product-
	 * info-container.border'): 442px. */
	/* 442 - 178 ('info-table-label.width'): */
	max-width:					264px;
}

div.image-area
{
	padding:					0 8px 0 0;
}

img.product-detail-image-primary
{
	width:						222px;
}

img.product-detail-image-secondary
{
	width:						72px;
}

/* Every child image, starting with the second. This has the effect of
 * resetting all previous nth-children that may have different multiples. */
div.product-detail-image-secondary:nth-child(n+2)
{
	padding-right:				3px;
}

/* Every third product image, starting with the fourth. */
div.product-detail-image-secondary:nth-child(3n+4)
{
	padding-right:				0;
}

div.image-area,
div.pricing-area
{
	max-width:					230px;
	width:						230px;
}

div.pricing-area
{
	padding:					0 0 0 8px;
}

table.order-info-table,
table.pricing-table
{
	max-width:					222px;
	width:						222px;
}

div.side-scroll-thumbnail-cell
{
	/* Image width plus left and right border: */
	max-width:					212px;
	min-width:					212px;
}

/* With a 4:3 aspect ratio, min-height (minus padding) is 0.75 of the width
 * (again minus padding), e.g., (149px - 5px) = (212px - 20px) * 0.75. */
img.side-scroll-thumbnail
{
	/* The actual image min-height is the following minus the top/bottom
	 * padding. */
	min-height:					141px;
	/* The actual image width is the following minus the left/right padding. */
	width:						208px;
}

}

/* Styles for width 720px to 959px (two-column layout). -------------------- */

@media only screen
	and (max-width: 959px)
{

div.table
{
	/* No styles so far. */
}

div#page-content
{
	padding:					0 8px;
}

div.two-column-layout
{
	display:					table;
}

div.three-column-layout
{
	display:					none;
}

div.info-area
{
	max-width:					682px;
	padding:					0;
	width:						682px;
}

div.document-cell
{
	width:						325px;
}

div.info-table-label,
td.cable-prep-strip-dims
{
	min-width:					270px;
	width:						270px;
}

div.info-table-value
{
	/* 682px ('info-area' width) - 0px ('info-area.padding') - 2px ('product-
	 * info-container.border'): 680px. */
	/* 680 - 270 ('info-table-label.width'): */
	max-width:					410px;
}

img.product-detail-image-primary
{
	width:						335px;
}

img.product-detail-image-secondary
{
	width:						130px;
}

/* Every child image, starting with the second. This has the effect of
 * resetting all previous nth-children that may have different multiples. */
div.product-detail-image-secondary:nth-child(n+2)
{
	padding-right:				3px;
}

/* Every third product image, starting with the fourth. */
div.product-detail-image-secondary:nth-child(3n+4)
{
	padding-right:				0;
}

div.image-area,
div.pricing-area
{
	max-width:					342px;
	padding:					0 8px 0 0;
	width:						342px;
}

div.image-area
{
	padding-bottom:				16px;
}

div.pricing-area-heading
{
	padding:					6px 12px;
}

table.order-info-table,
table.pricing-table
{
	max-width:					335px;
	width:						335px;
}

table.order-info-table td,
table.pricing-table td
{
	padding:					6px;
}

div.side-scroll-thumbnail-cell
{
	/* No styles so far. */
}

img.side-scroll-thumbnail
{
	/* No styles so far. */
}

}

/* Styles for width 620px to 719px (two-column layout). -------------------- */

@media only screen
	and (max-width: 719px)
{

div#page-content
{
	padding:					0 6px;
}

div.two-column-layout
{
	display:					table;
}

div.three-column-layout
{
	display:					none;
}

div.info-area
{
	max-width:					588px;
	padding:					0;
	width:						588px;
}

div.document-cell
{
	width:						280px;
}

div.info-table-label,
td.cable-prep-strip-dims
{
	min-width:					235px;
	width:						235px;
}

div.info-table-value
{
	/* 588px ('info-area' width) - 0px ('info-area.padding') - 2px ('product-
	 * info-container.border'): 586px. */
	/* 586 - 235 ('info-table-label.width'): */
	max-width:					351px;
}

img.product-detail-image-primary
{
	width:						285px;
}

img.product-detail-image-secondary
{
	width:						94px;
}

/* Every child image, starting with the second. This has the effect of
 * resetting all previous nth-children that may have different multiples. */
div.product-detail-image-secondary:nth-child(n+2)
{
	padding-right:				3px;
}

/* Every third product image, starting with the fourth. */
div.product-detail-image-secondary:nth-child(3n+4)
{
	padding-right:				0;
}

div.image-area,
div.pricing-area
{
	max-width:					295px;
	padding:					0 6px 0 0;
	width:						295px;
}

div.image-area
{
	padding-bottom:				16px;
}

table.order-info-table,
table.pricing-table
{
	max-width:					289px;
	width:						289px;
}

div.product-detail-fullsize-image-title,
div.product-detail-fullsize-image,
img.product-detail-fullsize-image,
div.product-detail-fullsize-image-nav-container
{
	width:						550px;
}

div.product-detail-fullsize-image-nav-container
{
	height:						413px; /* 75% of image (image ratio: 4/3). */
	margin-left:				-275px; /* 50% of element width. */
}

div.side-scroll-left,
div.side-scroll-right
{
	bottom:						100px;
	top:						136px;
}

div.side-scroll-thumbnail-cell
{
	/* Image width plus left and right border: */
	max-width:					178px;
	min-width:					178px;
}

/* With a 4:3 aspect ratio, min-height (minus padding) is 0.75 of the width
 * (again minus padding), e.g., (149px - 5px) = (212px - 20px) * 0.75. */
img.side-scroll-thumbnail
{
	/* The actual image min-height is the following minus the top/bottom
	 * padding. */
	min-height:					115px;
	/* The actual image width is the following minus the left/right padding. */
	width:						174px;
}

div.side-scroll-area div.thumbnail-desc
{
	font-size:					13px;
}

}

/* Styles for width < 620px (two-column layout). --------------------------- */

@media only screen
	and (max-width: 619px)
{

div#page-content
{
	padding:					0 5px;
}

div.two-column-layout,
div.image-area,
div.info-area,
div.pricing-area
{
	display:					block;
}

div.three-column-layout
{
	display:					none;
}

div.info-area
{
	max-width:					300px;
	padding:					0;
	width:						300px;
}

div.document-cell
{
	width:						130px;
}

div.info-table-label,
td.cable-prep-strip-dims
{
	min-width:					120px;
	width:						120px;
}

div.info-table-value
{
	/* 300px ('info-area' width) - 0px ('info-area.padding') - 2px ('product-
	 * info-container.border'): 298px. */
	/* 298 - 120 ('info-table-label.width'): */
	max-width:					178px;
}

div.image-area
{
	/* No styles at present. */
}

img.product-detail-image-primary
{
	width:						300px;
}

img.product-detail-image-secondary
{
	width:						95px;
}

/* Every child image, starting with the second. This has the effect of
 * resetting all previous nth-children that may have different multiples. */
div.product-detail-image-secondary:nth-child(n+2)
{
	padding-right:				3px;
}

/* Every second product image, starting with the third. */
div.product-detail-image-secondary:nth-child(2n+3)
{
	padding-right:				0;
}

div.image-area,
div.pricing-area
{
	max-width:					300px;
	width:						300px;
}

div.pricing-area
{
	/* No styles at present. */
}

table.order-info-table,
table.pricing-table
{
	max-width:					295px;
	width:						295px;
}

div.product-detail-fullsize-image-title,
div.product-detail-fullsize-image,
img.product-detail-fullsize-image,
div.product-detail-fullsize-image-nav-container
{
	width:						280px;
}

div.product-detail-fullsize-image-nav-container
{
	height:						210px; /* 75% of image (image ratio: 4/3). */
	margin-left:				-140px; /* 50% of element width. */
}

div.side-scroll-left,
div.side-scroll-right
{
	bottom:						105px;
	padding:					62px 2px;
	top:						126px;
}

div.side-scroll-thumbnail-cell
{
	/* Image width plus left and right border: */
	max-width:					132px;
	min-width:					132px;
}

/* With a 4:3 aspect ratio, min-height (minus padding) is 0.75 of the width
 * (again minus padding), e.g., (149px - 5px) = (212px - 20px) * 0.75. */
img.side-scroll-thumbnail
{
	/* The actual image min-height is the following minus the top/bottom
	 * padding. */
	min-height:					86px;
	/* The actual image width is the following minus the left/right padding. */
	width:						128px;
}

div.side-scroll-area div.thumbnail-desc
{
	font-size:					12px;
}

}