/* ====================================================================
Hoja de estilo general para las páginas  Ayuntamiento de Nava

Esta diseñada para las versiones de Firefox 1.5 
y Explorer 6.0 o posteriores. También se aplica al resto de navegadores.

En concreto se ha probado en guindous para:
 * IE 6.0, 7.0
 * Opera 8.50
 * Firefox 1.0.7,  1.5,  2.0,  3.0
 
y en Linux para: 
* Mozilla 1.7.8
* Opera 8.51, 9.1
* Konqueror 3.3.2
* Firefox 1.0.4,  1.5, 2.0, 3.0
* Epiphany 1.4.8


Copyright Carlos F.  Alvarez Gonzalez
Fecha: 28-08-2008
====================================================================
css released under Creative Commons License -  http://creativecommons.org/licenses/by-nc-sa/2.5/es/ 

Esta hoja de estilo está bajo una licencia Reconocimiento-No comercial-Compartir bajo la misma licencia 2.5 España de Creative Commons. 
Para ver una copia de esta licencia, visite http://creativecommons.org/licenses/by-nc-sa/2.5/es/ o envie una carta a 
Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.

NOTA
diseño (lo que ves en tu pantalla)=hoja de estilo+imágenes+documento contenido (con el formato correcto)

La licencia se aplica unicamente a la hoja de estilo, NO a las imagenes ni al contenido. 

IMPORTANTE
Este diseño no es una plantilla. No puede reproducirse sin el permiso por escrito del diseñador.
De todas formas, puede estudiarse libremente y usar las técnicas empleadas sin restricciones.

IMPORTANT 
This design is not a template. You may not reproduce it elsewhere without the 
   designer's written permission. However, feel free to study the CSS and use 
   techniques you learn from it elsewhere. 

==================================================================================*/

/*================= ESTRUCTURA,  POSICIONAMIENTO Y MARGENES ====================================*/
/* Aquí se definen las propiedades sgtes: 
min-width
display
position
width
height
left 
right
top 
bottom
margin
padding
border
float
clear
list-style
counter
z-index
*/

html {
	min-width: 750px;
	}


body {
	margin: 0;				
	padding: 0; 
	border-width: 0;
	}
	
	

h1 {
	margin: 0;
	padding: 1em 0 0 0;
	height: 2.5em;
	}

h2 {
	margin: 0.5em 0 0.5em 0;
	padding: 0 0 0 30px; /*1.7em;*/
	height: 27px; /*1.5em;*/
	}

h3 {
	margin: 0.5em 0 0.5em 1em;
	padding: 0 0 0 1.5em;
	height: 1.5em;
	}
	

h4 {
	margin: 0.5em 0 0.5em 1em;
	
	padding: 0;
	height: 1.5em;
	}

hr {
	width: 100%;
	margin: 0.7em 0;
	padding: 0;
	border-style: solid;
	border-width: 1px;
	border-color: #603800;
	color: #603800;
	}

ul, li {
	margin: 0;
	padding: 0;
	}

dt {
	margin-top: 1em;
	padding-left: 0.5em;
	}


.oculto {display: none;}

.cuerpo {
	position: relative;
	padding: 0.5em;
	}


.pagina {
	position: relative;
	width: 750px;
	height: 100%; /*700px;*/
	margin: 0 auto;
	padding: 0;
	}


.menu {
	position: relative;
	width: 150px;
	height: 1100px; /*580px;*/ /*Para dejar más sitio al menu de la izda, aumentar. No olvidarse de aumentar también el despl. de las utilidades*/
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	}

.menu ul {
	position: absolute;
	list-style-type: none;
	top: 12%;
	
	}

.menu li {
	list-style-type: none;
	margin: 1em 0 0.5em 0; /*30px 0 30px 10px;*/
	padding-left: 19px; /*22px;*/
	}

.menu ul ul {position: relative; margin-left: -5%; top: 0%;}

.menu ul li ul li{
	
	margin: 0.6em 0 0 0.3em; /*30px 0 30px 10px;*/
	
	}

.menu .arriba {
	position: relative;
  	width: 150px;
	height: 100px;
	}

.menu  .abajo {
	position: absolute;
  	width: 150px;
	height: 145px;
	top: 94%;
	margin-top: 2em;/*10px; */
	}

/*Esto se usa para levantar el sillar a soga y tizon. */
.aux1 {
	position: absolute;
	width: 150px;
	height: 1010px; /*580px;*/
	left: 0;
	top: 100px;
	
	margin: 0;
	padding: 0;
	}	
	

/*.capamenu {
	position: absolute;
	width: 150px;
	height: 800px; 
	left: 0;
	top: 20px;
	margin: 0;
	padding: 0;
	} 
*/

.cabecera {
	position:absolute;
	width:600px;
	height: 147px;
	left:150px;
	top: 0;
	margin: 0 1px;
	padding: 0;
	}

.cabecera li {
	display: block;
	position: absolute;
	width: 100px;
	height: 25px; 
	top: 122px; 
	margin: 0;
	padding: 0;
	border-style: solid;
	border-width: 1px 1px 0 1px;
	border-color: #F2FFE3;
	list-style-type: none;
	}

.cabecera .enlace2  {	position: absolute; left: 100px;}

.cabecera .enlace3  { position: absolute; left: 200px;}

.cabecera .enlace4  { position: absolute; left: 300px;}

.cabecera .enlace5  {	position: absolute; left: 400px;}

.cabecera .enlace6  {	position: absolute; left: 500px;}

.cabecera li.enlace6 { border-width: 1px 0 0 1px;}

.contenido {
	position: absolute;
	width: 600px;
	height: 100%; /*overflow: scroll;*/
	left: 150px;
	top: 147px; /*100px;*/
	margin-top: 0.3em;
	padding: 0.3em;/*5px;*/
	}
	

.contenido ul {
	margin-left: 1.5em;
	list-style-type: disc;
	list-style-position: outside;
	}
		

.contenido ul li {margin-bottom: 1em; }

.contenido ul ul {margin-left: 10%;}

.contenido ul li ul li {list-style-type: circle;}

.contenido ol li {margin-bottom: 1em;  }

.contenido ol ul {margin-left: 0.5em;}

.contenido ol li ul li ul,  .contenido ul li ul li ul {margin-left: 10%;}

.contenido ol li ul li ul li, .contenido ul li ul li ul li {list-style-type: square; }


	
.contenido .noborde {
	padding: 0;
	border-style: none;
	border-width: 0;
	}


.contenido .noticia {
	display: block;
	width: 85%;
	margin: 1em 1em 1em 2em;
	padding: 0.5em;
	border-style: dashed;
	border-width: medium;
	border-color: #696969;
	}


/*Menu de posicion o "migas" para indicar al usuario donde se encuentra*/
.migas {
	margin: 10px;
	padding: 2px;
	border-width: 2px;
	border-style: solid none;
	border-color: #603800;
	}

/*Pequeño menú de navegación*/
.submenu {
	margin: 1.5em;
	padding: 0.1em;
	}

/*Caracter de separacion entre imagenes con enlace*/
.separador {
	position: relative;
	top: -50px;
	}


.pie {
	position: relative;
	width: 600px;
	height: 25%;
	margin-top: 1.5em;
	padding-top: 42px;
	}


.utilidades {
		position: absolute;
		width: 150px;
		height: 100px;
		left: 0;
		top: 1220px;/*707*/ /*630*/ /*aumentar en la misma medida que el menu*/
		margin: 0;
		padding: 1em 0 0 0.5em;
		}


.utilidades .botones#inicio {display: none;}

.utilidades p {
	margin: 0.5em 1em 0.5em 0.5em;
	}

.utilidades hr {
	/*position: relative;
	left: 5%;*/
	margin: 1.5em 0 0.5em 0;
	/*width: 90%;*/
	border-style: dotted;
	}

.validacion, .descargas  {
	position: relative;
	display: block;
	left: 5px;
	width: 80%;
	}	

.validacion .vaa {display :none;}

.banderas {
	display: block;
	position: relative; 
	
	margin: 0 5px 10px 0;
	float: right;
	
	}
	
 
 .banderas a { position: relative;}
 
.logosupizd {
	display: block;
	position: absolute; 
	
	margin: 0;
	padding: 0;
	float: left;
	
	}
	

.ast {display :none;}
.en {display :none;}
.fr {display: none;}

/*Galeria de retratos*/

ul.retratos {margin-bottom: 5em; list-style-type: none;}
ul.retratos li {margin: 0.5em 0 0 1em; clear: both;}

.lrutas li{
	list-style-type: none;
	height: 2em;
	margin: 1.5em 0 1.5em 0.5em; 
	padding-left: 3em;
	}

#buzon {
	position: absolute;
	display: block;
	width: 100%;
	
	top: 75%;
	}

.receta li {margin-left: 3em;}

/*=================    FONDOS, COLOR  E IMAGENES         ==============================================*/
/* Aquí se definen las propiedades sgtes: 
background 
color
y todas las de las img */

body {
	background: #F2F9E3  /*url(../imagenes/sidra.png) no-repeat 72% 60% fixed*/ ;
	color: #FFCC33;
	}


img {
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-style: none;
	}

h1 {
	background: transparent url(../imagenes/banda.png)  center center  no-repeat;
	/*
	Imagen obtenida de: http://www.openclipart.org/cgi-bin/navigate/decorations
	Autor:  Architetto Francesco Rollandin
	Titulo: Decorazione
	Modificada por: Carlos F. Alvarez
	*/
	
	
	color: #603800;
	}

h2 {
	background: transparent url(../imagenes/padania_04.png)  bottom left  no-repeat;
	/*
	Imagen original obtenida de: http://www.openclipart.org/cgi-bin/navigate/signs_and_symbols?page=12
	Autor: AnI AnI
	Titulo: padania
	Modificada por: Carlos F. Alvarez
	*/
	color: #603800;
	}

h3 {
	background: transparent url(../imagenes/trillium.png)  center left  no-repeat;
	/*
	Imagen original obtenida de: http://www.openclipart.org/cgi-bin/navigate/signs_and_symbols?page=4
	Autor: Bryce W. Harrington
	Titulo: Map Symbols
	Modificada por: Carlos F. Alvarez
	*/
	color: #000000;
	}

h4 {
	background: transparent;
	color: #000000;
	}



.aviso { color: #FF0000;}


.cuerpo {
	background:  transparent url(../imagenes/fondo_cielo.png) repeat-x fixed;
	}	

.pagina {
	background: transparent;
	}

.menu {
	background: transparent url(../imagenes/muro4.png) top right no-repeat; /*#ABB846 #755F35 #FFCC33*/ 
	color: #abb846; /*#FFFFFF; */
	}	

.menu img {
	margin: 0;
	padding: 0;
	}

.menu li {
	background: url(../imagenes/celtic_triskell_01.png)  top left  no-repeat;
	/*
	Imagen original obtenida de: http://www.openclipart.org/cgi-bin/navigate/decorations
	Autor: Olivier
	Titulo: Celtic Triskell
	Modificada por: Carlos F. Alvarez
	*/
	}

.menu .arriba {
	background: transparent /*url(../imagenes/escudo.png)  center no-repeat*/;
 	}

.menu  .abajo {
	background: url(../imagenes/escanciar.png)  bottom center  no-repeat;
 	}

.aux1 {
	
	background: transparent url(../imagenes/sillar.png) top right repeat-y;
	}
	
	

/*.capamenu {
	background: transparent url(../imagenes/piedra.png) right repeat-y; 
	color: #abb846;
	}	*/

.cabecera {
	background: transparent url(../imagenes/cabecera.jpg) center center no-repeat;
	}


.cabecera img {
	margin: 0;
	padding: 0;
	border-style: solid;
	border-width: 2px 1px;
	border-color: #FFCC33;
	}


.contenido {
	background: transparent;
	color: #000000; 
	}


.contenido img{
	position: relative;
	display: block;
	float: right;
	margin: 0.5em;
	padding: 0.2em;
	border-style: ridge;
	border-width: medium;
	border-color: #603800;
	}

.centrado img {
	position: static;
	display: inline;
	float: none;
	}

img.enlinea {
position: static; 
display: inline; 
float: none;
margin: 0;
padding: 0;
}

.contenido .imagentexto {
	position: relative;
	display: block;
	float: right;
	width: 50%;
	}


.contenido img.izquierda {
	position: relative;
	display: block; 
	float: left;
	}

.contenido img.derecha {
	position: relative;
	display: block; 
	float: right;
	}

/*Clase para cuando falta un retrato en la galería*/
 .sinimagen {
  position: relative;
  display: block;
  float: left;
   margin: 0.5em;
   padding: 0.2em;
   border-style: ridge;
   border-width: medium;
   border-color: #603800;
   }

ul.retratos img{float: left;}

.lrutas li {
	background: url(../imagenes/logorutas.png)  top left  no-repeat;
	}

/*caso concreto de la corporacion*/
#concejales .sinimagen {
	width: 120px;
  	height: 94px;
   }
   
/*idem clubes*/
#clubes .sinimagen {
	width: 80px;
  	height: 80px;
   }

/*Menu de posicion o "migas" para indicar al usuario donde se encuentra*/
.migas {
	color: #000000;
	}

/*Pequeño menú de navegación*/
.submenu {
	color: #000000;
	}

.pie {
	background: transparent url(../imagenes/trisquel.png)  top center  no-repeat;
	/*
	Imagen original obtenida de: http://www.openclipart.org/cgi-bin/navigate/decorations?page=2
	Autor: Kilian Valkhof
	Titulo: triskel
	Modificada por: Carlos F. Alvarez
	*/
	color: #000000;
	}


.utilidades {
		color: #000000;
		}


.utilidades img {
	margin: 0.5em 0 0.1em 0;
	padding: 0.7em 0.5em 0 0.5em;
	border-style: none;
	}
	



/*================= FUENTES, ALINEAMIENTO  ==================================================*/
/* Aquí se definen las propiedades sgtes: 
font
text
line
word-spacing
letter-spacing
vertical-align
Los tamaños de letra son relativos, solamente se define de forma absoluta el tamaño de letra de <body> 
de forma que cambiando éste, los demás también cambian manteniendo las proporciones.
 */
 
body {
	font-size: 0.8em; /*1em 12pt;*/
	font-family:  "Verdana", "Arial", sans-serif;
	text-align: center;
	}

h1 {
	
	font-weight: bold;
	font-size: 150%; 
	/*font-family:  "Arial", "Helvetica", "Verdana", sans-serif;*/
	text-align: center;
	text-transform: capitalize;
	letter-spacing: 0.3em;
	word-spacing: 0.5em;
	}
	

h2 {
	font-weight: bold;
	font-size: 120%; 
	text-transform: lowercase;
	letter-spacing: 0.1em;
	}

h3 {
	font-weight: bold;
	font-size: 110%; 
	text-transform: lowercase;
	letter-spacing: 0.1em;
	}
	

h4 {
	font-weight: bold;
	font-size: 90%; 
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.1em;
	}

dl, ol, ul	{
	font-size: 100%; /*en tam. absoluto 10pt*/
	text-align: justify;
	}



p	{
	font-size: 100%; /*en tam. absoluto 10pt*/
	text-align: justify;
	}


p.tab {text-indent: 2em;}	

.aviso { text-align: center;}

/*Clase para el subrayado*/
.s {text-decoration: underline;}
.u {text-decoration: underline;}

/*Clase para la negrita*/
.n {font-weight: bold;}
.b {font-weight: bold;}

/*Clase para el subrayado y negrita*/
.sn {
	font-weight: bold;
	text-decoration: underline;
	}
 
 /*Clase para la cursiva*/
 .c {font-style: italic;}
 
/*Clase para las mayusculas*/
.mays {text-transform: uppercase;}

/*Clase para subindices y superindices*/
.subind {font-size: 70%; vertical-align: sub;}

.superind {font-size: 70%; vertical-align: super;}

.centrado {text-align: center;}

.izquierda 	{text-align: left;}

.derecha {text-align: right;}

.cuerpo {text-align: center;}


.pagina {text-align: left;}

.menu ul {text-align: left;}

.menu ul li {
	font-family: "Arial","Helvetica",  "Verdana", sans-serif;
	font-size: 95%;
	font-weight: bold;
	text-align: left;
	
	text-transform: uppercase;
	color: #317c2f;
	
	
	}

.menu ul li ul li{
	font-family: "Arial","Helvetica",  "Verdana", sans-serif;
	font-size: 90%;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	
	}

.menu #competiciones {font-size: 90%;}
  
.menu #mapa,  .menu #accesible {
	/*position: relative;
	top: 160%;*/
	font-size: 90%;
	text-transform: capitalize;
	}


.cabecera {
	font-size: 120%; /*100%*/
	font-family: "Arial","Helvetica",  "Verdana", sans-serif;
	}
	

.cabecera li {
	
	text-align: center;
	}

.contenido {
	font-size: 95%;
	text-align: justify;
	}

.contenido p {
	text-indent: 1em;
	}

.contenido p.centrado {
	text-indent: 0;
	}

.contenido ol li ul li {font-weight: normal;}

.contenido ul li ul li {
 	font-weight: normal;
 	}

.contenido dt {
	font-weight: bold;
	font-size: 90%;
	} 
	
	

.contenido .imagentexto {
	font-size: 90%;
	font-style: italic;
	text-align: right; 
	}

/*Menu de posicion o "migas" para indicar al usuario donde se encuentra*/
.migas {
	font-weight: bold;
	font-size: 80%; /*en tam. absoluto 10pt*/
	font-family: "Verdana",  "Arial", "Helvetica", sans-serif;
	text-align: left;
	vertical-align: top;
	}

/*Pequeño menú de navegación*/
.submenu {
	font-weight: bold;
	font-size: 90%; 
	font-family: "Verdana",  "Arial", "Helvetica", sans-serif; 
	line-height: 2.5em;	
	text-align: center;
	text-transform: lowercase;
	letter-spacing: 0.1em;
	}


.pie {
	font-weight: normal;
	font-size: 80%; 
	font-family: "Verdana",  "Arial", "Helvetica", sans-serif;
	text-align: right;
	}


.utilidades {
		font-size: 70%;
		font-family:  "Verdana", "Arial", sans-serif;
		text-align: center;
		}


.utilidades p {
	text-align: justify;
	}		

.banderas, .logosupizd {
	font-size: 75%;
		
	text-align: center;
	
	}
	
	
	

ul.retratos {line-height: 6em; }

ul.lrutas {line-height: 1.5em;}

.lrutas li {text-align: left;}

#concejales  {line-height: 1.5em;}

#buzon {
	font-size: 60%;
	text-align: center;
	}

/*================= ENLACES  ==============================================================*/	
/* Aquí se definen todas las propiedades de las pseudo-clases para los enlaces*/

:link {
	font-weight: bold;
	text-decoration: none;
	color: #0023B7; /*#6609FF*/
	}

:visited {
	font-weight: bold;
	text-decoration: none;
	color: #551A8B;/*0066CC;*/
	}

a:hover{
	text-decoration: underline;
  color: #D85600;/*F9A800;*/
  }

acronym:hover {
	cursor: help;
	}
	
abbr:hover {
	cursor: help;
	}


/* pone el borde en img con enlace */
a:link img, a:visited img, a:hover img {
 	padding: 0;
 	border-style: outset;
 	border-width: 2px;
 	border-color: #D85600;
 	} 
	
.menu li:hover {
	background: url(../imagenes/celtic_triskell_04.png)  top left  no-repeat;
	/*
	Imagen original obtenida de: http://www.openclipart.org/cgi-bin/navigate/decorations
	Autor: Olivier
	Titulo: Celtic Triskell
	Modificada por: Carlos F. Alvarez
	*/
	color: #0023B7;
	}
	
.menu a {
	margin: 0;
	font-weight: bold;
	line-height:13px;
	color: #317c2f; /*#FFFFFF; */
	}

 .menu a:visited {
 	text-decoration: none;
  color: #317c2f; /*#FFFFFF; */
   }
   
.menu a:hover {
	text-decoration: none;
 	color: #0023B7;
   }

.cabecera a {
	font-size: 90%;
	font-weight: normal;  
	text-align: center;
	color: #FFFFFF; /*#1F91F1;*/
	}

.cabecera a:visited{
	font-weight: normal;
	text-decoration: none;
	color: #FFFFFF;/*#F9A800;*/
   }
   
.cabecera a:hover {
	text-decoration: underline;
	color: #0023B7; /*#F9A800;*/
   }

.contenido a {text-decoration: underline; }

.contenido a:visited {text-decoration: underline; }

.contenido a:hover {
	background-color: #FFDD76; /*#F2F9E3;*/
	color: #603800;
	text-decoration: none;
	}
	


	

.submenu a {
	padding: 0.2em 0.3em 0.3em 0.3em;
	border-style: solid;
	border-width: 2px;
	border-color: transparent;
	color: #603800;
	text-decoration: none;
	}
	

.submenu a:visited {
color: #603800;
text-decoration: none;
}

.submenu a:hover {
	border-style: solid;
   	border-width: 2px;
	border-color:  #603800;
	text-decoration: none;
	}

/*Pequeño enlace hacia el inicio de la página*/
a.tope {
	background: transparent url(../imagenes/mini_trisquel.png)  center right no-repeat;
	/*
	Imagen original obte.openclipart.org/cgi-bin/navigate/decorations?Kilian Valkhof
	Titulo: triskel
	Modificada por: Carlos F. Alvarez
	*/
	display: block;
	position: relative;
	float: right;
	/*left: 87%;*/
	font-size: 80%;
	padding: 0.2em 2.1em 0.3em 0.1em;
	border-width: 2px;
	border-style: solid;
	border-color: #603800;
	text-align: left;
	text-transform: lowercase;
	color: #603800;
	text-decoration: none;
	}

a.tope:visited {
	color: #603800;
	text-decoration: none;
	}
 
a.tope:hover {text-decoration: none;}

a.ast {display: none;}
a.en {display: none;}
a.fr {display: none;}

.utilidades a { text-decoration: underline; }

.utilidades  a:hover {
	background-color: #FFDD76; /*#F2F9E3;*/
	color: #603800;
	}



/*================= TABLAS     ==============================================================*/

table {
	margin: 0 1em 0 3em;
	padding: 0;
	border-width: 0;
	border-collapse: collapse;
	font-size: 100%;
	color: #000000; 
	}

tr, thead {
	vertical-align: top;
	}

thead th {
	text-align: left;
	font-weight: bold;
	}

td,th {
	margin: 0;
	padding: 0.3em;
	text-align: left;
	vertical-align: top;
	font-weight: normal;
	}


tr {
	border-style: ridge;
	border-width: medium;
	border-color: #603800;
	}

table.ruta {
	margin-left: auto; 
	margin-right: auto; 
	text-align: center;
	}

 table.ruta td , table.ruta th {
 	text-align: center;
 	font-size: 80%;
 	}

table.telefonos {width: 80%;}
table.telefonos th {text-align: left; text-transform: uppercase;}
table.telefonos td {text-align: right;}

table#restaurantes, table#casas, table#hoteles, table#verano06 {margin: 0 0.5em 0 0.5em; font-size: 80%;}
    
table#verano06 td, table#verano06 th, table#tactividades td, table#tactividades th {
	border-style: ridge;
	border-width: medium;
	border-color: #603800;
	font-size: 80%;
	}


table#verano06 thead th {text-align: center; text-transform: uppercase;}
table#verano06 th {text-align: left;  text-transform: capitalize; font-weight: bold;}
table#verano06 td {text-align: right;}

table.abonos th {
	text-align: left;
	font-weight: bold;
	}

table#tactividades td, table#tactividades th {border-width: medium;}
/* =================== CARACTERISTICAS DE LOS FORMULARIOS  ======================================*/

.formulario {margin-left: 0.5em;}

.formulario #botonenviar {
	color: #ffffff;
	background-color: #317c2f;
	font-size: 110%;
	text-align: center;
	}
	
	

/*================= LISTAS     NUMERADAS ====================================================*/

/*.cabecera li.enlace6 { border-width: 1px 0 0 1px;}*/

/*
Para numerar listas. Solo funciona en Opera y Firefox 1.5 o superior
Ojo que ademas el maldito IE7, casca y no sigue interpretando la hoja de estilo
Luego hay que dejarlo al final
*/

ol.numerada {counter-reset: item;}

ol.numerada li {display: block;}

ol.numerada li:before { 
	content: counters(item, ".")  "  ";
	counter-increment: item;
  }