/* ----------------------------------------------------------------------------------------
- Sitio Web:			http://www.christiangr.com
- Versión:				2.0
- Fecha:				07 / 04 / 2009
- Gramática CSS:		2.1
- Gramática (X)HTML:	1.0 Transitional
------------------------------------------------------------------------------------------- */



/* Archivos importados
------------------------------------------------------------------------------------------- */

@import "inc_formateo.css"; 
@import "inc_clases_comunes.css"; 
@import "inc_encabezados.css"; 


/* Cuerpo de página
------------------------------------------------------------------------------------------- */

body {
	font-family: Arial, Helvetica, sans-serif;
	background: url(../img/fondo.gif) repeat-x left top #000000;
	line-height: 1.7em;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font-size: 75%;
	color: #000000;
}

h1,h2,h3,h4,h5,h6 {
	color: #92bd10;
	text-transform: lowercase;
}

a, strong { 
	color: #ffffff;
	font-weight: normal;
}

strong {
	padding-bottom: .2em;
	border-bottom: 1px dotted #404040;
}


/* Contenedora de la página
------------------------------------------------------------------------------------------- */

#contenedor {
	margin: 0em auto;
	position: relative;
	width: 80em;
}


/* Idiomas
------------------------------------------------------------------------------------------- */

#idiomas {
	position: absolute;
	left: 890px;
	top: 0;
	background: url(../img/idiomas.png) no-repeat center bottom;
	text-align:  center;
	padding-top:  .7em;
	height:  4.5em;
	width:  5.7em;
}

#idiomas a {
	color: #fff;
	padding: 0em .2em 0em .2em;
	text-decoration: none;
}

#idiomas a:hover {
	background: #fff;
	border-bottom: 1px solid #fff;
	color: #626262;
}

#idiomas a.seleccionado {
	border-bottom: 1px dotted #fff;
	padding: 0em .2em 0em .2em;
	color: #fff;
}

#idiomas a.seleccionado:hover {
	color: #626262;
}

#idiomas ul {
	margin-left: .9em;
}

#idiomas li {
	list-style: none;
	border: 1px solid transparent;
	margin-right: .2em;
	cursor:  pointer;
	float: left;
	width: 1.7em;
}



/* Contenedor logotipo
------------------------------------------------------------------------------------------- */

#logotipo {
	margin: 3em 0 0 4em;
	text-align: left;
	float: left;
	width: 26em;
}
.ie6 #logotipo { margin: 0 auto; }

#logotipo h1 {	font-size: 150%; }

#presentacion {
	background: url(../img/separacion-presentacion.gif) no-repeat 0 10px;
	color: #898989;
	float: right;
	text-align: justify;
	margin: 4em 2.4em 0 0;
	padding: 15px 0 15px 6em;
	width: 450px;
}

#presentacion img {
	margin-bottom: 1em;
}

/* Contenido
------------------------------------------------------------------------------------------- */

#contenido {
	color: #bfbfbf;
}


/* sobre mi
------------------------------------------------------------------------------------------- */

#banner-sobre-mi {
	margin-bottom: 2em;
	padding-bottom: 2.9em;
}

#ilustracion1 {
	background: url(../img/sobre-mi/ilustracion-verde.jpg) no-repeat left bottom;
	margin: 0em 0 0 9em;
	height: 25em;
	float: left;
	width: 16em;
}

#ilustracion2 {
	background: url(../img/sobre-mi/ilustracion-rosa.jpg) no-repeat left bottom;
	margin: 0em 0 0 9em;
	height: 25em;
	float: left;
	width: 16em;
}

#ilustracion3 {
	background: url(../img/sobre-mi/ilustracion-azul.jpg) no-repeat left bottom;
	margin: 0em 0 0 9em;
	height: 25em;
	float: left;
	width: 16em;
}

#ilustracion4 {
	background: url(../img/sobre-mi/ilustracion-blanco.jpg) no-repeat left bottom;
	margin: 0em 0 0 9em;
	height: 25em;
	float: left;
	width: 16em;
}

#texto-citado {
	float: right;
	margin: 7em 9em 0 0;
	width: 36.4em;
}

#banner-sobre-mi cite {
	float: right;
	width: 35.2em;
	text-indent: -9999px;
	height: 9em;
	background: url(../img/sobre-mi/cita.gif) no-repeat left top #404040;
}

#banner-sobre-mi blockquote {
	float: right;
	color: #ffffff;
	line-height: 1.8em;
	font-size: 115%;
	width: 30em;
	font-weight: normal;
}

#sobre-mi {
	background: url(../img/sobre-mi/separador.gif) repeat-y right top;
	color: #f5f5f5;
	font-size: 110%;
	line-height: 1.8em;
	padding-right: 1.8em;
	margin-bottom: 2em;
	float: left;
	width: 35em;
}

span.text-decoration {
	padding-bottom: .4em;
	border-bottom: 1px solid #404040;
}

#servicios {
	color: #b0b0b0;
	font-size: 110%;
	line-height: 1.8em;
	float: right;
	width: 32.4em;
}

#navegacion {
	display: none;
}


/* portafolio
------------------------------------------------------------------------------------------- */

#listado-portafolio {
}


/* Listado de proyectos
---------------------------------------- */

#mis-ultimos-proyectos {
	margin: 0em 0 0 0em;
	width: 81em;
	padding: 0em 0em 2em 0em;
}

.ultimos-proyectos {
	display: none;
}

dl.detalles-ultimo-proyecto {
	background: #4a4a4a;
	height: 5em;
	margin-top: .3em;
	padding: .7em .7em .7em 1em;
	width: 23em;
}

dl.detalles-ultimo-proyecto dt {
	color: #ffffff;
	float: left;
	font-weight: bold;
}

dl.detalles-ultimo-proyecto dd {
	color: #ffffff;
	float: left;
	font-weight: normal;
	padding-left: .5em;
	width: 18em;
}

dl.detalles-ultimo-proyecto dd a {
	color: #898989;
	text-decoration: none;
}

dl.detalles-ultimo-proyecto dd a:hover {
	color: #ffffff;
	text-decoration: underline;
}



#listado-de-proyectos {
	padding-left: .6em;
}

#listado-de-proyectos li {
	float: left;
	list-style: none;
	margin: 2em .3em 0 .3em;
	padding: .7em 0 0 0;
	background: url(../img/fondo-ficha.jpg) no-repeat center bottom;
	width: 26em;
	text-align: center;
	position: relative;
}

.lente {
	background: url(../img/lente.png) no-repeat;
	position: absolute;
	left: 5px;
	top: 0px;
	width: 302px;
	height: 181px;
	/*z-index:600;*/
}

#listado-de-proyectos li img {
}

#listado-de-proyectos li:hover img {
}

#listado-de-proyectos li:hover dl {
}

#listado-de-proyectos li:hover dt, #listado-de-proyectos li:hover dd {
	border: 1px solid #323232;
}

#listado-de-proyectos li img.nuevo {
	border: 0em solid #4d4d4d;
	position: absolute;
	left: 19.8em;
	top: -.3em;
}

.ie6 #listado-de-proyectos li img.nuevo { display: none; }

#listado-de-proyectos li dl {
	height: 4.2em;
	font-size: 82%;
	display: block;
	margin-top: .2em;
	line-height: 1.2em;
	padding: .5em 0em .5em 1.4em;
	text-align: left;
}

#listado-de-proyectos li dt {
	color: #898989;
	float: left;
	width: 5em;
	padding: 0px;
	font-weight: bold;
	border: 1px solid transparent;
}

#listado-de-proyectos li dd {
	color: #898989;
	float: left;
	padding: 0px;
	font-weight: normal;
	padding-left: .5em;
	width: 20em;
	border: 1px solid transparent;
}

#listado-de-proyectos li dd a {
	color: #898989;
	text-decoration: none;
}

#listado-de-proyectos li dd a:hover {
	color: #e0e0e0;
	text-decoration: underline;
}


/* pie de página
------------------------------------------------------------------------------------------- */

#pie-de-pagina {
	background: url(../img/bck-footer.png) no-repeat center top #262626;
	padding: 7em 0 0em 0;
	color: #b0b0b0;
	clear: both;
}

#cont-cajas {
	width: 76em;
	margin: 0em auto 0em auto;
	padding-bottom: 5em;
	background: url(../img/separador-pie.gif) no-repeat 21em 1em;
}


/* Caja Contactar
---------------------------------------- */

#contactar {
	width: 21em;
	float: left;
}

#contactar p.p-mail {
	text-align: justify;
}

#contactar h3 { display:  block; }

.correo {
	margin-bottom: -3px;
}


/* Caja Flikr
---------------------------------------- */

#flickr {
	margin: 0em 4em 0em 4em;
	width: 22em;
	float: left;
}

#slider {
	margin: -6px 0px 0px 0;
}
#slider img {
	width: 76px;
	height: 76px;
	margin: 9px 9px 0 0;
}

#slider img {
	border: 1px solid #262626;
}
#slider img:hover {
	border: 1px solid #E41C82;
}

.p-gotoflickr {
	margin: 20px 0px 40px 0;
}

.gotoflickr { 
	clear: both; 
	padding: 0px;
}

#mis-imagenes li {
	list-style: none;
	width: 6.7em;
	float: left;
	text-align: center;
}

#mis-imagenes li img {
	border: 1px solid #262626;
}
#mis-imagenes li img:hover {
	border: 1px solid #E41C82;
}


/* Caja Redes sociales
---------------------------------------- */

#social {
	width: 25em;
	float: left;
}

#social img {
	margin: 0 5px 5px 0;
}

#social img.ico {
	border: 1px solid #262626;
}
#social img.ico:hover {
	border: 1px solid #E41C82;
}

.network {
	padding-bottom: 15px;
}

::-moz-selection { background:#FF3399; color:#FFF; }

::selection { background:#FF3399; color:#FFF; }


input:hover {
	border: 1px solid #E41C82;
	}
.text-input:hover {
	border: 1px solid #E41C82 !important;
	}

.comentario-input:hover {
	border: 1px solid #E41C82 !important;
	}
textarea:hover {
	border: 1px solid #E41C82 !important;
	}
	
	

input:focus {
	border: 1px solid #E41C82;
	}

.comentario-input:focus {
	border: 1px solid #E41C82 !important;
	}
textarea:focus {
	border: 1px solid #E41C82 !important;
	}