/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/slide_show.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* common styling */
/* set up the overall width of the menu div and the margins */
.gallery {
    font-family: verdana, arial, sans-serif; 
    width:680px;
	padding:0;
	margin:0 auto; 
	position:relative;
	z-index:1;
	border-bottom:20px solid #333;
	margin-bottom:512px;
}

/* make the gallery visible */
.gallery ul {
    padding:0; 
    margin:0;
    list-style-type: none;
    border:0;
    text-align:left;
    display:block; 
    position:absolute; 
    left:0;
}

/* clear the float at the end of each line */
span.clr {
    display:block; 
    clear:both; 
    width:0; 
    height:0; 
    font-size:0; 
    line-height:0px;
}

/* size it */
.gallery ul li {
    cursor:pointer;
    width:500px;
    height:520px;
    border:3px solid gold;
    background:#b42c2e;
    padding-left:90px;
    padding-right:90px;
    cursor:default;
}

/* keep the large image hidden */
.gallery ul li a em {
    display:none;
}

/* add a border to the thumbnail and position it centrally using a top margin */
.gallery ul li a.tnail span img {
    border:2px solid #b42c2e;
    margin-top:21px;
}

.gallery ul li a.tnail:hover span img {
    border:2px solid gold;
}


/* make the active links zero size so the active dotted border does not show through the large image */
.gallery ul li a:active, 
.gallery ul li a:focus {background:#aaa; height:0; width:0; border:0;}

.gallery ul li a:active em, 
.gallery ul li a:focus em {background:#bbb; height:0; width:0; padding:0; margin:0; border:0;}


/* make the large image visible and set the border, position them using position absolute centrally over the slides */
/* horizontal large image styling */
.gallery ul li a.tnail:active em, 
.gallery ul li a.tnail:focus em {
    display:block; 
    background-color:#b42c2e;
    position:absolute; left:21px; top:21px; 
    z-index:500; 
    cursor:default; 
    width:640px; height:480px; line-height:480px;
}

.gallery ul li a.tnail:active em img, 
.gallery ul li a.tnail:focus em img {
    max-width:640px; max-height:480px; 
    border:2px solid gold;
    display:block;
    margin-left:auto;
    margin-right:auto;
}