/*   MAIN GALLERY LAYOUT   */
div.content {display: none; clear: both; }
#maincontainer .content a {text-decoration:none; margin:0px; padding:0px;}
div.slideshow-container,
div.loader,
div.slideshow a.advance-link {
	width:644px; /* This should be set to be at least the width of the largest image in the slideshow with padding */
}
#maincontainer .slideshow-container img {text-decoration:none; }
#maincontainer .slideshow { width:640px; }
div.loader,
div.slideshow a.advance-link,
div.caption-container {
	height:482px; /* This should be set to be at least the height of the largest image in the slideshow with padding */	
}

div.loader {position: absolute; top: 0; left: 0; background-image: url('../images/loader.gif);'); background-repeat: no-repeat; background-position: center;}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	left: 0;
	top:0;
}
div.slideshow img {padding:9px; border:1px solid #c8c8c8; background:#fff; }
span.image-caption {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
div.photo-index {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 12px;
	height:480px;
}
#maincontainer div.slideshow-container {
	position: relative;
	clear: both;
	height:480px;
	overflow:hidden;
	padding:4px;
}


/*   CAPTION   */
#information {z-index:150; position:relative; top:45px; left:32px;}
#information a {display:block; background:url(../images/info.png) top left no-repeat; width:19px; height:19px; text-indent:-9999px;}
#maincontainer .image-caption {width:312px; height:200px;} /* This should be set to be at least the height and width of the tallest Caption - This is for IE 6/7 */	
#maincontainer .caption {
	position: relative;
	background:url(../images/infobg.png) top left no-repeat;
	top:50px;  left:32px;
	width:255px;
	padding:17px 12px 10px 12px;
}
.caption div {width:255px;}
.image-title {font-weight: bold; color:#fff; overflow:hidden;}
.image-desc {line-height:15px;  font-size:11.5px; font-style:italic; color:#fff; padding-top:2px; overflow:hidden;}


/*   THUMBNAILS   */
ul.thumbs {
	position: relative;
	float: left;
	margin:8px 0 0 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin:8px 5px 0px 5px;
	list-style: none;
}
ul.thumbs li img {
	border:1px solid #c8c8c8;
	padding:4px;
	display: block;
}
ul.thumbs li.selected {margin-top:0px;}
ul.thumbs li.selected img {margin-top:0px; background: url(../images/thumbnailselected.gif) top left no-repeat; border-top:none; border-left:none; border-right:none; border-bottom:1px solid #c8c8c8; padding:13px 5px 4px 5px; }
a.thumb {
	padding: 1px;
	display: block;
}
a.thumb:focus {
	outline: none;
}

/*   PAGINATION   */
div.slideshow a.advance-link {
	display: block;
	line-height: 485px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
	text-align: center;
}

div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited {  }
div.slideshow a.advance-link:focus { outline: none; }

div.navigation-container {
	float: left;
	position: relative;
	left: 50%;
}
div.navigation {
	float: left;
	position: relative;
	left: -50%;
}
div.navigation a.pageLink {
	display: block;
	position: relative;
	float: left;
	margin: 2px;
	width: 16px;
	background-position:center center;
	background-repeat:no-repeat;
}
div.navigation a.pageLink:focus {
	outline: none;
}
div.pagination {
	clear: both;
	position: relative;
	left: -50%;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
}
div.pagination a:hover { text-decoration: none;}
div.pagination span.current { font-weight: bold; }
div.pagination span.ellipsis { border: none; padding: 5px 0 3px 2px;}

div.gallery-gutter { clear: both;}
div.navigation a.prev {background-image: url(../images/prevPageArrow.gif);}
div.navigation a.next {background-image: url(../images/nextPageArrow.gif);}
a.next2 {background:red; width:15px; height:15px; display:block;}
div.loader {background-image: url(../images/loader.gif);}
div.navigation a.pageLink { height: 77px; line-height: 77px; padding:14px 2px 0 2px; }
#maincontainer div.controls {width:640px; overflow:hidden; padding-top:12px;}
#maincontainer div.controls a span {font-weight:bold; font-size:11px; padding-left:1px;}
#maincontainer div.controls a div {font-weight:bold; font-size:12px;padding-left:1px; display:inline;}
#maincontainer div.controls a.prev {margin-right:2px;}
#maincontainer div.controls a.prev, #maincontainer div.controls a.next {display: inline-block;  font: 13px 'QuicksandBook', Arial, sans-serif; margin-bottom:5px; padding:7px 12px 6px 12px; text-decoration:none; border:2px solid #d2d2d2;  background:#fff url(../images/button.png) top left repeat-x; color:#3b3b3b;}
#maincontainer div.controls a.prev:hover , #maincontainer div.controls a.next:hover {background: url(../images/button.png) 0px -35px repeat-x;}
#maincontainer div.controls a.play, #maincontainer div.controls a.pause {display: inline-block; font: 12px 'QuicksandBook', Arial, sans-serif; margin-bottom:5px; padding:8px 12px 7px 12px; text-decoration:none; border:2px solid #d2d2d2;  background:#fff url(../images/button.png) right 0px repeat-x; color:#3b3b3b;}
#maincontainer div.controls a.play:hover, #maincontainer div.controls a.pause:hover {background: url(../images/button.png) right -35px repeat-x;}
div.ss-controls { float: left;}
div.nav-controls { float:right;  }