@charset "ISO-8859-1";

/* General Reset
--------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

/* General
--------------------------------------------------*/

body {
	font-size: 76%;
	font-family: 'verdana', 'helvetica', 'arial', sans-serif; 
	letter-spacing: -1px;
	background: #FFF;
	color: #444;
    } 

/* Typography
--------------------------------------------------*/

a {
	text-decoration: underline;
	color: #810101;
	}
a:link {
	}
a:visited {
	}
a:active {
	}
a:hover {
	color: orange;
	}

h1 {
/*	font-size: 1em; */
	font-size: 1.2em;
	color: #810101;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
h2 {
	font-size: 1.0em;
	color: #810101;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
h3 {
	font-size: 0.8em;
	color: #810101;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}

img {
	border: 0;
	}
ol, ul, li {/*
	list-style: none;*/
	font-size: 1.0em;
	line-height: 1.8em;
	margin-top: 0.2em;
	margin-bottom: 0.1em; 
	}
p {
	font-size: 1.0em;
	line-height: 1.8em;
	margin: 1.2em 0em 1.2em 0em;
	}
li > p {
	margin-top: 0.2em;
	}

/* Layout
--------------------------------------------------*/	
	
#container {
	width: 750px;
	height: 60em;
   	margin: 0 auto; 
   	background: #FFF;
   	border: 0px solid #EEEEEE;
   	text-align: left;
	<p>Estudio</p>
}

#header { 						/* este el todo el bloque de los menus de seleccion. si aumento el height baja toda la pagina, el main botton etc.. */
	width: 100%;
	position: relative; 		/* aņadimos position: relative para poner en coordenadas abslutas el #header h1.estudio de abajo */
	/*height: 12.5em;			/* MODFOTOS pongo 14.5 para bajar todo lo que hay debajo del header */
	height: 14.5em;				/* logo RF todas las paginas : es una tira blanca con logo a la derecha */
	background: transparent url(../images/header_bg.jpg) no-repeat top left;
	border: 0px solid #EEEEEE;
	background-image: url(../images/header_bg.jpg);
}

#header h1.estudio { /* aņadimos este header para poner la palabra "estudio" como flotante al lado de el logo. */
					
	position: absolute;
/*	top: -10px;
	right: 22px; justo encima del logo */
	top: 30px;
	right: 101px; 
	font-size: 1em; 
	font-family:'verdana','helvetica','arial','sans-serif';
	/*color: #810101; */
	margin: 1.2em 0em 1.2em 0em;
	color: Gainsboro;
	/*font-weight: bold; */
}

.primary #mainTop, body#contacto.secondary #mainTop {
	width: 100%;
	height: 16.2em;
   	border: 0px solid #EEEEEE;
}

.primary #MainEnlaces, body#contacto.secondary #MainEnlaces {
	width: 100%;
	height: 0.8em;
   	border: 0px solid #EEEEEE;
}
.primary #mainBottom, body#contacto.secondary #mainBottom {
								/* MODFOTOS(4) esto es el cuerpo medio de la pagina para inicio contacto y quienes somos, si reduzco el 				height sube el pie de pagina */
								/* cambio el height a 15em para subir el pie de pagina, porque lo baje todo cambiando el header de  */
								/* 12.5em a 14.5em */
	width: 100%;
	height: 15em;
	text-align: center;
   	background: transparent;
   	border: 0px solid #EEEEEE;
}

.secondary #mainBottom {        /* MODFOTOS(3) esto es el cuerpo medio de la pagina, si reduzco el height sube el pie de pagina */
								/* cambio el height a 32em para subir el pie de pagina, porque lo baje todo cambiando el header de  */
								/* 12.5em a 14.5em */
	width: 100%;
	/* height: 32em; */
	height: 30em; 
   	background: transparent;
   	border: 0px solid #EEEEEE;
}

#footer {
	width: 100%;
	height: 5em;
	text-align: center;
   	background: transparent;
   	border: 0px solid #EEEEEE;
}

/* Header
--------------------------------------------------*/

#header div#nav {
/*	width: 33em; cambio de menu de "proyectos" a "proyectos de arquitectura" necesario para posicionamiento */
	width: 62em;
	margin: 0 auto;
	padding-top: 70px;
	}

#header div#nav ul {
	margin: 0; 
	padding: 0;
	}

#header div#nav li {
	float: left; 
	position: relative; 
	list-style: none; 
	margin: 0;
	}
	
#header div#nav li.submenu {
	color: #810101;
	}

#header div#nav li.submenu:hover>a {
	color: #444;
	font-weight: bold;
	}
	

#header div#nav li a {
	display: block;
	text-decoration: none;
	font-weight: bold;
	color: #888;
	padding: 0.2em 1em;
	}
	
#header div#nav li a {
	font-size: 1.1em;
	}
	
#header div#nav li li a {
	font-size: 0.9em;
	}	
	
#header div#nav li	a:hover {
	color: #444;
	font-weight: bold;
	}
	
#header div#nav li	a.active {
	color: #810101;
	}
		
#header div#nav ul ul {
	position: absolute;
	width: 49em;
	top: 2em;
	left: 0em;
	display: none;
	}
	
.secondary #header div#nav ul.on ul.on {
	display: block;
}	
	
#header div#nav li#nav_proyectos ul {
	left: -12em;
	}
	
#header div#nav li#nav_contacto ul {
	left: -6em;
	}	
	
#header div#nav li#nav_reformas ul {
	left: -13em;
	}		
/* #header div#nav li#nav_vivienda3 ul { 
	left: 240em;
	}		*/
	
#header div#nav ul.level1 li.submenu:hover ul.level2, #header div#nav ul.level2 li.submenu:hover ul.level3 {
	display:block;
	}

	
/* MainTop
--------------------------------------------------*/
	
#inicio #mainTop {	
/*	background: transparent url(../photos/brooklyn-bridge_cp.jpg) no-repeat top left; */
background: transparent url(../photos/estudio_de_arquitectura_index.jpg) no-repeat top left; 
/* background: transparent url(../photos/dianalarrea_arco_RF.jpg) no-repeat top left; */
	}

#quienessomos #mainTop {	
	background: transparent url(../photos/about_us.jpg) no-repeat top left;
	}

#proyectos #mainTop {	
	background: transparent url(../photos/projects.jpg) no-repeat top left;
	}
	
/* #enlaces #mainTop {	
	background: transparent url(../photos/Enlaces_blanco.jpg) no-repeat top left;
	} */
/*#MainEnlaces {	
	background: transparent url(../photos/Franja_enlaces.jpg) no-repeat top left;	 quito la imagen, queda mejor */


body#contacto.primary #mainTop {	
	background: transparent url(../photos/contact.jpg) no-repeat top left;
	}

	
body#contacto.secondary #mainTop #image {	
	float: left;
   	background: transparent;
	width: 45%;
	border: 0px solid #EEEEEE;
	}	

body#contacto.secondary #mainTop #image div {
	padding: 30px 15px 0px;
   	border: 0px solid #EEEEEE;	
	}
	
body#contacto.secondary #mainTop #image img {
	float: right;
	}	
	
body#contacto.secondary #mainTop #text {	
	float: left;
   	background: transparent;
	width: 40%;
	border: 0px solid #EEEEEE;
	}

body#contacto.secondary #mainTop #text div {	
	padding: 50px 0px 0px;
   	border: 0px solid #EEEEEE;
	}

body#contacto.secondary #mainTop #text p {
	text-align: right;
	margin: 0;
	}
	
/* MainBottom
--------------------------------------------------*/
	
.primary #mainBottom p {	
/*	padding: 0 2em; modifico para que quepan los textos en una linea menos en index*/ 
	padding: 0 1em;
	}

.secondary #mainBottom h1 {
	text-transform: uppercase;
	padding: 0 15px;
	border: 0px solid #EEEEEE;
	}

.secondary #mainBottom #text {
	float: left;
   	background: transparent;
	width: 55%;
	border: 0px solid #EEEEEE;
	}
	
.secondary #mainBottom #text div {
	padding: 0 15px;
	margin-top: -1em;
   	border: 0px solid #EEEEEE;	
	}	

.secondary #mainBottom #image {
	float: right;
   	background: transparent;
	width: 40%;
	border: 0px solid #EEEEEE;
	}
	
.secondary #mainBottom #image div {
	padding: 10px 15px;
	/* margin-top: -1em; /* MODFOTOS(2) pongo -3.5EM para SUBIR LA FOTO Y ALINEARLA AL TITULO DEL PROYECTO */
	margin-top: -3.5em;
   	border: 0px solid #EEEEEE;
	}	
	
body#formulario.secondary #mainBottom  {
	/* MODFOTOS(5) ajusto medida solo para la pagina de formularios */
	height: 31.38em;
	}	

	
body#formulario.secondary #mainBottom div iframe {
	margin-top: -3em;
   	border: 1px solid #EEEEEE;
	}	

body#formulario.secondary #mainBottom div h1 {
	margin: 0;
	padding: 0;
	text-align: center;
	}	

/* Footer
--------------------------------------------------*/

#footer p {
	font-size: 0.8em;
	margin-bottom: 5em;
	color: #aaa;
}

#footer p > a {
	font-size: 1em;
}		
	
#footer img {
	margin: 0 0.5em;
}