/* ================================================================ 
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/lightbox.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* The above copyright notice is being retained here although a 
number of changes have been made to accomplish my needs */

.photo {
	margin-left: 100px;
	width: 825px; 
	text-align: left;
	position: relative;
	z-index: 1;
}
.photo ul.topic {
	margin: 0px;
	padding: 0;
	list-style-type: none;
	list-style-image: none;
	list-style-position: outside;
	width: 830px;
	height: auto;
	position: relative;
	z-index: 1;
}
.photo ul.topic li {
	display: block;
	width: 125px;
	height: 31px;
	float: left;
}
.photo ul.topic li a.set {
	border-style: solid;
	border-color: #ffffff;
	border-width: 1px 1px 0 0;
	background: #cccccc none repeat scroll 0% 50%;
	display: block;
	font-size: 11px;
	width: 124px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: #999999;
	text-decoration: none;
	font-family: verdana, arial, sans-serif;
}
.photo ul.topic li a ul, .photo ul.topic li ul {
	display: none;
}
.photo ul.topic li.active a {
	background: #bbbbbb none repeat scroll 0% 50%;
	color: #999999;
}
.photo ul.topic li a:hover, .photo ul.topic li:hover a {
	background: #aaaaaa none repeat scroll 0% 50%;
	color: #ff3300;
	cursor: pointer;	
}
.photo ul.topic li.active ul {
	border: 20px solid #bbbbbb;
	margin: 0;
	padding: 40px 60px;
	background: #dddddd none repeat scroll 0% 50%;
	display: block;
	position: absolute;
	left: 0;
	top: 31px;
	list-style-type: none;
	list-style-image: none;
	list-style-position: outside;
	height: 375px;
	width: 590px;
	z-index: 2;
}
.photo ul.topic li a:hover ul, .photo ul.topic li:hover ul {
	border: 20px solid #aaaaaa;
	margin: 0;
	padding: 40px 60px;
	background: #dddddd none repeat scroll 0% 50%;
	display: block;
	position: absolute;
	left: 0;
	top: 31px;
	list-style-type: none;
	list-style-image: none;
	list-style-position: outside;
	height: 375px;
	width: 590px;
	z-index: 3;
}
.photo ul.topic li ul li {
	border: 1px solid #ffffff;
	margin: 1px;
	display: inline;
	width: 112px;
	height: 87px;
	float: left;
}
.photo ul.topic li ul li a {
	border: 1px solid #888888;
	background: #444444 none repeat scroll 0% 50%;
	display: block;
	width: 110px;
	height: 85px;
	cursor: default;
	float: left;
	text-decoration: none;
}
.photo ul.topic li ul li a img {
	border: 5px solid #eeeeee;
	display: block;
	width: 100px;
	height:75px;
}
.photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {
	white-space: normal;
	position: relative;
}
.photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {
	border-color: #ffffff;
	position: absolute;
	left: -50px;
	top: -32px;
	width: 200px;
	height: 150px;
}
        .photo ul.topic li ul li a.info{
        position:relative;           /*this is the key*/
        z-index:0;
        background: none;    /* background colour of display text #cccc99 */
        color: #ff00ff;       /* colour of display text */
        border:1px dotted #999;    /* border colour */
        text-decoration: underline;
        font-style:italic;
        }

        .photo ul.topic li ul li a.info:hover {
        z-index:4;
        background-color:#ffff66;
				text-decoration: none;
        }

        .photo ul.topic li ul li a.info span{
        display: none;  /* hide the span text using this css */
        }

        .photo ul.topic li ul li a.info:hover span{ /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        top: 7em;
        left: -3em;
        width:13em;
        border:1px solid #ff0000; /* border colour */
        background-color:#ffff99; /* background colour here */
        color:#000000;         /* text colour */
        text-align: center;
        font-size: 1em;
        font-style:italic;
        z-index:10;
        }