/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu {width:895px; height:32px; position:relative; z-index:100;border-right:0px solid #828282; font-family:arial, sans-serif;}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:896px; w\idth:895px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* [Inicio] float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li#inicio,
.menu li.inicio {float:left;width:120px;position:relative; margin-top: 0px; margin-bottom: 0px;}
/* [Inicio] style the links for the top level */
.menu a.inicio, .menu a.inicio:visited {display:block;font-size:12px;text-decoration:none; color:#7D7D7D; width:120px; height:34px; border:0px; background:none; padding-left:0px; line-height:32px; font-weight:bold;}
.menu ul li#inicio a.inicio,
.menu ul li a.inicio,
.menu ul li#inicio a.inicio:visited,
.menu ul li a.inicio:visited { text-align: center; padding-left:1px;padding-right:1px; font-size: 16px; width:120px; }
/* [Inicio] a hack so that IE5.5 faulty box model is corrected */
* html .menu a.inicio, * html .menu a.inicio:visited {width:120px; w\idth:120px;}
/* [Inicio] style the top level hover */
.menu ul li#inicio a.inicio:hover,
.menu ul li.inicio a.inicio:hover{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:120px;}
.menu ul li.inicio :hover > a{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:120px;}

/* [Clientes] float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li#clientes,
.menu li.clientes {float:left;width:120px;position:relative; margin-top: 0px; margin-bottom: 0px;}
/* [Clientes] style the links for the top level */
.menu a.clientes, .menu a.clientes:visited {display:block;font-size:12px;text-decoration:none; color:#7D7D7D; width:120px; height:34px; border:0px; background:none; padding-left:0px; line-height:32px; font-weight:bold;}
.menu ul li#clientes a.clientes, .menu ul li#clientes a.clientes:visited,
.menu ul li a.clientes, .menu ul li a.clientes:visited { text-align: center; padding-left:1px;padding-right:1px; font-size: 16px; width:120px; }
/* [Clientes] a hack so that IE5.5 faulty box model is corrected */
* html .menu a.clientes, * html .menu a.clientes:visited {width:159px; w\idth:120px;}
/* [Clientes] style the top level hover */
.menu ul li#clientes a.clientes:hover,
.menu ul li.clientes a.clientes:hover{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:120px;}
.menu ul li#clientes :hover > a,
.menu ul li.clientes :hover > a{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:120px;}

/* [Portafolio] float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li#portafolio,
.menu li.portafolio {float:left;width:120px;position:relative; margin-top: 0px; margin-bottom: 0px;}
/* [Portafolio] style the links for the top level */
.menu a.portafolio, .menu a.portafolio:visited {display:block;font-size:12px;text-decoration:none; color:#7D7D7D; width:120px; height:34px; border:0px; background:none; padding-left:0px; line-height:32px; font-weight:bold;}
.menu ul li#portafolio a.portafolio, .menu ul li#portafolio a.portafolio:visited,
.menu ul li a.portafolio, .menu ul li a.portafolio:visited { text-align: center; padding-left:1px;padding-right:1px; font-size: 16px; width:120px; }
/* [Portafolio] a hack so that IE5.5 faulty box model is corrected */
* html .menu a.portafolio, * html .menu a.portafolio:visited {width:159px; w\idth:120px;}
/* [Portafolio] style the top level hover */
.menu ul li#portafolio a.portafolio:hover,
.menu ul li.portafolio a.portafolio:hover{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:120px;}
.menu ul li#portafolio :hover > a,
.menu ul li.portafolio :hover > a{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:120px;}

/* [Quienes Somos] float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li.quienes_somos {float:left;width:168px;position:relative; margin-top: 0px; margin-bottom: 0px;}
/* [Quienes Somos] style the links for the top level */
.menu a.quienes_somos, .menu a.quienes_somos:visited {display:block;font-size:12px;text-decoration:none; color:#7D7D7D; width:168px; height:34px; border:0px; background:none; padding-left:0px; line-height:32px; font-weight:bold;}
.menu ul li a.quienes_somos, .menu ul li a.quienes_somos:visited { text-align: center; padding-left:1px;padding-right:1px; font-size: 16px; width:158px; }
/* [Quienes Somos] a hack so that IE5.5 faulty box model is corrected */
* html .menu a.quienes_somos, * html .menu a.quienes_somos:visited {width:169px; w\idth:168px;}
/* [Quienes Somos] style the top level hover */
.menu ul li.quienes_somos a.quienes_somos:hover{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:168px;}
.menu ul li.quienes_somos :hover > a{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:168px;}
/* [Quienes Somos] style the second level hover */
.menu ul li.quienes_somos ul a:hover{color:#FFF; background:#999999; border: 1px solid #FFFFFF;text-align: left; width:154px; padding-left: 1px; padding-right: 1px;}
.menu ul li.quienes_somos ul :hover > a {color:#FFF; background:#999999; border: 1px solid #FFFFFF;text-align: left; width:154px;}
/* [Quienes Somos] style the second level links */
.menu ul li.quienes_somos ul a, .menu ul li.quienes_somos ul a:visited {background:#BCBDC1; color:#FFF; height:auto; line-height:1em; padding:5px 5px; width:128px; border: 1px solid #FFFFFF;text-align: left; margin-top: 0px; margin-bottom: 0px; font-size: 12px;}

.menu ul li.quienes_somos:focus ul li, .menu ul li.quienes_somos:hover ul li {width:138px; padding-left: 0px; padding-right: 0px;}

.menu li.quienes_somos:focus a.quienes_somos, .menu ul li.quienes_somos:hover a.quienes_somos:vivited {color:#FFFFFF;background:#51ADC6;width:168px;padding-left:5px;}
.menu li.quienes_somos:focus a.quienes_somos, .menu ul li.quienes_somos:hover a.quienes_somos:visited {color:#FFFFFF;background:#51ADC6;width:168px;padding-left:5px;}

.menu ul li.quienes_somos:hover ul a, .menu ul li.quienes_somos:hover ul a:visited {color:#FFFFFF; background:#BCBDC1; padding-left: 10px; padding-right: 0px;width:165px;}
.menu ul li.quienes_somos:focus ul a, .menu ul li.quienes_somos:focus ul a:visited {color:#FFFFFF; background:#BCBDC1; padding-left: 10px; padding-right: 0px;width:165px;}
.menu ul li.quienes_somos:hover ul a:hover, .menu ul li.quienes_somos:hover ul a:focus {color:#FFFFFF; background:#999999;}
.menu ul li.quienes_somos:focus ul a:hover, .menu ul li.quienes_somos:focus ul a:focus {color:#FFFFFF; background:#999999; }

.menu ul li.quienes_somos:hover a.quienes_somos, .menu ul li.quienes_somos:hover a.quienes_somos:visited,
.menu ul li.quienes_somos:focus a.quienes_somos, .menu ul li.quienes_somos:focus a.quienes_somos:visited { border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6;}

.menu ul li.quienes_somos:hover, .menu ul li.quienes_somos:focus {width: 168px; padding-left: 0px;}
.menu ul li.quienes_somos:hover a, .menu ul li.quienes_somos:hover a:visited {width: 170px; padding-left: 0px;}

/* [Contacto] float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li.contacto {float:left;width:120px;position:relative; margin-top: 0px; margin-bottom: 0px;}
/* [Contacto] style the links for the top level */
.menu a.contacto, .menu a.contacto:visited {display:block;font-size:12px;text-decoration:none; color:#7D7D7D; width:120px; height:34px; border:0px; background:none; padding-left:0px; line-height:32px; font-weight:bold;}
.menu ul li a.contacto, .menu ul li a.contacto:visited { text-align: center; padding-left:1px;padding-right:1px; font-size: 16px; width:120px; }
/* [Contacto] a hack so that IE5.5 faulty box model is corrected */
* html .menu a.contacto, * html .menu a.contacto:visited {width:159px; w\idth:120px;}
/* [Contacto] style the top level hover */
.menu ul li.contacto a.contacto:hover{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:120px;}
.menu ul li.contacto :hover > a{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6; width:120px;}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.menu ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:149px;position:relative; margin-top: 0px; margin-bottom: 0px;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#7D7D7D; width:138px; height:34px; border:0px; background:none; padding-left:10px; line-height:32px; font-weight:bold;}

.menu ul li:focus a, .menu ul li:focus a:visited,
.menu ul li:hover a, .menu ul li:hover a:visited {color:#FFFFFF;}

.menu ul li a, .menu ul li a:visited { text-align: center; padding-left:5px;padding-right:5px; font-size: 16px; color:#7D7D7D;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px; color:#7D7D7D;}

.menu ul li:focus a, .menu ul li:hover a,
.menu ul li:focus a:visited, .menu ul li:hover a:visited,{color:#FFFFFF; background:#51ADC6;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited { background:#BCBDC1 url('../images/grey-arrow.gif') no-repeat 130px center; height:auto; line-height:1em; padding:5px 10px; width:128px; border: 1px solid #FFFFFF;text-align: left; margin-top: 0px; margin-bottom: 0px;}
.menu ul li:focus a ul li,
.menu ul li:focus a ul li a,
.menu ul li:focus a ul li a:visited,
.menu ul li:focus a:visited ul li a,
.menu ul li:focus a:visited ul li a:visited,
.menu ul li:hover a ul li,
.menu ul li:hover a ul li a,
.menu ul li:hover a ul li a:visited,
.menu ul li:hover a:visited ul li a,
.menu ul li:hover a:visited ul li a:visited,
.menu ul li a ul li,
.menu ul li a ul li a,
.menu ul li a ul li a:visited,
.menu ul li a:visited ul li a,
.menu ul li a:visited ul li a:visited,
.menu ul li a:hover ul li,
.menu ul li a:hover ul li a,
.menu ul li a:hover ul li a:visited  {color:#FFFFFF; background:#BCBDC1;}

/* style the second level hover */
.menu ul ul a.drop:hover{ background:#999999 url('../images/blue-arrow.gif') no-repeat 130px center; border: 1px solid #FFFFFF;text-align: left;}
.menu ul ul :hover > a.drop { background:#999999 url('../images/blue-arrow.gif') no-repeat 130px center; border: 1px solid #FFFFFF;text-align: left;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited { background:#9D9EA2; color: #FFFFFF; border: 1px solid #FFFFFF;  text-align: left; font-size: 12px;}
.menu ul li:focus ul ul a,
.menu ul li:focus ul ul a:visited,
.menu ul li:hover ul ul a,
.menu ul li:hover ul ul a:visited,
.menu ul li ul li:focus ul a,
.menu ul li ul li:focus ul a:visited,
.menu ul li ul li:hover ul a,
.menu ul li ul li:hover ul a:visited
.menu ul li ul li ul li:focus a,
.menu ul li ul li ul li:focus a:visited,
.menu ul li ul li ul li:hover a,
.menu ul li ul li ul li:hover a:visited { background:#9D9EA2; color: #FFFFFF; border: 1px solid #FFFFFF;  text-align: left; font-size: 12px; margin-top: 0px; margin-bottom: 0px;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#BCBDC1; border: 1px solid #FFFFFF;text-align: left;}
.menu ul ul ul a { background:#9D9EA2; color: #FFFFFF; border: 1px solid #FFFFFF;  text-align: left; font-size: 12px;}
.menu ul li:focus ul ul a:hover,
.menu ul li:hover ul ul a:hover,
.menu ul li ul li:focus ul a:hover,
.menu ul li ul li:hover ul a:hover
.menu ul li ul li ul li:focus a:hover,
.menu ul li ul li ul li:hover a:hover { background:#BCBDC1; color: #FFFFFF; border: 1px solid #FFFFFF;  text-align: left; font-size: 12px; margin-top: 0px; }

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:34px;left:0; width:149px;border-top:0px;}
/* another hack for IE5.5 */
* html .menu ul ul {top:34px;t\op:35px;}

/* position the third level flyout menu */
.menu ul ul ul{left:149px; top:-1px; width:149px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#BCBDC1; color:#FFF; height:auto; line-height:1em; padding:5px 10px; width:128px; border: 1px solid #FFFFFF;text-align: left; margin-top: 0px; margin-bottom: 0px; font-size: 12px;}
.menu ul ul li {background:#BCBDC1;}
.menu ul ul li.link_generacion_ventas a, .menu ul ul li.link_generacion_ventas a:visited {background:#BCBDC1;margin-top: 0px; margin-bottom: -1px; border-bottom: 0px solid #FF0000; font-size: 12px;}
.menu ul ul li.link_generacion_ventas a:hover {background:#9D9EA2;}

.menu ul ul li.soluciones_a_la_medida a, .menu ul ul li.soluciones_a_la_medida a:visited {background:#BCBDC1;}
.menu ul ul li.soluciones_a_la_medida a:hover {background:#9D9EA2;}

.menu ul ul li a, .menu ul ul li a:visited {background:#BCBDC1;}

/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;text-align: left;margin-top: 0px; margin-bottom: 0px;}

/* style the top level hover */
.menu a:hover{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6;}
.menu :hover > a{color:#FFFFFF; background:#51ADC6; border-right: 1px solid #51ADC6; border-left: 1px solid #51ADC6;}
.menu ul li:focus, .menu ul li:hover { color:#FFFFFF; }
.menu ul li a:hover { color:#FFFFFF; }
/* style the second level hover */
.menu ul ul a:hover{color:#FFF; background:#999999; border: 1px solid #FFFFFF;text-align: left;}
.menu ul ul :hover > a {color:#FFF; background:#999999; border: 1px solid #FFFFFF;text-align: left;}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}