/* EVENT CAL BOX */
#event-slider-container {margin: 0px 0 0px; width: 100%;}
#event-slider-scroller {margin:0 auto; width: 600px; height:240px; position: relative;}

#event-slider .scrollable {

    /* required settings */
    position:relative;
    width: 600px;
    height:240px;
	overflow: hidden;  
}


#event-slider.scrollable .items {
    /* this cannot be too large */
	/* DANIEL 07/12/12: 
		The above comment is generated from the http://jquerytools.org/ download facility. For some reason it doesn't want the width to be too large but this can cause problems if there are too many Large (full width) slides */
    width:/*500*/ 50000em;
    position:absolute;
    clear:both;
}

#event-slider.items div.slide1 {
    float:left;
    width:600px;
}


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

/* prev, next, prevPage and nextPage buttons */
#event-slider a.browse {
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
	position: absolute;
	z-index:100;
	top:5px;
}

#event-slider a.right {
    background: url("/img/_cms/next-icon.png") no-repeat scroll left top transparent;
    clear: right;
    height: 30px;
    margin: 0;
    padding: 0;
    right:0px;
    width: 30px;
	top:100px;

}

/* left */
#event-slider a.left {
    background: url("/img/_cms/prev-icon.png") no-repeat scroll right top transparent;
    clear: right;
    height: 30px;
    left:0px;
    margin: 0;
    padding: 0;
    width: 30px;
	top:100px;

}

#event-slider a:hover {opacity: 0.8}