/*INIZIO RESET*/
/* 20/09/2010 - (C) mery H2oL*/
/*Foglio di Reset*/
/* Inspired on Tripoli Generic CSS by David Hellsing */ 
* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
q { quotes: "" ""; }
ul, ol{ list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */
/* MAIN TYPOGRAPHY */
strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
cite, em, dfn { font-style: italic; }
code, kbd, samp, pre, tt, var{ font-size: 90%; font-family: monaco, "Lucida Console", courier, mono-space;  }
del { text-decoration: line-through; color: #666; }
ins, dfn { border-bottom: 1px solid #ccc; }
small, sup, sub { font-size: 85%; }
abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; }
a abbr, a acronym { border: none; }
abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px solid #ccc; }
sup { vertical-align: super; }
sub { vertical-align: sub;   }
/*FINE RESET*/

@main-dark:#333;
@main-light:#FFF;
@yellow: #FC0;
@blue:#09F;
@brand_color:#53A1F0;
@media_color:#71C31B;
@web_color:#FF7315;
@ie-h-bag: #eeeae2;
@block-spacer:15px;

@up-bg:url(../img/logo_header.png) @main-light no-repeat center center;
@down-bg:url(../img/bg_menu.png) #222222 no-repeat top center; 

/*fontset*/
.serif( @size:12px, @lh:1em){	font-size: @size; font-family: Georgia; line-height: @lh; }
.sans-serif(@size:12px, @lh:1.3em){ font-size: @size; font-family: Tahoma, arial, helvetica, "microsoft sans serif", sans-serif; line-height:@lh; color: @main-light;}
/*main measure*/
@page-w: 1000px;
@up-height: 475px;

/*utility*/
.tocenter{ text-align:center; margin:0 auto;}
.rounded-corners (@radius: 5px) {  border-radius: @radius;  -webkit-border-radius: @radius;  -moz-border-radius: @radius;	}
.emphLink{ .serif (14px, 2em); color:@yellow; font-style: italic; text-decoration: underline;
	&:hover{ text-decoration: none;}
}
.button.emphLink{ .reset}
.invisible, .unvisible, .invisibile{display:none;}
.visible {display:block;}
.clearH2oL{clear:both; }
.right { text-align: right; margin-bottom: 3px; margin-top: 3px;}
.goToTop{ background: none; border: none; .sans-serif(11px, 1em); color: @blue; cursor: pointer; font-weight: bold;
	&:hover{ text-decoration: underline; }
}
.reset{ margin: 0; padding: 0; border: none; background: none;}
.oldbrowser{.invisible;}
.bordered(@size: 1px, @color:@main-light){ border: @size solid @color;}
.shadow{-moz-box-shadow: 5px 5px 5px #222; -webkit-box-shadow: 5px 5px 5px #222;box-shadow: 5px 5px 5px #222;}
/*struct*/
body{ position: relative; top: -(@up-height+5px); .sans-serif; background: (@main-dark - #111111);}
div.up{ background:@up-bg; height:  @up-height; }
div.down{ background:@down-bg; }
div.wrap { width: @page-w; .tocenter; }
.header { height: 135px;
	.hgroup { .invisible; }
}

/*Main typography*/
h1, h2, h3, h4, p { margin-bottom: @block-spacer;}
h2{ .serif(3.3em, 1.2em); font-weight: normal; }
h3{ .serif(2.5em, 1.2em); font-weight: normal; }
h4{ .serif(1.3em, 1.2em); font-weight: normal; }
.button{cursor: pointer;}
.button.emphLink{ .reset}
/*Header menù*/
.nav.main{ float: left; margin-top: 22px;}
.nav.offers { float: right; margin-top: 25px; margin-right: 20px;}
.nav.main ul li, .nav.offers ul li{float: left;}
.nav.main ul li a span, .nav.offers  ul li a span{ display: none;}
.bt_acqualiofilizzata, .bt_portfolio, .bt_contatti{display: block;  height: 75px; cursor: pointer}
.bt_acqualiofilizzata{ background: url(../img/mainmenu_acqualiofilizzata.png) no-repeat top center; width: 130px; 
	&:hover{background: url(../img/mainmenu_acqualiofilizzata_h.png) no-repeat top center; } 
}
.bt_portfolio{  background: url(../img/mainmenu_portfolio.png) no-repeat top center; width: 95px;
	&:hover{background: url(../img/mainmenu_portfolio_h.png) no-repeat top center;}
}
.bt_contatti{ background: url(../img/mainmenu_contatti.png) no-repeat top center; width: 80px;
	&:hover{background: url(../img/mainmenu_contatti_h.png) no-repeat top center;}
}
/*main navigation*/
.nav.offers a{display: block;}
a#brand_button{	width: 51px; height:33px; background: url(../img/mn_brand.png) no-repeat top center;}
a#media_button{	width: 64px; height:30px; background: url(../img/mn_media.png) no-repeat top center; }
a#web_button{		width: 62px; height:27px; background: url(../img/mn_web.png) no-repeat top center; }
a#brand_button_elastic{	width: 51px; height:50px; 	background: url(../img/mn_brand_elastic.png) no-repeat bottom left; }
a#media_button_elastic{	width: 64px; height:51px; 	background: url(../img/mn_media_elstic.png) no-repeat bottom left; }
a#web_button_elastic{	width: 62px; height:52px; 	background: url(../img/mn_web_elastic.png) no-repeat bottom left; }

/*section*/
.section{ margin: 0 20px 20px 20px; padding:15px 0 20px 0; border-bottom: 1px solid @main-dark; clear: both; text-align: left;}
div.up section{ .reset;}
#portfolio{ color: @main-dark;
	a{ color: @main-dark;}
	h2{ background: url(../img/portfolio_title.png) no-repeat top left; width: 155px; height: 45px; float: left;
		span{ display: none;}
	}
	#closePorfotlio{ width: 32px; height: 32px; background: url(../img/close_portfolio.png) no-repeat center center; border:none;  cursor: pointer;}
	.header_portfolio{ margin: 0 auto; width: 800px;}
	p.pdf_portfolio{ float: right; margin-top: 30px; margin-bottom: 0;}
	p.up_panelnav{ text-align: right; margin: 0; }
}
#acquabranding {
	.figure {.bordered; width: 510px; float: left; margin-right: 20px;
		img{ margin: 35px 15px;}
		.figcaption{ display: none}
	}
	a{ color: @yellow; text-decoration: underline;}
}
#presentation {
	.container{ .bordered(3px, @blue); padding: 15px 12px; min-height: 8px; text-align: justify;}
	.nav{ text-align: right; margin-top: 5px;}
}
.moveme{ display: inline; font-size: 1.1em;
	strong{ .serif(18px, 1em); font-weight:bold; }
}
.moveme.liofilized{text-align:left; display: block;  width:106px; margin-right:10px; float:left; .sans-serif(0.9em, 1em);
	strong{  font-weight:bold; display: block; font-size: 1.1em; margin-bottom: 25px;}
}
#bmw div.item{ width: 281px; height: 360px; float: left; padding: 18px; .bordered(1px, #222); background: url(../img/bg-box-bmw.png)  no-repeat 0 0;}
.itemh2{width: 298px; height: 46px;
	span{ display: none}
}
#bmw div.item.brand h2{	.itemh2; background: url(../img/brand_title.png) no-repeat center center; }
#bmw div.item.media h2{ 	.itemh2; background: url(../img/media_title.png) no-repeat center center;}
#bmw div.item.web h2{	.itemh2; background: url(../img/web_title.png) no-repeat center center;}
 
.itemh3{ border-top:7px solid; padding-top:18px; line-height: 1.1em;}
#bmw div.item.brand h3 { .itemh3; border-color: @brand_color;}
#bmw div.item.media h3{ .itemh3; border-color: @media_color;}
#bmw div.item.web h3{ .itemh3; border-color: @web_color;}
#bmw div.item ul li{ line-height: 1.5em;}

#people #founders{ width: 670px; border-right:1px solid @main-dark; float: left;
	.profile{  width: 320px; float: left;
		h3{ font-size: 1.6em;}
		.description{ width: 210px;
			a{ text-decoration:underline;}
			.personal-contact {
				a{ font-weight: bold; font-size: 1.1em; text-decoration: none; 
					&:hover{ text-decoration:underline;}
				}
				.linkedin{ float: right;
					a{ color: @yellow; }
				}
				.twitter{ float: left;
					a{ color: desaturate(@blue, 20%) }
				}
			}
		}
	}	
}
#mariachiara-pezzotti { background: url(../img/mariachiara-pezzotti-profilo.png) top right no-repeat;}
#paolo-camozzi { background: url(../img/paolo-camozzi-profilo.png) top left no-repeat;
	.description{ margin-left: 105px;}
}
#people #partners{ float:right; width: 245px;
	ul li{ height: 110px; margin-bottom: 15px; .bordered(1px, #222);
		img{ float: left; margin-right: 15px; margin-bottom: 10px; }
		h4 {margin-top:15px;
			em{ .sans-serif(0.7em, 1em); }
		}
		a{ color: @yellow; font-size: 0.9em; text-decoration: underline;
			&:hover{text-decoration: none; }
		}
		p{ clear: both; margin-top: 5px; font-style: italic;}
	}
	a:hover{ color: @yellow; text-decoration: underline;	}
}

#venue {
	a{ color:@yellow;}
	.jobs{ width: 320px; float: left; border-right:1px solid @main-dark; padding-right: 30px;}
	.maps{ width: 570px; float: right; 
		.gmap{ float: left; width: 300px;  }
		h3{ .serif(1.3em, 1.2em); }
	}
	li{ display: inline; padding-right: 10px; }
}


.footer{padding-top: 310px; margin-top:40px; background: url(../img/footer-logo.png) top center no-repeat; color: #666;  min-height: 340px;}
.footer a, .footer strong, .footer a span{ color: #666; font-weight:normal}

#contactinfo div { display: inline;  }

/*alien*/
@alienH : 375px;
@alienW : 960px;
/*#animationExplain{ .shadow; height: 50px; width:@alienW;  position: absolute; top:(@alienH - 50 )/2;
	text-align:center;   background: url("../img/tr_bck.png") repeat transparent; .sans-serif(15px, 1.2em); color: #C00;}
*/	
.animationObj(@x: 0, @y: 0, @w: inherit, @h: inherit){  top: @y; left: @x; width: @w; height: @h; position: absolute; }

#history {
	h2{ background: url('../img/controllo.png') no-repeat bottom center; height: 80px; width: 100%;  clear: both; }
	span{ display: none;}
}
#alien { width:@alienW; height: @alienH ; /*.bordered;*/ position: absolute;}
#alienNav{  margin-top: @alienH+30px;}
#sliderNav{ margin-bottom: 10px;
	 ul li{ width: 160px; float: left; background: url(../img/step.png) top center no-repeat; text-align: center;border-bottom: 5px solid #222;
	 	span{ display: block; background:none; height: 20px;		}
	 	input{ font-variant:small-caps; background: #222; border: none; color: @main-light;   padding-top: 5px; padding-bottom: 5px; width: 160px;		
	 		
	 	}
	 	&:hover{border-bottom: 5px solid #FFF;}
	}
 }
#slider{ /*width: 800px; */ margin-left: 80px; margin-right: 80px;}
#azienda{  		.animationObj(	550px,	230px,	168px,	92px ); 	 }
#banner{  		.animationObj(	81px, 	290px, 	115px, 	22px ); }
#bdv{  			.animationObj(	127px, 	96px, 	233px, 	22px ); }
#carta{  			.animationObj(	13px, 	339px, 	211px, 	22px ); }
#cdrom{  			.animationObj(	29px, 	255px, 	109px, 	10px ); }
#no_multimedia{  	.animationObj(	10px, 	250px, 	125px, 	20px ); }
#ecommerce{  		.animationObj(	763px, 	192px, 	181px, 	32px ); }
#email{  			.animationObj(	588px, 	4px, 	184px, 	23px ); }
#geo{  			.animationObj(	747px, 	258px, 	181px, 	32px ); }
#immcoord{		.animationObj(	600px, 	328px, 	349px, 	38px ); }
#logo{  			.animationObj(	604px, 	159px, 	124px, 	54px ); }
#merchandise{  	.animationObj(	242px, 	343px, 	168px, 	26px ); }
#mobile{  		.animationObj(	713px, 	98px, 	226px, 	46px ); }
#motori{  		.animationObj(	8px, 	44px, 	224px, 	49px ); }

#passaparola{  	.animationObj(	309px, 	127px, 	250px, 	87px ); }
#ppc{  			.animationObj(	305px, 	283px, 	170px, 	34px ); }
#qr{  			.animationObj(	838px, 	11px, 	91px, 	33px ); }
#radio{  			.animationObj(	154px, 	0px, 	138px, 	30px ); }
#seo{  			.animationObj(	609px, 	40px, 	151px, 	70px ); }
#sito{  			.animationObj(	24px, 	128px, 	269px, 	106px ); } 
#sms{  			.animationObj(	580px, 	127px, 	42px, 	19px ); }
#socialnetworks{  	.animationObj(	222px, 	218px, 	347px, 	49px ); }
#tv{  			.animationObj(	453px, 	343px, 	77px, 	20px ); }
#viral{  			.animationObj(	310px, 	12px, 	229px, 	32px ); }
#youtube{  		.animationObj(	441px, 	58px, 	142px, 	73px ); }
#fff_blue{  		.animationObj(	260px, 	260px, 	50px, 	30px ); }
#ffff_blue{  		.animationObj(	243px, 	226px, 	0px, 	0px ); }
#ff_blue{  		.animationObj(	345px, 	38px, 	100px, 	83px ); }
#f_blue{  		.animationObj(	820px, 	130px, 	100px, 	80px ); }
#help{ 			.animationObj(	160px, 	240px, 	475px, 	175px );  opacity: 0;}

#f_green{  		.animationObj(	850px,	50px, 	45px, 	45px ); }
#ff_green{  		.animationObj(	680px, 	280px, 	102px, 	42px ); }
#fff_green{  		.animationObj(	790px, 	280px, 	0px, 	0px ); }
#qmw_1{  		.animationObj(	782px, 	23px, 	0px, 	0px ); }
#qmw_2{  		.animationObj(	600px, 	170px, 	0px, 	0px ); }
#qmw_3{  		.animationObj(	812px, 	290px, 	0px, 	0px ); }
#qmw_4{  		.animationObj(	160px, 	235px, 	0px, 	0px ); }

#qmy_1{  		.animationObj(	11px, 	128px, 	0px, 	0px ); }
#qmy_2{  		.animationObj(	822px, 	143px, 	0px, 	0px ); }
#qmy_3{  		.animationObj(	293px, 	74px, 	0px, 	0px ); }
#pony{  		.animationObj(	950px, 	0px, 	0px, 	0px ); }
#ponyContainer{.animationObj(	0px, 	0px, 	980px, 	350px ); }