@import url('/css/submenu.css');


/*________________________________________________________________________________________________________________________________________________
Product pages layout.  All pages have a div on the left of the content area for text 285px wide by 410 high with id #contentTextProducts if a lot of specific formatting or background image required a class will be added to the div with the same name as the page (e.g. .haircare). Simple fomatting like text color will just be added through a generic class (eg.blacktext). Logo images will be positioned at the bottom left and will already be cropped to the required size allowiing 25px left-padding unless its part of a background image in which case the background image is to be the full div size. 
To the right will always be an image div it will always have the same name #contentImageProducts and a size of 483px wide by 410 high.  All images will be resized to 472 wide by x high and positioned in the bottom right. They will be added to the HTML.
_________________________________________________________________________________________________________________________________________________*/

/*NB class is product as oppossed to products which is used on the main menu
These classes apply to all products pages*/
.product {	
	background: #FFF;
	float: left;
	width: 235px; /*std width 285 - padding of 50 = 235px*/
	height: 410px;
	padding: 0px 25px; /* remember that padding is the space inside the div box and margin is the space outside the div box T R B L*/
/*	margin-right: 483px;
	margin-left: 222px;*/
}

.productImg {
	float: right; /* since this element is floated, a width must be given */
	width: 483px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	height: 410px;
	background: #FFF;
	margin: 0;
	padding: 0;
}
/*For Y positions for images Y=410-image height*/
#contentTextProducts {
	padding-left: 15px;
	padding-right: 15px;
}
#contentTextProducts h1 {
	margin-top: 50px;
}
#contentImageProducts{
	background: url(../images/content_images/products.jpg) no-repeat 0px 22px;	
}
#contentImageHaircare{
	background: url(../images/content_images/haircare.jpg) no-repeat 0px 74px;	
}

#contentImageElectricals {
	background: url(../images/content_images/electricals.jpg) no-repeat 9px 74px;	
}

#contentImageBeauty {
	background: url(../images/content_images/beauty.jpg) no-repeat 0px 74px;
}

#contentImageAcc {
	background: url(../images/content_images/accessories.jpg) no-repeat 0px 62px;
}

#contentImageMens {
	background: url(../images/content_images/mens.jpg) no-repeat 0px 62px;
}

#contentImageKids {
	background: url(../images/content_images/kids.jpg) no-repeat 0px 70px;
}

#contentImageTrade {
	background: url(../images/content_images/trade.jpg) no-repeat 0px 27px;
}