Kendi siteme nasıl uyarlayacağım?

<style type="text/css">
<!--
/* Sliderbox */
#featured {
   width: 397px;
   padding-right: 250px;
   position: relative;
   border: 5px solid #ccc;
   height: 250px;
        overflow:hidden; }

/* Feld der Navi rechts */
ul.ui-tabs-nav {
   position: absolute;
   top: 0; left: 400px;
   list-style: none;
   padding: 0; margin: 0;
   width: 250px; height: 250px;
   overflow: hidden;}

/* Überschriften im Menu rechts */
li.ui-tabs-nav-item h3 {
        font-size: 14px;
        margin: 3px 0px 3px 0px; }


/* verlinkter Text im Menu rechts */
li.ui-tabs-nav-item a {
        padding: 3px 5px 3px 10px;
        display: block;
   height: 56px;
        text-decoration: none;
   color: #333; 
        font-size: 11px;
        outline: none;
        border-bottom: 1px solid #c9c9c9; }

/* Hover Menu rechts */
li.ui-tabs-nav-item a:hover {
        display: block;
   background: #202020;
        color: #FFFFFF; }

/* Auto-Hover rechts */
li.ui-tabs-selected a {
   background: #202020;
        color: #FFFFFF; }


/* Feld für Bilder */
.ui-tabs-panel {
   width: 400px;
        height: 250px;
        border-right: 1px solid #FFFFFF;
   background: #999;
        position: relative; }

/* das Feld für Text auf Bild */
.ui-tabs-panel .text {
   position: absolute;
   bottom:0; left:0;
   height: 70px;
   background-color: #202020;
        opacity: 0.7;  }

/* Ueberschrift auf Bild */
.text h2 {
   font-size: 15px;
        font-family: Georgia, serif;
   color: #FFFFFF;
        padding: 5px;
        margin: 0px;
        font-weight: normal;
   overflow: hidden; }


/* Text im Bild */
.text p {
   margin:0 5px;
   font-size: 11px;
   line-height: 14px;
        color: #f0f0f0; }

/* Link im Bild */
.text a {
   text-decoration: none;
   color: orange;
        font-size: 12px; }

/* Hoverlink im Bild */
.text a:hover {
        color: blue;
        text-decoration: underline; }

.ui-tabs-hide{display:none; }
--></style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

<div id="featured">

<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<a href="#fragment-1"><h3>Thema 1</h3>hier Infotext Menü rechts 1</a></li>
          
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2"><h3>Thema 2</h3>hier Infotext Menü rechts 2</a></li>

<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3"><h3>Thema 3</h3>hier Infotext Menü rechts 3</a></li>

<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4"><h3>Thema 4</h3>hier Infotext Menü rechts 4</a></li>

</ul>

<!-- Grafik 1 -->
<div id="fragment-1" class="ui-tabs-panel">
<img src="Grafikadresse 1" alt="" />
<div class="text">
<h2>Titel 1</h2>
<p>Hier Infotext 1 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>

<!-- Grafik 2 -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<img src="Grafikadresse 2" alt="" />
<div class="text">
<h2>Titel 2</h2>
<p>Hier Infotext 2 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>

<!-- Grafik 3 -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<img src="Grafikadresse 3" alt="" />
<div class="text">
<h2>Titel 3</h2>
<p>Hier Infotext 3 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>

<!-- Grafik 4 -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<img src="Grafikadresse 4" alt="" />
<div class="text">
<h2>Titel 4</h2>
<p>Hier Infotext 3 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>
   
</div>