/* Nome Cliente srl */
/* Creato:			gg/mm/aaaa */
/* Autore:			simone@evoluzionetelematica.it */
/* Ultima Modifica:	gg/mm/aaaa	Autore: Nome Cognome */

/**** z-index ****/
/*

10 -> menù

*/

@import url("reset.css");

/****************************  GENERALI ***************************************/

html {width:100%; height:100%; background:#252525;}
body {
	width:100%;
	max-width:480px;
	margin:0 auto;
	height:100%;
	background:#252525;
	background-image:none;
	font:100%/1em "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	color:#666;}
	
a {color:#b58f00}
a:link {color:#b58f00}
a:visited {color:#b58f00;}
a:hover {color:#000;}
a:active {color:#b58f00}

h1 {margin:25px 20px; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.5em; font-weight:normal;}
h2 {margin:0 20px 10px 20px; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; color:#4e4e51;  font-weight:normal;}
h3 {font-family:"Lucida Sans", Verdana, Arial, Helvetica, sans-serif; color:#4e4e51}
h4 {font-family:Georgia, "Times New Roman", Times, serif; color:#4e4e51}
h5 {font-family:Georgia, "Times New Roman", Times, serif; color:#4e4e51}
h6 {font-family:Georgia, "Times New Roman", Times, serif; color:#4e4e51}

#container {
	position:relative;
	top:auto;
	left:auto;
	width:100%px;
	height:auto;
	margin:0 auto;
	padding:0;
	background-color:#FFF;
}

#menu {position:relative; top:auto; left:auto; z-index:10; width:100%; padding:120px 0 0 0;  letter-spacing:-0.05em; background-color:#FFF}
#menu li {position:relative; width:auto; margin:5px 5%; line-height:1; background:url('../img/mobile/button.png') 0 0 no-repeat;}
#menu li a {display:block; height:auto; line-height:40px; overflow:inherit; background:url('../img/mobile/button-right.png') top right no-repeat; text-indent:1em; text-decoration:none; text-align:left; color:#FFF; /*text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;*/}

#menu #mn1 {position:absolute; top:10px; left:50%; z-index:10; width:98px; height:93px; margin:0 0 0 -49px; background:url('../img/logo.gif') 0 0 no-repeat;} /* logo */
#menu #mn2 {bottom:auto; left:auto; width:90%;} /* vignaioli */
#menu #mn3 {bottom:auto; left:auto; width:90%;} /* collection */
#menu #mn4 {bottom:auto; right:auto; width:90%;} /* vivere */
#menu #mn5 {position:absolute; top:70px; right:5px; width:24px; height:24px; margin:0; background:none; font-weight:bold; font-size:.689em;  background:url('../img/mobile/flag-uk.png') 0 0 no-repeat;} /* lingua */
#menu #mn6 {position:absolute; top:-5px; right:-4px; width:74px; height:74px; margin:0; background:url('../img/blog.png') 0 0 no-repeat; } /* blog */

#menu #mn1 a {width:98px; height:93px; background:url('../img/logo.gif') 0 0 no-repeat; text-indent:-999px; overflow:hidden;} /* logo */
#menu #mn2 a {} /* vignaioli */
#menu #mn3 a {} /* collection */
#menu #mn4 a {} /* vivere */
#menu #mn5 a {width:24px; height:24px; top:auto; right:auto; text-indent:-999px; overflow:hidden; background:none; color:#bbb} /* lingua */
#menu #mn6 a {position:absolute; top:5px; right:5px; width:50px; height:50px; overflow:hidden; background:none; text-indent:-999px;} /* blog */

#menu #mn1 a:hover {width:98px; height:93px; background:none;} /* logo */
#menu #mn2 a:hover {background-position:right -40px} /* vignaioli */
#menu #mn3 a:hover {background-position:right -40px} /* collection */
#menu #mn4 a:hover {background-position:right -40px} /* vivere */
#menu #mn5 a:hover {color:#fff}
/*stati attivi delle voci di menù*/
#menu.vignaioli #mn2 {bottom:auto; left:auto; background:url('../img/mobile/button.png') 0 -40px no-repeat;} /* vignaioli */
#menu.collection #mn3 {bottom:auto; left:auto; background:url('../img/mobile/button.png') 0 -40px no-repeat;} /* collection */
#menu.vivere #mn4 {bottom:auto; right:auto; background:url('../img/mobile/button.png') 0 -40px no-repeat;} /* vivere */
#menu.vignaioli #mn2 a {background:url('../img/mobile/button-right.png') right -120px no-repeat;} /* vignaioli */
#menu.collection #mn3 a {background:url('../img/mobile/button-right.png') right -120px no-repeat;} /* collection */
#menu.vivere #mn4 a {background:url('../img/mobile/button-right.png') right -120px no-repeat;} /* vivere */

#flashContent {position:relative; background:none;}
#container .full {top:auto; left:auto; width:90%; height:220px; margin:20px 5% 0 5%; background:url('../img/mobile/home.jpg') top center no-repeat;} /* tutta la lunghezza di container */
#container .full.collezione {top:auto; padding:220px 0 0 0; background:url('../img/mobile/collezione.jpg') top center no-repeat;}
#container .half {top:auto; left:auto; width:90%; height:auto; margin:0 5%; background-color:#fff} /* metà lunghezza di container */
#container #flashContent h1 {text-align:left;}
#container #flashContent.full h1 {padding:20px 0 0 0; text-align:right; color:#FFF; text-shadow: 0 3px 4px #333}
#container #flashContent #submenu {position:relative; top:auto; left:auto; padding:20px 0 0 20px; border-top:1px solid #CCC;}
#container #flashContent #submenu li {margin:0 0 10px 0; list-style-type:disc;}
#container #flashContent.full #submenu {top:auto;}

/* Usato dove non ho FLASH -> credits, note legali, privacy*/
#noflashContent {position:relative; top:auto; left:auto; background:none; display:none;}
#container #noflashContent.full {top:auto; width:90%; height:auto; background-color:#fff} /* tutta la lunghezza di container */
#container #noflashContent.half {top:auto; width:90%; height:auto; background-color:#fff} /* metà lunghezza di container */
#container #noflashContent h1 {text-align:left}
#container #noflashContent p {text-align:center; font-size:.875em}

#informazioni {position:relative; bottom:auto; right:auto; left:50%; display:block; width:170px; height:40px; margin:0 0 15px -85px; padding:0; line-height:40px; text-align:center; background:url('../img/mobile/btn-info.png') 0 0 no-repeat; font-size:.875em; color:#FFF; text-decoration:none;}
#informazioni:hover {background-position:0 -40px;}

#facebook {position:relative; bottom:auto; right:auto; left:5%; display:block; width:31px; height:36px; margin:0; overflow:hidden; text-indent:-999px; background:url('../img/facebook.jpg') center 5px no-repeat; display:none;}
#facebook:hover{background-position:center -60px}

.tips {z-index:16; padding:5px; background-color:#4e4e51; font-size:.689em; color:#FFF;}
.tips .tip-top {}
.tips .tip {}
.tips .tip .tip-title {}
.tips .tip .tip-text {display:none;}
.tips .tip-bottom {}

#footer {position:relative; bottom:0; left:auto; z-index:inherit; width:100%; margin:20px 0 0 0; padding:20px 0; text-align:center; font-size:0.689em; color:#bbb; background-color:#252525}
#footer li {display:inline; position:relative; padding:0 12px 0 0;}
#footer #foo6 {display:block; position:relative; top:auto; left:auto; padding:0; text-align:center; font-size:1.5em; font-weight:bold; color:#FFF;}
#footer li.attivo {color:#b58f00}

#footer .social {display:block; margin:10px 0; padding:0;}
#footer .social a span {visibility:hidden;}
#footer .social a.facebook {padding:0; letter-spacing:-.1em; background:url('../img/facebook.gif') top right no-repeat;}
#footer .social a.twitter {padding:0 3px; background:url('../img/twitter.gif') top right no-repeat;}

#footer a {color:#bbb}
#footer a:link {color:#bbb; text-decoration:none;}
#footer a:visited {color:#bbb; text-decoration:none;}
#footer a:hover {color:#fff}
#footer a:active {color:#fff}


/****************************  HOME ***************************************/

#banner {position:absolute; bottom:30px; right:10px; width:200px; height:100px; overflow:hidden;}
#banner li {}
#banner li a {overflow:hidden; text-indent:-999px;}
#banner li#franciacortando a {display:block; width:200px; height:100px; background:url('../img/banner/franciacortando.gif') top left no-repeat;}

/****************************  INTERNE ***************************************/
#content {width:90%; height:auto; margin:0 auto; padding:0; overflow:auto; line-height:1.5; text-align:left;}
#content.scheda {height:auto;}
#content.curtefranca {height:auto;}
#content p {margin:0 0 20px 0; font-size:.875em;}

.elenco {margin:5px 0 20px 20px; list-style-type:disc; font-size:.875em;}

/* distribuzione */
#distribuzione {text-align:left; margin:0 0 40px 0; font-size:.875em;}
#distribuzione .paese {margin:10px 0 0 0; padding:0; border-bottom:1px solid #CCC}
#distribuzione .paese h2 {}
#distribuzione .paese ul {}
#distribuzione .paese ul .distributore {padding:0 0 15px 0;}
#distribuzione .paese ul .distributore span {display:block}
#distribuzione .paese ul .distributore .name {font-weight:bold}
#distribuzione .paese ul .distributore .ref {}
#distribuzione .paese ul .distributore .address {}
#distribuzione .paese ul .distributore .tel-fax {}
#distribuzione .paese ul .distributore .mail {}

/* Scheda */
.caratteristiche {font-size:.875em;}
.caratteristiche li {margin:0 0 10px 0;}
.caratteristiche li.pdf {margin:0;}
.caratteristiche li h3 {display:inline; padding:0 5px 0 0; text-transform:uppercase;}
.caratteristiche li .annate {display:inline;}
.caratteristiche li .annate li {display:inline; padding:0 5px; border-right:1px solid #CCC}

.vini {margin:0 0 15px 0; font-size:.875em; border-bottom:1px solid #CCC}
.vini .vino {position:relative; margin:15px 0 15px 0; padding:0 0 0 100px;}
.vini .vino #imgVino {position:absolute; top:0; left:0;}
.vini .vino h3 {}
.vini .vino span {display:block}
.vini .vino .annate {margin:5px 0 0 0;}
.vini .vino .annate li {}
.vini .vino .annate li h4 {display:inline; padding:0 5px 0 0; color:#666}
.vini .vino .annate li a.pdf {padding:0 5px; border-right:1px solid #CCC}

#sommelier {display:block; position:relative; bottom:auto; left:auto; width:90%; margin:15px 5%; border-bottom:1px solid #CCC; z-index:15; height:100px; font-size:1em; background-color:#FFF; font-size:.875em;}
#sommelier h3 {text-transform:uppercase;}
#sommelier ul {display:block; height:65px; padding:10px 0 0 0; list-style-type:none; margin:0;}
#sommelier ul li {display:inline; margin:0; padding:0;}
#sommelier ul li a {margin:0; padding:0; background-color:#FFF;}
#sommelier ul li a img {border-bottom:5px solid #b58f00;}

#formati {display:block; position:absolute; bottom:30px; left:503px; border:0; z-index:15}

/* vivere il mosnel */
.anagrafica {position:relative; bottom:auto; left:auto; z-index:inherit; width:100%; margin:0 0 25px 0; padding:5% 0; border:0; text-align:center; line-height:1.5; background:url('../img/mobile/bg.png') 0 0 repeat; font-size:.75em; color:#FFF;}
.anagrafica li {}
.anagrafica .nome {font-weight:bold;}
.anagrafica .indirizzo {letter-spacing:-.1em}
.anagrafica .telfax {color:#FFF;}
.anagrafica .telfax a {color:#FFF;}

.credits { font-size:.875em;}
.credits li {position:relative; height:auto; margin:15px 0 0 0; padding:0 0 0 120px;}
.credits li img {position:absolute; top:0; left:0;}
.credits li h3 {}
.credits li span {display:block}
.credits li.fotografie {height:auto;}