/* 
Questo foglio di stile serve a sostituire una normale lista con un'immagine mappata.
Il funzionamento dettagliato del foglio ? illustrato nel seguente articolo: 
"Emulare le immagini mappate con i CSS" @ http://www.constile.org/tips/emulare_le_immagini_mappate_con_i_css/

Rispetto a tale articolo, in questo foglio ? stata usata una lista di definizioni (DL) in luogo delle liste non
ordinate (UL). Inoltre ? stato inserito un effetto roll-over (bordo rosso) che evidenzia la posizione del mouse 
nella barra di personalizzazione.
*/ 


#personalizzazione {display:block}
dl#personalizzazione {
position:relative;
margin:0 auto;padding:0;
width:100px;height:17px;
background:url("../images/personalizzazione.png") no-repeat
}
dl#personalizzazione dt {display:none}
dl#personalizzazione dd {
display:block;
position:absolute;
margin:0;padding:0;
width:12px;height:11px /* la dimensione la stessa per ogni pulsante */
}
dl#personalizzazione dd a {
display:block;
width:100%;
height:100%;
background:transparent
}

/* effetto roll-over */
dl#personalizzazione dd a:hover {
border:1px solid #f00;
/* inizio "Tantek hack" per IE5/Win: http://tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\""; 
voice-family:inherit;
position:relative;top:-1px;left:-1px; /* non serve col box model di IE5*/
} 
html>body dl#personalizzazione dd a:hover {
  position:relative;top:-1px;left:-1px /*Opera 5: "be nice to Opera 5" */
}/* fine "Tantek hack" per IE5/Win: http://tantek.com/CSS/Examples/boxmodelhack.html */
/* /effetto roll-over */
 
dl#personalizzazione dd#personalizzazione-carattere-piccolo { left:3px;top:3px }
dl#personalizzazione dd#personalizzazione-carattere-grande { left:16px;top:3px }
/*dl#personalizzazione dd#personalizzazione-classico { left:31px;top:3px }
dl#personalizzazione dd#personalizzazione-verde { left:44px;top:3px }
dl#personalizzazione dd#personalizzazione-blu { left:57px;top:3px }
dl#personalizzazione dd#personalizzazione-arancio { left:70px;top:3px }*/
dl#personalizzazione dd#personalizzazione-accessibile { left:30px;top:3px }

/* 
questo frammento di codice serve a mostrare il box in homepage che indica la possibilit? di scegliere le varie 
skin e riporta i link alla pagina di spiegazione e personalizzazione/anteprima
*/
#avviso-personalizzazione {
background:#fff2bf;
margin:5px 0;padding:5px;
border:1px dashed #036;	
text-align:center
}
#avviso-personalizzazione p { text-align:left;margin:0 0 3px 0}
dl#personalizzazione .alt{ display:none;}