@charset "UTF-8";

/* MEYER RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* MEYER RESET */

/* TAGS */

body {
	
	background: url(_IMG/body-bg.png) repeat-x;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	
	color:#777777;
}
a:link, a:visited {
	
	text-decoration:none;
	color:#f78a16;
}
a:hover, a:active {
	
	text-decoration:underline;
}

/* gli h1 sono definiti più in basso, nella parte 'content' */

h2 {
	
	font-weight:bold;
}

ul {
	
	margin: 25px 0;
}

ul li {
	
	padding:2px 0;
	
}

iframe {
	
	float:left;
}

/* TAGS */


/* ELEMENTI */

/* il contenitore di tutto il sito */
#container {

	/*background-color:#006;*/
	
	width:840px;
	
	margin: 15px auto 0 auto;
	
	padding-bottom:50px; /* così si stacca un po dal fondo (non di più sennò a 1024x768 la barra di scorrimento compare anche in homepage)  */
}
/* il menu principale orizzontale in alto */
#menu {
	
	background-color:#acacac;
	/*background-color:#366;*/
	
	letter-spacing:0.2em;
	font-size:11px;
	
	width:840px;
	height:25px; /* come la lineheight e font-size delle liste nel menu */ 
	
	margin:0 auto;
}
	#menu ul {
		
		width:840px;
		
		margin:0;
		padding:0;
	}
	#menu ul li {
		
		text-align:center;
		
		width:120px; /* 840:7 */
		height:25px; /* come il menu */ 
		line-height:25px;
		
		margin:0 auto;
		padding:0;
		
		float:left;
	}
	#menu ul li a:link, #menu ul li a:visited {
		
		text-decoration:none;
		color:white;
		
		display:block;
	}
	#menu ul li a:hover, #menu ul li a:active {
		
		background-color:#f78a16;
		
		text-decoration:none;
		color:white;
		
		display:block;
	}
	#menu ul li.visited {
		
		background-color:#f78a16;
		
		text-decoration:none;
		color:white;
		
		display:block;
	}
/* tutto il rettangolone centrale (parte interna con immagini cliccabili e scritte di cornice) */	
#content {
		
	/*background-color:#f78a16;*/
	background-image:url(_IMG/sfondo.jpg);
	
	width:560px;
	height:380px;
	padding:30px 20px;
	
	margin:65px auto 0 auto;
	
	position:relative;
}
/* il testo di cornice che cambia (quello che sta in basso) */
	#content-text {
			
		/*background-color:#cccccc;*/
		
		margin-left:20px;
		
		width:560px;
		height:30px;
		line-height: 30px;
		
		position:absolute;
		bottom:0;
		left:0;
	}
	#content-text h1 {
		
		/*background-color:#C63;*/
		float:right;
		
		font-size: 20px;
		text-align:right;
		
		/* così l'ultima lettera a destra è allineata correttamente con il bordo destro del rettangolo */
		position:relative;
		left:0.5em;
		letter-spacing:0.5em;
		/* aggiusto empiricamente la posizione del testo in altezza */
		top:1px;
	}
/* il maledetto link alla mail verticale */
	#content-mail-link a {
			
		/*background-color:#333333;*/
		
		position:absolute;
		top:30px;
		right:0;
	}
	#content-mail-link a:link, content-mail-link a:visited {
		
		background-image:url(_IMG/tasto-mail_up.jpg);
		
		width:20px;
		height:380px;
		
		/* così il testo del link non si vede (devo per forza metterci del testo perché funzioni)*/
		display: block;
		text-indent: -5000px;
		overflow: hidden;
	}
	#content-mail-link a:hover, #content-mail-link a:active {
		
		background-image:url(_IMG/tasto-mail_down.jpg);
	}
/* la parte interna del rettangolone centrale (solo parte interna con le immagini cliccabili) */
#displayer {
		
	/*background-color:blue;*/
	
	width:560px;
	height:380px;
}	
/* il contatore delle pagine dei progetti, ovvero '1 2 3' */
#counter {
		
	/*background-color:#34dd56;*/
	
	/* prima */
	/*width:540px;
	height:15px;
	
	margin:30px auto 0 auto;*/
	/* prima */
	
	width:840px;;
	height:15px;
	
	position:absolute;
	top:55px;
	
	/*visibility:hidden;*/ /* WARNING: togliere a progetto ultimato */
}
	#counter ul {
		
		width:120px; /* la somma dei 3 'li' (vedi qui sotto) */
		margin:auto;
	}
	#counter ul li {
		
		text-align:center;
		
		width:40px;
		height:15px;
		line-height:15px;
		
		margin:0 auto;
		padding:0;
		
		float:left;
		display:block;
	}
	#counter ul li a:link, #counter ul li a:visited {
		
		text-decoration:none;
		background-color:#777777;
		
		color:#ffffff;
		
		display:block;
	}
	#counter ul li a:hover, #counter ul li a:active {
		
		text-decoration:none;
		background-color:#f78a16;
		
		color:#ffffff;
		
		display:block;
	}
	#counter ul li.visited {
		
		text-decoration:none;
		background-color:#f78a16;
		
		color:#ffffff;
	}
	/* quelli che sono visited ma che servono per poter tornare alla rispettiva splashpage dei progetti */
	#counter ul li.visited a {
		
		text-decoration:none;
		background-color:#f78a16;
		
		color:#ffffff;
	}
/* la scheda (qualsiasi tipo di contenuto testuale, e in qualsiasi posizione */
#testo {
		
	/*background-color:#334ee2;*/
	
	line-height:1.5;
	
	width:560px;
	height:auto;
	
	margin:auto;
}
	#testo p {
			
		margin-top:25px;
	}
	#testo h2 {
			
		margin-top:35px;
	}
/* il div che continene le immagini della scheda prima/dopo */
#prima-dopo {
	
	/*background-color:#0F9;*/
	
	margin-top:25px;
	margin-bottom:25px;
}
	#prima-dopo p {
			
		width:275px;
		margin-top:5px;
		font-style:italic;
	}
	
#footer {
	
	background-color:#acacac;
	/*background-color:#366;*/
	
	font-size:12px;
	color:#fff;
	text-align:center;
	
	width:840px;
	height:25px; /* come la lineheight e font-size delle liste nel menu */ 
	line-height:25px;
	
	margin:65px auto 0 auto;
}

	#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
		
		color:white;
		text-decoration:underline;
	}

#credits {
	/*background-color:#366;*/
	
	font-size:10px;
	color:#aaa;
	text-align:center;
	
	width:840px;
	height:25px; /* come la lineheight e font-size delle liste nel menu */ 
	line-height:25px;
	
	margin:0 auto 0 auto;
}

	#credits a:link, #credits a:visited, #credits a:hover, #credits a:active {
		
		color:#aaa;
		text-decoration:underline;
	}
	
/* ELEMENTI */

/* CLASSI' */

.center {
	
	text-align:center;
	
}
.justify {
	
	text-align:justify;
	
}
.right {
	
	text-align:right;
	
}
.italic {
	
	font-style:italic;
}
.display-none {
	
	display:none;	
}

.float-right {
	
	float:right;	
}

.float-left {
	
	float:left;	
}

.clearfix:after {
	
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
	
.margin-right-10 {
	
	margin-right: 10px;
}
	
/* CLASSI' */