@charset "utf-8";
/*
 * Suggerimenti per i layout elastici 
 * ==================================
 *
 1. Poiche` le dimensioni generali dei layout elastici sono basate sulla
    dimensione predefinita del carattere dell'utente, il risultato di questi
    layout e` meno prevedibile.
    Se usati correttamente, risultano piu` accessibili per gli utenti che hanno
    bisogno di visualizzare i caratteri con dimensioni maggiori, perche` la
    lunghezza delle righe rimane proporzionale.
 2. Le dimensioni dei <div> di questo layout sono basate sul 100% della
    dimensione del carattere nell'elemento body.
    Se si riduce la dimensione generale del testo specificando font-size: 80%
    nell'elemento body o in #container, ricordarsi che l'intero layout si
    ridurra`  in proporzione. Per compensare eventualmente questo effetto,
    si puo` aumentare la larghezza dei vari <div>.
 3. Se le dimensioni dei caratteri vengono modificate in modo diverso per ogni
    <div> anziche` a livello globale (ovvero, se si assegna a #sidebar1 una
    dimensione di carattere del 70% e a #mainContent dell'85%), le dimensioni
    generali di ciascun div verranno modificate in modo proporzionale.
    E` possibile adattare il risultato in base alle dimensioni finali dei
    caratteri.

 Note
 - Attenzione a impostare sempre lo stesso valore ai padding left e right 
   degli elementi che definiscono il layout (0.6em in questo CSS).
 * ---------------------------------------------------------------------------*/
body {
	/* E' buona norma impostare a zero i valori margin e padding dell'elemento
	   body per tenere conto delle diverse impostazioni predefinite dei
	   browser.
	 */
	margin: 0em; 
	padding: 0em;
	text-align: center; /* Centra il contenitore nei browser IE 5*. */
	/* Il testo viene quindi impostato con l'allineamento predefinito a
	   sinistra negli altri selettori. */
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #DCDCDC;
	background-image: url(../images/bg_grad.jpg);
	background-attachment: fixed;
	line-height: 1.166em;
	color: #000000;
}

/*
 * top - layer superiore
 * ---------------------------------------------------------------------------*/
#top {
	background: #dcdcdc url(../images/bg_grad.jpg) repeat fixed;
	padding: 0em 0.6em;
}
#top h1 {
	margin: 0em;		
	padding: 0.6em 0em;
	color: #ffffff;
	font: 1.4em Arial, Helvetica, sans-serif;
	font-weight: normal;
}

/*
 * topNavBar - layer contentente la barra di navigazione superiore
 * ---------------------------------------------------------------------------*/
#topNavBar {
	width: 59em; /* Questa determina la dimensione del contenitore che
	    riempe la finestra del browser,  se il testo viene lasciato alle
       	    dimensioni di carattere predefinite del browser.
	    46em -> 800px
	    59em -> 1024px */
	background: #e2e2e2 url(../images/topNavBar_background.gif) top repeat-x;
	margin: 0em auto 1em auto; /* i margini auto (insieme a una larghezza)
	    centrano la pagina */
	padding: 0em 0em;
	color: #3366cc;
	text-align: left; /* sostituisce l'impostazione text-align: center
       	    nell'elemento body. */
}
#topNavBar a:active {
	color: #FF0000;
}
#topNavBar .separator {
	border-right: #8fb8bc 0.1em solid;
}

/*
 * container - layer contenitore della parte centrale della pagina
 * ---------------------------------------------------------------------------*/
#container {
	width: 59em;
	background-color: #FFFFFF;
	margin: 0em auto 1em auto; /* i margini auto (insieme a una larghezza)
	    centrano la pagina */
	border: 1px solid #000000;
	text-align: left; /* sostituisce l'impostazione text-align: center
       	    nell'elemento body. */
}

/*
 * header - layer di intestazione contenuto dentro container'
 * ---------------------------------------------------------------------------*/
#header {
	background-color: #dddddd;
	margin: 0;
	padding: 1px 0.6em; /* questo padding corrisponde all'allineamento a
	   sinistra degli elementi nei div sottostanti.  Se in #header viene
	   utilizzata un'immagine anziche` un testo, puo` essere utile rimuovere
	   il padding.  */
	border-bottom: 1px solid #000000;
}
/*
 * sidebar1
 *
 * Suggerimenti:
   1. Se si imposta un valore font-size per questo div, la larghezza globale
      del div viene modificata di conseguenza.
   2. Poiche` si lavora in ems, w` meglio non applicare un padding alla barra
      laterale, poiche`, nei browser conformi agli standard, verrebbe aggiunto
      alla larghezza producendo una larghezza effettiva non prevedibile.
   3. Per creare spazio tra il lato del div e gli elementi al suo interno,
      e` possibile applicare un margine sinistro e destro a tali elementi,
     come descritto nella regola "#sidebar1 p".
 * ---------------------------------------------------------------------------*/
#sidebar1 {
	float: right;
	/* Poiche` questo elemento e` mobile, occorre specificare una larghezza */
	width: 12em; 
	/* Il colore di sfondo verra` visualizzato per tutta la lunghezza del
	   contenuto all'interno della colonna, ma non oltre 
	background-color: #EBEBEB; */
	/* Un padding superiore e inferiore creano uno spazio visivo all'interno di
	  questo div */
	padding: 0em; 
}
#sidebar1 h3, #sidebar1 p {
	/* E` necessario applicare un margine sinistro e destro a ogni elemento
	   che verra` inserito nelle colonne laterali */
	margin: 0em 0.6em; 
}
/*
 * mainContent
 *
 * Suggerimenti:
   1. Se si assegna a questo div #mainContent un valore font-size diverso dal
      div #sidebar1, i margini del div #mainContent e la larghezza del div
      #sidebar1 saranno basati sui rispettivi valori font-size.
      Puo' essere utile modificare i valori di questi div.
   2. Lo spazio tra mainContent e sidebar1 viene creato con il margine sinistro
      del div mainContent.
      Indipendentemente dalla quantita` di contenuto presente nel div sidebar1,
      lo spazio della colonna rimane inalterato.
      E' possibile rimuovere questo margine sinistro se si desidera che il testo
      del div #mainContent riempia lo spazio di #sidebar1 quando il contenuto
      di #sidebar1 finisce.
   3. Per evitare il problema del 'float drop', puo` essere necessario eseguire
      una prova per determinare le dimensioni massime approssimative
      dell'immagine o elemento, poiche' questo layout e` basato sulle dimensioni
      di carattere dell'utente combinate con i valori impostati.
      Tuttavia, se nel browser dell'utente la dimensione del carattere e¨
      impostata su un valore piu` basso del normale, nel div #mainContent sara`
      disponibile meno spazio di quello evidenziato nella prova.
   4. Nel commento condizionale di Internet Explorer,
      la proprieta` zoom viene utilizzata per assegnare "hasLayout" a
      mainContent, al fine di evitare vari bug specifici di IE che potrebbero
      verificarsi.
 * ---------------------------------------------------------------------------*/
#mainContent {
	/* Il margine sinistro risultera` migliore se si fa corrispondere la
	   quantita` di padding all'intestazione e al piu` di pagina. */
	margin: 0 13em 0 0.6em; 
	border-right: thin dotted #CCCCCC;
}
/*
#mainContent ul {
	margin-top: -1em;
}
#mainContent li {
	list-style-type: square;
}
*/

/*
 * mainContentFull
 *
 * Contenuto della pagina quando non e` presente la sidebar.
 */
#mainContentFull, #mainContent2, #publications {
	margin: 0 0.6em;
}

/*
 * footer
 * ---------------------------------------------------------------------------*/
#footer {
	 /* Questo padding corrisponde all'allineamento a sinistra degli
	    elementi nei div sovrastanti. */
	padding: 0 0.6em;
	background:#DDDDDD;
	font: 0.6em Arial, Helvetica, sans-serif;
	color: #336699;
}
#footer p {
	/* Azzerando il valore margin del primo elemento del footer si evita il
	   rischio di compressione del margine, con la creazione di uno spazio
	   tra i div */
	margin: 0; 
        /* Il padding di questo elemento crea uno spazio, così come avverrebbe
           specificando un valore margin, senza il problema della compressione
	   del margine */
	padding: 0.6em 0;
}

/*
 * story styles
 * ---------------------------------------------------------------------------*/
.story {
	padding: 0.8em 0em 0em 0.8em;
	font-size: 0.8em;
}
.story h3{
	font: bold 1.25em Arial,sans-serif;
	color: #000000;
}
.story p {
	padding: 0em 0em 0.8em 0em;
}
.story a.capsule {
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display: block;
	padding-bottom: 0.4em;
}
.story a.capsule:hover {
	text-decoration: underline;
}
.story table {
	width: 100%;
}
.story table caption {
	text-align: left;
	color: #0000FF;
}
.story tr {
	vertical-align: top;
}
.story td {
	width: 50%;
	border-top: thin #cccccc dotted;

}


/*
 * contactInformation
 * ---------------------------------------------------------------------------*/
#contactInformation {
	width: auto;
	border-style: none;
	font-size: 0.6em;
}
#contactInformation caption{
	text-align: left;
}
#contactInformation th {
	padding: 0em 0.2em;
	font-weight: lighter;
	font-style: italic;
	text-align: right;
}
#contactInformation td {
	padding: 0em 0em;
	text-align: left;
}

/*
 * utility
 * ---------------------------------------------------------------------------*/
#utility {
	position: absolute;
	bottom: 0em;
	right: 1em;
	font-size: 75%;
	line-height: normal;
	text-align: right;
	color: #919999;
}

/*
 * Useful common classes
 * ---------------------------------------------------------------------------*/
.fltrt {
	/* Questa classe puo` essere utilizzata per rendere mobile un elemento a
	   destra nella pagina. L'elemento reso mobile deve precedere l'elemento
	   al quale deve essere affiancato sulla pagina. */
	float: right;
	margin-left: 8px;
}
.fltlft {
	/* Questa classe puc` essere utilizzata per rendere mobile un elemento a
	   sinistra nella pagina. */
	float: left;
	margin-right: 8px;
}
.clearfloat {
	/* Questa classe deve essere inserita in un elemento div o break e deve
	   essere l'elemento finale prima della chiusura di un contenitore che
	   deve contenere per intero un elemento mobile. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*
 * Various Xperiments ...
 * ---------------------------------------------------------------------------*/
#topNavBar a.contact_list:hover {
	color: green;
}