body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
}

/*****************************/
/*   fotos dentro de enlace:
	Ya no seria necesario aplicar el <img border="0" ... dentro de cada img
 */
a{outline:none;}
a img {border:0px;}
a {text-decoration: none; color: #163F5A}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: underline}
header {}
section {}
img {max-width: 100%}
/************************** TABLAS ****************************************/

/* tabla simple  sin espaciado, sin bordes de columbas. Borde bajo grueso para encabezado de tabla
	el resto de filas se separan con una linea simple
	Tabla con head y body (para listado de carro compra simple)

	Ejemplo

	<table>
               <thead>
                  <tr>
                   <th>Un t�tulo</th>
                   <th>Otro T�tulo</th>
 		  </tr>
                </thead>
                  <tbody>
                     <tr>
                       	<td>
  			...
                         </td>
                         <td> 
               		 ...
                         </td>  
                       </tr>
                    </tbody>
                </table>

*/

table {
	border: 0px; margin-bottom: 20px; border-collapse: collapse;
  	border-spacing: 0; text-align: left; width: 100%;
}
table thead {
	font-size: bold; text-align: left; border-bottom: 2px solid #ABABAB; background-color: #DEDEDE 
	}
tr {
	border-bottom: 1px solid #DEDEDE;
            background-color: #DEDEDE
	}
th {
	margin: 0px; padding: 10px
}
td {
	border-bottom: 1px solid #DEDEDE; text-align: left; padding: 5px 10px
}

table tfoot tr, table tfoot td {border:0px; text-align: right; }

.tabla-alterna tbody tr:nth-child(odd) td,
.tabla-alterna tbody tr:nth-child(odd) th {
  background-color: #eee;
}
.tabla-alterna h1, .tabla-alterna h2 {margin: 5px !important; font-size: 140% !important; color:#000 !important; text-decoration: underline}

/******************** utiles **************************/

/* margen */

.separar_iz20 {margin-left:20px}
.separar_iz10 {margin-left:10px}
.separar_de10 {margin-right: 10px}
.separar_de20 {margin-right: 20px}
.separar_iz5 {margin-left:5px}
.separar_de5 {margin-right: 5px}
.separar_top5 {margin-top: 5px}


.separar_bot20 {margin-bottom: 20px}
.separar_bot10 {margin-bottom: 10px}
.separar_top20 {margin-top: 20px}
.separar_top10 {margin-top: 10px}
.separar-top100 {margin-top: 100%}

.subir_20 {margin-top: -20px;}
.subir_10 {margin-top: -10px;}
/* separacion en porcentajes */
/*
    iz33_100 es un margen de un 33% solamente es util para dise�os completamente fluidos
*/
.separar_iz5_100 {margin-left: 5%}
.separar_iz33_100 {margin-left: 33%}
.separar_iz10_100 {margin-left: 10%}
.separar_iz20_100 {margin-left: 20%}
.separar_iz40_100 {margin-left: 40%}

.rellenar_iz5_100 {padding-left: 5%}
.rellenar_de5_100 {padding-right: 5%}
.rellenar_iz33_100 {padding-left: 33%}
.rellenar_iz10_100 {padding-left: 10%}
.rellenar_iz20_100 {padding-left: 20%}
.rellenar_iz40_100 {padding-left: 40%}

/* padding */

.rellenar_iz10 {padding-left: 10px}
.rellenar_iz15 {padding-left: 15px}
.rellenar_iz20 {padding-left: 20px}
.rellenar_de10 {padding-right: 10px}
.rellenar_de20 {padding-right: 20px}
.rellenar_bot20 {padding-bottom: 20px}
.rellenar_bot10 {padding-bottom: 10px}
.rellenar_top10 {padding-top: 10px}
.rellenar_top20 {padding-top: 20px}
.rellenar_top5 {padding-top: 5px}

.rellenar_20 {padding: 20px}
.rellenar_10 {padding: 10px}
.rellenar_5 {padding: 5px}

/* alinear textos */

.alinear_der {text-align: right}
.centrar_texto {text-align: center}
.alinear_iz {text-align: left}
.justificar_texto {text-align: justify}

/* contenedor estandar de 980px para web de 1024 */

.centrar { width:980px; margin:0px auto}
.contenedor {width: 100%; float: left;}



/*******************************************************************/
/****************** columnas ***************************************/
/*******************************************************************/

/* Columnas para contenedores:
    una columna33 significa que podemos colocar 3 columnas (al 33%) iguales 
    dentro de un contenedor
*/

.columna5 {width: 5%; min-width: 40px}
.columna10 {width: 10%; min-width: 80px}
.columna20 {width: 20%; }
.columna25 {width: 25%; }
.columna30 {width: 30%; }
.columna33 {width: 33.33%;}
.columna40 {width: 40%;}
.columna45 {width: 45%;}
.columna50 {width: 50%; }
.columna55 {width: 55%; }
.columna60 {width: 60%; }
.columna66 {width: 66%; }
.columna70 {width: 70%;}
.columna75 {width: 75%; }
.columna80 {width: 80%;}
.columna90 {width: 90%; }
.columna95 {width: 95%; }

/************************* Avisos ******************************/
/***************************************************************/
.aviso_ok{
    background-color:#DDFFDD; color: #215E21; padding: 10px 15px; margin: 10px 0px; display: block; font-size: 12px; font-weight: bold;
}
.aviso_error{
    background-color:#FFCCCC; color: #993333; padding: 10px 15px; margin: 10px 0px; display: block; font-size: 12px; font-weight: bold;
}
.ok, .ok:link {color: #215E21; font-weight: bold;}
.error, .error:link {color: #993333; font-weight: bold;}

/* listado de articulos en escaparate de maximo 780px + menu lateral ( web de 1024 de ancho )*******/


/* Ejemplo de uso (6 columnas, con sombra en la foto y borde redondeado )

<div class="cont_articulo6">
<div class="foto_articulo6 sombra borde borde_redondo">
				  <a href="#">
				  <img src="url_foto" />
				  </a>
				  </div>
                  
				  <div style="padding:4px; font-size:11px">
				  <a href="#">Texto ..........</a>
				  </div>
</div>
*/


.sombra {
	box-shadow: 0px 2px 6px 1px #cccccc; 
}

/* 6 columnas */
.cont_articulo6 {
	float:left; width:120px; margin:5px; height:130px; margin-top:0px
}

.foto_articulo6 {
	float:left; width:110px; padding:5px; margin-bottom:5px; height:76px; text-align:center;
	
}

.foto_articulo6 img {
	max-width:110px;
	height:76px
}


/* 5 columnas */
.cont_articulo5 {
	float:left; width:140px; margin:5px; height:170px; margin-top:0px
}

.foto_articulo5 {
	float:left; width:130px; padding:5px; margin-bottom:5px; height:90px; text-align:center;
	
}

.foto_articulo5 img {
	max-width:130px;
	height:90px
}

/* 4 columnas */

.cont_articulo4 {
	float:left; width:170px; margin:5px; height:190px; margin-top:0px
}

.foto_articulo4 {
	float:left; width:160px; padding:5px; margin-bottom:5px; height:115px; text-align:center;
	
}
.foto_articulo4 img {
	max-width:160px;
	height:115px
}

/* 3 columnas */

.cont_articulo3 {
	float:left; width:230px; margin:5px; height:240px; margin-top:0px
}

.foto_articulo3 {
	float:left; width:220px; padding:5px; margin-bottom:5px; height:140px; text-align:center;
	
}
.foto_articulo3 img {
	max-width:220px;
	height:140px
}

/****************************************************************/
/******************* menus **************************************/
/****************************************************************/


nav .horizontal {padding: 10px 0px; margin: 0px}
nav .horizontal li {
    list-style: none;
    float: left; padding: 0px 10px;
}

.desplegable nav ul li ul {display: none; max-width:200px; margin-left: -20px}
.desplegable nav ul li ul li {float: none; padding: 15px 10px; clear: both}
.desplegable nav ul li a:hover ul, 
.desplegable nav ul li:hover ul {
    position: absolute; 
    display: block; 
    z-index: 100; 
            
    -webkit-animation-name: aparecer;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: aparecer;
    -moz-animation-duration:1s;
    -moz-animation-fill-mode: forwards;
    
    animation-name: aparecer;
    animation-duration:1s;
    animation-fill-mode: forwards;    
}



.lista-alterna {list-style: none; margin: 5px; padding: 0px}
.lista-alterna li {padding: 5px }
.lista-alterna li:nth-child(odd) {
  background-color: #DDD;
}

/***************************************************/
/******** horizontal subrayado con separacion *****************/

.subrayado li {
    text-align: center;
    margin: 0px 10px;
    padding-bottom: 4px;
    border:0px;
    border-bottom: 3px transparent;
}
.subrayado li:hover {
     
    border-bottom: 3px solid #cc9933
}
/********************************************************************/
/*              bordes                                              */
/********************************************************************/

.borde_sup {border-top: 1px solid #cccccc}

.borde {
	 border:1px solid #CCCCCC; 
}

.borde_redondo {
	 border-radius:6px;
}
.borde_redondo4px {
    border-radius:4px;
}
.borde_redondo3px {
    border-radius:3px;
}
.borde_redondo2px {
    border-radius:2px;
}

.texto_gris {color: #666666 !important}
.texto_blanco {color:#fff !important}
.texto_negro {color:#000 !important}
.texto_azul {color:#0e196a !important}
.borde_1px {border:1px solid}
.borde_iz_1px {border-left: 1px solid}
.borde_de_1px {border-right: 1px solid}
.borde_top_1px {border-top: 1px solid}
.borde_iz_2px {border-left: 2px solid}
.borde_de_2px {border-right: 2px solid}
.borde_top_2px {border-top: 2px solid}
.borde_bot_2px {border-bottom: 2px solid}

/***********************************************************************/
/*           botones para formularios **********************************/
/***********************************************************************/



/************************************************************************/
/**************  Posicionado de cajas ***********************************/
/************************************************************************/

/* Rellenos, margenes, float,..... 
*/

.derecha { float:right !important}
.izquierda {float:left !important}
.limpiar {clear:both}

/******************************************/
/********* Brillos y transparencias *******/
/******************************************/

.aclarar {opacity: 1}
.aclarar:hover {opacity: 0.8}

.brillar {opacity: 0.7}
.brillar:hover {opacity: 1}


/****************************************************************************/
/**********             ANIMACIONES                               ***********/
/****************************************************************************/


.aparecer {
    
    display: block;
    -webkit-animation-name: aparecer;
    -webkit-animation-duration:1.5s;
    -webkit-animation-fill-mode: forwards;
    
    -moz-animation-name: aparecer;
    -moz-animation-duration:1.5s;
    -moz-animation-fill-mode: forwards;
    
    animation-name: aparecer;
    animation-duration:1.5s;
    animation-fill-mode: forwards;
}
.aparecer2 {
    
    display: block;
    -webkit-animation-name: aparecer;
    -webkit-animation-duration:1.5s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 1.5s;
    
    -moz-animation-name: aparecer;
    -moz-animation-duration:1.5s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-delay: 1.5s;
    
    animation-name: aparecer;
    animation-duration:1.5s;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}
.aparecer3 {
    
    display: block;
    -webkit-animation-name: aparecer;
    -webkit-animation-duration:1.5s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 3s;
    
    -moz-animation-name: aparecer;
    -moz-animation-duration:1.5s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-delay: 3s;
    
    animation-name: aparecer;
    animation-duration:1.5s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}

@-webkit-keyframes aparecer 
{
    from{opacity:0.1; }
    to{opacity:1;}
}
@-moz-keyframes aparecer
{
    from{opacity:0.1;}
    to{opacity:1;}
}
@keyframes aparecer
{
    from{opacity:0.1;}
    to{opacity:1;}
}

/***********************************************************************/
/********** CAJA MODAL *************************************************/
/***********************************************************************/

.formulario_flotante {width:80%; max-width: 800px; min-height: 100px; max-height: 620px; overflow: auto; background-color: #fff; margin: 50px auto; margin-bottom: 0px; padding:30px; margin-top: 80px; border:3px solid #0c3167; overflow: auto; }
.formulario_flotante_p {width:400px; max-width: 800px; min-height: 100px; max-height: 620px; overflow: auto; background-color: #fff; margin: 150px auto; margin-bottom: 0px; padding:30px; border:3px solid #0c3167; overflow: auto; }


.ocultar {display: none}

.caja_desaparece
{
	display: none;
	margin-bottom: 20px;
	background-color: #DCDCDC;
	border-top: 2px solid #B4B4B4;
	border-bottom: 5px solid #B4B4B4;
	border-left: 1px solid #B4B4B4;
	border-right: 1px solid #B4B4B4;
	padding: 5px; 
        
        
}
.flotante {position:fixed; width:100%; height: 100%; top:0; left: 0; z-index:100; border: 0px; padding: 0px; background: none;}
.formulario_modal {
    box-shadow: 2px 2px 2px 2px #666; width:440px; margin: 100px auto; margin-bottom: 0px;  padding:20px; border:3px solid #4779ba; overflow: auto;
     background-color: #fff;   
    
        -webkit-animation-name: aparecer;
        -webkit-animation-duration:1s;
        -webkit-animation-fill-mode: forwards;

        -moz-animation-name: aparecer;
        -moz-animation-duration:1s;
        -moz-animation-fill-mode: forwards;
    
}
.flotante .caja_grande {width: 460px; height: 340px}
.flotante .caja_peque {width: 460px; height: 240px}

/**************************************************/
/****** importado de terceros  ********************/

.tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  padding: 5px;
  font-size: 11px;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: visible;
}

.tooltip.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.tooltip.top {
  margin-top: -3px;
}

.tooltip.right {
  margin-left: 3px;
}

.tooltip.bottom {
  margin-top: 3px;
}

.tooltip.left {
  margin-left: -3px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-color: #000000;
  border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-right-color: #000000;
  border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-left-color: #000000;
  border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #000000;
  border-width: 0 5px 5px;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  width: 236px;
  padding: 1px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.popover.top {
  margin-top: -10px;
}

.popover.right {
  margin-left: 10px;
}

.popover.bottom {
  margin-top: 10px;
}

.popover.left {
  margin-left: -10px;
}

.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
}

.popover-content {
  padding: 9px 14px;
}

.popover-content p,
.popover-content ul,
.popover-content ol {
  margin-bottom: 0;
}

.popover .arrow,
.popover .arrow:after {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover .arrow:after {
  z-index: -1;
  content: "";
}

.popover.top .arrow {
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #ffffff;
  border-width: 10px 10px 0;
}

.popover.top .arrow:after {
  bottom: -1px;
  left: -11px;
  border-top-color: rgba(0, 0, 0, 0.25);
  border-width: 11px 11px 0;
}

.popover.right .arrow {
  top: 50%;
  left: -10px;
  margin-top: -10px;
  border-right-color: #ffffff;
  border-width: 10px 10px 10px 0;
}

.popover.right .arrow:after {
  bottom: -11px;
  left: -1px;
  border-right-color: rgba(0, 0, 0, 0.25);
  border-width: 11px 11px 11px 0;
}

.popover.bottom .arrow {
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border-bottom-color: #ffffff;
  border-width: 0 10px 10px;
}

.popover.bottom .arrow:after {
  top: -1px;
  left: -11px;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  border-width: 0 11px 11px;
}

.popover.left .arrow {
  top: 50%;
  right: -10px;
  margin-top: -10px;
  border-left-color: #ffffff;
  border-width: 10px 0 10px 10px;
}

.popover.left .arrow:after {
  right: -1px;
  bottom: -11px;
  border-left-color: rgba(0, 0, 0, 0.25);
  border-width: 11px 0 11px 11px;
}

/***********************************************/
/************ FUENTES **************************/
/***********************************************/

@font-face {
    font-family: 'ArialNarrow';
    src: url('../fuentes/arialn-webfont.eot');
    src: url('../fuentes/arialn-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fuentes/arialn-webfont.woff') format('woff'),
         url('../fuentes/arialn-webfont.ttf') format('truetype'),
         url('../fuentes/arialn-webfont.svg#ArialNarrow') format('svg');
    font-weight: normal;
    font-style: normal;

}