@charset "UTF-8";

/* ------------------------------------------------------------------------------------------------------*/
/* BROWSER RESET  ---------------------------------------------------------------------------------------*/


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background: none;
  /*background:transparent;*/
}                  

table 	{ border-collapse:collapse; border-spacing:0; }	/* tables still need cellspacing="0" in the markup */
:focus	{ outline: 0; } 	/* Gets rid of broswer generated outlines around elements */
html 		{ overflow-y: scroll; }	/* Add this in to always generate vertical scrolls (and avoid page shift on centered layouts) */
.clear 	{ clear: both; height: 0; overflow: hidden; }

html { -webkit-font-smoothing: antialiased; } /* Cleaner typography in Safari/Chrome */


/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements 
(j.mp/bestclearfix & blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page)  */

.clearfix:before,
.clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
.clearfix { zoom:1; } /* For IE 6/7 (trigger hasLayout) */



/* ------------------------------------------------------------------------------------------------------*/
/* BASE BLOCK ELEMENTS & GLOBAL STYLES ------------------------------------------------------------------*/


body { 
	background: #3b3a39 url(../images/shared/bg-body.gif) repeat-x top;
	background-position: 0 -114px;
	font-family: Arial, Helvetica, sans-serif;
}

#background { 
	background: url(../images/shared/bg-header.jpg) top center no-repeat;
}

#wrapper {
	width: 960px;
	margin: 0 auto 30px auto;
	padding: 0 0 60px 0;
}

#header {
	position: relative;
	width: 960px;
	height: 114px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#content {
	position: relative;
	width: 960px;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 60px;
	padding-bottom: 0;
	background: url(../images/shared/bg-content.jpg) no-repeat top center;
	overflow: visible;
	padding-left: 280px;
	padding-right: 280px;
	margin-left: -280px;
	margin-right: -280px;
}



#footer-wrapper {
	width: 100%;
	background: #282828;
}

#footer {
	width: 960px;
	margin: 0 auto;
	padding: 5px 0 0 0;
}

/* Force footer to stick to bottom of viewport */
html, body, #background { height: 100%; }
body > #background { height: auto; min-height: 100%; }
#footer-wrapper {
	clear: both;
	position: relative;
	height: 70px;
	margin-top: -100px;
}

#bglink{
  display:block;
  position:relative;
  height:60px;
  width:233px;
  left:0px;
  top:305px;
  z-index:1000;
  text-indent:-5000em;
  /* If you want to make only a part of background clickable,
     adjust height/width/left/top here. */
}


/* ------------------------------------------------------------------------------------------------------*/
/* HEADER: LOGO  ----------------------------------------------------------------------------------------*/


#header a.logo {
	display: block;
	position: absolute;
	top: 17px;
	left: 603px;
	width: 294px;
	height: 92px;
	text-indent: -5000px;
	background: url(../images/shared/logo-early.png);
}



/* ------------------------------------------------------------------------------------------------------*/
/* PAGE CONTENT  ----------------------------------------------------------------------------------------*/


#tier1, #tier2 {
	margin: 0;
	padding: 0 0 0 40px;
}

#tier1 {
	height: 485px;
	margin: 0 0 40px 0;
}

.left-col {
	float: left;
	width: 100%;
	margin-top: 125px;
	color: #FC6;
}

.right-col {
	float: left;
	width: 100%;
	color: #39F;
}


/* All general content-based text styles */

#content h1 {
	font: 400 30px/32px Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0 0 20px 0;
	color: #f8f4f1;
}
#content h1.page-title {
	font: 400 70px/80px Arial, Helvetica, sans-serif;
	padding: 12px 0 0 35px;
	margin: 0 0 1px -37px;
	background: url(../images/shared/icon-placeholder.png) top left no-repeat;
	text-align: center;
}

#content h1.page-title a { color: #fff; }

#content h2 {
	font: 400 24px/32px Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0 0 40px 0;
	color: #ffffff;
}

#content h3 {
	font: 400 22px/26px Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0 0 28px 0;
	color: #fff;
}

#content h4 {
	font: 400 18px/22px Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0 0 24px 0;
	color: #fff;
}

#content p {
	font: 400 14px/22px Arial, Helvetica, sans-serif;
	margin: 0 0 20px 0;
	color: #cccccc;
}

#content ul {
 	list-style-type: none;
	padding: 0 0 0 4px;
	margin: 0 0 15px 0;
	font: 400 24px/32px Arial, Helvetica, sans-serif;
	color: #cccccc;
}

#content ul li {
	margin: 0 0 1px 0;
	background: url(../images/shared/list-bullet.png) no-repeat 0 .6em;
	padding-left: 14px;
}

#content ol {
 	list-style-type: decimal;
	padding: 0 0 0 0;
	margin: 0 0 15px 25px;
	font: 400 14px/22px Arial, Helvetica, sans-serif;
	color: #cccccc;
}

#content ol li {
	margin: 8px 0 1px 0;
	padding-left: 0;
}

#content a:link,
#content a:visited	{ color: #f3f07e; text-decoration: none; }
#content a:hover,
#content a:active	{ color: #f3f07e; text-decoration: underline; }

#content hr { 
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1.7em 0 1.6em 0;
	padding:0
}


/* Vertical spacing between specific sets of elements */

#content p + ul { margin-top: -6px; }
#content p + h1, #content ul + h1, #content ol + h1 { margin-top: 25px; }
#content p + h2, #content ul + h2, #content ol + h2 { margin-top: 25px; }
#content p + h3, #content ul + h3, #content ol + h3 { margin-top: 25px; }
#content p + h4, #content ul + h4, #content ol + h4 { margin-top: 25px; }
#content p + h5, #content ul + h5, #content ol + h5 { margin-top: 20px; }
#content h4 + ul, #content h4 + ol { margin-top: 10px; }




/* ------------------------------------------------------------------------------------------------------*/
/* TIER 1 - SPECIFIC CONTENT  -------------------------------------------------------------------------- */


#tier1 .right-col { text-align: center; }

#content h2.tagline {
	font: 400 50px/55px Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 2px 0 22px 0;
	color: #f1956e;
	text-align: center;
}

#content ul.features-list {
	margin-bottom: 25px;
	width: 100%;
	float: left;
}

#content ul.features-list li {
	margin-top: 7px;
}

.video-player {
	margin: 0px auto 0px auto;
	width: 454px;
	height: auto;
}

.video-player iframe { margin-bottom: 17px; }

.embed-container {
    position: relative;
    padding-bottom: 51%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 100%;
	height: 100%;
}

#content h2.video-title {
	display: inline;
	padding-left: 32px;
	margin-top: 20px;
	background: url(../images/shared/icon-video.png) no-repeat 0 8px;
}

#content h2.audio-title {
	display: inline;
	padding-left: 32px;
	top: 100%;
	background: url(../images/shared/icon-audio.png) no-repeat 0 8px;
}



/* ------------------------------------------------------------------------------------------------------*/
/* TIER 2 - SPECIFIC CONTENT  -------------------------------------------------------------------------- */


#tier2 .right-col {
	position: relative;
	width: 100%;
	margin: 30px 0 0 0;
	padding: 20px 0 0 0;
	border-top: 1px solid #5a5a5a;
	float: left;
}

#tier2 .left-col {
	position: relative;
	float: left;
	margin-top: 20px;
	width: 100%
}

#content ul.contact-info {
	display: block;
}

#content ul.contact-info li.phone {
	margin: 0 0 0 -4px;
	padding: 0 10px 0 30px;
	float: left;
	width: 100%;
	font: 400 24px/26px Arial, Helvetica, sans-serif;
	color: #f1956e;
	background: url(../images/shared/icon-phone.png) no-repeat 1px 3px;
}

#content ul.contact-info li.email {
	margin: 0 0 1px -4px;
	float: left;
	width: 100%;
	background: url(../images/shared/icon-email.png) no-repeat 0 7px;
	padding: 0 10px 0 30px;
}

#content ul.contact-info a:link,
#content ul.contact-info a:visited	{ color: #cccccc; text-decoration: none; }
#content ul.contact-info a:hover,
#content ul.contact-info a:active	{ color: #cccccc; text-decoration: underline; }

#content ul.video-links {
	font: 400 30px/33px Arial, Helvetica, sans-serif;
}

#content ul.video-links li {
	margin: 0 0 12px -4px;
	background: url(../images/shared/icon-video.png) no-repeat 0 3px;
	padding: 0 0 0 25px;
}

#content ul.video-links.col1 {
	float: left;
	width: 45%;
}

#content ul.video-links.col2 {
	float: right;
	width: 45%;
}

#content ul.video-links.col3 { 
	float: right;
	width: 45%;
}

#content ul.video-links.col3 li { 
	margin: 0 0 12px -4px;
	background: url(../images/shared/icon-audio.png) no-repeat 0 3px;
	padding: 0 0 0 25px;
}

#content ul.video-links.col2 li {
	background: none;
}


#content ul.video-links a:link,
#content ul.video-links a:visited	{ color: #cccccc; text-decoration: none; }
#content ul.video-links a:hover,
#content ul.video-links a:active	{ color: #e89c6a; text-decoration: none; }

#content ul.video-links.col2 a:link,
#content ul.video-links.col2 a:visited	{ color: #e89c6a; text-decoration: none; }
#content ul.video-links.col2 a:hover,
#content ul.video-links.col2 a:active	{ color: #fff; text-decoration: none;
}




/* ------------------------------------------------------------------------------------------------------*/
/* FOOTER  --------------------------------------------------------------------------------------------- */


#footer ul.footer-links {
	width: auto;
	float: right;
	list-style-type: none;
	padding: 0 5px 0 4px;
	margin: 2px 0 15px 0;
	font: 800 12px/12px Arial, Helvetica, sans-serif;
	color: #999999;
	text-transform: uppercase;
}

#footer ul.footer-links li {
	float: left;
	margin: 12px 0 0 0;
	padding: 0 10px;
	border-right: 1px solid #5d5d5d;
}
#footer ul.footer-links li:last-child { padding-right: 0; border-right: 0; }

#footer ul.footer-links a:link,
#footer ul.footer-links a:visited	{ color: #999999; text-decoration: none; }
#footer ul.footer-links a:hover,
#footer ul.footer-links a:active	{ color: #cccccc; text-decoration: underline; }


#footer p.legal {
	margin: 14px 0;
	font: 800 12px/13px Arial, Helvetica, sans-serif;
	color: #999999;
}

#footer a:link		{ color: #999999; text-decoration: underline; }
#footer a:visited	{ color: #999999; text-decoration: underline; }
#footer a:hover		{ color: #fff; text-decoration: underline; }
#footer a:active	{ color: #fff; text-decoration: underline; }


/* Desktops and laptops ----------- */
@media only screen and (min-width: 1025px) {
	
	body {
			background-position: 0 0;
	}
	
	#content h1 {
		font: 400 30px/32px Arial, Helvetica, sans-serif;
		padding: 0;
		margin: 0 0 20px 0;
		color: #f8f4f1;
	}
	#content h1.page-title {
		font: 400 30px/32px Arial, Helvetica, sans-serif;
		padding: 12px 0 0 35px;
		margin: -40px 0 1px -37px;
		background: url(../images/shared/icon-placeholder.png) top left no-repeat;
		text-align: left;
	}

	#content h1.page-title a { color: #fff; }
	
	#content h2 {
		font: 400 24px/32px Arial, Helvetica, sans-serif;
		padding: 0;
		margin: 0 0 40px 0;
		color: #ffffff;
	}
	
	#content h2.tagline {
		font: 400 24px/32px Arial, Helvetica, sans-serif;
		padding: 0;
		margin: 2px 0 22px 0;
		color: #f1956e;
		width: 245px;
		text-align: left;
	}
	
	#content {
		position: relative;
		margin-top: 114px;
		margin-bottom: 0;
		padding-top: 60px;
		padding-bottom: 0;
	}
	.left-col {
		float: left;
		width: 260px;
		margin-top: 0px;
		color: #FC6;
	}
	
	.right-col {
		float: right;
		width: 630px;
		color: #39F;
		margin-top: -100px;
	}
	.video-player {
		margin: 20px auto 23px auto;
		width: 630px;
		height: 364px;
	}
	#tier2 .right-col { 
		float: right;
		width: 620px;
		margin: -15px 0 0 0;
		padding: 15px 0 0px 10px;
		border-left: 1px solid #5a5a5a;
		border-top: none;
	}
	#tier2 .left-col {
		margin-top: 0;
		float: left;
		width: 260px;
	}
	#content ul {
		list-style-type: none;
		padding: 0 0 0 4px;
		margin: 0 0 15px 0;
		font: 400 14px/22px Arial, Helvetica, sans-serif;
		color: #cccccc;
	}
	#content ul.features-list {
		margin-bottom: 25px;
		width: 600px;
		float: left;
	}
	#content ul.video-links {
		font: 400 18px/20px Arial, Helvetica, sans-serif;
	}
	#content ul.video-links.col1 {
		float: left;
		width: 245px;
	}
	
	#content ul.video-links.col2 {
		float: left;
		width: 245px;
	}
	
	#content ul.video-links.col3 { 
		float: left;
		width: 245px;
	}
	
	#content ul.contact-info li.phone {
		margin: 0 0 0 -4px;
		padding: 0 10px 0 30px;
		float: left;
		width: 218px;
		font: 400 16px/22px Arial, Helvetica, sans-serif;
		color: #f1956e;
		background: url(../images/shared/icon-phone.png) no-repeat 1px 3px;
	}
	
	#content ul.contact-info li.email {
		margin: 0 0 1px -4px;
		float: left;
		width: 218px;
		font: 400 16px/22px Arial, Helvetica, sans-serif;
		background: url(../images/shared/icon-email.png) no-repeat 0 7px;
		padding: 0 10px 0 30px;
	}
}