/* -------------------------------------------------------------- 
  
   Reset.css
   * Resets default browser CSS styles.
   
   Created by Erik Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
-------------------------------------------------------------- */

html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style:none;
}
ul, li{
	margin-top:0;
	margin-bottom:0;
}
/* Remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	color: black;
	background: white;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse: separate;
	border-spacing: 0;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* -------------------------------------------------------------- 
    
   Typography.css
   * Sets some default typography.
  
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Typogrify         [code.google.com/p/typogrify]
   
   The default font size is 12px. The baseline is set to 
   18px. When you're setting heights of elements, always 
   remember to use a multiple of the baseline (18,36,54..).
   
   The height of images shoud also be a multiple of 18.
   
   Read more about using a baseline here:
   * alistapart.com/articles/settingtypeontheweb
  
-------------------------------------------------------------- */   

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { 
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0; 
  margin: 9px 0;
  clear:both; 
}

/* Total height for each heading has to be a multiple of the baseline (18). */
/*h1 { font-size: 36px; line-height: 36px; padding: 18px 0; }
h2 { font-size: 28px; line-height: 36px; }
h3 { font-size: 18px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; font-weight:bold; }
h6 { font-size: 10px; font-weight:bold; }*/


/* Text elements
-------------------------------------------------------------- */

li          { line-height:18px; }

/* Tables
-------------------------------------------------------------- */

table   { margin:0px;}
th,td   { padding:0px;}
th      { font-weight:bold; }


/* Some default classes
-------------------------------------------------------------- */

.small, .small p  { font-size: 10px; }
.large, .large p  { font-size: 14px; }
.quiet, .quiet p  { color: #666; }
.hide             { display: none; }

/* TODO: Implement image captions. */
.caption { }


/* Extra fancy typography
-------------------------------------------------------------- */

/* For great looking ampersands, use this code instead of &amp;: 
   <span class="amp">&amp;</span>  */
  
.amp { 
  color: #666; 
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; 
  font-size: 1.1em;
  line-height:10%; /* Fix to maintain correct baseline */
  font-style: italic;
}

/* For great looking quote marks in titles, replace "asdf" width:
   <span class="dquo">&#8220;</span>asdf&#8221;
   (That is, when the title starts with a quote mark). */  

.dquo { margin-left: -.7em; } 
/* (You may have to change this value depending on your font size). */


.titulo{
color:#000000; 
font-weight:bold; 
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding-bottom:5px;
}
.titulo1{
color:#666666; 
font-weight:bold; 
font-family:Tahoma;
font-size:12px;
padding-bottom:5px;
}
.tituloForm{
color:#666666; 
font-weight:bold; 
font-family:Tahoma;
font-size:12px;
padding-bottom:5px;
}
.subtitulo{
color:#ef2f24; 
font-weight:bold; 
font-family:Tahoma;
font-size:12px;
padding-bottom:5px;
}
.subtitulo2{
color:#ef2f24; 
font-weight:bold; 
font-family:Tahoma;
font-size:12px;
padding-bottom:5px;
}
.texto1{
	color:#000000;
	font-size:13px;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
}
.texto{
	color:#000000;
	font-size:13px;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
}
.fecharojo{
	color:#A7A9AC;
	font-weight:normal;
}
body{
	background-color:#FFF;
	background:#FFF url(../frontEnd/images/background.jpg) repeat-x top left;
}
#page{
	width:860px;
	margin:0 auto;
}
/**********************
	HEADER
***********************/
#header{
	height:125px;
	width:860px;
	float:left;
}
#header h1{
	padding:0;
	margin:0;
	float:left;
	position:absolute;
	margin-top:70px;
	margin-left:50px;
	z-index:7000;
}
#header h1 a{
	background:transparent url(../frontEnd/images/logo_nutrivital.png) no-repeat top left;
	width:170px;
	height:0;
	padding-top:193px;
	display:block;
	overflow:hidden;
	float:left;
}
/**********************
	NAV
***********************/
#nav{
	float:left;
	position:absolute;
	margin-top:90px;
	margin-left:220px;
	width:640px;
	/*border:#3F0 1px solid;*/
}
#btHome{
	background:transparent url(../frontEnd/images/btHomeA.gif) no-repeat top left;
	width:43px;
}
#btQuienesSomos{
	background:transparent url(../frontEnd/images/btQuieneSomosA.gif) no-repeat top left;
	width:105px;
}
#btServicioCliente{
	background:transparent url(../frontEnd/images/btServicioClienteA.gif) no-repeat top left;
	width:113px;
}
#btProductos{
	background:transparent url(../frontEnd/images/btProductosA.gif) no-repeat top left;
	width:69px;
}
#btContacto{
	background:transparent url(../frontEnd/images/btContactoA.gif) no-repeat top left;
	width:60px;
}
#ulHome{
	width:125px!important;
}
#ulHome li a{
	width:100px!important;
}
/**********************
	CONTENT
***********************/
#content{
	float:left;
	width:860px;
	overflow:hidden;
	margin:0 auto;
	background:#FFF url(../frontEnd/images/contentTop.jpg) top left no-repeat;
}
#leftHandContent{
	width:487px;
	height:400px;
	padding-left:130px;
	padding-top:75px;
	overflow:hidden;
	float:left;
}
#rightHandContent{
	float:left;
	width:243px;
	overflow:hidden;
	text-align:center;
	background:transparent url(../frontEnd/images/bgLeftHandContent.jpg) 0px 60px no-repeat;
}
#rightHandContent img{
	margin-top:15px;
}
#leftHandContentQuienes{
	width:215px;
	min-height:370px;
	float:left;
	background:transparent url(../frontEnd/images/bgLeftHandContentQuienes.jpg) 195px 145px no-repeat;
}
#interna{
	float:left;
	width:605px;
	overflow:hidden;
	padding:100px 30px 10px 10px;
}
#interna h2{	
	font-family:Arial, Helvetica, sans-serif;
	color:#EF2F24;
	font-size:22px;
	clear:both;
	background:url(../frontEnd/images/bgTitulo.jpg) top right no-repeat;
	height:32px;
	padding-top:4px;
	margin-bottom:15px;
}
/**********************
	FOOTER
***********************/
#footer{
	background:#FFF url(../frontEnd/images/bgFooter.jpg) 100px 0px no-repeat;
	margin:0 auto;
	overflow:hidden;
	padding-left:100px;
	width:760px;
	float:left;
}
#footer table{
	width:100%;
	margin-top:20px;
}
#footer tr td{
	float:left;
	margin-top:15px;
	margin-left:25px;
}
#footer ul li a{
	display:block;
	height:0;
	padding-top:52px;
	overflow:hidden;
}

#btSoy{
	background:transparent url(../frontEnd/images/logo_soy.jpg) top left no-repeat;
	width:84px;
}
#btGranola{
	background:transparent url(../frontEnd/images/logo_magma.jpg) top left no-repeat;
	width:92px;
}
#btQuinde{
	background:transparent url(../frontEnd/images/logo_quinde.jpg) top left no-repeat;
	width:104px;
}
#btMilk{
	background:transparent url(../frontEnd/images/logo_dream.jpg) top left no-repeat;
	width:65px;
}
#btQuindecito{
	background:transparent url(../frontEnd/images/logo_quindecito.jpg) top left  no-repeat;
	width:104px;
}
#btServicio{
	background:transparent url(../frontEnd/images/logo_n.jpg) top left no-repeat;
	width:134px;
}

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

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

 LAYOUT INFORMATION: describes box model, positioning, z-order

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

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	font-family:Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	cursor: default;
	width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{	
	cursor: pointer;
	float: left;
	margin-left:40px;
	list-style:none;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	width: 200px;
	margin-top:10px;
	padding-bottom:5px;
	padding-left:5px;
	background-color:#BEBEBE;
	font-size: 100%;
	z-index: 6000;
	cursor: default;
	overflow:hidden;
	position: absolute;
	left: -1000em;
	border:#A7A9AC 1px solid!important;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	color:#FFF;
	width:200px;
	background:#BEBEBE;
	margin:0;
  list-style:none;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
	/*border:#A7A9AC 1px solid;*/
	padding-right:10px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

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

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal li a
{
	display:block;
	overflow:hidden;
	height:0;
	padding-top:25px;
}
ul.MenuBarHorizontal li ul li a
{
	display: block;
	cursor: pointer;
	height:auto;
	/*margin-left:5px;*/
	padding-top:0!important;
	color: #FFF!important;
	font-size:12px!important;
	text-decoration: none;
	background:#BEBEBE url(../frontEnd/images/bullet.jpg) no-repeat;
	background-position:0 3px;
	padding-left:15px;
}

/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	text-decoration:underline!important;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	color: #FFF;
}

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

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

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

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}*/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}*/
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}*/
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}*/


/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

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

 LAYOUT INFORMATION: describes box model, positioning, z-order

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

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	/*margin: 0;*/
	list-style-type: none;
	font-size: 10px;
	cursor: default;
	width: 150px;
	padding-top:155px;
	float:right;
	list-style:none;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 8em;
	text-align:right;
	width:125px;
	list-style:none!important;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
	
	background-color:#BEBEBE !important;
	border: 1px solid #A7A9AC!important;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	/*width: 160px;*/
	margin:0;
	padding:0;
	margin-left:125px;
	left: -1000em;
	top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	background-color:#BEBEBE !important;
	color:#FFF!important;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:disc!important;
	text-align:left !important;
	/*width:140px;*/
	padding:2px;
	list-style:none!important;
}

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

 DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border: 1px solid #BEBEBE;
	/*padding:0!important;
	margin:0!important;*/
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	color: #BEBEBE;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px;
}
ul.MenuBarVertical ul li a
{
	color: #FFF;
}
ul.MenuBarVertical li ul li a
{
	display: block;
	cursor: pointer;
	/*margin-left:5px;*/
	padding-top:0!important;
	color: #FFF!important;
	font-size:12px!important;
	font-weight:normal;
	text-decoration: none;
	background:#BEBEBE url(../frontEnd/images/bullet.jpg) no-repeat;
	background-position:0 3px;
	padding-left:15px;
}
ul.MenuBarVertical ul li a:hover
{
	color: #FFF;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus 
{
	color: #BEBEBE;
	text-decoration:underline;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	/*background-color: #33C;
	color: #FFF;*/
	text-decoration:underline;
}

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

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

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

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
.formatoImagen1{
	border:#BABCBE 2px solid;
}
#productoInfo{
	width:420px;
	overflow:hidden;
	float:left;
}
#productoInfo.servicio{
	width:340px;
}
#productoFoto{
	float:left;
	width:175px;
	overflow:hidden;
	padding-left:10px;
}
#productoFoto.servicio{
	width:255px;
}
#productoFoto ul li{
	list-style:none;
}
#productoFoto.servicio ul{
	margin:0;
	padding:0;
}
#productoFoto.servicio ul li{
	float:left;
	margin:0;
	padding:0;}

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Skin */
.tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.tabs-nav li {
    float: left;
    margin: 0 0 0 1px;
    min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
    display: block;
    padding: 0 10px;
}
.tabs-nav a {
    position: relative;
    top: 1px;
    z-index: 2;
    padding-left: 0;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
}
.tabs-nav .tabs-selected a {
    color: #EE2E24;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
    outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
}
.tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 18px; /* IE 6 treats height as min-height */
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
}
.tabs-nav .tabs-selected a span {

}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {

}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {

}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.tabs-nav .tabs-disabled {
    opacity: .4;
}
.tabs-container {
    padding: 1em 8px;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.tabs-loading em {
    padding: 0 0 0 20px;
}
#cuadroTab-1 div.contenedor{
	background:#999999;
	margin:0;
	padding:0;
	background:url(../frontEnd/images/backgroundProducto.jpg) repeat-y;

}

#contentProducto{
	padding:0px 30px;
	color:#a7a9ac;
}
#leftHandContentQuienes table{
	clear:both;
	float:left;
}