Login chilli.

login.tmpl

<style type="text/css">
	#pop
	{
		color: blue;
		font-weight: bold;
		cursor: pointer;
	}
	
	#popCont
	{
		display: none;
		position: absolute;
		z-index: 100;
		top: 25%;
		left: 25%;
		width: 44%;
		height: auto;
		padding: 3%;
		background: #ADD8E6;
		border: 1px solid black;
		border-radius: 20px;
		text-align: justify;
		opacity: 0.95;
		box-shadow: 5px 5px 15px #0E5090;
		cursor: pointer;
	}
	
	#popMSG
	{
		display: none;
	}
</style>

<script type="text/javascript">
	function showPop()
	{
		document.getElementById('popCont').innerHTML = document.getElementById('popMSG').innerHTML;
		document.getElementById('popCont').style.display = 'block';
	}
	
	function hidePop()
	{
		document.getElementById('popCont').style.display = 'none';
	}

</script>

<div class="it-logox">
	<img src="img/logo.png" />
</div>
<div class="it-headx">
	<b>Bienvenido al servicio de internet de $HS_LOC_NAME !</b> 	
	<br>
	<span>
		Usted puede usar el servicio de internet, pero debe identificarse primero
		<br>
		Usted debe aceptar los siguientes $(href terms.chi "términos y condiciones").
	</span>
	<br><br>
	<div id="pop" onclick="showPop();">Click aqu&iacute; para ver las instrucciones de ingreso!.</div>
</div>

<div id="popMSG">
	<p>
		Para todo los casos, el <b>USUARIO</b> es la cuenta de correo institucional.<br><br>
		La <b>CONTRASEÑA</b> para los estudiantes es el c&oacute;digo y para los funcionarios es el n&uacute;mero del documento de identidad<br><br>
		Recuerde que por su seguridad es recomendable que asigne una contraseña nueva a su usuario, para la navegaci&oacute;n en la red inhal&aacute;mbrica de la Universidad, para lo cu&aacute;l, puede hacer uso del boton <b>CAMBIAR CONTRASEÑA</b>, ubicado en la parte inferior de la pantalla. 
	</p>
</div>