@charset "utf-8";
/* CSS Document */

body{
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
    font-size: 13px;
	 line-height: 18px;
    color: #666666;
    background: white url(../web-images/sfondo_pagina.png) repeat-x center top;
    text-align: left;
}

table{
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
}

.aj_div_attesa_nascondi, .aj_div_principale_nascondi{display:none;}
.aj_div_attesa_vedi{width: 100%;top: 50px;position: relative;text-align:center;}

a{text-decoration: none;color: black;outline: none;}
a:hover{text-decoration: none;}
img{border: 0px;}
input, textarea{background: White; color: Black; border: 1px solid black; margin: 0px; padding: 2px;}
.input_noborder{background-color: transparent;color: Black; border: 0px;}
form{margin: 0px;padding: 0px;}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.giustificato{text-align: justify;}

h1{font-size: 16px; margin: 0px;}
h2{font-size: 14px; margin: 0px;}
h3{font-size: 12px; margin: 0px;}
h4{font-size: 11px; margin: 0px;}
h5{font-size: 10px; margin: 0px;}
p{padding-top:0px;margin-top:0px;}
.testo9, .testo9_rosso, .testo9_bianco{font-size: 9px;}
.testo10, .testo10_rosso, .testo10_bianco{font-size: 10px;}
.testo11, .testo11_rosso, .testo11_bianco{font-size: 11px;}
.testo12, .testo12_rosso, .testo12_bianco{font-size: 12px;}
.testo13, .testo13_rosso, .testo13_bianco{font-size: 13px;}
.testo14, .testo14_rosso, .testo14_bianco{font-size: 14px;}
.testo16, .testo16_rosso, .testo16_bianco{font-size: 16px;}
.testo18, .testo18_rosso, .testo18_bianco{font-size: 18px;}

.testo9_rosso, .testo10_rosso, .testo11_rosso, .testo12_rosso, .testo13_rosso, .testo14_rosso, .testo16_rosso, .testo18_rosso{color: Red;}
.testo9_bianco, .testo10_bianco, .testo11_bianco, .testo12_bianco, .testo13_bianco, .testo14_bianco, .testo16_bianco, .testo18_bianco{color: White;}
.bianco{color: White;}
#info_privacy{color: Gray; font-size: 10px;}
.hidden{position:absolute;left:0px;top:-1000px;width:1px;height:1px;overflow:hidden;}
ul {padding-left: 15px;}
/*=====================================*/
/* INTESTAZIONE */
/*=====================================*/

#intestazione {
	width: 990px;
	height: 43px;
	margin: 25px auto 0px auto;
	}
	
	/* logo */
	#intestazione h1 {
		margin: 0px;
		padding: 0px;
		float: left;
	}
	.navigazione_principale {
		width: 748px; 
		height: 43px;
		margin: 0px;
		padding: 0px;
		float: left;
		background: url(../web-images/sfondo_navigazione_principale.png) left top no-repeat;
	}
		
		.navigazione_principale li {display: block;	float: left; text-align: center; }
		.navigazione_principale li a {display: block; line-height: 42px; font-size: 13px; vertical-align: middle;}
		.navigazione_principale li a:hover, .navigazione_principale li a.attivo{background: url(../web-images/sfondo_voci_menu_principale_hover.png);}

			/*== definisco larghezza collegamenti ==*/
			.navigazione_principale li.home {width: 75px; margin-left: 3px;}
			.navigazione_principale li.filosofia {width: 81px;}
			.navigazione_principale li.siti_internet {width: 98px;}
			.navigazione_principale li.web_marketing {width: 121px;}
			.navigazione_principale li.studio_grafico {width: 117px;}
			.navigazione_principale li.portfolio {width: 89px;}
			.navigazione_principale li.net_blog {width: 83px;}
			.navigazione_principale li.net_blog span {color: #ff8800;}
			.navigazione_principale li.contatti {width: 79px; margin-right: 2px;}

/*========================================*/		
/* CONTENUTI */
/*========================================*/

#contenuto { 
	width: 990px;  
	height: auto !important;
	height: 295px;
	min-height: 295px;
	margin: 40px auto 0px auto;
	}
	
	/* Clearfix, per contenere i due div flotanti al suo interno */
	#contenuto:after{
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	
	ul.navigazione_secondaria{ 
		width: 185px; 
		margin: 0px;
		padding: 0px;
		float: left;
		list-style-type: none;
		border-top: 1px solid #CCCCCC;
	}
	ul.navigazione_secondaria li a{
		height: 38px;
		width: 185px;
		line-height: 38px;
		border-bottom: 1px solid #CCCCCC;  /*#4d4d4d*/
		display: block;
	}
	ul.navigazione_secondaria li a:hover, ul.navigazione_secondaria li a.attivo{background: url(../web-images/freccia_sx.png) no-repeat right center;}
		
	#contenuto_dettaglio{ 
		width: 740px;
		margin: 0px 10px 0px 0px;
		float: right;
	}
		
		/* Clearfix, per contenere i due div flotanti al suo interno */
		#contenuto_dettaglio:after{
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		
		#contenuto_dettaglio h2 {
			margin: 10px 0px 20px 0px;
			font-size: 22px;
			font-weight: normal;
			color: #ED7703;
			background: white; 
			font-family: Georgia, Geneva, Arial ,serif;
		}
			.colonna_dettaglio {float: left;width: 340px;padding: 0px 60px 20px 0px;text-align: justify;}
			.colonna_dettaglio.destra{padding-right: 0px;}
		
		#contenuto_dettaglio a {color: #666666;}
		#contenuto_dettaglio a:hover {
			color: #F60;
		}
				
			/*=== sezione per portfolio siti web ===*/
			h2.titolo_portfolio {
				padding: 10px 0px 20px 0px;
				font-size: 22px;
				font-weight: normal;
				color: #ED7703;
				background: white; 
				font-family: Georgia, Geneva, Arial ,serif;
				position: relative;
			}
				
			.box_portfolio {
				background: #e8e8e8 url(../web-images/trama_box_portfolio.gif) left top repeat;
				width: 150px;
				height: 200px;
				margin: 0px 73px 30px 0px;
				padding:0px 20px;
				text-align: left;
				float: left;
				position: relative;
			}
			.box_portfolio.ultimo{margin-right: 0px;}
			.box_portfolio a img {margin-top: 15px;}
			.box_portfolio h5 {
				height: 14px;
				margin-bottom:3px;
				font-size:14px;
				color:#ff8800;
				margin-top: 10px;
			}
			.box_portfolio p {
				font-size:12px;
				margin:0px 0px 5px 0px;
				color:#666;
			}
			.box_portfolio a{font-size: 11px;color: #666666;}
			.box_portfolio a:hover {color: #ff8800;}
			/*===========*/
			
			/*=== sezione per contatti.htm ===*/
			#modulo_contatti{margin: 0px 0px 10px 0px; width: 600px;  }
			#modulo_contatti legend {
				margin: 0px;
				padding: 0px 0px 20px;
				color: #666;
				font-size: 11px;
			}
			#modulo_contatti fieldset{border: 0px;margin: 0px;;padding: 0px;}
			#modulo_contatti label{width: 300px;height: 45px;float: left;position: relative;}
			#modulo_contatti input{width: 270px;float: left;position: relative;}
			#modulo_contatti label.richieste{height: 75px;float: left;position: relative;}
			#modulo_contatti label.richieste textarea{width: 570px;height: 50px;float: left;position: relative;}
			#modulo_contatti span.campi_obbligatori {display: block; clear: left;}
			#info_privacy{
				margin-top: 10px;
				display: block;
				width:300px;
			}
			#modulo_contatti .accetto {
				margin-top: 5px;
				width: 150px;
				height: 20px;
				float: left;
			}
			#modulo_contatti .accetto input {width: 20px;border: none;height: 15px;}
			#modulo_contatti .invio_richiesta {width: 120px;clear: left;padding-bottom: 30px;}
			#modulo_contatti .invio_richiesta input{cursor: pointer;margin-top: 10px;display: block;float: left;width: 120px;border: 0px;background: #ED7703;color: white;}
			/*=== fine sezione per contatti.htm ===*/
			
			/*==== mappa come raggiungerci ===*/
			.info_contatto{clear: left; float: left; line-height: 150%; margin-top: 50px;}
			#map {width: 745px; height: 400px; float: right; margin: -76px 5px 0px 0px;}
	
/*========================================*/		
/* APPROFONDIMENTI */
/*========================================*/

#approfondimento{
	width: 100%;
	margin-top: 20px;
	height: 140px;
}
				
	/* 3 box approfondimenti - il posizionamento parte sempre dal centro della finestra, aggiustato poi con il margine sx, */ 
	/* per evitare l'utilizzo di un box contenitore */
	.box_approfondimento_1, .box_approfondimento_2 {
				width: 340px;
				height: 140px;
				background: #e8e8e8;
				float: left;
				position: relative;
				left: 50%;
				margin-top: 10px;
	} 
			/* Box approfondimenti */
			.box_approfondimento_1{margin-left: -260px;} 
			.box_approfondimento_2{margin-left: 70px;} 

			/* Imposto l'H3 che copra tutta l'are del div, con posizionamento assoluto */
			.box_approfondimento_1 h3, .box_approfondimento_2 h3 {width: 295px;height: 130px;top: 0px; left: 0px; position: absolute;padding: 15px 0px 0px 10px;color: #E52324;font-size: 18px;}
			.box_approfondimento_1 p, .box_approfondimento_2 p {margin-top: 53px;height: 83px;color: #4D4D4D; padding: 0px 10px 0px 10px;}
			
			/* Imposto il link che prenda tutta l'area del div (come per H3) */
			#approfondimento h3 a{width: 310px;height: 140px;display: block;margin: -15px 0px 0px -10px;}
			#approfondimento h3 a img{margin: 15px 0px 0px 10px;} /* Posiziono l'immagine correttamente */
			/* Imposto un hover su tutto il div */
			.box_approfondimento_1:hover, .box_approfondimento_2:hover {background: url(../web-images/sfondo_box_approfondimento_interno.png) no-repeat;} 
		
/*====================================*/
/* FOOTER */
/*====================================*/

#footer { 
	margin-top: 20px;
	width: 100%; 
	height:  40px;
	color: #808080;
	}
	
	#footer h5 {
		width: 820px; 
		height: 12px; 
		float: left;
		position: relative;
		left: 50%;
		margin-left: -495px;
		font-size: 10px;
		font-weight: normal;
	}
	#footer h6 {
		width: 190px;
		height: 12px;
		float: left;
		left: 50%;
		padding-left: 0px;
		margin: 0px;
		position: relative;
	}