HTML
{margin:0;padding:0;background:#E2E2E0}

BODY
{margin:0;padding:0;background:#FFFFFF;color:#666;font:16px/28px;font-family:Calibri;line-height:22px;

    -webkit-text-size-adjust: 100%; /* Blocca l'ingrandimento su Safari (iOS) */
    -moz-text-size-adjust: 100%;    /* Blocca l'ingrandimento su Firefox */
    text-size-adjust: 100%;         /* Regola standard per Chrome e altri browser */

}




A
{text-decoration:none;}

/** PER LE FONTI **/
H7
{font:14px Calibri; margin:5 0 0 0;}



#contenitore
{width:960px; display:table; background:#FFFFFF; margin:0 auto; padding:0; border:red 0px solid; position:relative;}



#intestazione
{width:920px; background:transparent; padding:0 20px 0 20px; border:black 0px solid;

    /* Spinge l'intestazione a destra e calcola lo spazio reale */
    margin-left: auto; 
    display: block;

}

#intestazione IMG
{border:black 0px solid; margin-top:10px;}

#intestazione P
{margin:0; font:bold 18px Calibri; padding: 0 10px 0 10px; color:#808080}



	
#menu
{width:960px; background:#FF0000; border:black 0px solid; margin-top:20px; text-align:left; color:white; font:bold 20px Calibri;

    
    /* Attiva Flexbox per allineare i link e il contatore sulla stessa linea */
    display: flex;
    align-items: center;          /* Centra verticalmente i link e il contatore */
    justify-content: flex-start;  /* Allinea i link a sinistra di base */
}

#menu A
{color:#FFFFFF; padding:10px 10px 10px 10px; display:inline-block; text-decoration:none; font:bold 20px Calibri;}

#menu A:hover
{color:#FFBF18;}

#menu A#active
{color:#FFFF00;}






#colonna
{width:310px;display:table-cell; padding:0 0 0 10px; float:left; border:0px solid; margin:20px 0 0px 0; background-color:white;}

#colonna A
{color:red; font:bold 18px Calibri;}

#colonna A:hover
{color:orange;}

#colonna IMG
{border:black 0px solid; margin:0 0 10px 0;}

#colonna H1
{font:bold 40px Impact; margin:0 0 10px 0;}


#colonna H3
{font:bold 20px Calibri; text-transform:uppercase; color:#808080;}


/** PER IL TITOLO DELLA COLONNA **/
#colonna H4
{font:bold 17px Calibri; text-transform:uppercase; color:darkblue; padding:0 0 0 10px; margin:0;}

#colonna H5
{font:bold 24px Calibri; color:black; line-height:1; margin:0;}

#colonna P
{padding:0 0px 0px 0px; font:bold 17px Calibri; color:#808080; margin:10px 0 20px 10px;}

.senzamargini P
{margin:0;}




#contenuto
{width:600px; padding:0px 20px 0px 00px; margin:20px 0 0 0; float:right; border:green 1px solid; font-size:16px; color:black; background-color:white;}

#contenuto IMG
{border:black 1px solid; margin:10px  0 10px 10px;}




/** PAGINA HOME (PRATICAMENTE NON SERVE), valutare da trasformare in EDITORIALE **/

#home 
{width:580px; float:right;display:table-cell;  padding:0px 20px 0px 20px; margin:20px 0 0 0px; border:green 0px solid; font-size:14px; color:black; line-height: 18px }

#home A  {color:red;}
#home A:hover  {color:orange;}

#home IMG
{border:black 1px solid; margin:20px 10px 0px 0px;}

P
{font-size:14px; color:black; line-height:18px; margin:40px 0px 0px 0px;}

.categoria	
{color:black; font-weight:bold; font-size:16px; font-style:italic; margin:0px 0 6px 0;}

.immagine
{float:left; border:black 1px solid; margin:0px 10px 10px 0px;}

.scritta-destra
{width:100%; float:right; font-weight:bold; margin:5px 0px 0px 0px; border:green 0px solid; text-align:right;}

HR
{width:100%; border:1px solid; margin:5px 10px 0px 0px; padding:0px 0px 0px 0px;}

		#home H2 		{color:darkblue; font:bold 26px Calibri; margin:20px 0 12px 0;}
		#home H4 		{color:black; font:bold 22px Calibri; margin:0 0 0px 0;}
		#home H5 		{color:black; font:bold 20px Calibri; margin:0 0 0px 0; padding:0}










/** PAGINA NEWS (USATO DA: Home, News, **/

#news
{width:600px; float:right; display:table-cell; padding:0px 0px 0px 20px; margin:20px 0 0 0px; border:0px solid; font-size:16px; color:black; background-color:white;}

#news IMG
{border:black 1px solid; margin:0px 10px 0px 0px;}

/** PER IL TITOLO DELLA PAGINA **/
#news H2	
{color:darkblue; font:bold 17px Calibri; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}

#news TABLE 
{min-height:70px; padding:0; margin:0; border:black 0px solid; font:normal 14px Calibri;}

#news TABLE H6
{padding:0; margin:0; font: 16px Calibri;}

#news TABLE IMG
{float:left; height:60px; width:60px; margin: 6px 10px 0 0;}

#news A  {color:red; font: bold 1.0rem Calibri;}
#news A:hover  {color:orange;}



 .news-box {
    display: flex;
    align-items: center;
    background-color: #F0F0F0;
    border: 1px solid black;
    border-radius: 8px;
    max-width: 600px;
    padding: 10px;
    font-family: Calibri;
    box-shadow: 0 2px 4px RGBA(0,0,0,0.05);
    box-sizing: border-box;
margin-bottom:10px;
  }

  .news-immagine-contenitore {
    width: 100px;       /* Dimensione fissa del quadrato */
    height: 100px;      /* Dimensione fissa del quadrato */
    flex-shrink: 0;     /* Blocca la forma */
    margin-right: 15px; 
    border-radius: 6px; 
    overflow: hidden;
box-sizing: border-box;
  border: none !important; /* Rimuove ed elimina definitivamente ogni bordo */

  }

  .news-immagine {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ritaglia e centra qualsiasi formato (16:9, 4:3, verticale) */
object-position: top;  /* Forza il browser a mostrare la foto partendo dal bordo superiore */
  display: block;
  border: none !important; /* Sicurezza extra per sovrascrivere vecchie regole */
  }

  .news-contenuto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
  }

  .news-titolo {
    font-size: 1.1rem;
    font-weight: bold;
    color: darkblue;
    margin: 0 0 6px 0;
  }

  .news-sottotitolo {
    font-size: 0.9rem;
    color: darkblue;

    margin: 0 0 10px 0;
    line-height: 1.4;
  }

  .news-autore {
    font-size: 1.0rem;
    color: black;
    display: flex;
    gap: 10px;
    margin: 0;
  }



.news-contenuto:hover 
{color: orange;}

/** FORZATURE PER CONSENTIRE DI VISUALIZZARE IL LINK DI COLORE ARANCIO AL PASSAGGIO DEL MOUSE SU TUTTA LA NOTIZIA **/
.news-box a:hover .news-titolo 
{color: orange !important;}
.news-titolo:hover 
{ color: orange !important;}



/** SOTTOPAGINA NOTIZIA **/








/** PAGINA EDITORI **/

#editori		
{width:600px; float:right; padding:0px 0px 0px 20px; margin:20px 0px 0px 0px; font:16px Calibri; color:black; border:0px solid;}

#editori P
{margin:0px 0px 0px 0px;}

#editori TABLE
{margin:0 0px 0 -5px;}

#editori TABLE A:hover
{color:orange;}

#editori A.serie-aperta {color:darkblue;}
#editori A.serie-chiusa {color:red;}

#editori IMG
{height:80px; width:80px; float:left; margin:0px 10px 10px 0; border: 1px solid;}

#editori HR
{padding:1px 0px 0px 0px; margin:3px 0px 3px 0px; background:#8F8F8F; border:0px; height:0px;}

/** PER IL TITOLO DELLA PAGINA **/
#editori H2	{color:darkblue; font:bold 17px Calibri; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}

/** PER LE DESCRIZIONI DELLE TABELLE **/
#editori H6 		{color:black; font:bold 13px Calibri; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}



/** SOTTOPAGINA RECENSIONI **/





/** EDITORI - SERIE **/

#elenco 		
{width:600px; float:right; padding:0px 0px 0px 20px; margin:20px 0 0 0; font:16px Calibri; color:black; border:brown 1px solid;}

#elenco A 		
{color:red;}

#elenco A:hover
{color:orange;}

#elenco TABLE		{margin:0 0px 0 -5px;}

#elenco A.serie-aperta {color:darkblue;}
#elenco A.serie-chiusa {color:red;}

#elenco IMG
{height:80px; width:80px; float:left; margin:0px 10px 10px 0; border: 1px solid;}




#elenco HR, #serie HR		{padding:1px 0 0px 0; margin:3px 0 3px 0; background:#8F8F8F; border:0px; height:0px;}

/** PER IL TITOLO DELLA PAGINA **/
#elenco H2, #serie H2 		{color:darkblue; font:bold 17px Calibri; padding:0 0 0 0px; margin:0 0 0 0;}

/** PER I SOTTOTITOLI DELLA PAGINA **/
#elenco H3, #serie H3 		{color:darkred; font:bold 15px Calibri; padding:0 0 0 0; margin:0 0 0 0;}


/** PER I TITOLI DEGLI ARTICOLI **/
#elenco H4, #serie H4 		{color:red; font:bold 18px Calibri; padding:20px 0 0px 0; margin:0 0 0 0;}

/** PER TITOLI PIU' GRANDI **/
#elenco H4, #serie H5 		{color:red; font:bold 20px Calibri; padding:20px 0 0px 0; margin:0 0 0 0;}

#elenco P {margin:0px 0 0px 0;}

/** PER LE DESCRIZIONI DELLE TABELLE **/
#elenco H6 		{color:black; font:bold 13px Calibri; padding:0 0 0 0; margin:0 0 0 0;}

.categoria-elenco		{color:black; font-weight:bold; font-size:14px; font-family:Calibri; margin:0px 0 6px 0;}


  .senza-bordo {border: none !important; /* Sicurezza extra per sovrascrivere vecchie regole */
  }






/** SCHEDE RELATIVE ALLA SINGOLA COLLANA **/

#serie		
{width:600px; float:right; padding:0px 0px 0px 20px; margin:20px 0 0 0px; font: 16px Calibri; color:black; border:brown 0px solid;}

#serie P {margin:0px 0 10px 0;}

#serie A 		
{color:darkblue;}

#serie A:hover
{color:orange;}

#serie IMG
{float:left; margin:5px 10px 5px 0px; border: 1px solid;}


#serie HR {background:#8F8F8F; height:1px;}

#serie H2	{color:darkblue; font:bold 17px Calibri; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}

#serie H3	
{color:red; font:bold 23px Calibri; padding:0px 0px 0px 0px; margin:0 0 0 0;}

#serie H4 	
{color:red; font:bold 21px Calibri; padding:0px 0px 0px 0px; margin:0 0 0 0;}

#serie H5 	
{color:black; font:bold 16px Calibri; padding:0px 0px 0px 0px; margin:5px 0 5px 0;}


#serie TABLE		{margin:20px 0 20px 0; border: 1px solid;}
#serie TABLE A		{color:red; padding:5px 0 5px 0; display:inline-block;}
#serie TABLE A:hover		{background:yellow; color:darkblue;}
#serie TABLE A:active		{color:yellow;}


#serie A.serie-aperta {color:darkblue;}
#serie A.serie-chiusa {color:red;}







.categoria-serie		{color:black; font-weight:bold; font-size:14px; font-family:Calibri; margin:0px 0 6px 0;}





/*** TABELLA FINTA PER ELENCO TITOLI ***/

.tabella-finta 
{display: flex; flex-direction: column; width: 99%; border: 1px solid #CCC;}


/*** ATTENZIONE I COLORI "A" NON FUNZIONANO; VEDERE DI SISTEMARE ***/

.tabella-finta a 	{color:blue;}
.tabella-finta a:hover 	{color:darkblue;} /*** Colore al passaggio del mouse ***/
.tabella-finta a:active	{color:darkblue;} /*** Colore al momento del click del mouse ***/




.riga {display: flex; border-bottom: 1px solid #EEE;}

.riga:last-child /*** Pseudo-classe CSS che permette di applicare stili all'ultimo elemento figlio di un determinato genitore ***/
{border-bottom: none;}

.cella 
{padding: 10px; box-sizing: border-box; /*** Evita che il padding sballi le percentuali ***/}
/*** flex: 1; Distribuisce lo spazio equamente tra le colonne (opzionale) ***/

.intestazione
{background-color: #F4F4F4; font-weight: bold;}

/* GESTIONE LARGHEZZE TABELLA FINTA IN PERCENTUALE (RIFERITI AI SINGOLI ALBI E NON AGLI EDITORI) */
.colonna-1 {width: 15%;}
.colonna-2 {width: 65%;}
.colonna-3 {width: 20%;}






/** SINGOLA RECENSIONE (USATA ANCHE PER "COMICS" **/

#recensione		
{width:600px; float:right; padding:0px 0px 0px 20px; margin:20px 0 0 0px; font: 16px Calibri; color:black; border:0px solid;}

#recensione P 
{margin:10px 0 10px 0; font: 16px Calibri;}

.spazio-sotto /** AGGIUNGERE SPAZIO SOTTO UN PARAGRAFO P **/
{margin: 0px 0px 10px 0px;} 

.voto
{margin: 0px 0px 10px 0px; color:darkblue;   font-size: 16px; font-weight: bold;
  font-family: Calibri;} 


#recensione A 		
{color:red;}

#recensione A:hover
{color:orange;}

#recensione IMG 		
{float:left; border:black 1px solid; margin: 10px 10px 10px 0px;}


/** PER I TITOLI DELLE RECENSIONI **/
#recensione H4 	
{color:red; font:bold 21px Calibri; padding:0px 0px 0px 0px; margin:0 0 0 0;}

#recensione H5.sottotitolo {padding:5px 0px 5px 0px; margin:0px 0px 0px 0px; color: black; font-family: Calibri;font-size: 17px; font-weight: bold; line-height: 1;}

#recensione HR {background:#8F8F8F; border:1px solid;}

/** LINEA DATA E FIRMA RECENSIONI **/

#crediti {
  width: 100%; 
  margin-top: 10px; 
  display: flex;          /* Attiva Flexbox */
  flex-wrap: wrap;        /* Permette di andare a capo solo se lo schermo è troppo piccolo */
  align-items: center;    /* Allinea perfettamente immagini e testo al centro in verticale */
  font-size: 14px; 
  color: #808080; 
} 

#crediti img {
  margin: 0px 10px 0 0; width:20px; border:black 0px solid;
} 

#crediti p {
  font-size: 16px; 
  margin: 0 20px 0 0; 
  font-weight: bold;
  font-family: Calibri;
}



/** RIQUADRO LINK DA INSERIRE A FONDO PAGINA **/

#link
{width:575px; background-color:gold; padding:5px 25px 5px 0px; border:#8F8F8F 0px solid; display:block;  font:bold 17px Calibri; text-align:right;  
 margin-bottom:0; margin-top:30px; float:right;}

#link A
{color:red; font:bold 19px Calibri; padding:0px 0px 0px 0px; }









#contatti 			{width:580px; padding:0px 20px 0px 0px; margin:20px 0 0 0; float:right; border:green 0px solid; font-size:16px; color:black;}


		#contatti H4 		{color:#8F8F8F; font-weight:bold; font-size:24px; margin:60px 0 6px 0; text-align: left;}



		#contatti TABLE IMG {margin:5px 0 0 0;}
		#contatti HR 		{background:#8F8F8F; margin:0px 0 0px 0;}

		#contatti TABLE H6 		{color:black; font:bold 14px Arial;}

		#contatti P 		{color:black; font:16px Calibri;}
		
		#contatti A 		{color:darkblue; font:normal 16px Calibri;}
		#contatti A:hover 	{color:orange;}

#profilo {font-size:16px; line-height:1,1;}
















#riepilogo 
{width:600px; float:right; background:red; padding:10px 0 10px 0; font:bold 19px Calibri; color:#FFFFFF; text-align:right; border:black 0px solid;}

#riepilogo A
{color:black; padding:10px 5px 10px 5px; font:bold 18px Calibri;}

#riepilogo A:hover
{color:orange;}

#riepilogo A#active
{color:yellow;}



#shinystat
{width:90px; float:right; background:transparent; padding:0px 0 0px 0; margin:0 0 0 0; border:black 0px solid;}


#fondopagina
{width:920px; float:right; margin-top:20px; margin-bottom: 0px; padding:20px; background:red; color:#FFFFFF; font:14px Calibri; border:orange 0px solid;}

#fondopagina A 		
{color:#FFFFFF;}

#fondopagina A:hover	
{color:orange;}

		#fondopagina IMG	{padding:10px 0 0 0px; border:black 0px solid;}
		#fondopagina P 		{font: 14px Calibri; margin:0; padding:0; display:inline-block; color:#FFFFFF;}
		#fondopagina HR	{margin:3px 0 6px 0; background:#FFFFFF;  border:0px;height:1px;}

		#fondopagina TABLE IMG	{padding:0px 0 0 0px;}
		#fondopagina TD		{font:bold 17px Calibri;}




/** BOX CONTATORE PAGINE **/

.box-contatore {
    background-color: transparent;
    border: none;             /* Più pulito di 0px */
    padding: 5px 10px;        /* Un minimo di spazio interno evita che il testo tocchi i bordi blu */
    border-radius: 5px;
    font-family: Calibri, sans-serif;
    
    /* Il trucco magico: spinge SOLO il contatore tutto a destra all'interno del menu rosso */
    margin-left: auto; 
    margin-right: 10px; /* Distanza di sicurezza dal bordo destro del menu */
}

.box-contatore p {
    margin: 0;
    color: white;
    font-size: 17px;

}

#visits {
    font-weight: bold;
    color: yellow;            /* Numero evidenziato in giallo */
}