/* ------------------------------------------- 
proyecto:    T-invito.com
fecha creación:       13/11/2009
diseño y desarrollo: doctus ltda

Este documento utiliza una convención de nombres estructural.
------------------------------------------- */

/*Links*/
a, a:hover
{
    color: #FF663A;
}


/*LOGIN
Estilos asociados con la sección de autenticación de usuarios
*/

/*Contenedor del login*/
#contenedor-login
{
    width: 350px;
    margin: 0 auto;
    padding-top: 20px;
}


/*Edite esta sección para cambiar el botón acceder del login*/
.boton-login input
{
    background-attachment:fixed; 
    background-position:bottom right;
    width: 149px;    
    height:25px;
    background:#fff url(images/boton_login.gif) no-repeat bottom right;
    cursor: pointer;    
    border:none;
}



/*En caso de no utilizar una imagen y desea que aparezca el enlace acceder, edite esta sección*/
.boton-login span
{
    visibility: hidden;
}

/*Si desea editar el enlace o agregar algún efecto cuando se pasa el mouse por encima
edite esta sección*/
.boton-login input:hover
{
    text-decoration: none;
    color:White;
    border:none;
}





/* BUSCADOR

Atención: Es recomendable cambiar aquéllas propiedades que sólo afecten 
aspectos de diseño, tales como imagen de fondo, color de texto, etc.
No altere aquéllas propiedades que afectan el posicionamiento del buscador.

------------------------------------------- */

/*Esta sección es el contenedor de todo lo que tiene que ver con la barra de búsqueda */
#barra-busqueda
{
    background-image: url(  'images/buscador_busqueda-fondo.gif' );
    background-position: center top;
    background-repeat: no-repeat;
    height: 36px;
    margin-top: 10px;
    font-size: 16px;
    color: #435222;
    font-weight: bold;
    padding-top: 6px;
    padding-left: 15px;
    position: relative;
}

/*Esta sección afecta el texto buscar que se encuentra ubicado en la parte izquierda del buscador*/
#barra-busqueda .texto-buscar
{
    display: block;
    float: left;
    width: 80px;
    text-align: center;
    padding-top: 0px;
}


/*Esta sección afecta las opciones de búsqueda incluyendo los filtros por catergorías
y la caja de texto de búsqueda. */
#barra-busqueda .opciones-busqueda
{
    display: block;
    float: left;
    position: relative;
    width: 600px;
    padding-right: 20px;
    text-align: center;
}


/*Esta sección aplica estilos a la lista desplegable de las categorías de búsqueda*/
#barra-busqueda .opciones-busqueda .categorias-busqueda
{
    width: 215px;
    padding-left: 5px;
    font-size: 11px;
}


/*Esta sección altera el estilo de cada una de las opciones de la lista desplegable de las categorías de búsqueda*/
#barra-busqueda .opciones-busqueda .categorias-busqueda option
{
    padding-left: 5px;
}

/*Esta sección aplica el estilo a la caja de texto donde se ingresa el término de búsqueda.*/
#barra-busqueda .opciones-busqueda .caja-busqueda
{
    width: 345px;
    height: 16px;
    font-size: 11px;
    padding-left: 5px;
}

/*Imagen de fondo que se utiliza como botón para el buscador*/
#barra-busqueda .opciones-busqueda .boton-buscar
{
    position: absolute;
    right: -25px;
    height: 23px;
    background-image: url(  'images/buscador_boton-buscar.gif' );
    background-repeat: no-repeat;
    background-color: Transparent;
    border:none;
    width:50px;
    cursor:pointer;
}

/*Si en lugar de una imagen desea que solamente salga el texto Buscar, puede editar la siguiente sección*/
#barra-busqueda .opciones-busqueda .boton-buscar span
{
    visibility: hidden;
}

#barra-busqueda .opciones-busqueda a
{
    text-decoration: none;
}




/*Edite esta sección para alterar el estilo del estado del login, por ejemplo: el texto iniciar sesión, o el nombre
del usuario autenticado*/
#barra-busqueda #estado-login
{
    display: block;
    float: left;
    width: 270px;
    text-align: center;
    padding-top: 0px;
}

/*Edite esta sección para alterar los estilos aplicados a los links de inicio de sesión o en caso de estar
autenticado el usuario el nombre de este.*/
#barra-busqueda #estado-login a, #barra-busqueda #estado-login a:visited
{
    color: #425625;
    text-decoration: none;
    cursor: pointer;
}


/*FILTRO BUSCADOR
 Estilo asociado al filtro que es mostrado cuando se utiliza el buscador, donde
los resultados pueden ser filtrados.
*/

.filtro-resultado-busqueda
{
    padding: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
}

/*Filtro mostrado en la sección de categorías, permite al usuario filtrar los productos
por cantidad de fortunas*/

.filtro-fortunas
{
    padding: 15px;
    padding-top: 7px;
    font-size: 15px;
}


/*

   Estilos generales

*/

/*Edite esta sección para crear un estilo para todos los textos que se van a transformar a mayúscula,
tenga en cuenta que si va a editar esta sección debe respetar la convención de que efectivamente lo que hará
esta clase es capitalizar textos. */
.mayuscula
{
    text-transform: capitalize;
}

/*Esilo aplicado a textos de explicación*/
.texto-explicativo
{
    color: #C3B3C3;
}

/*Alinea un texto a la derecha*/
.alineacion-derecha
{
 text-align:right;    
}

/*Estilo aplicado al contenedor del botón atrás*/
.contenedor-boton-atras
{
    /*text-align:right;*/
    margin-top:10px;
        
}

/*Estilo aplicado al botón volver atrás*/
.contenedor-boton-atras .boton-atras
{
    background-image:url('images/boton_volver.gif');
    background-repeat:no-repeat;
    float:right;
    height:35px;
    margin-top:0;
    width:110px;
    margin-right:5px;
}

.contenedor-boton-atras .boton-atras span
{
   visibility:hidden;    
}

.contenedor-boton-atras .boton-atras a,.contenedor-boton-atras .boton-atras a:hover
{
    text-decoration:none;    
    height:35px;
    width:110px;
    display:block;
}




/*Imagen que se coloca al botón imprimir utilizado generalmente en las secciones

   > mis transacciones
   > mis pedidos
   > historial de pagos
   > pedidos sin pagar

*/

/*Esta sección coloca la imagen de fondo del botón imprimir*/
.boton-imprimir
{
    background-image:url('images/boton_imprimir.gif'); 
    background-repeat:no-repeat;   
    float:right;
    height:35px;
    margin-top:0;
    width:110px;  
}

/*Edite esta sección para que en lugar de utilizar la imagen del botón imprimir salga el texto 
del enlace con la palabra imprimir*/
.boton-imprimir span
{
  visibility:hidden;
}

/*Estilo asociado al enlace*/
.boton-imprimir a,.boton-imprimir a:hover
{
 text-decoration:none;
 width:110px;  
 height:35px;
 display:block;
}



/*Estilo aplicado al texto con énfasis*/
.enfasis
{
 font-size:20px;font-weight:bold;    
}

/*Recuadro de total de registros*/
/*Estilo asociado a los recuadros que muestran el total de registros*/
.total-registros
{
    background-color: #eee;
    border: solid 2px #aaa;
    padding: 12px;
    margin-top: 9px;
    margin-bottom: 9px;
    text-align: right;
}


/*********************************
Menú principal de supracategorías
**********************************/

#contenedor-izquierdo ul.menu-supracategorias
{
    /*width: 195px;*/
    /*background-color:Red;*/
    padding:0px;
    _margin-left:0px;   
}

#contenedor-izquierdo li.menu-supracategorias
{
    background-image: url(  'images/menu_fondo-opcion.gif' );
    display: block;
    width: 180px;
    height: 25px;
    padding-left: 15px;
    padding-top: 5px;
    color: White;
    font-weight: bold;
    margin-bottom: 0px;
    position: relative;
    z-index: 100;
    cursor: pointer;
    font-size: 14px;
    background-repeat: no-repeat;
    list-style:none;
	*margin-left:-30px;
	_margin-left:0;
   /* left: -32px;*/
}

#contenedor-izquierdo .menu-categorias
{
    display: none;
    margin: 0;
    width: 180px;
    z-index: 200;
    position: absolute;
    top: -16px;
    left: 160px;
    background-image: url(  'images/menu_categoria-superior.gif' );
    background-repeat: no-repeat;
    background-position: top right;
    padding-top: 15px;
    padding-left: 32px;
}

#contenedor-izquierdo .menu-categorias ul
{
    list-style: none;
}

#contenedor-izquierdo .menu-categorias ul li
{
    cursor: pointer;
    display: block;
    padding-left: 10px;
    padding-bottom: 4px;
}

#contenedor-izquierdo .menu-categorias ul li a
{
    color: #ff6600;
    font-size: 12px;
}


.flecha-menu
{
    background-image: url(  'images/menu_flecha.gif' );
    height: 18px;
    background-repeat: no-repeat;
    display: block;
    background-position: left;
    position: relative;
    top: 0;
    left: 0;
}


#contenedor-izquierdo .menu-categorias-fondo
{
    background-image: url(  'images/menu_categoria-fondo.gif' );
    background-position: right top;
}

#contenedor-izquierdo .menu-categorias-inferior
{
    background-image: url(  'images/menu_categoria-inferior.gif' );
    display: block;
    background-position: bottom right;
    height: 16px;
    background-repeat: no-repeat;
}


/*contenedor derecha*/
#contenedor-derecha .banner
{
    width: 210px;    
    margin-bottom: 5px;
}


#contenedor-derecha .link-home
{
    background-image: url(   'images/logo/logo-home.jpg' ) !important;
    background-repeat: no-repeat;
    background-position: right center;
    color: #515625 !important;
    height: 25px !important;
    padding-top: 7px !important;
    width: 150px;
    padding-right: 45px;
    text-align: right;
    margin-bottom: 10px;
}

#contenedor-derecha .link-home a
{
    color: #515625 !important;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}


#contenedor-derecha .link-cumplimiento
{
    background-image: url(   'images/logo/cumplimiento.gif' ) !important;
    background-repeat: no-repeat;
    background-position: right center;
    color: #515625 !important;
    height: 25px !important;
    padding-top: 7px !important;
    width: 150px;
    padding-right: 45px;
    text-align: right;
    margin-bottom: 10px;
}

#contenedor-derecha .link-cumplimiento a
{
    color: #515625 !important;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}


#contenedor-derecha .link-contactenos
{
    background-image: url(   'images/logo/logo-contacto.jpg' ) !important;
    background-repeat: no-repeat;
    background-position: right center;
    color: #515625 !important;
    height: 25px !important;
    padding-top: 7px !important;
    width: 150px;
    padding-right: 45px;
    text-align: right;
    margin-bottom: 10px;
}




#contenedor-derecha .link-contactenos a
{
    color: #515625 !important;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

#contenedor-derecha .link-salir
{
    background-image: url(   'images/logo/logo-salir.jpg' ) !important;
    background-repeat: no-repeat;
    background-position: right center;
    color: #515625 !important;
    height: 25px !important;
    padding-top: 7px !important;
    width: 150px;
    padding-right: 45px;
    text-align: right;
    margin-bottom: 10px;
}


#contenedor-derecha .link-pedidos
{
    background-image: url(   'images/mis-pedidos.gif' ) !important;
    background-repeat: no-repeat;
    background-position: right center;
    color: #515625 !important;
    height: 25px !important;
    padding-top: 7px !important;
    width: 150px;
    padding-right: 45px;
    text-align: right;
    margin-bottom: 10px;
}


#contenedor-derecha .link-salir a
{
    color: #515625 !important;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}




/*CONTENEDOR CENTRAL*/



#contenedor-central h2
{
    background-image: url(  'images/h2.gif' );
    background-position: left top;
    padding-left: 47px;
    width: 505px;
    color: #425625;
    font-size: 25px;
    font-weight: normal;
    height: 34px;
    font-weight: normal;
    margin: 0 auto;
    margin-bottom: 10px;
    text-align: left;
}





/*MENSAJES CREADOS POR EL SISTEMA 
  EDITE LAS SIGUIENTES SECCIONES PARA CAMBIAR LA FORMA EN QUE SE VEN LOS MENSAJES
  QUE MUESTRA EL SISTEMA, LOS MENSAJES SON: ÉXITO, ERROR Y ALERTA.
*/

/*edite esta sección para cambiar la forma cómo se ve el mensaje de éxito*/
#contenedor-central .mensaje-tinvito-exito
{
    padding: 15px;
    border: 2px solid #009933;
    margin: 0 auto;
    font-size: 14px;
    color: #009933;
    text-align: left;
    margin-bottom: 10px;
    font-weight: bold;
    display: none;
    background-color: #F5FAF5;
    list-style-type: circle;
    list-style-position: inside;
}

/*edite esta sección para cambiar la forma cómo se ve el mensaje de error*/
#contenedor-central .mensaje-tinvito-error
{
    padding: 15px;
    border: 2px solid #BF0000;
    margin: 0 auto;
    font-size: 14px;
    color: #BF0000;
    text-align: left;
    margin-bottom: 10px;
    font-weight: bold;
    display: none;
    background-color: #F7F2F2;
    list-style-type: circle;
    list-style-position: inside;
}

/*Edite esta sección para cambiar la forma cómo se ve el mensaje de alerta*/
#contenedor-central .mensaje-tinvito-alerta
{
    padding: 15px;
    border: 2px solid #FFF641;
    margin: 0 auto;
    font-size: 14px;
    color: #FF9900;
    text-align: left;
    margin-bottom: 10px;
    font-weight: bold;
    display: none;
    background-color: #FFFAEA;
    list-style-type: circle;
    list-style-position: inside;
}


/*PIE DE PÁGINA*/

/*Edite esta sección para cambiar el pie de página*/
#pie-pagina
{
    background-image: url(  'images/pie.gif' );
    height: 25px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    color: #333;
    padding-top: 7px;
    margin-top: 12px;
    margin-bottom: 8px;
    font-weight: bold;
}

/*Edite esta sección para cambiar el estilo aplicado a los links del pie de página*/
#pie-pagina a
{
    font-size: 11px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: #333;
}


/*CUADROS GENÉRICOS
   
  MUCHAS SECCIONES EN TINVITO SE ENCUENTRAN DENTRO DE UN CONTENEDOR CON PUNTAS REDONDEADAS, POR EJEMPLO: 
  EL EMPLEADO DEL MES Y OTRAS SECCIONES.
  EN LAS SIGUIENTES SECCIONES ENCONTRARÁ LAS CLASES QUE LE PERMITIRÁN CAMBIAR LA APARIENCIA DE ESTOS

*/


/*Esta sección coloca la imagen que se repite al medio del cuadro genérico*/
.cuadro-generico
{
    width: 201px;
    margin: 0 auto;
    background: transparent url(  'images/cuadro-generico_medio.jpg' ) repeat-y;
}

/*Edite esta sección para cambiar el estilo de las imágenes que estén ubicadas dentro del cuadro genérico*/
.cuadro-generico img
{
    margin: 0 auto;
    display: block;
    background: #fff;
    padding: 10px;
    width: 150px;
   
}

/*Estilo aplicado a los enlaces que están dentro de un cuadro genérico
que no se desee mostrar un enlace*/
.esconder-enlace a
{
    text-decoration:none;
    color:White;
    
}

/*Edite esta sección para cambiar la imagen superior del cuadro genérico*/
.cuadro-generico-superior
{
    margin-top: 10px;
    background: transparent url(  'images/cuadro-generico-superior.jpg' ) no-repeat;
    width: 180px;
    padding: 7px 10px 7px 10px;
    font-size: 14px;
    text-align: center;
    color: #FE8300;
    font-weight: bold;
}


/*Edite esta sección para cambiar la imagen colocada en la sección inferior del cuadro genérico*/
.cuadro-generico-inferior
{
    background: transparent url(  'images/cuadro-generico_inferior.jpg' ) no-repeat;
    width: 200px;
    height: 23px;
    _width: 200px;
    background-position: bottom;
}


/*SECCIÓN DE PAUTA*/
#pauta
{
    margin-top: 20px;
    width: 200px;
}


/*CUADRO FORTUNAS
ESTA ES LA SECCIÓN DE ESTILOS PARA EL CUADRO QUE MUESTRA LAS FORTUNAS DEL USUARIO
*/

.cuadro-fortunas
{
    width: 200px;
    height: 130px;
    padding: 9px 17px 17px 17px ;
    _padding: 9px 2px 17px 17px ;
    font-weight: bold;
    background-repeat: no-repeat;
    background-image: url(  'images/fortunas_fondo.jpg' );
   
}


/*Edite esta sección para cambiar el estilo del texto de tus fortunas*/
.cuadro-fortunas .texto-tus-fortunas
{
    color: #95B739;
}


/*Edite esta sección para cambiar el estilo del texto de fortunas disponibles */
.cuadro-fortunas .texto-fortunas-disponibles
{
    color: #FF6600;
}



/*
   
Carrito de compras
  
*/


/*Edite esta sección para cambiar el estilo del recuadro del carrito de compras*/
#carrito-compras
{
    width: 205px;
    height: 200px;
    padding-top: 10px;
    background-image: url(  'images/carrito_fondo.gif' );
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

/*Edite esta sección para cambiar el botón de comprar carrito de compras*/
#carrito-compras #boton-comprar a
{
    text-align: center;
    background-image: url(  'images/carrito_boton-comprar.gif' );
    background-position: center center;
    background-repeat: no-repeat;
    background-color: Transparent;
    height: 25px;
    width: 177px;
    display: block;
    position: relative;
    left: 15px;
}

/*Edite esta opción si desea en lugar de mostrar una imagen mostrar el texto Comprar carrito*/
#carrito-compras #boton-comprar a span
{
    _visibility: hidden;
    display: none;
    _display: block;
}

/*Contenedor de botones en la sección de compra del carrito*/
#botones-comprar-carrito
{
    display: block;
    margin: 0 auto;
    width: 310px;
}


/*
  SECCIÓN DE NOTICIAS
*/


/*Edite esta opción para modificar el estilo asociado al recuadro que es mostrado
cuando no existe una noticia principal para el cliente. */
.sin-noticia-principal
{
    text-align: center;
    background-image: url(  'images/noticias_sinNoticiaPrincipal.png' );
    background-position: center;
    background-repeat: no-repeat;
    height: 128px;
    background-color: White;
    width: 150px;
    margin: 0 auto;
    display: block;
}

/*Edite esta sección si en lugar de mostrar una imagen referente a que no existen noticias, desea que salga el texto
Ver noticias */
.sin-noticia-principal span
{
    visibility: hidden;
}


/*Contenedor de una noticia*/
.noticia
{
    background-color: #fff;
    padding: 2px;
    width: 180px;
    margin: 0 auto;
}


/*Estilo aplicado al título de una noticia*/
.titulo-noticia
{
    text-align: center;
}

/*Estilo del enlace del título del enlace de la noticia*/
.titulo-noticia a
{
}

/*Estilo del enlace del título del enlace de la noticia cuando el mouse 
es pasado sobre este*/
.titulo-noticia a:hover
{
}


/*Estilo aplicado a la imagen mostrada en la noticia principal*/

#imagen-noticia-principal
{
    text-align: center;
    padding: 10px;
}


/*Estilo aplicado a la fecha de la noticia*/
.fecha-noticia
{
    text-align: right;
    margin-top: 5px;
    font-style: italic;
    color: #BBBBBB;
    font-size: 12px;
}


/*ENLACES DE ACCESO PANEL DERECHO
 EN ESTA SECCION SE ENCUENTRAN LOS ESTILOS PARA LOS ENLACES
UBICADOS EN LA PARTE DERECHA DE LA PAGINA, DONDE SE ENCUENTRA
EL LINK DE PAGINA DE INICIO, CONTACTENOS, ETC
*/

/*Contenedor generico que especifica los atributos de la imagen de fondo
de los enlaces*/
#contenedor-derecha .link
{
    background-repeat: no-repeat;
    background-position: right center;
    color: #515625 !important;
    height: 25px !important;
    padding-top: 7px !important;
    width: 150px;
    padding-right: 45px;
    text-align: right;
    margin-bottom: 10px;
}

/*Estilo generico aplicado a todos los enlaces*/
#contenedor-derecha .link a
{
    color: #515625 !important;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}


/*Edite esta seccion para cambiar la imagen de fondo del enlace al home*/
#contenedor-derecha .link-home
{
    background-image: url(  'images/link_home.jpg' ) !important;
}

/*Edite esta seccion para cambiar la apariencia del texto de enlace al home*/
#contenedor-derecha .link-home a
{
}

/*Edite esta seccion para cambiar la apariencia del texto del enlace al home cuando
el mouse es pasado sobre este enlace*/
#contenedor-derecha .link-home a:hover
{
}


#contenedor-derecha .link-cumplimiento
{
    background-image: url(  'images/link_cumplimiento.gif' ) !important;
}

#contenedor-derecha .link-cumplimiento a
{
}

#contenedor-derecha .link-cumplimiento a:hover
{
}


#contenedor-derecha .link-contactenos
{
    background-image: url(  'images/link_contacto.jpg' ) !important;
}


#contenedor-derecha .link-contactenos a
{
}

#contenedor-derecha .link-contactenos a:hover
{
}

#contenedor-derecha .link-salir
{
    background-image: url(  'images/link_salir.jpg' ) !important;
}

#contenedor-derecha .link-salir a
{
}

#contenedor-derecha .link-salir a:hover
{
}

#contenedor-derecha .link-editarinformacion{
	background-image:url('images/link_editarInformacion.gif') !important;
}

#contenedor-derecha .link-puedocomprar{
	background-image:url('images/ICanBuy.gif') !important;
}

#contenedor-derecha .link-historialfortunas{
	background-image:url('images/MyFortunes.gif') !important;
}

#contenedor-derecha .link-pedidos{
	background-image: url(   'images/mis-pedidos.gif' ) !important;
	
}

/*ESTILOS GENERALES*/

/*Estilo aplicado a los mensajes que se encuentra vacios.*/
.mensaje-vacio
{
    font-size: 14px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    color: #425625;
    border: solid 1px #bbb;
    margin-bottom:10px;
    
}

/*En caso de mostrarse el mensaje dentro de una tabla, se le quita el borde*/
tr .mensaje-vacio
{
    border:none;
}


/*Contenedor general utilizado en recuadros informativos que contiene un encabezado y un texto descriptivo
Utilizado principalmente en la sección términos y condiciones, y en la sección de confirmación de los datos de 
un pedido*/

.recuadro-general
{
background-color:#EEEEEE;
border:2px solid #AAAAAA;
margin-bottom:9px;
margin-top:9px;
padding:12px;
}


/*Estilo aplicado al título del recuadro general*/
.recuadro-general h3
{
background-color:#D0D0D0;
padding:5px 5px 5px 10px;
}



/*Confirmar pedido*/

/*Estilo asociado al botón confirmar pedido*/
#boton-confirmar-pedido
{
    background-image:url('images/boton_aceptar.gif');
    background-repeat:no-repeat;
    width:110px;
    display:block;
    
}

#boton-confirmar-pedido span
{
    visibility:hidden;
}

#boton-confirmar-pedido a
{
    height:30px;
    text-decoration:none;
    display:block;
    
}



/*Contenedor de barra indicadora utilizada cuando se está procesando 
un pedido*/
#imagen-cargando
{
   text-align:center;
}

#imagen-cargando-fondo
{
    background-image:url('images/barra-progreso.gif');
    width:220px;
    height:19px;
    background-repeat:no-repeat;
    margin:0 auto;
}

/*Si en lugar de utilizar una imagen desea que el sistema muestre el texto espere por favor . . .
edite esta sección*/
#imagen-cargando-fondo span
{
    visibility:hidden;
}

/*Contenedor de los botones para confirmar el pedido*/
#botones-confirmar-pedido
{
    width:250px;
    margin:0 auto;
    display:block;
}


/*Sección de éxito por la compra
Esta es la página que agradece al usuario por la compra del pedido en caso de que no haya
realizado la compra mediante la modalidad pago mixto.
*/

#agradecer-compra
{
 width: 494px; margin: 0 auto;    
}

/*Imagen que es mostrada cuando se agradece por la compra al usuario*/

#imagen-agradecer-compra
{
    background-image:url('images/pedido_agradecer-compra.jpg');
    width:494px;
    height:385px;
    background-repeat:no-repeat;
    
}

/*Sino utiliza una imagen puede dejar el texto que muestra el sistema editando esta sección*/
#imagen-agradecer-compra span
{
 visibility:hidden;    
}


/*Estilos de paginacion del catalogo de productos*/
.paginacion-productos
{
    text-align: center;
}


/*Estilo aplicado a los enlaces de paginacion*/
.paginacion-productos a:link, .paginacion-productos a:visited
{
    display: inline-block;
    margin-top: 7px;
    padding: 1px 2px;
    color: #59B842;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
}

/*Estilo aplicado a la pagina actual */
.paginacion-productos span span
{
    display: inline-block;
    padding: 1px 2px;
    color: #425625;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
}



/*-------------------------------

ESTILO APLICADO A LOS PRODUCTOS

-------------------------------- */

/*Estilo aplicado al fondo de un producto*/
.producto
{
    background-image: url(    'images/producto_fondo.gif' );
    background-repeat: no-repeat;
    background-position: top center;
    width: 166px;
    _width: 150px;
    overflow: hidden;
    float: left;
    padding: 10px;
    height: 365px;
    /*height:300px;*/
    margin-bottom: 5px;
}

.producto-solo-fortunas
{
    background-image: url(    'images/producto_fondo-solo-fortunas.gif' );
    background-repeat: no-repeat;
    background-position: top center;
    width: 166px;
    _width: 158px;
    overflow: hidden;
    float: left;
    padding: 10px;
    height: 300px;
    margin-bottom: 5px;
}



.producto-corporativo
{
    background-image: url(    'images/producto_fondo-corporativo.gif' );
    background-repeat: no-repeat;
    background-position: top center;
    width: 166px;
    _width: 158px;
    overflow: hidden;
    float: left;
    padding: 10px;
    height: 300px;
    margin-bottom: 5px;
}


/*Estilo aplicado a la foto del producto*/
.foto, .producto .foto img, .producto-corporativo .foto, .producto-corporativo .foto img,.producto-solo-fortunas .foto, .producto-solo-fortunas .foto img
{
    display: block;
    width: 130px;
    height: 130px;
    margin: 0 auto;
}

.panel-nombre, .producto-corporativo .panel-nombre
{
    height: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom-style: dashed;
    border-bottom-width: thin;
    border-bottom-color: #C0C0C0;
}

/*Estilo aplicado al nomre de un producto*/
.nombre-producto, .producto-corporativo .nombre-producto
{
    color: #ff6600;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
}


/*Estilo aplicado a la marca de un producto*/
.nombre-marca, .producto-corporativo .nombre-marca
{
    color: #666666;
    font-size: 12px;
    font-weight: normal;
}

/*Estilo aplicado a la referencia de un producto*/
.referencia, .producto-corporativo .referencia
{
    color: #666666;
    font-size: 12px;
    font-weight: normal;
    height: 30px;
    display: block;
}


/*Estilo aplicado al precio de un producto*/
.precio-producto, .producto-corporativo .precio-producto
{
    height: 32px;
    text-align: center;
    padding-top: 5px;
}

/*Texto aplicado al numero de fortunas*/
.precio-producto .numero-fortunas, .producto-corporativo .precio-producto .numero-fortunas
{
    color: #FF6600;
    font-size: 21px;
}

/*Estilo aplicado a la seccion con plata de un producto*/
.precio-plata, .producto-corporativo .precio-plata
{
    height: 32px;
    text-align: center;
    padding-top: 5px;
}

/*Estilo aplicado a la palabra pesos*/
.precio-plata .texto-pesos
{
    color:#475B28;
    font-size:12px;
}

/*Estilo aplicado al texto fortunas o al nombre personalizado por el cliente corporativo*/
.precio-plata .texto-fortunas-producto
{
     color:#475B28;
    font-size:12px;
}


/*Estilo aplicado al texto del precio de un producto*/
.precio-plata span, .producto-corporativo .precio-plata span
{
    color: #ff6600;
    font-size: 12px;
}

/*Estilo aplicado al texto fortunas del producto*/
.texto-fortunas
{
    color: #475B28 !important;
    font-size: 18px !important;
}



/*Estilo asociado al boton para agregar un producto al carrito 
de compras*/
.agregar-carrito, .producto-corporativo .agregar-carrito
{
    text-align: center;
}


/*Estilo aplicado al boton de agregar al carrito con solo fortunas*/
.agregar-carrito .agregar-carrito-solo-fortunas, .producto-corporativo .agregar-carrito .agregar-carrito-solo-fortunas
{
    margin-bottom: 5px;
    background-image: url('images/carrito_boton-agregar-fortunas.gif');
    width: 160px;
    height: 25px;
    display: block;
    cursor: pointer;
    background-color: Transparent !important;
}

.agregar-carrito .agregar-carrito-solo-fortunas span, .producto-corporativo .agregar-carrito .agregar-carrito-solo-fortunas span
{
    display: none;
    _visibility: hidden;
    _display: block;
}


/*Estilo aplicado al boton de pago mixto*/
.agregar-carrito .agregar-carrito-mixto, .producto-corporativo .agregar-carrito .agregar-carrito-mixto
{
    margin-bottom: 5px;
    background-image: url('images/carrito_boton-agregar-fortunas-mixto.gif');
    width: 160px;
    height: 28px;
    display: block;
    cursor: pointer;
    background-color: Transparent;
    background-repeat:no-repeat;
}

.agregar-carrito .agregar-carrito-mixto span, .producto-corporativo .agregar-carrito .agregar-carrito-mixto span
{
    _visibility: hidden;
    display: none;
    _display: block;
}


/*
   DETALLE DE PRODUCTO
   EN ESTA SECCIÓN ENCONTRARÁ EL ESTILO APLICADO AL DETALLE DE UN PRODUCTO.

*/

/*Edite esta sección para cambiar el estilo aplicado al contenedor de la foto del producto mostrada
en el detalle de este*/
#foto-producto
{
    border: 1px solid #D9D9D9;
    float: left;
    width: 370px;
    height: 370px;
    margin-bottom: 10px;
}

/*Edite esta sección para colocar estilos a la imagen como tal del producto en el detalle*/
#foto-producto img
{
    width: 370px;
    height: 370px;
}


/*Esta sección contiene los enlaces ubicados al lado de la foto del producto en el detalle*/
#enlaces-detalle-producto
{
    margin-left: 375px;
    font-size: 30px;
    height: 370px;
}

/***************
   Enlace zoom
****************/

/*Estilo asociado al botón de zoom de la imagen*/
#enlaces-detalle-producto .producto-zoom
{
    background-image: url('images/detalle-producto_zoom.jpg');
    width: 142px;
    background-repeat: no-repeat;
    background-color: Transparent;
    cursor: pointer;
    display: block;
    height: 40px;
}

/*Si desea que en lugar de que aparezca la imagen salga el texto zoom, edite esta sección*/
#enlaces-detalle-producto .producto-zoom span
{
    visibility: hidden;
}

/*Estilo asociado al link del enlace del zoom*/
#enlaces-detalle-producto .producto-zoom a
{
    text-decoration: none;
    display: block;
    color:White;
}

/*Esta sección es el estilo asociado al botón para agregar el producto al carrito sin pago mixto*/
#enlaces-detalle-producto .producto-al-carrito
{
    background-image: url('images/detalle-producto_agregar-carrito.gif');
    width: 142px;
    background-repeat: no-repeat;
    background-color: Transparent;
    cursor: pointer;
    height: 40px;
}

/*Edite esta sección si desea que en lugar de la imagen del botón para agregar 
el producto al carrito salga el texto agregar al carrito */
#enlaces-detalle-producto .producto-al-carrito span
{
    visibility: hidden;
}

/*Edite esta sección para cambiar el estilo del enlace del botón de agregar
al carrito con solo fortunas*/
#enlaces-detalle-producto .producto-al-carrito a
{
    text-decoration: none;
    color:White;
}

/*Esta sección es el estilo asociado al botón para agregar el producto al carrito con pago mixto*/
#enlaces-detalle-producto .producto-al-carrito-mixto
{
    background-image: url('images/detalle-producto_pago-mixto.gif');
    width: 142px;
    background-repeat: no-repeat;
    background-color: Transparent;
    cursor: pointer;
    height: 40px;
}

/*Edite esta sección si desea que en lugar de la imagen del botón para agregar 
el producto al carrito salga el texto agregar al carrito */
#enlaces-detalle-producto .producto-al-carrito-mixto span
{
    visibility: hidden;
}

/*Edite esta sección para cambiar el estilo del enlace del botón de agregar
al carrito con solo fortunas*/
#enlaces-detalle-producto .producto-al-carrito-mixto a
{
    text-decoration: none;
}

/*Esta sección contiene el estilo asociado a la descripción del producto*/
#descripcion-producto
{
    font-size: 12px;
    margin-top: 10px;
}



/*CAMPAÑA conTREEbute

Estilos asociados a la sección conTREEbute
*/

/*Mensaje que es mostrado al usuario en el carrito de compras en caso 
de que tenga activada la campaña*/
.mensaje-contreebute
{
    padding: 15px;
    border: 2px solid #009933;
    margin: 0 auto;
    font-size: 14px;
    text-align: left;
    margin-bottom: 10px;
    font-weight: bold;
    display: none;
    background-color: #fff;
    list-style-type: circle;
    list-style-position: inside;
}


/*Página contáctenos*/

/*Contenedor del formulario de la página contáctenos*/
#contenedor-contactenos
{
    width: 55%;
    float: left;
    border-right: solid 1px #555;
    padding-left: 5px;
    padding-right: 7px;
}

/*Campos nombre y apellido del formulario de contáctenos*/
#contenedor-contactenos .campo-formulario
{
    width: 200px;
}

/*Campo comentario en sección contáctenos*/
#contenedor-contactenos .campo-formulario-comentario
{
    width: 200px;
}

/*Estilo asociado al botón enviar del formulario*/
#contenedor-contactenos .boton-enviar-contactenos
{}

/*información de contacto al servicio al cliente de t-invito*/
#datos-servicio-al-cliente
{
    width: 40%;
    float: left;
    padding-left: 10px;
}


/*COMPRAR CARRITO DE COMPRAS
   Estilos asociados a la sección de confirmación del carrito de compras
*/

/*Edite esta sección para cambiar el botón de comprar el carrito de compras*/
.boton-comprar-carrito
{
    background-image: url('images/carrito_boton-comprar-carrito.gif');
    background-repeat: no-repeat;
    width: 110px;
    display: block;
}

/*Si desea que en lugar de utilizar la imagen, se muestre un enlace
para comprar el carrito puede editar esta sección*/
.boton-comprar-carrito span
{
    visibility: hidden;
}

/*Estilos asociados al enlace del botón comprar carrito*/
.boton-comprar-carrito a
{
    text-decoration: none;
    display: block;
    height: 35px;
}

/*Página dirección*/

/*Contenedor del listado de direcciones*/
#contenedor-direcciones
{
	padding: 10px 10px 10px 5px;	
	_padding: 10px 0px 10px 0px;	
	background: #fff;
}

/*Campo largo del formulario*/
#nueva-direccion .campo-formulario-comentario
{
  width:300px;
  height:200px;
}

/*Estilo aplicado a las cajas de texto del formulario*/
#nueva-direccion input
{
  width:200px;    
}

/*Contenedor de una dirección*/

.contenedor-direccion
{
    background-color: #E6E6E6;
    padding: 5px;
    padding-bottom: 25px;
    width: 260px;
    height: 185px;
    position: relative;
    border: solid 1px #ccc;
    margin-bottom: 5px;
    margin: 0 auto;
}

/*Estilo asociado al botón para seleccionar una dirección*/
#boton-seleccionar-direccion
{
    background-image:url('images/direccion_enviar.gif');
    width:180px;
    background-repeat:no-repeat;
    display:block;
}

/*Estilo aplicado a los botones de una dirección 
  > botón enviar a esta dirección
  > botón borrar
*/
#botones-direccion
{
 width:255px;
 top:180px;  
 position:absolute;
}

/*Estilo aplicado a una nueva direccion*/
#nueva-direccion
{
    margin-top:10px;
}

#boton-seleccionar-direccion span
{
   visibility:hidden; 
}

#boton-seleccionar-direccion a
{
    text-decoration:none;
    display:block;
    height:30px;
}






/*****************************

Estilos aplicado a las tablas

 > Resumen de productos en el carrito
 > Detalle de transacciones
 > Mis pedidos
 > Mi historial


******************************/

.tabla
{
    padding: 2px;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    border: 0px solid #FFFFFF;
    border-collapse: collapse;
}
.tabla th
{
    border-bottom: solid 1px #036;
    border-top: solid 1px #036;
    padding-left: 2px;
    background-color: #2079cf;
    color: #fff;
    text-align: left;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

.tabla td
{
    text-align: center;
}

.tabla td a:link, .tabla td a:visited
{
    color: #FF6600 !important;
}

.tabla td a:hover
{
    color: #666 !important;
}

/*Estilo aplicado a las filas impares de las tablas*/
.tabla .fila-impar td
{
    background-color: #EFEFEF;
}


/*Estilo utilizado cuando no existen registros en la tabla*/
.tabla .no-registros td
{
    background-color: #ECECEC;
    border: solid 1px #aaa;
    text-align: center;
    display: block;
    padding: 10px;
    font-size: 14px;
}


.tabla .no-registros td a
{
    font-size: 14px;
}



/*Formulario general*/

.formulario-generico
{
    border: solid 8px #aaa;
    font-size: 13px;
    margin: 0 auto;
}
.formulario-generico a
{
    font-weight: bold;
    color: #FF6600;
}
.formulario-generico th, .formulario-generico td
{
    border: none;
    background-color: #eee;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 6px;
}

.formulario-generico .encabezado
{
    width: 1% !important;
    padding-right: 8px;
    padding-left: 5px;
}

.formulario-generico .caja-texto
{
    width: 300px;
}


/*Detalle de una noticia*/

.noticia-item
{
    padding: 5px;
    margin-bottom: 1px;
}



.noticia-titulo
{
    text-align: left;
    margin-bottom: 10px;
    border-bottom: solid 1px #6E6E6E;
}


.parrafo-noticia
{
 font-size:8px;    
}

.noticia-fecha
{
    margin-top: 10px;
    text-align: right;
    border-bottom: dashed 1px #BBBBBB;
    padding: 10px;
    font-size: 10px;
}

.noticia-cuerpo
{
    text-align: justify;
    padding: 5px;
    font-size:15px;
}


/*Sección: tu cumplimiento*/

/*Estilo aplicado al contenedor de la meta*/
.tu-meta
{
    background: #fff;
    padding: 10px;
    border: solid 10px #EDEDED;
    display: block;
    font-size: 15px;
    text-align: justify;
}

/*Contenedor de la descripción del banco*/
#descripcion-banco
{
    background: #fff;
    padding: 10px;
    text-align: justify;
    border: solid 10px #EDEDED;
    font-size: 15px;
}

/*Gran premio, banco item*/
#banco-item, #gran-premio
{
    background: #fff;
    padding: 10px;
    font-size: 15px;
    border: solid 10px #EDEDED;
    display: block;
    text-align: center;
}



/*Estilo aplicado a los cuadros informativos presentados en las páginas de transacciones e historial
de pedidos*/
.detalle-pedido
{
    border: solid 8px #aaa;
    font-size: 13px;
    margin: 0 auto;
    margin-bottom:10px;
}
.detalle-pedido a
{
    font-weight: bold;
    color: #FF6600;
}
.detalle-pedido th, .detalle-pedido td
{
    border: none;
    background-color: #eee;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 6px;
}

.detalle-pedido .encabezado
{
    width: 1% !important;
    padding-right: 8px;
    padding-left: 5px;
    white-space:nowrap;
}



/*ENCUESTA
EN ESTA SECCIÓN USTED PODRÁ EDITAR EL ESTILO APLICADO A LA SECCIÓN ENCUESTA
*/
/*Contenedor de una encuesta*/
#encuesta
{
    padding: 10px;
}

/*Contenedor de una pregunta*/
.pregunta
{
    background: #EDEDED;
    width: 520px;
}

/*Esta sección establece una punta en el lado superior izquierdo para simular una especie de nube*/
.pregunta-punta
{
    background: #fff url('images/punta.gif') no-repeat top left;
    height: 10px;
}


/*Borde de una pregunta*/
.pregunta-borde
{
    background: #EDEDED;
    height: 5px;
    width: 520px;
}
/*Contiene la encuesta en su totalidad*/
.contenedor-encuesta
{
    padding: 10px;
    text-align: left;
}

/*Estilo asociado a los párrafos de la encuesta*/
.contenedor-encuesta p
{
    padding-left: 10px;
}

/*Estilo asociado a los elementos input de la encuesta en general*/
.contenedor-pregunta-input
{
    text-align: justify;
    padding: 5px;
}

/*Estilo asociado al texto de una pregunta*/
.texto-pregunta
{
    font-size: 15px;
    color: #515625;
    font-weight: bold;
}

/*Estilo asociado a la respuesta de una pregunta*/
.respuesta
{
    background: #EDEDED;
    padding: 2px;
}


/*Sección conTREEbute*/
.contreebute-lista ul li
{
    padding: 10px;
    list-style: none;
}