#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


    /* ========================================================
           NUOVO CSS: GRIGLIA POLAROID DA 5 MINIATURE CON ZOOM
           ======================================================== */
        /* ========================================================
   CSS GRIGLIA POLAROID CORRETTO (BORDO SEMPRE BIANCO)
   ======================================================== */
/* ========================================================
   CSS GRIGLIA POLAROID: FIX BORDO BIANCO INDISTRUTTIBILE
   ======================================================== */
        body {
            background-color: #e9e9e9;
            padding: 20px;
        }
        
        .gallery-grid {
            display: flex;
            flex-wrap: wrap;       
            gap: 20px;             
            justify-content: center; 
            max-width: 750px;      
            margin: 40px auto;     
        }

        /* La struttura cartacea della Polaroid */
        .gallery-grid a {
            display: inline-flex;
            flex-direction: column;    
            width: 120px;              
            height: 205px;             
            background-color: #ffffff !important; 
            padding: 8px 8px 0px 8px;  
            box-sizing: border-box;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
            transform: rotate(-1.5deg);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Effetto bacheca disordinata */
        .gallery-grid a:nth-child(even) { transform: rotate(2deg); }
        .gallery-grid a:nth-child(3n) { transform: rotate(-1deg); }

        /* Box foto con blocco zoom */
        .photo-box {
            width: 100%;
            height: 150px;             
            overflow: hidden;         
            border: 1px solid #f0f0f0; 
            box-sizing: border-box;
            background-color: #ffffff; 
        }

        .photo-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;     
            display: block;
            transition: transform 0.4s ease; 
        }

        /* MODIFICATO: Stile del testo con font Courier */
        .polaroid-text {
            display: block;
            height: 47px;              
            line-height: 47px;         
            text-align: center;        
            font-family: 'Courier New', Courier, monospace; /* Imposta lo stile macchina da scrivere */
            font-size: 11px;           /* Ridotto leggermente (il Courier è più largo come font) */
            font-weight: bold;         /* Rende il testo ben leggibile */
            color: #111111;            
            overflow: hidden;          
            white-space: nowrap;       
            text-overflow: ellipsis;   
        }

        /* COMPORTAMENTO AL PASSAGGIO DEL MOUSE */
        .gallery-grid a:hover {
            transform: scale(1.05) rotate(0deg); 
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); 
            z-index: 10; 
        }

        .gallery-grid a:hover .photo-box img {
            transform: scale(1.20); 
        }