/* ================================================================ 
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 gallery and the margins */
.gallery {
font-family: verdana, arial, sans-serif; 
width:650px;
height:520px;
background:#fff;
padding:0;
margin:0; 
/*position:relative;*/
z-index:2;
margin-bottom:10px;
}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.gallery ul {
list-style-type: none;
padding:0; 
margin:0;
border:0;
/*position:relative; */
top:6px; 
}

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

/* remove the table styling */
.gallery table {
border-collapse:collapse;
margin:0; 
padding:0;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li link on hover 
.gallery a {
color:#fff; 
background:#000;
cursor:default;
}*/

/* make the sub menu ul li the full width with padding and border. */
.gallery ul li {
position: relative;
width:630px;
height:500px;
border:1px solid #ccc;
background:#f5f5f5; 
padding:10px 20px;
margin: 0px;
}

/* style the background and foreground color of the submenu links */
.gallery ul li a {
margin: 0;
padding: 0px;
}

.gallery ul li a:hover {
border-bottom: 3px solid #600000;
}

/* keep the large image hidden */
.gallery a em {
display:none;
}
/* add a border to the horizontal slide and position it centrally using a top margin */
.gallery ul li a.horiz span img {
border:1px solid #ccc;
background-color: #fff;
padding: 7px;
margin-top:12px;
}
/* add a border to the vertical slide and position it centrally using a top margin */
.gallery ul li a.vert span img {
border:1px solid #ccc;
background-color: #fff;
padding: 7px;
margin-top:9px;
}



/* 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.horiz:active em, .gallery ul li a.horiz:focus em {display:block; background:#fff; padding:4px; position:absolute; left:10px; top:15px; width:640px; height:480px; z-index:200; z-index:500; cursor:default; border:1px solid #ccc;}
.gallery ul li a.horiz:active em img, .gallery ul li a.horiz:focus em img {border:0;}
/* vertical large image styling */
.gallery ul li a.vert:active em, .gallery ul li a.vert:focus em {display:block; background:#fff; padding:4px; position:absolute; left:95px; top:20px; width:480px; height:640px; z-index:200; z-index:500; cursor:default;  border:1px solid #ccc;}
.gallery ul li a.vert:active em img, .gallery ul li a.vert:focus em img {border:0;}

.clear { clear:both; }