(20120103) 23:00

web/imgview/imgview.css

@@ -0,0 +1,71 @@
+/***********************************************
+ *    Copyright (c) 2010 Valeriano Alfonso     *
+ ***********************************************/
+/*
+	NOTA DE DOMINIO PUBLICO
+	-----------------------
+	ImgView es Dominio Publico. Esto significa que se puede hacer con el
+	lo que se quiera sin haber ninguna garantia de reembolso o idoneidad.
+	Se aprecia que la fuente sea citada.
+*/
+
+#imgview_fondo {
+	background-image: url(fondo.png);
+}
+
+#imgview_imgcargando {
+	border: 10px solid white;
+}
+
+#imgview_fondo a {
+	padding:0px;
+	margin:0px;
+}
+
+#imgview {
+	background-color: white;
+	border: 10px solid white;
+}
+
+#imgview img {
+	border: none;
+	padding:0px;
+	margin:0px;
+}
+
+#imgview a {
+	padding:0px;
+	margin:0px;
+}
+
+#imgview_control {
+	height: 30px;
+	background-color: white;
+}
+
+#imgview_anterior {
+	background-color: white;
+	float: left;
+	width: 50%;
+	height:32px;
+	border:0px;
+	padding:0px;
+	margin:0px;
+	background-image:url('anterior.png');
+	background-repeat:no-repeat;
+	background-position: 50% 0%;
+	cursor:pointer;
+}
+#imgview_siguiente {
+	background-color: white;
+	float: right;
+	width: 50%;
+	height:32px;
+	border:0px;
+	padding:0px;
+	margin:0px;
+	background-image:url('siguiente.png');
+	background-repeat:no-repeat;
+	background-position: 50% 0%;
+	cursor:pointer;
+}

web/imgview/imgview.js

@@ -0,0 +1,497 @@
+/***********************************************
+ *    Copyright (c) 2010 Valeriano Alfonso     *
+ ***********************************************/
+/*
+	NOTA DE DOMINIO PUBLICO
+	-----------------------
+	ImgView es Dominio Publico. Esto significa que se puede hacer con el
+	lo que se quiera sin haber ninguna garantia de reembolso o idoneidad.
+	Se aprecia que la fuente sea citada.
+*/
+
+
+/*
+	Historial de cambios
+	--------------------
+	1.0 2010-1-3 :
+		* Version inicial.
+	1.1 2010-1-5 :
+		* Corregida necesidad de cargar el script en la seccion head.
+		* Funcionalidad basica de album implementada.
+	1.2 2010-5-18 :
+		* Asimilado de todos los enlaces a imagenes en un album general.
+		* Iconos de anterior y siguiente de los albums, nuevos.
+*/
+
+/////////////////////////
+// Configuracion
+//
+var imgview_prefix = "";			// Se atoconfigura
+var imgview_border = 10;		// Tambien ajustar en el CSS.
+var imgview_control_alto = 32;	// Tambien ajustar en el CSS.
+
+
+
+
+///////////////////////
+// Globales
+//
+var imgview_nombre_album="";
+var imgview_href_anterior="";
+var imgview_href_siguiente="";
+var imgview_preloader=false;
+
+/////////////////////////////////////
+// ImgView_ShowImage
+//
+
+function ImgView_ShowImage(href,is_album){
+	var elemFondo = document.getElementById('imgview_fondo');
+	var elemImgview = document.getElementById('imgview');
+	var elemImgviewControl = document.getElementById('imgview_control');
+	var elemImgCargando = document.getElementById('imgview_imgcargando');
+	var elemEnlace = document.getElementById('imgview_enlace');
+	var elemImg = document.getElementById('imgview_img');
+	var elemAnt = document.getElementById('imgview_anterior');
+	var elemSig = document.getElementById('imgview_siguiente');
+	var preloader;
+	var max_horiz, max_vert;
+	var ventana_ancho, ventana_alto;
+	var pagina_ancho, pagina_alto;
+	var pos_horiz = 0, pos_vert = 0;
+
+
+	if(is_album){
+		var enlaces;
+		var imgview_RegExp;
+		var nombre_temp;
+		var i,j;
+
+		// Buscar imagenes anterior y siguientes
+		enlaces = document.getElementsByTagName("a");
+		for(i=0;i<enlaces.length;i++){
+			if(enlaces[i].getAttribute("href")==href &&
+				enlaces[i].getAttribute("imgview_albumid")==imgview_nombre_album)
+			{
+				// Encontrado el actual
+
+				// Buscar Anterior
+				imgview_href_anterior="";
+				if(i>0){
+					j=i-1;
+					while(j>=0){
+						if(enlaces[j].getAttribute("imgview_albumid")==
+							imgview_nombre_album)
+						{
+							imgview_href_anterior=enlaces[j].getAttribute("href");
+							break;
+						}
+						j--;
+					}
+				}
+
+				// Buscar Siguiente
+				imgview_href_siguiente="";
+				if(i<(enlaces.length-1)){
+					j=i+1;
+					while(j<enlaces.length){
+						if(enlaces[j].getAttribute("imgview_albumid")==
+							imgview_nombre_album)
+						{
+							imgview_href_siguiente=enlaces[j].getAttribute("href");
+							break;
+						}
+						j++;
+					}
+				}
+			}
+		}
+	}
+
+
+
+	// Obtener maximos de scroll
+	if(window.innerHeight && window.scrollMaxY) {
+		max_horiz = document.body.scrollWidth;
+		max_vert = window.innerHeight + window.scrollMaxY;
+	}else if(document.body.scrollHeight > document.body.offsetHeight){
+		// all but Explorer Mac
+		max_horiz = document.body.scrollWidth;
+		max_vert = document.body.scrollHeight;
+	}else{
+		// Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
+		max_horiz = document.body.offsetWidth;
+		max_vert = document.body.offsetHeight;
+	}
+
+	// Obtener tamanho de la ventana
+	if(window.innerHeight) {
+		// Todos excepto Explorer
+		ventana_ancho = window.innerWidth;
+		ventana_alto = window.innerHeight;
+	}else if(document.documentElement && document.documentElement.clientHeight){
+		// Explorer 6 Strict
+		ventana_ancho = document.documentElement.clientWidth;
+		ventana_alto = document.documentElement.clientHeight;
+	}else if(document.body){
+		// Resto de Explorers
+		ventana_ancho = document.body.clientWidth;
+		ventana_alto = document.body.clientHeight;
+	}
+
+	// HACK: reducir el tamaho de ventana_ancho. Hace que no sobrepase los bordes
+	ventana_ancho-=20;
+
+	// Obtener el tamanho de la pagina
+	if(max_vert < ventana_alto){
+		pagina_alto = ventana_alto;
+	}else{
+		pagina_alto = max_vert;
+	}
+	if(max_horiz < ventana_ancho){
+		pagina_ancho = ventana_ancho;
+	}else{
+		pagina_ancho = max_horiz;
+	}
+
+	// Obtener posicion del los scrolls
+	if( typeof( window.pageYOffset ) == 'number' ) {
+		// La mayoria de navegadores
+		pos_vert = window.pageYOffset;
+		pos_horiz = window.pageXOffset;
+	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
+		// Explorer
+		pos_vert = document.body.scrollTop;
+		pos_horiz = document.body.scrollLeft;
+	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
+		// Explorer 6 Strict
+		pos_vert = document.documentElement.scrollTop;
+		pos_horiz = document.documentElement.scrollLeft;
+	}
+
+
+
+	// Centrar y hacer visible la imagen de cargando
+	if(elemImgCargando){
+		elemImgCargando.style.top =
+			(pos_vert +
+				((ventana_alto - elemImgCargando.height) / 2)) + 'px';
+		elemImgCargando.style.left =
+			(pos_horiz +
+				((ventana_ancho - elemImgCargando.width) / 2)) + 'px';
+		elemImgCargando.style.display = 'block';
+	}
+
+	// Hacer que el fondo ocupe la pagina y sea visible
+	elemFondo.style.height = (pagina_alto + 'px');
+	elemFondo.style.display = 'block';
+
+	// Carga de la imagen
+	imgview_preloader=new Image();
+	imgview_preloader.onload=function(){
+
+		// Mostrar imgview, necesario para que los tamanhos sean correctos
+		elemImgview.style.display = 'block';
+
+		// Mostrar/Ocultar control de albums
+		if(is_album){
+			elemImgviewControl.style.display = 'block';
+			ventana_alto-=imgview_control_alto;
+			if(imgview_href_anterior.length==0){
+				elemAnt.style.display = 'none';
+			}else{
+				elemAnt.style.display = 'block';
+			}
+			if(imgview_href_siguiente.length==0){
+				elemSig.style.display = 'none';
+			}else{
+				elemSig.style.display = 'block';
+			}
+		}else{
+			elemImgviewControl.style.display = 'none';
+		}
+
+		// Establecer la imagen precargada
+		elemImg.src = href;
+		elemImg.width = imgview_preloader.width;
+		elemImg.height = imgview_preloader.height;
+
+		// Ajustar el tamanho de la imagen
+		var relacion=elemImg.width/elemImg.height;
+		if((elemImg.height+imgview_border*2)>ventana_alto){
+			elemImg.height=ventana_alto-imgview_border*2;
+			elemImg.width=elemImg.height*relacion;
+		}
+		if((elemImg.width+imgview_border*2)>ventana_ancho){
+			elemImg.width=ventana_ancho-imgview_border*2;
+			elemImg.height=elemImg.width/relacion;
+		}
+
+		// Centrar imgview
+		elemImgview.style.top =
+			(pos_vert +
+				((ventana_alto - elemImg.height) / 2) - imgview_border) + 'px';
+		elemImgview.style.left =
+			(pos_horiz +
+				((ventana_ancho - elemImg.width) / 2) - imgview_border) + 'px';
+
+
+		// Oclultar imagen de cargar y mostrar imgview
+		if(elemImgCargando) {
+			elemImgCargando.style.display = 'none';
+		}
+
+		return false;
+	}
+	imgview_preloader.src = href;
+	elemEnlace.href = href;
+}
+
+
+
+
+
+
+
+
+
+/////////////////////////////////////
+// ImgView_Show
+//
+function ImgView_Show(obj){
+	imgview_nombre_album=obj.getAttribute("imgview_albumid");
+	if(imgview_nombre_album){
+		ImgView_ShowImage(obj.getAttribute("href"),true);
+	}else{
+		ImgView_ShowImage(obj.getAttribute("href"),false);
+	}
+}
+
+
+
+
+
+/////////////////////////////////////
+// ImgView_Hide
+//
+function ImgView_Hide(){
+	var elemFondo = document.getElementById('imgview_fondo');
+	var elemImgview = document.getElementById('imgview');
+	var elemImgCargando = document.getElementById('imgview_imgcargando');
+	var elemEnlace = document.getElementById('imgview_enlace');
+	elemFondo.style.display = 'none';
+	elemImgview.style.display = 'none';
+	elemImgCargando.style.display = 'none';
+	imgview_preloader.onload=function(){return false;}
+	imgview_preloader.src = "";
+	elemEnlace.href = "";
+}
+
+
+
+
+
+/////////////////////////////////////
+// ImgView_ShowAnterior
+//
+function ImgView_ShowAnterior(obj){
+	if(imgview_href_anterior.length){
+		ImgView_ShowImage(imgview_href_anterior,true);
+	}
+}
+
+
+
+
+/////////////////////////////////////
+// ImgView_ShowSiguiente
+//
+function ImgView_ShowSiguiente(obj){
+	if(imgview_href_siguiente.length){
+		ImgView_ShowImage(imgview_href_siguiente,true);
+	}
+}
+
+
+
+
+
+/////////////////////////////////////
+// ImgView_Init
+//
+// Asociar al evento "onclick" la funcion "ImgView_Show" a los links con rel="imgview".
+// Anhadir el markup necesario para mostrar imagenes.
+function ImgView_Init(){
+	var i;
+	var enlaces;
+	var scripts;
+	var imgview_RegExp;
+	var isimage_RegExp;
+
+	if (!document.getElementsByTagName){
+		return;
+	}
+
+	// HACK: Obtener el path donde de este mismo script
+	scripts=document.getElementsByTagName("script");
+	imgview_RegExp = /imgview\.js$/i;
+	for(i=0;i<scripts.length;i++){
+		if(imgview_RegExp.test(scripts[i].getAttribute("src"))){
+			imgview_prefix=scripts[i].getAttribute("src").
+				replace(imgview_RegExp,"");
+		}
+	}
+	if(imgview_prefix.length<1){
+		imgview_prefix=".";
+	}
+
+
+
+	// Iterar los enlaces
+	enlaces = document.getElementsByTagName("a");
+	imgview_RegExp = /^imgview\./i;
+	isimage_RegExp = /\.gif$|\.jpg$|\.jpeg$|\.png$/i;
+	for(i=0;i<enlaces.length;i++){
+		link_href=enlaces[i].getAttribute("href");
+		if(link_href && isimage_RegExp.test(link_href)){
+			link_rel = enlaces[i].getAttribute("rel")
+			// Enlace a imagen
+			if(link_rel == "imgview"){
+				// Imagen Normal
+				enlaces[i].onclick =
+					function () {
+						ImgView_Show(this);
+						return false;
+					}
+			}else{
+				if(imgview_RegExp.test(link_rel)){
+					// Imagen de Album
+					nombre_album=link_rel.replace(imgview_RegExp,"");
+					enlaces[i].setAttribute("imgview_albumid",nombre_album);
+					enlaces[i].onclick =
+						function () {
+							ImgView_Show(this);
+							return false;
+						}
+				}else{
+					// Anhadir en el album global
+					enlaces[i].setAttribute("imgview_albumid","imgview");
+					enlaces[i].onclick =
+						function () {
+							ImgView_Show(this);
+							return false;
+						}
+				}
+			}
+		}
+	}
+
+	// Inyectar el link de la hoja de estilo
+	var LinkHoja=document.createElement('link');
+	LinkHoja.rel="stylesheet";
+	LinkHoja.type="text/css";
+	LinkHoja.href=imgview_prefix+"/imgview.css";
+	document.getElementsByTagName("head")[0].appendChild(LinkHoja);
+
+	var elemCuerpo = document.body;
+
+	// Inyectar markup del fondo con la animacion de carga
+	var elemFondo = document.createElement("div");
+	elemFondo.setAttribute('id','imgview_fondo');
+	elemFondo.onclick =
+		function () {
+			ImgView_Hide();
+			return false;
+		}
+	elemFondo.style.display = 'none';
+	elemFondo.style.position = 'absolute';
+	elemFondo.style.top = '0';
+	elemFondo.style.left = '0';
+	elemFondo.style.zIndex = '90';
+ 	elemFondo.style.width = '100%';
+	elemCuerpo.insertBefore(elemFondo, elemCuerpo.firstChild);
+
+
+	var elemImgCargando = document.createElement("img");
+	elemImgCargando.src = imgview_prefix+"/cargando.gif";
+	elemImgCargando.setAttribute('id','imgview_imgcargando');
+	elemImgCargando.style.position = 'absolute';
+	elemImgCargando.style.zIndex = '150';
+	elemImgCargando.style.display = 'none';
+	elemImgCargando.onclick =
+		function () {
+			ImgView_Hide();
+			return false;
+		}
+	elemCuerpo.insertBefore(elemImgCargando, elemCuerpo.firstChild);
+
+	// Inyectar markup de imgview
+	var elemImgview = document.createElement("div");
+	elemImgview.setAttribute('id','imgview');
+	elemImgview.style.display = 'none';
+	elemImgview.style.position = 'absolute';
+	elemImgview.style.zIndex = '100';
+	elemCuerpo.insertBefore(elemImgview, elemFondo.nextSibling);
+	var elemEnlace = document.createElement("a");
+	elemEnlace.setAttribute('href','#');
+	elemEnlace.setAttribute('id','imgview_enlace');
+	elemEnlace.setAttribute('title','Click para cerrar');
+	elemEnlace.onclick =
+		function () {
+			ImgView_Hide();
+			return false;
+		}
+	elemImgview.appendChild(elemEnlace);
+	var elemImg = document.createElement("img");
+	elemImg.setAttribute('id','imgview_img');
+	elemEnlace.appendChild(elemImg);
+	var elemImgviewControl = document.createElement("div");
+	elemImgviewControl.setAttribute('id','imgview_control');
+	elemImgviewControl.style.display = 'none';
+	elemImgview.appendChild(elemImgviewControl);
+
+
+	var elemImgviewAnterior = document.createElement("div");
+	elemImgviewAnterior.setAttribute('id','imgview_anterior');
+	elemImgviewControl.appendChild(elemImgviewAnterior);
+	elemImgviewAnterior.onclick =
+		function () {
+			ImgView_ShowAnterior(this);
+			return false;
+		}
+
+
+	var elemImgviewSiguiente = document.createElement("div");
+	elemImgviewSiguiente.setAttribute('id','imgview_siguiente');
+	elemImgviewControl.appendChild(elemImgviewSiguiente);
+	elemImgviewSiguiente.onclick =
+		function () {
+			ImgView_ShowSiguiente(this);
+			return false;
+		}
+
+
+	// Deshabilitar seleccion de la imagen
+	elemImgview.onselectstart=function () {return false;}
+	elemImgview.style.MozUserSelect="none";
+	elemImg.onselectstart=function () {return false;}
+	elemImgview.style.MozUserSelect="none";
+}
+
+
+
+
+
+
+
+// Asociar la funcion de inciado al evento "onload"
+// sin evitar la ejecucion de lo que pudiera estar antes
+var imgview_oldonload = window.onload;
+if (typeof(imgview_oldonload)!='function'){
+	window.onload = ImgView_Init;
+}else{
+	window.onload = function(){
+		imgview_oldonload();
+		ImgView_Init();
+	}
+}

web/imgview/leeme.txt

@@ -0,0 +1,67 @@
+-----------------
+---- ImgView ----
+-----------------
+
+Informacion:
+------------
+ImgView es un visor de imagenes escrito en Javascript, diseñado para no
+entorpecer la navegacion de los usuarios.
+
+Caracteristicas:
+----------------
+* Apertura de las imagenes en la propia pagina.
+* Fundido a negro del resto de la pagina.
+* Ajuste del tamaño de las imagenes para que no se salgan de la ventana.
+* Conserva la direccion del enlace original.
+* Sale clickando en cualquier sitio.
+* Soporte para albumes de fotos.
+* Asimilacion de todos los enlaces a imagenes por defecto.
+
+Historial:
+----------
+1.0 2010-1-3 :
+	* Version inicial.
+1.1 2010-1-5 :
+	* Corregida necesidad de cargar el script en la seccion head.
+	* Funcionalidad basica de album implementada.
+1.2 2010-5-18 :
+	* Asimilado de todos los enlaces a imagenes en un album general.
+	* Iconos de anterior y siguiente de los albums, nuevos.
+	* Ocultado de iconos de anterior siguiente al principio y al
+		final del album respectivamente.
+
+Instalacion:
+------------
+Descomprimir en algun directorio accesible al exterior mediante el servidor web.
+
+Uso:
+----
+Para usarlo hay que cargar el script "imgview.js" en las paginas
+donde quiera ser usado:
+
+<script type="text/javascript" src="imgview/imgview.js"></script>
+
+Con esto todos los enlaces a imagenes usaran imgview. Es recomendable
+insertar una imagen en miniatura dentro del enlace.
+
+Uso Avanzado:
+-------------
+
+Para mostrar una imagen independiente de cualquier album:
+
+<a href="imagen.jpg" rel="imgview"><img src="thumb.jpg"></a>
+
+Para crear albumes independientes; poner a todas las imagenes del mismo grupo
+rel="imgview.album", siendo "album" el nombre para esa coleccion:
+
+<a href="imagen1.jpg" rel="imgview.album"><img src="thumb1.jpg"></a>
+<a href="imagen2.jpg" rel="imgview.album"><img src="thumb2.jpg"></a>
+
+Licencia:
+---------
+	ImgView es Dominio Publico. Esto significa que se puede hacer con el
+	lo que se quiera sin haber ninguna garantia de reembolso o idoneidad.
+	Se aprecia que la fuente sea citada.
+
+
+Copyright (c) 2010 Valeriano Alfonso

web/index.html

@@ -0,0 +1,105 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
+<meta name="author" content="Valeriano Alfonso" >
+<meta name="description" content="Lonely Ruins" >
+<meta name="keywords" content="linux windows game lonely ruins robot kitten">
+<meta name="Copyright" content="Copyright (c) 2011-2012 by Valeriano Alfonso, All Right Reserved">
+<meta content="ALL" name="ROBOTS">
+<link rel="stylesheet" type="text/css" href="style.css">
+<script type="text/javascript" src="imgview/imgview.js"></script>
+<title>Lonely Ruins</title>
+</head>
+<body>
+
+<div class="contenedor">
+<table border="0" cellspacing="0" cellpadding="0" align="center">
+<tr><td>
+
+<div class="cabecera">
+	<a class="titulo" href="./"><!-- LOGO--><img src="imagenes/logo_lonelyruins_web.png"></a>
+	<div class="navbar">
+		<!-- NAVBAR-->
+		<div class="menu">
+			<ul>
+				<li><a href="#about">About</a></li>
+				<li><a href="#downloads">Downloads</a></li>
+				<li><a href="#screenshots">Screenshots</a></li>
+				<li><a href="#contact">Contact</a></li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+
+<div class="contenido">
+
+<!-- CONTENIDO -->
+
+
+<!--ABOUT-->
+<a name="about"></a>
+<h1>About</h1>
+You are a robot on a rescue mision.<br>
+The rescuer and the rescued are alone<br>
+in a strange place.<br>
+<br>
+Good Luck!<br>
+
+<p>&nbsp;</p>
+<div style="text-align:right;font-size:7pt;"><a href="#top">Back to top.</a></div>
+<p>&nbsp;</p>
+
+
+<!--DOWNLOADS-->
+<a name="downloads"></a>
+<h1>Downloads</h1>
+<p><b><big><a href="Lonely_Ruins.201201.zip">Lonely Ruins</a></big></b> for Windows and Linux.</p>
+<p>&nbsp;</p>
+<div style="text-align:right;font-size:7pt;"><a href="#top">Back to top.</a></div>
+<p>&nbsp;</p>
+
+
+
+<!--SCREENSHOTS-->
+<a name="screenshots"></a>
+<h1>Screenshots</h1>
+<p>
+<span style="vertical-align:top;">
+<a href="sshots/20120102/shot-20120102-1.png" rel="imgview.lonelyruins"><img src="sshots/20120102/shot-20120102-1.thumb.png"></a>
+<a href="sshots/20120102/shot-20120102-2.png" rel="imgview.lonelyruins"><img src="sshots/20120102/shot-20120102-2.thumb.png"></a>
+<a href="sshots/20120102/shot-20120102-3.png" rel="imgview.lonelyruins"><img src="sshots/20120102/shot-20120102-3.thumb.png"></a>
+</span>
+</p>
+<p>&nbsp;</p>
+<div style="text-align:right;font-size:7pt;"><a href="#top">Back to top.</a></div>
+<p>&nbsp;</p>
+
+
+
+
+<!--CONTACT-->
+<a name="contact"></a>
+<h1>Contact</h1>
+<ul>
+<li><a href="http://varstudio.com">VAR Studio (Main site in spanish).</a></li>
+</ul>
+
+<p>&nbsp;</p>
+<div style="text-align:right;font-size:7pt;"><a href="#top">Back to top.</a></div>
+<p>&nbsp;</p>
+
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<b>Copyright &copy; 2011-2012 <a href="/">Valeriano Alfonso</a>.</b></div>
+
+<div class="pie"><!-- PIE -->&nbsp;</div>
+
+
+</td></tr>
+</table>
+</div>
+
+</body>
+</html>

web/style.css

@@ -0,0 +1,191 @@
+/***********************************************
+ *    Copyright (c) 2012 Valeriano Alfonso     *
+ ***********************************************/
+
+
+
+/*  Elementos Base */
+html, body {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	font-family: Verdana,Arial,Helvetica,sans-serif;
+	background-color:#000000;
+	color: #777777;
+	font-size: 10pt;
+}
+h1{
+	text-align: left;
+	margin-top: 0;
+	margin-bottom: 1em;
+	font-size: 16pt;
+	font-weight: bold;
+}
+h2{
+	text-align: left;
+	margin-top: 0;
+	margin-bottom: 0.75em;
+	font-size: 14pt;
+	font-weight: bold;
+}
+h3{
+	text-align: left;
+	margin-top: 0;
+	margin-bottom: 0.5em;
+	font-size: 10pt;
+	font-weight: bold;
+}
+h4{
+	margin-top: 0;
+	margin-bottom: 0.5em;
+	font-size: 11pt;
+	font-weight: bold;
+}
+p,li,td{
+	margin-top: 0;
+	margin-bottom: 0.5em;
+	font-size: 10pt;
+}
+li {
+	padding:2px;
+}
+img {
+	border:0;
+}
+
+
+
+
+
+
+/* Links normales */
+a {
+	text-decoration:none;
+	font-weight: bold;
+	display:inline;
+}
+a:link {
+	color: #7777FF;
+}
+a:visited {
+	color: #7777FF;
+}
+a:hover {
+	color: #FFFFFF;
+	text-decoration: underline;
+}
+a:active {
+	color: #CBB545;
+}
+
+
+
+
+
+
+
+
+
+
+/* Estilo de Lonely Ruins */
+.contenedor {
+	margin: 0;
+	padding: 0;
+	float: left;
+	width: 100%;
+	min-height: 100%;
+}
+.cabecera {
+	width: 700px;
+	height:130px;
+	margin: 0 auto;
+	position: relative;
+}
+.titulo {
+	margin:0;
+	padding:0;
+	border:0;
+	vertical-align:bottom;
+	position:absolute;
+}
+a.titulo:hover {
+	background:none;
+}
+a.titulo img {
+	border:none;
+}
+a.titulo:hover img{
+	border:none;
+}
+.contenido {
+	width: 700px;
+	margin:0;
+	padding:0;
+	border:0;
+	position:relative;
+	margin: 0 auto;
+	vertical-align:bottom;
+}
+.pie {
+	width:700px;
+	height: 64px;
+	margin:0;
+	padding:0;
+	border:0;
+	position:relative;
+	margin: 0 auto;
+	font-weight: bold;
+}
+
+
+
+
+.navbar {
+	height:130px;
+	width:500px;
+	margin:0;
+	padding:0;
+	border:0;
+	vertical-align:bottom;
+	position:absolute;
+	bottom:0px;
+	right:0px;
+}
+.navbar ul {
+	list-style:none;
+	list-style-type:none;
+	list-style-position:inside;
+	border:0;
+	padding:0;
+	margin:0;
+	display:block;
+	position:absolute;
+	bottom:0;
+	right:0;
+}
+.navbar li{
+	padding:0px;
+	float: left;
+	text-align: center;
+	vertical-align: bottom;
+	margin: 1px;
+	border-left:1px solid #777777;
+}
+
+/* links del navbar */
+.navbar a {
+	padding: 4px;
+	font-size:12pt;
+	display:block;
+	/*border-top: 2px solid rgb(127,127,127);
+	border-left: 2px solid rgb(96,96,96);
+	border-right: 2px solid rgb(16,16,16);
+	border-bottom: 2px solid rgb(0,0,0);
+	border-radius:7px;
+	-moz-border-radius:7px;
+	-webkit-border-radius:7px;
+	-ms-border-radius:7px;*/
+}
+
+
+