/*  
JAVASCRIPT IMAGE GALLERY W/ mootools Description: STYLE SHEET FOR IMAGE GALLERY
Version: 1.0 Author: Devin Ross Author URI: http://tutorialdog.com
*/


/* thumbnail area */ 
body
{ background:#333; }  /* bgcolor of entire page  */
#img_gallery{ margin:10px auto; width:606px; }
#img_gallery a{ outline:none; border:none; } /* thumbnails */
#img_gallery a img{outline:none; border:none;} /* thumbnails */

/* --- Image Stage */
#fullimg{
	width:600px;
	overflow:hidden;
	height:453px;
	border: none; /* larger images */
}
#fullimg img{ width:600px; }




/* top text banner */ 
/* changed imagegallery.js so that top text uses span and bottom text uses p jn */
#fullimg span{
	position:absolute;
	background:#1B1B1B;
	opacity:.7; /* smaller the number, more opacity  This code doesnt work in IE*/
	filter:alpha(opacity=70); /* added for opacity to work in IE jn */
	margin-top:427px; /* how far down the tet box is */
	margin-left:0px; 

	width:600px; /* must be a bit smaller than image due to padding */
	padding:4px;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCC; /* text colour */
}


/* Not being used */
/* bottom text banner jn */ 
/* changed imagegallery.js so that top text uses span and bottom text uses p jn */
#fullimg p{
	position:absolute;
	background:#1B1B1B;
	opacity:.5; /* smaller the number, more opacity  This code doesnt work in IE*/
	filter:alpha(opacity=50); /* added for opacity to work in IE jn */
	margin-top:530px; 
	margin-left:0px; 
	width:698px; /* must be a bit smaller than image due to padding */
	padding:1px;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#CCC; /* text colour */
}

/* Not being used */



/* --- Slider --- */
#img_gallery #wrapper{
	overflow:hidden;
	padding:4px 2px;
	width: 568px; /* changing this to see if it widens slider  */
	float:left;
	height:58px;  /* increasing from 50 to show more of thumbnail, still not shoing entire thumbnail  */
	background-color:#666;  /* background colour of slider*/
	position: relative;

}

#items{
	margin:0px 0px;
	padding:0px;
	list-style:none;
	width:50000px;
	position: relative;
	letter-spacing:0em;
}
#items li{ float:left; list-style:none; margin-right:2px; }
#items .thumb{
	width:75px;
	height:50px;
	cursor:pointer;
	margin:0px;
	padding:0px;
}
#items .large{
	display:none;
	position:absolute;
}

/* loading image */  /* removing this code caused the full picture to look like it wasn't uploaded, then the photo displayed, changed it from 24 px to 1px so at least wouldn't see the x-image 24 px is loader image size, so it should be loading. */
#fullimg .loading{
	width: 32px;	    /*  changed this from 24 to 1 */
	height: 32px;   /* the image is not showing when the loading thing is supposed to happen  */
}
#fullimg .thumb{display:none;}

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

#items .item  p, #items .item  span{
	display:none;
	text-indent: -2000em;
}



/* slider arrows */
#moveleft, #moveright{
	margin:0px;
	height:58px;
	color: white;
	width: 16px;
	text-indent: -2000em;
	text-decoration: none;
	z-index: 1000; 
	display:block;
	cursor: pointer;
	float:left;
}
#moveleft{background: url('unjimages/imagesphotogallerycommon/left.gif');}
#moveright{background: url('unjimages/imagesphotogallerycommon/right.gif');}
#moveleft:hover, #moveright:hover{ background-position:bottom; }