@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------------------------------*/
/* ----------------------- PROPIEDADES QUE AFECTAN A TODAS LAS PÁGINAS ------------------------ */
/*----------------------------------------------------------------------------------------------*/

div#lazo{
	margin:0px;
	padding:0px;
	margin-top:20px;
	width:247px;
	height:246px;
	position:absolute;
	background:url(../img/cumplimos10.png) no-repeat;
	z-index:1;
}





*{ /* Propiedades asignadas a todo a no ser que se especifique lo contrario */
	margin: 0;
	padding: 0;
 }
body{ /* Color de fondo de un gris muy claro y barra azul de dos colores que está en la parte superior */
	background: url(../css-img/top_bar_color.gif) repeat-x #fafafa;	
    }
div#main{ /* Cuerpo con una anchura de 1000px para correcta visualización en cualquier resolución */
	width: 1000px;
	margin: 0 auto;
	bottom:50px;
	}
div#main div#main_cabecera{ /* Cabecera con altura determinada y en la posición relativa que le corresponde: al principio */
	position:relative;
	height:225px;
	}
div#main div#main_cabecera div#logo{ /* Posición del logo y eliminación del borde */
	position:absolute;
	top:50px;
	left:50px;
	border:0px;
}
div#main div#main_cabecera div#cabecera_derecha{ /* Propiedades del menú de navegación */
	position: absolute;
	top: 25px;
	right:25px;
	text-align:right;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	font-size:15px;
	}
div#main div#main_cabecera div#cabecera_derecha ul{	/* Al ser el menú de navegación una lista desordenada si no se añade esto aparece con puntos a la izquierda */
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }
div#main div#main_cabecera div#cabecera_derecha a{	/* Alineamos el texto en el centro de cada ul y lo posicionamos para que no se solapen al aumentar de tamaño (Menú de navegación) */
	display:block;
	height:2px;
	color:#004c8c;
	vertical-align:middle;
	display: block;
    padding: 10px 10px 10px 20px;
    }
div#main div#main_cabecera div#cabecera_derecha a:hover{ /* Propiedad que hace que aumente el tamaño del texto al pasar el ratón por encima del menú de navegación */
	font-size:22px;
	text-transform:uppercase;	
	color:#004c8c;	
	}
div#main div#main_cabecera div#cabecera_derecha a#a_sel{ /* Estilo que se aplica al nombre de la página en la que se está actualmente, para que destaque */
	font-size:22px;
	text-transform:uppercase;	
	color:#004c8c;
	margin-bottom:6px;
	padding-top:10pxpx;	
	}
div#main div#main_cabecera div#cabecera_secundaria{ /* Propiedades del texto que aparece debajo del logo */
	position: absolute;
	top: 175px;
	left:60px;
	color:#000080;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	font-size:12px;
	}
div#main  div#barra_sep{ /* Barra azul que separa la cabecera del cuerpo de la página */
	background:url(../css-img/barra_separad.png) repeat-x #fafafa;
	width:1000px;
	height:2px;
	position: absolute;
	top:225px;
    }	
div#main  div#barra_sep2{ /* Barra azul que separa el cuerpo del pie */
	background:url(../css-img/barra_pie.png) repeat-x #fafafa;
	width:1000px;
	height:6px;
	position: relative;
	top:80px;
    }
div#main div#foot{ /* Propiedad para que el pie siempre esté al final del documento */
	position:relative;
    }
div#main div#barra_azul{ /* Zona azul claro que se encuentra dentro de la línea separadora entre el cuerpo y el pie */
	background:url(../css-img/barra_azul.png) repeat-x #fafafa;
	width:245px;
	height:6px;
	position:relative;
	margin-top:74px;
	margin-left:555px;
    }
div#main div#main_body{ /* Contenedor dentro del cuerpo para introducir contenido */
	position:relative;
	margin-left:25px;
	}
div#main div#copyright{ /* Como su nombre indica, propiedades del texto del copyright */
	height:50px;
	width:228px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	color:#004c8c;
	position:relative;
	margin-top:0px;
	margin-left:555px;
	border-left:#0077db solid 1px;
	border-right:#0077db solid 1px;
	margin-bottom:25px;
	padding-top:6px;
	padding-left:8px;
	padding-right:8px;
	float:left;
    }
div#main div#aviso_legal{ /*Propiedades del texto del aviso legal */
	position:relative;
	height:50px;
	width:70px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	color:#004c8c;
	position:relative;
	float:left;
	margin-bottom:25px;
	margin-left:-1px;
	border-left:#0077db solid 1px;
	border-right:#0077db solid 1px;
	padding-top:6px;
	padding-left:10px;
	padding-right:10px;
	line-height: 40px;
    }
div#main div#aviso_legal a{ /* Ponemos color al enlace del aviso legal */
    color:#004c8c;	
    }

/*----------------------------------------------------------------------------------------------*/
/* ---------------------- PROPIEDADES QUE AFECTAN A "INICIO" O "INDEX" ------------------------ */
/*----------------------------------------------------------------------------------------------*/	
	
/* El efecto de pasar de una imagen a otra se hace con una sola imagen que tiene el doble del tamaño de largo de la original y simplemente se alinea a la izq o derecha, produciendo el efecto de que son dos imágenes diferentes teniendo que cargar así sólo una. Esto se repite en todas. Todas tienen dos tipos: El normal y el hover, que es cuando está sin tener el ratón encima y teniéndolo, respectivamente. */

div#main div#main_body div#soluciones div#sol_1{ 
	background:url(../img/soluciones_para4.png) no-repeat left;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_1:hover{
	background-position:right;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_2{
	background:url(../img/soluciones_para5.png) no-repeat left;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_2:hover{
	background-position:right;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_3{
	background:url(../img/soluciones_para6.png) no-repeat left;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_3:hover{
	background-position:right;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_4{
	background:url(../img/soluciones_para1.png) no-repeat left;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_4:hover{
	background-position:right;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_5{
	background:url(../img/soluciones_para2.png) no-repeat left;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_5:hover{
	background-position:right;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_6{
	background:url(../img/soluciones_para3.png) no-repeat left;
	width:950px;
	height:150px;
	margin-top:75px;
    }
div#main div#main_body div#soluciones div#sol_6:hover{
	background-position:right;
	width:950px;
	height:150px;
	margin-top:75px;
    }
	
/*----------------------------------------------------------------------------------------------*/
/* ------------------ PROPIEDADES QUE AFECTAN A "PERSONAL" O "QUIENES SOMOS" ------------------ */
/*----------------------------------------------------------------------------------------------*/

/* Poco que decir aquí, tres contenedores con imágenes de fondo y un tamaño acorde a la imagen */

div#main div#main_body div#neuronas_index{
	background-image:url(../img/neuronas_index.png);
	color:#0000b0;
	width:950px;
	height:501px;
	}
	
div#main div#main_body div#bombilla{
	background:url(../img/bombilla.png) no-repeat;
	width:875px;
	height:450px;
	margin-top:50px;
	margin-left:25px;
	}				
div#main div#main_body div#conocenos2{
	background:url(../img/conocenos2.png) no-repeat;
	width:900px;
	height:450px;
   }

/*----------------------------------------------------------------------------------------------*/
/* --------------- PROPIEDADES QUE AFECTAN A "PRESENCIA" O "NUESTRA PRESENCIA" ---------------- */
/*----------------------------------------------------------------------------------------------*/	   
   
/* Poco que decir aquí, tres contenedores con imágenes de fondo y un tamaño acorde a la imagen */   
   
div#main div#main_body div#presencia1{
	background:url(../img/presencia1.png) no-repeat;
	height:400px;
	width:900px;
    }
div#main div#main_body div#empresas2{
	background:url(../img/empresas2.png) no-repeat;
	height:550px;
	width:900px;
    }
	
/*----------------------------------------------------------------------------------------------*/
/* -------------------------- PROPIEDADES QUE AFECTAN A "PRODUCTOS" --------------------------- */
/*----------------------------------------------------------------------------------------------*/
	
/* Poco que decir aquí, tres contenedores con imágenes de fondo y un tamaño acorde a la imagen */ 
	
div#main div#main_body div#productos{
	margin-top:60px;
	background:url(../img/productos.png) no-repeat;
	height:800px;
	width:900px;
    }

	
/*----------------------------------------------------------------------------------------------*/
/* -------------------------- PROPIEDADES QUE AFECTAN A "SERVICIOS" --------------------------- */
/*----------------------------------------------------------------------------------------------*/
	
	
div#main div#main_body div#servicios{
	width:950px;
	height:546px;
	margin:75px 0px 0px 5px;
	position:relative;
    }
div#main div#main_body div#servicio0{
	background:url(../img/servicio0.png) no-repeat left top;
	width:650px;
	height:546px;
	position:absolute;
	left:300px;
    }
div#main div#main_body div#servicios1{
	background:url(../img/servicios.png) no-repeat left top;
	width:299px;
	height:78px;
	position:absolute;
	-webkit-filter: grayscale(0%);
    }
div#main div#main_body div#servicios1:hover {
	-webkit-filter: grayscale(100%);	
    }	
div#main div#main_body div#servicios1:hover + div[id=servicios1_2]{
	background:url(../img/servicios1.png) no-repeat left top;
	width:950px;
	height:546px;
    position:absolute;
	z-index: 100;
    }
div#main div#main_body div#servicios1_2{
	margin-left:300px;
	width:600px;
	height:500px;
	position:absolute;
    }	
div#main div#main_body div#servicios2{
	background:url(../img/servicios.png) no-repeat left top;
    margin-top:78px;
	width:299px;
	height:78px;
	position:absolute;
    background-position:0px -78px;
	-webkit-filter: grayscale(0%);
    }
div#main div#main_body div#servicios2:hover {
	-webkit-filter: grayscale(100%);	
    }	
div#main div#main_body div#servicios2:hover + div[id=servicios2_2]{
	background:url(../img/servicios2.png) no-repeat left top;
    margin-top:0px;
	width:950px;
	height:546px;
    position:absolute;
	z-index: 100;
    }
div#main div#main_body div#servicios2_2{
	margin-left:300px;
	width:600px;
	height:500px;
	position:absolute;
    }	
div#main div#main_body div#servicios3{
	background:url(../img/servicios.png) no-repeat left top;
    margin-top:156px;
	width:299px;
	height:78px;
	position:absolute;
    background-position:0px -156px;
	-webkit-filter: grayscale(0%);
    }
div#main div#main_body div#servicios3:hover {
	-webkit-filter: grayscale(100%);	
    }
div#main div#main_body div#servicios3:hover + div[id=servicios3_2]{
	background:url(../img/servicios3.png) no-repeat left top;
    margin-top:0px;
	width:950px;
	height:546px;
    position:absolute;
	z-index: 100;
    }
div#main div#main_body div#servicios3_2{
	margin-left:300px;
	width:600px;
	height:500px;
	position:absolute;
    }
div#main div#main_body div#servicios4{
	background:url(../img/servicios.png) no-repeat left top;
    margin-top:234px;
	width:299px;
	height:78px;
	position:absolute;
    background-position:0px -234px;
	-webkit-filter: grayscale(0%);
    }
div#main div#main_body div#servicios4:hover {
	-webkit-filter: grayscale(100%);	
    }
div#main div#main_body div#servicios4:hover + div[id=servicios4_2]{
	background:url(../img/servicios4.png) no-repeat left top;
    margin-top:0px;
	width:950px;
	height:546px;
    position:absolute;
	z-index: 100;
    }
div#main div#main_body div#servicios4_2{
	margin-left:300px;
	width:600px;
	height:500px;
	position:absolute;
    }
div#main div#main_body div#servicios5{
	background:url(../img/servicios.png) no-repeat left top;
    margin-top:312px;
	width:299px;
	height:78px;
	position:absolute;
    background-position:0px -312px;
	-webkit-filter: grayscale(0%);
    }
div#main div#main_body div#servicios5:hover {
	-webkit-filter: grayscale(100%);	
    }	
div#main div#main_body div#servicios5:hover + div[id=servicios5_2]{
	background:url(../img/servicios5.png) no-repeat left top;
    margin-top:0px;
	width:950px;
	height:546px;
    position:absolute;
	z-index: 100;
    }
div#main div#main_body div#servicios5_2{
	margin-left:300px;
	width:600px;
	height:500px;
	position:absolute;
    }
div#main div#main_body div#servicios6{
	background:url(../img/servicios.png) no-repeat left top;
    margin-top:390px;
	width:299px;
	height:78px;
	position:absolute;
    background-position:0px -390px;
	-webkit-filter: grayscale(0%);
    }
div#main div#main_body div#servicios6:hover {
	-webkit-filter: grayscale(100%);	
    }	
div#main div#main_body div#servicios6:hover + div[id=servicios6_2]{
	background:url(../img/servicios6.png) no-repeat left top;
    margin-top:0px;
	width:950px;
	height:546px;
    position:absolute;
	z-index: 100;
    }
div#main div#main_body div#servicios6_2{
	margin-left:300px;
	width:600px;
	height:500px;
	position:absolute;
    }
div#main div#main_body div#servicios7{
	background:url(../img/servicios.png) no-repeat left top;
    margin-top:468px;
	width:299px;
	height:78px;
	position:absolute;
    background-position:0px -468px;
	-webkit-filter: grayscale(0%);
    }
div#main div#main_body div#servicios7:hover {
	-webkit-filter: grayscale(100%);	
    }	
div#main div#main_body div#servicios7:hover + div[id=servicios7_2]{
	background:url(../img/servicios7.png) no-repeat left top;
    margin-top:0px;
	width:950px;
	height:546px;
    position:absolute;
	z-index: 100;
    }
div#main div#main_body div#servicios7_2{
	margin-left:300px;
	width:600px;
	height:500px;
	position:absolute;
    }	
	

	
/*----------------------------------------------------------------------------------------------*/
/* -------------------------- PROPIEDADES QUE AFECTAN A "DESCARGAS" --------------------------- */
/*----------------------------------------------------------------------------------------------*/
	
div#main div#main_body div.descargas{
	margin-top:20px;
}	
	
	
/*----------------------------------------------------------------------------------------------*/
/* -------------------------- PROPIEDADES QUE AFECTAN A "CONTACTO" ---------------------------- */
/*----------------------------------------------------------------------------------------------*/
	

div#main div#main_body div#contenedor{
	height:450px;
	width:1000px;
    }
				
div#main div#main_body div#mapa{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	font-size:25px;
	color:#004c8c;
	height:400px;
	width:450px;
	position:relative;
	float:right;
	margin-top:50px;
	text-align:center;
	margin-right:50px;
    }
div#main div#main_body div#contacto{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant:small-caps;
	font-size:25px;
	color:#004c8c !important;
	height:400px;
	width:450px;
	position:relative;
	float:right;
	margin-top:50px;
	text-align:center;
	margin-right:50px;
    }
div#main div#main_body div#contacto a{
	color:#004c8c !important;
	text-decoration:none;
    }

/*----------------------------------------------------------------------------------------------*/
/* ---------------------------- PROPIEDADES QUE AFECTAN A "EMPLEO" ---------------------------- */
/*----------------------------------------------------------------------------------------------*/
	
div#main div#main_body div#empleo{
	background:url(../img/empleo.png) no-repeat;
	height:400px;
	width:900px;
    }


/*----------------------------------------------------------------------------------------------*/
/* ----------------- PROPIEDADES QUE AFECTAN A "AVISO LEGAL" O "AVISO-LEGAL" ------------------ */
/*----------------------------------------------------------------------------------------------*/


div#main div#main_body div#aviso p{
	line-height:20px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#004c8c;
	margin-top:8px;
}

div#main div#main_body div#aviso h1{
	margin-top:50px;
	margin-bottom:10px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#0077db;
	

}



