/* ----------------------------------------------------------------------------------
	Hoja de estilos global	
	
	Encoding:	UTF-8
	Autor:		Juan G. Hurtado
	e-Mail:		juan.g.hurtado@gmail.com
----------------------------------------------------------------------------------
	Indice de contenidos
----------------------------------------------------------------------------------
	1.MISC
	2.GLOBALES
	3.HEADER
	4.ASIDE
	5.CONTENT
		5.1.	services
		5.2.	contact
		5.3.	work
		5.4.	works
---------------------------------------------------------------------------------- */

/* =MISC
---------------------------------------------------------------------------------- */


/* =GLOBALES
---------------------------------------------------------------------------------- */
body {
	color: #000;
	font-family: Georgia, Cambria, "Times New Roman", Times, serif;
	margin: 0;
	padding: 0;
}

#wrapper {
	margin: 73px auto;
	width: 961px;
}

/* =HEADER
---------------------------------------------------------------------------------- */
#header {
	background: url(../images/layout/logo.png) no-repeat 0 0;
	height: 50px;
	margin: 0;
	padding: 0;
	width: 230px;
}

	#header a {
		display: block;
		height: 100%;
		text-indent: -999em;
		width: 100%;
	}

/* =ASIDE
---------------------------------------------------------------------------------- */
#aside {
	float: left;
	width: 230px;
}

	#aside h2 {
		display: block;
		height: 1px;
		left: -999em;
		position: absolute;
		text-indent: -999em;
		top: -999em;
		visibility: hidden;
		width: 1px;
	}
	
	#aside ul {
		margin: 42px 0 0 0;
		padding: 0;
	}
	
		#aside ul li {
			line-height: 2em;
			list-style-type: none;
		}
		
			#aside ul li a {
				color: #3F3F3F;
				text-decoration: none;
			}
			
			#aside ul li.current a {
				color: #000066;
			}
			
			#aside ul li a:focus,
			#aside ul li a:hover {
				text-decoration: underline;
			}
			
	#aside .misc li {
		line-height: 1.5em;
	}
	
		#aside .misc li a {
			color: #000;
		}


/* =CONTENT
---------------------------------------------------------------------------------- */
#content {
	float: right;
	width: 721px;
}

	#content h2 {
		display: block;
		height: 1px;
		left: -999em;
		position: absolute;
		text-indent: -999em;
		top: -999em;
		visibility: hidden;
		width: 1px;
	}
	
	/* =|services
	------------- */
	#content .services {}
	
		#content .services .data {
			color: #3F3F3F;
			float: left;
			line-height: 1.5em;
			font-size: 1.1666em;
			margin-left: 60px;
			width: 350px;
		}
		
			#content .services .data p {
				margin-top: 0;
			}
			
			#content .services .data strong {
				color: #000;
			}
		
		#content .services .categories {
			float: right;
			width: 290px;
		}
		
			#content .services .categories ul {
				color: #7F7F7F;
				margin: 0;
				padding: 0;
				text-align: right;
			}
			
				#content .services .categories ul li {
					list-style-type: none;
				}
	
	/* =|contact
	------------ */
	#content .contact {}
	
		#content .contact .data {
			color: #3F3F3F;
			float: right;
			line-height: 1.2em;
			font-size: 1.1666em;
			font-style: italic;
			margin-right: 60px;
			text-align: right;
			width: 290px;
		}
		
			#content .contact .data a {
				color: #000;
				text-decoration: none;
			}
			
			#content .contact .data a:focus,
			#content .contact .data a:hover {
				text-decoration: underline;
			}
		
		#content .contact .map {
			border: 1px solid #ccc;
			float: left;
			padding: 2px;
			width: 347px;
		}
	
	/* =|work
	--------- */
	#content .work {}
	
		#content .work .data,
		#content .work .related {
			float: right;
			width: 170px;
		}
		
		#content .work .data {
			color: #3F3F3F;
			font-style: italic;
			margin-bottom: 2em;
		}
		
			#content .work .data h3 {
				color: #000066;
				font-size: 1em;
				line-height: 1.2em;
				margin: 0;
				padding: 0;
			}
			
			#content .work .data ul {
				line-height: 1.2em;
				margin: 0;
				padding: 0;
			}
			
				#content .work .data ul li {
					list-style-type: none;
				}
				
					#content .work .data ul li a {
						color: #7F7F7F;
						text-decoration: none;
					}
					
					#content .work .data ul li a:focus,
					#content .work .data ul li a:hover {
						text-decoration: underline;
					}
		
		#content .work .slideshow {
			float: left;
			min-height: 300px;
			width: 530px;
		}
		
			#content .work .slideshow .wrapper-placeholder {
				height: 418px;
				width: 530px;
			}
		
				#content .work .slideshow .placeholder {
					display: block;
					margin: 0 auto;
				}
		
			#content .work .slideshow ul {
				margin: 1em 0 0 -10px;
				padding: 0;
				width: 540px;
			}
			
				#content .work .slideshow ul li {
					float: left;					
					list-style-type: none;
					margin: 0 0 1em 10px;
				}
				
					#content .work .slideshow ul li a {
						display: block;
						height: 134px;
						width: 170px;
					}
					
					#content .work .slideshow ul li a img {
						display: block;
						margin: 0 auto;
					}
	
	/* =|works
	---------- */
	#content .works {
		margin: 0;
		padding: 0;
	}
	
		#content .works li {
			float: left;
			height: 180px;
			list-style-type: none;
			margin-right: 10px;
			width: 170px;
		}
		
			#content .works li strong {
				font-size: .9166em;
				font-style: italic;
				font-weight: normal;
			}
			
			#content .works li a {
				display: block;
				height: 134px;
				position: relative;
				text-decoration: none;
				width: 170px;
			}
			
			#content .works li a:focus,
			#content .works li a:hover {}
			
			#content .works li a img {
				display: block;
				margin: 0 auto;
			}
			
				#content .works li a em {
					background: #404040;
					background: rgba(0,0,0,.65);
					bottom: 0;
					color: #fff;
					display: none;
					font-size: 1.1666em;
					font-style: italic;
					left: 0;
					position: absolute;
					text-align: right;
					width: 100%;
				}
				
					#content .works li a em span {
						display: block;
						padding: 0.5em 0.25em;
					}
				
				#content .works li a:focus em,
				#content .works li a:hover em {
					display: block;
				}