@charset "utf-8";
    /*Class to set the width for the whole Carousel. You can set the width and height as you want */
.widget {
	width:820px;
	position:relative;
	top:50px;
	left:20px;
}

.mid {
	margin:20px;
	background-color:#CCCCCC;
	border: 1px solid #666666;
	padding:10px;
}
/*Class to set the styling option for the previous button on the Carousel */
.widget a.previous {
	float:left;
	display:block;
	background:url(images_carousel/prev.gif) bottom;
	width:28px;
	height:28px;
	margin-top:50px;
	margin-right:23px;
	outline:none;
	border:none;
}

/*Class to set the styling option for the next button on the Carousel */
.widget a.next{
	float:right;
	display:block;
	background:url(images_carousel/next.gif) bottom;
	width:28px;
	height:28px;
	margin-top:-78px;
	outline:none;
	border:none;
}

/*Class to set the styling option for the scroller part of the Carousel */

.widget_style {
	text-align:left;
	padding:0px 0px 0px 0px;
}
.widget_style ul {
	margin:0 0 0 0;
	padding:0;
}

/*Class to set the image background and the size of it, do note that itтАЩs not the size of the scrolling images, it sets the size of the background image that IтАЩve used for every actual image that will be scrolling*/

.widget_style li {
    height:126px;
    width:166px;
    list-style:none;
    margin:0;
    padding:0px 0px 0px 10px;
}

/*This here actually sets the size of the scrolling images */
.widget_style img {
	width:160px;
	height:120px;
	cursor:pointer;
	
	border:1px solid #333333;
	padding:2px;
	background-color:#333333;
}
.widget_style img:hover {
	background:#000000;
	border:1px solid #DDDDDD;
	

}