/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}

a {
   outline: 0;
}

/* =Layout
-------------------------------------------------------------- */
body {background : transparent url(fondo.gif); color: #fff;font-family: Arial, sans-serif;
font-size: 12px;
}
#wrapper {background: transparent;
	margin: 0 auto;
	width: 971px;
}
#contenedor {background: transparent; width: 971px; height: 550px; }
#pie {background : transparent; width: 971px; height: 17px; text-align: center;}
#columna {background: transparent; width: 200px; float:left; }
#contenido {background: transparent; width: 771px; height: 550px; float:right;}
#banner {background: transparent; width: 771px; height: 200px; margin-bottom: 0px;}
#contenedor2 {background: transparent; width: 771px; height: 350px;}
#texto {background: transparent; width: 371px; height: 325px; float: right; padding-top:25px; padding-left:25px; text-align:justify; line-height: 18px;}
#elementos {background: transparent; width: 370px; height: 350px; float: left; text-align:justify;}
a:link {
	color: #FFC; text-decoration: none;
}
a:visited {
	color: #FFC; text-decoration: none;
}
a:active,
a:hover {
	color: #FF9; text-decoration: none; 
}
/**/
#page-wrap { z-index: 40; width: 71px; background: transparent; height: 20px; float:right;}
/* start commented backslash hack \*/

.group { display: block; }
/* close commented backslash hack */
#sphere-area { height: 100px; width: 100%;
}
#sphere-area img { width: 80px; height: 80px; position: absolute; top: 50px; left: 550px; }
#sphere-area #blue-ball { opacity: 0; }
#sphere-area #green-ball { opacity: 0; }

#unicorn { z-index: 60; position: absolute; top: 40px; left: 44%; width: 60px; display: block; }
#banner .faro {margin-left: 300px;}
/* menu desplegable
-------------------------------------------------------------- */

/* Hacemos que los links (etiqueta a) se comporten como bloque para aumentar su zona cliqueable  */
dl a { 
	display: block;
	text-decoration: none; 
	color: #646464;
	padding: 10px 0 10px 25px;
}
/* Elimino margenes predeterminados y aplico una sombra blanca para todos los textos, estoy aplica el filete iluminado de los textos del menú */
dl, dt, dd, ul, li { 
	padding: 0; 
	margin: 0; 
}
/* Defino el ancho del menú, su borde, la sombra y las esquinas redondeadas */
dl { 
	width: 200px; 
	margin: 200px auto;
	

}
/* Este es el título de la lista, tiene aplicado un fondo degradado. también debo hacer que sus esquinas superiores sean redondeadas */
dt { 
	background: transparent; 
	color: white;
	padding: 10px 0;
	text-align: center;
	
}
 
dd {
	background: transparent; 
}
/* Aplicando la pseudo clase hover a todos los dd (ítems) le digo que muestre los subítems cada vez que paso por encima de los ítems con el ratón */
dd:hover li { 
	display: block; 
}
/* Aplico color de fondo a todos los ítems (dd) impares */
dd:nth-child(even){
	background: transparent; 
}
/* Aplico otro color de fondo a todos los ítems (dd) pares (esto genera el cebrado) */
dd:nth-child(odd){
  	background: transparent; 
}
/* Mientras el menú este contraído, oculto todos los subítems */
li { 
	display: none;
	font-size: 0.9em;
}
/* A todos los nodos hijos (no sus nietos) a le aplico un padding izquierdo. Con esto hago que los subítems queden un poco desfasados con respecto a los ítems */
li > a { 
	padding-left: 45px;
}
/* Este es el aspecto que tomaran los subítems (li) cada vez que pase con el ratón por encima de ellos */
li a:hover { 
	background: transparent;
	color: white;
}