/* STILE PER LAYOUT A 3 COLONNE CON POSIZIONAMENTI ASSOLUTI
VANTAGGI:
-	Avvantaggiati i motori di ricerca
-	Forse maggiore flessibilità di posizionamento delle varie sezioni
CONTROINDICAZIONI:
-	Non è possibile garantire che il piede stia sotto la fine delle 3 colonne ma in generale
	si posiziona sotto la colonna centrale. Se i contenuti quindi sono più corti della colonan del menu o degli extra
	il piede passerà sopra le colonne. Se si àa questa esigenza occorre pensare al layout a 3 colonne FLOAT

STRUTTURA HTML:	
La pagina HTML deve avere una struttura di questo genere:
  <div id="container">				--> Contenitore generale della pagina
    <div id="container2">			-->	Contenitore utilizzato per dare una seconda immagine di sfondo alla pagina così da far estendere le colonne laterali fino al piede
        <div id="header"></div>		-->	Intestazione
        <div id="content"></div>	-->	Contenuti
        <div id="extra"></div>		-->	Contenuti Extra
        <div id="navigation"></div>	-->	Menu
        <div id="footer"></div>		-->	Piede
    </div>
  </div>


NOTE:
-	Simplified Box Model Hack (SBMH):
	Tecnica che vuole correggere un bug di Explorer 5.x che include nalle dimensioni degli oggetti
	anche i bordi e i padding che invece dovrebbero essere aggiunti alla dimensione dichiarata.
	La tecnica ripete tre volte la dimensione sul foglio di stile e, a causa del diferente modo che hanno i browser di
	interpretare questa ridondanza, applicano la giusta dimensione al browser che la sta interpretando.
	In particolare nella seconda dichiarazione (IE 5.x) dobbiamo impostare la misura sottraendo il padding e i bordi che diamo
	all'oggetto in modo che anche questo browser risulti compatibile

-	Per trasformarlo in un layout a 2 colonne nascondendo gli extra basta aggiungere 
	- display:none a div#extra
	- modificare il margine destro di div#content azzerandolo o comunque della distanza dal bordo sinistro della finestra che si vuole mantenere

*/


html,body{
	margin: 0;
	padding:0;
	height:100%; /* in questo modo il div#container può avere altezza 100% perchè ha una dimensione il suo parent*/
	text-align:center;
}

body
{
	background-image:url(../img/sfondo.jpg);
	background-position:top center;
	background-repeat:repeat-y;
}

div#container{
	width:760px;
	height:100%; /* funziona se tolgo position:absolute al menu*/
	/*height:780px;*/
	margin:0 auto;
	text-align:center;	/* allineamento per IE6 */
}
div#container2{
	text-align:left;	/* rimetto l'allineamento a sx dopo la centratura nel div#container */
}

/*stili specifici per il layout*/
div#header
{
	height:322px;
	width:760px;
}

div#navigation
{
	margin-left:5px;
	margin-top:-130px;	/* porta il menu sopra la testata, occorre position:absolute altrimenti explorer sovrascrive la testata	*/
	position:absolute;
/*	width:150px;	/* IE6	*/
/*	width:140px!important;	/* Firefox	*/
	width:130px;
	margin-bottom:0px;
}
*:first-child+html div#navigation /* solo IE 7.0, sovrascrive quello impostato per Firefox */
{
	width:130px!important;
}

div#navigation_sx
{
}


div#content
{
	min-height:580px;	/* IE7 e Firefox	*/
	height:auto !important; /* IE7 e Firefox per sovrascrivere successiva height scritta per IE6	*/
	height:580px; /* IE6 */
	background-image:url(../img/Sf_menu2.gif);
	background-position:top left;
	background-repeat:repeat-y;

}
html>body div#content{
}

div#content_sf
{
	min-height:580px;	/* IE7 e Firefox	*/
	height:auto !important; /* IE7 e Firefox per sovrascrivere successiva height scritta per IE6	*/
	height:580px; /* IE6 */
	background-image:url(../img/Sf_menu.gif);
	background-position:top left;
	background-repeat:no-repeat;
	padding-left:154px;
	padding-bottom:20px;
	/*border-top:1px solid transparent;*/
	display:block;
}