/*Now for the CSS part, 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:860px; 
	_width:850px; 
	height:240px; 
	background-color:#fff;
	overflow:hidden;
	padding:0px 0px 10px;
	margin:-15px 0px 20px 0px;
	_margin:-15px 0px 20px -15px;
	/*border:1px solid #333;*/
	display:block;
}

a:active, a:focus {outline: 0;}


/*The navigation tabs are absolutely positioned to the right with following styles:*/
#featured ul.ui-tabs-nav{ 
	list-style:none; 
	padding:0; 
	margin:0; 
	width:260px; 
	position:absolute;
	top:180px;
	left:630px;
	_left:620px;
	z-index:3;
}

#featured ul.ui-tabs-nav li{ 
	margin:0px;
}


#featured ul.ui-tabs-nav li span{ 
	font-size:13px; 
	font-family:Arial; 
	line-height:16px; 
	padding:25px 5px 10px 35px;
	display:block;
}





/*The selected tab is given a background image with a left arrow. 
Here are the styles for selected tab.*/

#featured li.ui-tabs-nav-item a{ 
	display:block; 
	height:80px; 
	margin:0px;
	padding:0px;
	color:#fff;  
	text-decoration:none;
	line-height:20px;
	background-image:url(/media/css/Rightbar.png);
	background-repeat:no-repeat;
}

#featured li.ui-tabs-nav-item a:hover{ 
	color:#fff;
	background-image:url(/media/css/Rightbarhover.png);
	background-repeat:no-repeat;
}

#featured li.ui-tabs-selected{ 
	color: #fff;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
	color: #fff;
	background-image:url(/media/css/Rightbarhover.png);
	background-repeat:no-repeat;
	font-weight:bold;
}

/* 
The content panels are given following styles so as to fit them inside featured div container. 
The ui-tabs-hide class is essential to working of this script as it decides which content panels are hidden and which is displayed.
*/
#featured .ui-tabs-panel{ 
	width:620px; 
	height:240px; 
	/*background:#999; */
	position:relative;
	z-index:1;
	margin:0px;

}

#featured .ui-tabs-panel img{ 
	width:620px; 
	height:240px; 
	margin:0px;
	float:left;

}

#featured .ui-tabs-hide{ 
	display:none; 
}


/*
Also, in the content panel which is displayed, it has one image of size 400px x 250px and some relavent title and description inside the div with class info. To display .info div over the image i absolutely positioned it over the image with a transparent background to add some eye-candy.
*/
#featured .ui-tabs-panel .info{ 
	position:absolute; 
	top:150px; 
	left:0; 
	/*background-color:#ffcc33;*/
	background: url('/media/css/transparent-bg.png'); 
	width:350px;
	padding:0px 10px 5px 0px;
}


#featured .info h2{ 
	font-size:18px; 
	color:#fff; 
	padding:5px 10px; 
	margin:0;
	overflow:hidden; 
}


#featured .info p{ 
	margin:0px; 
	padding:0px 10px 5px; 
	font-family:Verdana; font-size:11px; 
	line-height:15px; 
	color:#fff;
}
#featured .info a{ 
	text-decoration:none; 
	/*color: #d9531e; ORANGE */
	color: #009999;
	font-weight:bold;
}
#featured .info a:hover{ 
	text-decoration:underline; 
}




































/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */