Tabs Animados con CSS y HTML

Estilo  Css, pegar antes de    ]]></b:skin>

   #contenedorJiu {
margin: 0px auto;
position: relative;
top: 0px;
left:-20px;
width: 870px;  /* Ancho del contenedorJiu */
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#contenedorJiu input {
height: 32px;
visibility: hidden;
}
#contenedorJiu label {
float: left;
cursor: pointer;
font-size: 12px;  /* Tamaño del texto de las pestañas */
line-height: 30px;
height: 30px;
padding: 0 7px;
display: block;
color: #000000;  /* Color del texto de las pestañas */
text-align: center;
border-radius: 5px 5px 0 0;
background: #eee;  /* Fondo de las pestañas */
margin-right: 5px;

}
#contenedorJiu input:hover + label {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}
#contenedorJiu input:checked + label {
background: #FC0303;  /* Fondo de las pestañas al presionar */
color: #FFFFFF; /* Color de las pestañas al presionar */
z-index: 6;
line-height: 45px;
height: 45px;
position: relative;
top: -5px;
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
}
.contentJiu {
background: #000000;  /* Fondo del contenido */
position: relative;
width: 100%;
height: 512px;  /* Alto del contenido */
padding: 45px;
z-index: 5;
border-radius: 0 5px 5px 5px;
}
.contentJiu div {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}
#contenedorJiu input.tab-selector-1:checked ~ .contentJiu .contentJiu-1,
#contenedorJiu input.tab-selector-2:checked ~ .contentJiu .contentJiu-2,
#contenedorJiu input.tab-selector-3:checked ~ .contentJiu .contentJiu-3,
#contenedorJiu input.tab-selector-4:checked ~ .contentJiu .contentJiu-4,
#contenedorJiu input.tab-selector-5:checked ~ .contentJiu .contentJiu-5 {
z-index: 100;
opacity: 1;
-webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
}