/* set the height of the page to accommodate the gallery */
div#contentinner {
    height: 480px; /* This sets the height of the page.  See also #photocontainer a.gallery:hover span, etc for height of image plus text */
}
/* set the width and top margin of the components in the photogallery */
div#photocontainer {
    position:relative;
    margin-top:15px;
    width:642px; /* necessary to stop image drop down too far in IE compatability view */
    height:425px; /* necessary to stop image drop down too far in IE compatability view */
}
div#photocontainer img {
    border: 0;
}

/* styles the permanent image */
div.gallerypermanent {
    position: absolute;
    left:130px;
    top:98px;
    z-index:1;
    margin:0;
    padding:0;
}
p.span {
    margin-right:1.5em;
}
a.galleryleft span img, a.gallerytop span img {
    border: 0;
}
div.galleryimage img {
    margin-bottom:10px;
}
/* set the width of the thumbnails container to house the thumbnails and then move the thumbnails into the correct position */
div#thumbnailtop
{
    padding:0;
    margin:0;
    width:623px; /* six thumbnails wide  */
    height:66px;
    float:left;
    background-color:#dcdcdc;
    border: 1px solid #999;
}
div#thumbnailleft
{
    padding:0;
    margin:0;
    width:98px; /* one thumbnail wide */
    float:left;
    background-color:#dcdcdc;
    border: 1px solid #999;
    border-top:0;
}
/* end set the width of the thumbnails container to house the thumbnails and then move the thumbnails into the correct position */
/* size, styling and positioning to the left hand column of each anchor tag holding a thumbnail image */
div#photocontainer a.galleryleft, div#photocontainer a.gallerytop
{
    float:left;
    display:block;
    text-decoration:none;
    padding:4px 0 2px 3px;
    width:94px;  /* width of each thumbnail image is 90px */
    height:64px; /* height of each thumbnail image is 60 px */
    cursor:default;
}
div#photocontainer a.gallerytop {
    padding:2px 8px 0 3px; /* this need to come after div#photocontainer a.gallery {} to over-ride the right padding for vertical thumbnails */
}
div#photocontainer a.gallerytopright {
    padding-right: 0;
}
div#photocontainer a.galleryleft img.thumbnailleft
{
    display:block;
    border:1px solid #000;
    margin:0;
    padding:0;
}
div#photocontainer a.gallerytop img.thumbnailtop
{
    display:block;
    border:1px solid #000;
    margin:0 12px 0 0;
    padding:0;
}

#photocontainer a.galleryleft:hover img.thumbnailleft, #photocontainer a.gallerytop:hover img.thumbnailtop
{
/*    border:1px solid #fff; */
}
#photocontainer a.galleryleft:active img.thumbnailleft, #photocontainer a.gallerytop:active img.thumbnailtop,
#photocontainer a.galleryleft:focus img.thumbnailleft, #photocontainer a.gallerytop:focus img.thumbnailtop
{
    border:1px solid #fc0;
}
/* end size, styling and positioning to the left hand column of each anchor tags holding a thumbnail image */
/* additional formatting of anchor tags */
#photocontainer a.galleryleft:hover, #photocontainer a.gallerytop:hover
{
    white-space:normal;  /* default.  Sequences of whitespace will collapse into a single whitespace.  Text will wrap */
}
#photocontainer a.galleryleft:focus, #photocontainer a.gallerytop:focus
{
    outline:0;  /* supported in non-quirks mode browsers */
}
/* end additional formatting of anchor tags */
/* hide the main image until its thumbnail has mouseover.   */
#photocontainer a.galleryleft span, #photocontainer a.gallerytop span
{
    display:none;
    margin:0;
    padding:0;
}
/* end hide the main image until its thumbnail has mouseover */
/* styling the :hover, :active and :focus span to make the full size images appear, positioning and styling the full image */
#photocontainer a.galleryleft:hover span, #photocontainer a.gallerytop:hover span,
#photocontainer a.galleryleft:active span, #photocontainer a.gallerytop:active span,
#photocontainer a.galleryleft:focus span, #photocontainer a.gallerytop:focus span
{
    display:block;
    position:absolute;
    z-index:10;  /* only works with a position value */
    outline:0;
    width: 482px;  /* image width is 480px */
    height:325px;  /* image height is 320px.  the added height is to cover the text from other images */
    background:#fff; /* background colour of main image */
    left:130px;
    top:98px;  /* needs to be the same distance from the top as div.gallerypermanent */
    color:#000;
    border-color:black;
}
/* end styling the :active, :hover and :focus span to make the full size images appear, positioning and styling the full image */