/*Sullo scroller principale, uso il posizionamento

relativo. Ciò consente l'opzione di aggiungere

elementi come le sovrapposizioni dei bordi in

un secondo momento.*/

#scroller{ 

    position: relative;

    display: block;

    top: 35%;

    height: 50%;

    margin: 0 auto;

}



/*Per il supporto interno, ritaglio tutto ciò che

scorre sopra, tramite "overflow: nascosto".

Posizioniamo il titolare per riempire

completamente il suo genitore, lo #scroller div.*/

#scroller .innerScrollArea {

    overflow: hidden;

    position: absolute;

    left: 1%;

    right: 1%;

    top: 0;

    bottom: 0;

    filter: drop-shadow(5px 5px 5px #000);

}



/*Nell'elenco non ordinato che contiene le foto,

rimuovo il margine e il riempimento predefiniti.

Uso anche "position: relative" in modo che gli

elementi dell'elenco possano essere disposti in

una riga orizzontale.*/

#scroller ul {

    padding: 0;

    margin: 0;

    position: relative;

}



/*Nelle singole voci dell'elenco, rimuovo il 

riempimento predefinito, il margine e i punti

elenco. La posizione è impostata su assoluta;

userò JavaScript per impostare il valore di

posizionamento sinistro preciso.*/

#scroller li {

    padding: 0;

    margin: 0;

    list-style-type: none;

    position: absolute;

}