<div id="slideshow">

<input checked="checked" type="radio" name="pan" id="pan1"> </input>

<div id="slides">
<div id="mask">
<div class="slide_content">

<div class="pannello" id="p1"> <!-- Pannello 1 -->
<div style="width:850px"><img src="http://www.hybridupload.com/44/06/59xpl.png"></div> <div style="float:left; width:400px; text-align:justify; padding-top:6px; border-right: 3px dashed #EDB970">
<div style="float: left; margin-right: 5px; font-size:26pt; color:#EDB970; padding-top:10px">WELCOME!</div> Il tempo passava e con esso anche le stagioni. Le foglie cadevano dagli alberi e l'autunno stava lasciando il posto all'inverno. Presto tutti gli abitanti di Fairnight si sarebbero rinchiusi in casa per il troppo freddo. I camini delle dimore sarebbero stati accesi e... » [<a href="http://">leggi di più</a>]
</div>
<div style="float:right; width:430px; text-align:justify; padding-top:6px; color:#BF9354; font-size:13pt;letter-spacing:-1px; font-family:georgia; line-height:105%"> « La gente ha bisogno di un mostro in cui credere. Un nemico vero e orribile. Un demone in contrasto col quale definire la propria identità. Altrimenti siamo soltanto noi contro noi stessi.»
[cit. Chuck Palahniuk]
</div>

<div style="width:850px; overflow:auto; height: 35px">
<div class="menukita"><a href="http://">banner</a></div>
<div class="menukita"><a href="http://">tutorial</a></div>
<div class="menukita"><a href="http://">risorse</a></div>
<div class="menukita"><a href="http://">skin</a></div>
<div class="menukita"><a href="http://">codici</a></div>
<div class="menukita"><a href="http://">avvisi</a></div>
<div class="menukita"><a href="http://">contest</a></div>
<div class="menukita"><a href="http://">twins</a></div>
</div>

<div style="width: 370px; overflow:auto; height:150px; float:left">
<div style="height:70px;float: left; padding-left:3px;"><img src="http://www.hybridupload.com/49/06/5cjir.png"> </div><div style="width: 260px; font-size: 8pt; text-align:justify; height: 70px; overflow:auto; line-height: 110%; float:left; font-family:georgia; background-color:#ffead1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div style="width: 265px; height: 35px; float:left; background-color:#ffead1"><img src="http://i953.photobucket.com/albums/ae15/kawaiihamunet/purin4.gif"> <img src="http://i953.photobucket.com/albums/ae15/kawaiihamunet/purin4.gif"> <img src="http://i953.photobucket.com/albums/ae15/kawaiihamunet/purin4.gif"> <img src="http://i953.photobucket.com/albums/ae15/kawaiihamunet/purin4.gif"> <img src="http://i953.photobucket.com/albums/ae15/kawaiihamunet/purin4.gif"> <img src="http://i953.photobucket.com/albums/ae15/kawaiihamunet/purin4.gif"> <img src="http://i953.photobucket.com/albums/ae15/kawaiihamunet/purin4.gif"> <img src="http://i953.photobucket.com/albums/ae15/kawaiihamunet/purin4.gif"></div>
<div style="height:29px;float: right; padding-left:3px; padding-bottom:5px"><img src="http://www.hybridupload.com/34/06/161t.png"> </div>
<div style="width: 330px; overflow:auto; height:20px;font-size:11pt; padding-top:5px">Vuoi entrare a far parte del team? Proponiti <a href="http://">qua</a>! </div>
</div>
<div style="float:left; height:150px"><img src="http://www.hybridupload.com/44/06/1g8fzv.png"></div>

<div style="float:right; width:280px; padding-bottom:5px"><div style="font-size:13pt">winners - - - last tutorial</div>
<div style="float:left; width:130px; overflow:auto; height:60px; text-align:left;">
#01 - <a href="http://">nome utente</a> <br>
#02 - <a href="http://">nome utente</a> <br>
#03 - <a href="http://">nome utente</a> <br>
#04 - <a href="http://">nome utente</a> <br>
#05 - <a href="http://">nome utente</a> <br>
#06 - <a href="http://">nome utente</a> <br>
#07 - <a href="http://">nome utente</a> <br>
#08 - <a href="http://">nome utente</a> <br></div>

<div style="width:130px; overflow:auto; height:60px; text-align:left">
<a href="http://">tutorial #08</a> » skin <br>
<a href="http://">tutorial #07</a> » tabs <br>
<a href="http://">tutorial #06</a> » role <br>
<a href="http://">tutorial #05</a> » icons <br>
<a href="http://">tutorial #04</a> » blend <br>
<a href="http://">tutorial #03</a> » firma <br>
<a href="http://">tutorial #02</a> » html <br>
<a href="http://">tutorial #01</a> » bar <br>
</div>
</div>
<a href="http://thinkthelollipop.forumcommunity.net/"><img src="http://i.imgur.com/mfS305z.png"></a> <a href="http://">more </a>banner?

</div>
</div></div></div>

<div id="active">
<label for="pan1"></label>
</div>

</div>

/*TABELLA BY PANDABEA, NON COPIATE E NON RUBATE, GRAZIE!*/

/* SLIDESHOW A SCORRIMENTO AUTOMATICO - http://ffmagazine.forumfree.it/?t=65226584 */
#slideshow {width: 850px; padding: 10px; margin: 10px auto} #slideshow input {display: none}
#mask {width: 100%; overflow:hidden}
#slides {background: #FBF8EA; padding: 3px; border: 3px solid #86624C; border-radius: 5px}
.slide_content {position: relative; width: 500%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}
#pan1:checked ~ #slides .slide_content {margin-left: 0}
#pan2:checked ~ #slides .slide_content {margin-left: -100%}
#pan3:checked ~ #slides .slide_content {margin-left: -200%}
.pannello {width: 20%; float: left}
#active {margin-top: 5px}
#active label {display: none; width: 0; height: 0; border-radius: 10px; background: #724B5F; border: 2px solid #EAE8E6; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); margin: 5px}
#active label:hover {background: #C75E7D}
#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3) {background: #FFF}



/* menù pandabea --- non toccare questa parte*/

.menukita {float:left;
width: 94px;
height: 20px;
text-align:center;
font-size: 17px;
line-height: 13px;
display: inline-block;
padding: 2px;
margin: 2px;
font-family: century gothic;
text-transform:uppercase;
color: #F1B169;
background: #42315C;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 1px solid #C59162}

.menukita a:link {color: #F1B169}

.menukita a {color: #F1B169}

.menukita a:hover {color: #42315C}

.menukita:hover {color: #42315C;
background: #F1B169;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease}
/*FINE CODICE*/