/*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                                        */
/*                                                                                          */

#gallerytitlebox{
    position:fixed;
		top:1.95em; /*setting this just less than 2.0 to garauntee no gap after rounding.*/
		height:4.0em;
		width:348px;
		background:white;  /*note: have to set both height and width to use background*/
    margin:1px 5px 0px 1px;
		border-top:1px solid #dedede;
		border-right:1px solid #dedede;
		border-left:1px solid #dedede;
		z-index:3;
}
#gallerytitle{   /* the artist's name is placed using this h1*/
    position:fixed;
    font-weight : bold;
		font-size : 200%;
    text-align : left;
    position:fixed;  
    top:1.5em;       /* a little math here in ems: (1.5+1)*200%=5 */	
		height:1.0em;
    margin-left:5px; /*move gallery title away from edge (body margins were set=0 in main)*/
}


#gallerycontainer{
position:absolute;
		top: 6.0em;  /* a little math here in ems: (1.5+1)*200%=5 */
margin-left:1px; /*move gallery away from edge (body margins were set=0 in main)*/
border-left:1px solid #dedede;
border-right:1px solid #dedede;
padding-left:9px;
padding-right:10px;
width: 329px;
height:470px;   /*just making it long enough to have a full border*/
}

#gbox{                 /* this is an attempt to set the display box location */
/* position:absolute; */ /*set to absolute to allow scrolling of the display box*/
                       /*(in this case within the content container) */
	position:fixed;   /*set to fixed to prevent scrolling of the display box*/
  top: 2.0em;
	left:358px;
	width:600px;         /* being used by default image*/
	height:520px;
	border:1px solid #dedede;
	z-index:0;
}
#gbox img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#maskbase{
position:fixed;
left:0;
top:2.0em;
}
#maskbase2{
position:absolute;
top:520px;
}
#mask{
width:960px;
height:500px;
background:white;
z-index:5;
}
#gallerycontainerbottom{
display:block;
float:left;
width:350px;
margin-left:1px;
border-top:1px solid #dedede;
}
#gallerdisplaybottom{
display:block;
float:left;
width:602px;
margin-left:7px;
border-top:1px solid #dedede;
}
.thumbnail {
display:inline-block;
width:75px;
height:auto;
overflow:hidden;
}

.thumbnail img{         /* this defines the space for each thumbnail     */
/*note I'm not setting the position                                      */
/*so I'm letting them flow one after the other like normal               */
/*and i'm using <br /> in the html to make line feeds                    */
width:auto;
height:auto;
margin: 0 3px 5px -1px;
}

.thumbnail.video:hover img, .thumbnail.video:focus img {   /*not sure what this does-for older browser?*/
/*background-color: transparent;*/
margin-left:-75px;
}

.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:fixed;  /*set to fixed to prevent scrolling of the display box*/
top: 2.0em;
left: 358px; /*position where enlarged image should offset horizontally */
visibility: hidden; /* hide it until hovereed over*/
width:600px;         /*have to set the size of the underlaying canvas */
height:520px;
color: black;      /* the rest of this stuff that will apply to child elements*/
background-color: white;
border:1px solid #dedede;
text-decoration: none;
z-index: 2;
}


.thumbnail span img{ /*CSS for enlarged image*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.thumbnail:hover span{ /*let image show on hover*/
visibility: visible;
z-index: 5;
}
/* try keeping active image by using "active" and set z=0 to allow others to overlay */
.thumbnail:active span{ 
visibility: visible;    /*let the image stay visible if it's been selected*/
z-index: 1;             /* but lower it's z so others can overlap it*/
}
.thumbnail:focus span{ /*don't know what focus is*/
visibility: visible;
z-index: 1;
}
.thumbnail.video:hover span img, .thumbnail.video:focus span img {   /*not sure what this does-for older browser?*/
/*background-color: transparent;*/
margin-left:0px;
}