/*
I fixed the width and height of the outer container div with id #featured and added 
a right padding of 250px to make space for the absolutely positioned navigation tabs
for our featured content slider. Also, i set its position attribute to relative so 
that i can absolutely position elements inside #featured div relative to it.
*/
#featured{ 
	width:675px; 
	/*padding-right:250px;*/ 
	position:relative; 
	height:425px; 
	background:#393F42;
}
/*
The navigation tabs are absolutely positioned to the right with following styles:
*/
#featured ul.ui-tabs-nav{ 
	position:absolute; 
	top:0; 
	left:675px; 
	list-style:none; 
	padding:0; 
	margin:0; 
	width:0px; 
}
#featured ul.ui-tabs-nav li{ 
	padding:1px 0; 
	/*padding-left:13px;*/  
	font-size:12px; 
	color:#666; 
}
#featured ul.ui-tabs-nav li img{ 
	float:left; 
	/*margin:2px 5px;*/ 
	background:#fff; 
	/*padding:2px;*/ 
	/*border:1px solid #eee;*/
}
#featured ul.ui-tabs-nav li span{ 
	font-size:11px; 
	font-family:Verdana; 
	/*line-height:18px;*/ 
}
#featured li.ui-tabs-nav-item a{ 
	display:block; 
	/*height:60px;*/ 
	color:#333;  
	background:#39525E; 
	/*line-height:20px;*/
}
#featured li.ui-tabs-nav-item a:hover{ 
	background:#f2f2f2; 
}
#featured li.ui-tabs-selected{ 
	background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
	background:#ccc; 
}

#featured .ui-tabs-panel{ 
	width:670px; 
	height:425px; 
	background:#999; 
	position:relative;
}
#featured .ui-tabs-panel .info{ 
	position:absolute; 
	top:325px; left:0; 
	height:100px; 
	background: url('imagesFCS/transparent-bg.png'); 
}
#featured .info h2{ 
	font-size:18px; 
	font-family:Georgia, serif; 
	color:#fff; 
	padding:5px; 
	margin:0;
	overflow:hidden; 
}
#featured .info p{ 
	margin:0 5px; 
	font-family:Verdana; 
	font-size:11px; 
	line-height:15px; 
	color:#f0f0f0;
}
#featured .info a{ 
	text-decoration:none; 
	color:#fff; 
}
#featured .info a:hover{ 
	text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
	display:none; 
}