/* @override http://bogivm:8080/static/widgets/css/wi_j_image_list.css */

.jImageListWidget {
	background:url(/static/widgets/images/scrollable/hintergrund3t.png) no-repeat;
}

.jImageList_plain {
    background:white;
}

/* @group Layouting */

.jImageListWidget {
	width: 585px;
	height: 135px;
	position:relative;
	z-index: 100;
	margin-left:-11px
}

.jImageListWidget .bogi_button_links{
	position: absolute;
	top: 52px;
	left: 12px;
}

.jImageListWidget .bogi_button_rechts{
	position: absolute;
	top: 56px;
	left: 527px;
}

.jImageListWidget .navi {
	position: absolute;
	top: 0px;
	left: 200px;
	margin-top: 0px;
}

.jImageList_short .navi {
	display:none;	
}


.jImageList_plain .navi {
    top:10px;
    
}

.scrollable_layout_wrapper {
	position: absolute;
	left: 55px;
	top: 22px;
}

/* @end */

div.jImageListWidget_scrollable {
    /* required settings */ 
      position:relative; 
      overflow:hidden; 
      width: 470px; 
      height:120px;
/*      border: 1px solid red;*/
}

.jImageList_plain .jImageListWidget_scrollable {
    border: 2px solid #069;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    height:90px;    
    background:#f4f4f4;
}

.jImageList_short .jImageListWidget_scrollable {
    border: 0px solid #069 !important;
    background:white !important;
}

/* 
    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.jImageListWidget_scrollable div.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. 
*/ 
div.jImageListWidget_scrollable div.items span { 
    float:left;
    display:block;
    margin:20px 7px;
} 

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


div.jImageListWidget .navi a {
/*    background: url(/static/widgets/images/scrollable/bogi_navigator_gelb_blau.png) no-repeat;*/
    display: block;
    float: left;
    font-size: 1px;
    height: 8px;
    width: 8px;
    margin: 2px;
    background: url(/static/images/sprites/bogi_sprites.png) no-repeat 0px -63px;
	cursor:pointer;
}

div.jImageListWidget .navi a:hover {
    background-position: 0px -71px;
}

div.jImageListWidget .navi a.active {
    background-position: 0px -79px;
}