/*Create tabs from a list.  One item should be selected.

Requires:
<link rel="stylesheet" type="text/css" href="css/GroupSlide4.css" />

Example:
<div>
	<ul class="tabRow">
		<li class="tab"><a href="#"><span class="tabContent">Tab One</span></a><span class="tabConnect"></span></li>
		<li class="tabSelected"><a href="#"><span class="tabContent">Tab Two</span></a><span class="tabConnect"></span></li>
		<li class="tab"><a href="#"><span class="tabContent">Tab Three</span></a><span class="tabConnect"></span></li>
	</ul>
	
	<div class="GroupSlider">
		<div class="TopRight"><div class="TopLeft">
			<h1>Tab Page Content</h1>
			<p>Lorem ipsum blah blah blah...</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus velit ante, tempus eu, rutrum eu, dignissim at, odio. Etiam eget augue. Nunc fringilla tempor dui. Aliquam rutrum sollicitudin metus. Proin pulvinar eros at lorem. Integer nec justo. Maecenas quis urna eget lacus imperdiet commodo. Donec diam sapien, malesuada eu, fermentum consectetuer, pellentesque quis, mi. Sed sagittis. In lorem tortor, tristique at, viverra at, tristique nec, est. Sed velit ligula, tempor sit amet, pretium eu, tempus a, mi.</p>
		</div></div><div class="BottomRight"><div class="BottomLeft"></div></div>
	</div>

</div>


Example to be used with JavaScript (javascript combines all these separate tabs into one):
<div class="CombineTabs">
			<div>
				<ul class="tabRow">
					<li class="tabSelected"><a href="#"><span class="tabContent">
						Tab One
					</span></a><span class="tabConnect"></span></li>
				</ul>
				<div class="GroupSlider"><div class="TopRight"><div id="TabPageContent" class="TopLeft">
					<p>Tab Content Lorem ipsum dolor sit amet.</p>
				</div></div><div class="BottomRight"><div class="BottomLeft"></div></div></div>
			</div>
			<div>
				<ul class="tabRow">
					<li class="tabSelected"><a href="#"><span class="tabContent">
						Tab Two
					</span></a><span class="tabConnect"></span></li>
				</ul>
				<div class="GroupSlider"><div class="TopRight"><div id="TabPageContent0" class="TopLeft">
						<p>Tab Content Lorem ipsum dolor sit amet.</p>
				</div></div><div class="BottomRight"><div class="BottomLeft"></div></div></div>
			</div>
</div>





*/


ul.tabRow {
	list-style:none;

/*	float:left;
/*	width:100%;
*/	padding:0 15px;
	margin:0;
	font-size: small;
	
	width:95%; /* This line improves compatibility with IE6 */
	position:relative;
	top:13px;
	left: 0px;
}
.GroupSlider {
	clear:left;
}

ul.tabRow li {
	float:left;
	padding:0;
	margin:0;
}
ul.tabRow li a {
	display:block;
	background-image:url('images/GroupBox.png');
	background-position:top right;
	padding-right:23px;
	text-decoration:none;
	color:black;
}
ul.tabRow li.tab a {
	margin-top:4px;
}
ul.tabRow li.tabSelected a {
	margin-top:0px;
}
ul.tabRow li.tab a:hover {
	margin-top:0px;
}
ul.tabRow li.tabSelected a .tabContent {
	padding-bottom:4px;
}

ul.tabRow li.tab a:hover .tabContent {
	padding-bottom:4px;
}

ul.tabRow li .tabContent {
	display:block;
	background-image:url('images/GroupBox.png');
	background-position:left top;
	padding-left:21px;
	padding-top:16px;
	margin-right:8px;
}

ul.tabRow li .tabConnect {
	display:block;
	margin:0 13px 0 23px;
	margin-left:13px;
	margin-right:23px;

	background-image:url('images/GroupBox.png');

	padding-top:2px;
}

ul.tabRow li.tab .tabConnect {
	background-position:center -11px;
}

ul.tabRow li.tabSelected .tabConnect { 
	background-position:center center;
}

ul.tabRow li.tab:hover .tabConnect { 
	background-position:center center;
}