/********************************************/

/*****    css photo gallery template    *****/

/*****  http://www.tankedup-imaging.com *****/

/*****            20/08/2006            *****/

/********************************************/



/* ---------- gallery container ---------- */

.gallery {
	position:relative;
	width:330px;
	margin:0;
	float: left;
	padding-left: 10px;
}


/* ---------- opacity ---------- */

.gallery a img {opacity:0.6; filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.6;}

.gallery a:visited img {opacity:0.6; filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.6;}

.gallery a:hover img {opacity:0.9; filter:alpha(opacity=90); -moz-opacity:0.90; -khtml-opacity:0.9;}


/* ---------- thumbnail images ---------- */
.thumb, .no-thumb {

float:left;
width:75px;
margin:1px;
background-color:#b5bf8d;
border:1px solid #b5bf8d;
}

.no-thumb {
border:1px solid #fff;
}

.thumb a img {display:block;}
.thumb a span {display:none;}
.thumb a:hover, .thumb a:active, .thumb a:focus {}

/* ---------- preview image ---------- */

.gallery a:hover span {
display:block;
position:absolute;
width:300px;
height:350px;
top:38px;
left:340px;
background-color: #ffe5ff;
border:2px solid #b5bf8d;
border:2px solid #b5bf8d;
}
/* ---------- preview image title block ---------- */

.thumb em {
position:absolute;
width:200px;
top:196px;
left:50px;
-moz-border-radius:12px;
background:#ab5;
color:#036;
font:normal 12px/20px verdana;
text-align:center;
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8;
}

.thumb a {

text-decoration:none;

}

#gallery-body  {	
	margin:0 auto; 
	text-align: center;
	width: 680px;
	height: 460px;
	background-color: #f7e4fa;
	border: 1px solid #c0a0c5;
	font-size: 20px;
	padding-top:10px;

}
/* ---------- no border on images ---------- */

a img {border:0;}

/* ---------- clear floats ---------- */

.clear {

height:0;
line-height:0px;
font-size:0;
clear:both;
}
.photo {width:572px; text-align:left; position:relative;left: 0px; margin:0 auto; background:#c0a0c5;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:572px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:130px; height:31px; float:left; margin-left:10px;}
.photo ul.topic li a.set {display:block; font-size:11px; width:130px; height:31px; text-align:center; line-height:30px; color:#000; text-decoration:none; background:#c0a0c5; 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
{color:#000; background-color:f7e4fa }

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#330033; background:#f7e4fa ;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0;  background:#f7e4fa ; width:320px; padding:40px 60px;  z-index:1;}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; background:#f7e4fa ; width:320px; padding:40px 60px; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:80px; height:100px; float:left; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:80px; height:100px; cursor:default; float:left; text-decoration:none; background:#c0a0c5; }


.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 
{position:absolute; left:-58px; top:-32px; width:200px; height:250px;}