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

header, nav, section, article, aside, footer {	/* make HTML5 elements display correctly */
	display: block;
}

@font-face {	/* embed fonts */
    font-family: 'LaneNarrowRegular';
    src: url('../fonts/Lane-fontfacekit/LANENAR_-webfont.eot?') format('eot'),
         url('../fonts/Lane-fontfacekit/LANENAR_-webfont.woff') format('woff'),
         url('../fonts/Lane-fontfacekit/LANENAR_-webfont.ttf') format('truetype'),
         url('../fonts/Lane-fontfacekit/LANENAR_-webfont.svg#webfontMAZXZguX') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TeXGyreHerosRegular';
    src: url('../fonts/TeX-Gyre-Heros-fontfacekit/texgyreheros-regular-webfont.eot?') format('eot'),
         url('../fonts/TeX-Gyre-Heros-fontfacekit/texgyreheros-regular-webfont.woff') format('woff'),
         url('../fonts/TeX-Gyre-Heros-fontfacekit/texgyreheros-regular-webfont.ttf') format('truetype'),
         url('../fonts/TeX-Gyre-Heros-fontfacekit/texgyreheros-regular-webfont.svg#webfontRF48skZW') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ---------------------------------------------------------------------------------------------------- */

/* Outer Structure ------------------------------------------------------------------------------------ */
html {
	background: #000;
}
body {
	margin: 0px;
	padding: 0px;
}
#shadow {
	background: url(../images/bg-shadow.png) repeat-y;
	width: 955px;
	margin: 0px auto;
}
#outer {
	background: url(../images/bg-body-2.jpg) repeat;
	width: 904px;
	margin: 0 auto;
	color: #fff;
	font-family: "TeXGyreHerosRegular", "Myriad Pro", "Arial", sans-serif;
	font-size: 13px;
}

/* ---------------------------------------------------------------------------------------------------- */

/* Header --------------------------------------------------------------------------------------------- */
header {
	background: url(../images/bg-header-2.jpg) no-repeat;
	height: 100px;
	width: 904px;
	position: fixed;
	z-index: 50;
}
	h1 {
		margin: 0px;
		padding: 0px;
		font-weight: normal;
		font-size: 60px;
		float: right;
		position: relative;
		top: 0px;
		right: 50px;
		font-family: "LaneNarrowRegular", "Kozuka Gothic Pro EL", "Myriad Pro", "Arial", sans-serif;
		text-align: right;
	}
		#phone-number {
			font-size: 18px;
		}
		h1 a {
			color: #fff;
			text-decoration: none;
		}

/* ---------------------------------------------------------------------------------------------------- */

/* Main Navigation ------------------------------------------------------------------------------------ */
#main-nav {	/* assign images to main navigation */
	background: url(../images/bg-nav.png) no-repeat;
	height: 118px;
	position: fixed;
	margin: 100px 0px 0px 0px;
	z-index: 50;
}
	#main-nav ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}
		#main-nav ul li {	/* arrange the menu links */
			float: left;
			display: inline;
			width: 130px;
			height: 31px;
			margin: 0px 1px 0px 0px;
			padding: 69px 0px 0px 20px;
			color: #fff;
		}
		#main-nav ul #last {	/* make sure they all fit on one row */
			margin: 0px;
		}
			.main-nav-link {	/* set up the glow hover effect */
				display: block;
				position: absolute;
				margin: -84px 0px 0px -20px;
				filter:alpha(opacity=0);
				-moz-opacity:0;
				-khtml-opacity: 0;
				opacity: 0;
				
				-webkit-transition: opacity 0.5s ease;
				-moz-transition: -moz-opacity 0.5s ease;
				-o-transition: opacity 0.5s ease;
				transition: opacity 0.5s ease;
			}
			.main-nav-link:hover {
				filter:alpha(opacity=100);
				-moz-opacity:1.0;
				-khtml-opacity: 1.0;
				opacity: 1.0;
			}
				a img {	/* eliminate borders around image links */
					border: none;
				}

/* ---------------------------------------------------------------------------------------------------- */

/* Main Content --------------------------------------------------------------------------------------- */
#content {
	background: url(../images/bg-content.png) repeat;
	width: 854px;
	float: right;
	margin: 209px 0px 0px 0px;
	padding: 25px;
	text-align: justify;
	line-height: 21px;
}
	h2 {
		font-size: 22px;
		font-weight: normal;
	}
	p {
		margin: 30px 0px;
	}
	#content a {
		color: #ffd800;
		text-decoration: none;
		
		-webkit-transition: color 0.3s ease;
		-moz-transition: color 0.3s ease;
		-o-transition: color 0.3s ease;
		transition: color 0.3s ease;
	}
	#content a:hover {
		color: #ffff00;
	}
	table {
		text-align: left;
	}
		tr:nth-child(odd) {	/* give every odd-numbered row a dark background */
			background: url(../images/bg-content.png) repeat;
		}
	#calculator td {
		padding: 5px;
	}
	#contact-form td {
		padding: 5px;
	}
	#content ul, #content ol {
		margin: 30px 0px 30px 435px;
		font-size: 12px;
	}
		#content ul li, #content ol li {
			padding: 0px 0px 0px 20px;
		}
	.caption {
		font-size: 11px;
		font-style: italic;
	}
	.float-left {
		float: left;
		margin: 0px 19px 0px 0px;
	}
		#no-margin {
			margin: 0px;
		}
	.clear {
		clear: both;
	}
	.call-to-action {
		text-align: center;
	}
	.red-text {
		color: #f90;
	}
	#showcase {	/* area for displaying large images */
		float: left;
		width: 435px;
		margin: 15px 20px 0px 0px;
	}
		#buy-button {
			position: relative;
			left: -2px;
			margin: 0px 0px 10px 0px;
			background-image: url(../images/buy-button.gif);
			background-position: center top;
			height:101;
			width:434;
			cursor:pointer;
		}
		
		#buy-button:hover  {
			position: relative;
			left: -2px;
			margin: 0px 0px 10px 0px;
			background-image: url(../images/buy-button.gif);
			background-position: center bottom;
			height:101;
			width:434;
			cursor:pointer;
		}
		#showcase-header {	/* top of the frame */
			background: url(../images/frame-header.png) no-repeat;
			height: 5px;
		}
		#showcase-image {	/* container for the image */
			background: url(../images/frame.png) repeat-y;
		}
			#showcase img {
				position: relative;
				left: 5px;
			}	
		#showcase-footer {	/* bottom of the frame */
			background: url(../images/frame-footer.png) no-repeat;
			height: 14px;
		}
		
/* ---------------------------------------------------------------------------------------------------- */

/* Image Gallery -------------------------------------------------------------------------------------- */
#preloader {	/* for javascript image swaps to prevent delays - put images in here that need to be preloaded */
	position: absolute;
	left: -9000px;
}
#gallery {
	width: 392px;
	float: left;
}
	#gallery img {
		display: block;
		margin: 5px 0px;
		border: 1px solid #000;
		cursor: pointer;
	}

#contentimg {
	width: 392px;
	float: left;
}
	#contentimg img {
		display: block;
		margin: 5px 0px;
		border: 1px solid #000;
	}

footer {
	clear: both;
}
#footer-shadow {
	background: url(../images/shadow-footer.png) no-repeat;
	width: 955px;
	height: 26px;
	margin: 0px auto;
	color: #777;
	text-align: center;
	font-family: "TeXGyreHerosRegular", "Myriad Pro", "Arial", sans-serif;
	font-size: 12px;
}
.video-container {
	position: relative;
	margin: 2em 0;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
	z-index: 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* ---------------------------------------------------------------------------------------------------- */

/* Increase Header Size for Larger Displays ----------------------------------------------------------- */
@media screen and (min-height: 768px) {
	header {
		background: url(../images/bg-header-2.jpg) no-repeat;
		height: 150px;
	}
		h1 {
			top: 30px;
		}
	#main-nav {
		margin: 150px 0px 0px 0px;
	}
	#content {
		margin: 259px 0px 0px 0px;
	}
}





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

#shadow {
	background: url(../images/bg-shadow.png) repeat-y center;
	width: 904px;
	margin: 0px auto;
}
#outer {
	background: url(../images/bg-body-2.jpg) repeat;
	width: 904px;
	margin: 0 auto;
	color: #fff;
	font-family: "TeXGyreHerosRegular", "Myriad Pro", "Arial", sans-serif;
	font-size: 13px;
}

#footer-shadow {
	width: 904px;
}

}





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

#shadow {
	width: 100%;
}
#outer {
	width: 100%;
	padding: 0 0 94px 0;
}
header {
	background-size: cover;
	height: auto;
	width: 100%;
	padding: 0 0 10px 0;
}
	h1 {
		font-size: 30px;
		float: right;
		position: relative;
		top: 0px;
		right: 50px;
	}
		#phone-number {
			font-size: 18px;
		}
#main-nav {
	background: #000;
	height: 30px;
	width: 100%;
	margin: 64px 0px 0px 0px;
	font-size: 11px;
}
		#main-nav ul li {	/* arrange the menu links */
			display: inline-block;
			width: 16.666%;
			height: 30px;
			margin: 0;
			padding: 0;
			position: relative;
			text-align: center;
		}
			.main-nav-link {	/* set up the glow hover effect */
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				margin: 0;
				width: 100%;
				height: 30px;
			}
				.main-nav-link img {
					display: none;
				}
#content {
	background: url(../images/bg-content.png) repeat;
	width: 100%;
	float: none;
	margin: 0;
	padding: 30px 0;
	position: relative;
	top: 94px;
}
	table {
		background: url(../images/bg-body-2.jpg) repeat;
		width: 100%;
	}
	img {
		width: auto !important;
		max-width: 100%;
		height: auto;
	}
	#content ul, #content ol {
		margin: 30px 0px 30px 0;
	}
	#gallery {
		width: 100%;
		float: none;
	}
		#gallery img {
			border: none;
			margin: 5px auto;
		}
#showcase {	/* area for displaying large images */
	float: none;
	width: 100%;
	margin: 0;
	display: none;
}
	#buy-button {
		display: none;
	}
#footer-shadow {
	width: 100%;
}

}