/* -----------------------------------------------------------------------

Uniting People International: Photo Gallery CSS

author: Tarquin Rees
agency: www.okapicreative.com
mail: hello@okapicreative.com
version: 4.1
date: May 2009

----------------------------------------------------------------------- */

/* Container Div */

div#photogall {

	width: 550px;
	}

/* Container of Main Image */

.galleria_container {

	margin: 0px 0px 15px 0px;
	width: 380px;
	height: 280px;
	float:right;
	}
	
/* Container of Thumbs */

.gallery_demo {

	width:110px;
	float:left;
	}

/* Individual Thumbs */

.gallery_demo li {

	width:50px;
	height:50px;
	border:3px double #eee;
	margin: 0 2px 2px 0;
	background:#eee;
	}

.gallery_demo li.hover {

	border-color:#bbb;
	}

.gallery_demo li.active {

	border-style:solid;
	border-color:#222;
	}

.gallery_demo li div {

	left: 240px
	}

.gallery_demo li div .caption {

	font:italic 0.7em/1.4 georgia,serif;
	}
	
.galleria {

	margin: 0;
	list-style:none;
	width:160px;
	}

.galleria li {

	margin:0 5px 5px 0;
	display:block;
	width: 45px;
	height: 45px;
	overflow:hidden;
	float:left;
	border: 1px solid #fff;
	}

.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */


/* Typog */

.nav {

	margin: 0;
	padding: 15px 0px 0px 0px;
	clear:both;
	text-align: right;
	}

.caption {

	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color: #999;
	font-size: 13px;
	text-align: right;
	font-weight: normal;
	font-style: italic;
	}








/*  
.info {

	text-align:left;
	margin:30px 0;
	border-top:1px dotted #221;
	padding-top:30px;
	clear:both;}
	
.info p{margin-top:1.6em;}
	

	*{margin:0;padding:0}
	body{padding:20px;background:white;background:white;color:#555;font:80%/140% 'helvetica neue',sans-serif;width:900px;margin: 0 auto;}
	h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	a{color:#348;text-decoration:none;outline:none;}
	a:hover{color:#67a;}
	
	.demo{position:relative;margin-top:2em;}
	
*/