/* ================================================================ 
Copyright (c) 2011 Tarjetas del Noreste, S.A. de C.V. All rights reserved.
Noviembre 7, 2011
=================================================================== */

@charset "UTF-8";
/* CSS Document */

/* Estilos #header_login para Login
============================== */

/* Determina la alineación general del header */
#header_login {
	padding: 0; 
	margin: 0 auto 0 auto;
}
/* Muestra el logo de VendVolution */
#header_login .vendvolution {
	float: left;
	width: 180px;
	height:64px;
	margin: 5px 5px 0 5px;
	background-image: url(../images/vendvolution.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
}
/* Muestra el logo de del Cliente */
#header_login .cliente {
	float: left;
	width: 180px;
	height:64px;
	margin: 5px 5px 0 400px;
	background-image: url(../images/cliente.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
}
/* Determina la posición y altura de los datos de sesión */
#header_login .sesion{
	color: #FFFFFF;
	background-color:#159E31;
	min-height:30px;
	margin: 0 auto 0 auto;
	padding: 0; 
}
/* Datos de Sesión */
#header_login .sesion .campo {
	float:left;
	margin: 0 10px 0 20px;
	font-family: 'OpenSans', Arial, Helvetica, sans-serif;
	text-align: left;
}
/* Etiqueta label */
#header_login .sesion label  {
	margin: 0;
	display: block; 
	padding: 2px;
}
/* Datos Constantes */
#header_login .sesion label.campo_1 {
	font-size: 11px;
	line-height: 20px;
	font-weight: bold;
	margin: 5px 0 4px 5px;
	padding: 0 2px 0 2px;
	display: inline-block;
}
/* Datos Variables */
#header_login .sesion label.campo_2 {
	font-size: 11px;
	line-height: 20px;
	font-weight: normal;
	padding: 5px 5px 4px 0;
	display: inline-block;
}
/* Barra de Menú */
#header_login .sesion #menu {
	background-color:#159E31;
	float: right;
	width:230px;
	text-align: center;
	margin: 0 0 0 15px;
	padding: 0;
}
#header_login .sesion #menu .btn {
	margin: 1px;
	padding: 0 2px 0 2px;
	text-align: center;
	font-family: 'OpenSans', Arial, Helvetica, sans-serif;
	list-style: none;
	list-style-type: none;
}
#header_login .sesion #menu li:hover {
	position: relative; 
	z-index: 200;
}
#header_login .sesion #menu li a.top_link span {
	float: left;
	display: block;
	line-height: 28px;
}
#header_login .sesion #menu li a.top_link span.down {
	float:left;
	display:block;
	line-height: 28px;
}
/* Apartado INTERNATIONAL */
#header_login .sesion  #menu .language li.top {
	font-family: 'OpenSans', Arial, Helvetica, sans-serif;
	border-right: 1px dotted #FFFFFF;
	list-style: none;
	list-style-type: none;
	display:block;
	float:left;
	color:#FFFFFF;
	font-size: 11px;
	line-height: 28px;
	height: 28px;
	text-decoration:none;
	font-weight: bold;
	cursor: default;
	padding: 0 10px 0 10px;
	background-image: url(../images/icons_sprite.png);
	background-repeat: no-repeat;
	background-position: -5px -196px;
	text-indent: 15px;
}
/* Botón de selección de idioma */
#header_login .sesion #menu .select_language li.top {
	font-family: 'OpenSans', Arial, Helvetica, sans-serif;
	text-align: left;
	display:block;
	height: 28px;
	color: #FFFFFF;
	list-style: none;
	list-style-type: none;
	float:left;
}
#header_login .sesion #menu .select_language li a.top_link {
	display:block;
	float:left;
	color:#FFFFFF;
	font-size: 11px;
	line-height: 28px;
	height: 28px;
	text-decoration:none;
	font-weight: bold;
	padding: 0;
	cursor: pointer;
	padding: 0 0 0 10px;
	text-indent: 5px;
}
#header_login .sesion #menu .select_language li:hover a.top_link {
	line-height: 28px;
	height: 28px;
	text-decoration: none;
	color:#159E31;
	background-color: #EAEAEA;
	text-indent: 5px;
}
/* Submenú para seleccionar idioma */
#header_login .sesion #menu .select_language li:hover ul.sub {
	left:0px;
	top: 28px;
	background-color: #FCFCFC;
	padding:3px 0 3px 3px;
	white-space:nowrap;
	width: 111px;
	height:auto;
	z-index:300;
	text-align: left;
	border: 1px solid #E3E3E3;
}
#header_login .sesion #menu .select_language li:hover ul.sub li {
	display:block;
	height:28px;
	position:relative;
	float:left;
	width: 111px;
	font-weight:normal;
}
/* Efectos para Botón de Selección de idioma:
Cambio de color de Texto y Background
Cuando está seleccionado un botón del submenú desplegado */
#header_login .sesion #menu .select_language li:hover ul.sub li a {
	color:#EAEAEA;
	background-color: #159E31;
	display:block;
	font-size:11px;
	font-weight: bold;
	height:26px;
	width: 109px;
	line-height:26px;
	text-decoration:none;
	border-bottom: 1px solid #EAEAEA;
	text-indent: 20px;
}
/* submenu con link mouse over*/
#header_login .sesion #menu .select_language li:hover ul.sub li a:hover {
	background-color:#EAEAEA;
	color: #159E31;
	text-indent: 20px;
}
#header_login .sesion #menu .select_language ul, 
#header_login .sesion #menu .select_language li:hover ul ul,
#header_login .sesion #menu .select_language li:hover li:hover ul ul,
#header_login .sesion #menu .select_language li:hover li:hover li:hover ul ul,
#header_login .sesion #menu .select_language li:hover li:hover li:hover li:hover ul ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	width:0;
	height:0;
	margin:0;
	padding:0;
	list-style:none;
}




/* Estilos #header páginas generales
============================== */

/* Determina la alineación general del header */
#header {
	padding: 0; 
	margin: 0 auto 0 auto;
}
/* Muestra el logo de VendVolution */
#header .vendvolution {
	position: relative;
	float: left;
	width: 180px;
	height:64px;
	margin: 5px 15px 0 15px;
	background-image: url(../images/vendvolution.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
}
/* Muestra el logo de del Cliente */
#header .cliente {
	float: right;
	width: 180px;
	height:64px;
	margin: 5px 15px 0 15px;
	background-image: url(../images/cliente.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
}
/* Determina la posición y altura de los datos de sesión */
#header .sesion{
	color: #FFFFFF;
	background-color:#159E31;
	min-height:30px;
	margin: 0 auto 0 auto;
	padding: 0; 
}
/* Datos de Sesión */
#header .sesion .campo {
	border:0px!important;
	position: relative;
	float:left;
	margin: 0 5px 0 5px;
	font-family: 'OpenSans', Arial, Helvetica, sans-serif;
	text-align: left;
}
/* Etiqueta label */
#header .sesion label  {
	border:0px!important;
	color: #FFFFFF;
	margin: 0;
	display: block; 
	padding: 2px;
}
/* Datos Constantes */
#header .sesion label.campo_1 {
	border:0px!important;
	font-size: 11px;
	line-height: 20px;
	font-weight: bold;
	margin: 5px 0 4px 3px;
	padding: 0 2px 0 2px;
	display: inline-block;
}
/* Datos Variables */
#header .sesion label.campo_2 {
	border:0px!important;
	font-size: 11px;
	line-height: 20px;
	font-weight: normal;
	padding: 5px 2px 4px 0;
	display: inline-block;
}
/* Barra de Menú */
#header .sesion #menu {
	background-color:#159E31;
	float: right;
	width:285px;
	text-align: center;
	margin: 0 5px 0 5px;
	padding: 0;
}
#header .sesion #menu .btn {
	margin: 1px;
	padding: 0 2px 0 2px;
	text-align: center;
	font-family: 'OpenSans', Arial, Helvetica, sans-serif;
	list-style: none;
	list-style-type: none;
}
#header .sesion #menu li:hover {
	position: relative; 
	z-index: 200;
}
#header .sesion #menu li a.top_link span {
	float: left;
	display: block;
	line-height: 28px;
}
#header .sesion #menu li a.top_link span.down {
	float:left;
	display:block;
	line-height: 28px;
}
/* Home */
#header .sesion #menu .home li.top {
	border-right: 1px dotted #FFFFFF;
	display:block;
	float:left;
	color:#FFFFFF;
	font-size: 10px;
	line-height: 28px;
	height: 28px;
	text-decoration:none;
	font-weight: bold;
	padding: 0;
	cursor: pointer;
	padding: 0;}
#header .sesion #menu .home li a.top_link {
	display:block;
	float:left;
	color:#FFFFFF;
	font-size: 10px;
	line-height: 28px;
	height: 28px;
	text-decoration:none;
	font-weight: bold;
	padding: 0;
	cursor: pointer;
	padding: 0 10px 0 10px;
	background-image: url(../images/icons_sprite.png);
	background-repeat: no-repeat;
	background-position: 0px -168px;
	text-indent: 13px;
}
#header .sesion  #menu .home li:hover a.top_link {
	line-height: 28px;
	height: 28px;
	text-decoration: none;
	color:#159E31;
	background-color: #EAEAEA;
	background-image: url(../images/icons_sprite.png);
	background-repeat: no-repeat;
	background-position: -100px -168px;
}
/* Apartado Idioma Seleccionado */
#header .sesion #menu .language li.top {
	border-right: 1px dotted #FFFFFF;
	list-style: none;
	list-style-type: none;
	display:block;
	float:left;
	color:#FFFFFF;
	font-size: 10px;
	line-height: 28px;
	min-height: 28px;
	text-decoration:none;
	font-weight: bold;
	cursor: default;
	padding: 0 10px 0 10px;
	background-image: url(../images/icons_sprite.png);
	background-repeat: no-repeat;
	background-position: -5px -196px;
	text-indent: 13px;
}
/* Botón de Soporte */
#header .sesion #menu .soporte li.top {
	border-right: 1px dotted #FFFFFF;
	text-align: left;
	display:block;
	min-height: 28px;
	color: #FFFFFF;
	list-style: none;
	list-style-type: none;
	float:left;
}
#header .sesion #menu .soporte li a.top_link {
	display:block;
	float:left;
	color:#FFFFFF;
	font-size: 10px;
	line-height: 28px;
	height: 28px;
	text-decoration:none;
	font-weight: bold;
	padding: 0;
	cursor: pointer;
	padding: 0 1px 0 10px;
	background-image: url(../images/icons_sprite.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: 13px;
}
#header .sesion #menu .soporte li:hover a.top_link {
	line-height: 28px;
	height: 28px;
	text-decoration: none;
	color:#159E31;
	background-color: #EAEAEA;
	background-image: url(../images/icons_sprite.png);
	background-repeat: no-repeat;
	background-position: -100px 0px;
}
/* Submenú para seleccionar medio de contacto con Soporte */
#header .sesion #menu .soporte li:hover ul.sub {
	left:0px;
	top: 28px;
	background-color: #FCFCFC;
	padding:3px;
	white-space:nowrap;
	width:182px;
	height:auto;
	z-index:300;
	text-align: left;
	border: 1px solid #E3E3E3;
}
#header .sesion #menu .soporte li:hover ul.sub li {
	display:block;
	height:28px;
	position:relative;
	float:left;
	width:182px;
	font-weight:normal;
}
/* Submenú para seleccionar medio de contacto con Soporte */
#header .sesion #menu .soporte li:hover ul.sub li a {
	color:#FFFFFF;
	background-color: #159E31;
	display:block;
	font-size:11px;
	font-weight: bold;
	height:26px;
	width:180px;
	line-height:26px;
	text-decoration:none;
	border-bottom: 1px solid #EAEAEA;
}
/* Efectos para Botón de Soporte:
Cambio de color de Texto y Background
Cuando está seleccionado un botón del submenú desplegado */
#header .sesion #menu .soporte li:hover ul.sub li a:hover {
	background-color:#EAEAEA;
	color: #159E31;
}
#header .sesion #menu .soporte ul, 
#header .sesion #menu .soporte li:hover ul ul,
#header .sesion #menu .soporte li:hover li:hover ul ul,
#header .sesion #menu .soporte li:hover li:hover li:hover ul ul,
#header .sesion #menu .soporte li:hover li:hover li:hover li:hover ul ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	width:0;
	height:0;
	margin:0;
	padding:0;
	list-style:none;
}
	
/* Efectos para Medios de Contacto de Soporte */

/* Telefono
============================== */
#header .sesion #menu .soporte .telefono li ul.sub li {
	font-size: 11px;
	line-height: 28px;}
/* Botón Teléfono */
#header .telefono a {
	color:#FFFFFF;
	background-color: #159E31;
	text-indent: 25px;
	background-image: url(../images/icons_sprite.png);
	background-repeat:no-repeat;
	background-position: 0px -28px;}
/* Botón Teléfono con Mouse Over */
#header .telefono a:hover {
	background-image: url(../images/icons_sprite.png);
	background-repeat:no-repeat;
	background-position: -100px -28px;}
	
/* Chat
============================== */
#header .sesion #menu .soporte .chat li ul.sub li {
	font-size: 11px;
	line-height: 28px;}
/* Botón Chat */
#header .chat a {
	color:#FFFFFF;
	background-color: #159E31;
	text-indent: 25px;
	background-image: url(../images/icons_sprite.png);
	background-repeat:no-repeat;
	background-position: 0px -56px;}
/* Botón CHat con Mouse Over */
#header .chat a:hover {
	background-image: url(../images/icons_sprite.png);
	background-repeat:no-repeat;
	background-position: -100px -56px;}
	
/* Skype
============================== */
#header .sesion #menu .soporte .skype li ul.sub li {
	font-size: 11px;
	line-height: 25px;}
/* Botón Skype */
#header .skype a {
	color:#FFFFFF;
	background-color: #159E31;
	text-indent: 25px;
	background-image: url(../images/icons_sprite.png);
	background-repeat:no-repeat;
	background-position: 0px -112px;}
/*Botón Skype con Mouse Over */
#header .skype a:hover {
	background-image: url(../images/icons_sprite.png);
	background-repeat:no-repeat;
	background-position: -100px -112px;}
	
/* Mail
============================== */
#header .sesion #menu .soporte .mail li ul.sub li {
	font-size: 10px;
	line-height: 28px;}
/*Botón Mail */
#header .mail a {
	color:#FFFFFF;
	background-color: #159E31;
	text-indent: 25px;
	background-image: url(../images/icons_sprite.png);
	background-repeat:no-repeat;
	background-position: 0px -84px}
/*Botón Mail con Mouse Over*/
#header .mail a:hover {
	background-image: url(../images/icons_sprite.png);
	background-repeat:no-repeat;
	background-position: -100px -84px;
}
/* ============================== */




/* Botón Salir */
#header .sesion  #menu .salir li.top {
	text-align: left;
	display:block;
	height: 28px;
	color: #FFFFFF;
	list-style: none;
	list-style-type: none;
	float:left;}
#header .sesion #menu .salir li a.top_link {
	display:block;
	float:left;
	color:#FFFFFF;
	font-size: 10px;
	line-height: 28px;
	height: 28px;
	text-decoration:none;
	font-weight: bold;
	padding: 0;
	cursor: pointer;
	padding: 0 0 0 10px;
	background-image: url(../images/icons_sprite.png);
	background-repeat: no-repeat;
	background-position: 0px -140px;
	text-indent: 13px;
}
#header .sesion  #menu .salir li:hover a.top_link {
	line-height: 28px;
	height: 28px;
	text-decoration: none;
	color:#159E31;
	background-color: #EAEAEA;
	background-image: url(../images/icons_sprite.png);
	background-repeat: no-repeat;
	background-position: -100px -140px;
}