/*
root element for the scrollable.  when scrolling occurs this
element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
  /*overflow:hidden;*/
  width: 981px;
  height: 330px;
}
.manufactured .scrollable{
  width: 760px;
}
/*.manufactured .scrollable img{
	margin: 0 20px 0 0;
}*/
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set width and height for the root element
and not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
}
 
/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items .block-scroll {
  float:left;
}

.next, .prev{
	display: block;
	width: 33px;
	height: 117px;
	background: url(../images/arrows.png);
	position: absolute;
	cursor: pointer;
}
.manufactured .next, .manufactured .prev{
  width: 17px;
  height: 63px;
  background: url(../images/arrows_all.png);
}
.next{
	top: 200px;
	right: -40px;
	background-position: -33px 0;
}
.manufactured .next{
  top: 0;
  right: 0;
  background-position: -18px -234px;
}
.manufactured .next:hover{
  background-position: -18px -297px;
}
.prev{
	top: 200px;
	left: -52px;
}
.manufactured .prev{
  top: 0;
  left: 0;
  background-position: 0px -234px;
}
.manufactured .prev:hover{
  background-position: 0px -297px;
}
/* position and dimensions of the navigator */
.navi {
    margin: 20px auto 0 auto;
    width: 72px;
    height: 20px;
}
 

/* items inside navigator */
.navi a {
    width: 15px;
    height: 15px;
    float:left;
    margin:3px;
    background: #bdc4ca;
    display: block;
    font-size: 1px;
    border-radius: 50%;
    cursor: pointer;
}
 
/* mouseover state */
.navi a:hover {
    background: #75c000;
}
 
/* active state (current page state) */
.navi a.active {
    background: #75c000;
}