/**************************************************************

	Image Menu
	v 2.2

**************************************************************/


#imageMenu {
	position: relative;
	width: 780px;
	height: 200px;
	overflow: hidden;
}




#imageMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 200px;
	width: 1000px;
	
	}



#imageMenu ul li {
	float: left;
}



#imageMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:128px;
	height: 200px;
}



#imageMenu ul li.red a {
	background: url(images/red.jpg) repeat scroll 0%;
}



#imageMenu ul li.orange a {
	background: url(images/orange.jpg) repeat scroll 0%;
}



#imageMenu ul li.yellow a {
	background: url(images/yellow.jpg) repeat scroll 0%;
}



#imageMenu ul li.green a {
	background: url(images/green.jpg) repeat scroll 0%;
}



#imageMenu ul li.blue a {
	background: url(images/blue.jpg) repeat scroll 0%;
}



#imageMenu ul li.purple a {
	background: url(images/purple.jpg) repeat scroll 0%;
	width: 310px;
}

.clear {
	clear: both;
}

/*~~~~~~~~CSS for Carousel~~~~~~~~~~*/

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 760px; /*Width of Carousel Viewer itself*/
height: 460px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 740px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

/*************************************************************/