/* set the height of the page to accommodate the gallery */
div#contentinner {
    height: 700px; /* 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:550px; /* necessary to stop image drop down too far in IE compatability view */
}
/* styles the permanent image */
div.gallerypermanent {
    position: absolute;
    left:110px;  /* differs to machine gallery styles */
    top:80px;  /* differs to machine gallery styles */
    z-index:1;
    margin:0;
    padding:0;
}
div.gallerypermanent img {
/*    border: 1px solid #000; */
}
p.span {
    margin-right:1.5em;
}
a.gallery 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#thumbnailstop
{
    padding:0;
    margin:0;
    width:638px; /* six thumbnails: 6 x 90 wide gives 540px plus 12 x 3 padding 560 px width with 2px spare */
    height:66px;
    float:left;
    background-color: #ececec; /* #dcdcdc; */
    border: 1px solid #999;
}
div#thumbnails
{
    padding:0;
    margin:0;
    width:98px; /* one thumbnail wide or, if two, two thumbnail a.gallereys at 94px each with left padding totalling 6px gives 194px width with 1px spare */
    float:left;
    background-color: #ececec; /* #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.gallery
{
    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 9px 0 3px; /* this need to come after div#photocontainer a.gallery {} to over-ride the right padding for vertical thumbnails */
}
div#photocontainer a.gallery img.thumb
{
    display:block;
    border:1px solid #000;
    margin:0;
    padding:0;
}
div#photocontainer a.gallery img.thumbnailtop
{
    display:block;
    border:1px solid #000;
    margin:0 12px 0 0;
    padding:0;
}

#photocontainer a.gallery:hover img.thumb
{
    border:1px solid #fff;
}
#photocontainer a.gallery:active img.thumb,
#photocontainer a.gallery:focus img.thumb
{
    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.gallery:hover
{
    white-space:normal;  /* default.  Sequences of whitespace will collapse into a single whitespace.  Text will wrap */
}
#photocontainer a.gallery: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.gallery 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.gallery:hover span,
#photocontainer a.gallery:active span,
#photocontainer a.gallery:focus span
{
    display:block;
    position:absolute;
    z-index:10;  /* only works with a position value */
    outline:0;
    width: 502px;  /* image width is 500px */
    height:550px;  /* image height is around 545px.  the added height is to cover the text from other images */
    background:#fff; /* background colour of main image */
    left:110px;  /* see div.gallerypermanent */
    top:80px; /* see 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 */