div {z-index:0;}
.hidden {display:none;}
 
div.horizontal_container {z-index:0;}
#panel01content, #panel01contentholder, #panel_01, #panel01 {z-index:10;}
#panel02content, #panel02contentholder, #panel_02, #panel02 {z-index:20;}
#panel03content, #panel03contentholder, #panel_03, #panel03 {z-index:30;}

/*
	Horizontal Accordion
*/

.horizontal_accordion_toggle {
	/* REQUIRED */
	float: left;	/* This make sure it stays horizontal */
	/* REQUIRED */
	display: block;
	width: 55px;
	height: 216px;
	/*background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;*/
	color: #ffffff;
	text-decoration: none;
	outline: none;
	cursor: pointer;
	margin: 0 1px 0 0;
}

.horizontal_accordion_toggle_active {
	/*background: ;
	border-right: 1px solid #fff;*/
}

.horizontal_accordion_content {
	/* REQUIRED */
/*	height: 100px;*/	/* We need to define a height for the accordion as it stretches the width */
	height: 216px;
	float: left;	/* This make sure it stays horizontal */
	/* REQUIRED */
	overflow: hidden;
	color: #444444;
}
	
/* Container styling*/
#horizontal_container {
	margin: 11px auto 1px auto;
	width: 948px;
	height: 216px;   
	overflow:hidden; 
	float:left;
	background-color: #f8f8f8;
}

#panel01 { background:url(../assets/images/home/panel01_handle.gif) top left no-repeat;}
#panel02 { background:url(../assets/images/home/panel02_handle.gif) top left no-repeat;}
#panel03 { background:url(../assets/images/home/panel03_handle.gif) top left no-repeat;}

#panel01 span.arrow_left, #panel02 span.arrow_left, #panel03 span.arrow_left, #panel01 span.arrow_right, #panel02 span.arrow_right, #panel03 span.arrow_right {  
	float:left;
	margin:198px 0 0 20px;
	width:14px;
	height:11px;
	background:url(../assets/images/home/panel01_arrow_left.gif) no-repeat top left;
}

#panel02 span.arrow_left { background-image:url(../assets/images/home/panel02_arrow_left.gif);}
#panel03 span.arrow_left { background-image:url(../assets/images/home/panel03_arrow_left.gif);}
#panel01 span.arrow_right { background-image:url(../assets/images/home/panel01_arrow_right.gif);}
#panel02 span.arrow_right { background-image:url(../assets/images/home/panel02_arrow_right.gif);}
#panel03 span.arrow_right  { background-image:url(../assets/images/home/panel03_arrow_right.gif);}

#panel01_handle span, #panel02_handle span, #panel03_handle span { display:none;}

#panel_01 img, #panel_02 img, #panel_03 img  { top:0px; left:56px; position:absolute; z-index:10;}

#panel_01:link, #panel_01:visited, #panel_01:active, #panel_02:link, #panel_02:visited, #panel_02:active, #panel_03:link, #panel_03:visited, #panel_03:active { 
	top:25px;
	left:0;
	position:absolute;
	width: 357px;
	height:auto;
	text-decoration:none;
	color: #FFFFFF;
	margin: 0;
	padding: 0;
	background:url(../assets/images/home/panel01_navarrow.gif) bottom right no-repeat #801a66;
	overflow:hidden;
}

	#panel_02:link, #panel_02:visited, #panel_02:active {color: #FFFFFF;background:url(../assets/images/home/panel02_navarrow.gif) bottom right no-repeat #002c73;}
	#panel_03:link, #panel_03:visited, #panel_03:active {color: #FFFFFF;background:url(../assets/images/home/panel03_navarrow.gif) bottom right no-repeat #fdb727;}

	#panel_01:hover { background:url(../assets/images/home/panel01_navarrow_ovr.gif) bottom right no-repeat #801a66;} 
	#panel_02:hover { background:url(../assets/images/home/panel02_navarrow_ovr.gif) bottom right no-repeat #002c73;} 
	#panel_03:hover { background:url(../assets/images/home/panel03_navarrow_ovr.gif) bottom right no-repeat #fdb727;} 

div.panel_holder { float:left; position:relative;}

#panel_01 span.head, #panel_02 span.head, #panel_03 span.head  { 
	/*float:left;*/ 
	position:absolute;
	top:0px;
	left:0px;
	font-size:3.6em; 
	color:#801a66; 
	background:url(../assets/images/home/panel01_main_bg.gif); 
	line-height:41px; 
	width:347px; 
	padding: 0 5px 0 5px;
	margin: 0 0 10px 0;
	letter-spacing:-.15pc;
	cursor:pointer;
	z-index:-10;
}
	
#panel_01 span.text, #panel_02 span.text, #panel_03 span.text { 
	float:left; 
	font-size:1.6em; 
/*	background:url(../assets/images/home/panel01_sub_bg.gif) repeat;
	background:url(../assets/images/home/panel01_navarrow.gif) bottom right no-repeat; */

	line-height:22px;
	width:331px; 
	padding: 0 21px 0 5px;
	margin: 42px 0 0 0;
	cursor:pointer;
	z-index:3;
}
	
/* ARROW now in the background of the text (JB) -
span.arrow_btn { position:absolute; bottom:11px; right:0px; width:21px; height:21px; background:url(../assets/images/home/panel01_navarrow.gif) no-repeat;}*/
	
/*panel 02*/	

#panel02_handle { 
	background:url(../assets/images/home/panel02_handle.gif) top left no-repeat;
}

/*#panel_02:link, #panel_02:visited, #panel_02:active { custom here}
#panel_02:hover {  background:#ff0;} 
*/

#panel_02 span.head { 
	color:#002c73; 
	background:url(../assets/images/home/panel01_main_bg.gif);
}

#panel_02 span.text { 
/*	background:url(../assets/images/home/panel02_sub_bg.gif) repeat; 
	background:url(../assets/images/home/panel02_navarrow.gif) bottom right no-repeat;*/

}

/*panel 03*/

#panel03_handle { 
	width:56px;
	background:url(../assets/images/home/panel03_handle.gif) top left no-repeat;
}

#panel03_handle span{ display:none;}

/*#panel_03:link, #panel_03:visited, #panel_03:active { left:57px; }
#panel_03:hover {  background:#ff0;} */

#panel_03 span.head { 
	color:#fdb727; 
	background:url(../assets/images/home/panel01_main_bg.gif); 
}
	
#panel_03 span.text { 
/*	background:url(../assets/images/home/panel03_sub_bg.gif) repeat;
	background:url(../assets/images/home/panel03_navarrow.gif) bottom right no-repeat; */

}
