/* Styles for the product overview/stock summary area displayed in an info
 * popup on the product detail page. */

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

div.stock-summary-image-box
{
	/* No styles yet. */
}

div.stock-summary-detail-heading
{
	background-color:			#c9d9e5;
	display:					table;
	margin-bottom:				10px;
	padding:					6px;
	width:						100%;
}

div.stock-summary-detail-heading-bullet,
div.stock-summary-detail-heading-label
{
	display:					table-cell;
}

div.stock-summary-detail-heading-bullet
{
	color:						#aa3939;
	max-width:					16px;
	min-width:					16px;
	width:						16px;
}

div.stock-summary-table-heading
{
	font-weight:				bold;
	padding:					0 12px;
}

div.stock-summary-info-table
{
	border-left:				1px solid #ccc;
	border-right:				1px solid #ccc;
	display:					table;
	margin-bottom:				10px;
	width:						100%;
}

div.stock-summary-info-row,
div.stock-summary-transaction-row
{
	display:					table-row;
}

div.stock-summary-transaction-row:nth-child(even)
{
	background-color:			#edf3f7;
}

div.stock-summary-info-table-label,
div.stock-summary-info-table-value,
div.stock-summary-info-table-date,
div.stock-summary-info-table-stock-adjustment,
div.stock-summary-info-table-cumulative
{
	display:					table-cell;
	padding:					4px 12px;
}

div.stock-summary-info-table-value
{
	/* The following 100px is arbitrary. It seems that some px-based max width
	 * needs to be specified for the 'word-wrap: break-word' to work, and the
	 * specific value appears to be ignored whatever I put. A CSS Mystery. */
	max-width:					100px;
	word-wrap:					break-word;
}

div.stock-summary-info-table-date,
div.stock-summary-info-table-cumulative
{
	width:						37%;
}

div.stock-summary-info-table-stock-adjustment
{
	width:						26%;
}

div.stock-summary-info-table-stock-adjustment,
div.stock-summary-info-table-cumulative
{
	text-align:					right;
}

div.stock-summary-column-heading
{
	font-weight:				bold;
}

/* Styles for width >= 1279px. --------------------------------------------- */

div.stock-summary-area
{
	display:					table;
}

div.stock-summary-row
{
	display:					table-row;
}

div.stock-summary-image-box,
div.stock-summary-detail-box
{
	display:					table-cell;
	vertical-align:				top;
}

img.stock-summary-product-image
{
	width:						300px;
}

div.stock-summary-detail-box
{
	border-left:				10px solid white;
	width:						100%;
}

div.stock-summary-info-table-label
{
	width:						35%;
}

/* Styles for width 960px to 1278px. --------------------------------------- */

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

img.stock-summary-product-image
{
	width:						222px;
}

}

/* Styles for width 720px to 959px. ---------------------------------------- */

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

/* ... */

}

/* Styles for width 620px to 719px. ---------------------------------------- */

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

img.stock-summary-product-image
{
	width:						160px;
}

}

/* Styles for width < 620px. ----------------------------------------------- */

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

div.stock-summary-image-box
{
	display:					none;
}

div.stock-summary-detail-box
{
	border-left:				none;
}

}