/*******************************
Sample Form
The following three sets of rules display the call to action man and the header.
negative margins are used to offset the man and his speech bubble.
********************************/
div#product_sampleform
{
	/*border: 1px solid orange;*/
	
	margin: 0 0 0 25px;
	float: left;
	
	/* Avoid IE doubled margins bug */
	display: inline;
}

div#product_sampleforminstr
{	
	/*border: 1px solid orange;*/

	margin: 0 0 0 -30px;
	background-image: url(../../images/range_man1.gif);
	background-repeat: no-repeat;
	width: 355px;
	height: 80px;
	padding: 10px 25px 5px 50px;
	font-size: 85%;
	color: #447388;
	text-align: left;
	text-transform: lowercase;

	/* Fix IE bug that prevents the background of divs in -ve margin areas being displayed */
	position: relative;
}

#product_sampleform h2
{
	/*border: 1px solid yellow;*/

	margin: -36px 0 10px 5px;
}


/*******************************
The shade card bit
********************************/
div#products_shadecardselect
{
	border: 1px solid #7FAAB7;
	float: left;
	width: 712px;
	margin: 20px 0 10px 0;

	/* IE doubled margin */
	display: inline;
}

div#products_shadecardselect_inner
{
	border: 2px solid #F3F5F8;
	padding: 5px;
}

div#products_shadecardselect img
{
	float: left;
}

div#products_shadecardselect p
{
	margin: 10px 0 0 0;
}

div#products_shadecardselect_text
{
	/*border: 1px solid orange;*/
	margin: 0 0 0 20px;
	float: left;
	width: 550px;
	text-transform: lowercase;
}

div#products_shadecardselect_box
{
	float: right;
	border-left: 1px solid #7FAAB7;
	padding: 0 0 0 5px;
	width: 50px;
	text-align: center;
}

div#products_shadecardselect_box label
{
	/*border: 1px solid yellow;*/
	text-align: center;
	display: block;
	margin: 0 0 8px 0;
}

/*******************************
The form itself.
********************************/
fieldset.colours
{
	/*border: 1px solid green;*/
	width: 714px;
	margin: 0 0 10px 0;
	padding: 0;
}

fieldset.button
{
	text-align: center;
}

.products_colourquantity
{
	border: 1px solid #9FAAB7;
	text-align: center;
	width: 350px;
	border-bottom: none;
	height: 60px;
}

.products_colourquantity_inner
{
	border: 2px solid #F3F5F8;
	float: left;
	padding: 3px;
}

/* Styles change for left and right */
.products_colourquantity.left
{
	float: left;
	/* Avoid IE doubled margins bug */
	display: inline;
	overflow: hidden;
}

.products_colourquantity.right
{
	float: right;
	overflow: hidden;
}
/* Styles change for more than two samplw options */
.products_colourquantity.deep
{
    height: 75px;
}

.products_colourquantity.left div.image
{
	width: 50px;
	height: 50px;
	overflow: hidden;
	float: left;
}

.products_colourquantity.right div.image
{
	width: 50px;
	height: 50px;
	overflow: hidden;
	float: right;
}

.products_colourquantity.left div.quant
{
	/*border: 1px solid orange;*/
	float: right;
	width: 130px;
	text-transform: lowercase;
}

.products_colourquantity.right div.quant
{
	/*border: 1px solid orange;*/
	float: left;
	width: 130px;
	text-transform: lowercase;
}

.products_colourquantity.left h4
{
	display: block;
	/*border: 1px solid green;*/
	margin: 15px 0 0 10px;
	float: left;
	width: 145px;
	text-align: left;
	font-size: 90%;

	/* IE doubled margins */
	display: inline;
}

.products_colourquantity.right h4
{
	/*border: 1px solid green;*/
	margin: 15px 10px 0 0;
	font-size: 90%;
	float: right;
	width: 145px;
	text-align: right;
	display: block;
}

.products_colourquantity.right label
{
	/*border: 1px solid orange;*/
	width: 80px;
	display: block;
	float: right;
	text-align: left;
	margin: 5px 2px 2px 0;
}

.products_colourquantity.left label
{
	/*border: 1px solid orange;*/
	width: 80px;
	display: block;
	float: left;
	text-align: right;
	margin: 5px 2px 2px 0;
}

.products_colourquantity.right select
{
	/*border: 1px solid orange;*/
	float: left;
	width: 36px;
	margin: 0;
}

.products_colourquantity.left select
{
	/*border: 1px solid orange;*/
	float: right;
	width: 36px;
}

.products_colourquantity select.quartertile
{
	margin-bottom: 5px;
}