/* 
	xhtml & css by Emiliano Mateu - colo.mateu@gmail.com
	Date: 15/09/2008.
	Modified: 03/12/2008.
*/

/* Basics */
*{
margin: 0;
padding: 0;
}
body, html{
width: 100%;
cursor: default;
font-family: Arial, "Helvetica", Verdana, sans-serif;
/*font-family: "Georgia", Times New Roman, Times, serif;*/
background: #292E36;
}
body{
padding: 22px 0 22px 0;
}
hr{display: none;}
label{cursor: pointer;}
a{cursor: pointer;}
a:active{outline: 0 !important;}
a img{border: none;}
abbr, acronym{cursor: help; border: none;}

/* Generics */
#header p,
.skip{
position: absolute;
top: -999px;
}
.fLeft{
width: 49%;
float: left;
}
.fRight{
width: 49%;
float: right;
}
.clear{clear: both;}

/* Structure */
#container{
width: 972px;
margin: 0 auto 0 auto;
background: #fff;
}
#header{
height: 94px;
background: url('../images/bg_header.png') no-repeat left top;
}
	#header h1{
	width: 280px;
	float: left;
	}
		#header h1 a{
		outline: 0; 
		display: block;
		height: 82px;
		color: #292E36;
		font-size: 0.5em;
		text-indent: -9999px;
		}
		
	#nav{
	float: right;
	}
		#nav ul{
		list-style: none;
		padding: 0 13px 0 0;
		}
			#nav ul li{
			float: left;
			height: 39px;
			padding: 55px 0 0 0;
			}
			
			#s1 #nav ul #b1,
			#s2 #nav ul #b2,
			#s2_1 #nav ul #b2,
			#s2_2 #nav ul #b2,
			#s3 #nav ul #b3,
			#s3_1 #nav ul #b3,
			#s3_2 #nav ul #b3,
			#s4 #nav ul #b4,
			#s5 #nav ul #b5,	
			#nav ul li:hover{background: url('../images/active_deco.png') no-repeat center bottom;}
			
			#nav ul #b1 a{width: 70px; background-position: 18px top;}
			#nav ul #b2 a{width: 108px; background-position: -52px top;}
			#nav ul #b3 a{width: 92px; background-position: -160px top;}
			#nav ul #b4 a{width: 99px; background-position: -252px top;}
			#nav ul #b5 a{width: 82px; background-position: -351px top;}
			
			#nav ul #b1 a:hover, #nav ul #b1 a:focus, #s1 #nav ul #b1 a{background-position: 18px bottom;}
			#nav ul #b2 a:hover, #nav ul #b2 a:focus, #s2 #nav ul #b2 a{background-position: -52px bottom;}							
				#s2_1 #nav ul #b2 a{background-position: -52px bottom;}
				#s2_2 #nav ul #b2 a{background-position: -52px bottom;}
				
			#nav ul #b3 a:hover, #nav ul #b3 a:focus, #s3 #nav ul #b3 a{background-position: -160px bottom;}
				#s3_1 #nav ul #b3 a{background-position: -160px bottom;}
				#s3_2 #nav ul #b3 a{background-position: -160px bottom;}
				
			#nav ul #b4 a:hover, #nav ul #b4 a:focus, #s4 #nav ul #b4 a{background-position: -252px bottom;}
			#nav ul #b5 a:hover, #nav ul #b5 a:focus, #s5 #nav ul #b5 a{background-position: -351px bottom;}
			
			/* Event */
			#nav ul #b2 ul,
			#nav ul #b3 ul{
			display: none;
			}
			#nav ul #b2:hover,
			#nav ul #b3:hover{
			height: 62px;
			padding: 32px 0 0 0;
			}
			#nav ul #b2:hover ul,
			#nav ul #b3:hover ul{
			display: block;
			}
						
			#nav ul #b1:hover a{background-position: 18px bottom;}
			#nav ul #b2:hover a{background-position: -52px top;}
			#nav ul #b3:hover a{background-position: -160px top;}				
			#nav ul #b4:hover a{background-position: -252px bottom;}
			#nav ul #b5:hover a{background-position: -351px bottom;}
			/* #b2 & #b3 a hover */
			#nav ul #b2:hover a:hover{background-position: -52px bottom;}
				#nav ul #b2:hover div:hover{display: block; background: url('../images/bullet.png') no-repeat 8px 9px;}
				
			#nav ul #b3:hover a:hover{background-position: -160px bottom;}
				#nav ul #b3:hover div:hover{display: block; background: url('../images/bullet.png') no-repeat 8px 9px;}
						
			#nav ul li a{
			outline: 0;
			display: block;
			height: 20px;
			color: #292E36;
			font-size: 0.5em;
			text-indent: -9999px;
			background: url('../images/bg_nav.png') no-repeat left top;
			}
				
			#nav ul li ul{
			padding: 2px 0 0 0;
			}
				#nav ul li ul li{
				float: none;
				padding: 0;
				height: 11px;
				}
					#nav ul li ul li:hover{
					background: url('../images/bullet.png') no-repeat 8px 1px;
					}
					
					#nav ul li ul li a{
					outline: 0; 
					display: block;
					height: 12px;
					width: 100%;
					color: #292E36;
					font-size: 0.5em;
					text-indent: -9999px;
					}
				
					/* Sub cats */
					#nav ul #b2 ul .sub1 a,
					#nav ul #b2 ul .sub1 a:hover,
					#nav ul #b2 ul .sub1 a:focus{
					background: url('../images/b_method.png') no-repeat 18px top !important;
					}
					#nav ul #b2 ul .sub2 a,
					#nav ul #b2 ul .sub2 a:hover,
					#nav ul #b2 ul .sub2 a:focus{
					background: url('../images/b_services.png') no-repeat 18px top !important;
					}					
					/* Sub cats */
					#nav ul #b3 ul .sub1 a,
					#nav ul #b3 ul .sub1 a:hover,
					#nav ul #b3 ul .sub1 a:focus{
					background: url('../images/b_ourteam.png') no-repeat 18px top !important;
					}
					#nav ul #b3 ul .sub2 a,
					#nav ul #b3 ul .sub2 a:hover,
					#nav ul #b3 ul .sub2 a:focus{
					background: url('../images/b_engage.png') no-repeat 18px top !important;
					}
					
#info{
padding: 0 15px 0 15px;
}
	#info p{
	color: #464747;
	font-size: 0.75em;
	line-height: 19px;
	padding: 0 0 7px 0;
	}
	#info p.leyend{
	display: none;
	}
	#info ul{
	margin: 0 0 0 14px;
	}
		#info ul li{
		color: #464747;
		font-size: 0.75em;	
		line-height: 19px;
		padding: 0 0 5px 0;
		}
	
	#info a{
	color: #007CC3;	
	}
		#info a:hover,
		#info a:focus{
		color: #8CA90F;
		}
		
.end{
clear: both;
width: 944px;
height: 25px;
margin: 0 auto 0 auto;
border-top: 1px solid #B5B5B5;
}
#footer{
width: 972px;
margin: 0 auto 0 auto;
}
	#footer p{
	color: #bfc1c3;
	font-size: 0.625em;
	text-align: right;
	padding: 11px 14px 0 0;
	}


/*
	Sections / Modules:
**/

/* -------// #s2 // -- */
#s1 #info div.intro_text{
height: 234px;
color: #292E36;
font-size: 0.5em;
text-indent: -9999px;
padding: 14px 0 0 0;
background: url('../images/index_content.png') no-repeat left 14px;
}

/* -------// #s2 // -- */
#s2 #container{background: url('../images/s2_deco.jpg') no-repeat 15px 83px #fff;}
#s2 #info{
height: 402px;
padding-left: 523px;
}
	#s2 #info h2{
	height: 86px;
	color: #292e36;
	font-size: 0.5em;
	text-indent: -9999px;
	margin: 0 0 16px 0;
	background: url('../images/t_whatwedo.png') no-repeat left bottom;
	}
	#s2 #info p{
	width: 395px;
	}
	
/* -------// #s2_1 // -- */
#s2_1 #container{background: url('../images/s2_1_deco.png') no-repeat 133px 129px #fff;}
#s2_1 #info{
height: 900px;
}
	#s2_1 #info h2{
	height: 130px;
	color: #292e36;
	font-size: 0.5em;
	text-indent: -9999px;
	}
	#s2_1 #info p{
	clear: both;
	padding: 0 117px 20px 118px;
	}
	#s2_1 #info ol{
	list-style: none;
	height: 318px;
	padding: 0 0 0 118px;
	}
		#s2_1 #info ol li{
		width: 213px;
		float: left;
		margin: 0 34px 0 0;
		}
			#s2_1 #info ol li h3{
			height: 67px;
			color: #292e36;
			font-size: 0.5em;
			text-indent: -9999px;
			}
			#s2_1 #info ol li p{
			color: #FCFCFF;
			padding: 0 32px 3px 22px;
			}
			#s2_1 #info ol li ul{
			list-style: none;
			margin: 0;
			}
				#s2_1 #info ol li ul li{
				width: auto;
				float: none;
				color: #FCFCFF;
				font-size: 0.8em;
				margin: 0;
				padding: 0 20px 4px 30px;
				background: url('../images/bullet2.png') no-repeat 21px 7px;
				}
				#s2_1 #info ol li.development ul li{
				padding-bottom: 1px;
				}
					#s2_1 #info ol li ul li ul{
					padding: 0;
					}
						#s2_1 #info ol li ul li ul li{
						font-size: 1em;
						padding: 0 0 0 11px;
						background: url('../images/bullet3.png') no-repeat 3px 7px;
						}

/* -------// #s2_2 // -- */
#s2_2 #container{background: url('../images/s2_2_deco.jpg') no-repeat 15px 83px #fff;}
#s2_2 #info{
height: 457px;
padding-left: 424px;
}
	#s2_2 #info h2{
	height: 66px;
	color: #292e36;
	font-size: 0.5em;
	text-indent: -9999px;
	margin: 0 0 10px 0;
	background: url('../images/t_services.png') no-repeat left bottom;
	}
	#s2_2 #info h3{
	color: #000;
	font-size: 0.75em;
	font-weight: bold;
	padding: 10px 0 1px 0;
	}						
	#s2_2 #info p{
	width: 500px;
	}	

/* -------// #s3 // -- */
#s3 #container{background: url('../images/s3_deco.jpg') no-repeat 15px 83px #fff;}
#s3 #info{
height: 764px;
padding-left: 488px;
}
	#s3 #info h2{
	height: 66px;
	color: #292e36;
	font-size: 0.5em;
	text-indent: -9999px;
	margin: 0 0 16px 0;
	background: url('../images/t_aboutus.png') no-repeat left bottom;
	}
	#s3 #info p{
	width: 441px;
	}
	#s3 #info ul{
	width: 441px;
	}
	
/* -------// #s3_1 // -- */
#s3_1 #container{background: url('../images/s3_1_deco.jpg') no-repeat 15px 83px #fff;}
#s3_1 #info{
height: 527px;
padding: 187px 65px 0 34px;
}
	#s3_1 #info h2{
	height: 21px;
	color: #292e36;
	font-size: 0.5em;
	text-indent: -9999px;
	margin: 0 0 16px 0;
	background: url('../images/t_ourteam.png') no-repeat left bottom;
	}
	#s3_1 #info p{
	padding-bottom: 20px;
	}
	
/* -------// #s3_2 // -- */
#s3_2 #container{background: url('../images/s3_2_deco.jpg') no-repeat 15px 83px #fff;}
#s3_2 #info{
height: 513px;
padding: 0 50px 0 334px;
}
	#s3_2 #info h2{
	height: 66px;
	color: #292e36;
	font-size: 0.5em;
	text-indent: -9999px;
	margin: 0 0 10px 0;
	background: url('../images/t_engageus.png') no-repeat left bottom;
	}
	#s3_2 #info h3{
	color: #000;
	font-size: 0.75em;
	font-weight: bold;
	padding: 10px 0 4px 4px;
	}
	#s3_2 #info ul{
	padding-left: 4px;
	}

/* -------// #s4 // -- */
#s4 #info{
padding: 35px 30px 0 40px;
}
	#s4 #info h2{
	height: 28px;
	color: #292e36;
	font-size: 0.5em;
	text-indent: -9999px;
	margin: 0 0 16px 0;
	background: url('../images/t_portfolio.png') no-repeat left bottom;
	}
	#s4 #info .fLeft{
	width: 45%;
	padding-bottom: 12px;
	background: url('../images/bg_mod_portf.png') no-repeat right 11px;	
	}
	#s4 #info .fRight{
	width: 50.5%;
	padding-bottom: 18px;
	}
		
	#s4 #info .work{
	padding: 0 42px 30px 0;
	text-align: right;
	}
		#s4 #info .work p{
		color: #000;
		font-size: 0.75em;
		padding: 2px 0 0 0;
		}
			#s4 #info .work p strong{
			font-weight: normal;
			}
		
	#s4 #info .notes{
	padding: 23px 0 10px 0;
	}
		#s4 #info .notes h2{
		height: 28px;
		color: #292e36;
		font-size: 0.5em;
		text-indent: -9999px;
		margin: 0 0 4px 0;
		background: url('../images/t_clients.png') no-repeat left bottom;
		}
		#s4 #info .notes h3{
		color: #000;
		font-size: 0.75em;
		padding: 17px 33px 0 0;
		}
		#s4 #info .notes p{
		font-weight: normal;
		padding: 0 10px 0 0;
		}
			#s4 #info .notes .fLeft{
			width: 49%;
			padding: 0;
			background: none;
			}
			#s4 #info .notes .fRight{
			width: 40%;
			padding: 0;
			}
	
/* -------// #s5 // -- */
#s5 #container{background: url('../images/s5_deco.jpg') no-repeat 15px 83px #fff;}
#s5 #info{
height: 449px;
padding-left: 490px;
}
	#s5 #info h2{
	height: 46px;
	color: #292e36;
	font-size: 0.5em;
	text-indent: -9999px;
	}	
	#s5 #info p abbr{
	padding: 0 8px 0 0;
	}
	#s5 #gmap{
	}
		#s5 #gmap a{
		display: block;
		width: 85px;
		height: 35px;
		padding: 21px 0 0 91px;
		background: url('../images/gmap_icon.png') no-repeat left top;
		}