CSS Tabs al estilo de Windows 7

En este post podéis ver como crear pestañas casi idénticas a las de Windows 7, usando CSS y un poco de Javascript.
Podría haberlo hecho sin javascript pero para no complicarme mucho y hacerlo compatible con la mayoría de los navegadores lo he usado, ya que para crear un mismo efecto de pestañas sin javascript, solo css, habría que usar el selector :target, el cual solo es compatible en algunos de los navegadores mas modernos.

DEMO!

El html:

<div class="tabs-wrap">
 <ul class="tabs">
  <li><a href="#A">Tab A</a></li>
  <li><a href="#B">Tab B</a></li>
  <li><a href="#C">Tab C</a></li>
  <li><a href="#D">Tab D</a></li>
 </ul>
 <div id="A" class="panel">Text....A</div>
 <div id="B" class="panel">Text....B</div>
 <div id="C" class="panel">Text....C</div>
 <div id="D" class="panel">Text....D</p>
</div>

El html del es muy simple, lo justo, una lista para las pestañas y unos divs que se mostraran cuando este seleccionada cada pestaña.

El css

body{
 padding:2em 4em;
 background-color: #F0F0F0;
 font-family:"Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 font-size:.9em;
}
h1{
 font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
 text-shadow: 1px 1px 1px #FFF;
}
a{
 text-decoration: underline;
 color:#00F;
}
.panel {
 border:1px solid #898C95;
 background-color:#FFF;
 padding:5px;
 clear: both;
}
.panel p {
 margin:10px;
}
.tabs{
 list-style:none;
 padding:0 2px;
 margin:0;
}
.tabs li{
 float: left;
 margin:2px 0 0 0;
    padding:0;
 background-color:#EBEBEB;
 background-image: -moz-linear-gradient(top, #F2F2F2, #CFCFCF);
 background-image:-webkit-gradient(linear,0% 0%, 0% 100%,from(#F2F2F2),to(#CFCFCF),color-stop(.5,#EBEBEB),color-stop(.5,#DDDDDD));
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#CFCFCF');
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#CFCFCF')";
 border:1px solid #898C95;
 border-bottom-width:0;
 position:relative;
 overflow:visible;
}
.tabs li a{
 display:block;
 text-decoration:none;
 color:#000;
 border:1px solid #FFF;
 border-bottom: none;
 padding:1px 4px;
 margin:0;
}
.tabs li:hover{
 background-color:#D9F0FC;
 background-image: -moz-linear-gradient(top, #EAF6FD, #A7D9F5);
 background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#EAF6FD),to(#A7D9F5),color-stop(.5,#D9F0FC),color-stop(.5,#BEE6FD));
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAF6FD', endColorstr='#A7D9F5');
   -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAF6FD', endColorstr='#A7D9F5')";
 border-color: #3C7FB1;
 outline:none;
}
.tabs li.selected{
  filter: none;
    -ms-filter: none;
 background-color:#FFF;
 background-image: none;
 border:1px solid #898C95;
 border-bottom: none;
 margin:0 -2px -1px;
 z-index:1001;
}
.tabs li.selected a{
 padding:2px 6px 3px;
}

El css requiere bastantes mas explicaciones. Para dar un aspecto mas parecido utilizo la fuente "Segoe UI" para todo el body.
Para crear las pestañas utilizo una lista ul. Cada elemento de la lista lo hago flotar a la izquierda para que se sitúen en horizontal. Para el fondo de las pestañas utilizo gradients (en navegadores con webkit se ve perfecto, idéntico al Windows 7). En las pestañas seleccionadas le aplico -2px de margen y aumento el padding para que "se expanda" o se amplie y se coloque encima de las demás.