/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Documento CSS de 'plantilla'
	Autor: cscope.info
	Ultima edicion: 19 de julio de 2008
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/



/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	1. ESTILOS ESTRUCTURALES GENERALES
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
	#pagina,
	#pie {
		background-color: #FFF;
		min-width: 740px;
		max-width: 1200px;
		margin: 0 auto;
		text-align: left;
	}


/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	2. CABECERA
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
	#cabecera {
		width: 100%;
		height: 372px;
		position: relative;
	}
		
		/*
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			2.1 Logotipo
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		*/
			#bloque-logotipo {
				background: #FFF url(bmp/fondo-logotipo.jpg) repeat-y right top;
				height: 172px;
				width: 204px;
				position: absolute;
				top: 0;
				left: 0;
			}
				.logo {
						background-color: #FFF;
						color: #631F2C;
						height: 172px;
						margin:0;
						overflow: hidden;
						position: relative;
						width: 188px;
				}
				
				.logo span {
					background: url(bmp/logotipo.jpg) no-repeat 0 0;
					height: 100%;
					position: absolute;
					width: 100%;
				}
				
				.logo a {
					background-color: inherit;
					color: #631F2C;
					cursor: pointer;
				}
		/*
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			2.2 Menu principal
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		*/
			#menu {
				position: absolute;
				top:0;
				left: 204px;
				width: 84%;
			}
				#menu li {
					background-color: #FFF;
					color: #666;
					width: 12.3%;
					float: left;
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size:1em;
					line-height: 1.2em;
					font-weight: bold;
					display: inline;
					height: 172px;
					border-right: 1px solid #CCCCCC;
					position: relative;
					text-align: center;
				}
				
					#menu li span {
						display:block;
						position: absolute;
						bottom: 5px;
						left:0;
						width: 100%;
					}
					
					#menu li a {
						background: url(bmp/fondo-li.gif) repeat-x 0 0;
						color: #666;
						display: block;
						height: 100%;
						text-decoration: none;
					}
					
					#menu li a:hover,
					#menu li.selec a {
						background: url(bmp/fondo-li-a.gif) repeat-x 0 0;
						color: #FF3333;
					}


/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	3. CUERPO
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

	#cuerpo {
		background: #FFF url(bmp/fondo-cuerpo.jpg) repeat-x 0 0;
		height: 1%;
	}
		/*
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			3.1 Contenido
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		*/
			#contenido {
				background: url(bmp/fondo-contenido.gif) repeat-y 17% 0;
				height: 1%;
			}
				#contenido.principal {
					background: none;
					padding-top: 16px;
				}
		/*
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			3.2 Tipologías de columna
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		*/
			.col17 {
				width: 17%;
				float: left;
				padding-top: 40px;
			}
			
			.col40 {
				width: 40%;
				float: left;
				padding-bottom: 20px;
			}
			.col43 {
				width: 43%;
				float: left;
			}
				.col43 img {
					margin-bottom: 6px;
				}
				
			.col49 {
				width: 49%;
				float: left;
			}
			
			.col50 {
				width: 50%;
				float: left;
			}
			
			.col57 {
				width: 57%;
				float: left;
			}
			
			.col56 {
				width: 56%;
				float: left;
			}
			
			.col60 {
				width: 60%;
				float: left;
			}
			
			.col83 {
				width: 83%;
				float: left;
				padding-top: 16px;
				padding-bottom: 20px;
			}

			
		/*
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			3.3 Submenu lateral
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		*/	
			/* 3.3.1 Cabecera de seccion */
			.seccion {
				background-color: #666;
				color: #FFF;
				font-size: 1.2em;
				font-weight: bold;
				margin: 0 5px 0 5px;
				padding: 5px;
			}

				/* 3.3.1.1 Con enlace */
				.seccion a {
					color: #FFF;
					text-decoration: none;
				}
				.seccion a:hover {
					text-decoration: none;
				}
				
				/* 3.3.1.2 Texto de introduccion */
				.intro {
					font-size: 1.2em;
					margin: 5px 10px;
				}
			
			/* 3.3.2 Lista de submenu */
			#submenu li {
				border-bottom: 1px solid #E0E0E0;
				font-size: 1.2em;
				margin: 0 5px;
				padding: 5px;
			}
			
				/* 3.3.2.1 Enlaces */
				#submenu li a {
					background: url(bmp/fondo-submenu-li.gif) no-repeat 0 0;
					color: #666;
					display: block;
					padding-left: 15px;
					text-decoration: none;
				}
				#submenu li a:hover,
				#submenu li.selec a {
					background: url(bmp/fondo-submenu-li-hover.gif) no-repeat 0 0;
					color: #FF3333;
					text-decoration: none;
				}
				
				/* 3.3.2.2 Enlaces de pdf */
				#submenu li.pdf a,
				#submenu li.pdf a:hover {
					background: url(bmp/icono-pdf.png) no-repeat 0 0;
				}
				
				/* 3.3.2.3 Enlaces externos */
				#submenu li.enlace-externo a,
				#submenu li.enlace-externo a:hover {
					background: url(bmp/icono-enlace-externo.png) no-repeat 0 0;
				}

		
		/*
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			3.4 Modulos de contenido
			~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		*/			
			/* 3.4.1 Noticias */
			
				/* 3.4.1.1 Listado de noticias de página principal */
				.noticias-ppal {
					border-bottom: 1px dotted #CCC;
					margin-bottom: 20px;
					padding-bottom: 5px;
					height: 1%;
				}
	
				/* 3.4.1.2 Listado pequeño de noticias */
				.noticias {
					
					margin-bottom: 30px;
				}
					.noticias .masinfo {
						margin-bottom: 30px;
					}

				/* 3.4.1.3 Noticia desarrollada */
				.noticia h1 {
					margin-bottom: 10px;
				}
				
				/* 3.4.1.4 Bloques de noticias */
				.imagen-noticia {
					float:left;
					margin-right: 10px;
					margin-bottom: 0;
					display: inline;
				}
					.imagen-noticia img {
						padding: 3px;
						border: 1px solid #CCC;
					}


			/* 3.4.2 Eventos */
			.evento {
				background-color: #E3E3E3;
				margin: 0 30px 30px 30px;
				padding-top: 10px;
				padding-bottom: 10px;
			}
				.evento h3 {
					border-bottom: 1px solid #333;
					margin: 0 20px 10px 20px;
					padding-bottom: 10px;
				}
					.evento h3 span {
						border-bottom: 4px solid #333;
						padding-bottom: 5px
					}
						.evento h3 span.fecha {border:0;font-size: 12px;font-weight: normal;}
			
				.evento p {
					margin: 0 20px 10px 20px;
				}
					.evento p.fecha {
						margin-bottom: 0;
					}
					.evento p.titulo {
						margin-bottom: 0;
						font-weight: bold;
					}
					.evento p.entradilla {
						font-size: 1.2em;
					}
					
				.evento a {
					text-decoration: none;
				}
					.evento a:hover {
						text-decoration: underline;
					}	


			/* 3.4.3 Galeria de imagenes */
			.galeria {
				margin-left: 30px;
				overflow: hidden;
			}
				.galeria li {
					float:left;
					display: inline;
					margin-right: 6%;
					height: 71px;
					overflow: hidden;
				}
					.galeria li.ultimo {
						margin:0;
					}
					
					.galeria li img {
						width: 95px;
					}


			/* 3.4.4 Listados */
			.listado {
				margin: 0 30px 0 30px;
			}
				.listado li {
					margin: 0 0 10px 30px;
					font-size: 1.4em;
					line-height: 1.4em;
					background: url(bmp/icono-lista.gif) no-repeat 0 7px;
					padding-left: 12px;
				}
			
			
			/* 3.4.5 Directorios */
			.directorio {
				margin: 0 30px 0 30px;
			}
				.directorio li {
					display: inline;
					float: left;
					font-size: 1.4em;
					margin: 0 0 10px 0;
					line-height: 1.4em;
					width: 234px;
				}
				.directorio li a {
					background: url(bmp/icono-carpeta.png) no-repeat 0 7px;
					color: #333;
					display: block;
					height: 55px;
					padding-top: 20px;
					padding-left: 80px;
					text-decoration: none;
				}
				.directorio li a:hover {
					text-decoration: underline;
				}
			
			
			/* 3.4.6 Anuncios */
			.anuncio {
				background: url(bmp/fondo-anuncio.jpg) repeat 0 0;
				margin: 0 30px 30px 30px;
			}
				.anuncio h3 {
					font-family: Verdana, Arial, Helvetica, sans-serif;
					font-size: 2.8em;
					font-weight: normal;
					margin: 0 20px 5px 20px;
				}
				.anuncio p {
					font-family: Arial, Helvetica, sans-serif;
					font-size: 1.2em;
					margin: 0 20px 5px 20px;
					padding-right: 100px;
				}
				.anuncio-imagen {
					background: url(bmp/imagen-anuncio.jpg) no-repeat 0 bottom;	
					height: 1%;
				}
				.anuncio-icono {
					background: url(bmp/icono-anuncio.png) no-repeat 95% bottom;
					height: 1%;
					padding: 15px 0 15px 0;	
				}


			/* 3.4.7 Mapa del sitio */
			#mapaweb {
				color: #333;
				font-size: 1.2em;
				margin: 0 30px 20px 30px;
			}
			
			#mapaweb li {
				list-style-type: none;
			}
			
			ul#mapaweb > li {
				margin-bottom: 10px;
			}
			
			#mapaweb ul {
				margin-left: 32px;
			}
			
			#mapaweb ul li {
				list-style-image: url(bmp/1normal.gif);
			}
			
			#mapaweb ul ul li {
				list-style-image: url(bmp/11normal.gif);
			}
			
			#mapaweb ul li.primero {
				list-style-image: url(bmp/1primero.gif);
			}
			
			#mapaweb ul li.ultimo {
				list-style-image: url(bmp/1ultimo.gif);
			}
			
			#mapaweb ul ul li.primero {
				list-style-image: url(bmp/11primero.gif);
			}
			
			#mapaweb ul ul li.ultimo {
				list-style-image: url(bmp/11ultimo.gif);
			}
			
			#mapaweb a {
				color: #333;
				text-decoration: none;
			}
			
			#mapaweb a:hover {
				color: #CC0000;
				text-decoration: underline;
			}


/* 
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	4. PIE
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
	#pie {
		background-color: #333;
		border-bottom: 10px solid #000;
		padding-bottom: 10px;
	}
	
	
		/* 4.1 Zona superior */
		.pie-superior {
			padding: 5px 0;
			margin-bottom: 5px;
			width: 100%;
		}
			.pie-superior ul {
				float: right;
				margin-right: 5px;
			}
				.pie-superior li,
				.pie-inferior li {
					color: #FFF;
					display: inline;
					font-size: 1.2em;
					width: auto;
					font-family: "Trebuchet MS", Arial, sans-serif;
					float: left;
					margin-right: 5px;
				}
					.pie-superior li a {
						color: #FFF;
						text-decoration: none;
					}
					.pie-superior li a:hover {
						text-decoration: underline;
					}
				
					
		/* 4.2 Zona inferior */			
		.pie-inferior {width: 100%;}
			
			.pie-inferior p {
				font-size: 1.1em;
				font-family: "Trebuchet MS", Arial, sans-serif;
				margin: 0 10px 5px 10px;
				width: 47%;
				display: inline;
				float: left;
			}
			
			.pie-inferior ul {
				margin-left: 10px;
			}
				.pie-inferior li {
					color: #666;
					font-size: 1.1em;
				}
					.pie-inferior li a {
						color: #666;
					}