/*
Start of Products Area, it is place in dynamic css on the products page
This css is also used to set the majority of settings on Products, Productcartdisplay(Ecart), Productcartdeliveryform, Myorderslist
*/

div.ProductDetailsImagePanel, div.ProductDetailsDetailsPanel,
div.IndividualProductCategoryWrapper,
div.IndividualProductWrapper
{
    background-color:transparent;
    outline: 0 solid rgba(255,255,0,0.9);
}

img#CurrentCategoryHeaderImage
{
	float:right;
	width:10%;
	height:auto;
	margin-left:2%;
	margin-bottom:15px;
}

form#ProductFormSearch
{
    float:right;
}    

div#OverallProductCategoryWrapper
{
    padding:0;
    width:100%;
    text-align:center;
}    

div#OverallProductWrapper
{
/*
    padding:10px 1% 10px 1%;
    width:98%;
*/
    text-align:center;
}    


div.IndividualProductCategoryWrapper,
div.IndividualProductWrapper
{
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom:10px;
/* fixed - height */
/*
    min-height:500px;
    overflow-y:auto;
*/    
 }
 
div#OverallProductCategoryWrapper > div.IndividualProductCategoryWrapper > div.ProductCategoryTitle,
div#OverallProductWrapper > div.IndividualProductWrapper > div.ProductTitle
{
    margin-bottom:10px;
}    

div#OverallProductCategoryWrapper > div.IndividualProductCategoryWrapper > div.ProductCategoryImage,
div#OverallProductWrapper > div.IndividualProductWrapper > div.ProductImage
{
/*
	overflow:hidden; 
	max-height:120px;
*/
    text-align:center;
    margin-bottom:10px;
}    
 
div#OverallProductCategoryWrapper > div.IndividualProductCategoryWrapper > div.ProductCategoryImage > a.navlink > img,
div#OverallProductWrapper > div.IndividualProductWrapper > div.ProductImage > a.navlink > img
{
/*
    width:100%;
    height:auto;
*/
    max-width:100%;
    max-height:300px; /*This will stop the boxes expanding to the height of the image */
    width:auto;
    margin-bottom:10px;
}    

div#OverallProductCategoryWrapper > div.IndividualProductCategoryWrapper > div.ProductCategoryDescription,
div#OverallProductWrapper > div.IndividualProductWrapper > div.ProductDescription
{
/*
	overflow:hidden; 
*/
	max-height:200px;
	overflow-y:auto;
}

div#OverallProductWrapper > div.IndividualProductWrapper > div.ProductPrices
{
/*
    overflow-y:scroll
    height:80px;
*/
}

@media screen and (max-width: 768px) 
{
	div#OverallProductWrapper > div.IndividualProductWrapper, div#OverallProductCategoryWrapper div.IndividualProductCategoryWrapper
	{
		width:44% !important; /* This overides the inline style */
		padding-left:1% !important; 
		margin-left:2% !important;
		padding-right:1% !important;
		margin-right:2% !important;
		height:inherit !important;
		float:left !important;
		overflow-y:inherit;
	}
	fieldset.ProductsFormAddtoCartButton, fieldset.ProductsFormAddButton
	{
		padding-left: 25%;
		padding-right:25%;
		width: 50%;
	}
}

@media screen and (max-width: 360px) 
{
	div#OverallProductWrapper > div.IndividualProductWrapper, div#OverallProductCategoryWrapper div.IndividualProductCategoryWrapper
	{
		width:94% !important; /* This overides the inline style */
		padding-left:1% !important; 
		margin-left:2% !important;
		padding-right:1% !important;
		margin-right:2% !important;
		clear:both !important;
		height:inherit !important;
		overflow-y:auto;
	}
	fieldset.ProductsFormAddtoCartButton, fieldset.ProductsFormAddButton
	{
		padding-left: 25%;
		padding-right:25%;
		width: 50%;
	}
}

/* -----------------End of Product and Product category CSS----------------------------------------------------------------------------------- */