/* GALLERY */
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.slider {
  position:relative;
	
  width: 932px;
  height: 242px;
  
  margin: 0 auto;
  margin-bottom: 50px;

  background: url('../images/layout/slider_back.png') no-repeat;  
}

.scrollable {
  /* required settings */
  position:absolute;
  top: 26px;
  left: 66px;
	
  width: 800px;
  height: 190px;
	
  overflow:hidden;
  
  margin: 0 auto;	
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  position:absolute;
  
  width:20000em;
  
  clear:both;
}

/* single scrollable item */
div.linkitem{ 
  position: relative;
  
  width: 800px;
  height: 190px;
  
  display: block;
  
  float:left;
}

div.linkitem img {
  width: 800px;
  height: 190px;
}

div.linkitem .shadow {  
  width: 800px;
  height: 190px;
  
  position: absolute;
  left: 0px;
  top: 0px;
  
  display:block;
  
  background: url('../images/layout/slider_innenschatten.png') no-repeat;
}

div.linkitem .infotext {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 270px;
  height: 150px;
  
  padding: 20px;
  padding-right: 30px;
  
  background: url('../images/layout/slider_textback.png');
}

div.linkitem .infotext a {
  font-weight: bold;
  text-align: right;
  display: block;
  margin-top: 9px;
}

div.linkitem .infotext h1 {
  font-size: 18px;
  line-height: 18px;
}

/* active item */
.scrollable .active {
    position:relative;

	border:0px;
	
	z-index:9999;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
  position: absolute;
  top: 87px;
  
  display:block;
	
  width:68px;
  height:68px;
	
  background: url('../images/layout/slider_buttons.png') no-repeat; 
	
  cursor:pointer;	
  font-size:1px;
  text-indent: -5000px;
}

a.right { 
  right: 22px;

  background-position: top left; 
}
a.right:hover 		{ background-position: 0px -68px; }
a.right:active 	{ background-position: 0px -136px; } 


/* left */

a.left { 
  left: 22px;
  background-position: top right; 
} 
a.left:hover  		{ background-position: -68px -68px; }
a.left:active  	{ background-position: -68px -136px; }