/*
Theme Name: BuddyPress 2code2
Theme URI: http://www.2code2.com
Description: The 2code2 theme for BuddyPress.
Version: 1.2.5.2
Author: 2code2
Author URI: http://www.2code2.com
Template: bp-default
Tags: buddypress, three-columns
*/

/* Inherit the default theme styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );
/* Inherit the default theme adminbar styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
/* D4W4 temporal styles */
@import url(d4w4.css);

/**********************************************************************************************************************************************************************/
/****************************************************************************** GENERAL *******************************************************************************/
/**********************************************************************************************************************************************************************/
html {
	background: url("img/background.png") top right repeat-x #53A5A4;
	z-index: 1;
}

body {
	background: url("img/background-bottom.png") bottom center repeat-x transparent;
	max-width: none;
	min-width: none;
	width: 100%;
	z-index: 2;
}

div#background {		/* Bloque de las im�genes de fondo superiores */
	overflow: hidden;
	position: absolute;
	width: 100%;
}

div#background div#b-left {		/* Imagen de fondo Izquierda */
	background: url("img/background-left.png") top left no-repeat transparent;
	width: 216px;
	height: 218px;
	float: left;
	z-index: 2;
}

div#background div#b-right {	/* Imagen de fondo Derecha */
	background: url("img/background-right.png") top right no-repeat transparent;
	width: 283px;
	height: 222px;
	float: right;
	z-index: 2;
}

div#web {
	margin: 0 auto;
	width: 960px;		/* Fija la anchura del cuerpo de la web: 960 + 50 padding laterales = 1060px */
	padding: 0 50px;	/* A�adido para poder ver las sombras laterales*/
	overflow: hidden;	/* Para que no me muestre el sombreado abajo */
	z-index: 3;
}

div#shadow {
	position: relative;
	box-shadow: 0 0 50px 10px #696969;				/* Opera */
	-moz-box-shadow: 0 0 50px 10px #696969;			/* Firefox */
	-webkit-box-shadow: 0 0 50px 10px #696969;		/* Chrome & Safari */
}


/**********************************************************************************************************************************************************************/
/******************************************************************************* HEADER *******************************************************************************/
/**********************************************************************************************************************************************************************/
div#header {
	background: white;
	height: 140px;	/* D4W4 */
	margin: 2px 0 0 ;
	border-radius: 5px 5px 0 0; 
	-moz-border-radius: 5px 5px 0 0; 
	-webkit-border-radius: 5px 5px 0 0;
}

div#cubes { /* Recuadros de colores */
	position: absolute;
	top: -6px;
	left: 30px;
}

div#cubes div {
	float: left;
	height: 15px;
}

div#cubes div#c-left {
	width: 30px;
	background: #73B7C5;	/* Verde */
}

div#cubes div#c-center {
	width: 25px;
	background: #E489F2;	/* Rosa */
	margin: 0 5px;	/* Para separa los recuadros */
}

div#cubes div#c-right {
	width: 20px;
	background: #B256E6;	/* Morado */
}


.poktop img {	/* Imagen del banner del header */
	float: right;
	margin-right: 20px;
}

h1#logo {	/* Logo */
	width: 80px;		/* D4W4 */
	position: relative;	/* D4W4 */
	line-height: 100%;	/* D4W4 */
	margin-top: 30px;
}

h1#logo img#logo-img {	/* Imagen del logo de diles.es */
	width: 180px;
	height: 80px;
}

h4#site-desc {	/*Texto del Logo */
	position: relative;	/* D4W4 */
	left: 20px;			/* D4W4 */
	width: 40%;			/* D4W4 */
	margin: 5px 0 0;	/* Quito el margen de los H4 */
	font-family: Trebuchet MS,Tahoma,Verdana,sans-serif;
	font-size: 13px;
	color: #7AC4B7;	/* Verde */
}

ul#nav {	/* Menu de navegacio�n del header */
	max-width: none;	/* Reiniciar valor por defecto */
	right: 20px;
}

ul#nav li {
	margin: 0 0 0 5px;	/* Cambio los margenes derechos por izquierdos */
}

ul#nav li a {
	background: #F5F5F5;	/* Gris Claro */
	padding: 5px 10px;	/* Reduzco el padding para reducir la anchura final del menu-nav */
	font-family: Trebuchet MS,Tahoma,Verdana,sans-serif;
/*	font-weight: bold; */ /*------------------------------------- REVISAR VISIBILIDAD DE ESTO ----------------------------------*/
	color: #7AC4B7;		/* Verde */
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

ul#nav li a:hover, ul#nav li a:active {
	background: #7AC4B7;	/* Verde */
	color: #FFF;			/* Blanco */
}

ul#nav li.selected a, ul#nav li.current_page_item a {
	background: none;	/* Sin fondo para la p�gina actual */
	color: #555;		/* Gris Negro */
}


/**********************************************************************************************************************************************************************/
/**************************************************************************** SEPARADOR *******************************************************************************/
/**********************************************************************************************************************************************************************/
div.separator  {
	background: white;
	width: 940px;	/* 10px padding + 940px width + 10px padding = 960px */
	height: 5px;	/* 10px padding + 5px height + 10px padding = 25px */
	padding: 10px;
}

div.separator div.s-img  {	/* Imagen que separa el 'header' del 'container' */
	background: url("img/separator.png") repeat white;
	height: 5px;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}


/**********************************************************************************************************************************************************************/
/************************************************************************* COLUMNA IZQUIERDA **************************************************************************/
/**********************************************************************************************************************************************************************/
div#left-column {
	width: 200px;
	float: left;
}

ul#left-nav {	/* width: 140px */
	margin: 10px 10px 10px 25px;
}

ul#left-nav li {
	overflow: auto;
}


ul#left-nav li#item0  { margin-bottom: 5px; }
ul#left-nav li#item1  { margin-bottom: 7px; }
ul#left-nav li#item2  { margin-bottom: 9px; }
ul#left-nav li#item3  { margin-bottom: 11px; }
ul#left-nav li#item4  { margin-bottom: 13px; }
ul#left-nav li#item5  { margin-bottom: 10px; } /* Revisar pq es el �ltimo */

ul#left-nav li span {
	display: inline-block;
	float: left;
}

ul#left-nav li#item0 span { height: 25px; line-height: 25px; }
ul#left-nav li#item1 span { height: 30px; line-height: 30px; }
ul#left-nav li#item2 span { height: 35px; line-height: 35px; }
ul#left-nav li#item3 span { height: 40px; line-height: 40px; }
ul#left-nav li#item4 span { height: 45px; line-height: 45px; }
ul#left-nav li#item5 span { height: 50px; line-height: 50px; }

ul#left-nav li span.recuadro { width: 15px; }

ul#left-nav li#item0 span.recuadro { background: #EA8BB9; } /* Rosa */
ul#left-nav li#item1 span.recuadro { background: #80B865; } /* Verde */
ul#left-nav li#item2 span.recuadro { background: #88E1FB; } /* Azul */
ul#left-nav li#item3 span.recuadro { background: #F4C588; } /* Naranja */
ul#left-nav li#item4 span.recuadro { background: #A285E0; } /* Morado */
ul#left-nav li#item5 span.recuadro { background: #CD853F;} /*Marr�n*/

ul#left-nav li#item0:hover span.recuadro { background: #FD60A6; } /* Rosa */
ul#left-nav li#item1:hover span.recuadro { background: #4FB44F; } /* Verde */
ul#left-nav li#item2:hover span.recuadro { background: #4FE0FF; } /* Azul */
ul#left-nav li#item3:hover span.recuadro { background: #FFB64F; } /* Naranja */
ul#left-nav li#item4:hover span.recuadro { background: #9E65DF; } /* Morado */
ul#left-nav li#item5:hover span.recuadro { background: #A26139;} /*Marr�n*/

ul#left-nav li a {
	color: white;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

ul#left-nav li span.texto {
	width: 125px;
	margin-left: 10px;	/* Para separar los bloques de texto de los recuadros de colores */
	padding: 0 5px 0 10px;	/* Para separar el texto de la caja */
}

ul#left-nav li#item0 span.texto { background: url("img/background-nav1.png") #59B5B7 repeat-x; }
ul#left-nav li#item1 span.texto { background: url("img/background-nav1.png") #59B5B7 repeat-x; }
ul#left-nav li#item2 span.texto { background: url("img/background-nav2.png") #59B5B7 repeat-x; }
ul#left-nav li#item3 span.texto { background: url("img/background-nav3.png") #59B5B7 repeat-x; }
ul#left-nav li#item4 span.texto { background: url("img/background-nav4.png") #59B5B7 repeat-x; }
ul#left-nav li#item5 span.texto { background: url("img/background-nav5.png") #59B5B7 repeat-x; }


/**********************************************************************************************************************************************************************/
/******************************************************************************* CUERPO *******************************************************************************/
/**********************************************************************************************************************************************************************/
div#container {
	border: none;
	border-radius: 0; 
	-moz-border-radius: 0; 
	-webkit-border-radius: 0;
}

div#content .padder { 
	margin-left: 200px;		/* Crea el espacio para columna izquierda */
	padding: 10px;
	border: none;
}

/* BLOQUE HOME */
div#home ul { width: 250px; }		/* Columnas */
div#home ul#col-L { float: left; }	/* Izquierda */
div#home ul#col-R { float: right; }	/* Derecha */

/* Bloques */
div#home li.block {
	padding: 10px;
	border: 1px solid;
	background: #F9F9F9;	/* Gris */
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
}
div#home li.block#actualidad { height: 410px; border-color: #4FE0FF; margin-bottom: 12px; }	/* Cyan // Tiene 12px en vez de 10px para igualar los 6 bordes de la col-R */
div#home li.block#bolsa { height: 410px; border-color: #42AEAD; margin-bottom: none; }		/* Verde */
div#home li.block#protagonista { height: 250px; border-color: #FFB54F; margin-bottom: 5px; }/* Naranja */
div#home li.block#cadena { height: 300px; border-color: #9E64DF; margin-bottom: 5px; }		/* Morado */
div#home li.block#nuevas {
	height: 250px;
	margin-bottom: none;
	border-color: #6FC1C0;	/* Naranja */
	color: #FFF;	/* Blanco */
	background: url("img/background-block.png") top right no-repeat #53A5A4;
}		

/* T�tulos de los Bloques */
div#home li.block .b-title {
	height: 30px;
	line-height: 30px;
	margin: 0 0 10px 0;
	text-align: center;
	font-size: 21px;
	font-weight: bold;
	color: #FFF;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}
div#home li.block#actualidad .b-title { background: #1FB3DD; margin:0 0 5px; }		/* Cyan */
div#home li.block#bolsa .b-title { background: #42AEAD; }			/* Verde */
div#home li.block#protagonista .b-title { background: #FFB54F; }	/* Naranja */
div#home li.block#cadena .b-title { background: #9E64DF; }			/* Morado */

/* Subt�tulos de los Bloques */
div#home li.block .b-subTitle {
	margin-bottom: 0px;
	text-align: center;
	font-size: 14px;
}
div#home li.block#actualidad .b-subTitle { font-weight: bold; width:90%; height:50px; line-height:12px;}
div#home li.block#actualidad .b-subTitle a { text-decoration: none; color: #1FB3DD; }	/* Cyan */
div#home li.block#actualidad .b-subTitle a:hover, div#home li.block#protagonista .b-subTitle a:active { color: #888; } /* Gris */ /* --- REVISAR ESTE COLOR POR OTRO --- */

div#home li.block#bolsa .b-subTitle { height: 75px; line-height: 18px; }
div#home li.block#bolsa .b-subTitle strong{ font-size:16px; color: #42AEAD; }	/* Texto Resaltado */

div#home li.block#protagonista .b-subTitle { height: 45px; font-weight: bold; }
div#home li.block#protagonista .b-subTitle a { text-decoration: none; color: #FFB54F; }	/* Naranja */
div#home li.block#protagonista .b-subTitle a:hover, div#home li.block#protagonista .b-subTitle a:active { color: #888; } /* Gris */ /* --- REVISAR ESTE COLOR POR OTRO --- */

div#home li.block#cadena .b-subTitle { height: 100px; font-size: 12px; line-height: 14px; }
div#home li.block#cadena .b-subTitle strong{ font-size: 16px; color: #9E64DF; }							/* Texto Resaltado */
div#home li.block#cadena .b-subTitle img { width: 75px; height: 100px; float:left; margin-right:5px; }	/* Im�gen */

/* Contenido de los Bloques */
div#home li.block .b-content {
	font-size: 11px;
	line-height: 15px;
}
div#home li.block#actualidad .b-content { height: 295px; }
div#home li.block#bolsa .b-content { height: 285px; line-height: 16px; }
div#home li.block#protagonista .b-content { height: 155px; }
div#home li.block#cadena .b-content { height: 150px; line-height: 16px; }
div#home li.block#nuevas .b-content { height: 210px; }

/* Bloque 'Nuevas Registradas' */
div#home li.block#nuevas ul#members-list { width: 225px; }														/* Reduce el ancho de la lista */
div#home li.block#nuevas .vcard { border: none; padding: 0 0 15px; }											/* Quita el borde inferior y el padding superior entre usuarias */
div#home li.block#nuevas ul#members-list li img.avatar{ border: 2px solid #EEE; margin: 2.5px 20px 0 25px; }	/* Quita margen inferior del avatar */
div#home li.block#nuevas .item .item-title{margin-left:10px;line-height:25px;width:90%;}							/* Centra el nombre de la usuaria */
div#home li.block#nuevas .item .item-title a { color:#FFF; font-size: 18px; text-decoration: none; }			/* Configuraci�n enlace nombre usuarioa */
div#home li.block#nuevas .item .item-title a:hover,
div#home li.block#nuevas .item .item-title a:active { text-decoration: underline; }
div#home li.block#nuevas .item .widget-home-xfield { line-height: 15px; }										/* Centra los datos de la usuaria */

/* SCROLL: Barra de Fondo */
div#home li.block .jScrollPaneTrack {
	background: #F9F9F9;
	border: 1px solid;
	width: 8px !important;
}
div#home li.block#actualidad .jScrollPaneTrack { border-color: #1FB3DD; }	/* Cyan */
div#home li.block#bolsa .jScrollPaneTrack { border-color: #42AEAD; }		/* Verde */
div#home li.block#protagonista .jScrollPaneTrack { border-color: #FFB54F; }	/* Naranja */
div#home li.block#cadena .jScrollPaneTrack { border-color: #9E64DF; }		/* Morado */
div#home li.block#nuevas .jScrollPaneTrack { background: transparent; border-color: #FFF; }	/* Blanco */
											
/* SCROLL: Barra Movil */
div#home li.block#actualidad .jScrollPaneDrag { background: #1FB3DD; }		/* Cyan */
div#home li.block#bolsa .jScrollPaneDrag { background: #42AEAD; }			/* Verde */
div#home li.block#protagonista .jScrollPaneDrag { background: #FFB54F; }	/* Naranja */
div#home li.block#cadena .jScrollPaneDrag { background: #9E64DF; }			/* Morado */
div#home li.block#nuevas .jScrollPaneDrag { background: #FFF; }				/* Blanco */

/* SCROLL: Flechas */
div#home li.block a.jScrollArrowUp { background-position: 0 -15px; }
div#home li.block a:hover.jScrollArrowUp { background-position: 0 0; }
div#home li.block a.jScrollArrowDown { background-position: 0 -15px; }
div#home li.block a:hover.jScrollArrowDown { background-position: 0 0; }


/**********************************************************************************************************************************************************************/
/************************************************************************** COLUMNA DERECHA ***************************************************************************/
/**********************************************************************************************************************************************************************/
div#sidebar {
	margin-top: 10px;	/* D4W4 */
	border-left: none;	/* D4W4 */
	width: 200px;		/* Reduzco su anchura para dejar espacio de separaci�n con el borde */
	background: none;
}

/* CUADRO DE REGISTRO */
div#sidebar div.padder {
	padding: 10px;
	background: #C7E3E3;	/* Verde Claro */
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
}

div#sidebar div.padder div.titulo-registro, div#sidebar-me .titulo-registro {	/* Titulo del bloque Registro */
	line-height: 30px;
	margin-bottom: 10px;	text-align: center;
	font-family: Trebuchet MS,Tahoma,Verdana,sans-serif;
	font-size: 21px;
	font-weight: bold;
	color: #42AEAD;	/* Verde */
	background: #F5F5F5;	/* Gris Claro */
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}

div#sidebar div.padder p#login-text {	/* Texto debajo del titulo */
	color: black;
	font-size: 11px;
	margin: 0 0 10px 0;
	line-height: 15px;
	text-align: center;
}

div#sidebar div.padder form#sidebar-login-form p { margin-bottom: 10px; }

div#sidebar div.padder form#sidebar-login-form a.button,	/* Boton de Entrar */
div#sidebar div.padder form#sidebar-login-form input[type="submit"],
div#sidebar div.padder form#sidebar-login-form input[type="button"],
div#sidebar div.padder form#sidebar-login-form input[type="reset"],
div#sidebar div.padder form#sidebar-login-form ul.button-nav li a,
div#sidebar div.padder form#sidebar-login-form div.generic-button a {
	margin: 0 0 10px 100px;
	padding: 2px 15px;
	background: url("img/background-button.png") #7AC4B7 repeat-x;
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	border: 1px solid #7AC4B7;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}

div#sidebar div.padder p#texto-1 {	/* Texto debajo del boton Entrar */
	margin-bottom: 10px;
	text-align: center;
	font-size: 12px;
	line-height:15px;
}

div#sidebar div.padder a#button-reg {
	margin: 0 36px 10px;
	padding: 2px 15px;
	background: #F5F5F5;
	color: #44AC9A;
	text-decoration: none;
	font-family: MS Shell Dlg;
	font-size: 14px;
	font-weight: bold;
	border: 1px solid #7AC4B7;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}

div#sidebar div.padder p#texto-2 {	/* Texto debajo del boton Entrar */
	margin: 15px 0 0;
	text-align:center;
	font-size: 9px;
	line-height: 10px;
	color: grey;
}

/* CUADRO DE SIGUENOS */
li#siguenos {
	padding: 10px 5px;
	color: #7AC4B7;			/* Verde */
	text-align: center;		/* Verde */
	border: 1px solid #7AC4B7;
	margin-top: 10px;
	border-radius: 12px; 
	-moz-border-radius: 12px; 
	-webkit-border-radius: 12px;
}

li#siguenos div#titulo {
	margin-bottom: 10px;
	font-family: Trebuchet MS,Tahoma,Verdana,sans-serif;
	font-size: 18px;
	font-weight: bold;
}

li#siguenos img { margin: 0 5px; }


/**********************************************************************************************************************************************************************/
/******************************************************************************* FOOTER *******************************************************************************/
/**********************************************************************************************************************************************************************/
div#footer { display: none; }	/* Footer Antigui */

div#new-foot {
	padding-bottom: 15px;
	text-align: center;
}

div#new-foot a {
	margin: 0 5px;
	text-decoration: none;
	color: #888;	/* Gris */
}
div#new-foot a:hover, div#new-foot a:active { color: #7AC4B7; } /* Verde */



/********CLEVER.NEW: banners guia util****/
	img.banner-1d1e-square {
		width: 135px;
		height: 135px;
		padding: 7px;
		margin: 7px;
		float: left;
		background: #EEE;
		border: 1px solid #CCC;
	}

	img.banner-1d1e-vertical {
		width: 135px;
		height: 270px;
		padding: 21px 7px 21px 7px;
		margin: 7px 7px 7px 7px;
		float: left;
		background: #EEE;
		border: 1px solid #CCC;
	}

	img.banner-1d1e-horizontal {
		width: 270px;
		height: 135px;
		padding: 7px 21px 7px 21px;
		margin: 7px 7px 7px 7px;
		float: left;
		background: #EEE;
		border: 1px solid #CCC;
	}
/********CLEVER.NEW: banners guia util - End****/




/*
	IE:
		- Revisar porque al redimensionar la p�gina el bloque central no pasa por encima de las imagenes de las esquinas.
		- Probar lo de behaviur para los bordes redondeados.

	Opera:
		- Revisar porque al redimensionar la p�gina el bloque central no pasa por encima de las imagenes de las esquinas.
		- Revisar porque la sombra bottom no se oculta con el hidden del div#web.
	
	Chrome:
		- Revisar porque al redimensionar la p�gina el bloque central no pasa por encima de las imagenes de las esquinas.
		- Revisar sombreado. Se difumina muy poco y parece un bloque.

	Detalles:
		- Meter todas las imagenes "background-nav" en una s�la y cargarlas mediante sprites.
		- Hacer redondeo en menu lateral.
		- Revisar como hacemos el separador (color �nico, degradado CSS3, im�gen de anchura fija, im�gen que se repita).
		- Mirar "font-family" t�tulo diles y menus.
		- Hacer imagen final del separador. de 940px
		- Pregunta si quitamos los bordes que separan las columnas ("div#content .padder").
		- En "Mi Perfil" y "Mensajes", no le pone la etiqueta de "selected" y por eso el menu de navegaci�n no sale bien cuando pinchas en ellos.
		  Probar si va bien cuando te registras.
		  No dejar visibles, si no estas registrado?.
		- Preguntar si el bloque "Nuevas Usuarias" va a tener scroll o no. Si tiene tengo que hacer variaciones en el.


*/