@charset "UTF-8";

.Accordion {
	overflow: hidden;
}


.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

.AccordionPanelTab {
	background:url(../images/accordion.png) no-repeat top;
	margin: 0px;
	padding: 2px 25px 0 5px;
	cursor: pointer;
	height:32px;
	width:260px;
	line-height:14px;
	
}

.AccordionPanelTabBlue {
	background:url(../images/accordionblue.png) no-repeat top;
	margin: 0px;
	padding: 2px 25px 0 5px;
	cursor: pointer;
	height:32px;
	width:260px;
	line-height:14px;
}

.Label{
	display:table-cell;
	vertical-align:middle;
	height:30px;
	line-height:14px;
	margin: 0px;

}
.AccordionPanelTabYellow {
	background:url(../images/accordionYellow.png) no-repeat top;
	margin: 0px;
	padding: 2px 25px 0 5px;
	cursor: pointer;
	height:32px;
	width:260px;
	line-height:14px;

}


.AccordionPanelContent {

	overflow: auto;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	height: 190px;
	border-right:1px solid #0C0;
	border-left:1px solid #0C0;
	background:url(../images/linebottom.png) repeat-x bottom;
	display:block;
	width:287px;

}
.AccordionPanelContent span{
	padding:5px;
	display:block;
}
.AccordionPanelContentBlue span{
	padding:5px;
	display:block;
}
.AccordionPanelContentYellow span{
	padding:5px;
	display:block;
}
.AccordionPanelContentBlue {
	overflow: auto;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	height: 190px;
	border-right:1px solid #4483bd;
	border-left:1px solid #4483bd;
	background:url(../images/linebottom.png) repeat-x bottom;
	display:block;

}
.AccordionPanelContentYellow {

	overflow: auto;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	height: 190px;
	border-right:1px solid #d0d817;
	border-left:1px solid #d0d817;
	background:url(../images/linebottom.png) repeat-x bottom;
	display:block;

}

/* This is an example of how to change the appearance of the panel tab that is

 * currently open. The class "AccordionPanelOpen" is programatically added and removed

 * from panels as the user clicks on the tabs within the Accordion.

 */

.AccordionPanelOpen .AccordionPanelTab {
	background:url(../images/accordion.png) no-repeat bottom;
	color:#ffffff;
}

.AccordionPanelOpen .AccordionPanelTabBlue {
	background:url(../images/accordionblue.png) no-repeat bottom;
	color:#FFF;
}
.AccordionPanelOpen .AccordionPanelTabYellow {
	background:url(../images/accordionYellow.png) no-repeat bottom;
	color:#ffffff;
}
/* This is an example of how to change the appearance of the panel tab as the

 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added

 * and removed from panel tab containers as the mouse enters and exits the tab container.

 */

.AccordionPanelTabHover {

	color: #555555;

}

.AccordionPanelOpen .AccordionPanelTabHover {

	color: #555555;

}



/* This is an example of how to change the appearance of all the panel tabs when the

 * Accordion has focus. The "AccordionFocused" class is programatically added and removed

 * whenever the Accordion gains or loses keyboard focus.

 */

.AccordionFocused .AccordionPanelTab {

	background:url(../images/accordion.png) no-repeat top;
	color:#aa6633;
	line-height:14px;
	color:#000;

}

.AccordionFocused .AccordionPanelTabBlue {

	background:url(../images/accordionblue.png) no-repeat top;
	color:#000;
	

}
.AccordionFocused .AccordionPanelTabYellow {

	background:url(../images/accordionYellow.png) no-repeat top;
	color:#000;

}
/* This is an example of how to change the appearance of the panel tab that is

 * currently open when the Accordion has focus.

 */

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {

	background:url(../images/accordion.png) no-repeat bottom;
	color:#FFF;

}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTabBlue {

	background:url(../images/accordionblue.png) no-repeat bottom;
	color:#FFF;

}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTabYellow {

	background:url(../images/accordionYellow.png) no-repeat bottom;
	color:#FFF;

}
.AccordionPanelClosed{
	border:0px;
}