@charset "utf-8";
/* CSS Document */

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background:#000;
	margin: 0;
	padding: 0;
	margin-top:15px;
	color:#CCC;
}

/* ~~ Selectores de elemento/etiqueta ~~ */
ul, ol, dl { /* Por coherencia en diferentes navegadores */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* Resuelve problema que los márgenes escapen de la etiqueta div contenedora*/
	padding-right: 15px;
	padding-left: 15px; /* la adición de relleno a los lados del elemento dentro de las divs,
	            en lugar de en las divs propiamente dichas, elimina todas las matemáticas de
				modelo de cuadro. Una div anidada con relleno lateral también puede usarse
				como método alternativo. */
}
a img { /* Elimina borde azul predeterminado en imagen con vínculo */
	border: none;
}

.container {
	position:relative;
        width: 808px;
	background: #000;
	margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el
	            diseño. No es necesario si establece la anchura de .container en el 100%. */
}

/* ~~ no se asigna una anchura al encabezado. Se extenderá por toda la anchura del diseño.
Contiene un marcador de posición de imagen que debe sustituirse por su propio logotipo
vinculado ~~ */
.header {
	position:relative;
	background: #000;
	height: 200px;
	border-radius: 25px;
        border: 3px solid #73AD21;
	padding: 0px;
        width: 800px;   
	font-style:italic;
	font-weight:bold;
	font-family:"Lucida Console", Monaco, monospace;
	color:#FF9;
	overflow: hidden;
}

/* S I D E B A R 
/* -------------------------------------------------------------*/
.sidebar1 {
	position:relative;
	top: 20px;
	float: left;
	width: 180px;
	background: #000;
	padding-bottom: 10px;
	border-radius: 15px;
        border: 3px solid #73AD21;
	color:#CCC;
}
.Barra {
	border-color: #73AD21;
	border-width: 3px;
}
/*-------------------------------------------------------------*/
.content {
	position: relative;
	top: 20px;
	float:left;
	left: 20px;
	width: 600px;
	border-radius: 15px;
	border: 1px solid #006;
	text-align:justify;
	margin: 0px;
	padding: 0px;
	overflow:hidden;
}

/* ~~ Este selector agrupado da espacio a las listas del área de .content ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* este relleno reproduce en espejo el relleno derecho de la
	        regla de encabezados y de párrafo incluida más arriba. El relleno se ha colocado
			en la parte inferior para que el espacio existente entre otros elementos de la
			lista y a la izquierda cree la sangría. Estos pueden ajustarse como se desee. */
}

ul.nav {
	/* esto elimina el marcador de lista */
	list-style: none;
	/* esto crea el borde superior de los vínculos (los demás se sitúan usando un borde */ 
	border-top: 1px solid #666; /*inferior en el LI) */	        
	 /* esto crea el espacio entre la navegación en el contenido situado debajo */		
	margin-bottom: 15px;
}
ul.nav li {
	border-bottom: 1px solid #666; /* esto crea la separación de los botones */
}
ul.nav li, ul.nav li:visited {
	padding: 5px 5px 5px 15px;
	display: block;
	text-decoration: none;
	background: #8090AB;
	color: #000;	
}
ul.nav li:hover, ul.nav li:active, ul.nav li:focus {
	background: #6F7D94;
	color: #FFF;
	cursor: pointer;
}

/* ~~ El pie de página ~~ */
.footer {
	position: relative;/* esto da a IE6 hasLayout para borrar correctamente */
	top: 40px;
	background: #000;
	padding-top: 12px;
	padding-left: 10px;
	padding-right: 10px;
        width: 100%;   
	border-radius: 15px;
        border: 3px solid #73AD21;
	color:#CCC;
	clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las
	columnas y a contenerlas */
	text-align:center;
	font-size:18px;
}

/* ~~ clases float/clear varias ~~ */
.fltrt {  /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la
    página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la
    página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase puede situarse en una <br /> o div vacía como elemento final tras
    la última div flotante (dentro de #container) si #footer se elimina o se saca fuera de #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
#img-container {
	position:absolute;
	top: 2px;
	left:-10px;
	padding-left:0px;
	margin-left:0px;
	width: 220px;
	height: 200px;
	border-style:none;
	text-align:center;
	color:#66F;	
}
#img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
#img-container img {
    vertical-align: middle;
    display: inline-block;
}
.quadricula {
	border-style:none;
	background-color:#000;
	width: 25%;
	height: 25%;
	position: absolute;
	opacity: 0.5;
	font-size:36px;
	text-align:center;
}

#Q11 {top: 0px;left: 0px}
#Q12 {top: 0px;left: 25%}
#Q13 {top: 0px;left: 50%}
#Q14 {top: 0px;left: 75%}
#Q21 {top: 25%;left: 0px}
#Q22 {top: 25%;left: 25%}
#Q23 {top: 25%;left: 50%}
#Q24 {top: 25%;left: 75%}
#Q31 {top: 50%;left: 0px}
#Q32 {top: 50%;left: 25%}
#Q33 {top: 50%;left: 50%}
#Q34 {top: 50%;left: 75%}
#Q41 {top: 75%;left: 0px}
#Q42 {top: 75%;left: 25%}
#Q43 {top: 75%;left: 50%}
#Q44 {top: 75%;left: 75%}


/* H E A D E R   S E C T I O N 
------------------------------------------------ */
#Titol01 {
	position:absolute;
	top: 17px;
	left: 30%;
	height: auto;
	width: auto;
	font-size: 90px;
	font-family:Arial, Helvetica, sans-serif;
}
#Titol02 {
	position:absolute;
	top: 137px;
	left: 30%;
	height:auto;
	width: auto;
	font-size: 26px;
}
/*-----------------------------------------------*/
/* F I N E S T R A
/*------------------------------------------------ */
#Finestra {
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow:hidden;
	height:auto;
        border:none;
}

/*-----------------------------------------------*/
.links {
	text-decoration:none;
	color:#CCC;
	font-size:14px;
	padding-top:10px;
	margin-left:15px;

}
.links:hover {
	text-decoration:underline;
}