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

html {
	background: #222;
}
body {
	margin: 0px;
	padding: 0px;
}
#outer {
	width: 1000px;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	-ms-box-shadow: 0px 0px 20px #000;
	-o-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
}

#header {
	background: url(../images/bg-header.jpg) no-repeat;
	height: 431px;
}
	
	/* Main Nav ---------------------------------------------------------------------- */
	#menu {
		background: url(../images/transparency.png) repeat;
		list-style-type: none;
		height: 23px;
		margin: 0px;
		padding: 0px 0px 0px 25px;
		color: #fff;
		font-size: 13px;
		position: relative;
		top: 10px;
		font-weight: bold;
	}
		#menu li {
			display: inline;
			position: relative;
			top: 3px;
			margin: 0px 20px 0px 0px;
		}
		#menu li:hover, #menu li a:hover {
			color: #9cf751;
		}
			#menu li a {
				color: #fff;
				text-decoration: none;
			}
		
		/* Expandable Items */
		#menu li ul {
			position: absolute;
			left: -9000px;
			margin: 0px;
			padding: 1px 0px 0px 0px;
			width: 230%;
			z-index: 100;
			font-weight: normal;
		}
			#menu li ul li {
				background: url(../images/transparency.png) repeat;
				display: block;
				margin: 1px 0px 0px 0px;
				padding: 3px 0px 3px 10px;
			}
		
		#menu li:hover ul {
			left: 0;
		}
		
	/* Phone Number ---------------------------------------------------------------------- */
	#phone-number {
		position: absolute;
		top: auto;
		left: auto;
		margin: -5px 0px 0px 673px;
	}	
	
	/* Logo ---------------------------------------------------------------------- */
	h1 {
		width: 349px;
		margin: 0px;
		position: relative;
		top: 17px;
		left: 515px;
	}
		h1 a img {
			border: none;
		}
	
	/* Buy Button ---------------------------------------------------------------------- */
	#buy-button {
		display: block;
		background: url(../images/buy-button.png) no-repeat;
		background-position: top;
		width: 510px;
		height: 104px;
		float: right;
		position: relative;
		top: 150px;
	}
	#buy-button:hover {
		background-position: bottom;
	}

/* Gray Box */
#inner {
	background: #353535;
	border-top: 1px solid #000;
	padding: 0px 0px 25px 0px;
}
	
	/* Main Content ---------------------------------------------------------------------- */
	#content {
		float: left;
		width: 450px;
		min-height: 350px;
		color: #ddd;
		font-size: 14px;
		line-height: 21px;
		margin: 0px 0px 0px 25px;
		padding: 35px 0px 25px 0px;
	}
		h2 {
			margin: 0px 0px 10px 0px;
			color: #fff;
		}
		p {
			margin: 30px 0px 30px 0px;
		}
		strong {
			color: #ccc;
		}
		table {
			width: 450px;
		}
			td {
				border: 1px solid #999;
				padding: 5px;
			}
		#content a {
			color: #9cf751;
			font-weight: bold;
			text-decoration: underline;
		}
		a img {
			border: none;
		}
		#content a:hover {
			text-decoration: none;
		}
		img {
			max-width: 100%;
			height: auto;
		}
		.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%;
		}
		/* Custom classes and ids ---------------------------------------------------------------------- */
		#board-selector {
			width: 450px;
		}
			#board-selector td {
				padding: 0px;
				border: none;
			}
		.composite-images {
			float: left;
			width: 146px;
			overflow: hidden;
			margin: 0px 4px 15px 0px;
		}
		.call2action {
			font-size: 14px;
			color: #FFFFFF;
			font-weight: bold;
			text-align: center;
			font-style: italic;
		}
		.minimenu {
			font-size: 12px;
			color: #FFFFFF;
			text-align: center;
		}
	
	/* Right-hand box for slideshows, pictures, video, special information, etc. ------------------- */
	.window {
		background: #000;
		float: left;
		width: 475px;
		margin: 35px 0px 0px 25px;
		padding: 0px;
		color: #888;
		font-size: 13px;
		text-align: center;
	}
		.window a {
			color: #9cf751;
		}
		.caption {
			text-align: center;
			font-style: italic;
			padding: 10px 0px;
		}
			.caption a {
				color: #ccc;
			}
		
	#spacer {
		clear: left;
	}

/* Footer and Bottom Nav ---------------------------------------------------------------------- */
#footer {
	background: url(../images/bg-footer.jpg) no-repeat;
	height: 117px;
}
	#footer #menu {
		position: relative;
		top: 0px;
	}
	#copyright {
		text-align: right;
		margin: 70px 10px 0px 0px;
		color: #fff;
		font-size: 11px;
	}



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

#outer {
	width: 100%;
}
#header {
	background-position: top right;
	height: 331px;
	position: relative;
}
	#phone-number {
		margin: -5px 0px 0px 0px;
		right: 5px;
	}
	h1 {
		width: 349px;
		position: absolute;
		top: 40px;
		right: 130px;
		left: auto;
	}

#inner {
	padding: 0;
}
#content {
	float: none;
	width: 90%;
	margin: 0;
	padding: 5%;
}

.window {
	float: none;
	width: 100%;
	margin: 35px 0px 0px 0px;
}
	.window table {
		margin: 0 auto;
		width: 100%;
	}

}



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

#header {
	background: #060;
	height: 200px;
}
#menu {
	height: 46px;
	margin: 0px;
	padding: 5px 0;
	color: #fff;
	font-size: 13px;
	position: relative;
	top: 10px;
	font-weight: bold;
}
#phone-number {
	margin: -5px 0 0 0;
	right: auto;
	left:; 0;
}
h1 {
	width: 349px;
	position: absolute;
	top: 60px;
	right: 0;
	left: auto;
}
	h1 img {
		max-width: 100%;
		height: auto;
	}
#buy-button {
	display: none;
}
.window {
	display: none;
}

}