/* ================================================================ 
TITLE:	Portraits Design Stylesheet
AUTHOR:	Khaled Maiwand, HighCo Technology
CREATED:	April 2008
Inspired	Stu Nicholls: www.stunicholls.com/gallery/photo_click.html
=================================================================== */
body{ background: url( img/bg-body.jpg) repeat-x; }
#wrapper{
	width: 800px; 
	margin: 0 auto;
	padding-top: 10px;
	font: small 'Trebuchet MS',sans-serif;
	text-align: center;
	color: #000; 
	}
#info{ margin: 30px 0; }
	#info p{ margin: 5px 0; text-align: left;}

#gallery{ /*-------------------------------------- the main picture frame ----------------------------------------*/
	position:relative; 
	width:770px; height:380px; 
	padding:10px; 
	border:1px solid #333; 
	background: #ccc; 
	}
#gallery b.default{ /* big default image container */
	position:absolute; 
	top:10px; left:10px;
	width:550px; height:300px; 
	text-align:center;
	}
#gallery b.default img{ /* big default image  */
	display:block; 
	margin:0 auto 10px auto; 
	border:1px solid #eee; 
	border-color:#555 #ddd #eee #333;
	}
#gallery b.default span{ display:none;} /* default image caption */

#gallery ul{ /* container for all thumbnails */
	position:relative; 
	float:right;
	width:218px; 
	list-style:none; 
	margin:0; padding:0; 
	}
#gallery ul li{ 
	float:left; 
	display:inline; 
	width:102px; height:65px; 
	margin:0 0 5px 5px;
	}
#gallery ul li a{ /* non-hovered thumbnail link */
	display:block; 
	width:102px; height:65px; 
	text-decoration:none; 
	border:1px solid #000; 
	border-color:#eee #555 #333 #ddd;
	}
#gallery ul li a img{ /* non-hovered thumbnail image */
	display:block; 
	width:102px; height:65px; 
	border:0;
	}
#gallery ul li a span{ display:none;} /* no caption for thumbnail */
#gallery ul li a:hover{	/* hovered thumbnail */
	white-space:normal; 
	border-color:#555 #ddd #eee #333; 
	background:#777;
	}
#gallery ul li a:hover b{ /* frame for big image of the hovered thumbnail */
	position:absolute; 
	top:0; left:-552px; 
	width:550px; height:300px; 
	text-align:center; 
	z-index:20;
	background:#888; 
	}
#gallery ul li a:hover img{ /* big image of the hovered thumbnail */
	margin:0 auto; 
	width:auto; height:auto; 
	border:1px solid #eee; 
	border-color:#555 #ddd #eee #333;
	}
#gallery ul li a:hover span{ /* caption of the hovered thumbnail */
	display:block; 
	width:350px; 
	margin:2px auto;
	font: normal 11px verdana, arial, sans-serif; 
	color:#000; 
	}
#gallery ul li a:active, #gallery ul li a:focus{ /* selected thumbnail */
	white-space:normal; 
	border-color:#555 #ddd #eee #333; 
	background:url( img/magnify.jpg) no-repeat;
	}
#gallery ul li a:active b, #gallery ul li a:focus b{ /* selected image's frame */
	position:absolute; 
	top:0; left:-552px; 
	width:550px; height:300px; 
	text-align:center; 
	z-index:10;
	background:#888; 
	}
#gallery ul li a:active img, #gallery ul li a:focus img{ /* selected image */
	margin:0 auto; 
	width:auto; height:auto; 
	border:1px solid #eee; 
	border-color:#555 #ddd #eee #333;
	}
#gallery ul li a:active span, #gallery ul li a:focus span{ /* selected image's caption */
	display:block; 
	width:350px; 
	margin:2px auto;
	font: normal 11px verdana, arial, sans-serif; 
	color:#000; 
	}

p#footer{ font-size: 80%; text-align: left; }
a{ color: #000; }