/* Set the position for each division*/
.general{
	position: absolute;
	height: 490px;
	background-color:#999999;
	width: 596px;
	visibility: hidden;
	top: 202px;
	left: 204px;
	z-index: 600;
	border: 2px solid #000;
}
.display{
	position: absolute;
	height: 490px;
	background-color:#999999;
	width: 596px;
	visibility: hidden;
	top: 675px;
	left: 204px;
	z-index: 600;
	border: 2px solid #000;
}
.misc{
	position: absolute;
	height: 490px;
	background-color:#999999;
	width: 596px;
	visibility: hidden;
	top: 842px;
	left: 204px;
	z-index: 600;
	border: 2px solid #000;
}

/* thumbnail size, boarder and float, margin=space between*/
.thumbnail img{
	border: 3px solid black;
	margin: 3px;
	width: 90px;
	height: 68px;
	float: left;
}
.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 3px solid #EEEEEE;
}

/*CSS for enlarged image*/
.thumbnail span{ 
position: absolute;
background-color: #666666;
padding: 5px;
border: 1px solid gray;
visibility: hidden;
text-decoration: none;
}

/* size large image*/
.thumbnail span img{
	width: 500px;
    height: 375px;
	padding: 2px;	
    border-width: 0;
}
/* position large image*/
.thumbnail:hover span{ 
	visibility: visible;
	top: 85px;
	left: 35px; 
	z-index: 50;
}
.thumbnail:hover span img{ 
	border: 1px solid #999999;
	padding:0px;
}

/* vertical gallery images */

.thumbv img{
	border: 3px solid black;
	margin: 3px;
	width: 68px;
	height: 90px;
}

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

.thumbv:hover img{
border: 3px solid #EEEEEE;
}

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

.thumbv span img{ /* size large  vert image*/
	width: 338px;
    height: 450px;
	padding: 2px;	
}

.thumbv:hover span{ /* position large vert image*/
	visibility: visible;
	top: 7px;
	left: 110px; 
	z-index: 50;
}
.thumbv:hover span img{ 
	border: 1px solid #999999;
	padding:0px;
}
.close {
	width: 90 px;
	left: 575px;
	background-color: #CC0000;
	border: 0px solid #FFFFFF;
	position: absolute;
}
.close a{
	font-weight: bolder;
	color: #FFFFFF;
	width: 90 px;
	text-decoration:none;
	display: block;
	padding: 6px;
}
.close a:hover{
	background-color: #0099CC;
}

.close1 {
	width: 90 px;
	top:204px;
	left: 781px;
	background-color: #CC0000;
	border: 0px solid #FFFFFF;
	position: absolute;
	z-index: 1000;
}
.close2 {
	width: 90 px;
	top:677px;
	left: 781px;
	background-color: #CC0000;
	border: 0px solid #FFFFFF;
	position: absolute;
	z-index: 1000;
}

.close3 {
	width: 90 px;
	top: 844px;
	left: 781px;
	background-color: #CC0000;
	border: 0px solid #FFFFFF;
	position: absolute;
	z-index: 1000;
}


.close1 a, .close2 a, .close3 a{
	font-weight: bolder;
	color: #FFFFFF;
	width: 90 px;
	text-decoration:none;
	display: block;
	padding: 6px;
}
.close1 a:hover, .close2 a:hover, .close3 a:hover{
	background-color: #0099CC;
}



/* ------------------------------------------- */
/*  slide show styles  */
/* ------------------------------------------- */

/* 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;}

/* common styling */
/* set up the overall width of the menu div and the margins */
.gallery {
font-family: verdana, arial, sans-serif; 
width:600px;
background:#FFFFFF;
padding:0;
margin:0 px; 
z-index:1;
}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.gallery ul {
padding:0; 
margin:0;
list-style-type: none;
border:0;
display:block; 
}

/* Control width, padding and border of background */
.gallery ul {
cursor:pointer;
width:600px;
border:5px solid #000;
background:#ddd ; 
color:#fff;
padding:10px 10px;
}

.gallery ul li {
float:left;
}

/* style the links to be 50px wide by 31px high with a right border 1px solid white. Set the background color and the font size. */
.menu2 ul li a, .menu2 ul li a:visited {
display:block; 
float:left;
text-align:center; 
text-decoration:none; 
width:100px; 
color:#CCCCCC;
border-right:1px solid #fff;
background:#333; 
line-height:30px; 
font-size:11px;
}
/* style the links to be 50px wide by 31px high with a right border 1px solid white. Set the background color and the font size. */
.menu2 ul li a, .menu2 ul li a:visited {
display:block; 
float:left;
text-align:center; 
text-decoration:none; 
width:100px; 
color:#CCCCCC;
border-right:1px solid #fff;
background:#333; 
line-height:30px; 
font-size:11px;
}

/* style the background and foreground color of the links */
.gallery ul li a, .gallery ul li a:visited  {
display:block;
background:#333;
width:118px;
height:118px;
border:1px solid #ddd;
border-color:#888 #000 #000 #888;
text-decoration:none;
font-size:11px;
color:#CCCCCC
}
.gallery ul li a:hover {
background:#000;
}
.gallery ul li a.blank:hover {
background:#333333;
}

/* image format - border and position it centrally using a top margin */
.gallery ul li a span img {
	border:1px solid #888;
	margin-top:13px;
	margin-left: 14px;
	padding-bottom: 0px;
	height: 80px;
	width: 90px;
}
/* image caption formating */
.gallery ul li p {
	text-align: center;
	font-size: 7pt;
	text-indent: 0;
	margin:0px;
	padding: 0 px;
}


/* add a border to the horizontal slide and position it centrally using a top margin */
.menu2 ul li ul li a span img {
	border:1px solid #888;
	margin-top:15px;
	padding-bottom: 0px;
	height: 80px;
	width: 90px;
}



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

/* make the large image visible and set the border, position them using position absolute centrally over the slides */
.gallery ul li a.gen:active em, .gallery ul li a.gen:focus em {
display:block; 
position:absolute; 
height: 490px;
width: 596px;
background:#999999;
top:202px; 
left: 204px;
z-index:500; 
cursor:default; 
border: 2px solid #000;
}
/* position larger image em-box for group 2 - displays*/
.gallery ul li a.horiz2:active em, .gallery ul li a.horiz2:focus em, 
.gallery ul li a.vert2:active em, .gallery ul li a.vert2:focus em {
top:675px; 
left: 204px;
}
/* position larger image em-box for group 3 - misc*/
.gallery ul li a.horiz3:active em, .gallery ul li a.horiz3:focus em, 
.gallery ul li a.vert3:active em, .gallery ul li a.vert3:focus em {
top:842px; 
left: 204px;
}

/* general large image styling */
/* horizontal large images use the default general styling */
.gallery ul li a.gen:active em img, .gallery ul li a.gen:focus em img {
border:0;
position: absolute;
background-color: #666666;
padding: 5px;
border: 1px solid gray;
border-width: 0;
width: 500px;
height: 375px;
top: 40px;
left: 40px;
}

/* vertical large image size and positions within em-box */
.gallery ul li a.vert:active em img, .gallery ul li a.vert:focus em img,
.gallery ul li a.vert2:active em img, .gallery ul li a.vert2:focus em img,
.gallery ul li a.vert3:active em img, .gallery ul li a.vert3:focus em img {
width: 338px;
height: 450px;
top: 10px;
left: 120px;
}

/* title styling */
.gallery ul li a.title {
	display:block;
	background:#4F1233;
	width:593px;
	height:26px;
	border:1px solid #ddd;
	border-color:#888 #000 #000 #888;
	font-size: 18px;
	text-align: left;
	padding: 0px;
	margin: 0px;
	padding-left: 5px;
}

.menu2 ul li ul li a.title:active em img, .menu2 ul li:hover ul li a.title:focus em img {border:0;}