/***********************************************************************************************/
/*  Tabellauno è la "tabella cornice"   */
/***********************************************************************************************/
.tabellauno {
width:760px;
font-family:  Arial, Helvetica, sans-serif;
font-size: 14px;
margin:0 auto;
padding:0;
/*background:#00a3dd;*/  /* colore dello sfondo del bordo ESTERNO della tabella   
background:#707070;  */
background: transparent ;
color: #008000; /* colore dei caratteri dei titoli  */
border: Solid 1px #555555;
}

/*
.tabellauno th#header1, .tabellauno th#header2, .tabellauno th#header3, .tabellauno th#header4 {
width: 253px; /* larghezze delle singole colonne, se le voglio tutte uguali.   
text-align:center; /* allineamento dei titoli 
padding-left:0.5em;
}
*/

.tabellauno th#header1{
width: 30px; /* larghezze delle singole colonne   */
text-align:left; /* allineamento dei titoli */
/*padding-left:0.5em;*/
}
.tabellauno th#header2 {
width: 200px; 
text-align:left; /* allineamento dei titoli */
/*padding-left:16.5em;*/
}
.tabellauno th#header3 {
width: 200px; 
text-align:left; /* allineamento dei titoli */
/*padding-left:12.5em;*/
}

.tabellauno th#header4 {  /*  questa serve a riempire lo spazio che a dx sarà occupato dalla barra, quando apparisse  */
width: 100px; 
text-align:center; /* allineamento dei titoli */
/*padding-left:0 em;*/
}

.tabellauno th#header5 {  /*  questa serve a riempire lo spazio che a dx sarà occupato dalla barra, quando apparisse  */
width: 100b px; 
text-align:center; /* allineamento dei titoli */
/*padding-left:0 em;*/
}

.tabellauno th#header6 {  /*  questa serve a riempire lo spazio che a dx sarà occupato dalla barra, quando apparisse  */
width: 90px; 
text-align:center; /* allineamento dei titoli */
/*padding-left:0 em;*/
}

.tabellauno th#header7 {  /*  questa serve a riempire lo spazio che a dx sarà occupato dalla barra, quando apparisse  */
width: 25px; 
text-align:center; /* allineamento dei titoli */
/*padding-left:0 em;*/
}

.tabellauno th#header8 {  /*  questa serve a riempire lo spazio che a dx sarà occupato dalla barra, quando apparisse  */
width: 45px; 
text-align:center; /* allineamento dei titoli */
/*padding-left:0 em;*/
}











/*  Titolo generale in testa a tutto  */
.tabellauno caption {
/*background:#fff;
background: red ;*/
background: transparent ;
color:#548888;
/*font-size:1.2em;*/
font-size:1.2em;
margin:0 auto;
}


/* lo sfondo è quello della parte che sta sotto ai caratteri scritti. Il colore non l'ho capito    */
.tabellauno tbody {
/*background:#8a9; 
background:555555 ;*/
background: transparent ;
/*color:#000;*/
color:black;
}

/*  Allineamento del contenuto della tabella */
.tabellauno td {
text-align: left;
}
 

/*
Adesso dobbiamo introdurre la seconda tabella; lo faremo anche per "distinguere" il colore di ogni singolo rigo dal precedente, per una migliore leggibilità. Il suo codice è il seguente:
*/

/***********************************************************************************************/
/*  Tabelladue è la tabella dove scorrono gli item  */
/***********************************************************************************************/

/* background si riferisce al colore tra le celle. Color non so */
.tabelladue {
width:730px;  /*  larghezza -30 (4 colonna di tabellauno) rispetto a tabellauno  */
font-family:  Arial, Helvetica, sans-serif;
font-size: 12px;
margin:0;
padding:0;
/*color:#000;*/
color:black ;
/*background: transparent;*/
background: #999999;
}


/***********************************************************************************************/
/*  le 4  classi che seguono le ho aggiunte in analogia a quelle di tabellauno, con l'intenzione
    di allineare la larghezza delle colonne, ma sembra che non abbiano alcun effetto*/
/***********************************************************************************************/

/*.tabelladue td#header1{
.colonna1{
.tabelladue colonna1{
width: 330px; /* larghezze delle singole colonne   
text-align:center; /* allineamento dei titoli */
/*padding-left:0.5em;
}

/*.tabelladue td#header2 {
.colonna2{
.tabelladue colonna2{
width: 240px; 
text-align:center; /* allineamento dei titoli */
/*padding-left:0.5em;
}

/*.tabelladue td#header3 {
.colonna3{
.tabelladue colonna3{
width: 160px; 
text-align:center; /* allineamento dei titoli */
/*padding-left:0.5em;
}

/*.tabelladue td#header4 {  /*  questa serve a riempire lo spazio che a dx sarà occupato dalla barra, quando apparisse  */
/*.colonna4{*/
/*.tabelladue colonna4{*/
/*width: 30px; */
/*text-align:center; /* allineamento dei titoli */
/*padding-left:0.5em;*/
/*}

*/

/***********************************************************************************************/
/*  le 4  classi sopra le ho aggiunte in analogia a quelle di tabellauno, con l'intenzione
    di allineare la larghezza delle colonne, ma sembra che non abbiano alcun effetto*/
/***********************************************************************************************/

/*  sfondo e colore dei titoli delle colonne  */
.tabelladue tr.tit_tab td {
/*
background:#ccc;
color:#000;
*/
font-family:  Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background:white;
color: rgb(3, 38, 120) ;
}




/*  sfondo e colore delle righe dispari  */
.tabelladue td {
/*background:#e5e5e5;*/
background:#f2f2f2;
/*color:#000;*/
color:black;
/*padding-left:10px;   spazio prima del primo carattere della riga   */
/*width:220px; se si attiva, si applica identico a tutte e tre le righe */
}


/*  sfondo e colore delle righe pari  */
.tabelladue tr.colorata td {
/*
background:#ccc;
color:#000;
*/
background:#cccccc;
color:black ;
}

/*
Questo codice ci permette di avere quanto ci siamo prefissi: righe colorate alterne. 
Infatti nel foglio di stile andiamo a dichiarare che le celle [ td ] avranno un colore grigio molto tenue [ background:#e5e5e5; ]. 
Per fare in modo che tutta la riga successiva possa assumere un altro colore, dichiariamo attraverso una classe [ .tabelladue tr.colorata td ], 
un secondo colore di sfondo: background:#ccc;. 

L´elemento div
Adesso siamo giunti ad introdurre l´ultimo elemento: il div che farà apparire la barra di scroll; tale elemento lo dichiariamo con una classe; il suo codice è:
*/

.divinterno {height:25em; overflow:auto;} 


/* riquadro per scrolling testi lunghi (non necessariamente per tabelle)*/
.riq_scro {
width:760px;
height:150px;
overflow-x:hidden;
overflow-y:auto;
margin:0 auto;
padding:0;
border:#CCCCCC 1px solid;
}