/**********************************************************
Name:			product_page.css
Description:	CSS definitions for Sirdar product (Design or Yarn) page.
Date:			23/05/2007
Author:			Andrei Vais
**********************************************************/

#product_template
{
	/*border: 1px solid red;*/
	color: #808080;
	float: right;
	margin: 0 0 30px 0;
	padding: 0;
	width: 81%;
}

#product_template img
{
	border: 0px solid #FFFFFF;
	float: left;
}

#product_template .LeafletProductImage, #product_template .ProductImage
{
	float: left;
	margin: 0;
	padding: 0;
	width: 18%;
}

#product_template .ProductImage
{	
	width: 48%;
}

#product_template .ProductImage img
{
	float: left;
	width: 100%;
}


/*	Define style for design features, related yarns and yarn shades table	*/
/*	Normal product shots such as leaflets and books are square; yarns shots are portrait hence we need to adjust the size avalable for the text on the right hand side.*/
#product_details
{
	/*border: 1px solid red;*/
	float: right;
	margin: 0;
	padding: 0;
	width: 58%;
}

#product_template .SquareProductImage
{
	width: 48%;
}

#product_template h2, #product_template h3, #product_template h4
{
	float: left;
	font-size: 120%;
	font-weight: bold;
	margin: 0 0 20px 0;
	padding: 0;
	width: 70%;
}

#product_template h3
{
	float: right;
	margin-bottom: 8px;
	width: auto;
}

#product_template h4
{
	margin-bottom: 8px;
	margin-top: 30px;
	width: 100%;
}

#product_details legend
{
	display: none;
}

#product_details fieldset
{
	border: 0px solid #FFFFFF;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
}

#product_details p, #product_details dl, #product_details ol
{
	clear: left;
	float: left;
	margin: 0 0 25px 0;
	padding: 0;
	width: 100%;
}

#product_details dl
{
	margin-bottom: 15px;
}

#product_details p.RelatedDesignsCount
{
	margin-bottom: 0;
}

#product_details ul.ListRelatedDesigns
{
	margin-top: 10px;
	margin-bottom: 40px;
}

#product_details p.YarnLink
{
	margin: 6px 0 0 0;
	padding: 0;
	text-transform: uppercase;
}

#product_details ul.SizeRange
{
	margin: 0;
	padding: 0;
}

#product_details ul.SizeRange li
{
	clear: both;
	margin: 0 0 3px 0;
	padding: 0;
}

/*	End of style definitions for design features, related yarns and yarn shades table 	*/

/*	Define style for the list of washing symbols	*/
dl#washingSysmbols
{
	margin-bottom: 10px;
}

dl#washingSysmbols dt, dl#washingSysmbols dd
{
	float: left;
	margin: 0 0 3px 0;
	padding: 0;
	width: auto;
}

dl#washingSysmbols dt
{
	clear: left;
	display: none;
}

dl#washingSysmbols img
{
	margin: 0;
	padding: 0;
	width: 29px;
	height: 40px;
}

/*	End of list of washing symbols 	*/

/*	Define style for the list of design features (leaflet no., yarn, neddle size, etc.)	*/
#product_details dt, #product_details dd
{
	float: left;
	font-size: 90%;
	margin: 0 0 5px 0;
	padding: 0;
	width: 67%;
}

#product_details dt
{
	clear: left;
	width: 33%;
}

/*	End of list of design features 	*/

/*	Define style for the list of related products for a given	*/
ol#RelatedProducts
{
	margin: 10px 0 0 0;
	padding: 0;
	width: 100%;
}

ol#RelatedProducts li
{
	font-size: 85%;
	margin: 0 1.3% 15px 1.3%;
	display: inline;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	width: 14%;
}

ol#RelatedProducts li img
{
	border-width: 1px;
	margin: 0 0 7px 0;
	padding: 0;
}

#product_template ol.RelatedProducts_Yarn li
{
	width: 97%;
}
/*	End of table related yarns list styles definitions 	*/

/*	Define table styles to display the number of yarns for each shade for given design;
each type of design (round neck and v-neck) will be displayed in separte tables 	*/
#product_details .yarn_shade
{
	/*border: 1px solid #FF0000;*/
	margin: 0 0 10px 0;
	padding: 0;
	float: left;
	width: 100%;
}

#product_details .LastDesing
{
	margin-bottom: 30px
}

.yarn_shade caption
{
	/*border: 1px solid #FF0000;*/
	margin: 0 0 1px 0;
	padding: 0 0 0 2px;
	text-align: left;
	text-transform: capitalize;
	width: 100%;
}

.yarn_shade th
{
	background-color: #EBEBEB;
	font-size: 85%;
	font-weight: normal;
	margin: 0;
	padding: 4px 7px 4px 7px;
	text-align: right;
	/*white-space: nowrap;*/
	width: 36%;
}

.yarn_shade td
{
	background-color: #F0F0F0;
	font-size: 85%;
	margin: 0;
	width: 14px;
	padding: 4px;
	text-align: center;
	width: auto;
}

.yarn_shade td.SizeLabels
{
	width: 14%;
	white-space: nowrap;
}

 .yarn_shade td.DesignYarnSizeMessage
{
	padding-right: 0;
	text-align: left;
	width: 100%;
}

/*	End of table styles definitions 	*/