/*reset, based on Eric Meyer's work*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: #fff;
	background: url("images/hk-body-bg.jpg") no-repeat center top #000;
	font-size: 16px;
	font-family: geneva, arial, verdana, sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
strong {
	font-weight: bold;
	}
em, cite {
	font-style: italic;
	}
	
#header {

	width: 960px;
	height: 273px;
	margin: 0 auto;
	position: relative;

	}
	
h1 {

	width: 463px;
	height: 143px;
	position: absolute;
	top: 91px;
	left: 290px;
	background: url("images/hk-h1.png") no-repeat left top;
	text-indent: -9999px;

	}
	
#byLine {
	position: absolute;
	top: 0;
	left: 495px;
	width: 458px;
	height: 290px;
	text-indent: -9999px;
	background: url("images/hk-by-line.png") no-repeat left bottom;
	}
	#byLine:hover, #byLine:focus {
		background: url("images/hk-by-line-hover.png") no-repeat left bottom;
		}
	#byLine a {
		display: block;
		position: absolute;
		top: 230px;
		left: 0;
		width: 458px;
		height: 56px;
		text-indent: -9999px;
		}
	
#h1Sub {

	position: absolute;
	left: -9999px;
	top: -9999px;

	}
	
#videosContainer {

	width: 960px;
	margin: 0 auto;
	background: url("images/videos-bg.png") no-repeat left bottom;
	position: relative;

	}
	
	#videosContainer h2 {
		width: 220px;
		height: 237px;
		position: absolute;
		left: 0px;
		top: 272px;
		background: url("images/videos-h2.png") no-repeat left top transparent;
		text-indent: -9999px;
		}
		
	#registerNow {
		position: absolute;
		top: 524px;
		left: 88px;
		width: 129px;
		height: 65px;
		text-indent: -9999px;	
		background: url("images/videos-register-now.png") no-repeat left top;
		}
		
		#registerNow:hover, #registerNow:focus {
		
			background: url("images/videos-register-now-hover.png") no-repeat left top;
		
			}
		
		#registerNow a {
		
			display: block;
			width: 129px;
			height: 65px;
			text-indent: -9999px;			
		
			}

#videos {

	width: 650px;
	min-height: 500px;
	font-size: 14px;
	margin-left: 325px;

	}
	
	#videos li {
		display: inline-block;
		float: left;
		width: 310px;
		height: 300px;
		margin: 15px 15px 0 0;
		position: relative;
		z-index: 100;
		overflow: hidden;
		}
		
		#videos .video-1 {
			background: url("images/video-1-bg.png") no-repeat left 62px transparent;
			}
		#videos .video-2 {
			background: url("images/video-2-bg.png") no-repeat left 62px transparent;
			}
		#videos .video-3 {
			background: url("images/video-3-bg.png") no-repeat left 62px transparent;
			}
		#videos .video-4 {
			background: url("images/video-4-bg.png") no-repeat left 62px transparent;
			}
		
#videos li h3 {

	height: 75px;
	width: 310px;
	position: absolute;
	left: 0;
	top: 225px;
	z-index: 300;

	}
	
	#videos li h3 a {
	
		display: block;
		width: 310px;
		height: 75px;
		text-indent: -9999px;
		background-image: url("images/video-h3-a.png");
		background-repeat: no-repeat;
		background-color: transparent;
	
		}
		
		.video-1 h3 a {
			background-position: 0 0;
			}
			.video-1 h3 a:hover, .video-1 h3 a:focus {
				background-position: 0 -150px;
				}
		.video-2 h3 a {
			background-position: -315px 0;
			}
			.video-2 h3 a:hover, .video-2 h3 a:focus {
				background-position: -315px -150px;
				}
		.video-3 h3 a {
			background-position: 0 -75px;
			}
			.video-3 h3 a:hover, .video-3 h3 a:focus {
				background-position: 0 -225px;
				}
		.video-4 h3 a {
			background-position: -315px -75px;
			}
			.video-4 h3 a:hover, .video-4 h3 a:focus {
				background-position: -315px -225px;
				}
				
		#videos li .lesson-guide {
		
			display: block;
			position: absolute;
			left: 41px;
			top: 75px;
			background: url("images/view-lesson-guide.png") no-repeat 0 -56px;
			text-indent: -9999px;
			height: 56px;
			width: 56px;
		
			}
			
			#videos li .lesson-guide:hover, #videos li .lesson-guide:focus {
				background-position: 0 0;
				}

#videos li p {

	visibility: hidden;
	width: 217px;
	padding: 19px 19px 0 19px;
	height: 371px;
	position: absolute;
	left: 29px;
	top: 0;
	background: url("images/video-p-bg.png") no-repeat left top;
	color: #333;
	z-index: 200;
	line-height: 140%;

	}
	
	#videos li p a:hover, #videos li p a:focus {
		
		text-decoration: none;
		background-color: #333;
		color: #fff;
	
		}
	
.callout {

	position: absolute;
	left: 0px;
	top: 80px;
	background: url("images/callout-top.png") no-repeat left top;
	font-size: 14px;
	line-height: 130%;
	color: #fff;
	padding: 51px 30px 0 55px;
	width: 304px;
	height: 151px;
	overflow: hidden;

	}
	
	.callout a {
		color: #ff9;
		font-weight: bold;
		}
	
	.callout .callout-link {
		display: block;
		position: absolute;
		top: 140px;
		left: 0;
		text-indent: -9999px;
		background: url("images/callout-bottom.png") no-repeat left top;
		height: 61px;
		width: 304px;
		}
		
		.callout .callout-link:hover, .callout .callout-link:focus {
			background: url("images/callout-bottom-hover.png") no-repeat left top;
			}
		
	.callout .close-callout {
		display: block;
		position: absolute;
		top: 0;
		left: 106px;
		height: 32px;
		width: 178px;
		text-indent: -9999px;
		}
	
#videos li:hover p, #videos li:focus p {
	visibility: visible;
	}

	
#lowerContent {
	width: 940px;
	margin: 30px auto 0 auto;
	color: #ff9;
	font-size: 14px;
	}
	#lowerContent p {
		line-height: 140%;
		margin-bottom: 10px;
		}
	#lowerContent a {
		color: #fff;
		text-decoration: none;
		border-bottom: 1px solid #fff;
		}
		#lowerContent a:hover, #lowerContent a:focus {
			border-color: transparent;
			background-color: yellow;
			color: #333;
			}
			#lowerContent a:active {
				position: relative;
				top: 2px;
				}
	#lowerContent h3 {
		font-family: georgia, times, "times new roman", serif;
		font-size: 28px;
		line-height: 100%;
		font-weight: normal;
		color: #fff;
		letter-spacing: 1px;
		margin-top: 18px;
		margin-bottom: 18px;
		}
	
	#lowerContent div {
		display: inline-block;
		float: left;
		width: 290px;
		}
		
		#lowerContent h2 {
			background-image: url("images/hk-lc-h2.png");
			background-repeat: no-repeat;
			height: 166px;
			width: 290px;
			text-indent: -9999px;
			margin-bottom: 30px;
			}
		
		#lc1, #lc2 {
			margin-right: 35px;
			}
			
			#lc1 h2 {
				background-position: 0 0;
				}
			#lc2 h2 {
				background-position: -290px 0;
				}
			#lc3 h2 {
				background-position: -580px 0;
				}
				
			.bullets {
			
				list-style: disc;
				padding-left: 1.2em;
				line-height: 130%;
				font-size: 13px;
				margin-top: -12px;
			
				}
				
				.bullets li {
				
					padding: 12px 0;
					border-bottom: 1px dotted #ff9;
				
					}
					
			#quickFacts dt {
				text-transform: uppercase;
				color: #fff;
				letter-spacing: 1px;
				font-size: 16px;
				border-bottom: 1px dotted #fff;
				line-height: 110%;
				padding-bottom: 3px;
				padding-right: 73px;
				font-style: italic;
				font-weight: bold;
				margin: 10px 0;
				display: block;
				position: relative;
				}
			#quickFacts dd {
				font-size: 28px;
				line-height: 130%;
				}
			#quickFacts .bullets {
				margin: 0;
				}
				#lowerContent #quickFacts a {
					color: #ff9;
					border: 0;
					}
					#lowerContent #quickFacts a:hover, #lowerContent #quickFacts a:focus {
						background: #333;
						color: #fff;
						}
			
			#quickFacts .bullets li {
			
				font-size: 18px;
				border: 0;
				padding: 0;
				margin-bottom: 5px;
			
				}
				
			#quickFacts .show-hide {
				display: block;
				width: 68px;
				height: 18px;
				position: absolute;
				top: 50%;
				left: 222px; /* 222, yeah baby! */
				margin-top: -10px;
				background-image: url("images/show-hide.jpg");
				background-repeat: no-repeat;
				cursor: pointer;
				}
				
				#quickFacts .show {
					background-position: 0 0;
					}
					#quickFacts .show:hover, #quickFacts .show:focus {
						background-position: 0 -18px;
						}
				#quickFacts .hide {
					background-position: 0 -36px;
					}
					#quickFacts .hide:hover, #quickFacts .hide:focus {
						background-position: 0 -54px;
						}
			
			#photos {
				
				margin-bottom: 18px;
				
				}
			
			#photos li {
				
				height: 60px;
				overflow: hidden;
				margin-bottom: 2px;
				position: relative;
			
				}
				
			#photos a {
			
				display: block;
				height: 60px;
				
				}
				
			#social {
			
				margin-bottom: 20px;
			
				}
				
				#social li {
					height: 43px;
					width: 228px;
					padding: 5px 5px 5px 52px;
					background-image: url("images/social-icons.jpg");
					background-repeat: no-repeat;
					background-color: #ff9;
					margin-bottom: 5px;
					}
					.twitter {
						background-position: 0 -106px;
						}
						.twitter:hover {
							background-position: 0 -265px
							}
					.facebook {
						background-position: 0 -53px;
						}
						.facebook:hover {
							background-position: 0 -212px
							}
					.youtube{
						background-position: 0 0;
						}
						.youtube:hover {
							background-position: 0 -159px
							}
					.newsletter {
						background-position: 0 -318px;
						}
						.newsletter:hover {
							background-position: 0 -371px
							}
					.rss{
						background-position: 0 -424px;
						}
						.rss:hover {
							background-position: 0 -477px
							}
					#social li a {
						display: block;
						height: 43px;
						width: 228px;
						text-indent: -9999px;
						background-image: url("images/social-text.png");
						background-repeat: no-repeat;
						background-color: transparent;
						}
						#social .twitter a {
							background-position: 0 -202px;
							}
							#social .twitter a:hover, #social .twitter a:focus {
								background-position: 0 0;
								}
						#social .facebook a {
							background-position: -228px -202px;
							}
							#social .facebook a:hover, #social .facebook a:focus {
								background-position: -228px 0;
								}
						#social .youtube a {
							background-position: -456px -202px;
							}
							#social .youtube a:hover, #social .youtube a:focus {
								background-position: -456px 0;
								}
						
	
/* bits at the end */
	
.outtaHere {

	position: absolute;
	left: -9999px;
	top: -9999px;

	}
	
.clearfix:after { 

	content: ".";
	display: block;
	height: 0px;
	font-size: 0px;
	clear: both;
	visibility:hidden;
	overflow: hidden;
	
	}