/*
						  ***********
************************** style.css **************************
						  ***********
	Este es el fichero que se encarga de los estilos de la 
aplicación.

	Es un documento demasiado amplio como para abarcarlo por 
elementos individuales. Por tanto optaré por explicarlo en
ámbitos generales.

	Para desarrollar esta aplicación me he ceñido al estilo de
la anterior aplicación. Conservando colores, fuentes de letras,
esencia de botones, pies de páginas, cabceras... etc. Y 
consiguiendo un resultado muy similar.

	Mayormente predominan los colores grises para botones y 
sombras, blancos para fondos y negros para letras. 

	En mi diseño predominan los bordes redondeados, los cuales 
suavizan la aplicacion y el uso de sombras que otorgan un poco 
de relieve a los contornos.

	Para los efectos de tipo :hover, empleo transiciones que
aunque sean rápidas, evitan la brusquedad del cambio.

	En cuanto a tamaño, me he limitado a un tamaño moderado, el
cual es compatible con la mayoría de resoluciones.


	Para obtener información mas detallada de cualquier elemento en 
particular, aconsejo el uso de la consola del navegador. Por 
ejemplo en chrome, puedes pulsar btn derecho sobre el elemento que
quieras, y pulsando en Inspeccionar elemento, podras observar 
todos los estilos css que afectan a dicho elemento.

..............................................................
/// 	    Creado por Rodrigo Ortega Cuesta, 2013 	       ///
..............................................................
*/

/*INSTALACION FUENTE DE LETRA*/
@font-face {
    font-family: "chelseas";
	src: url('./fonts/chelseas.eot');
	src: url('./fonts/chelseas.eot?#iefix') format('embedded-opentype'),
	     url('./fonts/chelseas.woff') format('woff'),
	     url('./fonts/chelseas.ttf') format('truetype'),
	     url('./fonts/chelseas.svg#webfont') format('svg');
}
/*INCIALIZACION DISPLAY*/
#portada{
	display: block;
}
#menuPrinc, #planos, .navDocumentos, .navDocumentosCatalogo, .navPlanos, #informacion, #ambitoActuacion, #elementosCatalogados, #ordenacionPormenorizada,
#alineacionesRasantes, #usos, #peatonalizacionTrafico, #planEtapas, #espaciosPublicos{
	display: none;
}
/*ESTILOS GENERALES*/
body{
	margin: 0 auto;
	font-family: arial;
	font-size: 12px;
}
a{
	text-decoration: none;
	color: inherit;
}
#mainContainer{
	width: 776px;
	margin: 0 auto;
	padding: 15px;
	-o-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	height: 525px;
}
.header p{
	font-size: 20px;
	margin:0px;
}
.container{
	overflow: hidden;
	height: 342px;
}
.container.containerBigger{
	height: 399px;
}
.subContainer1{
	float: left;
	width: 388px;
	margin-right: 37px;
}
.subContainer1.subContainer1Bigger{
	width: 409px;
}
.subContainer2{
	float: right;
	width: 350px;
}
.subContainer2.subContainer2Smaller{
	width: 330px;
}
.subContainer2 img{
	width: 350px;
}
.subContainer2 .subContainer2ImgSmaller{
	width: 330px;
}
.subContainer2.subContainer2Smaller .debajoImagen{
	font-size: 16px;
	margin-top: 15px;
}
.footer{
	margin-top: 20px;
	clear: both;
}
hr{
	color: #000;
	border: solid 1px #000;
	background: #000;
	-o-box-shadow: 0px -1px 1px #000;
	-webkit-box-shadow: 0px -1px 1px #000;
	-moz-box-shadow: 0px -1px 1px #000;
	box-shadow: 0px -1px 1px #000;
}
.alignRight{
	text-align: right;
}
.alignCenter{
	text-align: center;
}
.pNoMargin{
	margin: 0;
}
.chelseas{
	font-family: chelseas;
}
.yearHeader{
	font-family: arial;
	position: absolute;
	top: 15px;
	right: 15px;
}
.footerImgs{
	float: right;
}
.footerImgs img{
	margin: 0px 0px 0px 15px;
	max-height: 60px;
}
.backInicio.boton{
	position: relative;
	top: 11px;
	left: 40px;
	width: 45px;
	height: 45px;
	-o-border-radius: 22px;
	-moz-border-radius: 22px;
	-webkit-border-radius: 22px;
	border-radius: 22px;
}
.home {
	cursor: pointer;
	z-index: 999;
	width: 30px;
	bottom: 34px;
	left: 63px;
	position: absolute;
}
.boton{
	background: rgb(186,186,186); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(186,186,186,1) 0%, rgba(237,237,237,1) 30%, rgba(201,201,201,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(186,186,186,1)), color-stop(30%,rgba(237,237,237,1)), color-stop(100%,rgba(201,201,201,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(186,186,186,1) 0%,rgba(237,237,237,1) 30%,rgba(201,201,201,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(186,186,186,1) 0%,rgba(237,237,237,1) 30%,rgba(201,201,201,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(186,186,186,1) 0%,rgba(237,237,237,1) 30%,rgba(201,201,201,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(186,186,186,1) 0%,rgba(237,237,237,1) 30%,rgba(201,201,201,1) 100%); /* W3C */
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
	border: solid 1px #CCC;
	-o-box-shadow: 3px 3px 5px #757575;
	-moz-box-shadow: 3px 3px 5px #757575;
	-webkit-box-shadow: 3px 3px 5px #757575;
	box-shadow: 3px 3px 5px #757575;
	height: 25px;
}
.boton:hover, .sobreHome{
	-o-box-shadow: inset 2px 2px 10px #757575;
	-moz-box-shadow: inset 2px 2px 10px #757575;
	-webkit-box-shadow: inset 2px 2px 10px #757575;
	box-shadow: inset 2px 2px 10px #757575;
}
.navDocsYPlanos{
	margin-left: 30px;
	width: 110px;
	float: left;
	position: relative;
	top: 320px;
}
.navDocumentos{
	width: 110px;
	float: left;
	position: relative;
	margin-left: 55px;
	top: 186px;
}
.navDocumentosCatalogo {
	float: left;
	position: relative;
	margin-left: 55px;
	top: 210px;
	width: 45px;
}
.navPlanos{
	float: left;
	width: 120px;
	position: relative;
	top: 6px;
	margin-left: 55px;
}
.navDocsYPlanos .boton, .navDocumentos .boton, .navPlanos .boton{
	width: 106px;
	height: 30px;
	margin-bottom: 15px;
}
.navPlanos .boton{
	max-height: 35px;
	font-size: 11px;
	width: 116px;
}
.navDocumentosCatalogo .boton{
	width: 40px;
	height: 30px;
	margin-bottom: 15px;
}
/*ESPECÍFICAS GENERALES*/
#portada, #menuPrinc{
	overflow: hidden;
}
#headerContenido{
	font-size: 25px;
	margin-left: 5px;
	padding: 3px;
	-o-box-shadow: 0px 0px 10px;
	-moz-box-shadow: 0px 0px 10px;
	-webkit-box-shadow: 0px 0px 10px;
	box-shadow: 0px 0px 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#descripcionContenido{
	margin-right: 15px;
	margin-left: 20px;
}
#inicio{
	position: relative;
	top: 15px;
	left: 40px;
	width: 75px;
}
#pFooter{
	font-size: 25px;
}
#ayoro, #gesplan, #ayoro img, #oa3 p{
	float: left;
}
#oa3, #oa3 img{
	float: right;
}
#ayoro, #oa3{
	width: 325px;
}
#ayoro img, #oa3 img{
	height: 60px;
}
#oa3 p, #ayoro p{
	font-weight: bold;
}
#ayoro p{
	margin-right: 95px;
}
#oa3 p{
	margin-left: 110px;
}


/* MAQUETACION DE #PLANOS */
#planos .aprobInic{
	font-size: 20px;
}
#planos .aprobInic span{
	font-family: arial;
}
#planos #tituloPlano{
	width: 350px;
	text-align: center;
	height: 175px;
	margin-right: 20px;
	font-size: 40px;
	font-weight: bold;
}
#planos .navDocsYPlanos.posicionamientoPlanos{
	position: absolute;
	top: 370px;
}
#planos #tituloPlano p{
	margin-left: 5px;
	padding: 3px;
	-o-box-shadow: 0px 0px 10px;
	-moz-box-shadow: 0px 0px 10px;
	-webkit-box-shadow: 0px 0px 10px;
	box-shadow: 0px 0px 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#planos .conImgSeccionada{
	margin-top: 20px;
	width: 350px;
}
#planos .conImgSeccionada .conjBtns{
	margin: 0 auto;
	width: 250px;
	margin-top: 23px;
}
#planos .conImgSeccionada .conjBtns div{
	float: left;
	width: 125px;
}
#planos .conImgSeccionada .conjBtns .boton{
	height: 35px;
	margin-bottom: 20px;
	width: 105px;
}
#planos .conImgSeccionada .conjBtns .conjBtnsDrch .boton{
	float: right;
}
#planos .planoSimple img{
	width: 346px;
	margin-top: 20px;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
#planos #informacion img{
	margin-top: 20px;
}
#planos #informacion .infoContBtn{
	margin-top: 45px;
}
#planos #informacion .infoContBtn div{
	float: left;
	width: 116px;
}
#planos #informacion .infoContBtn .boton{
	height: 35px;
	margin-bottom: 20px;
	width: 105px;
}
#planos #informacion .infoContBtn div#infoConjBtn3{
	width: 118px;
}
#planos .planoSimple img:hover{
	-o-box-shadow: 0px 0px 10px;
	-moz-box-shadow: 0px 0px 10px;
	-webkit-box-shadow: 0px 0px 10px;
	box-shadow: 0px 0px 10px;
}
.planoSimple .boton{
	width: 100px;
	height: 35px;
	margin: 45px 0px 0px 125px;
}
#planos .subContainer2 img.aa1 {
	position: relative;
	top: 110px;
	width: 230px;
	z-index: 2;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
#planos .subContainer2 img.aa2 {
	width: 230px;
	position: relative;
	top: -135px;
	left: 116px;
	z-index: 1;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
#planos .subContainer2 .aa2ContImg{
	height: 335px;
}
#planos .subContainer2 .aa2ContBtn{
	margin: 0 auto;
	width: 200px;
}
#planos .subContainer2 .aa2ContBtn .boton{
	width: 60px;
}
#planos .subContainer2 .aa2ContBtn #btnaa2{
	float: right;
}
.imgSombreada{
	-o-box-shadow: 0px 0px 10px;
	-moz-box-shadow: 0px 0px 10px;
	-webkit-box-shadow: 0px 0px 10px;
	box-shadow: 0px 0px 10px;
}
.wrappSeccionado{
	background: red;
	border: solid;
	box-shadow: 0px 0px 10px;
}

.footer .botonLocGeo {
	background: url(../images/fondoBoton2.png);
	position: absolute;
	bottom: 15px;
	left: 210px;
	height: 60px;
	width: 233px;
	border: solid 3px #272727;
	color: #272727;
	cursor: pointer;
	font-size: 23px;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	opacity: 0.8;
}
.footer .botonLocGeo:hover {
	opacity: 1;
	background: url(../images/fondoBoton1.png);
	-o-box-shadow: 0px 0px 10px #272727;
	-moz-box-shadow: 0px 0px 10px #272727;
	-webkit-box-shadow: 0px 0px 10px #272727;
	box-shadow: 0px 0px 10px #272727;
}