/*galleria immagini*/

/* Adding the background image */
ul#gallery { padding:0;  margin:0;  width:448px;   height:336px;   position:relative;   list-style-type:none;   background:#ccc url(oliver_scilla.jpg) no-repeat;
  }


/* Default style for list items */
#gallery li {width:64px; height:48px; float:left; z-index:100;
  }



/* Styling the left side of the display area */
#gallery li.lft {float:left; clear:left}
/* Styling the right side of the display area */
#gallery LI.rgt {CLEAR: right; FLOAT: right
}
/* Getting rid of the image gaps */

#gallery A {DISPLAY: block; Z-INDEX: 100; FLOAT: left; WIDTH: 64px; CURSOR: default; POSITION: relative; HEIGHT: 48px;
}

/* Resize the images to 64px x 48px */
#gallery A IMG {BORDER-RIGHT: #ccc 1px solid;  BORDER-TOP: #ccc 1px solid; Z-INDEX: 100; BORDER-LEFT: #ccc 1px solid; WIDTH: 62px;
BORDER-BOTTOM: #ccc 1px solid; POSITION: relative; HEIGHT: 46px;
}
/* Resizing the link on hover
#gallery a:hover {  width:160px;   height:120px;   padding:108px 144px;   position:absolute;   left:0;   top:0;   z-index:20;
  }
*/


#gallery A:hover {PADDING-RIGHT: 144px; PADDING-LEFT: 144px;  Z-INDEX: 20; LEFT: 0px;  PADDING-BOTTOM: 108px; WIDTH: 160px;
PADDING-TOP: 108px;  POSITION: absolute; TOP: 0px; HEIGHT: 120px;
}

/* Resizing the thumbnail on hover */
#gallery a:hover img {  background:#eee;   position:relative;   width:160px;   height:120px;   border:0;   z-index:20;
  }


/*questo codice si riferisce all'immagine ingrandita 320 x 240*/
#gallery A:active {PADDING-RIGHT: 64px; PADDING-LEFT: 64px;  Z-INDEX: 10;  BACKGROUND: none transparent scroll repeat 0% 0%;  LEFT: 0px;
PADDING-BOTTOM: 48px;  WIDTH: 320px; PADDING-TOP: 48px; POSITION: absolute;  TOP: 0px;  HEIGHT: 240px;
}
#gallery A:unknown {PADDING-RIGHT: 64px;  PADDING-LEFT: 64px; Z-INDEX: 10;  BACKGROUND: none transparent scroll repeat 0% 0%;
 LEFT: 0px;  PADDING-BOTTOM: 48px; WIDTH: 320px; PADDING-TOP: 48px; POSITION: absolute; TOP: 0px; HEIGHT: 240px;
}
#gallery A:active IMG {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px;  Z-INDEX: 10;   BACKGROUND: #eee;   BORDER-BOTTOM-WIDTH: 0px;
  WIDTH: 320px;   POSITION: relative;  HEIGHT: 239px;  BORDER-RIGHT-WIDTH: 0px;
}
#gallery A:unknown IMG {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px;Z-INDEX: 10;BACKGROUND: #eee;BORDER-BOTTOM-WIDTH: 0px;WIDTH: 320px; POSITION: relative; HEIGHT: 239px; BORDER-RIGHT-WIDTH: 0px;
}
/* Force the bottom row of images into place (IE only) */
#gallery LI.pad {MARGIN-TOP: -2px; DISPLAY: block; FONT-SIZE: 0px; WIDTH: 448px; HEIGHT: 0px
}
/* The 'click' hack for Internet Explorer */
A:visited {COLOR: #000
}


@media Unknown
{

#gallery A:hover {PADDING-RIGHT: 64px; PADDING-LEFT: 64px;    Z-INDEX: 10;   BACKGROUND: #ccc;   LEFT: 0px;   PADDING-BOTTOM: 48px; 	   WIDTH: 320px;   PADDING-TOP: 48px;    POSITION: absolute;  TOP: 0px;   HEIGHT: 240px;
}
#gallery A:hover IMG {BORDER-TOP-WIDTH: 0px;   BORDER-LEFT-WIDTH: 0px;  Z-INDEX: 10;  BACKGROUND: #aaa; 			 BORDER-BOTTOM-WIDTH: 0px;  WIDTH: 320px;  POSITION: relative; HEIGHT: 240px;  BORDER-RIGHT-WIDTH: 0px;
}
} /*forse è in più*/
/* Resizing the link when 'clicked' */
#gallery a:active, #gallery a:focus {
  background:transparent;
  width:320px;
  height:240px;
  padding:48px 64px;
  position:absolute;
  left:0;
  top:0;
  z-index:10;

  }

/* Resizing the image when 'clicked' */
#gallery a:active img, #gallery a:focus img {
  background:#eee;
  position:relative;
  width:320px;
  height:240px;
  border:0;
  z-index:10;

  }

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
  background:#ccc;
  width:320px;
  height:240px;
  padding:48px 64px;
  position:absolute;
  left:0;
  top:0;
  z-index:10;
  }
#gallery a:hover img {
  background:#aaa;
  position:relative;
  width:320px;
  height:240px;
  border:0;
  z-index:10;
  }
}