﻿div.slider {
	width: 100%;
	background: #fff;
	padding: 10px;
	position: relative;
	/*	overflow:hidden; nojs breaks ability to see all of them. remove if the after dom load change is annoying*/
	overflow: auto;
}
div.slider img { display: block; }
.slider li {
	display: block;
	float: left;
	padding: 0px;
	cursor: pointer;
    width: 100px;
}
ul.slider {
	display: block;
	/*height: 85px;*/
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 10000px;/*overflow:hidden;*/
}
.sliderimage,
.sliderimagehover {
	display: block;
	position: relative;
	overflow: hidden;
	border: 5px solid transparent;/*	z-index:2;
	width:80px;
	height:80px;*/
	
}
.sliderimage { border-color: #FFF; }
.sliderdiv a:hover .sliderimage,
.sliderimage:hover,
.sliderimagehover { border-color: #ef7d0b; }
#Colours ul.slider .sliderdiv {
	position: relative;
	display: block;
	z-index: 1;
}
#Colours ul.slider .slidercaption {
	display: inline-block;
	display: none;
	background-color: white;
	float: left;
	position: absolute;
	text-align: left;
	color: black;
	padding: 4px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	margin: 0px;
	font: normal 10px/normal Arial, Helvetica, sans-serif;
	z-index: 9999;
}
.sliderdiv a:hover {
	color: Black;
	text-decoration: none;
}
.slidercaption em {
	color: #EF7D0B;
	font: normal 10px Arial, Helvetica, sans-serif;
}
span.colourrelatedthumb > img {
	float: left;
	margin-right: 5px;
}
