@font-face {
  font-family: Museo300;
  src: url('loghi/Museo300.otf');
}

@font-face {
  font-family: Museo500;
  src: url('loghi/Museo500.otf');
}

body  {
font: 100% "Museo300", Tahoma;
background: #ffffff;
margin: 0; /* è buona norma impostare a zero i valori margin e padding dell'elemento body per tenere conto delle diverse impostazioni predefinite dei browser*/
padding: 0;
text-align: center; /* centra il contenitore nei browser IE 5*. Il testo viene quindi impostato con l'allineamento predefinito a sinistra nel selettore #container */
color: #000000;
}
h1 {
	font-size:2em;
	font-family: Museo500;
	color:#2d2d2d;
}
#mainContent a {
color:#5fa6dc;
text-decoration:none;	
}

#mainContent a:hover, :active {
color:#295e87;	
text-decoration:none;
}

#container { 
width: 700px;
background: #ffffff;
margin:0px auto; /* i margini auto (insieme a una larghezza) centrano la pagina */
text-align: center; /* sostituisce l'impostazione text-align: center nell'elemento body. */
} 

#header { 
background-color: #ffffff;
width:700px;
height:62px;
margin:0 auto;
}

#header img {
	
border:none;
}

#head1 {
width:300px;
height:170px;
float:left;
margin-right:96px;
}

#menu {
padding-top:117px;
color:#5f5f5d;
width:auto;
} 

.lista a{
color:#2d2d2d;
text-decoration:none
} 

.lista a:hover, :active {
color:#8b8b87;
}

.lista li {
display:inline;
margin:0 8px;
padding:3px 0;
font-size:0.67em;
}

#mainContent {	
width:700px;
margin:120px auto 0px auto;
height:auto;
text-align:left;
color:#2d2d2d;
font-size:0.8em;
border-top: 1px solid #86BAE5;
padding-top:10px;
} 

#hcard-Marco-Rinaldi .tel	{
	margin-top:6px;
	disply:inline;
} 

#left {
	width:350px;
	float:left
}

#left_port {
	width:auto;
	float:left
}

#left img{
	border:none;
	margin-right:5px;
}

#right {
	width:350px;
	float:right;
}

#right img{
	border:none;
	margin-right:5px;
}


#mainContent li{
list-style:none;
margin:3px 0;
}

.port img{
	width:35px;
	height:35px;
}

#mainContentHome {	
width:700px;
margin:120px auto 10px auto;
height:auto;
color:#2d2d2d;
font-family:tahoma;
font-size:0.75em;

} 

#main_testo {
	float:left;
	width:700px;	
}

#port_pic {
	width:100%;
	overflow-x:scroll;
	
}

#main_pic img{
	border: 1px solid #c4c4c4;
	float:left;
	margin-top:5px;
	margin-left:242px;
}

#thumb_nav {
border: 1px solid #c4c4c4;
width:647px;
margin-top:2px;
margin-left:112px;
height:90px;
text-align:left;
color:#2d2d2d;
font-family:tahoma;
font-size:0.75em;
padding:3px 1px 3px 1px;
}

#footer { 
padding: 0 10px; /* questo padding corrisponde all'allineamento a sinistra degli elementi nei div sovrastanti. */
background:#ffffff;
} 

#footer p {
margin: 0; /* azzerando il valore margin del primo elemento del footer si evita il rischio di compressione del margine, con la creazione di uno spazio tra i div */
padding: 10px 0; /* il padding di questo elemento crea uno spazio, così come avverrebbe specificando un valore margin, senza il problema della compressione del margine */
text-align:center;
color:#2d2d2d;
font-size:0.7em;

}

/* Classi varie riutilizzabili */
.fltrt { /* questa classe può essere utilizzata per rendere mobile un elemento a destra nella pagina. L'elemento reso mobile deve precedere l'elemento al quale deve essere affiancato sulla pagina. */
float: right;
margin-left: 8px;
}

.fltlft { /* questa classe può essere utilizzata per rendere mobile un elemento a sinistra nella pagina.*/
float: left;
margin-right: 8px;
}

.clearfloat { /* questa classe deve essere inserita in un elemento div o break e deve essere l'elemento finale prima della chiusura di un contenitore che deve contenere per intero un elemento mobile */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
background: url(../loghi/bar-sfu.jpg) reapeat-x;	
}
#border-top-subcat	{
	width: 700px;
	height: 20px;
	float:left;
	background: url(../loghi/border-top-subcat.jpg);
}
#subcat	{
	width: 700px;
	height: 170px;
	float:left;
	background: #dddddd url(../loghi/border-top-subcat.jpg) no-repeat top;
	
}

h4{ margin: 25px 10px 0 5px; color:#ffffff; font:10pt Museo500; font-weight: bold; text-indent:15px;  }
h3{ margin: 9px 10px 0 5px; color:#FFF; font:10.5pt Museo500; font-weight: bold;  }

.boxgrid{ 
				width: 150px; 
				height: 100px; 
				margin: 10px; 
				float:left; 
				background:#161613; 
				border: solid 2px #8399AF; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 5px; 
					color:#afafaf; 
					font-weight:bold; 
					font:8pt "Museo300", Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 70px; 
				width: 100%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 70;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 70px;
 					left: 0;
 				}