<!DOCTYPE html>
<html>
	<head>
		<title>oc.featurePanel - Pure HTML/CSS Feature Panel | Examples</title>
		<link href="main.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<h2>Controls within Image (Works on IE8/9, Google Chrome, Firefox 3.x+, Safari 4+):</h2>
		<div id="featurePanel1" class="oc-feature-panel">
			<a href="#1" title="1">
				<div class="feature-content" style="background-color:red;">
					<div class="feature-info">
						some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text 
					</div>
				</div>
				<span class="feature-control" style="left:350px;">1</span>
			</a>
			<a href="#2" title="2">
				<div class="feature-content" style="background-color:brown;">
					<div class="feature-info">
						some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text 
					</div>
				</div>
				<span class="feature-control" style="left:400px;">2</span>
			</a>
			<a href="#3" title="3">
				<div class="feature-content" style="background-color:green;">
					<div class="feature-info">
						some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text
					</div>
				</div>
				<span class="feature-control" style="left:450px;">3</span>
			</a>
			<a href="#4" title="4">
				<div class="feature-content" style="background-color:yellow;">
					<div class="feature-info">
						some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text
					</div>
				</div>
				<span class="feature-control" style="left:500px;">4</span>
			</a>
			<a href="#5" title="5">
				<div class="feature-content" style="background-color:orange;">
					<div class="feature-info">
						some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text 
					</div>
				</div>
				<span class="feature-control" style="left:550px;">5</span>
			</a>
		</div>
		<h2>Controls beside Image (Works on IE6/7/8/9, Google Chrome, Firefox 3.x+, Safari 4+):</h2>
		<div id="featurePanel2" class="oc-feature-panel-v2">
			<a href="#1" title="1">
				<div class="feature-content" style="background-color:red;display:block;">
					<div class="feature-info">
						some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text some info on red coloured text 
					</div>
				</div>
				<span class="feature-control" style="top:0px;">1</span>
			</a>
			<a href="#2" title="2">
				<div class="feature-content" style="background-color:brown;">
					<div class="feature-info">
						some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text some info on brown coloured text 
					</div>
				</div>
				<span class="feature-control" style="top:80px;">2</span>
			</a>
			<a href="#3" title="3">
				<div class="feature-content" style="background-color:green;">
					<div class="feature-info">
						some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text some info on green coloured text
					</div>
				</div>
				<span class="feature-control" style="top:160px;">3</span>
			</a>
			<a href="#4" title="4">
				<div class="feature-content" style="background-color:yellow;">
					<div class="feature-info">
						some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text some info on yellow coloured text
					</div>
				</div>
				<span class="feature-control" style="top:240px;">4</span>
			</a>
			<a href="#5" title="5">
				<div class="feature-content" style="background-color:orange;">
					<div class="feature-info">
						some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text some info on orange coloured text 
					</div>
				</div>
				<span class="feature-control" style="top:320px;">5</span>
			</a>
		</div>
	</body>
</html>