/* CSS Document */

/* Este é o seletor para o recipiente principal do Accordion. Para nosso estilo padrão,
 * foi extraida as bordas left, right, and bottom. A borda top do Accordion
 * será renderizada pelo primeiro AccordionPanelTab que nunca se move.
 *
 * Se você quiser confinar a largura do widget do Accordion, ajuste uma largura sobre
 * o recipiente do Accordion. Por default, nosso accordion expande horizontalmente à suficiência
 * acima do espaço disponível.
 *
 * O nome da classe("Accordion") usada neste seletor não é necessário
 * para fazer a função do widget. Você pode usar todo o nome que da classe você quiser denominar o
 * Accordion.
 */
.accordion {
	border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;
	overflow: hidden;
}

/* este é o seletor para o recipiente de AccordionPanel que abriga
 * apainele a aba e uma área do índice do painel. Não renderiza visualmente,
 * certifique-se de que tem margin e padding estão zeradas. .
 *
 * O nome da classe("Accordion") usada neste seletor não é necessário
 * para fazer a função do widget. Você pode usar todo o nome que da classe você quiser denominar o
 * Accordion. 
 */
.accordionpanel {
	margin: 0px;
	padding: 0px;
}

/* este é o seletor para o AccordionPanelTab. Casa deste recipiente o título para o painel
 Este é também o recipiente para abrir um painel específico
 *
 * O nome da classe("Accordion") usada neste seletor não é necessário
 * para fazer a função do widget. Você pode usar todo o nome que da classe você quiser denominar o
 * Accordion.
 */
.accordionpaneltab {
	background-color: #A8BBCF;
	border-top: solid 1px black;
	border-bottom: solid 1px gray;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}

/* Este é o seletor para a área satisfeita de um painel. É importante anotar isso 
 * você deve nunca pôr todo o padding sobre a área satisfeita do painel se você planear
 * use os animations do painel dos Accordions. Coloque um non-zero padding no índice
 * a área puder fazer com que o accordion cresça abruptamente na altura quando os painéis animate.
 *
 * Qualquer um que denomina um Accordion *DEVE* especificar uma height no painel Accordion
 *
 * O nome da classe("Accordion") usada neste seletor não é necessário
 * para fazer a função do widget. Você pode usar todo o nome que da classe você quiser denominar o
 * Accordion. 
 */
 .accordionpanelcontent {
	overflow: auto;
	margin: 0px;
	padding: 0px;
	height: 50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	font-style: normal;
}

/* este é um exemplo de como mudar a aparência da aba do painel que é
 * abra atualmente. A classe "AccordionPanelOpen" programatically é adicionada e removida
 * dos painéis como o usuário clica sobre as abas dentro do Accordion
 */
.accordionpanelopen .accordionpaneltab {
	background-color: #A8BBCF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}

/* este é um exemplo de como mudar a aparência da aba do painel como
 * mouse hovers(sobre) o alvo. A classe "AccordionPanelTabHover" é adicionada programatically
 * e removido dos recipientes da aba do painel com o mouse entra e retira no recipiente da aba.
 */
.accordionpaneltabhover {
	color: #555555;
}
.accordionpanelopen .accordionpaneltabhover {
	color: #555555;
}

/* este for um exemplo de como mudar a aparência de todas as abas do painel quando
 * Accordion tem o foco. A classe de "AccordionFocused" programatically é adicionada e removida 
 * sempre que o Accordion ganha ou perde o foco do teclado.
 
 */
.accordionfocused .accordionpaneltab {
	background-color: #A8BBCF;
}

/* Este é um exemplo de como mudar a aparência da aba do painel que é
 * abra atualmente quando o acordeão tem o foco.
 */
.accordionfocused .accordionpanelopen .accordionpaneltab {
	background-color: #A8BBCF;
}