.bodyindex
{/*colori originari testo: ffffff*/
background-color: #ad0000;
background-image: url("");
text-align: center;
color: #ffffff;
margin-left: 20px;
margin-right: 20px;
font-size: 18px;
font-family: Comic sans ms;;
}
.bodyarticoli
{
text-align: justify;
color: brown;
font-size: 18px;
font-family: verdana;
margin-left: 45pt;
margin-right: 45pt;
background-image: url("../immagini/san_giovanni_sfondo.jpg"); /*stracciato.jpg*/
background-color: white;
}

.bodychiese
{text-align: justify;
color: 663333;
font-size: 19px;
font-family: Trebuchet Ms, verdana, book antiqua;
font-style: normal;
line-height: 1.2;
margin-left: 20pt;
margin-right: 20pt;
background-image: url('immagini/grigio0031.jpeg');
background-color: white;
scrollbar-track-color: #cccccc;
}
.bodycognomi
{text-align: justify;
color: 663333;
font-size: 19px;
font-family: Trebuchet Ms, verdana, book antiqua;
font-style: normal;
line-height: 1.2;
margin-left: 20pt;
margin-right: 20pt;
background-image: ;
background-color: #6666cc;
}

.bodycompenrico
{text-align: left;
color: #990000; /*#333333;*/
margin-left: 6pt;
margin-right: 6pt;
font-size: 20px;
font-family: book antiqua, Trebuchet Ms, verdana;
font-weight: 600;
word-spacing: 1px;
/*line-height: 24px;*/
letter-spacing: -0.5px;
background-image: /*url("immagini/weblink.gif")*/;
background-color: #ffffcc;
}

.bodycompospiti 
{text-align: center;
color: #660000;
font-size: 20px;
font-family: book antiqua, Trebuchet Ms, verdana;
font-style: normal;
line-height: 1.2;
font-weight: 550;
margin-left: 6pt;
margin-right: 6pt;
background-image: url("");
background-color: white;
}

.bodycompospitiindex
{
text-align: left;
color: #f6f2c0;
font-size: 16px;
margin-left: 5 pt;
font-family: book antiqua, Trebuchet Ms, verdana;
font-style: italic;
font-weight: 520;
line-height: 1.3;
background-image: url("");
background-color: #d21d10;
scrollbar-width: 4em;
scrollbar-track-color: #f6b058;
scrollbar-face-color: #f18038;
scrollbar-3dlight-color: #ccffcc;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #d19840;
scrollbar-shadow-color: #ccffcc;
scrollbar-arrow-color: #990000;
}
.bodycultura
{text-align: justify;
color: #003366;
font-size: 19px;
font-family: book antiqua, Trebuchet Ms, verdana;
font-style: normal;
line-height: 1.2;
margin-left: 20pt;
margin-right: 20pt;
background-image: url("immagini\back_blueice.gif");
background-color: #ccffcc;
}
.bodycultura_main
{text-align: left;
color: #003366;
font-size: 19px;
font-family: book antiqua, Trebuchet Ms, verdana;
font-style: normal;
line-height: 1.2;
margin-left: 15px;
margin-right: 5px;
background-image: url("");
background-color: #ccffcc;
}
.bodycucina
{
text-align: justify;
color: #993333;
font-size: 18px;
font-weight: 600;
font-family: trebuchet ms, book antiqua;
margin-left: 10pt;
margin-right: 10pt;
background-image: url("immagini/portata2.jpg");
background-color: white;
}
.bodydizionario
{text-align: justify;
color: #0d0d1f; 
font-size: 19px;
font-family: verdana, book antiqua, Trebuchet Ms;
font-style: normal;
line-height: 1.2;
margin-left: 50pt;
margin-right: 50pt;
background-image: url("");
background-color: #c5eff0; /*#e0ffff;*/ 
}
.bodyfoto
{text-align: left;
color: 990033;
font-size: 20px;
font-family: Trebuchet Ms, verdana, book antiqua;
font-style: normal;
line-height: 1.2;
margin-left: 20pt;
margin-right: 20pt;
background-image: url('immagini/grigio0031.jpeg');
background-color: white;
scrollbar-track-color: #cccccc;
}
.bodylibri
{text-align: left;
color: maroon;
font-size: 18px;
font-family: Trebuchet Ms, verdana, book antiqua;
font-style: normal;
line-height: 1.2;
margin-left: 20pt;
margin-right: 20pt;
background-image: url("immagini/legno0013.gif");
background-color: white;
scrollbar-track-color: #ffcc99;
scrollbar-face-color: #cc9966;
scrollbar-3dlight-color: #cc6666;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #993300;
scrollbar-shadow-color: #993300;
scrollbar-arrow-color: #990000;
}
.bodylinks
{/*colori originari testo: ffffff*/
background-color: #ad0000;
background-image: url("");
text-align: left;
color: #ffffff;
margin-left: 20px;
margin-right: 20px;
font-size: 18px;
font-family: Comic sans ms;
scrollbar-track-color: #ff9999;
scrollbar-face-color: #ff0033;
scrollbar-3dlight-color: #1e1efa;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #cc0000;
scrollbar-shadow-color: #cc0000;
scrollbar-arrow-color: #660000;
}
.bodynaso
{
text-align: justify;
color: #663300;
font-size: 16px;
font-family: verdana;
margin-left: 20pt;
margin-right: 20pt;
background-image: url('immagini/stucco_veneziano.jpg');
background-attachment: fixed;
background-color: #fff8dc;
scrollbar-track-color: #ccccff;
scrollbar-face-color: #ccffff;
}
.bodymemorie
{
text-align: justify;
color: #003300;
font-size: 18px;
font-family: verdana;
margin-left:50px;
background-image: url('immagini/vecchia_giavini_sfondo.jpg');
background-attachment: scroll;
background-repeat: no-repeat;
background-color: white;
}

.bodysinago
{text-align: justify;
color: maroon;
font-size: 22px;
font-family: Trebuchet Ms, verdana, book antiqua;
font-style: normal;
line-height: 1.2;
margin-left: 10pt;
margin-right: 10pt;
background-image: url("immagini/sfumata_crema.gif");
background-color: white;
scrollbar-track-color: #ccff99;
scrollbar-face-color: #cccc99;
scrollbar-3dlight-color: #ccffcc;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #ccffcc;
scrollbar-shadow-color: #ccff99;
scrollbar-arrow-color: #009999;
}
.bodystoriamain
{
text-align: left;
color: #003333;
font-size: 18px;
font-family: verdana;
margin-left: 20pt;
margin-right: 20pt;
background-image: url("immagini/san_giovanni_sfondo.jpg");
background-attachment: fixed;
background-color: white;
scrollbar-face-color: #ffffcc;
scrollbar-track-color: #FFFFcc;
}
.bodystoria
{
text-align: justify;
color: #003333;
font-size: 17px;
font-family: verdana;
margin-left: 10px;
margin-right: 10px;
background-image: url("immagini/san_giovanni_sfondo.jpg");
background-attachment: fixed;
background-color: white;
scrollbar-track-color: #ccccff;
scrollbar-face-color: #ccffff;
}

.bodystats
{
text-align: left;
color: #3f0000;
font-size: 14px;
font-family: arial,book antiqua,verdana;
font-weight: 450;
margin-left: 25pt;
margin-right: 25pt;
font-style: normal;
line-height: 1.2;
background-image: url("");
background-color: #ffffcc;
scrollbar-track-color: #cccccc;
scrollbar-face-color: #cccc99;
scrollbar-3dlight-color: #ccffcc;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #ccffcc;
scrollbar-shadow-color: #ccffcc;
scrollbar-arrow-color: #990000;
}

#header
{background-color: #de2611; width=100%;
}

p.sinistra
{text-align: left;
}
h1
{text-align: center;
color: purple;
font-size: 28px;
font-family: verdana, book antiqua, serif;
font-style: normal;
font-weight: bold
}
h2
{/*titoli per composizioni enrico*/
text-align: center;
color: #3366cc;
font-size: 26px;
font-family: book antiqua, Trebuchet Ms, verdana;
line-height: 1.8;
letter-spacing: 1px;
}
h3
{/*titoli per composizioni ospiti*/
text-align: center;
color: #663300;
font-size: 26px;
font-family: book antiqua, Trebuchet Ms, verdana;
line-height: 1.8;
letter-spacing: 1px;
}
h4
{/*titoli per celle della tendina in pagine diverse da Index.html*/ 
font-family: Verdana;
font-size: 12px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
}
h5
{/*titoli per cognomi*/
text-align: center;
color: #663300;
font-size: 35px;
font-family: book antiqua, Trebuchet Ms, verdana;
font-weight: 600;
line-height: 1.8;
letter-spacing: 2px;
}
a:link
{color: #996699; text-decoration: none; 
}
a:visited
{color: #006666; text-decoration:none;
}
a:hover
{color: blue; text-decoration: underline; font-size: 110%
}
a.articoli:link
{color: green; text-decoration: none; font-size:14
}
a.articoli:visited
{color: 66ff33; text-decoration:none; font-size:14
}
a.articoli:hover
{color: blue; font-size:14; text-decoration: underline; 
}
a.bodyindex:link
{ 
color: #cccc00; text-decoration: none; 
}
a.bodyindex:visited
{color: #ccff33; text-decoration: none; 
}
a.bodyindex:hover
{color: #cccc11; text-decoration: underline; 
}
/*
a.bodyindex:link
{color: #330099; text-decoration: none;
}
a.bodyindex:visited
{color: #330066; text-decoration: none;
}
a.bodyindex:hover
{color: #003300; text-decoration: underline; font-size: 100%;
} */
a.bodycultura_:link
{color: 003333; font-size: 16px; text-decoration: none;
}
a.bodycultura_:visited
{color: 006699; font-size: 16px; text-decoration: none;
}
a.bodycultura_:hover
{color: 003333; font-size: 17px; text-decoration: underline; 
}

a.cognomi:link
{color: cyan; text-decoration: none; font-size:14
}
a.cognomi:visited
{color: 006699; text-decoration:none; font-size:14
}
a.cognomi:hover
{color: blue; font-size:14; text-decoration: underline; 
}
a.compenrico:link
{color: #660000; font-size:14; text-decoration: none;
}
a.compenrico:visited
{color: ff6600; font-size:14; text-decoration:none;
}
a.compenrico:hover
{color: 333333; font-size:14; text-decoration: underline; 
}
a.compospiti:link
{color: #ff6600; text-decoration: none;
}
a.compospiti:visited
{color: #ff6fff; text-decoration:none;
}
a.compospiti:hover
{color: 333333; font-size:105%; text-decoration: underline; 
}
a.cucina:link
{color: #993333; text-decoration: none;
}
a.cucina:hover
{color: #993333; font-size:100%; text-decoration: none;
}
a.cucina:visited
{color: #9933ff; text-decoration: none;
}
a.libri:link
{color: #660000; text-decoration: none;
}
a.libri:visited
{color: ff6633; text-decoration:none;
}
a.libri:hover
{color: 333333; font-size: 100%; text-decoration: underline; 
}
a.foto:link
{color: 990033; font-size: 15px; text-decoration: none;
}
a.foto:visited
{color: ff6633; font-size: 15px; text-decoration: none;
}
a.foto:hover
{color: 333333; font-size: 15px; background: #cccccc; text-decoration: none; 
}
a.memorie:link
{color: #006699; text-decoration: none;
}
a.memorie:visited
{color: green; text-decoration:none;
}
a.memorie:hover
{color: blue; text-decoration: underline; 
}
a.naso:link
{color: 336600; font-size: 15px; text-decoration: none;
}
a.naso:visited
{color: purple; font-size: 15px; text-decoration:none;
}
a.naso:hover
{color: blue; font-size: 16px; text-decoration: underline; 
}
a.personaggi:link
{color: 66ff00; text-decoration: none; font-size:14
}
a.personaggi:visited
{color: 66ff33; text-decoration:none; font-size:14
}
a.personaggi:hover
{color: blue; font-size:14; text-decoration: none; 
}
a.sinago:link
{color: 336600; font-size: 15px; text-decoration: none;
}
a.sinago:visited
{color: purple; font-size: 15px; text-decoration:none;
}
a.sinago:hover
{color: blue; font-size: 16px; text-decoration: underline; 
}
a.storia:link
{color: 336600; font-size: 15px; text-decoration: none;
}
a.storia:visited
{color: purple; font-size: 15px; text-decoration:none;
}
a.storia:hover
{color: blue; font-size: 16px; text-decoration: underline; 
}
.td
{
text-align: justify;
color: brown;
font-size: 16px;
font-weight: 500;
font-family: bookman old style,verdana;
link-color: brown;
padding: 15px;
border: 0px;
}
.tdindex
{
background-color: #cc3300;
background-image: url("");
text-align: center;
color: #ffffff;
font-size: 15px;
font-weight: 200; 
font-family: verdana, Comic sans ms;
padding: 0px;
border: Solid 0px;
/*text-align: center;
color: blue, #660000;
font-size: 15px;
font-family: comic sans Ms;
padding: 0px;
border: Solid 0px;*/
}
.tdsinago
{
text-align: justify;
color: maroon;
font-size: 18px;
font-weight: 550;
font-family: Trebuchet Ms, Bbookman old style, verdana;
padding: 5px;
border: solid 1px;
}
.tdarticoli
{
text-align: justify;
vertical-align: top;
color: brown;
font-size: 16px;
font-weight: 500;
font-family: book antiqua, Trebuchet Ms, verdana;
link-color: brown;
padding: 15px;
border: 0px;
}

.tdcomposizioni
{
text-align: justify;
color: #660000;
font-size: 24px;
font-weight: 500;
font-family: book antiqua, verdana, booksman old style;
padding: 5px;
border: 0px;
background-image: url("immagini/g6lt15.gif");
background-color: white;
}
.tdcompenrico
{
text-align: justify;
color: #333333;
font-size: 20px;
font-weight: 500;
font-family: book antiqua, verdana, booksman old style;
padding: 5px;
border: 10px;

}

.tdcultura
{
text-align: justify;
color: #003366;
font-size: 19px;
font-family: book antiqua, Trebuchet Ms, verdana;
line-height: 1.2;
padding: 15px;
}
.tdchiese
{text-align: justify;
color: 663333;
font-size: 19px;
font-family: Trebuchet Ms, verdana, book antiqua;
font-style: normal;
line-height: 1.2;
}
.tdcucina
{
text-align: justify;
color: #993333;
font-size: 17px;
font-weight: 600;
font-family: trebuchet ms, book antiqua;
padding: 5px;
background-image: url("immagini/portata2.jpg");
background-color: white;
}
.tddizionario
{
	color: #0d0d1f; 
font-size: 18px;
font-family: verdana, book antiqua, Trebuchet Ms;
font-style: normal;
line-height: 1.2;
background-image: url("");
background-color: #c5eff0;

text-align: left;
vertical-align: text-top;
font-weight: 150; 
padding: 0px;
border: Solid 0px;
}
.tdmemorie
{
text-align: justify;
color: #000033;
font-size: 16px;
font-weight: 500;
font-family: book antiqua, Trebuchet Ms, verdana;
padding: 30px;
border: 0px;
}
.tdnaso
{
text-align: justify;
color: #663300;
font-size: 19px;
font-weight: 400;
font-family: verdana, booksman old style;
line-height: 1.4;
padding: 5px;
border: 0px;
link-color: brown;
}

.tdstoria
{
text-align: justify;
color: #000033;
font-size: 18px;
font-weight: 500;
font-family: verdana, booksman old style;
padding: 7px;
border: 0px;
link-color: brown;
}
@media screen and (min-width: 200px) and (max-width: 600px)  {.tdstoria {max-width: 600px; float: left; text-align: justify;}}
@media screen and (min-width: 601px) and (max-width: 800px)  {.tdstoria {max-width: 285px; float: left; text-align: justify;}}
@media screen and (min-width: 801px) and (max-width: 1024px)  {.tdstoria {max-width: 380px; float: left; text-align: justify,}}
@media screen and (min-width: 1025px) {.tdstoria {max-width: 490px; float: left; text-align: justify;} }
.tdverticale
{
writing-mode: tb-rl;
filter: flipv fliph;
text-align: justify;
color: 663333;
font-size: 15px;
line-height: 32px;
font-family: Trebuchet Ms, verdana, book antiqua;
font-style: normal;
}
.tdstats
{
text-align: justify;
color: 663333;
font-size: 13px;
font-family: arial,book antiqua,verdana;
font-weight: 450;
font-style: normal;
}
#salute_testo
{
top: 55px;
left: 20px;
width: 230px;
line-height: 1.4;
position: absolute;
}
#salute_traduzione
{
position: absolute;
top: 55px;
left: 265px;
width: 330px;
line-height: 1.4;
}
#dizionario_testo
{
top: 230px;
left: 20px;
width: 230px;
line-height: 1.2;
position: absolute;
}
#dizionario_traduzione
{
top: 230px;
left: 265px;
width: 700px;
line-height: 1.2;
position: absolute;
}
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
color:#990000;
line-height:18px;
z-index:100;

}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
color:#ffffff;
text-decoration: none;
font-weight: bold;

}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #990000;
color:#ffff99;
}
.image_flex {max-width: 90%};

/*istruzioni nuovo menu a scomparsa*/
/*menu a scomparsa */
.dropbtn {
    background-color: #ad0000;
    color: #ffffff;
	padding: 1x;
    font-size: 24px;
    border: 1px;
}
 
.dropdown {
    position: relative;
    display: inline-block;
	 z-index: 1;
}
 
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ad0000;/*lightgrey;*/
    min-width: 200px;
    z-index: 1;
}
 
.dropdown-content a {
    color: #ffffff;
    padding: 2px 6px;
    text-decoration: none;
    display: block;
	 z-index: 1;
}
 
.dropdown-content a:hover {background-color: orange;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: blue;}

/*fine istruzioni nuovo menu a scomparsa*/
.dt{
text-align: center;
color: brown;
font-size: 14px;
font-weight: 400;
font-family: bookman old style,verdana;
link-color: brown;
padding: 0px;
border: 0px;
}

.bottone_menu_base {
    background-color: #ad0000;
    color: #ffffff;
    padding: 2px;
    font-size: 15px;
    border: 2px;
}
#pulsante {
 width: 180px;
 outline: none;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 font: bold 12px Bodoni, Trajan, Verdana, Georgia, sans-serif, Arial, Helvetica;
 color: #fff;
 padding: 10px 20px;
 border: solid 1px #660000;
 background: #ad0000;
 background: -webkit-gradient(linear, left top, left bottom, from(#ff3300), to(#990000));
 background: -webkit-linear-gradient(top,  #ff3300,  #990000);
 background: -moz-linear-gradient(top,  #ff3300,  #990000);
 background: -ms-linear-gradient(top,  #ff3300,  #990000);
 background: -o-linear-gradient(top,  #ff3300,  #990000);
 -moz-border-radius: 0px;
 -webkit-border-radius: 0px;
 border-radius: 0px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 }
 .giobia_header {
	 width:100%;
text-align: center;
color: #003333;
font-size: 25px;
font-family: book antiqua, verdana;
font-weight: 600;
margin-left: 10pt;
margin-right: 10pt;

 }	 
 
 /*MENU PRINCIPALE RESPONSIVO:ESTESO DESKTOP E TRIGRAMMA MOBILE*/
 /* regole di reset */
ul{margin: 0;padding:0;list-style-type:none}
/* lista in orizzontale. inline-block è come inline, ma può avere altezza e larghezza. relative occorre per il sottomenu */
#menu li{display:inline-block;position:relative}

/* menu. Cambiando center l'oriento a destra o sinistra */
#menu{max-width:100%;background-color:darkblue;border-radius:6px;text-align:justify}

/* link menu. Cambiando 80px posso scrivere voci più lunghe */
li a{display:block;padding:12px 20px;width:80px;color:#fff;font:bold 12px Arial;text-decoration:none;border-right:1px solid #ccc}

/* link menu hover */
a:hover{color:#C8C8C8}

/* SOTTOMENU PRINCIPALE */
#menu li .hidden{display:block;position:absolute;top:100px;left:0;background-color:darkblue;visibility:hidden;margin-left:-5px;border-right:none}

/* link sottomenu */
#menu li .hidden li a{width:80px;border-right:none}

/* animazione per il passaggio sopra agli elementi del menu */
#menu li:hover .hidden{margin-top:-65px;visibility:visible}

/* TRIGRAMMA */
/* stile e invisibilità */
.showMenu{width:40px;border:1px solid black;margin:auto;color:black;text-align:center;font-size:30px;margin-bottom:10px; display:none}

/* invisibilità checkbox
Il checkbox va nascosto in ogni caso ed il menu comparirà quando esso verrà selezionato tramite click sull’etichetta */
input[type=checkbox]{display:none}

/* La tilde alt126 permette di selezionare tutti gli elementi B presenti in A; 
qui sta a significare che dà visibilità al menu quando il checkbox viene selezionato. */
input[type=checkbox]:checked ~ #menu{display:block}


/* MEDIA QUERIES */
/* rendo il menù responsivo per adattarlo ai dispositivi più piccoli, fino ad una risoluzione massima di 768px */
@media only screen and (max-width: 768px) {
  
#menu{border-radius:0;text-align:center;display:none}
  
/* rendo gli elementi dei menu elementi di blocco */  
ul li{display:block}
  
/* imposto la larghezza massima per gli elementi dei menu e i links */  
#menu li .hidden li,#menu li .hidden li a, ul li,ul li a{padding-right:0;padding-left:0;width:100%;border-right:none}
  
/* mostro il sottomenu solo al passaggio del mouse */   
#menu li .hidden li{display:none}
#menu li:hover .hidden li{display:block}  

/* resetto la posizione degli elementi del menu. static valore di default. Gli elementi sono mostrati in ordine, come appaiono nel flusso del documento */  
#menu li{position:static}  
  
/* resetto la posizione del sottomenu e lo mostro */  
#menu li .hidden{position: static;visibility:visible}
  
/* nessuna animazione al passaggio del mouse */  
#menu li:hover .hidden{margin:0} 
  
/* colore di sfondo agli elementi del menu e del sottomenu */
#menu li{background-color:#3E3E3E}
#menu li .hidden li{background-color:darkblue}  
  
/* mostro il pulsante del menu nella versione mobile*/
.showMenu{display:block}  

/*setto foto a 350 px */
.image_responsive {width: 300px;}
  
}
 /*FINE MENU PRINCIPALE RESPONSIVO:ESTESO DESKTOP E TRIGRAMMA MOBILE*/
 
 #divstoria
{
text-align: justify;
color: #000033;
font-size: 18px;
font-weight: 500;
font-family: verdana, booksman old style;
padding: 15px;
border: 0px;}
@media screen and (min-width: 200px) and (max-width: 600px)  {#divstoria{max-width: 100%; float: left; text-align: justify;}}
@media screen and (min-width: 601px) and (max-width: 800px)  {#divstoria{max-width: 265px; float: left; text-align: justify;}}
@media screen and (min-width: 801px) and (max-width: 1000px)  {#divstoria{max-width: 380px; float: left; text-align: justify,}}
@media screen and (min-width: 1001px) {#divstoria {max-width: 45%; float: left; text-align: justify;} }

#divcomposizioni
{
text-align: justify;
color: #660000;
font-size: 20px;
font-weight: 500;
font-family: book antiqua, verdana, booksman old style;
padding: 5px;
border: 0px;
}
@media screen and (min-width: 200px) and (max-width: 600px)  {#divcomposizioni {max-width: 600px; float: left; text-align: justify;}}
@media screen and (min-width: 601px) and (max-width: 800px)  {#divcomposizioni {max-width: 285px; float: left; text-align: justify;}}
@media screen and (min-width: 801px) and (max-width: 1024px)  {#divcomposizioni {max-width: 380px; float: left; text-align: justify,}}
@media screen and (min-width: 1025px) {#divcomposizioni {max-width: 490px; float: left; text-align: justify;} }

#divcomposizioni_new
{
text-align: justify;
color: #660000;
font-size: 20px;
font-weight: 500;
font-family: book antiqua, verdana, booksman old style;
padding: 5px;
border: 0px;
}
@media screen and (min-width: 200px) and (max-width: 600px)  {#divcomposizioni_new {max-width: 100%; float: left; text-align: justify;}}
@media screen and (min-width: 601px) and (max-width: 800px)  {#divcomposizioni_new {max-width: 49%; float: left; text-align: justify;}}
@media screen and (min-width: 801px) and (max-width: 1024px)  {#divcomposizioni_new {max-width: 49%; float: left; text-align: justify;}}
@media screen and (min-width: 1025px) {#divcomposizioni_new {max-width: 49%; float: left; text-align: justify;} }

#divcultura
{
text-align: justify;
color: #003366;
font-size: 18px;
font-family: book antiqua, Trebuchet Ms, verdana;
line-height: 1.2;
padding: 10px;
border: 0px;
}
@media screen and (min-width: 200px) and (max-width: 600px)  {#divcultura {max-width: 600px; float: left; text-align: justify;}}
@media screen and (min-width: 601px) and (max-width: 800px)  {#divcultura {max-width: 285px; float: left; text-align: justify;}}
@media screen and (min-width: 801px) and (max-width: 1024px)  {#divcultura {max-width: 380px; float: left; text-align: justify;}}
@media screen and (min-width: 1025px) {#divcultura {max-width: 490px; float: left; text-align: justify;} }

#divpersonaggi
{
text-align: justify;
color: #000033;
font-size: 20px;
font-weight: 500;
font-family: verdana, booksman old style;
padding: 15px;
border: 3px;}
@media screen and (min-width: 200px) and (max-width: 600px)  {#divpersonaggi{max-width: 600px; float: left; text-align: justify;}}
@media screen and (min-width: 601px) and (max-width: 800px)  {#divpersonaggi{max-width: 265px; float: left; text-align: justify;}}
@media screen and (min-width: 801px) and (max-width: 1000px)  {#divpersonaggi{max-width: 380px; float: left; text-align: justify,}}
@media screen and (min-width: 1001px) {#divpersonaggi {max-width: 490px; float: left; text-align: justify;} }
#tdcompenrico
{
text-align: justify;
color: #333333;
font-size: 20px;
font-weight: 500;
font-family: book antiqua, verdana, booksman old style;
padding: 5px;
border: 10px;
}

@media screen and (min-width: 200px) and (max-width: 600px)  {#tdcompenrico {max-width: 100%; float: left; text-align: justify;}}
@media screen and (min-width: 601px) and (max-width: 800px)  {#tdcompenrico {max-width: 46%; float: left; text-align: justify;}}
@media screen and (min-width: 801px) and (max-width: 1024px)  {#tdcompenrico {max-width: 46%; float: left; text-align: justify;}}
@media screen and (min-width: 1025px) {#tdcompenrico {max-width: 46%; float: left; text-align: justify;} }