/*Script by Dan Pearce 1/20/2010                                                            */
/*to provide a gallery space for presentation of a set of thumbnails                        */
/*each of which causes a second image to be displayed on hover and has an action upon select*/
/*HTML and CSS are used for all actions except display of video.                            */
/*CSS allows a separate display rule on ":hover"                                            */
/*I use this to display a second image in a specified display box                           */
/*either an "absolute"ly positioned container anchored by a parent container                */
/*(that could flow with page if set to "relative")                                          */
/*or                                                                                        */
/*a fixed position container that deosn't move with respect to the rest of the page         */
/*                                                                                          */
/*use of second image under <a><span> described by                                          */
/*: Dynamic Drive CSS Library               URL: http://www.dynamicdrive.com/style/         */
/*http://www.tjkdesign.com/articles/css%20pop%20ups/default.asp                             */
/*http://meyerweb.com/eric/css/edge/popups/demo.html                                        */
/*                                                                                          */

#gallerycontainer{
position:absolute;
		top: 2.95em;  /*  */
width: 100%;
}

img {
max-width:100%;
}

.thumbnail img{         /* this defines the space for each thumbnail     */
position:relative;
height:0%;              /* just making it really small */
width:0%;
}

.thumbnail span{ /*CSS for enlarged image*/
/* this is the image that is hidden while not hovering*/
/* position:absolute; */ /*set to sbsolute to allow scrolling of the display box*/
position:relative;  /*set to fixed to prevent scrolling of the display box*/
left: 0; /*position where enlarged image should offset horizontally */
width:100%;         /*have to set the size of the underlaying canvas */
color: black;      /* the rest of this stuff that will apply to child elements*/
background-color: white;
text-decoration: none;
padding-bottom:20px;
z-index: 2;
}

.thumbnail span img{ /*CSS for enlarged image*/
height:100%;
width:100%;
}