/* ****************************************
Photo Gallery CSS

Copyright 2010 John Parkinson, all rights reserved
**************************************** */

#page-content {
	padding:70px 60px 20px 60px;
}

#image-gallery {
	position:relative;
	padding-top:512px;
}

	#selection-thumbnails {
		position:relative;
		padding:10px 60px;
		width:720px;
		min-height:236px;
		overflow:hidden;
	}
		#selection-thumbnails ul {
			width:720px;
			min-height:236px;
			text-align:center;
		}
			#selection-thumbnails ul li {
				display:inline-block;
				vertical-align:middle;
			}
				#selection-thumbnails li a img{
					float:left;
					margin:0 10px 20px 10px;
					border:1px solid #fc6;
				}
			
		/* Appearance for jQuery gallery controls */
		#selection-thumbnails-button-left,
		#selection-thumbnails-button-right {
			position:absolute;
			top:0;
			width:50px;
			height:100%;
			z-index:5;
		}
			#selection-thumbnails-button-left:hover {
				background:#666 url('../images/layout/arrow-left.gif') 100% 50% no-repeat;
			}
			#selection-thumbnails-button-right:hover {
				background:#666 url('../images/layout/arrow-right.gif') 0 50% no-repeat;
			}
		#selection-thumbnails-button-left {
			left:0;
			background:#444 url('../images/layout/arrow-left.gif') 0 50% no-repeat;
		}
		#selection-thumbnails-button-right {
			right:0;
			background:#444 url('../images/layout/arrow-right.gif') 100% 50% no-repeat;
		}
		
		
	
	#image-frame {
		overflow:hidden;
		position:absolute;
		top:0;
		left:0;
		
		margin-bottom:10px;
		
		width:100%;
		height:502px;
	}
		
		#image-frame ul {
			list-style:none;
		}
		
		.image-slide {
			position:relative;
			margin-bottom: 1.5em; /* This is for the photo story pages */
			clear:both;
			width:100%;
			height:502px;
			text-align:center;
		}
			.image-slide .image-name {
				text-align:center;
			}
				.image-slide .image-name a:link, .image-slide .image-name a:visited, .image-slide .image-name a:active {
					color:#fff;
					text-decoration:none;
					border-bottom:1px solid #fff;
				}
				.image-slide .image-name a:hover {
					text-decoration:none;
					border-bottom:none;
				}
			.image-slide img {
				display:block;
				margin:10px auto;
				border:1px solid #fc6;
			}
			.image-slide .image-description {
				display:none;
			}
			.image-slide .image-size {
				margin:0 0 6px 0;
				
				font-size:1.4em;
				text-align:center;
				color:#fc6;
			}
			.image-slide .image-price {
				margin:0 0 10px 0;
				
				font-size:1.4em;
				text-align:center;
				color:#fc6;
			}
			.image-slide a.image-button {
				margin-left:auto;
				margin-right:auto;
			}
			.image-slide a.image-button:hover {
				margin-left:auto;
				margin-right:auto;
			}
			
		.image-slide-vertical {
			position:relative;
			clear:both;
			margin:0 auto;
			padding-right:570px;
			width:0;
			height:auto;
		}
			.image-slide-vertical .image-name {
				position:absolute;
				top:0;
				left:340px;

				width:200px;
			}
			.image-slide-vertical img {
				float:right;
				margin-right:-320px;
				border:1px solid #fc6;
			}
			.image-slide-vertical .image-description {
				display:none;
			}
			.image-slide-vertical .image-size {
				position:absolute;
				bottom:3em;
				left:340px;
				margin-bottom:6px;
				padding:0;
				width:200px;
				font-size:1.4em;
				color:#fc6;
			}
			.image-slide-vertical .image-price {
				position:absolute;
				bottom:1.5em;
				left:340px;
				margin:0 0 10px 0;
				padding:0;
				width:200px;
				font-size:1.4em;
				color:#fc6;
			}
			.image-slide-vertical button.image-button,
			.image-slide-vertical a.image-button {
				position:absolute;
				bottom:0;
				left:340px;
			}
			.image-slide-vertical button.image-button:hover,
			.image-slide-vertical a.image-button:hover {
			}