<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Subject Matter Expert</title>
<script type ="text/javascript">
function calcular_edad()
{
var dia = parseInt(document.getElementById('dia').childNodes .item(0).nodeValue);
var mes = parseInt(document.getElementById('mes').childNodes .item(0).nodeValue);
var ano = parseInt(document.getElementById('anio').childNode s.item(0).nodeValue); ;
fecha_hoy = new Date();
ahora_ano = fecha_hoy.getYear();
ahora_mes = fecha_hoy.getMonth();
ahora_dia = fecha_hoy.getDate();
edad = (ahora_ano + 1900) - ano;
if (ahora_mes < (mes - 1)) {
edad--;
}
if (((mes - 1) == ahora_mes) && (ahora_dia < dia)) {
edad--;
}
if (edad > 1900)
{
edad = edad - 1900;
}
var e = document.getElementById('edad');
e.childNodes[0].nodeValue = edad;
}
</script>
<style type="text/css">
#navigation {color:White; font-family:Calibri; border: 1 px solid; text-align:center; width:150px; }
#navigation ul {margin:10 px; padding:0;}
#navigation li {list-style: none; padding:10px 10px;}
ul.top-level {background:#003399;}
ul.top-level li {border-bottom: #fff solid;border-top: #fff solid;border-width: 1px;}
#navigation a {color: #fff;cursor: pointer;display:block;height:25px;line-height: 25px;text-indent: 10px;text-decoration:none;width:100%;}
#navigation a:hover{text-decoration:underline;}
#navigation li:hover {background: ##0099cc;position: relative;}
ul.sub-level {display: none;}
li:hover .sub-level {background: #003399;border: #fff solid;border: 1px solid; margin:10 px; display: block;position: absolute;left: 150px;top: 5px;}
ul.sub-level li {border: none;float:left;width:150px;border: 1px solid;font-family:Calibri}
</style>
</head>
<body onload="calcular_edad();">
<div style="position:relative; top: 5%; left:7%"><img width="1200 px" height="200 px" src="http://mxirsql3/C3/Capacitación/Image%20Library/SME%20Logo.jpg" /></div>
<table style=" padding-left:25%">
<tr>
<td>
<div style="position:relative; top:30%; left:7%" id="navigation">
<ul class="top-level">
<li>Menu 1
<ul class="sub-level">
<li><a href="#">submenu1.1</a></li>
<li><a href="#">submenu1.2</a></li>
<li><a href="#">submenu1.3</a></li>
<li><a href="#">submenu1.4</a></li>
</ul>
</li>
<li>Menu 2
<ul class="sub-level">
<li><a href="#">submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
</ul>
</li>
<li>Menu 3
<ul class="sub-level">
<li><a href="#">submenu 3.1</a></li>
<li><a href="#">submenu 3.2</a></li>
<li><a href="#">submenu 3.3</a></li>
</ul>
</li>
<li>FAQ</li>
<li>contact</li>
</ul>
</div>
</td>
<td>
<div style="position:relative;left:35%; padding-left:15%">
<table border="1">
<tr>
<td><b>Nombre Completo:</b> Usuario 1</td>
</tr>
<tr>
<td><b>Experiencia Total Laboral en años:</b> 18</td>
</tr>
<tr>
<td><b>Fecha de inicio de labores: b><a id="dia">14</a>/<a id="mes">04</a>/<a id="anio">2008</a></td>
</tr>
<tr><td>Actualmente tiene<a id="edad">años</a> laborando </td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>