/*
 * simplyScroll 1.0.3 - a scroll-tastic jQuery plugin
 *
 * http://logicbox.net/jquery/simplyscroll
 * http://logicbox.net/blog/simplyscroll-jquery-plugin
 * http://plugins.jquery.com/project/simplyScroll
 *
 * Copyright (c) 2009 Will Kelly - http://logicbox.net
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * Last revised: 03/07/2009 21:13
 *
 */

/* 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; z-index: 2; } .simply-scroll-list { /* UL/OL/DIV - 
the element that simplyScroll is inited on */ position: absolute; top: 0; left: 
0; z-index: 1; 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.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 { background-position: 
0 -88px; } .simply-scroll-btn-right { right: 6px; bottom: 6px; background-position: 
10px -44px; } .simply-scroll-btn-right.disabled { background-position: 10px 0 
!important; } .simply-scroll-btn-right:hover { 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 { 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 { background-position: 
-10px -10px; } /* Custom class modifications - override classees .simply-scroll 
is default */ .simply-scroll { /* Customisable base class for style override DIV 
*/ width: 10px; height: 100px; margin-bottom: 1em; } .simply-scroll .simply-scroll-clip 
{ width: 428px; height: 100px; } .simply-scroll .simply-scroll-list {} .simply-scroll 
.simply-scroll-list li { float: left; width: 105px; 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 
{} /* 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 */ /* Flickr 
example Images created from a data source use simpler format i.e. 
<div><img/><img/> ... simply-scroll-btn-left { left: 6px; bottom: 6px; background-position: 
  0 -44px;</div>

<p>*/ .flickr { width: 775px; height: 100px; margin-bottom: 1.5em; } .flickr .simply-scroll-clip 
  { width: 775px; height: 100px; } .flickr .simply-scroll-list img { float: left; 
  border: none; display: block; } </p>