/*
 * simplyScroll 2 - a scroll-tastic jQuery plugin
 *
 * http://logicbox.net/jquery/simplyscroll
 *
 * Copyright (c) 2009-2012 Will Kelly - http://logicbox.net
 *
 * Dual licensed under the MIT and GPL licenses.
 *
 * Last revised: 31/01/2012
 *
 */

/* Default/Master classes 

Example markup format (for horizontal scroller)
Note all DIVs are generated and should not be hard-coded

<div class="your-custom-class simply-scroll-container">
	<div class="simply-scroll-btn simply-scroll-btn-left"></div>
	<div class="simply-scroll-btn simply-scroll-btn-right"></div>
	<div class="simply-scroll-clip">
		<ul class="simply-scroll-list">
			<li>...</li>
			...
		</ul>
	</div>
</div>


*/
#uspCarousel
{
    position:relative;
    width:100%;
}
ul#scroller .item
{
    position:relative;
    width:330px;
    text-align:center; 
    color: #FFF;
    font-family: abril-titling, Sans-Serif;
    font-style: italic;
    font-weight: normal;
    font-size: 20px;
}
ul#scroller .itemImage
{
    position:relative;
    height:100px;
    display: inline-block;
    vertical-align: middle; 
}

section.bottomSliderSection .simply-scroll
{
    height: 350px;
    margin:0px;
}
section.bottomSliderSection .simply-scroll .simply-scroll-clip {
    height: 350px;
}
ul#bottomSlider.simply-scroll-list li {
    height: 350px;
    padding:0px;
}

.fadeBlokLinks
{
    position:absolute;
    top:0px;
    height:100%;
    background: -moz-linear-gradient(left,  rgba(135,195,207,0.75) 0%, rgba(135,195,207,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(135,195,207,0.75)), color-stop(100%,rgba(135,195,207,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(135,195,207,0.75) 0%,rgba(135,195,207,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(135,195,207,0.75) 0%,rgba(135,195,207,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(135,195,207,0.75) 0%,rgba(135,195,207,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(135,195,207,0.75) 0%,rgba(135,195,207,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf87c3cf', endColorstr='#0087c3cf',GradientType=1 ); /* IE6-9 */
    z-index:10;
}
.fadeBlokRechts
{
    position:absolute;
    top:0px;
    right:0px;
    height:100%;
    background: -moz-linear-gradient(left,  rgba(135,195,207,0) 0%, rgba(135,195,207,0.75) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(135,195,207,0)), color-stop(100%,rgba(135,195,207,0.75))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(135,195,207,0) 0%,rgba(135,195,207,0.75) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(135,195,207,0) 0%,rgba(135,195,207,0.75) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(135,195,207,0) 0%,rgba(135,195,207,0.75) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(135,195,207,0) 0%,rgba(135,195,207,0.75) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0087c3cf', endColorstr='#bf87c3cf',GradientType=1 ); /* IE6-9 */
    z-index:10;
}
.simply-scroll-container { /* Container DIV - automatically generated */
	position: relative;
}

	.simply-scroll-clip { /* Clip DIV - automatically generated */
		position: relative;
		overflow: hidden;
	}

	.simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
		.simply-scroll-list li {
			padding: 0;
			margin: 0;
			list-style: none;
		}
	
		.simply-scroll-list li img {
			border: none;
			height: 75px;
		}
	
	.simply-scroll-btn {
		position: absolute;
		background-image: url(buttons.png);
		width: 42px;
		height: 44px;
		z-index:3;
		cursor: pointer;
	}
	
	.simply-scroll-btn-left {
		left: 6px;
		bottom: 6px;
		background-position: 0 -44px;
	}
	.simply-scroll-btn-left.disabled {
		background-position: 0 0 !important;
	}
	.simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
		background-position: 0 -88px;
	}
	
	.simply-scroll-btn-right {
		right: 6px;
		bottom: 6px;
		background-position: -84px -44px;
	}
	.simply-scroll-btn-right.disabled {
		background-position: -84px 0 !important;
	}
	.simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus {
		background-position: -84px -88px;
	}
	
	.simply-scroll-btn-up {
		right: 6px;
		top: 6px;
		background-position: -126px -44px;
	}
	.simply-scroll-btn-up.disabled {
		background-position: -126px 0 !important;
	}
	.simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus {
		background-position: -126px -88px;
	}
	
	.simply-scroll-btn-down {
		right: 6px;
		bottom: 6px;
		background-position: -42px -44px;
	}
	.simply-scroll-btn-down.disabled {
		background-position: -42px 0 !important;
	}
	.simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus {
		background-position: -42px -88px;
	}
	
	.simply-scroll-btn-pause {
		right: 6px;
		bottom: 6px;
		background-position: -168px -44px;
	}
	.simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus {
		background-position: -168px -88px;
	}
	
	.simply-scroll-btn-pause.active {
		background-position: -84px -44px;
	}
	.simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus {
		background-position: -84px -88px;
	}
.simply-bottomscroll-container { /* Container DIV - automatically generated */
	position: relative;
}

	.simply-bottomscroll-clip { /* Clip DIV - automatically generated */
		position: relative;
		overflow: hidden;
	}

	.simply-bottomscroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
		.simply-bottomscroll-list li {
			padding: 0;
			margin: 0;
			list-style: none;
		}
	
		.simply-bottomscroll-list li img {
			border: none;
		}
	
	.simply-bottomscroll-btn {
		position: absolute;
		background-image: url(buttons.png);
		width: 42px;
		height: 44px;
		z-index:3;
		cursor: pointer;
	}
	
	.simply-bottomscroll-btn-left {
		left: 6px;
		bottom: 6px;
		background-position: 0 -44px;
	}
	.simply-bottomscroll-btn-left.disabled {
		background-position: 0 0 !important;
	}
	.simply-bottomscroll-btn-left:hover, .simply-bottomscroll-btn-left:focus {
		background-position: 0 -88px;
	}
	
	.simply-bottomscroll-btn-right {
		right: 6px;
		bottom: 6px;
		background-position: -84px -44px;
	}
	.simply-bottomscroll-btn-right.disabled {
		background-position: -84px 0 !important;
	}
	.simply-bottomscroll-btn-right:hover, .simply-bottomscroll-btn-right:focus {
		background-position: -84px -88px;
	}
	
	.simply-bottomscroll-btn-up {
		right: 6px;
		top: 6px;
		background-position: -126px -44px;
	}
	.simply-bottomscroll-btn-up.disabled {
		background-position: -126px 0 !important;
	}
	.simply-bottomscroll-btn-up:hover, .simply-bottomscroll-btn-up:focus {
		background-position: -126px -88px;
	}
	
	.simply-bottomscroll-btn-down {
		right: 6px;
		bottom: 6px;
		background-position: -42px -44px;
	}
	.simply-bottomscroll-btn-down.disabled {
		background-position: -42px 0 !important;
	}
	.simply-bottomscroll-btn-down:hover, .simply-bottomscroll-btn-down:focus {
		background-position: -42px -88px;
	}
	
	.simply-bottomscroll-btn-pause {
		right: 6px;
		bottom: 6px;
		background-position: -168px -44px;
	}
	.simply-bottomscroll-btn-pause:hover, .simply-bottomscroll-btn-pause:focus {
		background-position: -168px -88px;
	}
	
	.simply-bottomscroll-btn-pause.active {
		background-position: -84px -44px;
	}
	.simply-bottomscroll-btn-pause.active:hover, .simply-bottomscroll-btn-pause.active:focus {
		background-position: -84px -88px;
	}
/* Custom class modifications - override classees

.simply-scroll is default

*/

.simply-scroll { /* Customisable base class for style override DIV */
	width: 100%;
	height: 100px;
	margin-bottom: 1em;
}

	.simply-scroll .simply-scroll-clip {
		width: 100%;
		height: 100px;
	}
	
		.simply-scroll .simply-scroll-list {}
		
		.simply-scroll .simply-scroll-list li {
			float: left;
			padding: 0 20px;
			height: 100px;
		}
		.simply-scroll .simply-scroll-list li img {}
	
	.simply-scroll .simply-scroll-btn {}
	
	.simply-scroll .simply-scroll-btn-left {}
	.simply-scroll .simply-scroll-btn-left.disabled {}
	.simply-scroll .simply-scroll-btn-left:hover {}
	
	.simply-scroll .simply-scroll-btn-right {}
	.simply-scroll .simply-scroll-btn-right.disabled {}
	.simply-scroll .simply-scroll-btn-right:hover {}
	
	.simply-scroll .simply-scroll-btn-up {}
	.simply-scroll .simply-scroll-btn-up.disabled {}
	.simply-scroll .simply-scroll-btn-up:hover {}
	
	.simply-scroll .simply-scroll-btn-down {}
	.simply-scroll .simply-scroll-btn-down.disabled {}
	.simply-scroll .simply-scroll-btn-down:hover {}
	
.simply-bottomscroll { /* Customisable base class for style override DIV */
	width: 100%;
	height: 350px;
	margin-bottom: 0;
}

	.simply-bottomscroll .simply-bottomscroll-clip {
		width: 100%;
		height: 350px;
	}
	
		.simply-bottomscroll .simply-bottomscroll-list {}
		
		.simply-bottomscroll .simply-bottomscroll-list li {
			float: left;
			padding: 0;
			height: 350px;
		}
		.simply-bottomscroll .simply-bottomscroll-list li img {}
	
	.simply-bottomscroll .simply-bottomscroll-btn {}
	
	.simply-bottomscroll .simply-bottomscroll-btn-left {}
	.simply-bottomscroll .simply-bottomscroll-btn-left.disabled {}
	.simply-bottomscroll .simply-bottomscroll-btn-left:hover {}
	
	.simply-bottomscroll .simply-bottomscroll-btn-right {}
	.simply-bottomscroll .simply-bottomscroll-btn-right.disabled {}
	.simply-bottomscroll .simply-bottomscroll-btn-right:hover {}
	
	.simply-bottomscroll .simply-bottomscroll-btn-up {}
	.simply-bottomscroll .simply-bottomscroll-btn-up.disabled {}
	.simply-bottomscroll .simply-bottomscroll-btn-up:hover {}
	
	.simply-bottomscroll .simply-bottomscroll-btn-down {}
	.simply-bottomscroll .simply-bottomscroll-btn-down.disabled {}
	.simply-bottomscroll .simply-bottomscroll-btn-down:hover {}

/* Vertical scroller example */

.vert { /* wider than clip to position buttons to side */
	width: 340px;
	height: 400px;
	margin-bottom: 1.5em;
}

	.vert .simply-scroll-clip {
		width: 290px;
		height: 400px;
	}
	
		.vert .simply-scroll-list {}
		
		.vert .simply-scroll-list li {
			width: 290px;
			height: 200px;
		}
		.vert .simply-scroll-list li img {}
	
	.vert .simply-scroll-btn {}

	.vert .simply-scroll-btn-up { /* modified btn pos */
		right: 0;
		top: 0;
	}
	.vert .simply-scroll-btn-up.disabled {}
	.vert .simply-scroll-btn-up:hover {}
	
	.vert .simply-scroll-btn-down { /* modified btn pos */
		right: 0;
		top: 52px;
	}
	.vert .simply-scroll-btn-down.disabled {}
	.vert .simply-scroll-btn-down:hover {}
	
	/* NOTE left-right classes wouldn't be needed on vertical scroller */