/*
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:relative;
    overflow:hidden; 
    width: 617px; 
    max-height:178px;
		height:180px;
		border-top:1px solid black;
		border-bottom:1px solid black;
} 
 
/* 
    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 width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:relative;
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	/*background:url(../img/scrollable/arrow/hori_large.png) no-repeat;*/
	display:block;
	width:20px;
	height:180px;
	float:left;
	margin:0;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0; clear:right; left: -1px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	/*background:url(../img/scrollable/arrow/vert_large.png) no-repeat; */
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

.indexRedContainer{
	position:relative; 
	height:180px;
	max-height:178px; 
	width:260px; 
	font-family:Verdana, Geneva, sans-serif; 
	color:#333; 
	font-size:10px; 
	border-left:1px #EEE solid; 
	float:left;
}

.indexRedContainer a{
	font-family:Verdana, Geneva, sans-serif; 
	font-size:10px;
}

.indexRedContainerImg{
	position:absolute;
	height:100px;
	border:0;
}

.indexRedContainerImg img{
	border:0;
}

.indexRedContainerImgTitle{
	width: 260px;
	max-width:250px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px; font-weight:bold;
	padding: 5px 5px 0 5px;
	max-height:35px;
	height:38px;
	color:#FFFFFF;
	border-top: 1px #CCC solid;
	border-bottom:1px #CCC solid;
	background-image:url(../00_images/redTitel/blackTransparent.png);
	position:relative;
	top:-40px;
	z-index:10;
}

.indexRedContainerText{
	position:absolute;
	top:98px; 
	padding:5px;
	text-align:justify; 
	font-size:10px;
	line-height:12px;
}

.abdeckerLeft{
	background:url(../00_images/redTitel/abdeckerLeft.png) no-repeat top left; 
	width:50px; 
	height:180px; 
	left:20px;
	position:absolute;
	z-index:12;
}

.abdeckerRight{
	background:url(../00_images/redTitel/abdeckerRight.png) no-repeat top right; 
	width:50px; 
	height:180px; 
	position:absolute; 
	left:587px; 
	z-index:12;
}

div#artikelSide{
	background-color:#FFF;
	position:relative;
	width:130px; 
	padding:8px; 
	border:1px solid #CCC;
	margin-right:10px;
}

div#artikelSide div.artikel{
	background-color:#EEE;
	border:1px solid #CCC;
}

div#artikelSide a{
	font-size:10px;
}
	
div#artikelSide div.title{
	max-width:114px; 
	width:130px; 
	font-size:10px; 
	padding-top:3px; 
	height:auto;
	text-align:left;
}

div#artikelSide div.artikelPic img{
	border:0;
	width:128px;
}

div#artikelSide div.subtitle{
	font-size:10px;
	text-align:justify; 
	padding:3px 3px 0 3px; 
	line-height:11px; 
	width:130px; 
	max-width:124px;
}

div.weitereArtikel{
	position:absolute;
	background-color:#CCC; 
	width:148px; 
	padding:5px 0 5px 0; 
	text-align:center;
	left:-1px;
}

div#artikelSide div.link{
	padding-top:3px;
	height:15px;
	text-align:left;
}


div#reclaRight{
	top:-10px; 
	position:relative;
	float:left;
}