@charset "UTF-8";

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves. */
.Accordion {
	overflow: hidden;
	width:550px;
	margin-left: auto;
	margin-right: auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.*/
.AccordionPanel { margin: 0px;	padding: 0px; }

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.*/
.AccordionPanelTab {
	background-color: #AAA;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.*/
.AccordionPanelContent {
	overflow: auto;
	margin: 0px;
	padding: 0 0 0 15px;
	height: 100px;
}

/* 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-color: #FFF; font-weight:bold; }

/* 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: #EEEEEE; }
.AccordionPanelOpen .AccordionPanelTabHover { color: #000000; }

/* 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-color: #AAA; }

/* Appearance of the panel tab that is currently open when the Accordion has focus.*/
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #FFF; font-weight:bold; }