/*  
JAVASCRIPT IMAGE GALLERY W/ mootools Description: STYLE SHEET FOR IMAGE GALLERY
Version: 1.0 Author: Devin Ross Author URI: http://tutorialdog.com
*/

body{background:#333; font-family: Verdana, Arial, Helvetica, vetica, sans-serif; font-size: 11px; color: #FFF;}

#img_gallery{margin:10px auto; width:700px; }

/* thumbnail area */ 
#img_gallery a{outline:none; border:none; } /* thumbnails */
#img_gallery a img{outline:none; border:none;} /* thumbnails */

/* --- Image Stage */
#fullimg{
	width:700px;
	overflow:hidden;
	height:467px;
	border: none; /* larger images */
}
#fullimg img{ width:700px; }




/* top text banner that appears at bottom of full size image */ 
/* 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:443px; /* perfect for bottom great arrows not to be over laid*/
	margin-left:0px; 

	width:692px; /* 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 */
}


/* 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;  /* 530 */
	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 */
}





/* --- Slider --- */
#img_gallery #wrapper{
	overflow:hidden;
	padding:4px 2px;
	width: 664px;
	float:left;
	height:50px;
	background-color:#666;
	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 */
#fullimg .loading{
	width: 24px;
	height: 24px;
}
#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('images/left.gif');}
#moveright{background: url('images/right.gif');}
#moveleft:hover, #moveright:hover{ background-position:bottom; }


/*Links*/

a:link {color:#FFF; text-decoration: none;}
a:visited {color:#FFF; text-decoration: none;}
a:hover {color:#FFF; text-decoration: none;}

/* Text  */
.text10 {
font-family: Verdana, Arial, Helvetica, vetica, sans-serif;
font-size: 10px;
}

.text11 {
font-family: Verdana, Arial, Helvetica, vetica, sans-serif;
font-size: 11px;
}
.text11sp {
font-size: 11px;
line-height: 20px;
font-family: Verdana, Arial, Helvetica, vetica, sans-serif;
}

.textwhite10 {
color: #FFFFFF;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, vetica, sans-serif;
text-decoration: none;
}
.textwhite11 {
font-family: Verdana, Arial, Helvetica, vetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}


/* Headings */

/* H tag customization */
h1 {
font-family: Verdana, Arial, Helvetica, vetica, sans-serif;
font-size: 11px;
color: #FFF;
font-weight: bold;
margin:0;
padding:4px 4 px 4px 4px;
}
h2 {
width: 600px;
text-align: left;
position: relative;
margin-left: auto;
margin-right: auto;
font-weight: normal;
}
/* end of H tag customization */

.heading11Bold {
font-family: Verdana, Arial, Helvetica, vetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFF;
}
.heading11Boldsp {
font-size: 11px;
line-height: 20px;
font-weight: bold;
color: #FFF;
}

