@charset "UTF-8";

/* SpryCollapsiblePanel.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*Este es el selector para el contenedor principal CollapsiblePanel. Para nuestro
  * estilo por defecto, el CollapsiblePanel es responsable de la elaboración de los BORDES
  * alrededor del widget.
  *
  * Si desea limitar el ancho del widget CollapsiblePanel, establecer un ancho de
  * el contenedor CollapsiblePanel de forma predeterminada, nuestro CollapsiblePanel se expande horizontalmente para llenar con el texto y  * contenido que se ubique dentro todo el espacio disponible.
  *
  * El nombre de la clase ("CollapsiblePanel") utilizado en este selector no es necesario
  * para hacer funcionar al widget. Puede utilizar cualquier nombre de clase que desee en el estilo del contenedor
  * CollapsiblePanel.*/
  
.CollapsiblePanel {
	margin: 0px;
	padding: 0px;
	/*border: 1px solid #D4A843;*/
}

 /* Este es el selector para el CollapsiblePanelTab. Este contenedor alberga
  * el TÍTULO del panel. Este también es el contenedor sobre el que el usuario hace clic
  * para abrir o cerrar el panel.
  *
  * El nombre de la clase ("CollapsiblePanelTab") utilizado en este selector no es necesario
  * para hacer funcionar al widget. Puede utilizar cualquier nombre de clase que desee en el estilo del panel
  * CollapsiblePanel.*/
.CollapsiblePanelTab, .CollapsiblePanelTab_blue, .CollapsiblePanelTab_turq, .CollapsiblePanelTab_verde, .CollapsiblePanelTab_naranja, .CollapsiblePanelTab_cafe{
	font-family: 'CabinBold';
	font-size:18px;
	/*border: solid 1px #ccc;*/
	height:25px;
	margin: 0px;
	padding: 10px 10px 5px 10px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	font-weight: bold;
	color: white;
	/*background:url(collapsible_stay.jpg) bottom right #3C970E;*/
	text-shadow: 0px 1px 0px #000;/*efecto realzado de texto*/
	
}

/*estas son clases personalizadas para los fondos d elas tab del colapsible*/
.CollapsiblePanelTab_blue{background:url(collapsible_stay_azulosc.jpg) no-repeat top right;}
.CollapsiblePanelTab_turq{background:url(collapsible_stay_turq.jpg) no-repeat top right;}
.CollapsiblePanelTab_verde{background:url(collapsible_stay_verde.jpg) no-repeat top right;}
.CollapsiblePanelTab_naranja{background:url(collapsible_stay_naranja.jpg) no-repeat top right;}
.CollapsiblePanelTab_cafe{background:url(collapsible_stay_cafe.jpg) no-repeat top right;}


 /* Este es el selector de ÁREA DE CONTENIDO del CollapsiblePanel. Es importante señalar que
  * Nunca debe colocar ningún padding en el área de contenido si va a
  * utilizar la animación de abrir/cerrar del CollapsiblePanel. Poner un padding no igual a 0 sobre el elemento del contenido
  * puede causar que el CollapsiblePanel crezca abruptamente en altura mientras los páneles se animan.
  *
  * El nombre de la clase ("CollapsiblePanelContent") utilizado en este selector no es necesario
  * puede hacerlo funcionar con cualquier otro nombre*/
.CollapsiblePanelContent {
	background:#E9DCC9;
	margin: 0px;
	padding-bottom:0px;
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
	color: #333;
	border:#8b6239 2px solid;
}

 /* Una etiqueta de anclaje puede ser utilizada en el interior de un CollapsiblePanelTab para que el
  * anillo de enfoque del teclado aparezca * dentro * de la ficha en lugar de en torno a la ficha.
  * Este es un ejemplo de cómo hacer que el texto en la etiqueta de ancla luzca 
  * como un texto no-ancla (normal).
  */
.CollapsiblePanelTab a {
	color: #030;
	text-decoration: none;
	background:url(collapsible_stay.jpg) bottom right #3C970E;
}
  /* Este es un ejemplo de cómo cambiar el aspecto de la ficha del panel que está actualmente abierto
  * La clase "CollapsiblePanelOpen" se agrega y quita programáticamente
  * de los páneles en cuanto el usuario hace clic en las pestañas del CollapsiblePanel.
  */
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background:url(collapsible_stay.jpg) bottom right #3C970E;
	color:#FFF;
}

 /* Este es un ejemplo de cómo cambiar el aspecto de la ficha del panel en cuanto el
  * mouse pasa sobre él. La clase "CollapsiblePanelTabHover" se agrega y quita programáticamente 
  * de los contenedores del panel de pestañas en cuanto ratón entra y sale de la pestaña.
  */
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
	color: #FFF;
	background:url(collapsible_hover.jpg) repeat-x bottom right black;
}

 /* Este es un ejemplo de cómo cambiar el aspecto de todas las pestañas del panel cuando el
  * CollapsiblePanel está enfocado. La clase "CollapsiblePanelFocused" clase es agregada y eliminada mediante programación
  * siempre que el CollapsiblePanel está enfocado o no por el teclado.
  */
.CollapsiblePanelFocused .CollapsiblePanelTab {
	color: #FFF;
	background:url(collapsible_stay.jpg) bottom right #3C970E;
}

.CollapsiblePanelFocused .CollapsiblePanelTabOpen {
	color: #FFF;
	background:url(collapsible_stay.jpg) bottom right #3C970E;
}

