@charset "utf-8";
/* CSS Document */

body {
	background: url(imagenes/fondo.png) repeat-x;
	margin: 0; 
	padding: 0;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.4;
}

ul, ol, dl { /* Debido a las diferencias existentes entre los navegadores, es recomendable no añadir relleno ni márgenes en las listas. Para lograr coherencia, puede especificar las cantidades deseadas aquí o en los elementos de lista (LI, DT, DD) que contienen. Recuerde que lo que haga aquí se aplicará en cascada en la lista .nav, a no ser que escriba un selector más específico. */
	padding: 0;
	margin: 0;
}
h2, h3, h5, h6, p {
	margin-top: 0;	
	padding-right: 15px;
	padding-left: 15px;
	color: #000;
}
h1 {
	margin-top: 2px;	 
	padding-right: 15px;
	padding-left: 15px; 
	color: #CCCCCC;
	font-size: 35px;
	text-align:right;
}
h1 span {
	margin-top: 2px;	 
	padding-right: 15px;
	padding-left: 15px; 
	color: #CCCCCC;
	font-size: 25px;
	text-align:right;
}
h4 {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
	color: #000;
	text-align:center;
	font-size: 16px;
}
a img { 
	border: none;
}
a:link {
	/* [disabled]color: #42413C; */
	/* [disabled]text-decoration: none; */ 
}
a:visited {
	/* [disabled]color: #6E6C64; */
	text-decoration: none;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
	}
.container {
	width: 960px;
	margin: 0 auto;
	padding-top: 12px;
	background:#f7f7f7;
	border:solid 5px #eee;
	position:relative;z-index:10;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow: 4px 4px 17px #000000;
	-webkit-box-shadow: 4px 4px 17px #000000;
	box-shadow: 4px 4px 17px #000000;
}
.cabecera {	
	background:#f7f7f7 url(imagenes/cabecera.PNG);
	width: 1040;
	padding:0px;
	margin:0px;
	left:-40px;
	float:left;
	position:relative;
}
header {	
	width: 960px;
	margin: 0 auto;
	height:475px;
}
.banderin {	
	background: url(imagenes/banderina.png) no-repeat;
	width: 1035px;
	height: 120px;
	margin:10px;
	padding-top:15px;
	left:-49px;
	float:left;
	position:relative;
	text-align: center;
}
.right {
	float: right;
	margin: 10px;
	padding-bottom: 15px;
	padding-top: 15px;
	padding-right: 5px;
	padding-left: 5px;
	margin-top: 20px;
	text-align:center;
}

.left{
	float: left;
	width: 200px;
	margin: 10px;
	padding-top: 70px;
	margin: 10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
.art {
	border-bottom: 2px dotted #999999;
}
.content {
	background:#fff;
	width:900px;
	padding:5px;
	margin:5px;
	float:left;
	border:solid 5px #eee;
	position:relative;
	z-index:10;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:inset 4px 4px 17px #000000;
-webkit-box-shadow:inset 4px 4px 17px #000000;
box-shadow:inset 4px 4px 17px #000000;
}
aside {
	float: left;
	width: 190px;
	padding: 10px 0;
	margin: 10px 0;
}
.intro {
	float: left;
	background: #ffffff;
	padding: 20px;
	margin: 15px;
	border-bottom: 2px dashed #00F;
	width: 800px;
	text-align: justify;
	
}
.content ul, .content ol {
	padding: 0 15px 15px 40px; 
}
nav ul {
	list-style: none; 
	border-top: 1px solid #fff;
	margin-bottom: 15px; 
	
}
nav ul li {
	border-bottom: 2px solid #fff; 
}
nav ul a, nav ul a:visited {
	padding: 5px 5px 5px 15px;
	display: block;
	width: 164px; 
	text-decoration: none;
	background: #000;
	color: #FFF;
}
nav ul a:hover, nav ul a:active, nav ul a:focus {
	background: fff;
	color: #999999;
	text-align:right;
}

/* ~~ El pie de página ~~ */
footer {
	border-top-left-radius: 10px;
	border-top-right-radius:10px;
	padding: 10px 0;
	background: #f7f7f7;
	position: relative;/* esto da a IE6 el parámetro hasLayout para borrar correctamente */
	clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */
}
/* ~~ Clases float/clear varias ~~ */
.fltrt {  /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase puede situarse en elemento <br /> o en un bloque vacío como elemento final tras el último bloque flotante (dentro de .container) si el pie se elimina o se saca fuera de .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*Compatibilidad con HTML 5: define nuevas etiquetas HTML 5 como display:block para que los navegadores sepan cómo procesar las etiquetas correctamente. */
header, section, footer, aside, nav, article, figure {
	display: block;
	color: #000;
}
.container footer address {
	text-align: center;
}
.cabecera {
	background: url(imagenes/cabecera.png) no-repeat;
	width:1040px;
	padding:0;
	margin:0;
	/* [disabled]top:5px; */
	left:-40px;
	float:left;
	position:relative;
	height:140px;
}
#navisup {
	border:none;
	list-style : none;
	float: left;
	margin : 0;
	padding : 0;
	width: 960px;
}
#navisup li {
	float : left;
	margin : 0;
	padding : 0;
	}
#navisup li a {
float : left;
display : block;
padding : 10px;
color : #000;
background-color: #E0E2F5;
text-decoration : none;
border: 4px outset #666666;
}
#navisup li a:hover {
background: #FF0000;
color: #000000;
border: 0px outset #666666;
border: 4px inset #666666; 
}
.tel {
	border:solid 5px #eee;
	background: #FF0000;
	color:#FFFFFF;
	float:left;
	text-align:center;
	padding-top: 15px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:10px 10px 5px #000000;
	-webkit-box-shadow:10px 10px 5px #000000;
	box-shadow:10px 10px 5px #000000;
	-webkit-transform: rotate(357deg) scale(0.913) skew(1deg) translate(-16px);
    -moz-transform: rotate(357deg) scale(0.913) skew(1deg) translate(-16px);
    -o-transform: rotate(357deg) scale(0.913) skew(1deg) translate(-16px);


}
.trid {
	float: left;
	background: #CCCCCC;
	width:  250px;
	height: 154px;
	padding:5px;
	margin:15px;
	float:left;
	border:4px inset #eee;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	overflow:hidden;
	-moz-box-shadow:10px 10px 5px #000000;
	-webkit-box-shadow:10px 10px 5px #000000;
	box-shadow:10px 10px 5px #000000;
	-webkit-transform: rotate(7deg) scale(0.913) skew(1deg) translate(-16px);
    -moz-transform: rotate(7deg) scale(0.913) skew(1deg) translate(-16px);
    -o-transform: rotate(7deg) scale(0.913) skew(1deg) translate(-16px);
}
.tric {
	float: left;
	background: #cccccc;
	width:  250px;
	height: 154px;
	padding:5px;
	margin:15px;
	float:left;
	border:4px inset #eee;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	overflow:hidden;
	-moz-box-shadow:10px 10px 5px #000000;
	-webkit-box-shadow:10px 10px 5px #000000;
	box-shadow:10px 10px 5px #000000;
	-webkit-transform: rotate(357deg) scale(0.913) skew(1deg) translate(-16px);
    -moz-transform: rotate(357deg) scale(0.913) skew(1deg) translate(-16px);
    -o-transform: rotate(357deg) scale(0.913) skew(1deg) translate(-16px);
}
.trii {
	float: left;
	background: #cccccc;
	width:  250px;
	height: 154px;
	padding:5px;
	margin:15px;
	float:left;
	border:4px inset #eee;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	overflow:hidden;
	-moz-box-shadow:10px 10px 5px #000000;
	-webkit-box-shadow:10px 10px 5px #000000;
	box-shadow:10px 10px 5px #000000;
	-webkit-transform: rotate(5deg) scale(0.913) skew(1deg) translate(-16px);
    -moz-transform: rotate(5deg) scale(0.913) skew(1deg) translate(-16px);
    -o-transform: rotate(5deg) scale(0.913) skew(1deg) translate(-16px);

}

.centro {
	float: left;
	background: #ffffff;
	padding: 10px;
	width:  220px;
	height: inherit;

}
.derecha {
	float: left;
	background: #ffffff;
	padding: 10px;
	border-left:2px dotted #00F;
	width:  220px;
	height: inherit;
}
.form {
	float: left;
	background: #F5F5F5;
	padding: 20px;
	margin: 20px;
	border-top: 2px dotted #00F;
	width:  670px;
	height: inherit;

}
.hora {
	float: left;
	background: #ffffff;
	padding: 20px;
	margin: 20px;
	width:  670px;
	height: inherit;
	border-top: 2px dotted #00F;

}
.mapa {
	float: left;
	background: #ffffff;
	padding: 20px;
	margin: 20px;
	width:  670px;
	height: inherit;
	border-top: 2px dotted #00F;

}
.formulario {
	float:left;
	text-align:center;
}
#centrado {
	text-align:center
}
.separacion {
	width: 700px;
	height:50px;
	float:left;
	padding-left: 210px;	
	padding-top: 20px;
	padding-bottom: 60px;
}
.foto {
	float: left;
	background: #ffffff;
	padding: 10px;
	border-right:2px dotted #00F;
	width:  300px;
	height: inherit;
}
.fotoder {
	float: right;
	padding: 10px;
		
}
foto1 {
	float: right;
	padding: 10px;
	
}
.foto2 {
	float: left;
	padding: 10px;
	
}
.explic {
	float: left;
	background: #ffffff;
	padding: 10px;
	width:  320px;
	height: inherit;
}
.agrupa {
	float:left;
	with:700;
	padding: 20px;
	margin:20px;
}
.juanfra {
	text-align:right;
	font-size:xx-small;
	padding: 30px;
	margin:30px;
}
 .navinf {
 	font-size:x-small;
	border-top:#000099 inset 2px;
	padding: 10px;
	}
	
 #slideshow{
	background-color:#F5F5F5;
	border:1px solid #FFFFFF;
	height:340px;
	margin:auto 0;
	position:relative;
	width:640px;
	-moz-box-shadow:0 0 22px #111;
	-webkit-box-shadow:0 0 22px #111;
	box-shadow:0 0 22px #111;
}

#slideshow ul{
	height:320px;
	left:10px;
	list-style:none outside none;
	overflow:hidden;
	position:absolute;
	top:10px;
	width:620px;
}

#slideshow li{
	position:absolute;
	display:none;
	z-index:10;
	
}

#slideshow li:first-child{
	display:block;
	z-index:1000;
}

#slideshow .slideActive{
	z-index:1000;
}

#slideshow canvas{
	display:none;
	position:absolute;
	z-index:100;
	background-color: rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, .2);
}

#slideshow .arrow{
	height:86px;
	width:60px;
	position:absolute;
	background:url('img/arrows.png') no-repeat;
	top:158px;
	margin-top:-43px;
	cursor:pointer;
	z-index:5000;
}

#slideshow .previous{ background-position:left top;left:-1px;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}
.clear {
	clear:both;
}