/* ********************** RESTABLECER CSS ************************** */
/* ******** Por: http://meyerweb.com/eric/tools/css/reset/ ********* */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	background: url(../img/bg-top.png) repeat-x top;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

a { text-decoration: none;}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ************* FIN TAG GLOBALES *************** */
/* ************* HEADER *************** */

#wrapper #top { width: 690px;
				margin: 0 auto;
				height: 199px;
				background: url(../img/depstudio-verde.png) no-repeat;
				background-position: 0px 0px;
				text-indent: -9000px;
}

#wrapper #top h1 { display: block;
				   width: 690px;
				   height: 199px;
}

#wrapper #top h1 a { display: block;
					 width: 690px;
					 height: 199px;
}

/* ************* FIN HEADER *************** */
/* ************* WRAPPER *************** */

#wrapper { width: 690px;
		   margin: 0 auto;
}

/* ************* FIN WRAPPER *************** */
/* ************* MENU *************** */

#wrapper #menu { width: 520px;
				height: 57px;
				background: url(../img/bg-menu.png) no-repeat;
				background-position: 0px -1px;
				padding-top: 20px;
				padding-left: 170px;
				overflow: hidden;
}

#wrapper #menu #botonera { width: 690px;
						   height: 30px;
}

#wrapper #menu #botonera #navegacion { display: block;
									   width: 496px;
									   height: 40px;
									   background: url(../img/botonera.png) no-repeat;
									   background-position: 0px -2px;
									   margin-top: 2px;
									   text-indent: -9000px;
}

#wrapper #menu #botonera #navegacion li { display: block;
										  float: left;
										  height: 31px;
										  /*background-color: RED;*/
}

#wrapper #menu #botonera #navegacion #quienes-somos { width: 164px;}

#wrapper #menu #botonera #navegacion #quienes-somos a { display: block; 
														width: 164px; 
														height: 32px;
}

#wrapper #menu #botonera #navegacion #quienes-somos a:hover { background: url(../img/botonera.png) no-repeat;
															  background-position: 1px -42px;
}

#wrapper #menu #botonera #navegacion #quienes-somos .seleccionado { background: url(../img/botonera.png) no-repeat;
															  background-position: 2px -83px;
}

#wrapper #menu #botonera #navegacion #quienes-somos .seleccionado:hover { background: url(../img/botonera.png) no-repeat;
															  background-position: 2px -83px;
}

#wrapper #menu #botonera #navegacion #nuestro-slogan { width: 180px;}

#wrapper #menu #botonera #navegacion #nuestro-slogan a { display: block; 
														width: 180px; 
														height: 39px;
}

#wrapper #menu #botonera #navegacion #nuestro-slogan a:hover { background: url(../img/botonera.png) no-repeat;
															  background-position: -163px -42px;
}

#wrapper #menu #botonera #navegacion #nuestro-slogan .seleccionado { background: url(../img/botonera.png) no-repeat;
																	 background-position: -162px -83px;
}

#wrapper #menu #botonera #navegacion #nuestro-slogan .seleccionado:hover { background: url(../img/botonera.png) no-repeat;
																		   background-position: -162px -83px;
}

#wrapper #menu #botonera #navegacion #contactenos { width: 150px;}

#wrapper #menu #botonera #navegacion #contactenos a { display: block; 
														width: 150px; 
														height: 39px;
}

#wrapper #menu #botonera #navegacion #contactenos a:hover { background: url(../img/botonera.png) no-repeat;
															  background-position: -343px -42px;
}

#wrapper #menu #botonera #navegacion #contactenos .seleccionado { background: url(../img/botonera.png) no-repeat;
															      background-position: -343px -83px;
}

#wrapper #menu #botonera #navegacion #contactenos .seleccionado:hover { background: url(../img/botonera.png) no-repeat;
															      background-position: -343px -83px;
}

/* ************* FIN MENU *************** */
/* ************** CUERPO ***************** */

#wrapper #head-info { width: 690px;
					  height: 69px;
					  background: url(../img/headerinfo.png) no-repeat;
					  background-position: 0px -1px;
}

#wrapper #cuerpo { width: 690px;
				   background: url(../img/bginfo.png) repeat-y;
				  /* height: 518px;*/
				  overflow: hidden;
}

#wrapper #cuerpo #col-izq { background: url(../img/bg-titulo.png) no-repeat;
						    width: 304px; 
						    height: 60px;
						    margin-left: 15px;
							padding-top: 10px;
							float:left;
}

#wrapper #cuerpo #col-izq h2 { text-indent: -9000px;
}

#wrapper #cuerpo #col-izq .tit-quienes-somos {width: 164px;
											  height: 29px;
											  background: url(../img/titulo-quienes-somos.png) no-repeat;
											  margin-left: 63px;
}

#wrapper #cuerpo #col-izq .tit-nuestro-slogan {width: 176px;
											   height: 29px;
											   background: url(../img/titulo-nuestro-slogan.png) no-repeat;
											   margin-left: 56px;
}

#wrapper #cuerpo #col-izq .tit-contactenos {width: 143px;
											   height: 29px;
											   background: url(../img/titulo-contactenos.png) no-repeat;
											   margin-left: 75px;
}

#wrapper #cuerpo #col-izq .tit-portfolio { width: 176px;
										   height: 29px;
										   background: url(../img/titulo-portfolio.png) no-repeat;
										   margin-left: 64px;
}

#wrapper #cuerpo .portfolio { width: 211px;
							  height: 279px; 
							  background: url(../img/portfolio.png) no-repeat;
							  margin-top: 14px;
							  margin-left: 40px;
							  padding-top: 1px;
							  overflow: hidden;
							  clear: both;
}



#wrapper #cuerpo .portfolio h3 a { display: block;
							     width: 132px;
								 height: 28px;
								 background: url(../img/link-portfolioie6.png) no-repeat;
								 text-indent: -9999px;
								 margin-top: 192px;
								 margin-left: 37px;
								 cursor: pointer;
}
 
#wrapper #cuerpo #col-der { width: 371px;
							float: right ;
}

#wrapper #cuerpo .contacto { background: url(../img/contacto.png) no-repeat;
							 height: 518px;
}

#wrapper #cuerpo .contacto .infocontent { width: 318px;
										  padding-top: 100px;
										  padding-left: 20px;
										  margin-left: 1px;
}

#wrapper #cuerpo .contacto .infocontent p {	font-family: Arial;
											font-size: 12px;
											font-weight: normal;
											line-height: 1.3em;
}

#wrapper #cuerpo #col-der .infocontent .proyectos h4 { margin-bottom: 5px;}

#wrapper #cuerpo #col-der .infocontent .proyectos p {font-size: 11px;}

#wrapper #cuerpo #col-der .infocontent .proyectos p strong { font-size: 11px;}

#wrapper #cuerpo #col-der .infocontent .proyectos ul { margin-left: 20px;}

#wrapper #cuerpo #col-der .infocontent .proyectos ul li { background: url(../img/bg-li.png) no-repeat;
														  background-position: 0px 5px;
			  										      padding-left: 10px;
														  display: block;
														  font-size: 10px;
}

#wrapper #cuerpo #col-der .infocontent .proyectos #imagen-sitio { display: block;
																  width: 300px;
																  height: 98px;
																  margin-left: 0px;
 																  margin-top: 3px;
}

#wrapper #cuerpo #col-der .infocontent .proyectos #imagen-sitio img { border: dashed 1px #00923F;
																	  padding: 2px;
}

#wrapper #cuerpo #col-der .infocontent .proyectos #linksitio { display: block;
															   background: url(../img/bg-li.png) no-repeat;
															   background-position: 0px 5px;
															   padding-left: 10px;
															   margin-top: 5px;
															   margin-left: 20px;
															   color: #000;
															   font-size: 11px;
															   font-weight: bold;
}

#wrapper #cuerpo #col-der .infocontent .proyectos #linksitio:hover { color: #00923F;
}


#wrapper #cuerpo #col-der .infocontent .nav-proyectos { display: block;
														width: 300px;
														margin: 0 auto;
														text-align: center;
														border-top: dashed 1px #00923F;
														margin-top: 5px;
														padding-top: 5px;
														font-size: 13px;
}

#wrapper #cuerpo #col-der .infocontent .nav-proyectos a { color: #000;
}

#wrapper #cuerpo #col-der .infocontent .nav-proyectos a:hover { color: #00923F; 
																cursor: pointer;
																text-decoration: underline;
}

#wrapper #cuerpo .contacto .infocontent form legend { display: none;

}

#wrapper #cuerpo .contacto .infocontent form { margin-top: 20px;
										       font-family: Arial;
}

#wrapper #cuerpo .contacto .infocontent form label { display: block;
														 height: 22px;
														 width: 106px;
														 background: url(../img/lbl.png) no-repeat top;
														 float: left;
														 font-family: Arial;
														 font-weight: bold;
														 font-size: 10px;
														 text-align: right;
														 color: #fff;	
														 margin-top: 0px;
														 padding-top: 9px;
														 padding-right: 4px;
														 margin-right: 3px;
														 margin-left: 12px;
}

#wrapper #cuerpo .contacto .infocontent form #depcontactonombre, #wrapper #cuerpo .contacto .infocontent form #depcontactomail { display: block;
		 														  height: 22px;
																  width: 171px;
																  background: url(../img/bginput.png) no-repeat top;
																  float: left;
																  border: 0px;
																  margin: 0;
																  color: #fff;
																  padding-top: 8px;
																  padding-left: 5px;
																  font-family: Arial;
																  font-weight: bold;
																  font-size: 10px;
}

#wrapper #cuerpo .contacto .infocontent form textarea { margin-top: 80px;
														display: block;
														width: 257px;
														height: 122px;
														border: 0px;
														background: url(../img/bgtxtarea.png) no-repeat center;
														margin-left: 14px;
														color: #fff;
														padding: 15px;
														font-size: 11px;
														font-weight: bold;
														margin-bottom: 0px;
}

#wrapper #cuerpo .contacto .infocontent form button { width: 141px; height: 32px; border: 0; text-indent: -9000px; cursor: pointer; margin-top: 0px; margin-left: 89px;}

#wrapper #cuerpo .contacto .infocontent form .botonenviar { width: 141px; height: 32px; background: url(../img/enviar.png) no-repeat; }


#wrapper #cuerpo .informacion .infohead { display: block;
										  background: url(../img/infotop.png) no-repeat;
										  width: 371px;
										  height: 111px;
}

#wrapper #cuerpo .informacion .infocontent { background: url(../img/infoback.png) repeat-y; 
											 padding: 12px 31px 0 30px;
											 font-family: Arial;
											 font-size: 13px;
											 font-weight: normal;
											 line-height: 1.3em;
}

#wrapper #cuerpo .informacion .infocontent span, #wrapper #cuerpo .contacto .infocontent span { color: #00923F;
												  font-weight: bold;
}

#wrapper #cuerpo .informacion .infocontent strong { font-size: 14px; 
}

#wrapper #cuerpo .informacion .infocontent p a { color: #000;
}

#wrapper #cuerpo .informacion .infocontent p a:hover { border-bottom: dashed 1px #00923F;
}

#wrapper #cuerpo .informacion .infofoot { display: block;
										  background: url(../img/infoot.png) no-repeat;
										  width: 371px;
										  height: 65px;
}

#wrapper #foot-info { width: 690px;
					  height: 69px;
					  background: url(../img/footerinfo.png) no-repeat;
					  background-position: 0px 0px;
}

/* ************* FIN CUERPO *************** */
/* ************** FOOTER ***************** */

#footer { width: 100%;
		  height: 228px;
		  background: url(../img/bg-foot.png) repeat-x;
		  background-position: 0px -1px;
		  margin-bottom: 0px !important; 
		  padding-bottom: 0px !important;
		  overflow: hidden;
}

#footer #panel-foot { width: 690px;
					  height: 228px;
					  background: url(../img/footer.png) no-repeat;
					  margin: 0 auto;
					  background-position: 0px -1px;
					  margin-bottom: 0px;
					  padding-bottom: 0px;
}

#footer #panel-foot #validation { width: 690px;
								  height: 132px;
}

#footer #panel-foot #validation #val-izq { width: 330px; 
										   height: 132px;
										   float: left;
}

#footer #panel-foot #validation #val-izq a { width: 198px;
											 height: 18px;
											 display: block;
											 background: url(../img/mail.png) no-repeat;
											 text-indent: -9999px;
											 margin-top: 53px;
											 margin-left: 35px;
}

#footer #panel-foot #validation #val-der { width: 160px;
										   height: 92px;
										   float: right;
										   margin-left: 170px;
										   margin-top: 40px;
}

#footer #panel-foot #validation #val-der a { float: left;

}

#footer #panel-foot #validation #val-der .validhtml { display: block;
													  width: 75px;
													  height: 18px;
													  background: url(../img/valhtml.png) no-repeat;
													  text-indent: -9000px;
													  margin-right: 5px;
}

#footer #panel-foot #validation #val-der .validcss { display: block;
													 width: 54px;
													 height: 18px;
													 background: url(../img/valcss.png) no-repeat;
													 text-indent: -9000px;

}

#footer #panel-foot #derechos { width: 690px;
								height: 96px;
								margin-top: 30px;
}

#footer #panel-foot #derechos .derechos-izq { display:block;
											  width: 500px;
											  height: 60px;
											  float: left;
											  color: #878B92;
											  font-family: Tahoma;
											  font-size: 11px;
											  font-weight: normal;
											  padding-top: 13px;
											  margin-left: 10px;
}

#footer #panel-foot #derechos .derechos-der { display:block;
											  width: 60px;
											  height: 34px;
											  float: right;
											  text-indent: -9999px;

}

#footer #panel-foot #derechos .derechos-der a {width: 60px;
											   height: 34px;
											   display: block;
											   background: url(../img/logofoot.png) no-repeat;
}