<div class="header">
	<h1>Wall Slider</h1>
	<div id="" class="">
		<div id="slider" class="slider"></div>
	</div>
</div>
<div class="wall">
	<div id="ftl_container" class="ftl_container">
		<ul id="ftl_photos" class="ftl_photos">
			<li><a href="#1"><img src="images/1.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#2"><img src="images/2.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#3"><img src="images/3.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#4"><img src="images/4.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#5"><img src="images/5.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#6"><img src="images/6.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#7"><img src="images/7.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#8"><img src="images/8.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#1"><img src="images/1.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#2"><img src="images/2.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#3"><img src="images/3.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#4"><img src="images/4.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#5"><img src="images/5.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#6"><img src="images/6.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#7"><img src="images/7.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#8"><img src="images/8.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#1"><img src="images/1.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#2"><img src="images/2.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#3"><img src="images/3.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#4"><img src="images/4.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#5"><img src="images/5.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#6"><img src="images/6.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#7"><img src="images/7.jpg" alt="Free Time Learning"/></a></li>
			<li><a href="#8"><img src="images/8.jpg" alt="Free Time Learning"/></a></li>
		</ul>
	</div>
</div>

<div class="footer">
	<div class="thumbnailSlider" id="thumbnailSlider">
		<ul class="ts_container">
			<li><a href="#1">Image 1</a></li>
			<li><a href="#2">Image 2</a></li>
			<li><a href="#3">Image 3</a></li>
			<li><a href="#4">Image 4</a></li>
			<li><a href="#5">Image 5</a></li>
			<li><a href="#6">Image 6</a></li>
			<li><a href="#7">Image 7</a></li>
			<li><a href="#8">Image 8</a></li>
			<li><a href="#1">Image 1</a></li>
			<li><a href="#2">Image 2</a></li>
			<li><a href="#3">Image 3</a></li>
			<li><a href="#4">Image 4</a></li>
			<li><a href="#5">Image 5</a></li>
			<li><a href="#6">Image 6</a></li>
			<li><a href="#7">Image 7</a></li>
			<li><a href="#8">Image 8</a></li>
			<li><a href="#1">Image 1</a></li>
			<li><a href="#2">Image 2</a></li>
			<li><a href="#3">Image 3</a></li>
			<li><a href="#4">Image 4</a></li>
			<li><a href="#5">Image 5</a></li>
			<li><a href="#6">Image 6</a></li>
			<li><a href="#7">Image 7</a></li>
			<li><a href="#8">Image 8</a></li>
			<li class="ts_thumbnails">
				<div class="ts_preview_wrapper">
					<ul class="ts_preview">
						<li><img src="images/thumbs/1.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/2.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/3.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/4.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/5.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/6.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/7.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/8.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/1.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/2.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/3.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/4.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/5.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/6.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/7.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/8.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/1.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/2.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/3.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/4.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/5.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/6.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/7.jpg" alt="Free Time Learning" /></li>
						<li><img src="images/thumbs/8.jpg" alt="Free Time Learning" /></li>
					</ul>
				</div>
				<span></span>
			</li>
		</ul>
	</div>
</div>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery.ui.theme.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery.ui.core.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery.ui.slider.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/sliders/slider-5/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/sliders/slider-5/js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="http://www.freetimelearning.com/plugins/sliders/slider-5/js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>

body{
	background:#E2E2E2;
	font-family:Arial, sans-serif;
	font-size:11px;
	color: #fff;
}
*{ margin:0px;}
a{
	text-decoration:none;
}
.clearfix{clear:both}
.ftl{font-size:16px;padding:50px 0 20px;margin:0 auto;font-style:italic;text-align:center;}
.ftl a{color:#09C;text-decoration:none !important;}
.ftl a:hover{color:#999}
.header, .footer{
	width:100%;
	background:#000;
	height:50px;
	position:relative;
	line-height:50px;
	-moz-box-shadow:0px -2px 10px #000 inset;
	-webkit-box-shadow:0px -2px 10px #000 inset;
	box-shadow:0px -2px 10px #000 inset;
}
.header{
	border-bottom:1px solid #CFA467;
	z-index:9999;
	margin-bottom:30px;
}
.footer{
	border-top:1px solid #CFA467;
}
.left{
	float:left;
}
.right{
	float:right;
}
a.back{
	color:#ddd;
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	margin:0px 10px;
	text-transform:uppercase;
	letter-spacing:1px;
}
a.back:hover{
	color:#fff;
}
.header h1{
	float:left;
	font-weight:normal;
	margin:0px 10px;
	color:#fff;
	text-shadow:1px 1px 1px #000;
}
.header a.reference{
	text-decoration:none;
	font-size:14px;
	font-weight:bold;
	line-height:50px;
	color:#a0a0a0;
	padding-right:15px;
	float:right;
	text-shadow:1px 1px 1px #000;
}
.header a.reference:hover{
	color:#fff;
}
.wall{
	-webkit-perspective: 350;
	-webkit-transform-style:flat;
}
.turnLeft {
	-webkit-transition: -webkit-transform 1s;
	-webkit-transform: rotateY(20deg);
}
.turnRight {
	-webkit-transition: -webkit-transform 1s;
	-webkit-transform: rotateY(-20deg);
}
.flat {
	-webkit-transition: -webkit-transform 1s;
	-webkit-transform: rotateY( 0deg );
}
.ftl_container{
	width:100%;
	position:relative;
	height:412px;
}
ul.ftl_photos{
	position:absolute;
	top:0;
	left:0;
	height:412px;
	width:12188px; /*This is set dynamically*/
	list-style-type:none;
}
ul.ftl_photos li{
	float:left;
	position:relative;
	margin-right:7px;
}
ul.ftl_photos li a{
	display:block;
	border:6px solid #fff;
	position:relative;
	-moz-box-shadow:1px 1px 7px #000;
	-webkit-box-shadow:1px 1px 7px #000;
	box-shadow:1px 1px 7px #000;
}
ul.ftl_photos li a span{
	background:#423B30;
	opacity:0.6;
	position:absolute;
	padding:20px;
	font-size:12px;
	text-shadow:1px 1px 1px #000;
	top:20px;
	right:0px;
	color:#fff;
	-moz-box-shadow:1px 0px 2px #000 inset;
	-webkit-box-shadow:1px 0px 2px #000 inset;
	box-shadow:1px 0px 2px #000 inset;
}
ul.ftl_photos li img{
	display:block;
	border:none;
}
.footer{
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	-moz-box-shadow:0px 2px 10px #000 inset;
	-webkit-box-shadow:0px 2px 10px #000 inset;
	box-shadow:0px 2px 10px #000 inset;
}
.ftl_scrollWrapper{
	position:absolute;
	top:12px;
	left:50%;
	width:300px;
	margin-left:-175px;
	padding:10px 15px;
	height:4px;
	background:#111;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
.ui-state-default,
.ui-widget-content
.ui-state-default,
.ui-widget-header
.ui-state-default {
	background:#a0a0a0;
	cursor:pointer;
    border:1px solid #000;
    color: #1C94C4;
    font-weight: bold;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	margin-top:-4px;
}
.ui-slider-horizontal {
	height:2px;
	background:#555;
	border:1px solid #000;
}

ul.ts_container{
	list-style:none;
	margin:0;
	padding:0;
	width:476px;/*dot width times number of dots*/
	position:absolute;
	height:17px;
	top:20px;
	left:50%;
	margin-left:-238px;
}
ul.ts_container li{
	float:left;
}
ul.ts_container li a{
	display:block;
	text-indent:-9000px;
	width:11px;
	height:11px;
	outline:none;
	padding:0px 3px;
	background:transparent url(../images/sliderIcons/dot.png) no-repeat top center;
}
ul.ts_container li a:hover,
ul.ts_container li.selected a{
	background-position:50% -11px;
}
ul.ts_container li.ts_thumbnails{
	display:none;
	position:absolute;
}
ul.ts_container li.ts_thumbnails span{
	background:transparent url(../images/sliderIcons/triangle.png) no-repeat top center;
	width:15px;
	height:6px;
	position:absolute;
}
.ts_preview_wrapper{
	border:5px solid #fff;
	overflow:hidden;
	position:relative;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	box-shadow:0px 0px 5px #999;
}
ul.ts_preview{
	position:absolute;
	left:0px;
	top:0px;
	margin:0;
	padding:0;
	list-style-type:none;
}
ul.ts_preview li{
	float:left;
}
ul.ts_preview li img{
	display:block;
}