/*

@1: Gli aggiornamenti sono tutti segnati con @1 (eventuali aggiornamenti futuri saranno @2, ecc.

PREMESSA:
Invece che far fare a Marica un documento PDF soggetto a interpretazioni, siccome lei ci tiene molto,
mi sono permesso di mettermici vicino un paio d'ore e tirare su questo esempio.
Per semplificare la visualizzazione degli stili io uso Firefox + web developer toolbar
che, premendo CTRL-SHIFT-Y permette di vedere al volo gli stili della pagina (ed anche il sorgente dello stile relativo: molto comodo).

-------------------

COLORI:

grigio scuro testo: rgb(107, 121, 130)
grigio scuro sfondo: rgb(136, 147, 154)
grigio chiarissimo: rgb(230, 234, 236)
rosso coral: rgb(205, 32, 28)

-------------------

STRUTTURA:
la pagina è divisa in due blocchi orizzontali: header e content_wrapper, entrambi centrati sullo sfondo
header contiene il logo, l'immagine del corallo e la barra dei menu
content_wrapper contiene due contenitori innestati per motivi di sfondi da sovrapporre,
quindi c'è una colonna laterale a sinistra (column) e un blocco principale (main)
in fondo a tutto c'è un footer per le info legali obbligatorie.
Lo sfondo dell'intera pagina sfuma in basso verso il grigio uniforme, per questo è molto
importante che il sito non sia mai meno alto di un tot.

-------------------

HEADER:
l'header contiene il logo inserito come immagine link e un div per la foto del corallo - è realizzato
come sfondo così ci si può mettere del testo.
un'alternativa potrebbe essere inserirlo come immagine e mettere il testo nell'immagine stessa,
ma potrebbe essere più complicato per le traduzioni.
Sulla home ci dovrebbe essere il filmato (quindi un box Flash) - in questo caso il problema
del testo non si pone.

MENUBAR:
I menu sono dentro una "menubar" e sono realizzati con dei "menuitem"
(che hanno tutti "display: block", anche quelli che sono "a") di larghezza fissa,
con i relativi stili che sono tutti "menuitem" più
menuhome, menu2, menu3, menu4 in versione cliccabile "a" e
menuhome_here, menu2_here, menu3_here, menu4_here in versione non cliccabile (div) = "sono in questa pagina".
Ovviamente nel sito reale la creazione dell'HTML dei menu sarà dinamica, per questo ci sono tutte le classi.
@1: Nelle sotto-pagine (tipo page2_1 e page2_1_1) nel div menu_here va messo comunque un link

COLUMN:
La colonna sinistra è pensata per inserire rimandi di testo dinamici con eventuali titoli e link.
Attenersi preferibilmente a questa struttura. Per eventuali modifiche, chiedere! :)

-------------------

TESTI:
Per i livelli di titoli si usa h1, h2, h3, h4. Per i testi è previsto sempre che si usi <p>:
usare <br> solo per andare a capo senza spaziatura

RIQUADRI:
Il promobox sulla homepage ha la sua classe promo con i due div interni promo_l e promo_r
IMPORTANTE: le immagini di questi box dovranno essere sempre 183x60...
eventualmente si può cambiare l'altezza, ma non la larghezza, per favore!

-------------------

COSE DA FARE:
Il sito di esempio è stato messo su velocemente e ovviamente non tiene conto
di tutti i casi possibili e della compatibilità.
Pre esempio, può darsi che allungando molto il testo delle colonne laterali
o delle pagine ci siano degli scompensi, ecc.
oppure che non funzioni su qualche browser... per questo... buon lavoro! :)

*/

* {
	margin: 0px;
}

body
{
	background-color: rgb(136, 147, 154);
	background-image: url("../images/bg.gif");
	background-position: left top;
	background-repeat: repeat-x;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/***********************/
/*                     */
/* TITOLI              */
/*                     */
/***********************/

	h1
	{
		font-weight: normal;
		line-height: 24px;
		font-size: 24px;	
		margin-bottom: 20px;
	}
	
	h2
	{
		font-weight: normal;
		line-height: 16px;
		font-size: 16px;	
		margin-bottom: 14px;
		text-transform: capitalize;
	}
	
	h3
	{
		line-height: 24px;
		text-transform: uppercase;
		vertical-align: bottom;
		font-size: 11px;	
		font-weight: bold;
	}
	
	h4
	{
		margin-top: 20px;
		margin-bottom: 4px;
		font-size: 11px;	
		font-weight: bold;
	}

/***********************/
/*                     */
/* LINK                */
/*                     */
/***********************/

	a
	{
		text-decoration: none;
		color: rgb(205, 32, 28);
	}
	
	a:hover
	{
		text-decoration: underline;
	}
	

/***********************/
/*                     */
/* HEADER              */
/* (zona superiore)    */
/*                     */
/***********************/

	.header, .content_wrapper
	{
		position: relative;
		background-color: white;
		color: rgb(107, 121, 130);
		margin-left: auto;
		margin-right: auto;
		width: 700px;
		min-width: 700px;
	}
	
	.header
	{
		height: 308px;
		min-height: 308px;
		background-image: url("../images/bg_header.gif");
	}


/***********************/
/*                     */
/* LOGO                */
/*                     */
/***********************/

	.logobox, .coralbox
	{
		position: absolute;
		background-color: rgb(230, 234, 236); /* così non si vede l'ombra mentre carica */
	}
	
	.logobox
	{
		left: 37px;
		top: 48px;
		width: 190px;
		height: 190px;
	}
	
	.logo
	{
		position: absolute;
		left: 0px;
		top: 0px;
		border-style: none;
		border-width: 0px;
	}
	
	
/***********************/
/*                     */
/* FOTO CORALLO        */
/*                     */
/***********************/

	.coralbox
	{
		left: 243px;
		top: 48px;
		width: 420px;
		height: 190px;
	}
	
	.coralbox p
	{
		font-size: 24px;
		text-transform: uppercase;
		color: rgb(230, 234, 236); 	/* così non si vede l'ombra mentre carica */
		margin-left: 19px;
		margin-top: 80px;
		letter-spacing: 2px;
	}
	
	/* Variazioni foto corallo */
	
		.coralhome
		{
			background-image: url("../images/coral_home.jpg");
		}
		
		.coral2
		{
			background-image: url("../images/coral_2.jpg");
		}
		
		.coral3
		{
			background-image: url("../images/coral_3.jpg");
		}
		
		.coral4
		{
			background-image: url("../images/coral_4.jpg");
		}
		

/***********************/
/*                     */
/* MENU                */
/*                     */
/***********************/

	.menubar
	{
		position: absolute;
		left: 232px;
		top: 238px;
		width: 438px;
		height: 41px;
		min-height: 41px;
		line-height: 41px;
		text-transform: uppercase;
		color: rgb(230, 234, 236);
		font-weight: bold;
		padding-left: 11px;
	}
	
	/* LINK nel menu */
	
	.menubar a
	{
		color: rgb(107, 121, 130);
	}
	
	.menubar a:hover
	{
		text-decoration: none;
		color: rgb(230, 234, 236);
	}
	
	/* questo è lo stile standard di tutte le voci di menu, sia pagina corrente che link */
	.menuitem
	{
		display: block;
		float: left; 
		min-width: 105px;
		width: 105px;
		text-align: center;
	}
	
	/* variazioni menu per pagina corrente */
		.menuhome_here
		{
			background-image: url("../images/bg_menu_home.jpg");
		}
		
		.menu2_here
		{
			background-image: url("../images/bg_menu_2.jpg");
		}
		
		.menu3_here
		{
			background-image: url("../images/bg_menu_3.jpg");
		}
		
		.menu4_here
		{
			background-image: url("../images/bg_menu_4.jpg");
		}
	
		/* per le sotto-pagine, il menu resta cliccabile e "bianco" */
		.menuhome_here a, .menu2_here a, .menu3_here a, .menu4_here a
		{
			color: rgb(230, 234, 236);
		}

	/* variazioni menu per hover */
		.menuhome:hover
		{
			background-image: url("../images/bg_menu_home.jpg");
		}
		
		.menu2:hover
		{
			background-image: url("../images/bg_menu_2.jpg");
		}
		
		.menu3:hover
		{
			background-image: url("../images/bg_menu_3.jpg");
		}
		
		.menu4:hover
		{
			background-image: url("../images/bg_menu_4.jpg");
		}
	

/***********************/
/*                     */
/* CONTENUTI           */
/* (Zona Inferiore)    */
/*                     */
/***********************/

/* ci sono due scatole una nell'altra per motivi di background da sovrapporre*/
	.content_wrapper
	{
		background-image: url("../images/bg_content_wrapper.gif");
		background-repeat: repeat-y;
		min-height: 384px;
		vertical-align: top;
	}
	
	.content
	{
		width: 100%;
		background-image: url("../images/bg_content.gif");
		background-position: left top;
		background-repeat: no-repeat;
		vertical-align: top;
	}
	
	/* @1: modificato sistema di margini per permettere contenuto di "main" più "lungo" */
	/*.tratteggiato
	{
		margin-right: 38px;
		margin-bottom: 20px;
		min-height: 364px;
		height: auto;
		background-image: url("../images/tratteggio.gif");
		background-position: 242px 0px;
		background-repeat: repeat-y;
	}*/

/* i link fuori dal blocco di testo vanno sempre messi allineati a destra */
	.link
	{
		width: 100%;
		text-align: right;	
	}
	

/* questa è la colonna di sinistra */
	/* @1: modificato sistema di margini per permettere contenuto di "main" più "lungo" */
.content_left
{
	float: left;
	width: 34.5%;
	min-height: 100%;
	}
.content_left_text
{
	padding-left: 40px; padding-right: 10px;
	}
.content_right
{
	float: left;
	width: 64.5%;
	border-left: dashed 1px #c6c6c6;
	}
.content_right_text
{
	padding-left: 15px;
	padding-right: 30px;
	text-align:justify;
	}
.column
{
		float: left;
		padding-left: 30px;
	}
	
	.column_contents
	{
		padding: 5px;
		}
	
	/* variazioni per la colonna */
		.column p
		{
			margin-left: 20px;
		}
		
		.column .link
		{
			font-size: 11px;
		}

/* @1: questo è lo spazio in cui va la path per le sottopagine */
	.path
	{
		width: 100%;
		margin-bottom: 10px;
		text-transform: lowercase;
		font-size: 10px;
	}

/* questa è la zona principale del testo della pagina */
	/* @1: modificato sistema di margini per permettere contenuto di "main" più "lungo" */
	.main
	{
		padding-right: 45px;
		float: right;
		width: 400px;
		top: 0px;
		border: solid 1px orange;
	}

/* nel main, è bene che i paragrafi siano sempre separati */
		.main p
		{
			margin-bottom: 1em;
		}
	
/* inserire uno spaziatore tra sezioni diverse della pagina */
	.spacer
	{
		width: 100%;
		height: 20px;
		min-height: 20px;
	}


/***********************/
/*                     */
/* PROMOBOX            */
/* colonnine interne   */
/*                     */
/***********************/

	.promo
	{
		width: 100%;
		margin-bottom: 50px;
	}
	
		.promo img
		{
			border-style: solid;
			border-width: 1px;
			border-color: rgb(107, 121, 130);
			width: 183px;
			height: 60px;
			margin-top: 10px;
			float: left;
		}
		
		.promo_l, .promo_r
		{
			float: left;
			width: 185px;
		}
		
		
		.promo_l
		{
			left: 0px;
		}
		
		.promo_r
		{
			float: right;
		}
	

/***********************/
/*                     */
/* FOOTER              */
/*                     */
/***********************/

	.content_footer
	{
		width: 100%;
		min-height: 27px;
		background-image: url("../images/bg_content_footer.gif");
		background-position: left top;
		background-repeat: no-repeat;
		text-align: center;
		line-height: 27px;
		font-size: 10px;
		color: rgb(230, 234, 236)
	}
	


	
	
/********modifiche per IE6*************************/
#SiteContainer
{
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	}