/*
 * simplyscroll 2 - a scroll-tastic jquery plugin
 *
 *
 * dual licensed under the mit (mit-license.txt)
 * and gpl (gpl-license.txt) 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>


*/

.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;
	display: block;
}
	
.simply-scroll-btn {
	position: absolute;
	background-image: url(/uploads/image/sjpscroll/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;
}

/* custom class modifications - override classees

.simply-scroll is default

*/

.simply-scroll { /* customisable base class for style override div */
	width: 721px;
	height: 130px;
	margin-bottom: 1em;
}

.simply-scroll .simply-scroll-clip {
	width: 723px;
	height: 125px;
}
	
.simply-scroll .simply-scroll-list {
width: 721px;
height: 130px;
margin-bottom: 1em;
}
		
.simply-scroll .simply-scroll-list li {
	float: left;
	width: 175px;
	height: 125px;
}
.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 {}
	
/*  override end  */

/* 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 */