/*

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





*/



.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("buttons.15628ce59157.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 */

	

	
	margin-bottom: 1em;

}



	.simply-scroll .simply-scroll-clip {



	}

	

		.simply-scroll .simply-scroll-list {}

		

		.simply-scroll .simply-scroll-list li {

			float: left;

			width: 290px;

			height: 50px;

		}

		.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 {}

	





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