/*Eliminiamo i margini e il padding predefiniti dal browser per il tag BODY, eliminiamo anche gli horizontal-rule*/
body { margin:0; padding:0 }
hr { display:none }

/*Impostiamo la larghezza assoluta, pari a 760 pixel, per #testa, #corpo e #piedipagina. 
Tutte e tre le sezioni saranno poste al centro della pagina.*/
body { text-align:center }
#testa {
width:760px;
height:108px;
margin:1em auto;
text-align:center;
background: transparent url(im/testata.jpg) 0 0 no-repeat;
/*background: #00407E url(im/testata.gif) repeat-y;
background-color:#00407E;*/
}
#corpo {
width:760px;
margin:1em auto;
text-align:left;
}
#piedipagina {
width:760px;
margin:1em auto;
text-align:center;
border-top:1px groove #00407E;
}

/*Per posizionare le colonne laterali in maniera assoluta, prendendo come riferimento la sezione #corpo, 
quest'ultima deve essere posizionata in maniera relativa.*/
#corpo {
position:relative;
}

/*Adesso è possibile posizionare le colonne laterali. La prima colonna sarà posta a sinistra e larga 160 pixel*/
/*Il posizionamento assoluto (position:aboslute) consente di porre il nel punto desiderato indipendentemente 
dagli altri elementi della pagina. 
Le proprietà top:0; left:0, se associate alla proprietà position:absolute, stabiliscono che il box sia posto e
sattamente in alto a destra rispetto al box della sezione #corpo, essendo questa posizionata in maniera relativa.*/
/*#corpo-colonna1 {
position:absolute;
top:0; left:0;
width:160px;
}*/

/*La terza colonna sarà posta in alto a destra e sarà larga 150 pixel*/
#corpo-colonna3 {
	position:absolute;
	top:0;
	right:0;
	width:150px;
}

/*A questo punto le colonne laterali, essendo disposte indipendentemente dagli altri elementi della pagina, 
saranno sovrapposte alla colonna centrale, poiché questa si sviluppa per tutta la larghezza del corpo. 
Per evitare questa sovrapposizione è sufficiente impostare i margini della seconda colonna in modo tale da avere 
a destra e a sinistra lo spazio necessario per contenere comodamente le due colonne*/
#corpo-colonna2 {
/*margin:0 200px 0 160px;*/
margin:0 150px 0 0;
}

/*Si impostano i bordi non nelle colonne laterali (per i selettori #colonna-1 e #colonna-3) ma in quella centrale per evitare
che le colonne s'interrompano subito dopo i contenuti */
#corpo-colonna2 {
/*border-left:1px solid #000;*/
border-right:1px dotted #00407E;
}

/*Il colore dello sfondo delle colonne non si imposta direttamente sullo sfondo delle colonne, 
ma sullo sfondo del corpo e della colonna centrale, lasciando lo sfondo delle colonne trasparente*/
#corpo {
/*background:#f0f0f0 url(sfondo_colonna1.png) repeat-y;*/
/*background:#B5D3F0;*/
}
#corpo-colonna2 {
background:#fff;
}

/*Ricordando che il padding destro e quello sinistro vanno a sommarsi alla larghezza del box, 
non possiamo impostare tali proprietà direttamente nelle regole per le tre colonne, 
il padding superiore e quello inferiore possono invece essere regolati comodamente*/
/*#corpo-colonna1 {
padding:1em 0;
}*/
#corpo-colonna2 {
padding:0 0 1em 0;
}
/*#corpo-colonna3 {
padding:1em 0;
}*/
/*class utilizzati per elementi che non devono comparire a video*/
.bugFix, .alt, .navigazionePagina, .nascosto, .fir span { 
	display		: none;
}

/*Per allontanare i contenuti delle colonne dai bordi questi contenuti saranno dei testi racchiusi da altri contenitori, 
come ad esempio liste, box e così via. L'allontanamento dai bordi si ottiene impostando i margini di tali elementi*/
p {
/*font:1em Arial, Helvetica, sans-serif;*/
display:block;
margin:0 1em .5em 1em;
color:#00407E;
}
p.dotted {
border: 1px dotted #00407E;
height:60px;!important;height:70px;
}
p.dottedbig {
border: 1px dotted #00407E;
height:60px;!important;height:100px;
}
#barra {
margin:0 1em 1.5em 1em;
}
#barra a,
#barra a:link, 
#barra a:visited {
position:relative;
display:block;
background-color:#00407E;
color:#fff;
font-weight:bold;
padding:0 0 0 6px;
}
#barra a:hover, 
#barra a:active {
position:relative;
display:block;
color:#00407E;
background:#D6E7FF;
font-weight:bold;
}
#barraAzzurra {
margin:0 1em 1.5em 1em;
}
#barraAzzurra a,
#barraAzzurra a:link, 
#barraAzzurra a:visited {
position:relative;
display:block;
background-color:#D6E7FF;
color:#00407E;
font-weight:bold;
padding:0 0 0 6px;
}
#barraAzzurra a:hover, 
#barraAzzurra a:active {
position:relative;
display:block;
color:#fff;
background:#00407E;
font-weight:bold;
}
h2 {
	clear :both;
	color:#00407E;
	padding:0;
	font-size: 1.4em;
}
h3 {
	clear :both;
	color:#FF0000;
	padding:0 0 0 21px;
	font-size: 1em;
	background:#fff url(im/pesce.gif) 0 0 no-repeat;
	line-height:19px;
}
.testopiccolo {
	font-size: 0.9em;
}
/*class che definisce lo stile del link*/
a:link, a:active, a:visited { 
	color		: #00407E;
	background	: transparent;	
	font-weight	: bold;
	text-decoration: none;
}
a:hover { 
	color				: #fff;
	background-color	: #00407E;
	font-weight			: bold;
	text-decoration: none;
}

/*--------------------------------menu-----------------------------------*/
ul.menu1 {
width:150px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
}
ul.menu1 li a {
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
}
ul.menu1 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/
ul.menu1 li a:link, ul.menu1 li a:visited {
background:#B5D3F0;
color: #00407E;
} /* colori per il link */
ul.menu1 li a:hover, ul.menu1 li a:active {
background: #00407E;
color:#fff;
} /* colori per l'effetto roll-over */
ul.menu2 li a {
border-width:5px;border-style:none solid; /* aggiungo dei bordi laterali */
}
ul.menu2 li a:link, ul.menu2 li a:visited {
border-color:#00407E
}
ul.menu2 li a:hover, ul.menu2 li a:active {
border-color:#B5D3F0;
}
ul.menu1 li.on{	
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
background: #00407E;
color:#fff;
font-weight:bold;
}

/*box*/
.boxCelesteCh { 
	border: 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	text-align: left;
	background-color: #D6E7FF;
}
#corpo-colonna2 #icoFoto {
background:#fff url(im/presentaz_servizio.jpg) left top no-repeat;
display:block;
float:left;
width:100px;
height:60px;
padding:0 6px 6px 0
}
.boxGiallo { 
	border: 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	text-align: left;
	background-color: #FAD305;
}
.rosso {
	font-weight: bold;
	color: #CC0000;
}
img{
margin: 5px 5px 5px 5px;
}
#boximg {
	border: 1px dotted #00407E;
	padding: 5px;
	/*height:200px;*/
	margin:0 1em .5em 1em;
	/*position: relative;*/
}
#boximg a:hover {
	background-color:#FFF;
}
#boximg164 {
	border: 1px dotted #00407E;
	padding: 5px;
	/*height:164px;*/
	margin:0 1em .5em 1em;
	/*position: relative;*/
}
#boximg164 a:hover {
	background-color:#FFF;
}
#boximg100 {
	border: 1px dotted #00407E;
	padding: 5px;
	/*height:100px;*/
	margin:0 1em .5em 1em;
	/*position: relative;*/
}
#boximg100 a:hover {
	background-color:#FFF;
}
#boximg img {
	/*position: absolute;
	bottom: 1%;*/
}
.spaziatore {
		margin: 0 0 0 0;
		height: 47px;
		z-index:1000;
		display:block;
}
/*stile per tabelle su righe o su colonne*/
.areaTable {/**/
margin:0;
padding:0;
clear:left;
}

.areaTable table {/**/
width:600px;
font-size: 0.95em;
margin:8px -3px 0 -3px;
}

.areaTable table caption {
width:704px;
font-weight:bold;
height:16px;
line-height:16px;
margin: 0 -3px;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
padding:0 0 0 6px;
background:#00407E;
text-align:left;
color: #fff;
}

.areaTable td {
background:#D6E7FF;
text-align:left;
padding:1px 6px;
}

.areaTable td p{/**/
padding:0;
font-weight:bold;
}

.areaTable td span{/**/
margin-left:8px;
}
.areaTable th{/**/
padding:1px 6px;
background:#B5D3F0;
text-align:left;
}
/*inizio stili da associare ai vari elementi delle form*/
input {
border:1px solid #00407E;
font-size:0.95em;
/*margin-right:4px;*/
height:17px;
/*Hack per IE 5.5 e 5.0*/
voice-family:"\"}\"";
voice-family:inherit;
height:20px;
}

.textarea {
border:1px solid #00407E;
font-size: 1.00em;
margin-right:4px;
}

.data{
width:25px;
margin-right: 3px;
margin-left: 3px;
border:1px solid #00407E;
}

.midi{
width:200px;
margin:0;
display:block;
float:left;
}

.maxi{
width:90%;
margin:0;
display:block;
float:left;
}

select {
font-size:0.95em;
color:#000;
background:#fff;
}
select.data {
color:#000;
background:#fff;
margin-right:6px;
float:left;
}
input.radio{
width:auto;
border:0;
margin-left: -3px;
}
input.checkbox{
width:auto;
border:0;
margin-bottom: 2px;
margin-left:-5px;
}


/*fine stili da associare ai vari elementi delle form*/

/*INIZIO stile per PULSANTI INPUT*/

#pulsantiForm {
	margin:0;
	border:0;
	padding:0;
	text-align: left;
}

#pulsantiForm input.inputPulsante {
	margin: 5px 0 0 0;
	padding: 0;
	text-align:center; 
	font-weight:bold; 
	text-decoration:none; 
	color:#00407E;
	background: #B5D3F0 url(im/ombra_puls.gif) no-repeat;
	border: 0;
	cursor: hand;
	width:50px;
	height:16px;
}

#pulsantiForm input.inputPulsante:hover {
	background: #D6E7FF url(im/ombra_puls.gif) no-repeat;

}

/*FINE stile per PULSANTI INPUT*/