/* ====================================
	1- SECCIONES DIV
===================================== */
*	{
	padding:0;
	margin:0;
	}
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:medium;
	}
#wrapper{
	width:100%;
	color:#222222;
	background-color:#dddddd;
	margin:0px;
	}
#encabezado {
	background-color: #d2d2d2;
	}
#encabezado img {
	width:90%;
	margin-bottom:0;
	}
#atr {
	background-color: #d2d2d2;
	float:left;
	}	
#navegacion {
	background-color:#d2d2d2;
	
	padding-bottom:2px;
	text-align:center;
	border-bottom: 5px solid #d2d2d2;
	}
#navegacion a	{
	text-decoration:none;
	outline:none;
	color:#333333;
	background:-moz-linear-gradient(bottom,rgba(0,0,0,.2),rgba(255,255,255,.2));
   background:-webkit-gradient(linear,0 0,0 100%,color-stop(rgba(0,0,0,.2),color-stop(rgba(255,255,255,.2)))); 
   background:-o-linear-gradient(top,rgba(0,0,0,.2),rgba(255,255,255,.2));
   background:linear-gradient(to top,rgba(0,0,0,.2),rgba(255,255,255,.2));
	padding: 4px 8px 4px 8px;
	border: 0px;
	font-size: 14px;
	}

#navegacion #nav0, #navegacion #nav12 {
	display: none;
	}


#navegacion a:link	{
	color:#333333;
	}
#navegacion a:visited {
	color: #333333;
	}
#navegacion a:hover, #navegacion a:focus, #inicio #nav1 a, #transiciones #nav2 a, #audio #nav3 a, #efectos #nav4 a, #paneo #nav5 a, #croma #nav6 a, #animacion #nav7 a, #otros #nav8 a, #titulos #nav9 a, #plantilla #nav10 a, #deslizantes #nav11 a {
	text-decoration:none;
	color:#a91110;
	
	background:-moz-linear-gradient(top,rgba(255,255,255,1)50%,rgba(255,255,255,0.5));
	background:-webkit-linear-gradient(rgba(255,255,255,1)50%,rgba(255,255,255,0.5));
   background:-o-linear-gradient(top,rgba(255,255,255,1)50%,rgba(255,255,255,0.5));

	background:linear-gradient(top,rgba(255,255,255,1)50%,rgba(255,255,255,0.5));
	
	padding-bottom:3px;
	border-bottom:none;
	-moz-transition-duration:.4s;
	-moz-transition-delay:.05s;
	-webkit-transition-duration:.4s;
	-webkit-transition-delay:.05s;
	-o-transition-duration:.4s;
	-o-transition-delay:.05s;			
	transition-duration:.4s;
	transition-delay:.05s;
	}
#navegacion a:active {
	color:white;
	background-color:#ceced6;
	}
#navegacion ul {
	margin-bottom:0;
	line-height:1.2em;
	}
#navegacion li {
	display:inline-block;
	list-style-type:none;
	padding:0px 3px 0px 3px
	}
	


#myTopnav li ul {
	display:none;
	position:absolute;
	padding:0;
	
	}
#myTopnav li:hover > ul {
	display:block;
	background-color: #d2d2d2; 
	}
#myTopnav .sub li {
	display:block;
	text-align: left;
	margin-top:1em;
	}


	
	
	
@media screen and (max-width:680px){
	
	#navegacion #nav1, #navegacion #nav2, #navegacion #nav3, #navegacion #nav4, #navegacion #nav5, #navegacion #nav6, #navegacion #nav7, #navegacion #nav8, #navegacion #nav9, #navegacion #nav10, #navegacion #nav11 {
	display: none;	
	}
	#navegacion #nav12 {
	display:inline;
	}
	#navegacion {
	text-align: right;	
	}
	}	
	
	
@media screen and (max-width:680px){
	
	 ul.topnav.responsive {
	 	position: relative;
	 	}
  	 ul.topnav.responsive #nav12 {
    position: absolute;
    right: 0;
    top: 0;
	 	}
  	
  	#navegacion ul.topnav.responsive #nav0, #navegacion ul.topnav.responsive #nav1, #navegacion ul.topnav.responsive #nav2, #navegacion ul.topnav.responsive #nav3, #navegacion ul.topnav.responsive #nav4, #navegacion ul.topnav.responsive #nav5, #navegacion ul.topnav.responsive #nav6, #navegacion ul.topnav.responsive #nav7, #navegacion ul.topnav.responsive #nav8, #navegacion ul.topnav.responsive #nav9, #navegacion ul.topnav.responsive #nav10, #navegacion ul.topnav.responsive #nav11 {
	 float:none;    
    display: inline;
  		}
   #navegacion ul.topnav.responsive #nav0, #navegacion ul.topnav.responsive #nav1 a, #navegacion ul.topnav.responsive #nav2 a, #navegacion ul.topnav.responsive #nav3 a, #navegacion ul.topnav.responsive #nav4 a, #navegacion ul.topnav.responsive #nav5 a, #navegacion ul.topnav.responsive #nav6 a, #navegacion ul.topnav.responsive #nav7 a, #navegacion ul.topnav.responsive #nav8 a, #navegacion ul.topnav.responsive #nav9 a, #navegacion ul.topnav.responsive #nav10 a, #navegacion ul.topnav.responsive #nav11 a {
    display: block;
    text-align: left;
  		}
  	#myTopnav li ul {
	display:block;
	position:relative;
		}
	}	
	
	
	
#areatexto {
	padding:20px 10px 20px 20px;
	}

#cuestionario {
	background-color:#e5e5e5;
	}
#pie {
	text-align:center;
	font-size:80%;
	font-style:italic;
	letter-spacing:2px;
	border-top:1px solid #8c8c8c;
	margin-top:20px;
	padding:20px
	}
#pie a	{
	text-decoration:none;
	outline:none;
	color:#02042e;
	}
#enlaces a {
	color:blue;
	text-decoration:none;
	}
#enlaces a:hover {
	text-decoration:underline;	
	}
#enlaces li {
	list-style-image:url("imagenes/vagoneta.ico");
	margin-bottom:10px;
	}
#usos td {
	padding: 20px;
	border: solid;
	}

/* ====================================
	2- CLASES
===================================== */
.imagen {
	text-align:center;
	margin-bottom:10px;
	}
.doble	{
	width:80%;
	}
.comentario {
	padding:20px;
	border-style:solid;
	border-width:2px;
	border-color:#ac443f;
	margin:20px;
	}


.navegacion2 {
	font-size:18px;
	}
.navegacion2 li {
	list-style-type:none;
	line-height:2em;
	padding-right:10px;
	}
.navegacion2 a {
	color:blue;
	text-decoration:none;
	}
.navegacion2 a:hover {
	text-decoration:underline;	
	}
.atribucion {
	font-size:10px;
	color:#666666;
	text-align: left;	
	}
.atribucion a {
	color:#666666;
	text-decoration:none;
	}
.nota {
	margin:20px;
	padding:10px;
	border:solid;
	background-color:#d2d2d2;
	}
.nota a {
	text-decoration: none;
	}
.map {
	font-size:12px;
	}
.map a {
	color:#222222;
	text-decoration:none;
	}
.map a:hover {
	color:#a91110;
	}

/* ====================================
	3- ELEMENTOS HTML
===================================== */

h1	{
	font-size:150%;
	margin-bottom:1em;
	}
h2	{
	font-size:130%;
	margin-bottom:1em;
	}
h3	{
	font-size:115%;
	color:green;
	margin-bottom:1em;
	padding-top:10px;
	border-top:solid;
	border-color:#090c4b;
	}
h4	{
	font-size:115%;
	color:green;
	margin-bottom:1em;
	padding-top:10px;
	}
p, ul	{
	margin-top:0;
	margin-right:0;
	margin-bottom:1em;
	margin-left:0;
	line-height:1.5em;
	}
ul	{
	padding-left:2em;
	}
ol	{
	padding-left:2em;
	line-height:2em;
	margin:2em;
	}

img {
	max-width: 100%;
	}

/* ========================================================= 
CSS para la animación y localización de los DIV de cookies
========================================================*/
 
@keyframes desaparecer
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
 
@-webkit-keyframes desaparecer /* Safari and Chrome */
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
 
@keyframes aparecer
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
 
@-webkit-keyframes aparecer /* Safari and Chrome */
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
#cookiesms1:target {
    display: none;
}
.cookiesms{	
	width:100%;
	height:43px;
	margin:0 auto;
	padding-left:1%;
        padding-top:5px;
        font-size: 1.2em;
	clear:both;
        font-weight: strong;
color: #333;
font-size:12px;
bottom:0px;
position:fixed;
left: 0px;
background-color: #FFF;
/*opacity:0.7;*/
filter:alpha(opacity=70); /* For IE8 and earlier */
transition: bottom 1s;
-webkit-transition:bottom 1s; /* Safari */
-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;
}
 
.cookiesms:hover{
bottom:0px;
}
.cookies2{
background-color: #FFF;
display:inline;
opacity:0.95;
filter:alpha(opacity=95);
position:absolute; 
left:1%; 
top:-30px;
font-size:15px;
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);
}
 
/* Fin del CSS para cookies */