/*	lo stile body ovvero quello dell'intera pagina*/
body 
	{
	text-align: center; 
	}

/* TITOLO 1	*/	
h1
{
color:#3366FF;	/* colore del testo */
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-style:normal;	/* STILE, bold,normal,corsivo,ecc */
}

/* TITOLO 2	*/	
h2
{
color:#3366FF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:italic;
font-size:14px;
}

/* IMMAGINI	*/	
img
{
background:white;
padding:5px;
margin:5px;
width:150px;
height:150px;
border:1px solid;
float:left;
}


/*	LINK		*/
a
{
color:#0066FF;
font-weight:bold;
text-decoration:none;
}

/*	LINK QUANDO C'È SOPRA IL CURSORE */
a:hover
{
color:#0099FF;
font-weight:bold;
text-transform:uppercase;
}

/*	LINK VISITATO	*/
a:visited
{
color:#0000CC;
}

/*	IL NOSTRO CONTENITORE	*/
#container 
	{
	border:1px solid gray;
	line-height:150%;
	color: black;
	background-color:#f3f3f3;
	text-align: left; 
	width:760px;
	margin:auto;/* il valore auto imposta generalmente tutti i margini per avere l'elemento al centro */	
	}
/*	IL NOSTRO HEADER, BANNER PRINCIPALE	*/
#header
	{
	font-size: 130%;
	background:white url(img/header.jpg) no-repeat;	
	
	/*Un immagine di background può anche ripetersi nel caso che l'elemento diventi 
	più grande dell'immagine stessa, se usiamo no-repeat, l'immagine non si ripeterà e userà per lo spazione che occorre il colore di sfondo 
	Oltretutto é possibile anche far ripetere l'immagine solo in un senso X o solo in Y con repeat-x o repeat-y
	*/
	
	
	width:auto;
	height:100px;
	}
	
	/* QUESTO È L'ELEMENTO DI NAVIGAZIONE SOTTO IL BANNER */
#navigation
	{
	font-size: 20%;
	background:white;
	border:1px solid;
	margin:auto;
	width:759;	/*importante impostare la grandezza orrizzontale un po' più piccola del container in quando la dimensione totale é = margin left +padding left + width + padding right + margin right */
	height:18px;
	}
	
	
	
	/* LI é l'elemento LIST , impostando però lo stile in questo modo verrà usato questo stile solo ai elementi List(li) che sono contenuti all'interno di un blocco navigation */
#navigation li
	{
	display: inline;	/* importante !!!, display é la modalità di disposizione di più blocchi, se impostiamo inline, se ci sono più blocchi verranno affiancati (se c'é spazio)	
						     mentre se impostiamo : block, gli elementi verranno messi uno sotto l'altro , insomma , sempre un a capo... */
	min-width: 50px;
	height: auto;
	line-height: 1.7em;
	margin: 0px;
	padding: 0px 7px 0px 7px; 
	color: rgb(0,0,0); 
	background-color: rgb(100,120,230);
	font-size: 10px;
	text-transform:uppercase;
	float:right;
	border:1px solid;
	text-align:center;
   }	
	
	/* come per l'elemento list, questo stile vale solo per i LINK inseriti all'interno di una LIST e a sua volta all'interno di un blocco NAVIGATION */
	
#navigation li a 
	{
	display: inline;
	min-width: 50px;
	height: 20px;
	line-height: 1.7em;
	margin: 0px;
	color: rgb(0,0,0); 
	font-size: 10px;
   }
   
   /* come sopra ma per i LINK al passaggio del cursore */
   
#navigation li a:hover
{
	background-position:center;
	color:#FFFFFF;
}
	
	
/*	FOOTER, BANNER IN BASSO CON I RIFERIMENTI ALL'AUTORE */
#footer 
	{
	font-size: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background:url(img/footer.jpg)no-repeat;
	height:30px;
	clear:both;	/* la proprietà clear imposta che il prossimo blocco che segue non gli stia accanto ma vada sotto, per esempio come un immagine che quando é in mezzo al testo
				può essere all'interno del testo oppure, sotto o sopra, in questo caso vogliamo che se c'é qualche box vicino al footer, vada sotto o sopra, ma non daparte */
	}

	/* in questo modo le proprietà vengono usate per tutti e due i blocchi sia header che footer */
#header, #footer 
	{
	color:white;
	background-color: #c90;
	text-align: center;
	}

#menu {
	overflow: hidden; 
	clear: both;
	float: left; 		/* IMPORTANTE !! per poter disegnare il menu a sinistra accanto al contenuto bisogna impostare la proprità float a sinistra (left)*/
	width: 160px; 		/*IMPORTANTE!! allo stesso tempo bisogna impostare una grandezza minina per evitare sovrapposizioni con il blocco che lo affianca */
	min-height: 100px; 
	margin: 5px; 
	
	padding: 0px; 
	color: rgb(0,0,0); 
	font-size: 10px;
	}
#menu ul 
	{
	width: 160px;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	border-bottom: solid 1px rgb(216,206,159);
	background-color: rgb(219,230,241);
	}	
#menu li
	{
	list-style: none;
	margin: 0px;
	padding: 0px;
  	}
	
#menu li.title 
	{
	margin: 0px 0px 0px 0px;
	padding: 3px 5px 2px 15px;
	background:url(img/pTOP.gif) no-repeat;
	color: rgb(255,255,255);
	text-transform: uppercase; 
	font-weight: bold;
	font-size: 120%;
	}
	
#menu li.group a 
	{
	display: block;
	min-height: 1.7em;
	height: auto !important;
	height: 1.7em;
	line-height: 1.7em;
	margin: 0px;
	padding: 0px 7px 0px 15px;
	border-top: solid 1px rgb(200,200,200);
	color: rgb(0,0,0); font-weight: bold;
	font-size: 120%;
	}
	
#menu li a 
	{
	display: block;
	min-height: 1.7em;
	height: auto !important;
	height: 1.7em; 
	line-height: 1.7em;
	margin: 0px;
	padding: 0px 7px 0px 20px; 
	color: rgb(0,0,0); 
	text-decoration: none;
	font-size: 120%;
   }
   
#menu li a:hover, #menu li a:selected 
	{
	color: rgb(0,0,0); 
	background-color: rgb(239,240,251);
	text-decoration: none;
	}


#content 
	{
	margin-left: 170px;		/* IMPORTANTE!! infine il contenuto vero é proprio che deve essere accanto al menu ma non sovraposto , quindi gli si imposta un margine sinistro maggiore della larghezza del menu */
	padding:10px;			/* ricordarsi poi che la larghezza finale del contenuto sarà = larghezza container - larghezza menu
	}