/*slideshow height resizing*/

@media only screen and (max-height: 300px) {
	#slideshow {
		height: 200px;
	}
}

@media only screen and (min-height: 300px) and (max-height: 400px) {
	#slideshow {
		height: 300px;
	}
}

@media only screen and (min-height: 400px) and (max-height: 500px) {
	#slideshow {
		height: 400px;
	}
}

@media only screen and (min-height: 500px) and (max-height: 600px) {
	#slideshow {
		height: 500px;
	}
}

@media only screen and (min-height: 600px) and (max-height: 700px) {
	#slideshow {
		height: 600px;
	}
}

@media only screen and (min-height: 700px) and (max-height: 800px) {
	#slideshow {
		height: 700px;
	}
}

@media only screen and (min-height: 800px) and (max-height: 900px) {
	#slideshow {
		height: 800px;
	}
}

@media only screen and (min-height: 900px) and (max-height: 1000px) {
	#slideshow {
		height: 900px;
	}
}

@media only screen and (min-height: 1000px) and (max-height: 1100px) {
	#slideshow {
		height: 1000px;
	}
}

@media only screen and (min-height: 1100px) and (max-height: 1200px) {
	#slideshow {
		height: 1100px;
	}
}

@media only screen and (min-height: 1200px) and (max-height: 1300px) {
	#slideshow {
		height: 1200px;
	}
}

@media only screen and (min-height: 1300px) and (max-height: 1400px) {
	#slideshow {
		height: 1300px;
	}
}

@media only screen and (min-height: 1400px) and (max-height: 1500px) {
	#slideshow {
		height: 1400px;
	}
}

@media only screen and (min-height: 1500px) and (max-height: 1600px) {
	#slideshow {
		height: 1500px;
	}
}

@media only screen and (min-height: 1600px) and (max-height: 1700px) {
	#slideshow {
		height: 1600px;
	}
}

@media only screen and (min-height: 1700px) and (max-height: 1800px) {
	#slideshow {
		height: 1700px;
	}
}

@media only screen and (min-height: 1800px) {
	#slideshow {
		height: 1800px;
	}
}

/*gallery centering*/

@media only screen and (max-width: 640px) {
	#gallery, #vidgallery {
		width: 320px;
	}
}

@media only screen and (min-width: 640px) and (max-width: 960px) {
	#gallery, #vidgallery {
		width: 640px;
	}
}

@media only screen and (min-width: 960px) and (max-width: 1280px) {
	#gallery, #vidgallery {
		width: 960px;
	}
}

@media only screen and (min-width: 1280px) and (max-width: 1600px) {
	#gallery, #vidgallery {
		width: 1280px;
	}
}

@media only screen and (min-width: 1600px) and (max-width: 1920px) {
	#gallery, #vidgallery {
		width: 1760px;
	}
}

@media only screen and (min-width: 1920px) and (max-width: 2240px) {
	#gallery, #vidgallery {
		width: 1920px;
	}
}

@media only screen and (min-width: 2240px) {
	#gallery, #vidgallery {
		width: 2240px;
	}
}

#loading {
	margin: 0 auto;
	height: 450px;
	width: 350px;
	background-repeat: no-repeat;
}

#gallery, #vidgallery {
	margin: 0 auto;
	padding-bottom: 75px;
}

#gallery a {
	width: 300px;
	height: 300px;
	float: left;
	padding: 10px;
	text-align: center;
	overflow: hidden;
}

#vidgallery a {
	width: 450px;
	height: 450px;
	float: left;
	padding: 10px;
	text-align: center;
	overflow: hidden;
}

#gallery .frame {
	white-space: nowrap;
	height: 300px;
	width: 300px;
}

#vidgallery .frame {
	white-space: nowrap;
	height: 450px;
	max-width: 450px;
}

#vidgallery .frame p {
	clear: both;
	max-width: 450px;
	text-overflow: inherit;
}

.helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.thumbs {
	max-height: 300px;
	max-width: 300px;
	vertical-align: middle;
	display: inline-block;
}

.thumbs:hover {
	opacity: .7;
}

#slideshow {
	width: 100%;
	text-align: center;
	position: relative;
}

#slideshow img {
	display: none;
}

#slideshow img.active {
	position: absolute;
	display: block;
	margin: 0 auto;
	top: 50%;
	left: 50%;
	z-index: 3;
}

#exit {
	position: absolute;
	background-image: url('exit.png');
	height: 45px;
	width: 80px;
	top: 0px;
	right: 0px;
	opacity: .5;
	z-index: 15;
}

#exit:hover {
	opacity: 1;
}

#fullscreen {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#previous {
	float: left;
	left: 0px;
	top: 50%;
	margin-top: -50px;
	/* background-image:url('../GalleryFiles/prev.png');} */
	#next {
		right: 0px;
		top: 50%;
		margin-top: -50px;
		/* background-image:url('../GalleryFiles/next.png');} */
		.controls {
			position: absolute;
			width: 150px;
			height: 150px;
			opacity: .5;
			margin: 20px;
			z-index: 15;
		}
		.controls:hover {
			opacity: 1;
			z-index: 15;
		}
		#caption {
			opacity: .7;
			font-size: 14px;
			font-family: Helvetica, Arial, sans-serif;
			color: #cbcbcb;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: #5f5f5f;
			z-index: 15;
			padding: 10px;
		}
		.hide {
			display: none;
		}
		/* main page styling */
		/*to-dos:make whole page centered & dynamic (like the floating .thumbs)
*/
		#wrapper {
			width: 980px;
			margin: 0 auto;
		}
		#nav li {
			text-align: center;
			display: inline-block;
		}
		#nav ul {
			text-align: justify;
			width: 970px;
			margin: 0 auto;
		}
		ul li a {
			color: black;
			text-decoration: none;
			font-family: futura;
			helvetica;
			sans-serif;
			font-style: Bold, none;
			font-size: 20px;
		}
		ul li a:hover {
			color: #555;
		}
		a#photo {
			color: #555;
		}
		.filler {
			width: 100%;
			display: inline-block;
			height: 0px;
		}
		#footer {
			clear: both;
		}
		.foottxt {
			font-size: 10px;
			font-family: helvetica, arial, sans-serif, sans-serif;
			text-align: center;
			color: #8f908c;
		}