@import "OpenSans.css";		/* Carica il font base */


body, p, ol, ul, input, select, button {font-family:"Open Sans","Trebuchet MS","Gill Sans","Gill Sans MT",Helvetica,Calibri,sans-serif; line-height:1.35; text-align:justify}
/* Con Open Sans l’interlinea è di 1.35; le dimensioni di default dei testi sono del 100% o 1em o 16px */


/* Stili di testo */
.Leggero {font-weight:300}
.Normale {font-weight:400}
.Semigrassetto {font-weight:600}
.Grassetto {font-weight:700}
.Grassottello {font-weight:800}


/* Titolo esempi */
#TitoloEsempi {background:#eee; border-radius:.5rem; box-shadow:0 0 0 8px white, 0 0 0 16px #eee, 1.2em 1.2em 1em hsla(0,0%,0%,.5); padding:.5rem 0; margin:2.5rem 0}


/* Note a piè di testo */

/*	Definisce un ambito per la numerazione dei riferimenti di nota, creandola e azzerandola all’inizio
	di ogni sezione: in questo modo le note partiranno da 1; le note, essendo un elenco ordinato,
	partono implicitamente da 1 anch’esse (vedi sotto, counter-increment) */
article {counter-reset:NumerazioneNote}
/* Ad ogni rimando di nota opzionalmente inibisce/consente l’evidenziazione del testo, quando abbracciato dal rimando (àncora) */
article a[onClick*="Nota"] {color:inherit}
/* Ad ogni rimando di nota incrementa la numerazione (vedi sopra, counter-reset), la usa come contenuto e ne definisce l’aspetto */
article a[onClick*="Nota"]::after {counter-increment:NumerazioneNote; content:counter(NumerazioneNote); font-style:normal; font-size:.6em; vertical-align:super; line-height:0; color:#777; background:hsla(0,0%,50%,.25); border-radius:20%; padding:0 .3em; margin-left:.1em}
/* Evidenzia (opzionalmente il testo ed) il rimando di nota al passaggio del puntatore */
article a[onClick*="Nota"]:hover {color:orange}
article a[onClick*="Nota"]:hover::after {color:white; background:maroon}
footer hr {width:200px; margin-left:0; margin-top:1rem; text-align:left; clear:both; border:solid #B0BFCE; border-width:1px 0 0 0; height:0}
footer ol {list-style:decimal; margin-left:2em; font-size:.8em} /* Assicura la numerazione delle note (se modificata da altre definizioni di stile per le liste) */
footer ol a[onClick*="Rimando"]::after {content:""; font-family:FontAwesome; font-weight:normal; position:relative; top:-.15em; color:#BBB; background:hsla(0,0%,50%,.25); border-radius:20%; padding:0 .25em; margin-left:.5em} /* Definisce il contenuto (freccetta su) e l'aspetto del rimando al testo */
footer ol a[onClick*="Rimando"]:hover::after {color:white; background:maroon}


/* Sillabazione */
.Sillabato {hyphens:auto; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto}
.NonSillabato {hyphens:none; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none}


/* Capilettera */

/* Capolettera semplice */
.Sezione + p::first-letter, /* Il primo carattere del primo paragrafo dopo un paragrafo Sezione*/
.Capolettera
	{font-size:1.5rem; line-height:1; font-weight:bold; color:maroon}
/* Capolettera elaborato (base comune): ciascuna pagina imposterà poi il font da usare (e laddove necessario, caso per caso, lettera per lettera, il margine destro per avvicinare il testo che segue) */
.CapoLetteraSole {background:url(../i/Sfondo%20capilettera.png) center no-repeat; min-width:45px; display:inline-block; text-align:center; color:hsl(22,50%,26%)}


/* Effetto lampeggio */
.Lampeggio {animation: Lampeggio 1s linear infinite}
@keyframes Lampeggio {0%, 40%, 100% {opacity:1} 50%, 90% {opacity:0}}


/* Collegamenti */
a {outline:none; color:#0063BD; font-weight:600; text-decoration:none}
a:hover {color:orange}


/* Evita che Edge evidenzi i numeri di telefono */
a.Neutro {color:inherit; font-weight:normal}
a.Neutro:hover {color:inherit}


/* Filetti orizzontali */
hr {border:0; height:1px; background-color:silver}


/* Es.: titolo sezione, ecc. */
.Sezione {background:linear-gradient(to right, black, white); font-size:1.5rem; font-weight:600; font-style:italic; color:white; padding:.2em; margin:1.5em 0 .5em 0}


/* Figure e tabelle */
body {counter-reset:Figg Tabb}
figure {counter-increment:Figg; display:table}
table {counter-increment:Tabb}
figcaption::before {content:"Fig. " counter(Figg) " – "; color:#183149}
figcaption.NoFig::before {content:""} /* Inibisce la numerazione automatica nelle didascalie delle figure */
table caption p::before {content:"Tab. " counter(Tabb) " – "; color:#183149}
table caption p.NoTab::before {content:""} /* Inibisce la numerazione automatica nelle didascalie delle tabelle */
figcaption, table caption {display:table-caption; caption-side:bottom; margin:.25em 0 .5em; font-size:.9em; font-weight:bold; color:maroon; line-height:1.2}
caption p {line-height:1.2}


/* Galleria d’immagini */
ul.Galleria {text-align:center; margin:1em auto .5em}
ul.Galleria li {display:inline-block; vertical-align:middle; margin:.5em}
ul.Galleria a {position:relative}
ul.Galleria a img {max-width:480px; max-height:480px; border:7px solid white; border-radius:7px; box-shadow:.125rem .125rem .25rem rgba(0,0,0,.25)}
ul.Galleria figcaption {text-align:justify}
ul.Galleria figcaption img {vertical-align:middle; margin-right:4px}


.MaiuscolettoBordeaux {color:#800000; font-weight:bold; font-variant:small-caps}

.Evidenziato {font-weight:600; color:#996600}
.Titolo {text-align:center; font-size:xx-large; font-weight:600; color:#996600}

.Centrato {text-align:center}
.ADestra {text-align:right}
.ASinistra {text-align:left}

.SeparatoreDiscreto {text-align:center; padding:24px 0}

.SeparatorePrepotente {text-align:center; padding:24px 0; clear:both}

.Motto {font-size:large; font-weight:bold; color:maroon; text-align:center; padding:24px 0; letter-spacing:.5em; word-spacing:1.5em; clear:both}

.Annota {} /* Flag per individuare i div da annotare */
.NotePièTesto {color:orange} /* Note nell'editor (per farle risaltare nel testo) */
.Apice {font-size:60%; line-height:.9; vertical-align:super}
.Pedice {font-size:60%; line-height:.9; vertical-align:bottom}
.RiquadroNotePièPagina {font-size:70%; text-indent:-.8em; margin-right:.8em; position:relative; left:.8em; text-align:justify} /* Riquadro delle note a piè di pagina */
hr.Note {width:200px; margin-left:-.8em; margin-top:2em; text-align:left; clear:both}
hr.Spiegazioni {color:#003099; background-color:#003099; height:1px; border:none}

.Riquadro {width:1100px; margin:auto}

.Sinistra {float:left; margin:6px 12px 8px 0}
.Destra {float:right; margin:6px 0 8px 12px}
.Nessuno {float:none}
.StaccaSopra {margin-top:.5em} /* Nato per distaccare il testo sopra le immagini e le tabelle */
.StaccaSotto {margin-bottom:.5em} /* Nato per distaccare il testo sotto le didascalie delle immagini e le tabelle */

.CorniceConOmbra {border:7px solid white; border-radius:7px; box-shadow:0 0 0 1px #E0E0E0, 3px 3px 6px hsla(0,0%,0%,.4)}
.CorniceConOmbraCostretta {border:7px solid white; border-radius:7px; box-shadow:0 0 0 1px #E0E0E0, 6px 6px 6px -3px hsla(0,0%,0%,.4)}
.CorniceSenzOmbra {border:7px solid white; border-radius:7px; box-shadow:0 0 0 1px #E0E0E0}
.ConOmbra {box-shadow:3px 3px 6px hsla(0,0%,0%,.4)}
.ConOmbraCostretta {box-shadow:6px 6px 6px -3px hsla(0,0%,0%,.4)}
.CorniceGrande {border:8px white solid} /* Flag (con effetto d'anteprima) per indicare che un elemento va incorniciato */
.CornicePiccola {border:4px white solid} /* Flag (con effetto d'anteprima) per indicare che un elemento va incorniciato */
.Ombra {} /* Flag per indicare che un elemento proietta l'ombra */

/* Es.: didascalie */
.Didascalia {font-size:medium; margin-bottom:1em; font-weight:bold; color:maroon; line-height:1}

.Times {font-family: Times New Roman, Serif}

.Codice {font-family:"Courier New",Courier,monospace; font-weight:normal; color:#000080; border:1px dotted silver; padding:0 2px; background-color:#e0e0e0; white-space:normal; text-align:left}
.BloccoAllineato {display:inline-block}
.AdattaAlContenuto {display:table} /* Utile per adattare la larghezza di un div al suo contenuto*/
.Centra {display:table; margin:.5em auto} /* Utile per centrare un div o una figure */
.Stampati {background-image:url('../i/stampati.jpg')}
.Giornale {background-image:url('../i/giornale.jpg')}

.Davanti {position:relative; z-index:1} /* Porta un elemento davanti agli altri (per far funzionare 'z-index', bisogna impostare 'position') */

.TitoliOpere {font-weight:bold; font-size:42px; color:#633921; border:4px #f0dfbe ridge; padding:8px; text-align:center}

.CentratoSpazi {margin:2px 8px; text-align:center}
.Sbiadimento {background-image:url('../i/B30.png')}

#SchedaTecnica td {color:white; font-size:85%; vertical-align:middle; padding:2px 4px; white-space:nowrap}

/* Es.: note, ecc. */
.Note {font-size:small}

.MezzAsta {vertical-align:middle}


/* Elenchi puntati */
ul.Sole {margin-top:.2em} /* Distanzia l’elenco dal testo precedente */
/* Aggiunge il 20% di un carattere sotto per distanziare la voce o il testo seguente */
ul.Sole li {background-image:url('../i/sole_p.png'); background-repeat:no-repeat; background-position:0 1px; padding:0 0 .2em 26px; overflow:hidden}
#SchedaTecnica ul {list-style-type:square; padding-left:1.25em}


/* Stili di base per i “super-elenchi” */

/* Definisce un contatore per numerare le voci e lo azzera all’inizio di ogni elenco (ognuno partendo così da 1); distanzia l’elenco dal testo precedente */
ol.Numeri {counter-reset:Birra_e_Salsicce; margin-top:.5em}
ol.Numeri li {
	counter-increment:Birra_e_Salsicce; /* Ad ogni voce incrementa la numerazione */
	position:relative; /* Definisce il posizionamento */
	/*	Ricava spazio per i numeri a sinistra del testo, facendo slittare questo a destra e stringendolo di conseguenza,
		aggiungendo anche mezzo carattere per staccare il numero dal testo e mezzo carattere sotto per distanziare la voce o il testo seguente */
	left:calc(1.7em + .5em); padding:0 calc(1.7em + .5em) .5em 0
}
ol.Numeri li.Correzione {left:0; padding:0 0 .5em calc(1.7em + .5em)} /* Riallinea le voci a sinistra di elementi esterni all’elenco */
ol.Numeri li::before {
	content:counter(Birra_e_Salsicce); /* Usa il contatore come contenuto */
	position:absolute; display:inline-block; /* Definisce il posizionamento */
	/* Rifinisce i numeri */
	font-weight:bold; text-align:center; background:radial-gradient(at left top, hsl(36,24%,90%), hsl(36,24%,75%)); color:#585145;
	border-width:.11em; border-radius:20%; border-style:solid; border-color:hsl(36,24%,90%) hsl(36,24%,75%) hsl(36,24%,75%) hsl(36,24%,90%);
	box-sizing:border-box; /* Comprende lo spessore del bordo nelle dimensioni */
	/* Dimensiona i riquadri dei numeri (le misure sono espresse in funzione di quelle del numero, non del testo) */
	width:1.7em; height:1.7em; line-height:1.5;
	/*	Posiziona il numero, spostandolo verso sinistra della sua larghezza
		più il mezzo carattere di testo, per staccarlo dal corpo della voce */
	margin-left:calc(-1.7em - .5em)
}
/*	Ricava spazio laterale (.8 caratteri) tra le immagini contenute nell’elenco ed il testo o i numeri
	(per le immagini accostate a destra va aggiunto allo spazio di .8 caratteri anche l’ingombro del numero, compreso il suo spazio) */
ol.Numeri img[style*="float: right"], ol.Numeri img[style*="float:right"] {margin-left:calc(.8em + 1.7em + .5em)}
ol.Numeri img[style*="float: left"], ol.Numeri img[style*="float:left"] {margin-right:.8em}

/* Variante ingrandita del 50% */
ol.Grandi li {left:calc(1.7em * 1.5 + .5em); padding-right:calc(1.7em * 1.5 + .5em)}
ol.Grandi li::before {font-size:150%; margin-left:calc(-1.7em - .5em / 1.5)}
ol.Grandi img[style*="float: right"], ol.Grandi img[style*="float:right"] {margin-left:calc(.8em + 1.7em * 1.5 + .5em)}

/* Variante ingrandita del 100% */
ol.Grandissimi li {left:calc(1.7em * 2 + .5em); padding-right:calc(1.7em * 2 + .5em)}
ol.Grandissimi li::before {font-size:200%; margin-left:calc(-1.7em - .5em / 2)}
ol.Grandissimi img[style*="float: right"], ol.Grandissimi img[style*="float:right"] {margin-left:calc(.8em + 1.7em * 2 + .5em)}

/* Variante tonda */
ol.Tondi li::before {border-radius:50%; border-color:hsl(36,24%,75%)}


/* Mappe */
.Fumetto {
	border:1px solid #48b5e9; border-radius:5px;
	box-shadow:0 2px 3px rgba(0,0,0,0.2);
	background:white; color:black;
	margin-top:15px
}
.Fumetto .Titolo {background:#48b5e9; color:white; font:bold 1.1rem "Open Sans Ridotto"}
.Fumetto .Testo {padding:.35rem}