.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 198px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
z-index:50;
}

.glossymenu li{
position: relative;
}

.glossymenu li a{
background: transparent url(../images/transparent.png) repeat-x bottom left;
font: bold 11px   Arial, Helvetica, sans-serif;;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
background: transparent url(../images/transparent.png) repeat-x bottom left;
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul li{
float: left;
}

.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(../images/arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-color:#009966;
background-image: url(../images/glossyback2.gif);
color:#000000;
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;


/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
float:inherit;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
/*border: 1px solid blue;*/
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
width:500px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
position:absolute;
padding:5px;
visibility: visible;
top: -5px;
border:1px solid #000000;
left: 150px; /*position where enlarged image should offset horizontally */
z-index: 1;
}
.ienlarger {
	float: left;
	clear: none; /* set to left or right if needed */
	padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
	padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a { 
	display:block;
	text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
 	position:relative;
}

.ienlarger span img {
	border: 1px solid #FFFFFF; /* adds a border around the image */
	margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
	position: absolute;
	display:none;
	color: #FFCC00; /* caption text colour */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; /* caption text size */
	background-color: #000000;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 13px;
	padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span { 
	display:block;
	top: 50px; /* means the pop-up's top is 50px away from thumb's top */
	left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
	z-index: 100;
	
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */	

/* If you want the pop-up open above the thumb, remove the top: 50px; and add  
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */	

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
	width: 200px; /* enter desired thumb width here */
	height : auto;
}

#FrogJS{
width: 760px;
height: 600px;
margin: 0 auto;
}
#FrogJSCredit{
text-align: right;
font-size: 80%;
color: #999;
padding: 1px;
}
#FrogJSCaption{
text-align: left;
line-height: 140%;
}