Mostly CSS based skin

Here we have a tab setup that uses only one background image for the selected tab and a semi-transparent gradient for the background of the panes. Otherwise the whole thing is just simple CSS dimensions, borders, paddings and coloring.

HTML

<div id="panes">
 <div>
 <img src="pic01_m.jpg"  />
 <h3>Seagram Building</h3>

<p class="more">The Seagram Building is a skyscraper in New York 
 City, located at 375 Park Avenue, between 52nd Street and 53rd 
 Street in Midtown Manhattan. It was designed by the German 
 architect Ludwig Mies van der Rohe, in collaboration with the 
 American Philip Johnson.</p>

<p>It is 515 feet tall with 38 stories. Severud Associates were 
the structural engineering consultants. It stands as one of the 
finest examples of the functionalist aesthetic and a masterpiece 
of corporate modernism. It was designed as the headquarters for 
the Canadian distillers Joseph E. Seagram's &amp; Sons, thanks 
to the foresight of Phyllis Lambert, the daughter of Samuel 
Bronfman, Seagram's CEO.</p>
</div>
   
<div>
 <img src="pic02_m.jpg"  />
 
<h3>Barcelona Pavilion</h3> 

<p class="more">The Barcelona Pavilion, designed by Ludwig Mies 
van der Rohe, was the German Pavilion for the 1929 International 
Exposition in Barcelona, Spain. This building was used for the 
official opening of the German section of the exhibition.</p>

<p>Mies was offered the commission of this building in 1928 after 
his successful administration of the 1927 Werkbund exhibition in 
Stuttgart. The German Reich entrusted Mies with the artistic 
management and erection of not only the Barcelona Pavilion, but 
for the buildings for all the German sections at the 1929 
Universal Exhibition.</p>
</div>
 
  <div> 
<img src="pic03_m.jpg" />
<h3>Neue Nationalgalerie</h3>

<p class="more">Neue Nationalgalerie at the Kulturforum is a 
museum for classical modern art in Berlin, with main focus on 
early the 20th century. It is part of the German National Gallery. 
The museum building and its sculpture garden were designed by 
Ludwig Mies van der Rohe and opened in 1968.</p>

<p>The collection features a number of unique highlights of modern 
20th century art. Particularly well represented are Cubism, 
Expressionism, the Bauhaus and Surrealism. The collection owns 
masterpieces of artists like Pablo Picasso, Ernst Ludwig Kirchner, 
Joan Mir&oacute;, Wassily Kandinsky and Barnett Newman.</p> 
</div>
</div>


<!-- navigator -->
<div id="nav">
<ul>
 <li><a href="#1"> <img src="pic01_s.jpg"/> <strong>Seagram Building</strong> New York City, USA </a> </li>
    <li><a href="#2"> <img src="pic02_s.jpg"/> <strong>Barcelona Pavilion</strong> Barcelona, Spain </a> </li>
    <li> <a href="#3"> <img src="pic03_s.jpg" /> <strong>National Gallery</strong> Berlin, Germany </a> </li>
</ul>
    
    

CSS

/* navigation */
#nav { background:#ddd url(h300_reverse.png); border-bottom:1px solid #CCCCCC; height:156px; width:745px; }
#nav ul { width:600px; margin:0 auto; }
#nav li { border-right:1px solid #ddd; float:left; padding-left:1px; width:175px; list-style-type:none; text-align:center; margin-top:0px; }
#nav a { color:#333333; display:block; padding:17px; position:relative; word-spacing:-2px; font-size:11px;  height:122px; text-decoration:none; }
#nav a.current { background:url(down_large.jpg); }
#nav img { background-color:#fff; border:1px solid #ccc; margin:3px 0 5px 27px; padding:4px;  display:block; }
#nav strong { display:block;  font-size:13px; }   


/* panes */
#panes { background:#fff url(h300_reverse.png) repeat scroll 0 0; border-color:#ccc; border-style:solid; border-width:1px 1px 0; width:743px; height:255px; margin-bottom:-20px; padding-bottom:20px; position:relative; }
#panes div { display:none;  position:absolute; top:20px; left:20px; font-size:13px; color:#444; width:650px;  }
#panes img { float:left; margin-right:20px;  }
#panes p.more { color:#000; font-weight:bold; font-size:13px; }
#panes h3 { margin:0 0 -5px 0; font-size:22px; font-weight:normal; }
.overlay { display:none; width:500px; padding:20px; background-color:#ddd; }  

Javascript

$(function() {
$("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});
});

View Example