/*
Theme Name: Caffe'' Pitti
Theme URI: http://www.lumengrafica.com
Description: Tema in gran parte statico per garantire un forte posizionamento sui motori di ricerca.
Version: 1.0
Author: Vincenzo Fiore Marrese per Lumen
*/

/* #################################### ELEMENTI DI BASE #################################### */

/* tabulazione come spazio bianco con valore cross-platform idem uso minuscole invece che maiuscole */
/* in queste regole si cerca di eliminare tutte le preimpostazioni dei browser */

body, html, p, h1, h2, h3, h4, h4, h5, ol, ul, dl, li, dt, dd, blockquote, hr, pre, form, fieldset, input, img  {
	margin: 0;
	padding: 0;
	}
h1, h2, h3, h4, h4, h5, em, strong, b, address {
	font-weight: normal;
	}
a 	{
	text-decoration: none;
	/* border 0 e necessario per opera 3 4 e 5 su win che aggiunge dei bordi intorno al link */
	border: 0;
	}
img, a img, abbr, acronym {
	border: 0;
	}
ol, ul, dl, li, dt, dd {
	list-style-type: none;
	}
abbr, acronym {
	cursor: help;
	}
hr {
	display: none;
	}

/* #################################### ELEMENTI DI BASE #################################### */

/* #################################### CORPO CARATTERI #################################### */

/* se nel body la dimensione dei caratteri e dichiarata in em invece che in percentuale ie interpreta male il dimensionamento inoltre se fosse indicata in pixel ie non ridimensionerebbe */

body {
	font-size: 76%; /* sane css typography */
	}
h1 {
	font-size: 2.0em;
	}
div#titolosinistra h4, div#titolodestra h4 {
	font-size: 3em;
	font-weight: bold;
	}
h2, div.piattititolo h5, div.accacinque h5 {
	font-size: 1.8em;
	}
h3 {
	font-size: 1.6em;
	}
p, table,div#menu div#intramenu ul li h3, div#documentochiusura p {
	font-size: 1.2em;
	}
h4, div#navigazione ul li {
	font-size: 1.1em;
	}
div#contenuto div#documentochiusura p, div#slogan div#intraslogan h2, div#slogan div#intraslogan p, div#navigazione ul li ul li {
	font-size: 1em;
	}
h5, div#dati div#intradati p, div#powered ul li {
	font-size: 0.9em;
	}

/* #################################### /CORPO CARATTERI #################################### */

/* #################################### INTERLINEA #################################### */

h1, h2, h3, h4, h4, h5, div#daticaffe p {
	line-height: 1.4em;
	}
p, table, div#navigazione ul li {
	line-height: 1.4em;
	}

/* #################################### INTERLINEA #################################### */

/* #################################### FAMIGLIE CARATTERI #################################### */

/* sono studiate per degradare bene su windows mac e linux */

pre {
	font-family: "Courier New", "Courier", "Lucida Console", "Monaco", "Fixed", monospace;
	}
/* TODO controllare quali di questi contenitori esistono ancora */
body, p, h4, div#slogan h2, div#menuprincipale ul li h3, h5, h3, h4, div#siamoafirenze h3, div#siamoafirenze h4, div#menucontainer ul li {
	font-family: "Verdana", "Tahoma", "Candara", "DejaVu Sans", "Geneva", sans-serif;
	}	
h1, h2 {
	font-family: "Georgia", "Century Schoolbook L", "DejaVu Serif", "Utopia", "Palatino", "Times New Roman", "New York", "Times", serif;
	}
/* TODO controllare quali di questi contenitori esistono ancora */
.ampersand, div#titolosinistra h4, div#titolodestra h4, div.piattititolo h5, div.accacinque h5 {
	font-family: "Monotype Corsiva", "Book Antiqua", "Goudy Old Style", "URW Chancery L", "Zapf Chancery", "Apple Chancery", "Zapfino", serif;
	}

/* #################################### /FAMIGLIE CARATTERI #################################### */

/* #################################### EFFETTI SUL TESTO #################################### */

/* TODO controllare quali di questi contenitori esistono ancora */
.tuttomaiuscolo, div#menu div#intramenu ul li h3 a, div#documentosottotitolo h4, div#navigazione div#tour ul li a, div#documento div#intradocumento div#documentotitolo h4 {
	text-transform: uppercase;
	}
.grassetto {
	font-weight: bold;
	}

/* #################################### /EFFETTI SUL TESTO #################################### */

/* #################################### LISTE #################################### */

div#menu div#intramenu ul li, div#menu div#intramenu ul li h3, div#lingue div#intralingue ul li {
	display: inline;
	}

/* #################################### /LISTE #################################### */

/* #################################### COLORI #################################### */

/* ==========> font e sfondo body <========== */

body {
	/*color: #f2f272;*/
	color: #E4dc80; /* giallo */
	background-color: #8c5b65; /* viola chiaro */
	}

/* ==========> font, sfondo e bordi body link <========== */

/* specificando p, li etc... evito che venga presa anche un'immagine e formattata secondo queste due regole */

p a:link, p a:visited, li a:link, li a:visited, h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited {
	color: #E4dc80; /* giallo */
	border-bottom: solid 1px #E4dc80; /* giallo */
	}
p a:hover, p a:focus, p a:active, li a:hover, li a:focus, li a:active, h1 a:hover, h1 a:focus, h1 a:active, h2 a:hover, h2 a:focus, h2 a:active, h3 a:hover, h3 a:focus, h3 a:active, h4 a:hover, h4 a:focus, h4 a:active, h5 a:hover, h5 a:focus, h5 a:active, h6 a:hover, h6 a:focus, h6 a:active {
	color:  #E4dc80; /* giallo */
	border-bottom: solid 1px #8c5b65; /* viola chiaro */
	}

/* ==========> menu <========== */

div#brand {
	background-color: #E4dc80; /* giallo */
	color: #8c5b65; /* viola chiaro */
	}

div#menu, div#navigazione {
	background-color: #471d25; /* viola scuro */
	color: #E4dc80; /* giallo */
	}

div#powered ul li {
 color: #8c5b65;
 }

/* ==========> bordi <========== */

div#dati, div#lingue, div#tour, div#firenze, div#piatti, div#link {
	border-bottom: solid 1px  #8c5b65; /* viola chiaro */
	}
div#documentoimmagini {
	border-top: solid 1px #624046; /* viola medio */
	}
div#contenuto {
	border-top: solid 2px #471d25; /* viola scuro */
	}
div#brand {
	border-bottom: solid 1px #471d25; /* viola scuro */
	}
div#piede {
	border-top: solid 1px #624046; /* viola medio */
	border-bottom: solid 2px #471d25; /* viola scuro */
	}
div#menu {
	border-top: solid 1px #2d1217; /* viola molto scuro */
	border-bottom: solid 2px #2d1217; /* viola molto scuro */
	}
div#intrafotogrande img, div#documentoimmagini img {
	border: solid 1px #2d1217; /* viola molto scuro */
	}
div#documentochiusura p span {
	border-bottom: double 4px #624046; /* viola medio */
	}

/* #################################### /COLORI #################################### */

/* #################################### BACKGROUND IMAGE #################################### */

div#contenuto {
	background: #8c5b65 url('images/colonna_sinistra.png') repeat-y top right; /* qui e non nel body altrimenti su firefox 3.01 su linux creava dei problemi di visualizzazione quando la finestra si restringeva */
	}

/* #################################### /BACKGROUND IMAGE #################################### */

/* #################################### LAYOUT #################################### */

/* min-width su explore senza javascript - tecnica di holly e john - http://www.communitymx.com/content/article.cfm?cid=CC96C&print=true - basata su - Stu Nicholls - http://www.cssplay.co.uk/boxes/minwidth.html - */

/* principale >> struttura >> layout >> secondari >> intra >> specifiche >> ultraspecifiche */





/* ==========> disposizione su 2 colonne della testa <========== */

div#testa {
	position: relative; /* relative permette il posizionamento absolute delle colonne laterali */
	}
div#corpo {
	padding-bottom: 100px;
	}
div#brand {
	margin: 0 201px 0 0;
	height: 128px;
	}
div#banner {
	position:absolute;
	top: 0;
	right: 0;
	width: 200px;
	margin-right: -1px; /* questa regola serve perche'' explorer aggiunge un px a destra in corrispondenza della barra di scorrimento */
	}
div#sottointestazione {
	height: 7em;
	margin-right: 200px; /* lo spazio della colonna destra del layout del corpo */
	}

/* ==========> disposizione su 3 colonne del corpo <========== */

/* APERTO ####_1 di 3_#### questi stili servono per implementare min-widht in explorer senza usare javascritp */

body {
	padding-left: 0 !important; /* in questo modo applico la regola solo ad Explorer altrimenti poera 5 scombinava il layout */
	padding-right: 0 !important; /* in questo modo applico la regola solo ad Explorer altrimenti poera 5 scombinava il layout */
	padding-left: 500px;
	padding-right: 500px;
	}

/* CHIUSO ####_1 di 3_#### questi stili servono per implementare min-widht in explorer senza usare javascritp */

div#contenuto {
	position: relative; /* relative permette il posizionamento absolute delle colonne laterali */
/* APERTO ####_2 di 3_#### questi stili servono per implementare min-widht in explorer senza usare javascritp */
	margin-left: 0 !important; /* in questo modo applico la regola solo ad Explorer altrimenti poera 5 scombinava il layout */
	margin-right: 0 !important; /* in questo modo applico la regola solo ad Explorer altrimenti poera 5 scombinava il layout */
	margin-left: -500px;
	margin-right: -500px;
	min-width: 1000px;
/* CHIUSO ####_2 di 3_#### questi stili servono per implementare min-widht in explorer senza usare javascritp */
	}

/* APERTO ####_3 di 3_#### questi stili servono per implementare min-widht in explorer senza usare javascritp */

/* \*/
* html #contenitore,* html #contenuto {
height:0;
}
/* */

/* CHIUSO ####_3 di 3_#### questi stili servono per implementare min-widht in explorer senza usare javascritp */

div#colonnasinistra {
	position:absolute;
	top: 128px;
	left: 0;
	width: 290px;
	margin-top: 7em; /* dimensione della colonna sottointestazione */
	}
div#informazioni {
	margin: 0 200px 0 290px;
	}
div#navigazione {
	position:absolute;
	/*top: -5em;*/ /* l''altezza del div#sottoinsieme in negativo */
	top: 128px;
	right: 0;
	width: 200px;
	margin-right: -1px; /* questa regola serve perche'' explorer aggiunge un px a destra in corrispondenza della barra di scorrimento */
	}

div#piede {
	margin-right: 200px;
	}

/* ==========> disposizione su 3 colonne <========== */

/* ==========> specifiche <========== */

div#intraslogan, div#intramenu, div#intrafotogrande, div#crediti {
	margin-left: 10px;
	}
div#intradocumento {
	margin-left: 15px;
	margin-right: 5em;
	}
div#dati {
	margin-top: 1em;
	}
div#documentoimmagini {
	padding-top: 1.5em;
	}
div#documentoimmagini div.sezione span {
	margin-right: 1em;
	}
div#documentotesto, div#documentoimmagini div.sezione span, div#logo, div.piattititolo {
	margin-bottom: 1em;
	}
div#intralingue, div#intratour, div#intrafirenze, div#intrapiatti, div#intramappa, div#intralink, div#intrapowered {
	padding-left: 1em;
	padding-bottom: 0.5em;
	padding-top: 0.2em;
	}
div#intradati {
	padding-left: 1em;
	padding-bottom: 0.8em;
	}
div#documentolink {
	margin-bottom: 3em;
	}
div#intramenu, div#intraslogan, div#crediti {
	padding: 0.5em 0 0.5em 0;
	}
div.piattielenco {
	margin-top: 0.5em;
	}
div.piattititolo {
	margin-top: 1.5em;
	}

/* #################################### IMAGE REPLACEMENT #################################### */

div#brand div#intrabrand h1 {
	background: url('images/caffe_pitti_logo_caffe.gif') no-repeat top left;
	width: 476px;
	height: 128px;
	}
div#brand div#intrabrand h1 span {
	display: none;
	}
div#logo h4 {
	background: url('images/caffe_pitti_logo_200.gif') no-repeat center;
	width: 200px;
	height: 51px;
	border: solid 1px #471d25; /* viola scuro */
	padding: 2px;
	background-color: #E4dc80; /* giallo */
	}
div#logo h4 span {
	display: none;
	}

/* #################################### /IMAGE REPLACEMENT #################################### */

/* ==========> menu principale <========== */

div#menu ul li a:link, div#menu ul li a:visited {
	color: #FFb3c2;
	border-bottom: solid 1px #471d25;
	}
div#menu ul li a:hover, div#menu ul li a:focus, div#menu ul li a:active {
	color:  #E4dc80; /* giallo */
	border-bottom: solid 1px #E4dc80; /* giallo */
	}	
div#menu ul li.attivo a:link, div#menu ul li.attivo a:visited, div#menu ul li.attivo a:hover, div#menu ul li.attivo a:focus, div#menu ul li.attivo a:active {
	color: #E6A50B;
	border-bottom: 0;
	cursor: default;
	border-top: solid 1px #E4dc80; /* giallo */
	}

div#navigazione ul li a:link, div#navigazione ul li a:visited {
	color: #FFb3c2;
	border-bottom: solid 1px #471d25; /* viola scuro */
	}
div#navigazione ul li a:hover, div#navigazione ul li a:focus, div#navigazione ul li a:active {
	color:  #E4dc80; /* giallo */
	border-bottom: solid 1px #E695A5; /* viola molto chiaro */
	}
div#powered ul li a:link, div#powered ul li a:visited {
	color: #8c5b65;
	border-bottom: solid 1px #471d25;
	}
div#powered ul li a:hover, div#powered ul li a:focus, div#powered ul li a:active {
	color:  #8c5b65; /* giallo */
	border-bottom: solid 1px #8c5b65; /* giallo */
	}	

/* ==========> tour <========== */

div#navigazione div#tour ul li a:link, div#navigazione div#tour ul li a:visited {
	color: #E6A50B;
	}
div#navigazione div#tour ul li a:hover, div#navigazione div#tour ul li a:focus, div#navigazione div#tour ul li a:active {
	color:  #E4dc80; /* giallo */
	border-bottom: solid 1px #E6A50B;
	}

/* #################################### MODIFICHE LAYOUT DUE COLONNE #################################### */

body.duecolonne div#contenuto {
	background: #8c5b65; /* toglie le righe alternate di sfondo - la texture */
	}
body.duecolonne div#brand {
	margin: 0 0 0 0; /* toglie il bordo per la colonna destra */
	height: 61px; /* ridimensiona il logo per la versione più piccola sfrutta quello del documentochiusura ==> logo */
	}
body.duecolonne div#brand div#intrabrand h1 {
	background: url('images/caffe_pitti_logo_200.gif') no-repeat;
	background-position: 5px 5px; /* centra il logo */
	width: 205px; /* ridimensiona il logo per la versione più piccola sfrutta quello del documentochiusura ==> logo */
	height: 61px; /* ridimensiona il logo per la versione più piccola sfrutta quello del documentochiusura ==> logo */
	}
body.duecolonne div#sottointestazione {
	margin-right: 0; /* toglie il bordo per la colonna destra */
	}
body.duecolonne div#piede {
	margin-right: 0; /* toglie il bordo per la colonna destra */
	}
div#sinistra {
   margin-right: 50%;
	}
div#destra {
  position: absolute;
	top: 61px;
	margin-top: 7em; /* dimensione della colonna sottointestazione */
  right: 0;
  width: 50%;
	}
div#titolosinistra, div#titolodestra {
	margin-bottom: 1em;
	}
.precentra, div#intrasinistra, div#intradestra {
	text-align: center;
	}
/* ==========> mappa google e mappa statica <========== */
div#map {
	width: 380px;
	height: 285px;
	border: solid 1px #2d1217;
	margin: 0 auto 0 auto;
	color: #900; /* setta il colore del testo nel fumetto che altrimenti srebbe giallo come quello del sito */
	overflow: hidden;
	}
div#mapstatic {
	width: 380px;
	height: 285px;
	border: solid 1px #2d1217;
	margin: 0 auto 0 auto;
	}
/* ==========> /mappa google e mappa statica <========== */

div.piattifoto img {
	border: solid 1px #2d1217; /* viola molto scuro */
	}

/* #################################### /MODIFICHE LAYOUT DUE COLONNE #################################### */

/* #################################### MODIFICHE LAYOUT MONOLITICO #################################### */

div#monoliticotesto {
	margin-left: 10px;
	}
div#monoliticocontenuto {
	margin: 1em auto 2em auto;
	text-align: left;
	width: 400px;
	border: solid 1px #2d1217; /* viola molto scuro */
	padding: 0;
	}
div#monoliticotour {
	margin: 1em auto 2em auto;
	text-align: left;
	width: 400px;
	height: 400px;
	border: solid 1px #2d1217; /* viola molto scuro */
	padding: 0;
	}
applet, param {
	margin: 0;
	padding: 0;
	}
div.contornasinistra img {
	float: left;
	margin-right: 1em;
	border: solid 1px #2d1217; /* viola molto scuro */
	}

/* #################################### /MODIFICHE LAYOUT MONOLITICO #################################### */

/* FORM AGGIORNATO 5-7 settembre 2008 */

form, fieldset, legend, label, textarea, select, button {
	margin: 0;
	padding: 0;
	}
form, fieldset, legend, label, textarea, button {
	color: #f2f272;
	background-color: #8c5b65;
	}
form label {
	display: block;
	float: left;
	width: 11em;
	margin: 0 0.5em 0 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	text-align: left;
	}
form {
	margin-bottom: 4em;
	}
form input {
	margin-bottom: 1em;
	border-top: 2px #471d25 solid;
	border-right: 1px #471d25 solid;
	border-bottom: 1px #471d25 solid;
	border-left: 1px #471d25 solid;
	padding: 0.2em;
	background-color: #ccc;
	color: #471d25;
	}
form fieldset {
	border: 1px solid #471d25;
	margin: 1em 0 0.5em 0;
	padding: 0 1.5em 0 1.5em;
	}
form fieldset legend {
	font-size: 1.5em;
	color: #471d25;
	}
div.fm_name, div.fm_ragione_sociale, div.fm_numero_di_posti, div.verificatore {
	margin-top: 1.5em;
	}
div.fm_fax, div.fm_iva, textarea#fm_richieste_specifiche , input.fmverify {
	margin-bottom: 1.5em;
	}
form textarea {
 	width: 30%;
	height: 10em; 
	border-top: 2px #000 solid;
	border-right: 1px #000 solid;
	border-bottom: 1px #000 solid;
	border-left: 1px #000 solid;
	padding: 0.2em;
	background-color: #ccc;
	color: #000;
	}
form select {
	background-color: #471d25;
	color: #f2f272;
	margin-bottom: 1em;
	}
div.submit input {
	margin: 1em 0 1em 0;
	border: 2px #ccc solid;
	padding: 0.2em;
	cursor: pointer;
	}
div.submit input#invia {
	background-color: #006600;
	color: #fff;
	}
div.submit input#cancella {
	background-color: #990000;
	color: #fff;
	}
p.ddfmerrors, p.thankyou {
	margin: 0.5em 0 0.5em 0;
	font-size: 1.5em;
	font-weight: normal;
	}
div.errorlist {
	font-size: 1.2em;
	line-height: 1.8em;
	}
img.verifica {
	margin-top: 0.5em;
	border-top: 2px #471d25 solid;
	border-right: 1px #471d25 solid;
	border-bottom: 1px #471d25 solid;
	border-left: 1px #471d25 solid;
	}
.marginealto {
	margin-top: 1em;
	}
div.prezzomenu p {
	font-size: 1.5em;
	font-weight: bold;
	}
div.prezzomenu p.corpopiccolo {
	font-size: 1.2em;
	font-weight: bold;
	}
div#intradestra, div#intrasinistra {
	padding: 0.5em;
	}
div.menuspeciale {
	margin-top: 1em;
	}
div.menuspeciale ul {
	/*border-bottom: dotted 3px #e6a50b;*/
	padding: 1em;
	}
div.menuspeciale ul li {
	font-size: 1.2em;
	}
/* metodo per inserire un''immagine al posto del filetto */
div.hr {
 	height: 15px;
  	background: #8c5b65 url(filetto_001.gif) no-repeat scroll center;
	}
div.hr hr {
	display: none;
	}
div.piattifoto {
	margin: 1em 0 1em 0;
	}
div.menuspeciale ul li.lisottotitolo {
	font-size: 1.5em;
	margin-bottom: 0.5em;
	}
div.ddfmwrap {

	}
/* modifiche layout home 091006 */
div.paginaristorante div#informazioni {
	margin: 0 200px 0 0;
	}
div.paginaristorante div#documentotesto {
	padding-bottom: 0.5em;
	}
div.paginaristorante div#documentotesto p {

	}
div.paginaristorante div#intradocumento {;
	margin-right: 1em;
	}
div.paginaristorante div#documentolink {;

	}
div.sezione {

	}
img.contorna {
	float: left;
	margin-right: 1em;
	/*margin-bottom: 1.5em;*/
	}
div.contenitoreclear {
	clear: both;
	}
/* il float deve essere dato ad entrambi gli elementi altrimenti explorer non li posiziona bene */
div.specchiettoimmagine {
	float: left;
	}
div.specchiettocoperti {
	text-transform: uppercase;
	font-size: 1em;
	border-top: solid 1px #2d1217;
	border-right: solid 2px #2d1217;
	border-bottom: solid 2px #2d1217;
	border-left: solid 1px #2d1217;
	width: 188px;
	height: 116px;
	padding: 5px;
	background-color: #e4dc80;
	color: #2d1217;
	text-align: center;
	float: left;
	}
p.corpomaggiore {
	font-size: 1.5em;
	}
strong.nograssetto {
	font-weight: normal;
	}
body#dovesiamo h4 {
	font-size: 1.8em;
	}
/*

per risolvere il problema dell'immagine con float che fuoriesce dal contenitore

http://www.positioniseverything.net/easyclearing.html

http://www.css-zibaldone.com/traduzioni/easyclearing/index.html

*/

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Nasconde da IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* Fine dell'hack per IE-mac */

div.aggiuntaviola hr {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	display: block;
	border-style: solid;
	border-top: solid 1px #471d25;
	border-right: solid 0;
	border-bottom: solid 0;
	border-left: solid 0;
	height: 1px; /*per ie6 altrimenti visualizza una doppia riga */
	}
div.aggiuntaviola p {
	color: #2d1217;
	margin: 0;
	}div#monoliticocontenuto {
	margin: 1em auto 2em auto;
	text-align: left;
	width: 400px;
	/* height: 400px; */
	border: solid 1px #2d1217; /* viola molto scuro */
	padding: 0;
	}