/* 
    Document   : slideshow
    Created on : 03.02.2010, 11:26:49
    Author     : workaccount
    Description:
        Purpose of the stylesheet follows.
*/


/*******************************************************************
****  Slideshow default styles
*******************************************************************/

div.slideshow {
	background: none repeat scroll 0 0 #FFFFFF;
   margin: 0 0 20px;
    position: relative;
    width: 580px;
}

/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
div.slideshow div.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 575px;
    height: 250px;
}

/*
    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.slideshow div.scrollable div.items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    margin-top: 0px;
	background: none repeat scroll 0 0 #FFFFFF;
}

div.slideshow div.scrollable div.items img {
    /* this cannot be too large */
    /*width:284px;*/
    padding: 1px;
    border: 1px solid #d2dfe8;
	float: left;
    margin-right: 10px;
}

/*
    a single item. must be floated in horizontal scrolling.
    typically, this element is the one that *you* will style
    the most.
*/
div.slideshow div.scrollable div.items div {
    float:left;
	
}

div.slideshow div.scrollable div.items div.news-list-item  p {
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 7px;
	float: left;
	width: 260px;
	padding:0;
}
div.slideshow div.scrollable div.items div.news-list-item  div.news-cat {
	float: left;
	width: 154px;
}
div.slideshow div.scrollable div.items div.news-list-item  h2 {
	float: left;
	min-height: 15px;
	width: 141px;
	padding:0;
}

/* you may want to setup some decorations to active the item */
div.slideshow div.items div.active {
    /*border:1px inset #ccc;*/
    background-color:#fff;
}


div.slideshow div.scrollable div.items div.item {
    background: none repeat scroll 0 0 #FFFFFF;
    margin-left: 10px;
    margin-right: 6px;
    width: 565px;
}

div.slideshow div.scrollable div.items div.item p {
    line-height: 14px;
    color: #41464a;
	margin-bottom: 0px !important;
}

div.slideshow div.scrollable div.items div.item_image {
    height: 215px;
    /*border: 1px solid #c8c8c8;*/
    overflow: hidden;
    position: relative;
    width: 254px;
    margin-bottom: 10px;
    margin-right: 10px;
    float: left;
}

div.slideshow div.scrollable div.items div.item_image img {
    position: relative;
    top: 0px;
    left: 0px;
}

div.slideshow div.scrollable div.items div.shadow_rightcol {
    margin-bottom: 0;
}


/*******************************************************************
****  Teaser Shop
*******************************************************************/

div.slideshow.shop,
div.slideshow.shop div.scrollable,
div.slideshow.shop div.scrollable div.items div.item {
    width: 345px;
}

div.slideshow.shop div.scrollable div.items{
    height: 180px;
}

div.slideshow.shop div.scrollable div.items div.item{
    line-height: 18px;
    padding-left: 13px;
    padding-right: 12px;
    padding-top: 10px;
    width: 300px;
}

div.slideshow.shop div.scrollable div.items div.item_image{
    width: 110px;
    margin-right: 15px;
    height: 160px;
}

div.slideshow.shop .navi{
    top: 190px;
}

div.slideshow.shop .item-descr{
    display: block;
}


/*******************************************************************
****  Slideshow Navigation
*******************************************************************/

/* position and dimensions of the navigator */
div.slideshow .navi {
    margin-left: 0px;
/*    width: 200px;*/
    width: 100%;
    height: 10px;
    top: 215px;
    position: absolute;
    text-align: center;
/*    display: none;*/
}


/* items inside navigator */
div.slideshow .navi a {
    width: 10px;
    height: 10px;
/*    float: left;*/
    margin: 3px;
    background: url(../img/layout/navigator_neu.png) 0 -10px no-repeat;
    display: inline-block;
    font-size: 1px;
    cursor: pointer;
}

/* mouseover state */
div.slideshow .navi a:hover {
    background-position: 0 -20px;
}

/* active state (current page state) */
div.slideshow .navi a.active {
    background-position: 0 0;
}


/*******************************************************************
****  Prev-/Next- Buttons
*******************************************************************/


div.slideshow a.browse{
    cursor: pointer;
    display: block;
    font-size: 1px;
    height: 25px;
    width: 15px;
    position: absolute;
    top: 45%;
    z-index: 1000;
    background: url(../img/layout/arrows_neu.png) no-repeat 0 0;
}

div.slideshow a.left{
    /* left: -25px; */
	margin-top:100px;
	margin-left:10px
}

div.slideshow a.right{
  background-position: -15px 0;
    margin-top: 100px;
    right: 10px;
}

div.slideshow a.left:hover{
}


div.slideshow a.right:hover{
}


/*******************************************************************
****  Slideshow Mediathek
*******************************************************************/


div.slideshow.mediathek,
div.slideshow.mediathek div.scrollable {
    width: 580px;
	background-color: #E4E8EB;
}
div.slideshow.mediathek div.scrollable div.items div.item {
    width: 135px;
}


div.slideshow.mediathek div.scrollable,
div.slideshow.mediathek div.scrollable div.items{
    height: 180px;
	 background: none repeat scroll 0 0 #FFFFFF;
}

div.slideshow.mediathek div.scrollable div.items div.item{
    line-height: 18px;
}

div.slideshow.mediathek div.scrollable div.items div.item_image{
    width: 120px;
    margin-right: 15px;
}

div.slideshow.mediathek div.scrollable div.items.video-teaser div.item_image{
    width: 55px;
}

div.slideshow.mediathek div.scrollable div.items img{
    height: 75px;
    margin-right: 10px;
}

div.slideshow.mediathek div.scrollable div.items.video-teaser img{
    height: auto;
    margin-right: 10px;
}

div.slideshow.mediathek .navi{
    top: 185px;
}

div.slideshow.mediathek .item-descr{
    display: block;
}

div.c130r a .prev.browse.left{
	margin-top:90px;
}

div.c130r a .next.browse.right{
	margin-top:90px;
}

div.c130rdiv div.slideshow div.scrollable{
	height: 215px;
}