/* Hoja de estilos */

/* Plantilla definición de la estructura */
*{margin: 0 px;}   																		/* Todos los elemetos tienen margen 0 */
header, section, footer, aside, nav, article, figure, figcaption, hgroup {display: block;} 	/* define los nuevos elementos por si no los reconoce el navegador */
body { font-size: 100%; text-align: center; background: #ffffff; } /* centra la pagina */

/* define cada parte de la estructura */
#cabecera {background: #ffffff;
	height: 20%; clear: both; border: 1px solid white; border-radius: 10px 10px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -chrome-box-sizing: border-box;}
#menu {background: #bb22bb; padding: 5px 15px; text-align: center; border: 1px solid #bb22bb; border-radius: 15px 15px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -chrome-box-sizing: border-box;}
#menu li {display: inline-block; list-style: none; padding: 5px; font: bold 0.9em verdana, sans-serif;  padding-left:20px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -chrome-box-sizing: border-box;}
#seccion {float: left; width: 76%; 
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -chrome-box-sizing: border-box;}
#izq{float: left; width: 12%;  margin: 20 px; border: 1px dotted white; 
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -chrome-box-sizing: border-box;}
#der {float: left; width: 12%; padding: 20 px; border: 1px dotted white;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -chrome-box-sizing: border-box;}
#pie { clear: both; position:relative; top:90%; background: #ffffff; text-align: left; padding: 20 px; border-top: 1px solid #ffffff; border-radius: 5px 5px; 
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -chrome-box-sizing: border-box;}
#agrupar {width: 100%; margin: 15px auto; text-align: left;}   /* agrupa los elementos en una caja principal */

/* define cada elemento article y footer dentro del principal */
article { background: #ffffee; border: 1px solid #999999; border-radius: 15px 15px; text-align: center; padding: 10px; margin-top: 15px; margin-bottom: 5px; overflow: hidden; 
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -chrome-box-sizing: border-box;}
article footer { text-align: right; font: 0.5em verdana, sans-serif; color:grey;}
time { color: #999999;}
figcaption { font: italic 14 px verdana, sans-serif;}
address {font-size:xx-small;}

/*definicion de elementos propios de la pagina */
.localizacion {width:70%;  border: 1px solid #999999; }
.firma {float: right; font: 0.6em Times, serif; color:#808080;}
.aviso{float: right; font: 0.7em Times, serif; color:#808080;}
.saban {width:40%;}
.imagenes{width:50%;  border: 1px solid #999999; }
.icono{width:5%;}
.iconocurso{width:25%;}
.nombre {width:98%; }
.arcoclub{ width:50%;  border: 1px solid #999999; }
.arcolid{ width:45%;  border: 1px solid #999999; }
.tradicional{ width:35%;  border: 1px solid #999999; }
.novedades{ border: 2px dotted #999999; text-align: center;}

/*definiciones para la galeria de fotos */
.contenedorfoto { float:left; width:210px; height:160px;  margin: 10px; padding:5px; background-color:#f5f7f9; border-right: #a5a7aa solid 1px; 
			border-bottom: #a5a7aa solid 1px;  text-align:center; overflow: hidden;}
.fotos{width:98%;  border: 1px solid #999999; }

a:link {text-decoration:none; color:black;}  
a.barra:link {text-decoration:none; color:white;} 
a:visited {text-decoration:none; color:black;}
a.barra:visited {text-decoration:none; color:white;} 
a:hover {text-decoration:underline; color:black; }  /* enlace cuando pasa por encima */
a.barra:hover {text-decoration:underline; color:white; } 

h1 {text-align: center; font: 1.3em verdana, sans-serif; font-weight:bold; color:#bb22bb; }
h2 {text-align: center; font: 1.1em verdana, sans-serif; color:#bb22bb;}
h3 {text-align: center; font: 0.9em verdana, sans-serif; color:black;}
h4 {text-align: right; font: 0.5em verdana, sans-serif; color:grey;}



/* tablas*/

table { table-layout: fixed; position: absolute; left:20%; width: 60%}

.iconotabla1{ width: 40%;}
.contenedortabla1 {display: table;  border-spacing: 5px; width: 100%; table-layout: fixed;}
.cabeceratabla1 { display: table-caption;}
.contenidostabla1 { display: table-row; }
.primeracolumna1, .segundacolumna1, .terceracolumna1 { display: table-cell; }
.primeracolumna1 { width: 31%;}
.segundacolumna1 { width: 55%;}
.terceracolumna1 { text-align:left;}

.iconotabla2{ width: 40%;}
.contenedortabla2 {display: inline-table;  border-spacing: 5px; border: 1px solid blue; width: 100%; table-layout: fixed;}
.cabeceratabla2 { display: table-caption;}
.contenidostabla2 { display: table-row; }
.primeracolumna2, .segundacolumna2, .terceracolumna2 { display: table-cell; border: 1px solid red; }
.primeracolumna2 { width: 20%;}
.segundacolumna2 { width: 48%;}
.terceracolumna2 { text-align:left;}


/* CSS para la animación y localización de los DIV de cookies */
	#seccioncookies {float: left; width: 76%; text-align: left; font: 0.8em verdana, sans-serif; color:black;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -chrome-box-sizing: border-box;}
	.stcookie  { color:#bb22bb;}
	
.caja_cookie2 {  background-color: #FFF; opacity:0.95;
		filter:alpha(opacity=95);	position:absolute; left:1%; display:inline; top:-30px;
		font-size:1em; height:30px; padding-left:25px; padding-right:25px;
		-webkit-border-top-right-radius: 15px;
		-webkit-border-top-left-radius: 15px;
		-moz-border-radius-topright: 15px;
		-moz-border-radius-topleft: 15px;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
		-moz-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
		box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
	}
.caja_cookie1 {	width:90%; height:5%; margin:0 auto;
			padding-left:1%; padding-top:5px;
			font-size: 1.1em;
			clear:both;
			font-weight: strong;
			color: #333;
			bottom: -6%;
			position:fixed;
			left: 0px;
			background-color: #FFF;
			opacity:0.7;
			filter:alpha(opacity=70); /* For IE8 and earlier */
			-webkit-border-top-right-radius: 15px;
			-moz-border-radius-topright: 15px;
			border-top-right-radius: 15px;
			-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
			-moz-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
			box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
			z-index:999999999;
			
						transition: transform 1s ease-in-out 0.2s;
			-moz-transition: -moz-transform 1s ease-in-out 0.2s;
			-webkit-transition: -webkit-transform 1s ease-in-out 0.2s;
	}	
	
	.caja_cookie1:hover { transform: translateY(-40px);  
					-webkit-transform: translateY(-40px);  
					-moz-transform: translateY(-40px);  }
	
	/*	
.caja_cookie1:hover { animation: 5s cookies 1; -webkit-animation: 5s cookies 1; -moz-animation: 5s cookies 1;}
@keyframes cookies { 10% {   transform: translateY(-40px);  }
					90% {	  transform: translateY(-40px);   }
						}					
@-webkit-keyframes cookies {10% {  -webkit-transform: translateY(-40px);  }
					90% {	  -webkit-transform: translateY(-40px);   }
						}		
@-moz-keyframes cookies {  10% {   -moz-transform: translateY(-40px);  }
					90% {	  -moz-transform: translateY(-40px);   }
						}	
						
/* Fin del CSS para cookies */