[CSS3 + HTML] Slider Accordation orizzontale

/*** Slider accordation orizzontale in puro CSS + HTML compatibile con Forumfree/Forumcommunity - © webarti + Implementazione by AngelNeo89 - jackforum.forumcommunity.net - Non rimuovere i Crediti ***/


/*********** MODIFICA STILE ***********/
.accordion {font-family:tahoma;
font-size: 16px}

.accordion>ul>li {background-color: #E5E5E5}

.accordion>ul>li>a {border-radius: 4px;
background-color: #000000;
color: #FAFAFA;
font-size: 17px;
font-weight:bold;
text-decoration:none}

.accordion>ul>li>a:hover {background-color: #0AABFF;
color: #FFF}

.accordion>ul>li>div {border-radius: 8px;
background-color: #F5F5F5;
border-color: #BBBBBB #DDD #DDD #BBBBBB;
border-style:solid}

/******** MODIFICA DEL TEMA *********/
.accordion>ul>li>div {border-width: 1px;
height: 340px;
margin-right: 4px;
padding: 30px;
width: 740px}

.accordion>ul>li>a {margin-right: 4px;
width: 30px}

ul.accordion-ie>li>a>span {/* IE only */
margin-left: 5px}

.accordion {width: 908px;
/* This value refers to the total width of visible components
width= accordion>ul>li>div(width + paddingright + paddingleft + marginright + borderrightwidth + borderleftwidth)
+ accordion>ul>li>a(number of accordions x(width + marginrright))
width=(740px + 30px + 30px + 4px + 1px + 1px) +(3 x(30px + 4px))
width= 908px
*/}

.accordion, .accordion>ul>li>a {height: 402px;
/* This value refers to the total height of visible area
height= accordion>ul>li>div(height + paddingtop + paddingbottom + bordertopwidth + borderbottomwidth)
width=(340px + 30px + 30px + 1px +1px)
width= 402px
*/}

.accordion>ul>li {margin-right: -806px;
/* This value refers to the negative of total width of content <div>
margin-right= accordion>ul>li>div(width + padding-right + padding-left + marginright + borderrightwidth + borderleftwidth)
margin-right= 740px + 30px + 30px + 4px + 1px +1px
margin-right= 806px
*/

width: 841px;
/* width= .accordion>ul>li>div(width + padding-right + padding-left + marginRight + borderRightWidth + borderLeftWidth)
+ .accordion>ul>li>a(width + margin-right)
width=(740px + 30px + 30px + 4px + 1px +1px) +(30px + 4px)
width= 841px
*/

/* Transition Effect */
transition: margin-right 0.3s ease 0.2s;
-moz-transition: margin-right 0.3s ease 0.2s;
-webkit-transition: margin-right 0.3s ease 0.2s;
-o-transition: margin-right 0.3s ease 0.2s}

/******* PROPRIETA' CHE NON DEVONO ESSERE MODIFICATE **********/
.accordion {overflow:hidden}
.accordion>ul {list-style:none; padding: 0; margin: 0; width: 9999em}
.accordion>ul>li {float:left; overflow:hidden}
.accordion>ul>li>a {float:left; position:relative; z-index: 1; -moz-outline-style:none; outline:none}
.accordion>ul>li>a>span {/* Text Rotation for all browsers */
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-ms-writing-mode:lr-bt;
filter: progid:dximagetransform.microsoft.basicimage(rotation=3);
bottom: 20px; display:block; position:absolute; width: 100%; white-space:nowrap}
ul.accordion-ie>li>a>span {cursor:pointer; width:auto} /* IE only */
.accordion>ul>li>div {float:left; overflow-y:auto; overflow-x:hidden}
.accordion>ul>li:hover {margin-right: 0}
ul.accordion-ie>li:hover {margin-right: 0} /* IE only */
#creditiangelneo {float: right; font-size: 10px; font-style: italic; margin-right: 20px}

<!--Inizio -->
<div class="accordion">
<!--[if IE ]><ul class="accordion ie"><![endif]-->
<!--[if !IE]>--><ul><!--<![endif]-->
<li>
<a href="##"><span>Pannello 1</span></a>
<div>
<h2 class="title">Pannello 1</h2>

CONTENUTO PANNELLO 1 Jackforum (HTML)
</li>

<li>
<a href="##"><span>Pannello 2</span></a>
<div>
<h2 class="title">Pannello 2</h2>

CONTENUTO PANNELLO 2 Jackforum (HTML)

</li>

<li>
<a href="##"><span>Pannello 3</span></a>
<div>
<div class="content">
<h2 class="title">Pannello 3</h2>


CONTENUTO PANNELLO 3 Jackforum (HTML)

</li>
</ul>
</div>
<div id="creditiangelneo"><a href="http://jackforum.forumcommunity.net/?t=51458448">Slider Accordation orizzontale by AngelNeo89 </a></div>
<!--Fine -->