/***********************************************************************************************/
/*  Tabellauno è la "tabella cornice"   */
/***********************************************************************************************/
.tabellauno {
width:590px;
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;
}


/* per una tabella più stretta */
.tabellaunobis {
width:400px;
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: 290px; /* larghezze delle singole colonne   */
text-align:left; /* allineamento dei titoli */
padding-left:0.5em;
}
.tabellauno th#header2 {
width: 240px; 
text-align:left; /* allineamento dei titoli */
padding-left:0.5em;
}
.tabellauno th#header3 {
width: 200px; 
text-align:left; /* allineamento dei titoli */
padding-left:0.5em;
}

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

/*  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;
}
 

/*Se diamo uno sguardo alla tabella così come l´abbiamo formattata attraverso il codice css, avremo una tabella con il colore di sfondo verde. Colore dei bordi, colore della intestazione e del footer: celeste. 
La tabella appena vista è perfettamente funzionale ed accessibile. 
Ovviamente i colori sono puramente indicativi e possiamo cambiarli a nostro piacimento. 

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:560px;  /*  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: red;*/
}

/* per una tabella più stretta */
.tabelladuebis {
width:380px;  /*  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: red;*/
}


/***********************************************************************************************/
/*  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: 290px; /* 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: 200px; 
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 delle righe dispari  */
.tabelladue td {
/*background:#e5e5e5;*/
background:#f2f2f2;
/*color:#000;*/
color:black;
padding-left:10px;
width:220px;
}


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

.tabelladuebis tr.colorata td {
/*
background:#ccc;
color:#000;
*/
/*background:#c2c2c2;*/
background: white;
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 è:
*/


/* qui si determina l'ALTEZZA del box   */
.divinterno {height:40em; overflow:auto;} 


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

/* riquadro per scrolling: dal precedente cambia la larghezza */
.riq_scro_mezzo {
/*width:580px;*/
height:220px;
overflow-x:hidden;
overflow-y:auto;
margin:0 auto;
padding-left:5;
/*border:#CCCCCC 1px solid; */
}