JQuery UI Tabs CSS Help

Hi,

I wanted to customized Jquery UI Tabs as my own Tabs can some body help me on that.

My Template of Tabs


JQuery UI Tabs


My HTML and CSS is as follows

<div class="section">
						<!--[if !IE]>start title wrapper<![endif]-->
						<div class="title_wrapper">
							<h2>Employee Forms</h2>
							
							<!--[if !IE]>start section menu<![endif]-->
							<ul class="section_menu">
								<li><a href="#" class="active"><span><span>Contractual Details</span></span></a></li>
								<li><a href="#"><span><span>Inactive Tab</span></span></a></li>
								<li><a href="#"><span><span>Products</span></span></a></li>
								<li><a href="#"><span><span>Last One</span></span></a></li>
							</ul>
							<!--[if !IE]>end section menu<![endif]-->
							<span class="title_wrapper_left"></span>
							<span class="title_wrapper_right"></span>
						</div>

HTML:

.title_wrapper_left {
	display: block;
	width: 10px;
	height: 35px;
	overflow: hidden;
	background:url(layout/site/title_wrapper_left.png);
	position: absolute;
	top: 0;
	left: -10px;
}

.title_wrapper_right {
	
	display: block;
	width: 10px;
	height: 35px;
	overflow: hidden;
	background:url(layout/site/title_wrapper_right.png);
	position: absolute;
	top: 0;
	right: -10px;
}

.title_wrapper {
	background:#6997a7 url(layout/site/title_wrapper_middle.png) repeat-x;
	padding: 0 5px;
	margin: 0 10px;
	position: relative;
	top: 0;
	left: 0;
	color: #fff;
	min-height: 1px;
}

.title_wrapper:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
} 

.title_wrapper h2 {
	font-size: 20px;
	font-weight: normal;
	line-height: 35px;
	margin: 0;
	padding: 0;
	float: left;
	white-space: nowrap;
}

.section {
	padding: 0 0 17px;
}

.section_menu {
	float: right;
	margin: 0;
	padding: 5px 0 0;
}

.section_menu  li {
	float: left;
	list-style: none;
	padding: 0 0 0 5px;
}

.section_menu a:link,
.section_menu a:visited,
.section_menu a:hover,
.section_menu a:active

 {
	display: block;
	line-height: 30px;
	background:url(layout/site/middle_tab.png) repeat-x;
	white-space: nowrap;
	float: left;
	font-size: 14px;
	color: #5c757e;
}

.section_menu a span {
	display: block;
	background:url(layout/site/left_tab.png) no-repeat;
}

.section_menu a span span {
	display: block;
	background:url(layout/site/right_tab.png) no-repeat right top;
	padding: 0 15px;
}

.section_menu a:hover {
	background-position: 0 -60px;
	text-decoration: none;
	color: #4e9cb8;
}

.section_menu a:hover  span {
	background-position: 0 -60px;
}

.section_menu a:hover  span span {
	background-position: right -60px;
	
}

.section_menu a.active:link,
.section_menu a.active:visited,
.section_menu a.active:hover,
.section_menu a.active:active
 {
	background-position: 0 -30px;
	color: #333e42;
}

.section_menu a.active:link span,
.section_menu a.active:visited span,
.section_menu a.active:hover span,
.section_menu a.active:active span {
	background-position: 0 -30px;
}

.section_menu a.active:link span span,
.section_menu a.active:visited span span,
.section_menu a.active:hover span span,
.section_menu a.active:active span span
 {
	background-position: right -30px;
}

Code (markup):