/************************************************
Dodot Kandoo
estructura.css

Macroestructura general del site.
En este archivo se definen los contenedores
principales (cabecera, pie, cuerpo, distintas navegaciones)


Autor: 				jose@doubleyou.com
Fecha: 				15/07/2005
Última revisión:	19/09/2005
************************************************/

/*Importamos la tipografía corporativa */
@font-face {
	font-family:			Kandoo;						/*Este es el nombre con el que luego nos referiremos a ella*/
	font-style:				normal;
	font-weight:			normal;
	src:					url(/resources/SOUPBON0.eot);
}

@font-face {
	font-family:Kandoo;					/*Este es el nombre con el que luego nos referiremos a ella*/
	font-style:				normal;
	font-weight:			normal;
	src:url('/resources/SOBR____.TTF') format("opentype");
}




/*Reseteamos márgenes y paddings*/
*{
	margin:					0;
	padding:				0;
}

body{
	background-color:		#fff;
	width:                  98%;
	height:					100%;
	font-family:			Verdana, Geneva, Arial, Helvetica, sans-serif;
	color:					#6B017D;


}

table{
	table-layout:			fixed;
}

/* Internet Explorer CSS hacks */

div, img, li, p , input, span{
	behavior: 				url("/resources/png.htc");
}


body {
	behavior:				url("/resources/csshover.htc");
}
textarea, select{
	font-family:			Verdana, Geneva, Arial, Helvetica, sans-serif;
}

img,
fieldset{
	border:						none;
}

fieldset{
    margin:                     0;
    padding:                    0;
}

p,
span,
div,
label,
input,
textarea,
td,
th,
select{
	font-size:			11px;
}

/*
Esta clase se encarga de ocultar todos los elementos
que sirven para separar en una visualización sin estilos.
*/
.hidden{
	display:					none;
}
/*Por defecto, las listas no tienen viñeta*/
ul{
	list-style: 			none;
}


h1, h2, h3, h4, h5, h6, p{
	margin-bottom:			0.5em;
}

h1, h2{
	font-family:			Kandoo,"Comic Sans MS", fantasy;
}

h5{
	text-transform:			uppercase;
}

a,
a:hover{
	text-decoration:		none;
}

#mainCanvas{
	position:				relative;
	top:					20px;
	width:					750px;
	height:					100%;
	margin-left:			auto;
/*Cálculo dinámico para IE 5*/
	margin-left:			expression(document.body.offsetWidth/2 - 375);
	margin-right:			auto;
}

/*Barras laterales*/

#fondo{
    /*position:               relative;*/
	width:					750px;
	overflow:				hidden;
}

#barras{
    /*position:               relative;*/
	width:					750px;
	background-position:	-28px 0;
	background-repeat:		repeat-y;/*La imagen de fondo se define en el css propio del color (verde o lila)*/
}

#cabecera{
    /*position:               relative;*/
	width:					750px;
	height:					100px;
	background-repeat:		repeat-y;
}

#fgCabecera{
/*    position:               absolute;
    top:                    0;
    left:                   0;              */
	width:					750px;
	height:					100px;
/*	background-position:	2px 0;*/
	background-repeat: 		no-repeat;/*La imagen de fondo se define en el css propio del color (verde o lila)*/
	z-index:                1;
}

/*
#cabecera h2{
    position:               relative;
    margin:                 0;
    padding:                0;
    margin-left:            170px;
    margin-top:             65px;
    z-index:                10;
}
*/

#navegacion{
	position:				relative;/*Posicionamos en relativo para solucionar un bug en IE con los bordes de las listas*/
	top:					0;
	left:					7px;
	width:					143px;
	min-height:				387px;/*Forzamos que haya siempre espacio suficiente para dibujar la curva*/
	height:					expression(this.scrollHeight < 387? "387px" : "auto" );	/*Simulación de min-height para IE*/
	float:					left;
	z-index:				8;
/*	background-color:		yellow;*/

}

#navegacion p{
	display:				none;/*Ocultamos el título de navegación (está puesto sólo para navegadores que no soporten CSS avanzado*/
}

/*Curva izquierda de la columna de navegación*/

#navegacionFg{
	position:				absolute;
	top:					0;
	left:					-2px;
	width:					14px;
	height:					387px;
	z-index:				10;
	background-repeat: 		no-repeat;/*La imagen de fondo se define en el css propio del color (verde o lila)*/
/*	background-color:		red;*/
}


#contenido{
	position:				relative;/*Forzamos la posición para poder utilizar posiciones absolutas dentro de él*/
	margin-left:			150px;
	margin-right:			15px;
	padding:				20px;
	padding-bottom:         0;
	min-height:				387px;/*Forzamos que haya siempre espacio suficiente para dibujar la curva*/
	font-size: 11px;
}

/*#container.juegos
{
	*margin-top:	410px;
}*/


/*IE Win 3px gap bug hack*/
/* Hide from IE5-mac. Only IE-win sees this. \*/

* html #contenido {
  height: 					1%;
  margin-left:				147px;
  /*TODO: ¿Qué caray pasa aquí?*/
  /*height:					expression(this.scrollHeight < 387? "387px" : "auto" );	*/

}

/*
#contenido {
  height: 					1%;
  margin-left:				147px;
  background-color:red;
  height:					expression(this.scrollHeight < 387? "387px" : "auto" );
}
*/
/* End hide from IE5/mac */


#pie{
	width:					750px;
	/*height:					174px;*/
	height:                 130px;
	clear:					both;
	background-repeat: 		repeat-y;/*La imagen de fondo se define en el css propio del color (verde o lila)*/
}

#fgPie{
	width:					750px;
	height:					174px;
	clear:					both;
	background-repeat: 		no-repeat;/*La imagen de fondo se define en el css propio del color (verde o lila)*/
}

#paginacion{
    position:               relative;
    top:                    70px;
    left:                   150px;
    width:                  520px;
    text-align:             right;

}

#paginacion a{
    margin:                 0 15px;
}

#paginacion span{
    margin:                 0 15px;
}

#paginacion select{
    font-size:              10px;
    border:                 none;
}

#menuContextual{
	margin-left:			-20px;
	margin-right:			-20px;
	padding:				20px;
	/*padding-left:			120px;*/
}

#menuContextual p{
	font-family:			Kandoo,"Comic Sans MS", fantasy;
	font-size:				11px;
	color:					#396E36;
	font-weight:			bold;
}

#menuContextual a{
	text-decoration:		none;
	color:					#6B017D;
	font-weight:			bold;
}

#menuContextual a:hover{
	text-decoration:		underline;
}

#menuPie{
	margin-top:				20px;
	width:					748px;
	text-align:				center;
	background:				54px 5px no-repeat;
}

#menuLegal{
	margin-top:				20px;
	clear:					both;
	width:					694px;
	text-align:				right;
	font-size: 				11px;
}

/*
MENÚ NAVEGACIÓN
*/

#navegacion{
	position:				relative;
}

#navegacion p{
	display:				none;
}

#navegacion a{
	text-decoration:		none;
}

#navegacion a.inicio,
#navegacion dl{
	position:				relative;
}

/*
#navegacion dl.activa{
	background-color:		#CEE98C;
}
*/

#navegacion a.inicio{
	font-family:			Kandoo,"Comic Sans MS", fantasy;
	font-size:				16px;
	font-size:				expression('17px');
	font-weight:			bold;
	padding-left:			23px;
	display:				block;
}

#navegacion dl{
	font-family:			Kandoo,"Comic Sans MS", fantasy;
	font-size:				16px;
	font-weight:			bold;
}

#navegacion dd a{
	font-family:			Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:				10px;
}

#navegacion dt{
	padding:				2px 0;
	padding-left:			23px;
	background-position:	12px 5px;
	background-repeat:		no-repeat;
}

#navegacion dl.activa dt{
	background-position:	10px 5px;
}

#navegacion dd{
	font-size:				10px;
	padding-top:			2px;
	width:					113px;
	padding-left:			30px;
}

#navegacion dd.subsecciones,
#navegacion dl.activa dd.subsecciones{
	background-position:	20px 5px;
	background-repeat:		no-repeat;
}

#navegacion dl.activa dd.activa{
	background-position:	7px 1px;
	background-repeat:		no-repeat;
	padding-bottom:			3px;
}

#navegacion dl.activa dd.activasubsecciones{
	background-position:	20px 5px;
	background-repeat:		no-repeat;
	padding-bottom:			0px;
}

#navegacion dd.activa ul{
	margin-top:				3px;
	margin-left:			-30px;
	padding-left:			30px;
}

#navegacion ul{
	list-style-type:		none;
}

#navegacion li{
	padding:				2px 0;
	height:					14PX;
/*	width:					105px;*/
	padding-left:			8px;
}

#navegacion li.activa{
	margin-left:			-30px;
	padding-left:			38px;
	padding-bottom:			3px;
	background-position:	10px 2px;
	background-repeat:		no-repeat;
}


/*
MENÚ PIE
*/
#menuPie{
	background-image:		url(/img/main/verde/menuPie.gif);
}

#menuPie li{
	display:				inline;
}

#menuPie a{
	font-family:			Kandoo,"Comic Sans MS", fantasy;
	font-size:				14px;
	font-size:				expression('17px');
	text-decoration: 		none;
	color:					#9956A6;
	margin:					0 25px;
	padding:				0 10px;
	background-color:		#fff;
	font-weight:			bold;
}

#menuPie a:hover{
    color:                  #BED63D;
	/*text-decoration:		underline;	*/
}

/*
MENÚ LEGAL
*/

#menuLegal{
	padding-bottom:			20px;
}

#menuLegal li{
	display:				inline;
	padding-left:			12px;
	/*background:				transparent url(/img/main/legalSeparacion.gif) 0 7px no-repeat;	*/
}

#menuLegal ul:first-child{
	padding-left:			0;
	background:				none;
}

#menuLegal a{
	text-decoration:		none;
	color:					#9956A6;
	font-size:				11px;
}

#menuLegal a:hover{
    color:                  #BED63D;
	/*text-decoration:		underline;*/
}


/*
ANIMACIÓN RANA
*/
#rana{
    position:				absolute;
    left:					545px;
    top:					-15px;
    z-index:                100;
}


/*CLASES AUXILIARES*/
.centeredContent{
	text-align:				center;
}

/*Ocupa todo el área de contenido en horizontal (sin márgenes)*/
.fullContent{
	margin-left:			-20px;
	margin-right:			-20px;
	width:					585px;
}

/*Ocupa la mitad del área de contenido y permite que dos elementos se posicionen contiguos*/
.floatedHalfContent{
	width:					270px;/*585px - 40px de margen / 2*/
	float:					left;
}

/*Fuente Kandoo de uso genérico en botones*/
.kandooStandard{
	font-family:			Kandoo,"Comic Sans MS", fantasy;
	font-size:				13px;
	font-size:				expression('15px');
	font-weight:			bold;
}

/*Botones de formulario sin bordes ni color de fondo*/
input.textualButton{
	padding:				0;
	margin:					0;
	width:					auto;
	border:					none;
	background:				transparent;
	cursor:					pointer;
}


/*SELECT*/
.dySelectCanvas{
    position:               relative;
}

.dySelectOption{
    margin:                 0;
    padding:                0;

}

.dySelectOptions{
    margin:                 0;
    padding:                0;
    visibility:             visible;
    position:               relative;
}

.dySelectText{
    /*z-index:                20;*/
    cursor:                 pointer;
    position:               absolute;
}

.dySelectFooter{
    z-index:                20;
    position:               relative;
}

.dySelectOptionsHolder{
    z-index:                10;
}

.dyScrollTop,
.dyScrollBottom{
    position:               absolute;
    width:                  10px;
    height:                 6px;
    right:                  2px;
    z-index:                20;
}

.dyScrollTop{
    top:                    20px;
}

.dyScrollBottom{
    bottom:                 0;
}

.dyScrollTrack{
    position:               absolute;
    width:                  1px;
    top:                    3px;
    right:                  5px;
}


.error{
    color:                  red;
}

.flashParams{
	display:									none;
}