/* 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;
	padding:0;
}


html{
	margin: 0;
	padding:0;
}

body{
	font-family: Verdana,Arial,sans-serif;
	font-size: 11px;
	text-align:center;
	color:#663300;
}

div#container{
	position: relative;
	width:810px;
	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#container2
{
	background-color:#ffffff;
}

/*stili specifici per il layout*/
div#header
{
	/*height:337px;*/
	height:121px;
	width:804px;
	text-align:left;
	vertical-align:middle;
	font:bold 20px Verdana, Arial;
	color:#ffffff;
	background-image:url(../img/testata/header.png);
	background-position:bottom right;
	background-repeat:no-repeat;
	padding:0px 4px;
}

div#navigation
{
	position: absolute; 
	top: 125px; 
	left: 13px;
	width:810px;
	/* Inizia il Simplified Box Model Hack */
	/*width: 222px; /* Dimensioni per Opera 5 */
	/*width: 232px; /* Dimensioni per Explorer 5.x */
	/*width: 222px; /* Dimensioni per browser standard compliant */
	padding: 0px 0 0 0px;
	
}

div#sitemap
{
	height:15px;
	position:relative;
	top:75px;
	left:36px;
}

div#shortcut
{
	display:block;
	position:absolute;
	top:166px;
	right:5px;
	width:auto;
	text-align:right;
}

div#extra
{
	position: absolute; 
	top: 645px;
	left: 2px;
	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#content
{
/*	margin: 0 170px; da inserire nel caso sia visibile la colonnaextra con padding destro pari alla larghezza della colonan di extra	*/
	margin: 50px 0px 0px 21px;
	/*padding: 15px 6px;*/
	padding:0px 0px;
	min-height:390px; /* 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:390px;
	text-align:justify;
	background-color:#ffffff;
	border:0px solid #000000;
	width:790px;	/* la devo indicare per permettere il corretto allineamento con il piede content_se */
}

div.content_nw
{
	background-color:#ffffff;
	border:0px solid red;
	background-image:url(../img/layout/nw.gif);
	background-repeat:no-repeat;
	background-position:top left;
	height:6px;
	font-size:1px;
}

div.content_ne
{
	background-color:#ffffff;
	border:0px solid blue;
	background-image:url(../img/layout/ne.gif);
	background-repeat:no-repeat;
	background-position:top right;
	height:6px;
	font-size:1px;
	margin-left:6px;
}
div.content_n
{
	background-color:#ffffff;
	border:0px solid green;
	background-image:url(../img/layout/n.gif);
	background-repeat:repeat-x;
	background-position:top;
	margin-left:0px;
	margin-right:6px;
	height:6px;
	font-size:1px;
}
div.content_w
{
	background-color:#ffffff;
	border:0px solid red;
	background-image:url(../img/layout/w.gif);
	background-repeat:repeat-y;
	background-position:top left;
	margin-left:0px;
	margin-right:0px;
}
div.content_e
{
	background-color:#ffffff;
	border:0px solid red;
	background-image:url(../img/layout/e.gif);
	background-repeat:repeat-y;
	background-position:top right;
	margin-left:6px;
	margin-right:0px;
}
div.content_sw
{
	background-color:#ffffff;
	border:0px solid red;
	background-image:url(../img/layout/sw.gif);
	background-repeat:no-repeat;
	background-position:bottom left;
	height:6px;
	font-size:1px;
}
div.content_se
{
	background-color:#ffffff;
	border:0px solid red;
	background-image:url(../img/layout/se.gif);
	background-repeat:no-repeat;
	background-position:bottom right;
	margin-left:6px;
	height:6px;
	font-size:1px;
}
div.content_s
{
	background-color:#ffffff;
	border:0px solid red;
	background-image:url(../img/layout/s.gif);
	background-repeat:repeat-x;
	background-position:bottom;
	height:6px;
	margin-left:0px;
	margin-right:6px;
	font-size:1px;
}
div.content_c
{
	padding: 28px 10px;
	min-height:300px;
}
div#footer
{
	text-align:center;
	padding: 0px 0px 0px 0px;
	color:#666666;
	font:9px/13px Verdana, Arial;
} 
div#footer div
{
	font:italic 10px/20px Verdana, Arial;
	margin-top:10px;
} 

div#subFooter
{
	margin-top:10px;
	text-align:center;
}

div#subFooter table td
{
	vertical-align:middle;
	padding:3px;
	font-size:9px;
	color:#999999;
}