/* CSS Document */
body {  margin:0px; 
		padding:0px; 
		background-image:url(images/bground1.jpg); 
		background-repeat:repeat-x; 
		background-position:center top; 
		background-color:#002c6c;
		font-family:Trebuchet MS, serif;
	}

/*#social{
	float:right;
	background-color:#CC3366;
	background-position:right;
	bottom:500px;
	margin-top:300px;
	height:300px;
	width:50px;
}
*/
		
#container {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding: 0px;
	text-align: left;
}	

#button {
	position:relative;
	float:left;
	width:960px;
	height: 44px;
	background-image:url(images/linea-per-pulsanti.jpg);
	background-repeat:no-repeat;
}


a{
	color:#00FFFF;
}
#menu_css_orizzontale{
/*specificare qui un width per un menu orizzontale a larghezza fissa*/
/*1. rimuoviamo i marcatori della lista*/
list-style:none;
/*2. usiamo questo metodo per evitare che lo sfondo dell’elemento contenitore collassa con elementi floatati*/
overflow:hidden;
/*3. relativo al metodo applicato sopra, per Internet Explorer 6, specifichiamo una larghezza di 100%*/
width:100%;
/*4. azzeriamo le margine - richiesto per Internet Explorer*/
margin:0;
/*5. impostiamo un spazio cuscinetto (padding) di 1 px tra i bordi della lista e il suo contenuto*/

/*6. aggiungiamo un colore di sfondo al menu*/

/*7. e un bordo di 1px intorno*/

height:50px;
} 


#menu_css_orizzontale li{
	display: inline;
}
 
#menu_css_orizzontale a{
/*1. convertiamo i link da elementi inline a elemento di blocco, per potere poi specificare altezza/larghezza*/
display:block;
/*2. usiamo la proprietà float per allineare gli elementi orizzontalmente*/
float:left;
/*3. specifichiamo una larghezza per link di stessa larghezza nel caso di questo esempio*/
/*per link di larghezza relativa alla larghezza del testo, usare padding-right invece di width*/
/*width:160px;
/*4. e un altezza*/
height:50px;
/*5. aggiungiamo un spazio a sinistra tra ogni link*/

/*6. e un spazio cuscinetto (padding) a sinistra tra il bordo e il testo dei link*/
padding-left:15px;
/*7. specifichiamo un colore di sfondo per i link*/

/* background-image:url(images/bottone.png);*/
/*8. e un bordo sinistro di 10px qui ho cambiato*/
border-left:0px;
/*9. specifichiamo il tipo di carattere usato*/
font: bold small-caps 110%/1.2 "Arial Narrow",arial,sans-serif;
/*10. e la misura del carattere*/

/*11. convertiamo i caratteri da minuscolo a maiuscolo*/
text-transform:uppercase;
/*12. togliamo la sottolineatura dei link aggiunta per default*/
text-decoration:none;
/*13. specifichiamo un colore per i link*/
color:#FFFFFF;
/*14. allineiamo verticalmente il testo*/
line-height:25px;
} 





#phone {
	
	float:left;
	width: 960px;
	height: 107px;
	background-image:url(images/phone.jpg);
	background-repeat:no-repeat;
}

#titolo{
	float:left;
	width:680px;
	height: 107px;
}
#contatto {
	float:right;
	width: 270px;
	height: 100px;
	padding-top:30px;
}

#barca {
	float:left;
	width: 960px;
	height: 358px;
	background-image:url(images/big.jpg);
	background-repeat:no-repeat;
}

#barca1 {
	float:left;
	width: 960px;
	height: 358px;
	background-image:url(images/YachtingClub001.jpg);
	background-repeat:no-repeat;
}

#barca2 {
	float:left;
	width: 960px;
	height: 358px;
	background-image:url(images/YachtingClub002.jpg);
	background-repeat:no-repeat;
}

#barca3 {
	float:left;
	width: 960px;
	height: 358px;
	background-image:url(images/YachtingClub3.jpg);
	background-repeat:no-repeat;
}

#barca4 {
	float:left;
	width: 960px;
	height: 358px;
	background-image:url(images/YachtingClub004.jpg);
	background-repeat:no-repeat;
}

#barca5 {
	float:left;
	width: 960px;
	height: 358px;
	background-image:url(images/YachtingClub005.jpg);
	background-repeat:no-repeat;
}

#barcadx {
	float:right;
	width: 270px;
	height: 358px;
	
}

#barcatraduci {
	float:right;
	width: 200px;
	height: 175px;
	
}

#barcadown {
	float:right;
	width: 210px;
	height: 175px;
	
}


h1 {
	font: bold small-caps 210%/1.2 "Arial Narrow",arial,sans-serif;
	color:#FFFFFF;
	padding-left:100px;
}

h2 {font: bold small-caps 150%/1.3 "Arial Narrow",arial,sans-serif;
	
	color:#FFFFFF;
	border-bottom-color:#00FFFF;
	border-bottom-style:dashed;
	
}

.pb {font-size:12px; 
	color:#ffffff;
	text-align:justify;
	
}



#testo_sx{
	width: 520px;
	height: 1000px;
	float:left;
}

#sinistro {
float: left;
margin: 5px 10px 0px 0px;
border-color:#ffffff;
border-style:outset;
}

.sinistr{
clear:both;
margin: 5px 0px 0px 0px;
border-color:#ffffff;
border-style:outset;
display:block;
}

#testo_dx_a{
	width: 400px;
	height: 700px;
	float: right;
	
}

#destro {
	float: right; 
	margin: 5px 0px 0px 10px;
	border-color:#ffffff;
	border-style:outset;
}


.p_testo_dx_a{
	color:#00FFFF;
	font-size:12px;
	text-align:left;

}

.a_ask{
	color:#00FFFF;
	font-size:12px;
	text-align:left;
	display:block;
	text-decoration:none;
}

ul{
	list-style:none;
	margin:0;
}
	

#testo_dx_b{
	width: 400px;
	height: 300px;
	float:right;
}

#txt_dx_dentro_sx{
	width: 180px;
	height: 298px;
	float: left;
	
}

#txt_sx_dentro_dx{
	width: 180px;
	height:198px;
	float: right;
	
}
.testo_footer{
	font-size:11px;
	color:#000099;
	text-align:center;
	padding-top:25px;
}
#footer{
	
	
	background-position:0px 0px;
	width: 100%;
	height:85px;
	float: left;
	background-color:#00ffff;
	border-top-color:#ffffff: ;
	border-top-style:outset;
}

#link_footer{
	list-style:none;
	width:100%;
	margin:0;
	
}
#link_footer li{
	display:inline;
}

#link_footer a{
	float:left;
	display:block;
	padding-left: 80px;
	padding-top: 15px;
	text-decoration:none;
	font-size:11px;
	list-style-position:inside;
	color:#0033FF;
}
form{width: 100%;
min-width: 180px;
border: 1px solid #00FFFF;
padding: 3px
}

fieldset{
	border: 0px solid #ffffff;
	margin: 0;padding: 0;
	
}

legend{font: bold small-caps 140%/1.3 "Arial Narrow",arial,sans-serif;
    color: #ffffff;
} 
	form div{padding: 5px 3%;
	} 
form label{display: block}
fieldset input,textarea{width: 94%} 

	
a.zoom img{
	border: solid 1px #3300FF;
}

a.zoom span{
	position:absolute;
	visibility:hidden;
}

a.zoom{
	position:relative;
	z-index: 0;
}

a.zoom:hover{
	z-index: 1;
}
a.zoom:hover span{
	visibility:visible;
	top: 10;
	right:10px;
}



	/* Questa è la barca big {margin:0px; padding:0px; background-image:url(images/big.jpg); background-repeat:no-repeat;}
*/


/* Questo è il telefono .phone {margin:0px; padding:0px; background-image:url(images/phone.jpg); background-repeat:no-repeat;}
*/

/*Questo e il menu sopra arancione button {margin:0px; padding:0px; background-image:url(images/button.jpg); background-repeat:no-repeat;}
 */