@charset "utf-8";
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	/*line-height:110%;*/

	background-color: #DCDFEA;
	margin: 0;
	padding: 0;
	color: #000;
/*	line-height:16px;*/
}
/* ~~ Selettori tag/elemento ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}
/* i paragrafi titolo della guida sono centrati*/

.titolo_guida {
	width: auto;
	margin: auto;
	padding: 0;
	padding-bottom: 10px;
	
}
/*la spaziatura viene gestita dalla classe contenuto titolo guida, come la giustificazione del testo.I p contenuti nel titolo vengono azzerati sia nei margini che nel padding*/
.contenuto_titolo_guida {
	margin: 0;
	padding-top: 0;
	padding-bottom: 0px;
	text-align: center;
	font-weight: bold;
}

.titolo_sezione {
	width: auto;
	margin-left: -10px; /* Sposto il titolo sezione a sx per farlo risaltare un po */
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: bold;
}
.contenuto_sezione {
	margin:0;
	padding:0;
	text-align:justify;
}
/*la spaziatura viene gestita dalla classe contenuto titolo guida, come la giustificazione del testo.I p contenuti nel titolo vengono azzerati sia nei margini che nel padding*/
div.contenuto_titolo_guida p {
	margin:0;
	padding:0;
	padding-top:0px;
	padding-bottom:0px;
 	text-align:center;
	font-weight:bold;
}

div.contenuto_sezione p {
	margin:0;
	padding:0;
	text-align:justify;

	padding-top:5px;
	padding-bottom:5px;
	
}

a img { /*  Questo selettore rimuove il bordo blu predefinito visualizzato in alcuni browser intorno a un'immagine quando circondata da un collegamento.   */
	border: none;
}
/* ~~ L'applicazione di stili ai collegamenti del sito deve rispettare questo ordine, compreso il gruppo di selettori che creano l'effetto hover. ~~ */
a:link {
	color: #0000CC;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;

}
a:visited {
	color: #0000CC;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	
}
a:hover, a:active, a:focus { /*  Questo gruppo di selettori conferisce alla navigazione tramite tastiera gli stessi effetti hover che si producono quando si usa il mouse.  */
	text-decoration: none;
}
.content a:hover {
	background-color:#0000CC;
	color: #FFF;
}
/* ~~ Questo contenitore a larghezza fissa circonda tutti gli altri blocchi ~~ */
.container {
	width: 960px;
	background-color: #DCDFEA;
	margin: 0 auto; /*  Il valore automatico sui lati, abbinato alla larghezza, produce un layout centrato.  */
	padding:0;
}
/* ~~ All'intestazione non viene assegnata una larghezza. Estenderà l'intera larghezza del layout.  ~~ */
header {
	background-color: #DCDFEA;
}
/* ~~ Queste sono le colonne del layout. ~~  */


.sidebar1 {
	float: right;
	width: 140px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #DCDFEA;
	padding-bottom: 0px;
}
.content {
	padding-bottom: 0px;
	padding-top: 0px;
	width: 820px;
	float: right;

}

/* ~~ Questo selettore raggruppato fornisce spazio agli elenchi dell'area .content ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 30px; 
}

/* ~~ Gli stili dell'elenco di navigazione (rimovibili se scegliete di utilizzare un menu flyout reimpostato come Spry) ~~ */
ul.nav {
	list-style: none; /*  Rimuove l'indicatore di elenco */
	/*border-top: 1px solid #666;  Crea il bordo superiore dei collegamenti; tutti gli altri vengono posizionati utilizzando un bordo inferiore sul LI  */
	/*margin-bottom: 10px;*/ /*  Crea lo spazio tra gli elementi di navigazione nel contenuto sottostante  */
}
ul.nav li {
	
	/*border-bottom: 1px solid #666; /*  Crea la separazione tra i pulsanti  */
}
ul.nav a, ul.nav a:visited { /*  Raggruppando questi selettori si fa in modo che i collegamenti mantengano l'aspetto di pulsante anche dopo che sono stati visitati  */
	padding: 2px 0px 2px 1px;
	display: block; /*  Specifica le proprietà block del collegamento facendo sì che riempia l'intero LI che lo contiene. Fa in modo che l'intera area risponda a un clic del mouse.  */
	width:226px;  /*Questa larghezza rende cliccabile l'intero pulsante in IE6. Se non avete bisogno di supportare IE6, può essere rimossa. Calcolate la larghezza corretta sottraendo la spaziatura di questo collegamento dalla larghezza del contenitore della barra laterale.  */
	text-decoration: none;
	background-color: #DCDFEA;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #0000CC;
	color: #FFF;
}

/*rende i link della tabella elementi blokko in modo da colorare sfondo*/
div.sidebar1 a, div.sidebar1 a:visited {
	padding: 0px;
	display: block;
	/*width:226px;*/
	text-decoration: none;
	background-color: #DCDFEA;
}

/*colora il link della tabella quando con mouse over*/
div.sidebar1 a:hover, div.sidebar1 a:active, div.sidebar1 a:focus {
	background-color: #0000CC;
	color: #FFF;
}	
/* attributi per la colonna contenuta nella side bar */
div.sidebar1 table {
	border: 0;
	padding: 2px;
	
	
}
/*Allineamento elementi contenuti in tabella,per allinearli verticalmente in alto*/
div.sidebar1 table tr {
	vertical-align: top;
}

/*Classe per allineare le immagini contenute nei campi tabella*/
div.immagine_in_tabella_sidebar img{
	display: block;
 	margin-left: auto;
 	margin-right: auto;
 	vertical-align:middle;
	border:0;
}
/*Usata per il banner alla fine del testo della guida,serve a contenere il banner*/
.banner_bottom {
	margin:15px;
	padding:0px;
	width:320px;
	height:250px;
}

.contenitore_banner a:hover{
	color: #0000CC;
	background-color: #DCDFEA;
}

/*Usata per il banner alla destra nella guide*/

.contenuto_sidebar {
	margin:0;
	padding:0;
	text-align:center
}

/*Blocco contenitore dei link in basso sotto la sidebar e sotto il contenuto guida servono a contenere i link con >> o <<*/

.contenitore_link_avanti_indietro {
	padding-top: 15px;
	background-color: #DCDFEA;
	width: 820px; /*Porta la dimensione pari al articolo*/
	margin: 0;
	padding-bottom: 20px;
}

/* div per i link alla base della guida prima del footer, per mettere i link
sotto la sidebar o a sinistra in basso sotto il contenuto */
.link_avanti {
	float: right;
	width: 50%;
	text-align: right;
	margin-right: 0;
	margin-left: 0;
	padding: 4px 0px 0px 0px;
}
.link_indietro {
	float: right;
	margin-left: 0;
	text-align: left;
	padding: 4px 0px 0px 0px;
	width: 50%;
}

/* ~~ Il footer ~~ */
footer {
	width: 820px;
	padding-top: 15px;
	padding-bottom: 10;
	background-color: #DCDFEA;
	position: relative;
	/* fornisce hasLayout a IE6 per ottenere un clearing corretto */
	clear: both;
	 /* questa proprietà clear obbliga il .container a tenere conto di dove terminano le colonne e a contenerle */
}

footer p {
	text-align:right;
	padding:0;
}

.footer_content {
	margin-left: 0;
	
}

.briciole {
	font-size: 9px;
	font-weight: bold;
	margin:0px;
	padding-bottom:10px;
	padding-top:5px;
	width:820px; 
	text-align: right;
	color: #000000;

}
.logo_top , .top_banner {
	margin:0;
	margin-left:auto;
	margin-right:auto;
	padding:0;
	text-align:center;
}

.top_menu {
	padding-top:5px;
	margin:0px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	position: relative; /* serve per fare in modo ke il menu nn vada sotto il footer*/
	z-index: 9999999; /* serve per fare in odo ke il menu nn vada sotto il footer*/	
}


/*Supporto HTML 5 - Imposta nuovi tag HTML 5 per display:block in modo da indicare ai browser come eseguire il rendering corretto dei tag. */
header, section, footer, aside, article, figure, evidenziatore {
	display: block;
}
header{
	margin:0;
	padding:0;
	width:820px; 
	
}
section {
	display: block;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
	margin: 0px;
}

.contenuto_sezione img {
	vertical-align:baseline;
}

.evidenziatore {
	display:inline;
	margin:0;
	padding:0;
	background-color:#8DE2FE;
	text-align:justify;
}
.evidenziatore_1 {
	display: inline;
	margin: 0;
	padding: 0;
	background-color: #F2EC58;
	text-align: justify;
}
.evidenziatore_2 {
	display: inline;
	margin: 0;
	padding: 0;
	background-color: #EF62A6;
	text-align: justify;
}

/* LA CLASSE IMGGUIDA SI UTILIZZA SOLO PER LE IMMAGINI CHE SONO CONTENUTE DIRETTAMENTE NEL CORPO GUIDA E CENTRATE, per le immagini contenute nelle tabelle usare i modelli nella cartella template del sito */
.imgguida {
 display: block;
 margin-left: auto;
 margin-right: auto;
/* margin-top: 10px;
 margin-bottom: 10px;*/ 
 padding-top:10px;
 padding-bottom:10px;
 }