/* 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: 0 auto;
	padding:0;
	font: 10px/10px Tahoma,Verdana,Arial,sans-serif;
	background-repeat:repeat-x;
	text-align:center;
	color:#000000;
}
body a
{
cursor:pointer;
}


html{
	margin: 0;
	padding:0;
}

body table#prehome
{
    height:150px;
    vertical-align:top;
    border:2px;    
}

div#flash
{
    height:120px;
    width:761px;
    text-align:center;
    margin:0 auto;
}
div#flash img
{
    margin-top:8px;
}
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_sup{
	width:100%;
	background-color:#C8C8C8;
    background-image:url(../img/ombrasopra.jpg);
   	background-repeat:no-repeat;
   	background-position:center;
	height:100%;
	margin:auto;
	/*background-color:#FFFFFF;*/
	/* 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{
	height:100%;
	background-repeat:no-repeat;
	background-position:top center;
	background-image:url(../img/sfondo.jpg);
	/*background-color:#FFFFFF;*/
	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_inf{
	width:100%;
	background-color:#C8C8C8;
   	background-image:url(../img/ombrasotto.jpg);
   	background-repeat:no-repeat;
   	background-position:center;
	height:100%;
	margin:auto;
	/*background-color:#FFFFFF;*/
	/* 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. */

}
/*stili specifici per il layout*/
div#header
{
    width:760px;
	height:110px;
	margin:auto;
	text-align:center;
/*	margin-bottom:180px;*/
/*	border-bottom: 3px solid #FFFFFF;*/	
	/*background-color:#330000;*/
}

div#navigation
{
	width:250px;
	position:absolute;
	z-index:1;
	/*background-color:#003300;*/
}
div#navigation1
{
    margin:0 auto;
	padding-top:15px;
	padding-left:17px;
}
div#navigation2
{
	text-align:left;
	margin:0 auto;
	padding-top:15px;
	padding-left:10px;
}
div#navigation3
{
    margin-top:30px;
    text-align:center;
}
div#navigation4
{   
    padding: 0px 0px 0px 50px;
	overflow:visible;
	background-repeat:no-repeat;
	background-position:60px bottom;
}
div#sitemap
{
	position:relative;
	right:0px;
	top:65px;
	text-align:right;
	font:bold 12px/16px Verdana,Arial;
	padding-right:15px;
}
div#sitemap span
{
	width:100px;
	margin:4px auto 0px auto;
	text-align:right;
	margin-left:20px;
}

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;*/
	display:none;
}


div#pre_content
{
/*	margin: 0 170px; da inserire nel caso sia visibile la colonnaextra con padding destro pari alla larghezza della colonan di extra	*/
	width: 760px;
	margin: auto;
	padding: 0px;
	/*background-color:#000000;*/
	/*border-top: 3px solid #FFFFFF;*/
	/*border-bottom: 3px solid #FFFFFF;*/
}
html>body div#pre_content
{
	margin-top: 0px;
}

div#content
{
/*	margin: 0 170px; da inserire nel caso sia visibile la colonnaextra con padding destro pari alla larghezza della colonan di extra	*/
 /* queste tre istruzioni danno un'altezza minima ai contenuti: l'ultima è per explorer e le prime 2 per gli altri browser	*/
	height:auto !important; 
	padding: 0px 0px 0px 0px;
	/*background-color:#FFFFFF;*/
}
div#content2
{   
    padding: 5px 15px 15px 250px;
	/*background-color:#000033;*/
	overflow:auto;
	background-repeat:no-repeat;
	background-position:60px bottom;
}

div#content3
{
	/*padding: 0px px 0px 0px;*/
	min-height:880px;
	height:auto!important;
	height:880px;   /* solo IE 6.0*/
	text-align:center;
	padding:20px 26px 20px 26px;
	background-color:#b5b3b1;
	overflow:visible;
}
/* imposto la larghezza automatica per glia altri browser tranne che per IE6 */
html>body div#content3
{
	width:auto;
}

/* Imposta gli attributi delle immagini presenti sul contenitore  */
div#content3 img.nobordo {
    border: 0px;
    padding:0px 0px 0px 115px;
    
}
div#content3 img.nobordo2 {
    border: 0px;
    padding:0px 0px 0px 0px;
    
}
div#content3 img.nobordologo {
    border: 0px;
    margin:0px 50px;
    padding:0px 0px 0px 0px;
    
}

div#content3 img.bordo1 {
    padding:0px 0px 0px 0px;
    margin:2px;
    border:0px;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.5;
        
}
div#content3 a:hover img.bordo1  {
    padding:0px 0px 0px 0px;
    margin:2px;
    border:0px;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
        
}
div#content3 img {
    border: 1px solid #FFFFFF;
    padding:0px 0px 0px 0px;
    display: block;
    float:left;
    text-align:center;
}
div#content3 ul
{
    margin:0px;
    padding-left:0px;
}
div#content div.col_dx {
    width: 100%;
    float: right;
}

div#content div.col_dx img {
    width:95px;
    height:71px;
}

div#navigation_footer
{
}

div#footer
{
    width:730px;
    height:42px;
	margin:auto;
	text-align:center;
}
div#footer2
{
    padding-top:2px;
	height:34px;
	margin:auto;

} 
table#localita
{
    border:1px solid #ffffff;
    width:100%;
    
}

table#localita td, table#itinerari td
{
    border-bottom:1px dotted #ffffff;
    padding:0px 3px 0px 3px;
}
table#itinerari
{
    border:1px solid #ffffff;
    width:100%;
    text-align:left
}
div#contattiamb
{
padding:21px;
}