/* ===== Echo Products Slideshow ===== */

div#spiProducts {
	position: relative;
	width: 680px;
	height:419px;
}

div#spiProducts ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Button placement images */
div#images{
	position:relative;
	top: 0px;
	left: 0px;
	width:680px;
	height:314px;
	overflow:hidden;
}

	
/* Navigation buttons to the left of disjointed images */
div#button5{
	position:absolute;
	top: 314px;
	left: 0px;
	height: 100px;
	z-index:99;
}

div#button li{
	float: left;
	width:125px;
	height:90px;
	text-indent:-9999px;
	margin:10px 0 0 10px;
	padding: 0;
}
	
/* Make the Buttons Clickable */
li#velocity a, li#reflections a, li#round a, li#cove a, li#shapes a {
	width:155px;
	height:90px;
	display:block;
}

/* Normal Button States */
li#velocity {
	background:url(images/buttons/velocityBg.png) no-repeat;
	}
li#reflections {
	background:url(images/buttons/reflectionsBg.png) no-repeat;
	}
li#round {
	background:url(images/buttons/roundBg.png) no-repeat;
	}
li#cove {
	background:url(images/buttons/coveBg.png) no-repeat;
	}
li#shapes {
	background:url(images/buttons/shapesBg.png) no-repeat;
	}
	
/* Hover Button States */
li#velocity:hover{
	background:url(images/buttons/velocityBgOn.png) no-repeat;
	}
li#reflections:hover{
	background:url(images/buttons/reflectionsBgOn.png) no-repeat;
	}
li#round:hover{
	background:url(images/buttons/roundBgOn.png) no-repeat;
	}
li#cove:hover{
	background:url(images/buttons/coveBgOn.png) no-repeat;
	}
li#shapes:hover{
	background:url(images/buttons/shapesBgOn.png) no-repeat;
	}