/* Begin Twirlie Mandatory Styles */

#slider {
	width: 500px; /* The width of the display area */
	height: 200px; /* The height of the display area */
	overflow: hidden; /* So that slides are hidden when they go out of view */
	position: relative; /* So that the slides move relative to the display area */
}

#slider ul {
	height: 200px; /* Same as #slider */
	width: 10000em; /* So that the number of slides is unlimited */
	list-style: none; /* To get rid of those ugly default bullets */
	position: absolute; /* So that the slides are positioned absolute, relative to the display area */
	left: 0px; /* Starting position, 0px from the left */
}

#slider ul li {
	width: 500px; /* Same as #slider, but for each individual slide */
	height: 200px; /* Same as #slider, but for each individual slide */
	float: left; /* To arrange the items side by side */
	display: block; /* <li> is usually an inline element; this changes that */
}

.mwidgets,
#main-widgets .module {
	width: 270px; /* The width of the display area */
	height: 250px; /* The height of the display area */
	overflow: hidden; /* So that slides are hidden when they go out of view */
	position: relative; /* So that the slides move relative to the display area */
}

.mwidgets ul {
	height: 250px; /* Same as #slider */
	width: 10000em; /* So that the number of slides is unlimited */
	list-style: none; /* To get rid of those ugly default bullets */
	position: absolute; /* So that the slides are positioned absolute, relative to the display area */
	left: 0px; /* Starting position, 0px from the left */
}

.mwidgets .list ul li.slider {
	width: 250px; /* Same as #slider, but for each individual slide */
	height: 250px; /* Same as #slider, but for each individual slide */
	float: left; /* To arrange the items side by side */
	display: block; /* <li> is usually an inline element; this changes that */
        margin: 0px;
        padding: 0px 10px;
        background: none;
}

.mwidgets .list ul li.slider a.more-link {
        display: block;
        width: 100%;
	text-align: center;
}

.prev, .next {
	position: absolute;
	top: 125px;
	display: block;
	/*width: 18px;
	height: 28px;*/
        width: 12px;
        height: 18px;
}

.prev:hover, .next:hover { background-position: bottom; }

.prev {
	background: url('images/previous.gif') no-repeat;
	left: 0px;
}
.next {
	background: url('images/next.gif') no-repeat;
	right: 0px;
}