/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
@charset "utf-8";
/*--------------------------------------------------
	REQUERIDO para ocultar el contenido de la pestaña no activa.
   ¡Pero no los esconda en la hoja de estilos de impresión!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
  
  
  
  
  /*---   Barra de debajo de los botones 
 border-bottom: 2px solid #fff;  ---*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border: 0px;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin-top: 30px;
 display:inline;
}


  /*---   Configurar Botones Inactivos   ---*/
ul.tabbernav li a
{
 padding: 3px 10px;
 margin-left: 3px;
 border: 3px solid #000;
 background: #2e6f64;
 text-decoration: none;
 font: 25px PirataT;
}

ul.tabbernav li a:link { color: #000; }
ul.tabbernav li a:visited { color: #000; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #59a6a0;
 border-color: #034f52;
}

ul.tabbernav li.tabberactive a
{
 background-color: #599ca6;
 border: 3px solid #034f52;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: #599ca6;
 border: 3px solid #034f52;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:none;
 border-top:0;

/* Si no desea cambiar el tamaño de la pestaña cada vez que cambia una pestaña
     Usted puede fijar una altura fija */

  /* Altura: 200px; */

  /* Si establece un desbordamiento de conjunto de altura fija en auto y obtendrá un
     Barra de desplazamiento cuando sea necesario */

  /* Desbordamiento: auto; */
}

/* Ejemplo de uso de un ID para establecer diferentes estilos para las pestañas de la página */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
 height:auto;
 overflow:auto;
}
.tabbertab {
 overflow:auto;
}

	
/* Moviles de pantalla pequeña */	
/* Moviles de pantalla pequeña */	
	
	@media screen and (max-width: 480px) and (min-width: 0px) and (orientation : portrait)  { /* pantalla en vertical */

			/* Botones */
					ul.tabbernav li a
					{
						padding: 10px 20px;
						font: 25px PirataT;
					}
					ul.tabbernav li{
						display:block;
					}
					
			/* Margen TODO */	
					.tabberlive {
						margin-top: 20px;
 width:98%;
					}
					
			/* Margen del contenido */	
					.tabberlive .tabbertab {
						margin-top: 0px;
					}
					
	}		
	@media screen and (max-width: 710px) and (min-width: 0px) and (orientation : landscape)  { /* pantalla en horizontal */

			/* Botones */
					ul.tabbernav li a
					{
						padding: 10px 20px;
						font: 25px PirataT;
					}
					ul.tabbernav li{
						display:block;
					}
					
			/* Margen TODO */	
					.tabberlive {
						margin-top: 20px;
 width:98%;
					}
					
			/* Margen del contenido */	
					.tabberlive .tabbertab {
						margin-top: 0px;
					}
					
	}	
	
/* Moviles de Pantalla Grande */	
/* Moviles de Pantalla Grande */	

	@media screen and (max-width: 545px) and (min-width: 481px) and (orientation : portrait)  { /* pantalla en vertical */

			/* Botones */
					ul.tabbernav li a
					{
						padding: 10px 20px;
						font: 25px PirataT;
					}
					ul.tabbernav li{
						display:block;
					}
					
			/* Margen TODO */	
					.tabberlive {
						margin-top: 20px;
 width:98%;
					}
					
			/* Margen del contenido */	
					.tabberlive .tabbertab {
						margin-top: 0px;
					}
					
	}		
	@media screen and (max-width: 1085px) and (min-width: 711px) and (orientation : landscape)  { /* pantalla en horizontal */

			/* Botones */
					ul.tabbernav li a{
						padding: 10px 20px;
						font: 40px PirataT;
					}
					ul.tabbernav li{
						display:block;
					}
					
			/* Margen TODO */	
					.tabberlive {
						margin-top: 20px;
 width:99%;
					}
					
			/* Margen del contenido */	
					.tabberlive .tabbertab {
						margin-top: 0px;
					}
					
					
	}