@charset "UTF-8";
body {
	font: 100%/1.2 Arial, Helvetica, sans-serif;
	background: #ffffff;
	margin: 0;
	padding: 0;
	color: #2e302f;
	text-align: left;
}
/* ~~ Selettori tag/elemento ~~ */
ul, ol, dl { /*  A causa delle differenze tra i browser, è buona norma impostare a zero il margine e la spaziatura interna negli elenchi. Per uniformità, potete specificare qui i valori desiderati, oppure nelle voci di elenco (LI, DT, DD) contenute negli elenchi. Tenete presente che le impostazioni effettuate qui verranno applicate a cascata all'elenco .nav a meno che non scegliate di scrivere un selettore più specifico. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* La rimozione del margine superiore permette di aggirare il problema che si crea quando i margini possono fuoriuscire dal blocco che li contiene. Il margine inferiore che rimane permetterà di distanziare gli elementi che seguono.  */
	padding-right: 15px;
	padding-left: 15px; /* L'aggiunta di una spaziatura ai lati degli elementi contenuti nei blocchi, anziché direttamente nei blocchi stessi, consente di evitare ogni calcolo matematico relativo ai riquadri. Come metodo alternativo si può anche utilizzare un blocco nidificato con spaziatura laterale. */
}
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: #073B87;
	text-decoration: none; /*  A meno che non vogliate personalizzare i collegamenti in un modo molto particolare, è bene applicare la sottolineatura per permetterne una rapida identificazione visiva.  */
}
a:visited {
	
	
}
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: underline;
}
/* ~~ Questo contenitore a larghezza fissa circonda tutti gli altri blocchi ~~ */
.container {
	width: 960px;
	background: #FFFFFF;
	margin: 0 auto; /*  Il valore automatico sui lati, abbinato alla larghezza, produce un layout centrato.  */
	
}
/* ~~ All'intestazione non viene assegnata una larghezza. Estenderà l'intera larghezza del layout.  ~~ */
header {
	background: #ffffff;
}

.sidebar1 {
	float: left;
	width: 180px;
	background: #EADCAE;
	padding-bottom: 10px;
}
.content {
	margin: 0 auto;
	padding: 10px 0;
	width: 100%;
	float: left;
}
aside {
	float: left;
	width: 180px;
	background: #EADCAE;
	padding: 10px 0;
}

/* ~~ Questo selettore raggruppato fornisce spazio agli elenchi dell'area .content ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /*  Questa spaziatura rispecchia la spaziatura destra nella regola di intestazione e paragrafo riportata sopra. La spaziatura è stata applicata al lato inferiore per garantire uno spazio tra gli altri elementi negli elenchi e a sinistra per creare il rientro. Può essere regolata a piacere.  */
}

/* ~~ Gli stili dell'elenco di navigazione (rimovibili se scegliete di utilizzare un menu flyout reimpostato come Spry) ~~ */
nav ul {
	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: 15px; /*  Crea lo spazio tra gli elementi di navigazione nel contenuto sottostante  */
}
nav ul li {
	border-bottom: 1px solid #666; /*  Crea la separazione tra i pulsanti  */
}
nav ul a, nav ul a:visited { /*  Raggruppando questi selettori si fa in modo che i collegamenti mantengano l'aspetto di pulsante anche dopo che sono stati visitati  */
	padding: 5px 5px 5px 15px;
	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: 160px;  /*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: #C6D580;
}
nav ul a:hover, nav ul a:active, nav ul a:focus { /*  Cambia il colore dello sfondo e del testo per la navigazione tramite mouse e tastiera  */
	background: #ADB96E;
	color: #FFF;
}

/* ~~ Il piè di pagina ~~ */
footer {
	padding: 10px 0;
	margin:0 auto;
	background: #FFFFFF;
}
/* ~~ Classi float/clear varie ~~ */
.fltrt {  /* questa classe può essere utilizzata per applicare un float a un elemento a destra nella pagina. L'elemento con float deve precedere l'elemento al quale deve essere affiancato sulla pagina. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* questa classe può essere utilizzata per applicare un float a un elemento a sinistra nella pagina. L'elemento con float deve precedere l'elemento al quale deve essere affiancato sulla pagina. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* questa classe può essere inserita in un <br /> o in un blocco vuoto come elemento finale subito dopo l'ultimo blocco con float (all'interno del .container) se il footer viene rimosso o estratto dal .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*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, nav, article, figure {
	display: block;
}