body {
	display: block;
	background: #fff;
	color: #135;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: 'trebuchet ms', 'Gill Sans', Verdana, Geneva, Helvetica, Arial, sans-serif;
	text-align:center;
	}
	
#logobar img {
	margin:0 30px;
	}
a {
	text-decoration:none;
	color: #523;
	}

#container {
	width: 675px;
	background: #fff;
	margin: 10px auto;
	border-top: 2px solid #523;
	}
#logobar {
	height: 100px;
	margin: 10px 0 10px 0;
	}
body #logobar {
	background: url(bannerbg.jpg) no-repeat; 
	}
img body.homepage #logobar {
	margin:0 20px;
	}

#headbox {
	background: #fff;
	border-top: 2px solid #523;
	margin-bottom: 10px;
	}
#headbox h1 {
	position: relative;
	z-index: 3;
	font-family: 'trebuchet ms', 'Gill Sans', Verdana, Geneva, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-style: italic;
	color: #341;
	letter-spacing: 0.5em;
	margin: 10px 0  10px 0;
	padding: 0px;
	}
#headbox h2 {
	position: relative;
	font-family: 'trebuchet ms', 'Gill Sans', Verdana, Geneva, Helvetica, Arial, sans-serif;
	text-transform: lowercase;
	font-style: italic;
	letter-spacing: 0.2em;
	position: relative;
	color: #245;
	margin: -10px 40px 20px 2px;
	padding: 0px;
	text-align: right;
	}
h2 {
	font-family: 'trebuchet ms', 'Gill Sans', Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-style: italic;
	letter-spacing: 0.3em;
	color: #341;
	padding: 0px;
	text-align: left;
	}
	
h3 {
	font-family: 'trebuchet ms', 'Gill Sans', Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-style: italic;
	letter-spacing: 0.1em;
	color: #341;
	padding: 0px;
	text-align: right;
	}

h4 {
	font-family: 'trebuchet ms', 'Gill Sans', Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-style: italic;
	letter-spacing: 0.1em;
	color: #341;
	padding: 0px;
	text-align: left;
	}

#navbox {
	text-align: center;
	border-top: 2px solid #523;
	}
#navbox a{
	text-decoration: none;
	font-family: 'trebuchet ms', 'Gill Sans', Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-style: italic;
	font-weight:bold;
	color: #523;
	}
#maincontent {
	margin: 10px 0;
	background: #fff;
	text-align:justify;
	border-top: 2px solid #523;
}
.headline {
	font-size:large;
	font-style:italic;
	}
#headline {
	background: url(flutemouback.jpg) no-repeat;
	}
#footer {
	margin: 10px 0;
	border-top: 2px solid #523;
	padding: 10px 0;
	}
#footer p{
	text-align:center;
	font-style: italic;
	font-size: smaller;
	}
#footer a{
	font-weight: bold;
	}
.disc{
	margin: 0;
	padding: 0;
	list-style: none;
	}
#critic {
	font-size: smaller;
	font-style:italic;
	text-align: right;
	}
<style type="text/css">

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 376px;
left: 360px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
.thumbnail_l img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail_l:hover{
background-color: transparent;
}

.thumbnail_l:hover img{
border: 1px solid blue;
}

.thumbnail_l span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail_l span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail_l:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 376px;
left: 360px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
.thumbnail_l:hover span{
visibility: visible;
top: 630px;
left: 360px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
/*Henry, if you repeat the <i><div class="gallerycontainer"></i> tag for each thumb, you could have the enlarged images to appear right next its corresponding thumb.

The position of the enlarged images are <i>relative</i> to where your <i><div class="gallerycontainer"></i> tag is.

(Not exactly an answer to your question, but you could consider this approach.)

Cheers. */
/* The containing box for the gallery. */ 

/* choose a suitable font and center the #container div in Internet Explorer */

#photocontainer { 
position:relative; 
width:675px; 
height:703px; 
margin:20px auto 0 auto; 
border:1px solid #aaa; 
} 
/* Removing the list bullets and indentation */ 
#photocontainer ul { 
padding:0; 
margin:0; 
list-style-type:none; 
} 
/* Remove the images and text from sight */
#photocontainer a.gallery span {
    position:absolute;
    width:1px;
    height:1px;
    top:5px;
    left:5px;
    overflow:hidden;
    background:#fff;
    }
	/* Adding the thumbnail images */
#photocontainer a.gallery, #photocontainer a.gallery:visited {
    display:block;
    color:#000;
    text-decoration:none;
    border:1px solid #000;
    margin:1px 2px 1px 2px;
    text-align:left;
    cursor:default;
    }
#photocontainer a.slidea {
    background:url(images/p1_t.jpg);
    height:65px;
    width:100px;
    }
#photocontainer a.slideb {
    background:url(images/p2_t.jpg);
    height:65px;
    width:100px;
    }
#photocontainer a.slidec {
    background:url(images/p3_t.jpg);
    height:65px;
    width:100px;
    }
#photocontainer a.slided {
    background:url(images/p4_t.jpg);
    height:65px;
    width:100px;
    }
* html #photocontainer a.slided {
     height:65px;
    width:100px;
    }
#photocontainer a.slidee {
    background:url(images/p5_t.jpg);
    height:65px;
    width:100px;
    }
#photocontainer a.slidef {
    background:url(images/p6_t.jpg);
     height:65px;
    width:100px;
    }
* html #photocontainer a.slidef {
    height:65px;
    width:100px;
    }
#photocontainer a.slideg {
    background:url(images/p7_t.jpg);
    height:65px;
    width:100px;
    }
#photocontainer a.slideh {
    background:url(images/p8_t.jpg);
    height:65px;
    width:100px;
    }
#photocontainer a.slidei {
    background:url(images/p9_t.jpg);
      height:65px;
    width:100px;
    }
#photocontainer a.slidej {
    background:url(images/p10_t.jpg);
    height:65px;
    width:100px;
    }
/* set the size of the unordered list to neatly house the thumbnails */
#photocontainer ul {
    width:100px;
    height:400px;
    }
#photocontainer li {
    float:left;
    }
	/* move the thumbnails into the correct position */
#photocontainer ul {
    margin:5px;
    float:right;
    }
/* change the thumbnail border color */
#photocontainer a.gallery:hover {
    border:1px solid #fff;
    }
	/* styling the :hover span */
#photocontainer a.gallery:hover span {
    position:absolute;
    width:550px;
    height:662px;
    top:10px;
    left:10px;
    color:#000;
    background:#fff;
    }
	#photocontainer a.gallery:hover img {
    border:1px solid #fff;
    float:left;
    margin-right:5px;
    }
	/*#photocontainer a.slideb:hover img, #photocontainer a.slidei:hover img {
    float:right;
    }*/
	/*#photocontainer {
    background:#fff url(images/back.jpg) 75px 10px no-repeat;
    }*/
</style>