/********************************
******** general styling ********
********************************/
table.regionParent {background:#fff;margin:auto;}
td.region2 {padding-left:0px;}
img {border:none;}
.sspAd iframe {height:270px; overflow:hidden; width:auto; border:none; margin-top:50px;}
/* remove the NGPS gallery */
#photoviewer {display:none;}

/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
div.content {display:none; width:auto; height:540px;}
#gallery {overflow:hidden; border:1px solid #000; text-align:center !important;}
	#galler .clear {height:0px;}
	#gallery .container {background:#fff; margin:auto; padding:0px 10px 0px 10px;}
		.controls {margin-top:5px;height:23px; position:relative; *position:static;}
		.controls a {padding: 5px;}
			.ss-controls {position: absolute; left:530px; top:6px; font-size:12px;}
			.ss-controls a {color:#000; text-decoration:none; border-bottom:2px solid gray; padding:0px;}
			.nav-controls {top:0px; left:570px; width:62px; position:absolute; }
				.prev {float:left;}
				.next {float:right;}
				.prev img, .next img {height:20px;}
		
		div.slideshow-container {
			position: relative;
			clear: both;
			height: 370px; /* This should be set to be at least the height of the largest image in the slideshow */
		}
		.slideshow-container {position:relative; height:350px; margin-top:0px; padding:0px;}
			div.loader {
				position: absolute;
				top: 0;
				left: 0;
				background-image: url('loader.gif');
				background-repeat: no-repeat;
				background-position: center;
				width: 550px;
				height: 372px; /* This should be set to be at least the height of the largest image in the slideshow */
			}	
			#slideshow b { /* vAlign images in IE */
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}
			.slideshow a.advance-link:hover, .slideshow a.advance-link:active, .slideshow a.advance-link:visited {text-decoration:none;}
				div.slideshow span.image-wrapper {display:block; position:absolute; top:0; left:0;}
				.slideshow span.image-wrapper {
					display: block;
					*display: table; /* needed to vAlign images in IE */
					position: absolute;
					top: 0;
					*top: 24;
					left: 0;
				}
					.advance-link {
						text-align: center !important;
						display: table-cell;
						*display: inline-block;  /* vAlign images in IE */
						vertical-align: middle;
						font-size: 0px;
					}
					.advance-link>span {
						display: table-cell;
						*display: inline-block; /* vAlign images in IE */
						vertical-align: middle;
					}
					div.slideshow a.advance-link {
						display: block;
						width:620px; 
						height: 370px; /* This should be set to be at least the height of the largest image in the slideshow */
						line-height: 370px; /* This should be set to be at least the height of the largest image in the slideshow */
						text-align: center;
					}
						.advance-link img {vertical-align:middle; border:1px solid #ccc; position:relative;}
				
		#slideshowCaption {width:620px;margin:auto; height:70px;}
		.caption-container {position:relative;}
			span.image-caption {display:block; position:absolute; top:0; left:0; width:auto; height:auto;}
				.caption {font:11px arial; color:#444; width:620px; height:auto;}		
					#numPhotos {position:absolute; top:-390px; left:0px; font-size:14px; font-weight:bold;}	
					.download {float:right;}	
					#buyPhoto {font-weight:bold; font-size:14px; text-align:left; vertical-align:top; float:right;}	
					#imgTitle {float:left; font-size:14px; font-weight:bold;}
					.image-desc {clear:both; padding-top:5px; width:600px !important; text-align:left; line-height:1.3em; overflow-y:auto; overflow-x:hidden; height:auto;}					

	
	
	
	/* use the parent container in your css so it doesn't conflict with other elements named navigation */
	#gallery .navcontainer {width:622px; margin-left:auto; margin-right:auto; text-align:center !important; overflow:hidden; height:70px;}
		#gallery .navigation {width:auto !important; height:auto !important; text-align:center !important;}
		#gallery .navigation a {text-decoration: none;color: #777;}
		#gallery .navigation div.top {margin-bottom:12px; height:11px;}
		#gallery .navcontainer #thumbs {margin:auto !important; width:340px !important; overflow:visible; overflow:hidden; text-align:center !important;}
            #gallery .navcontainer #thumbs ul {margin-left:20px !important;}
			#gallery .navcontainer #thumbs ul.thumbs {clear:both; padding:0px; margin-top:0px; *margin-left:-50px;}
			#gallery .navcontainer #thumbs ul.thumbs li {float:left; padding:0; margin:5px 5px 5px 0; list-style:none;}
			#gallery .navcontainer #thumbs a.thumb {padding:2px; display:block; border:1px solid #ccc;}
			#gallery .navcontainer #thumbs ul.thumbs li.selected a.thumb {background:#000;}
			#gallery .navcontainer #thumbs a.thumb:focus {outline:none;}
			#gallery .navcontainer #thumbs ul.thumbs img {border:none; display:block;}

			.bottom {height:30px; text-align:center; position:relative; overflow:visible;}

			div.pagination {clear:both; width:auto; position:relative; overflow:visible;}
			div.pagination a, div.pagination span.current, div.pagination span.ellipsis {display:block;float:left;margin-right:2px; padding:4px 7px 2px 7px; border:1px solid #ccc; color:#820405;}
			div.pagination a {display:none !important;}
			div.pagination a:hover {background-color:#eee; text-decoration:none;}
			div.pagination span.current {font-weight:bold; background-color:#000; border-color:#000; color:#fff;width:20px;}
				.pagination .ellipsis {display:none !important;}
				/* display none to make the 1 2 3 4 go away */
				.bottom>a, .bottom .current {display:none !important;}
				/* make the next and prev page display block since the above style make them display none */
				#nextPage, #prevPage {display:block !important; background-repeat:no-repeat; border-width:0; font-size:0; height:35px; width:6px; margin-top:-50px;}
				#nextPage {position:absolute; background-image:url('http://extras.mnginteractive.com/live/js/galleriffic/images/NextGallery.gif'); left:324px; *color:#fff;}
				#prevPage {position:absolute; background-image:url('http://extras.mnginteractive.com/live/js/galleriffic/images/PrevGallery.gif'); left:0px; *color:#ccc;}
			
/********************************
***** extra gallery tweaks ******
********************************/
div.pictopia {float:left; font-size:14px; font-weight: bold; margin-right:5px;}
.contentx a:focus, .contentx a:hover, .contentx a:active {text-decoration: underline;}

.galleryLinks .container {float:left; width:260px;}
.galleryLinks .container ul {padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}
.galleryLinks .container li {list-style:none;}
.galleryLinks .container .galleryTitle {font:14px arial; font-weight:bolder;}
.galleryLinks a.albumLink {font:11px arial;}