/****** Image Slider Menu ******/
.box1, .box2 {
	position:relative;
	float:left;
	width:705px;
	height:566px;
	background:#000;
}
.box2 {
	border-left:1px solid #fff;
}
.box1 h2, .box2 h2 {
	position:relative;
	font-size:1.5em;
	color:red;
	top:10px;
	left:15px;
	margin:0 0 40px 0;
	padding:0;
	text-transform:uppercase;
	font-weight:bold;
	z-index:999;
	visibility:hidden;
}
.box1 div p, .box2 div p {
position:relative;
top:30em;
width:300px;
margin:0 0 0 0;
padding:6px;
color:#f00;
background:#000;
font-weight:bold;
}
.photo0, .photo1, .photo2, .photo3 {
	position:absolute;
	width:705px;
	height:566px;
	background:#000;
}
.photo0 {
	background:url('../images/hph2/default.jpg');
}
.photo1 {
	background:url('../images/hph2/prepare.jpg');
}
.photo2 {
	background:url('../images/hph2/compete.jpg');
}
.photo3 {
	background:url('../images/hph2/recover.jpg');
}

a.button {
		position:relative;
		display:block;
		width:7.6em;
		color:white;
		text-transform:uppercase;
		font-size:1.2em;
		font-weight:bold;
		padding:13px 0 13px 13px;
		margin:0;
		background-image:url('../images/btn_bg_slideMenu.png');
		background-repeat:no-repeat;
		background-position:0 bottom;
		cursor:pointer;
}
a.button:link, a.button:visited {
		color:#fff;
		text-decoration:none;
		background-position:0px bottom;
		background-repeat:no-repeat;
}
a.button:hover, a.button:active, a.button:focus {
		color:#fff;
		text-decoration:none;
		background-position:-352px bottom;
		background-repeat:no-repeat;
}
.pos1, .pos2, .pos3, .pos4, .pos5, .pos6  {
left:1px;
}
.pos8, .pos9 {
left:1px;
}


/* recolour body areas for splash */
body.splash {
	background-color:#000;
}
body.splash #contentBlock {
	background:#000;
}
/******************************************************* Footer area - splash page has slightly different grid ***************************************************/
body.splash #footer {
	color:#fff;
	background-color:#000;
}
body.splash #footer a, body.splash #footer a:link, body.splash #footer a:visited {
	color:#fff;
}
body.splash #footer a:hover, body.splash #footer a:active, body.splash #footer a:focus {
	color:#ff1f00;
}

/******************************************************* Main splash content area ***************************************************/
#splashGrid {
	position:relative;
	display:inline;
	float:left;
	width:705px;
	border-width:1px 0 1px 1px;
	border-color:#fff;
	border-style:solid;
}
#splashGrid #splashPuffs li {
	float:left;
	width:186px;
}
#splashGrid #splashPuffs li a, #splashGrid #splashPuffs li a img {
	display:block;
}
/* secondary right hand puff areas */
#secondarySplash {
	float:left;
	display:inline;
	width:238px;
	_width:238px; /* TODO for ie6 please move to an ie6.css file after conditions are setup in the head for ie6 and ie7 */
	border-width:1px 1px 1px 1px;
	border-style:solid;
	border-color:#fff;
	padding:1px 1px 0 1px;
	background:#4E4E4E;
}
#secondarySplash div.rhPuff {
	padding:9px 18px 13px;
	_padding:9px 18px 13px; /* TODO for ie6 please move to an ie6.css file after conditions are setup in the head for ie6 and ie7 */
	background:#000;
	margin-bottom:1px;
}
#secondarySplash h2 {
	margin-bottom:2px;
	font-size:1.0em;
	font-weight:bold;
	color:#ff1f00;
}
#secondarySplash p {
	margin-bottom:3px;
	font-size:0.82em;
	line-height:1.16em;
	color:#fff;
}
#secondarySplash p a {
	display:block;
	margin-top:2px;
	text-decoration:underline;
}






/* Hero Tabs Container*/
#homePageHero {
float:left;
overflow:hidden;
width:705px; /* ie6 needs this */
height:566px; /* ie6 needs this */
}

.tabsWrapper {
	position:relative;
	width:705px;
	height:566px;
	padding:0;
	margin:0;
	background:#666; /* was url('../images/hero-dropedShadow1b.png') no-repeat right 0;*/
}

/* Tab content pannel typography */
.tabsWrapper div div h1 {
	position:relative;
	top:0px;
	left:0px;
	font-size:1.5em;
	line-height:1em;
	width:705px;
	height:35px;
	color:#ff1f00;
	margin:0px 0 0px 0;
	padding:15px;
	text-transform:uppercase;
	font-weight:bold;
	z-index:1000;
	background:transparent url('../images/btn_bg_slideMenu_heading.png') repeat-x 0 0;
	_background:none;
}
.tabsWrapper div div h2 {
	position:relative;
	top:0px;
	left:0px;
	width:676px;
	height:35px;
	font-size:1.5em;
	line-height:1em;
	color:#ff1f00;
	margin:0px 0 0px 0;
	padding:15px;
	text-transform:uppercase;
	font-weight:bold;
	z-index:999;
	background:transparent url('../images/btn_bg_slideMenu_heading.png') repeat-x 0 0;
	_background:none;
}
.tabsWrapper div div p {
	font-size:93%;
	padding:15px;
	color:#ccc;
	line-height:1.3em;
	background:url('../images/bg_tranc1.png') 0 0;
}
.tabsWrapper div div p a, .tabsWrapper div div p a:link, .tabsWrapper div div p a:visited {
	color:#fff;
	font-weight:bold;
}
.tabsWrapper div div p a:hover, .tabsWrapper div div p a:focus {
	color:#ff1f00;
	text-decoration:none;
}
.tabsWrapper div div p.pos1 {
left:20px;
position:absolute;
top:60px;
width:220px;
/*
margin:-7px 250px 0 11em;
*/
}
.tabsWrapper div div p.pos2 {
	position:absolute;
	left:29em;
	top:3.9em;
	width:220px;
/*
margin:-8px 50px 0 31em;
*/
}
.tabsWrapper div div p.pos3 {
	position:absolute;
	left:11em;
	top:18.9em;
	width:220px;
}
.tabsWrapper div div p.pos4 {
	position:absolute;
	left:29em;
	top:18.9em;
	width:220px;
}


/* Tab bar/container and Tabs */
#HeroNav {
	position:relative;
	top:3.65em;
	left:0;
	padding:0px;
	width:1px; /*needed to make tabs verticle make wider for horizontal tabs*/
	z-index:99;
}
#HeroNav li {
	float:left;
	display:block;
	padding-bottom:2px;
	/*margin-right:-0.3em;*/
}
#HeroNav li a {
	position:relative;
	left:5px;
	width:6em;
	padding:15px 0 15px 15px;
	display:inline-block;
	text-align:left;
	font-size:128%;
	font-weight:bold;
	text-transform:uppercase;
	background-color:transparent;
	background-image:url('../images/btn_bg_slideMenu.png');
	background-repeat:no-repeat;
	background-position:0 bottom;
	z-index:99;
	cursor:pointer;
}
/* first tab - heroItem1 */
#HeroNav li a#heroItem1:link, #HeroNav li a#heroItem1:visited {
		color:#fff;
		text-decoration:none;
		background-position:0 bottom;
		background-repeat:no-repeat;
}
#HeroNav li a#heroItem1:focus, #HeroNav li a#heroItem1:hover {
		color:#fff;
		text-decoration:none;
		background-position:-352px bottom;
		background-repeat:no-repeat;
}
#HeroNav li a#heroItem1.selected {
		color:#fff;
		text-decoration:none;
		background-position:-352px bottom!important;
		background-repeat:no-repeat;
}

/* middle tabs - heroItem2 & heroItem3 */
#HeroNav li a#heroItem2:link, #HeroNav li a#heroItem2:visited, 
#HeroNav li a#heroItem3:link, #HeroNav li a#heroItem3:visited {
		color:#fff;
		text-decoration:none;
		background-position:0px bottom;
		background-repeat:no-repeat;
}
#HeroNav li a#heroItem2:focus, #HeroNav li a#heroItem2:hover, 
#HeroNav li a#heroItem3:focus, #HeroNav li a#heroItem3:hover {
		color:#fff;
		text-decoration:none;
		background-position:-352px bottom;
		background-repeat:no-repeat;
}
#HeroNav li a#heroItem2.selected, 
#HeroNav li a#heroItem3.selected {
		color:#fff;
		text-decoration:none;
		background-position:-352px bottom!important;
		background-repeat:no-repeat;
}
/* last tab - heroItem4 */
#HeroNav li a#heroItem4:link, #HeroNav li a#heroItem4:visited {
		color:#fff;
		text-decoration:none;
		background-position:0px bottom;
		background-repeat:no-repeat;
}
#HeroNav li a#heroItem4:focus, #HeroNav li a#heroItem4:hover {
		color:#fff;
		text-decoration:none;
		background-position:-352px bottom;
		background-repeat:no-repeat;
}
#HeroNav li a#heroItem4.selected {
		color:#fff;
		text-decoration:none;
		background-position:-352px bottom!important;
		background-repeat:no-repeat;
}

/* Tab Content Areas */
#heroItemContent1, 
#heroItemContent2, 
#heroItemContent3, 
#heroItemContent4 {
	position:absolute;
	top:0;
	left:0;
	width:705px;
	height:566px;
	padding:0;
	background:none;
	z-index:98;
}
#heroItemContent1 div, 
#heroItemContent2 div, 
#heroItemContent3 div, 
#heroItemContent4 div {
	position:absolute;
	top:0;
	left:0;
	color:#fff;
	width:705px;
	height:566px;
	padding:0px;
	margin:0;
	background:none;
	border:0px solid red;
}

/* Tab content feature message positions */