/* * 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(../images/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: 100%;	height: 100px;}	.simply-scroll .simply-scroll-clip {	width: 100%;	height: 100px;	}			.simply-scroll .simply-scroll-list {}				.simply-scroll .simply-scroll-list li {			float: left;			width: 200px;			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 */		/*MOBILE--------------------------------------------------------------------------------------*/@media only screen and (max-width: 480px) {.simply-scroll { /* Customisable base class for style override DIV */	width: 100%;	height: 50px;}	.simply-scroll .simply-scroll-clip {	width: 100%;	height: 50px;	}				.simply-scroll .simply-scroll-list li {			float: left;			width: 100px;			height: 50px;		}		.simply-scroll .simply-scroll-list li img		{			width: 100%;		}}