
/*#####################
### PRODUCT LISTING ###
#####################*/ 


#productList ul, #productGroupList ul{
	list-style				: none;
	margin					: 0px;
	padding					: 0px;
		
}

#productList ul li{
	display					: inline;
	
}

#productList ul li a, #productGroupList ul li a{
	display					: block;
	float					: left;
	margin					: 0px 0px 0px 0px;
	padding					: 8px 8px 8px 8px;
	width					: 180px;
	min-height				: 200px;
	color					: #CCCCCC !important;
	text-decoration			: none;
	font-size				: 11px;
	line-height				: 1.4em;
	font-weight				: bold;
	text-align				: center;
	background-image		: none;
}

#productGroupList ul li a{
	float					: none;
	padding					: 2px 2px 2px 2px;
	width					: auto;
	min-height				: 170px;
	font-size				: 14px;
	line-height				: 1.4em;
	text-transform			: uppercase;
}

*html #productList ul li a{
	height					: 200px;
}

#productGroupList ul li a{
	height					: 170px;
}



#productList ul li a:hover, #productGroupList ul li a:hover{
	text-decoration			: none !important;
	color					: #FFFFFF !important;
}

#productGroupList ul li a:hover{	
	margin					: 0px 0px 0px 0px;
	padding					: 0px 0px 0px 0px;
	border					: 2px solid #FF8B10;
	background-color		: #999999;
}

#trailimageid{
	position				: absolute;
	visibility				: hidden;
	left					: 0px;
	top						: 0px;
	width					: 200px;
	height					: 0px;
	z-index					: 200;
}

/*.popupBox {
	position: absolute;
	visibility: hidden;
	left: 0px;
	top: 0px;
	z-index: 200;
	border: 1px #696969 solid;
	background-color: white;
	padding: 5px;
	padding-left: 7px;
}

#productList a span {
	display					: none;

}

#productList a:hover span {
	display					: block;	
	position				: absolute; 
	z-index					: 1000;
	padding					: 0px 0px 0px 0px;
	margin					: -340px 0px 0px -80px;
	width 					: auto;
	height					: auto;
	border					: 2px solid #CC0000;
	background-color		: #1E1E1E;	
}

*html #productList a:hover span {
	margin					: -310px 0px 0px -180px;

}

*/

.infoLink{
	font-weight				: bold;
	color					: #CC6600;
}


#productInformationWide{
	display					: block;
	height					: auto;
	float 					: right;
	width					: 300px;
}



/*##########################
### PRODUCTS PAGE LAYOUT ###
##########################*/ 


.stickImage{
	padding					: 0px 0px 0px 0px;
	margin					: 10px 10px 10px 10px;
}

.productLeft{
	padding					: 0px 0px 0px 0px;
	margin					: 30px 0px 0px 15px;
	float					: left;
	width 					: 320px;
	height					: auto;
	display 				: block;
	line-height 			: 175%;
	min-height				: 440px;

}


*html .productLeft{
	height					: 440px;

}

.productRight{
	padding					: 0px 0px 0px 0px;
	margin					: 30px 0px 0px 0px;
	float					: right;
	width 					: 320px;
	height					: auto;
	display 				: block;
	line-height 			: 175%;
	min-height				: 440px;

}


*html .productRight{
	height					: 440px;

}



/*#######################
#### PRODUCT TABLES ####
#######################*/ 


.tblStickData{
	padding					: 0px 0px 0px 0px;
	margin					: 0px 0px 20px 0px;
	border					: 1px solid #FF8B10;
	width					: 300px;
}

.tblProdDesc{
	padding					: 0px 0px 0px 0px;
	margin					: 0px 0px 0px 0px;
	width					: 250px;	
}

.tblStickData td, .tblProdDesc td{
	padding					: 0px 0px 0px 0px;
	margin					: 0px 0px 0px 0px;
	height					: 20px;
	font-weight				: bold;
	vertical-align			: top;
	line-height				: 1.2em;
}

.tblStickData td{
	padding					: 5px 0px 5px 10px;
	margin					: 0px 0px 0px 0px;
}

.tblStickData span, .tblProdDesc span{
	color					: #FF8B10;
}

.tblStickData a, .tblProdDesc a{
	color					: #FEAB2E !important;	
	text-decoration			: none !important;
}

.tblStickData a:hover, .tblProdDesc a:hover{
	color					: #FF8B10 !important;	
	text-decoration			: underline !important;
}



.productTable{
	margin				: 0px;
	float				: left;
	font-size			: 90%;
	border				: 1px solid #CCC;
}

.productTable td{
	width				: 100px;
	height				: 30px;
	padding				: 3px;
	text-align			: center;
	vertical-align		: top;
	background-color	: #FFFFFF;
	
}

.tdHeader{
	border-right		: 1px solid #CCC;
}





/*##########################
### RELATED PRODUCTS BOX ###
##########################*/ 

#availableColours, #relatedLinks{
	border 				: 1px solid #666666;
	background-color	: #999;
	width				: 250px;
	margin				: 0px 0px 20px 0px;
	padding				: 0px 0px 0px 0px;
}


*html #availableColours, #relatedLinks{
	padding				: 0px 10px 0px 0px;
}

#availableColours ul, #relatedLinks ul{
	list-style 			: none;
	margin 				: 0px;
	padding 			: 0px;
}

#availableColours ul li, #relatedLinks ul li{
	display 			: inline;
	background-image	: none;
	padding				: 0px;
	margin				: 0px;
}

#availableColours ul li, #relatedLinks ul li a{
	float 				: left;
	display				: block;
	background-image	: none;
	height				: 60px;
	width				: 60px;
	padding				: 5px;
	margin				: 10px 0px 10px 10px;
	
}

#availableColours ul li:hover, #relatedLinks ul li a:hover{
	padding				: 4px;
	margin				: 10px 0px 10px 10px;
	border				: 1px solid #333333;
}


/*#######################
### NEXT/PREV BUTTONS ###
#######################*/ 



#nextButtons{
	list-style 			: none;
	margin 				: 0px;
	padding 			: 0px;
	float 				: left;
}
#nextButtons li{
	display 			: inline;
}
#nextButtons li a{
	display 			: block;
	float 				: left;
}


/*#################
### PRODUCT NAV ###
#################*/ 


ul#productNav {
	width					: 100px;
	float	 				: right;	
}


ul#productNav{
	margin					: 5px 0px 0px 0px;
	padding					: 0px 0px 0px 0px;
	width					: 100px;
	list-style 				: none;
	
}

ul#productNav li{
	display 				: inline;
}

ul#productNav li a{
	text-decoration			: none !important;
	display					: block;
	width					: 40px;
	margin					: 0px 0px 0px 0px;
	padding					: 2px 0px 0px 0px;	
	color					: #CCCCCC !important;
	float					: left;
	background-image		: url(../images/prev.gif);
	background-position		: right;
	background-repeat		: no-repeat;
}

ul#productNav li a:hover{
	display 				: inline;	
	color					: #FFFFFF !important;
	text-decoration			: underline !important;
}





/*####################
### POP UP PRODUCT ###
####################*/ 


#pic {
	background-color	: #FFFFFF;
	left				: 0px;
	position			: relative;
	top					: 0px;
	width				: 130px;
}

#pic a .large {
	border				: 0px;
	display				: block;
	height				: 0px;
	left				: 0px;
	position			: absolute;
	top					: 0px;
	width				: 0px;
}

#pic a img {
	border				: 0;
}

#pic a.p1, #pic a.p1:visited {
	background			: #FFFFFF;
	border				: 1px solid #000000;
	display				: block;
	height				: 130px;
	left				: 0;
	text-decoration		: none;
	top					: 0;
	width				: 130px;
}

#pic a.p1:hover {
	background-color	: #8C97A3;
	color				: #000000;
	text-decoration		: none;
}

#pic a.p1:hover .large {
	border				: none;
	display				: block;
	height				: 300px;
	position			: absolute;
	top					: 0px;
	width				: 300px;
	margin				: -250px 0px 0px -100px;
	border				: 2px solid #CC0000;
	background-color	: #1E1E1E;	
}



.spiderpic{
position: relative;
z-index: 0;
}

.spiderpic:hover{
background-color: transparent;
z-index: 50;
}

.spiderpic span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
width:300px;
height:300px;
display:block;
}

.spiderpic span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.spiderpic:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}
