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

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 700px;
    height:365px;
	background: url("../../images/scroller-horizontal-divide.gif") no-repeat scroll center bottom transparent;
}

/*
   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 */
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:780px;
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:20px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}





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

/* prev, next, prevPage and nextPage buttons */
#middleOfContent #centralPart a.browse.prev {
    background:url(../../images/scroller-left-arr.gif) no-repeat;
    display:block;
    width:34px;
    height:55px;
    cursor:pointer;
    font-size:1px;
	margin-top: 126px;
}
 #middleOfContent #centralPart a.browse.next {
    background:url(../../images/scroller-right-arr.gif) no-repeat;
    display:block;
    width:34px;
    height:55px;
    cursor:pointer;
    font-size:1px;
	float:right;
	margin-top: 126px;
}
#middleOfContent #centralPart a.browse.next:hover, 
#middleOfContent #centralPart a.browse.prev:hover{opacity:0.6;}


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

/* position and dimensions of the navigator */
.navi {
	display:block;
	width:100%;
	text-align:center;
	clear:both;
	padding-top: 20px;
}
#middleOfContent #centralPart.eventsPage .navi a, #middleOfContent #centralPart.eventsPage .navi a:link, #middleOfContent #centralPart.eventsPage .navi a:visited {line-height: 1.7em; font-weight:400; color:#FFF; text-transform:uppercase; font-size: 0.8em;}
#middleOfContent #centralPart.eventsPage .navi a span, #middleOfContent #centralPart.eventsPage .navi a:link span, #middleOfContent #centralPart.eventsPage .navi a:visited span { letter-spacing:.08em;line-height: 1.3em; display:block;color:#fad6d7; text-transform:none; font-family: 'Leckerli One', cursive; font-size: 1.3em;}
#middleOfContent #centralPart.eventsPage .navi a span strong { font-size:1em;}
#middleOfContent #centralPart.eventsPage .navi a:hover, #middleOfContent #centralPart.eventsPage .navi a:hover:visited { text-decoration:none; background-color:#464646;}
#middleOfContent #centralPart.eventsPage .navi a.active span, #middleOfContent #centralPart.eventsPage .navi a.active:link span, #middleOfContent #centralPart.eventsPage .navi a.active:visited span { color:#FFF;}
/* items inside navigator */
#middleOfContent #centralPart.eventsPage .navi a {
	width:100px; height:95px; padding-top:5px; border:1px solid #fff; display:inline-block;
}
 
/* mouseover state */
#middleOfContent #centralPart.eventsPage .navi a:hover {
}
 
 
/* active state (current page state) */
#middleOfContent #centralPart.eventsPage .navi a.active {
	background-color:#7b6b6a; border:#fad6d7 1px solid;
}

.sliderArrowHolder { height:373px; float:left; width:65px;  background: url("../../images/scroller-verticle-divide.gif") no-repeat scroll right top transparent; display:block;}
.sliderArrowHolder.RightArr { background-position:left top;}
.scrollable .items div{ width:694px}
.sliderEventType {text-shadow: 2px 3px 1px rgba(20, 20, 19, 1);color:#fff; text-transform:uppercase; font-family:  'Emilys Candy', cursive; display:block; font-size:2.2em; width:100%; text-align:center; margin-top: 70px;}
.sliderEventDate{text-shadow: 2px 3px 1px rgba(20, 20, 19, 1);line-height: 1.4em;font-family: 'Leckerli One', cursive;display:block; color:#fad6d7; font-size:2.4em;width:100%; text-align:center;}
.sliderEventDay{text-shadow: 2px 3px 1px rgba(20, 20, 19, 1);line-height: 1em;color:#fff;text-transform:uppercase;font-family: 'Croissant One', cursive;display:block; font-size: 4.5em;width:100%; text-align:center;}
.sliderEventTitle{text-shadow: 2px 3px 1px rgba(20, 20, 19, 1);letter-spacing: 0.05em;color:#fff;font-family: 'Leckerli One', cursive;display:block; font-size: 2.2em;width:100%; text-align:center;}
.sliderEventTitle span {color:#fad6d7;}
.sliderEventTitle:before{margin-right: 12px;height: 31px;background: url("../../images/event-flur-left.gif") no-repeat scroll center center transparent; content: ""; display: inline-block; width:35px; transform: scale(.6);}
.sliderEventTitle:after{margin-left: 12px;height: 31px;background: url("../../images/event-flur-right.gif") no-repeat scroll center center transparent; content: ""; display: inline-block; width:35px; transform: scale(.6);}

.sliderEventDescription{color:#fff; margin-top:20px;font-family: 'Open Sans', sans-serif; font-weight:400; font-size:.8em; line-height: 1.4em; display:block;width:80%; text-align:center; margin-left:auto; margin-right:auto;}
#middleOfContent #centralPart.eventsPage .scrollable .items div a, #middleOfContent #centralPart.eventsPage .scrollable .items div a:link, #middleOfContent  #centralPart.eventsPage .scrollable .items div a:visited { color:#fad6d7;}
#middleOfContent #centralPart.eventsPage .scrollable .items div a:hover, #middleOfContent #centralPart.eventsPage .scrollable .items div a:hover:visited { color:#fad6d7; text-decoration:underline;}