﻿div.RelatedProductsWrapper div.RelatedProducts ul.productlist{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width: 720px;
}

div.RelatedProductsWrapper div.RelatedProducts div.rspWidget{
	width: 200px;
	height: 120px;
}

div.RelatedProductsWrapper div.RelatedProducts div.rspWidget span.relatedthumbnail{
	display: block;
	width: 200px;
	height: 98px;
	overflow: hidden;
}

div.RelatedProductsWrapper div.RelatedProducts div.rspWidget span.relatedthumbnail img{
	width: auto;
	height: 100%;
}

div.RelatedProductsWrapper div.RelatedProducts div.rspWidget span.relatedheading{
	display: block;
	position: absolute;
	padding: 0px 10px 0px 10px;
	margin: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 200;
	height: auto;
	line-height: 28px;

}

div.RelatedProductsWrapper div.RelatedProducts div.rspWidget span.relatedsummary{
	display: none; /* not needed at present but will eventually slide up with jquery */
}

div.RelatedProductsWrapper div.RelatedProducts div.rspWidget span.linkicon{
	display: block;
	position: absolute;
	bottom: 3px;
	right: 5px;
	width: 20px;
	height: 20px;
	background: url('img/next-horizontal-small.png') no-repeat 0px 0px;
	z-index: 300;
}

div.RelatedProductsWrapper div.RelatedProducts div.rspWidget:hover span.linkicon{
	background: url('img/next-horizontal-small.png') no-repeat -40px 0px;
}

div.RelatedProductsWrapper div.RelatedProducts a{
	display: block;
	height: 120px;
}

/* grid specific */
div.grid_8 div.RelatedProductsWrapper div.RelatedProducts ul.productlist{
	width: 480px;
}

/* Responsive code */

div.RelatedProductsWrapper div.RelatedProducts a,
div.RelatedProductsWrapper div.RelatedProducts div.rspWidget {
	height: auto;
}

div.RelatedProductsWrapper div.RelatedProducts div.rspWidget span.relatedheading {
    position:relative;
    margin: 5px 10px 0 0;
    padding: 0px 10px 0px 0;
    line-height:16px;

    display:block;
    min-height:40px;
}

/* NTH CHILD IS THE SOLUTION - BUT NOT WORKING IN IE COS ITS RUBBISH - JQUERY NEEDS TO BE THE SOLUTION THEN */
.grid_12 .productlistitem:nth-child(3n+1) {  
  clear:both;
}

.grid_12 .grid_8 .productlistitem:nth-child(2n+1) {  
  clear:both;
}

.grid_12 .grid_8 .productlistitem:nth-child(3n+1) {  
  clear:none; /* Resets the clear from 3 column layouts */
}

/* IE static Height Fix  in lieu of Nth child support */
.ie10 div.RelatedProductsWrapper div.RelatedProducts div.rspWidget
.ie9 div.RelatedProductsWrapper div.RelatedProducts div.rspWidget
.ie8 div.RelatedProductsWrapper div.RelatedProducts div.rspWidget,
.ie7 div.RelatedProductsWrapper div.RelatedProducts div.rspWidget,
.ie6 div.RelatedProductsWrapper div.RelatedProducts div.rspWidget {
    height:134px;
}
