@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: Georgia, Times, serif; */
	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 {
    margin: 0em;
	padding: 0em;
}
#top h1 {
	background: #000000;
    margin: 0em;
	padding: 0em;
	color: #ffffff;
	font: 1.4em Arial, Helvetica, sans-serif;
	font-weight: normal;
}

/*
 * topBar - layer contentente il titolo della pagina
 * ---------------------------------------------------------------------------*/
#topBar {
	margin: 0;
    padding: 0;
    background-image: url("../images/main-nav-item-bg.png");
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: 0 0px;
    background-color: #525252;
}

/*
 * 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 */
	margin: 0em auto 0.5em auto; 
    /* i margini auto (insieme a una larghezza) centrano la pagina */
	padding: 0em 0em;
    height: 33px;
    line-height: 2em;
	color: #3366cc;
	text-align: left; 
    /* sostituisce l'impostazione text-align: center nell'elemento body. */
}
#topNavBar #tl_homepage {
   border-left: 1px solid #323232;
   background-color: #CC1010;
}
#topNavBar a {
    display: block;
    float: left;
	padding: 0em 1em;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
    text-align: center;
    border-right: 1px solid #323232;
	text-decoration: none;
    color: #9A9A9A;
    outline: medium none;
    cursor: pointer;
}
#topNavBar a:hover {
    background-image: url("../images/main-nav-item-bg.png");
    background-position: 0 -60px;
    background-attachment: fixed;
    background-color: #727272;
	color: #FFFFFF;
}
#topNavBar a:active {
	color: #FF0000;
}
#topNavBar .separator {
	padding: 0em 0.2em;
	border-right: #000000 1px solid;
}

/*
 * container - layer contenitore della parte centrale della pagina
 * ---------------------------------------------------------------------------*/
#container {
	width: 59em;
	background-color: #FFFFFF;
	margin: 0em  auto 1em auto;
	border: 1px solid #000000;
	text-align: left;
}

/*
 * 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;
}
#header h1 {
	/* Azzerando il valore margin dell'ultimo elemento del div #header si
	   evita la compressione del margine, con la creazione di uno spazio
	   inspiegabile tra i div.
	   Se il div e` circondato da un bordo, questo accorgimento non e` 
       necessario perche' anche il bordo impedisce la compressione del margine
	 */
	margin: 0; 
	/* l'uso del valore padding al posto di margin consente di distanziare
	   l'elemento dai bordi del div */
}

/*
 * 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 0.6em;
}
#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; 
	padding: 0em 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;
    padding: 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, cosi` 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;
}

#commandBar {
	margin: 0em 0em 0em 0em;
	background-color: #dddddd;
    padding: 0em 0.6em;
	/* questo padding corrisponde all'allineamento a sinistra degli elementi
	   nei div sottostanti.
	   Se in #header viene utilizzata un'immagine anziché un testo, può essere
	   utile rimuovere il padding.
	 */
	 border-bottom: thin dashed green;
}