/* ----------------------------------------------------------------------------------------
- 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 0 -3.8em #272727;
	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;
	width: 82em;
}


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

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

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


/* 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;
}


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

#listado-portafolio {
}


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

#mis-ultimos-proyectos {
	background: #333333;
	margin: 0em 0 0 1.6em;
	width: 78.1em;
	padding: 2em 0em 2em 0em;
}

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: #ffffff;
	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;
	width: 24.7em;
}

#listado-de-proyectos li img {
	border: .5em solid #4d4d4d;
}

#listado-de-proyectos li:hover img {
	border: .5em solid #e41c82;
}

#listado-de-proyectos li:hover dl {
	background: #e41c82;
}

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

#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 {
	background: #4a4a4a;
	height: 4.2em;
	font-size: 82%;
	display: block;
	margin-top: .2em;
	line-height: 1.2em;
	padding: .5em 0em .5em .6em;
}

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

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

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

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


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

#pie-de-pagina {
	background: #121212;
	padding: 2em 0;
	color: #b0b0b0;
	clear: both;
}

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


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

#contactar {
	width: 21em;
	float: left;
	text-align: left;
}
.correo {
	color: #ffffff;
	text-decoration: underline;
}


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

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

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

#mis-imagenes li img {
	border: 1px solid #1c1c1c;
}
#mis-imagenes li img:hover {
	border: 1px solid #769a15;
}


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

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

#social img {
	margin: 0 1em 0 0;
}