@charset "utf-8";
/* CSS Document */

/* Background gradient */
html {
	background: url(images/bg-html.jpg) repeat-x #4a4a4a;
}
body {	/* Reset page positioning */
	margin: 0px;
	padding: 0px;
}

/* Drop shadow background */
#outer {
	background: url(images/bg-shadow.png) repeat-y;
	width: 820px;
	margin: 0 auto;
}

/* Properly position the content */
#inner {
	background: url(images/bg-body.jpg) no-repeat #000;
	width: 800px;
	margin: 0 auto;
}

/* Main Navigation */
#menu {
	float: left;
	width: 225px;
	margin: 130px 75px 0px 0px;
}
	#menu ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		text-align: right;
	}
		#menu ul a {
			display: block;
			padding: 10px 40px 10px 0px;
			font-family: "Trajan Pro", "Garamond Premr Pro", "Times New Roman", serif;
			color: #fff;
			text-decoration: none;
		}
		#menu ul a:hover {
			background: url(images/bg-hover.png) repeat;
		}

/* Header and Content are grouped together in one column */
#container {
	float: left;
	width: 493px;
	margin: 75px 0px 0px 0px;
}
	h1 {	/* Header/Logo */
		margin: 0px;
		text-align: right;
	}
		#logo {
			border: none;
		}
	
	/* Main Content */
	#content {
		margin: 40px 0px 0px 0px;
		padding: 0px 0px 30px 0px;
		width: 440px;
		min-height: 300px;
		font-family: Calibri, Arial, Helvetica, sans-serif;
		line-height: 1.5;
		color: #ccc;
		font-size: 14px;
	}
		
		/* Headers */
		h2 {
			font-family: "Times New Roman", Times, serif;
			font-weight: normal;
			font-style: italic;
			font-size: 20px;
			color: #fff;
		}
		h3 {
			color: #fff;
		}
		h4 {
			color: #fff;
		}
		
		/* Links */
		#content a {
			color: #ba826b;
			text-decoration: none;
		}
		#content a:hover {
			color: #dca48d;
		}
		
		/* Paragraphs */
		p {
			margin: 1.5em 0;
		}
		
		/* specific selectors */
		.caption {	/* small italic text */
			font-size: 8pt;
			font-style: italic;
		}
		.atl {	/* position the atl image in line with content */
			position: relative;
			top: 4px;
		}
		
		/* Floated images */
		.float-left {
			float: left;
			margin-right: 10pt;
		}
		.float-right {
			float: right;
			margin-left: 10pt;
		}
		
		.clear {
			clear: both;
		}
		
		/* Tables */
		td {
			border: 1px solid #555;
			padding: 5px;
		}
		
		/* Image Gallery */
		#gallery a img {
			border: none;
		}
		
			/* Lightbox */
			#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
			#lightbox img{ width: auto; height: auto;}
			#lightbox a img{ border: none; }
			
			#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
			#imageContainer{ padding: 10px; }
			
			#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
			#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
			#imageContainer>#hoverNav{ left: 0;}
			#hoverNav a{ outline: none;}
			
			#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
			#prevLink { left: 0; float: left;}
			#nextLink { right: 0; float: right;}
			#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
			#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }
			
			#imageDataContainer{ font: 10px "Times New Roman", serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
			
			#imageData{	padding:0 10px; color: #000; }
			#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
			#imageData #caption{ font-weight: bold;	}
			#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
			#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
			
			#overlay{ position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 500px; background-color: #000; }

/* Empty div to make sure the background shows up */
#spacer {
	clear: both;
}

.video-container {
	margin: 0 0 2em 0;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Footer Menu */
#footer {
	background: url(images/shadow-footer.png) no-repeat;
	width: 820px;
	height: 30px;
	margin: 0 auto;
	padding: 5px 0px 0px 0px;
	text-align: center;
	color: #ccc;
	font-size: 10pt;
	font-family: "Times New Roman", Times, serif;
}
	#footer a {
		color: #ccc;
		text-decoration: none;
	}
	#footer a:hover {
		color: #fff;
	}





@media screen and (max-width: 52.25em) {

#outer {
	background: none;
	width: 100%;
}
#inner {
	background: none;
	width: 100%;
}
#menu {
	background: #222;
	float: none;
	width: 225px;
	margin: 0;
	position: absolute;
	top: 0;
	left: -225px;
	z-index: 10;
	transition: left .3s ease;
}
	#menu:after {
		content: "";
		display: block;
		background: url(images/nav-slideout.png) no-repeat center #222;
		background-size: contain;
		width: 40px;
		height: 40px;
		position: absolute;
		top: 0;
		left: 100%;
		cursor: pointer;
	}
#container {
	float: none;
	width: 100%;
	margin: 0 auto;
}
#content {
	background: #000;
	margin: 0 auto;
	padding: 0 5% 20px 5%;
	width: 90%;
}
#footer {
	background: none;
	width: 90%;
	height: auto;
	margin: 0 auto;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
}
h1 img {
	max-width: calc(100% - 40px);
}
table {
	width: 100%;
	background: #000;
}

}