e/* 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

*/


body{
	margin: 0px;
	padding:0px;
	font: 11px/14px "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#F0F0F0;
}


html, form{
	margin: 0px;
	padding:0px;
}
div#pre_container{
	width:100%;
	height:100%;
    background-position:center; 
    background-color:#C8C8C8;
   	background-image:url(img/ombra.jpg);
   	background-repeat:repeat-y;
	text-align:left;
	margin:0 auto;	/* Questo attributo auto serve a centrare il container sulla pagina. IE non lo riconosce e lo ignora per questo abbiamo messo il text-align:center sul body. */

}
div#container{
	width:100%;
	height:100%;
	margin:0 auto;	/* Questo attributo auto serve a centrare il container sulla pagina. IE non lo riconosce e lo ignora per questo abbiamo messo il text-align:center sul body. */

}

div#container_ombra{
	width:790px;
	height:100%;
	margin:0 auto;	/* Questo attributo auto serve a centrare il container sulla pagina. IE non lo riconosce e lo ignora per questo abbiamo messo il text-align:center sul body. */
    background-repeat:repeat-y;
}
html>body div#container_ombra{
    background-image:url(img/ombra.png);
}
/*stili specifici per il layout*/
div#header
{
	width:100%;
	text-align:center;
	height:296px;
}

div#navigation
{
/*	position: relative; 
	top:183px; 
	left: 120px;*/
	/* Inizia il Simplified Box Model Hack */
	width: 766px; /* Dimensioni per Opera 5 */
	width: 766px; /* Dimensioni per Explorer 5.x */
	width: 766px; /* Dimensioni per browser standard compliant */
	padding: 0px 0px 0px 0px;
	height:76px;
	margin:auto;
	background-image:url(img/sf_menu.jpg); /* per trasparenza IE*/
	background-position:top left;
	background-repeat:repeat-x;
}

div#sitemap
{
	position:absolute;
	left:738px;
	top:3px;
	width:200px;
	text-align:center;
}

div#extra
{
	position: absolute; 
	top: 253px;
	left: 565px;
	width: 184px; /* Dimensioni per Opera 5 */
	width: 194px; /* Dimensioni per Explorer 5.x */
	width: 184px; /* Dimensioni per browser standard compliant */	
/*	width: 160px;
	width:170px;
	width:160px;
	padding: 10px 5px;*/
}


div#pre_content
{
/*	margin: 0 170px; da inserire nel caso sia visibile la colonnaextra con padding destro pari alla larghezza della colonan di extra	*/
	margin: 0px 0px 0px 0px;
	padding: 0px 5px;
	border: 0px solid #ffffff;
}

div#content
{
/*	margin: 0 170px; da inserire nel caso sia visibile la colonnaextra con padding destro pari alla larghezza della colonan di extra	*/
	width:766px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	min-height:380px; /* queste tre istruzioni danno un'altezza minima ai contenuti: l'ultima è per explorer e le prime 2 per gli altri browser	*/
	height:auto !important; 
	height:380px;
	text-align:justify;
	background-color:#FFFFFF;
	font: 13px/17px Tahoma,Verdana,Arial,sans-serif;
}

/* Imposta gli attributi delle immagini presenti sul contenitore  */
div#content .mappa {
    border: 1px solid #D42163;
    float: right;
    margin:0px 0px 0px 12px;
    width:390px;
    height:390px;
}

div#content img.dx {
    border: 1px solid #D42163;
    padding: 2px;
    display: block;
    float: right;
    margin:12px;
}
div#content img.sx {
    border: 1px solid #D42163;
    padding: 2px;
    display: block;
    float: left;
    margin:12px;
}

div#content img.ico_luoghi {
    padding: 2px;
    display: block;
    float: left;
    margin:0px 35px 20px 0px;
}



div#content div.col_dx {
    width: 120px;
    float: right;
}

div#navigation_footer
{
	width:766px; /* controllare se va impostata la stessa larghezza anche sul footer */
	position: relative; 
	/* Inizia il Simplified Box Model Hack */
	text-align:center;
	padding: 5px 0px 0px 0px;
	margin: 10px 10px 10px 10px;
	background-color:#000000;
	color:#555555;
	height:35px;
	border-top: 0px dashed #336633;
	margin:auto;
}

div#footer /* controllare se va impostata la stessa larghezza anche sul navigation_footer */
{
    FONT: 11px "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-ALIGN: left;
    vertical-align:bottom;
	background-image:url(img/sf_piede.png);
	background-position:top left;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	/*margin: 0px 130px;*/
	margin: auto;
	padding:30px 0px 0px 0px;
	height:60px;
	width:766px; 
} 
div#footer div
{
	font:12px/20px "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin-top:0px;
    color:#861540;
}

div#footer span
{
	font:10px/17px "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
    display:block;
    margin:3px auto;
} 

/*div#footer div.sx
{
    text-align:left;
    width:40%;
    float:left;
    margin-left:40px;
} 

div#footer div.dx
{
    text-align:right;
    width:40%;
    float:right;
    margin-right:40px;
} */