@charset "utf-8";
/* CSS Document */
* { margin:0px; padding:0px; }
img { border:0px none; }

/*---- Dimensione caratteri -------------------------------------*/
h1 { 
	font-family:Verdana, sans-serif ;
	font-size:1.5em; margin-bottom:1em;
	
}
h1.font {font-family:"Walkway Expand Black",Verdana, sans-serif ; font-size:3.5em; margin-bottom:1em; color:#FFE5D2;}
h2 { font-size:1.334em; margin-bottom:.8em;}
h3 {font-size:1.167em; margin-bottom:1em; font-variant:small-caps; }
p {margin-bottom:1em; line-height:1.8em;}
a {outline:none; color:#fff;}
/*---- Colori ---------------------------------------------------*/
.rosso {color:#FF0303; }
.blu {color: #5172ED;}
.arancio {color:#F98506;}
.viola {color:#BD1AE5; }
.nero {color:#000; }
.grigio {color:#666;}
.bianco {color:#fff;}
.verde {color:#60DD31}
.giallo {color:#FF6;}
/*---- Div principali -------------------------------------------*/
body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:.688em;
	color: #FFF;
	background:#0D0D0D;
}
.bg { background:#FDFDFC url(../immagini/bgcolor9.jpg) top left no-repeat;}
.bg_blu { background:url(../immagini/bolle_celesti.png) 0px 0px no-repeat; }
.bg_blu_con { background:url(../immagini/bolle_celesti_con.png) right bottom no-repeat; }
.bg_rosso{ background:url(../immagini/bolle_rosse.png) 0px 0px no-repeat; }
.bg_rosso_con{ background:url(../immagini/bolle_rosse_con.png) right bottom no-repeat; }
.bg_aranc{ background:url(../immagini/bolle_gialle.png) 0px 0px no-repeat; }
.bg_aranc_con{ background:url(../immagini/bolle_gialle_con.png) right bottom no-repeat; }
.bg_viola{ background:url(../immagini/bolle_viola.png) 0px 0px no-repeat; }
.bg_viola_con{ background:url(../immagini/bolle_viola_con.png) right bottom no-repeat; }
.bg_nero{ background:url(../immagini/bolle_bianche.png) 0px 0px no-repeat; }
.bg_nero_con{ background:url(../immagini/bolle_bianche_con.png) right bottom no-repeat; }
.bg_verde{ background:url(../immagini/bolle_verdi.png) 0px 0px no-repeat; }
.bg_verde_con{ background:url(../immagini/bolle_verdi_con.png) right bottom no-repeat; }
.bg_tutti{ background:url(../immagini/bg_preventivo.jpg) top left no-repeat; }
.normale {background:url(../immagini/bolle.png) 0px 0px no-repeat;}

#container {
	width:984px;
	/*border:1px solid #fff;*/
	margin:0 auto;
	text-align:left;
	/*position:relative;*/
	
	/*overflow: visible;*/
	min-height:800px;
	/*border-left:1px solid #fff;*/
	height:800px;
	height:auto;
}
#header {position:relative; width:984px;}

/*------ Logo Branding --------------------------------*/
#logo { padding:35px 0px 0px 22px; width:148px;}

/*------ Utilità --------------------------------------*/
#utilita { 
	position:absolute;
	right:0px;
	top:42px;
	/*display:block;*/
	}
#utilita li { display:inline; margin-left:10px;  }
#utilita li a {
	outline:none;
	text-decoration:none;
	color:#FFF;
}
li#sitemap a{
	padding-top:24px;
	background:url(../immagini/pages.png) top no-repeat;
}
li#sitemap a:hover, li#sitemap a:active  {
	/*background:url(../immagini/sitemap2.gif) top no-repeat;*/
}
li#contact a {
	padding-top:22px;
	background:url(../immagini/mail.png) top no-repeat;
}
li#contact a:hover, li#contact a:active  {
}

/*------ Menu principale ------------------------------*/
#menu {
	width:750px;
	margin-top:90px;
	float:right;
	position:relative;
}
#menu li { display:inline; }
#menu li a {
	outline:none;
	position:absolute;
	text-indent:-9999px;
}
.selezionato {background-position:bottom!important;}
li.chisiamo a{
	width:88px;
	height:47px; right:644px;
	background:url(../immagini/chi_siamo.png) top no-repeat;
}
li.chisiamo a:hover, #menu li.chisiamo a:active{
	width:88px; height:47px; right:644px;
	background: url(../immagini/chi_siamo.png) no-repeat bottom left;
}
li.web_development a{
	width:154px; right:468px;
	height:49px; 
	background:url(../immagini/web_development.png) top no-repeat;
}
li.web_development a:hover, #menu li.web_development a:active{
	width:154px; height:49px; right:468px;
	background: url(../immagini/web_development.png) no-repeat bottom left;
}
li.web_design a{
	width:105px; right:343px;
	height:50px; 
	background:url(../immagini/web_design.png) top no-repeat;
}
li.web_design a:hover, #menu li.web_design a:active{
	width:105px; height:50px; right:343px;
	background: url(../immagini/web_design.png) no-repeat bottom left;
}
li.web_marketing a{
	width:129px; right:194px;
	height:50px; 
	background:url(../immagini/web_marketing.png) top no-repeat;
}
li.web_marketing a:hover, #menu li.web_marketing a:active{
	width:129px; height:50px; right:194px;
	background: url(../immagini/web_marketing.png) no-repeat bottom left;
}
li.multimedia a{
	width:88px; right:86px;
	height:47px; 
	background:url(../immagini/multimedia.png) top no-repeat;
}
li.multimedia a:hover, #menu li.multimedia a:active{
	width:88px; height:47px; right:86px;
	background: url(../immagini/multimedia.png) no-repeat bottom left;
}
li.contatti a{
	width:63px; right:0px;
	height:47px; 
	background:url(../immagini/contatti.png) top no-repeat;
}
li.contatti a:hover, #menu li.contatti a:active{
	width:63px; height:47px; right:0px;
	background: url(../immagini/contatti.png) no-repeat bottom left;
}

/*---- Banner --------------------------------------------------*/
#banner,#concept {
	margin:20px 0px 0px 234px;
	width:750px;
	height:242px;
	/*border:1px solid #FFF;*/}
#concept img{
	margin:40px 0px 0px 130px!important;
}

/*---- Contenuto principale home page -----------------------------------*/
#contenuto_principale { 
	margin:40px 0px 10px 0px; 
	position:relative; 
	width:984px;
	min-height:580px;
	height:580px;
	height:auto;
	background:url(../immagini/bolle_con.png) right bottom no-repeat;
}
#contenuto_principale ul {list-style:none; }
#contenuto_principale li {
	line-height:2em; 
	background:url(../immagini/003.png) 0px 5px no-repeat; 
	padding-left:23px;
}
#contenuto_principale li a {
	text-decoration:none; color:#FFF;
}
#contenuto_principale li a:hover {text-decoration:underline; }

#web_development, #web_design, #web_marketing, #multimedia { position:absolute; height:185px; top:0px;}
#web_development h1, #web_marketing h1, #web_design h1, #multimedia h1 {
	position:relative;
	height:14px;
	text-indent:-9999px;
}
#web_development h2, #web_marketing h2, #web_design h2, #multimedia h2 {
	text-align:right;
	font-weight:normal;
	line-height:1.7em;
	font-style:italic; 
	font-size:1em; 
	margin-bottom:20px;
}
	
#web_development {width:235px; left:0px; background:url(../immagini/f_rosso.png) 0px 0px no-repeat; }
#web_development h1 {
	left:66px; width:169px;
	background: url(../immagini/realizzazione-siti-web.png) 0 0 no-repeat;
}
#web_development h2 {color:#F24949; margin-left:50px;}

#web_marketing {width:230px; left:512px; background:url(../immagini/f_celeste.png) 0px 0px no-repeat;}
#web_marketing h1 {
	left:89px; width:141px;
	background: url(../immagini/posizionamento-motori.png) 0 0 no-repeat;}
#web_marketing h2 {margin-left:65px; color:#91A8F2;}

#web_design {width:215px; left:265px; background:url(../immagini/f_giallo.png) no-repeat; }
#web_design h1 {
	left:104px; width:111px;
	background: url(../immagini/interface-design.png) 0 0 no-repeat;}
#web_design h2 {color:#F7BE4B; margin-left:70px;}

#multimedia {width:213px; right:0px; background:url(../immagini/f_viola.png) no-repeat;}
#multimedia h1 {
	left:120px; width:94px;
	background: url(../immagini/spot-aziendali.png) 0 0 no-repeat;}
#multimedia h2 {color:#D8B2D4; margin-left:70px;}

/*---- Contenuto altre pagine ---------------------------------*/

#contenuto { 
	margin:30px 0px 5px 0px; 
	position:relative; 
	min-height:720px!important; height:720px; height:auto;
}
#contenuto p {font-size:1em; } 

ul.tabs {
	position:absolute;
	list-style:none;
	left:0px;
	z-index:10;
}
ul.tabs li {margin-bottom:10px;}
ul.tabs a {
	text-decoration:none; 
	padding:3px 0px 0px 20px;
	color:#f0f0f0; 
	font-weight:bold;
	font-variant:small-caps;
	display:block;
	height:20px; width:311px;
	
}
ul.tabs a:hover, ul.tabs a.current {
	background: #fff url(../immagini/freccette.png) 5px 8px no-repeat;
	color:#000;
	border-bottom:1px #CCC solid;
	border-left:1px #CCC solid;
	border-top:1px #CCC solid;
	border-right:1px #FFF solid;
}
div.panes div{
	display:none;
	position:absolute;
	top:40px;
	left:332px;
	width:540px;
	height:670px;
	padding-left:20px;
	border-left:1px #CCC dotted; 
}
div.panes div ul {list-style:none; font-size:1em; margin-bottom:15px;}
div.panes div ul li {line-height:1.8em; padding-left:20px; background:url(../immagini/003.png) 0 2px no-repeat; margin-bottom:5px; }
div.panes div img { }

ul#argomenti {
	position:absolute;
	top:300px;
	list-style:none;
}
#argomenti li {margin-bottom:20px;}
#argomenti a {
	background:url(../immagini/004.png) 0px 1px no-repeat;
	padding-left:20px;
	font-weight:bold; font-size:1.167em;
	text-decoration:none; font-style:italic;}
#argomenti a:hover {text-decoration: underline;}

#website {
	position:relative;
	width:710px; 
	margin-left:267px;  
	
	
}

#dettagli-web {  border-top:1px dotted #96B3D9;  border-bottom:1px dotted #96B3D9; padding:25px 0;}
#dettagli-web h2 {color:#96B3D9; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:2em;}
#lav-left {position:absolute; left:-240px; top:300px; width:220px;}
ul.lavori-web {overflow:hidden; padding-top:30px;}
ul.lavori-web li {float:left; list-style:none; margin:0px 20px 40px;}
.lavori-web h4 {color:#96B3D9; text-transform:uppercase; margin-top:10px;}
.lavori-web li a {text-decoration:none;}

/*-- Tooltip ---------------------------------------------------*/
#promo {position:absolute; top:530px; left:80px;}

div.tooltip {
	background:transparent url(../immagini/black_arrow.png) no-repeat scroll 0;
	display:none;
	height:122px;
	padding:20px 15px;
	width:170px;
	font-size:12px;
}
/* tooltip title element (h2) */
div.tooltip h2 {
	padding-top:20px;
	font-size:12px;
	line-height:1.5em;
	color:#FFF;
}
div.tooltip2 { 
    background-color:#000; 
    outline:1px solid #669; 
    border:2px solid #fff; 
    padding:10px 15px; 
    width:200px; 
    display:none; 
    color:#fff; 
    text-align:left; 
    font-size:11px; 
 
    /* outline radius for mozilla/firefox only */ 
    outline-radius:4px; 
    -moz-outline-radius:4px; 
    -webkit-outline-radius:4px; 
}
/*--- Skype ---------------------------------------------------*/
#skype { position:absolute; width:250px; top:300px; left:60px;}
#skype a {text-decoration:none; font-weight:bold; color:#FFF; }
/*-- Richiesta di preventivo ----------------------------------*/
#form_preventivo { 
	margin:30px 10px 0px 20px; 
	position:relative; 
	min-height:790px;
	height:790px;
	height:auto;
	left:331px;
	width:540px;
	padding-left:20px;
	border-left:1px #CCC solid; 
}
 
#preventivo ol { list-style:none; }
#preventivo li {margin-bottom:10px;  font-size:1em;}
#preventivo label {
	text-align:right;
	float:left;
	width:130px;
	margin-right:20px;
	font-weight:bold;
}
#preventivo li p { margin-left:150px; font-size:1em; }
/*--- Parte cerntrale -----------------------------------------*/
#info { 
	position:relative; top:470px; 
	padding:20px 0px; border-top:1px solid #000;}
#info2 { border-top:1px solid #000; padding:10px 0px; margin-top:10px; }

#mission {
	position:relative;
	top:230px;
	width:300px;
	margin-left:265px;
	}
#mission h2 { color:#F6A6C2; font-size:1.334em; margin-bottom:1em;}
#mission p { line-height:1.9em;}

/*--- Slider Lavori --------------------------------------------*/
#lavori {
	margin:30px 75px 0px 0px!important;
	overflow: hidden;
	position:relative;
	float:right;
	display:inline;
	width:620px!important;
	z-index: 2;
}
#lavori h2 { font-family:Verdana, sans-serif; color:#fff; font-size:1.334em; margin-bottom:1em;}
ul#lavori-slider{
	height: 187px;
	margin:0 auto;
	list-style: none;
	z-index: 0;
	overflow: hidden;
}

	#lavori-slider li{ 
		background: url(../immagini/bg-project.png) top left no-repeat;
		/*display:inline;*/
		margin-bottom:20px;
		margin-left:10px;
		height: 187px;
		position: relative;
		width: 300px; 
	}	
		#lavori-slider li img{
			left: 29px;
			position: absolute;
			top: 10px;
		}
		
		#lavori-slider li .panel{
			background: #0a0b07;
			bottom: 4px;
			height: 26px;
			left: 63px;
			overflow: hidden;
			position: absolute;
			width: 192px;
			z-index: 15;
		}
		
		#lavori-slider li .panel h2{ font-size: 0; text-indent: -13000em; }
		
			#lavori-slider li .panel h2 a:link,
			#lavori-slider li .panel h2 a:visited{
				background: #000000 url(../immagini/btn-panel.png) no-repeat 0 0;
				display: block;
				height: 26px;
			}

			#lavori-slider li .panel h2 a:hover,
			#lavori-slider li .panel h2 a:active{ background-position: 0 -26px; }
			
				#lavori-slider li .panel h2 a:link.act,
				#lavori-slider li .panel h2 a:visited.act{ background-position: 0 -52px; }
			
	
		#lavori-slider li .panel p{ 
			color: #F93;
			font-size: 10px;
			line-height: 18px;
			margin: 10px 20px 15px;
			text-align: center;
		}
		
#lavori a:link#back, #lavori a:visited#back, 
#lavori a:link#next, #lavori a:visited#next{
	background: transparent url(../immagini/btn-right_pic.png) no-repeat 0 0;
	display: block;
	height: 34px;
	position: absolute;
	right: 130px;
	top: 0px;
	text-indent: -13000em;
	width: 34px;
	z-index: 10;
}

#lavori a:link#back, #lavori a:visited#back{ 
		background-image: url(../immagini/btn-left-pic.png); 
		bottom: 0px; 
		right: auto; 
}
#lavori a:hover#back, #lavori a:active#back,
#lavori a:hover#next, #lavori a:active#next{ background-position: 0 -36px; z-index: 7; }

/*--- Dati azienda --------------------------------------------*/
#dati_azienda { 
	position:absolute;
	bottom:-10px;
	padding:5px 0px 0px; 
	width:720px;
	color:#666;
	border-top:1px dotted #fff; text-align:left;}
#dati_azienda2 {position:relative; padding:5px 0px 1px; 
	border-top:1px dotted #FFF; text-align:right; top:10px; }
#dati_azienda p, #dati_azienda2 p {font-size:.834em; padding:0px;}
div.facebook { float:right; width:140px; text-align:right;}
div.facebook a { text-decoration:none; color:#FFF;}
div.facebook a:hover {color:#677EAF;}
div.facebook a img {float:right; margin-left:7px; margin-top:17px;}
div.facebook h3 { margin-bottom:0px!important;}
div.facebook h3 > a { color:#677EAF;}

/*--- Page slide -------------------------------------------------*/
#pageslide-slide-wrap { background-color: #000; }
#pageslide-content {text-align:left; padding:20px 20px; }
#pageslide-content h1{color:#fff; width:310px; border-bottom:1px #999 solid; padding-bottom:10px;}
#pageslide-content a {color:#fff; text-decoration:none; }
#pageslide-content a:hover {font-weight:bold;}
#pageslide-content ul li { list-style:none; margin-bottom:10px;}
#pageslide-content ul li ul.interno { margin:5px 15px; }
#pageslide-content ul li ul li a { background: url(../immagini/link_b.gif) 0px 4px no-repeat; padding-left:10px; }