/*formato para elementos de diseño*/

			/*Sección I-- clases para uso en el contenido de páginas */

/*para poner la referencia o el autor de una citacion ( --Santiago 2.26)  se pone en el proximo renglon, despues de un elemento con margen abajo */
.citacion {margin-left: 2em;
			margin-top: -.5em;
			}

/*el equivalente de h3, ya que h3 no se centra */
.h3 {margin-top: 0px; 
	margin-bottom: 10px;
	margin-left: 2em; 
	margin-right: 0px;
	font-size: 150%;
	font-family: "Berlin Sans FB Demi", Impact, Techno, sans-serif;
	text-align: left;
	}

	/*el equivalente de h5, ya que h5 no se centra */
.h5 {margin-top: 0px; 			
	margin-bottom: 10px;
	margin-left: 0px; 
	margin-right: 0px;
	font-size: 100%;
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
	text-align: left;	
	}
	
	/*el equivalente de h6, ya que h6 no se centra */
.titulo {margin-top: 0px; 	
	margin-bottom: 0em;
	margin-left: 0px; 
	margin-right: 0px;
	font-size: 90%;
	font-weight: bold;
	text-align: left;
	}

ul.sin_vineta { list-style: none; }


ul.normal { list-style-type: disc; 
	list-style-image: url(imagenes/vineta1.gif); }

ul.disco	{ list-style: disc; }
			
/*Para flotar imagenes */
.flotar_der {float: right; margin-bottom: 5px; position: relative; }
.flotar_izq {float: left; margin-bottom: 5px; position: relative; }

	/*Empieza sección para texto en caja o fotos con etiquetas.  La etiqueta para fotos en los lados lleva 220px.
Caja-- una sección apartada llenando la anchura del elemento
caja_izq o caja_der-- para fotos con etiquetas o otra sección a un lado-- elementos con 220px de anchura.
columna-- 55% de anchura-- se usa en la pagina de Contacto, se alinea a la derecha.	*/

.caja_izq, .caja_der, .caja, .columna {border: 1px solid #8b0000;
				background-color: #ffe4e1;
				padding: 10px;
				text-align: center;
				margin-bottom: 5px;
				}
				
.caja {
	margin-top: 5px; }


/*Para fotos en el lado iquierdo*/
.caja_izq {float: left;
		margin-right: 10px;
		clear: left; 
		}
					
/*para fotos en el lado derecho*/
.caja_der {float: right;
		margin-left: 10px;
		clear: right; }

.columna {float: right;
				margin-left: 10px;
				width: 55%;
				}

/*Aqui se especifica la anchura de del texto debajo de la foto*/
.caja_izq p, h1, h2, h3, h4, h5, h6, address {margin: 0px; text-align: left; width: 220px;}
										
.caja_der p, h1, h2, h3, h4, h5, h6, address {margin: 0px;	text-align: left; width: 220px;}
										
.caja p, h1, h2, h3, h4, h5, h6, address {margin: 0px;	text-align: left;	width: 80%;}

.columna p, h1, h2, h3, h4, h5, h6 {margin: 0px; text-align: left; width: auto; }

.caja_izq img, .caja_der img, .caja img, .columna img {border-right: 1px solid #8b0000;
					border-bottom: 1px solid #8b0000;
					border-left: 1px solid #f4a460;
					border-top: 1px solid #f4a460;
					}
					/*termina caja */
					
					
					/*fotos sin etiquetas */
.foto, .foto_izq, .foto_der {border-right: 1px solid #8b0000;
						border-bottom: 1px solid #8b0000;
						border-left: 1px solid #f4a460;
						border-top: 1px solid #f4a460;
						}
						
.foto_izq {float: left; margin-bottom: 5px; margin-right: 10px; margin-top: 0px; position: relative; }

.foto_der {float: right; margin-bottom: 5px; margin-left: 10px; margin-top: 0px; position: relative; }


/*Alineación de letra */
.derecho {text-align: right; }
.centrar {text-align: center; }
.izquierdo {text-align: left; }

					
/*Para eliminar el margen de abajo */
.sin_margen_abajo {margin-bottom: 0px;}



.color {color: #8b0000 } 	
.pequeño {font-size: 80%}	
.blanco  {color: #ffffff; }
.margen_abajo {margin-bottom: 1em; }



.mover_izq {position: relative; /*para mover algo de su posición normal*/
			left: 2em;
			}
			
.mover_der {position: relative;
			right: 2em;
			}

/*Sangrar una sección*/
.sangrar {margin-left: 2em; }

table.normal {border: 1px solid #8b0000;
			padding: 0px;
			padding-top: .5em;
			padding-left: 5px;
			padding-right: 5px;
			}

/* necesario?? */
.fecha {margin-left: 2em;
	color: #8b0000;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 80%;
}
			
.nobajar {white-space: nowrap }	/*Para prevenir que el texto siga en otro renglon*/

.borde {border: 1px solid #8b0000; } /*agregar borde */


/*Seccion II -- clases de formato de letra en el diseño de la página*/

.enlaces_barra_titulo {font-weight: bold;
				margin-right: 1em;
				margin-left: 3em;
				font-size: 105%;
				color: #8b0000;
				padding: 2px;
				}
/*
.enlaces_barra_titulo a {font-size: 105%; text-decoration: none; }
*/				
.enlaces_barra_titulo a:link {font-size: 105%; text-decoration: none; }
.enlaces_barra_titulo a:visited {font-size: 105%; text-decoration: none; }
.enlaces_barra_titulo a:hover {font-size: 105%; text-decoration: none; }
.enlaces_barra_titulo a:active {font-size: 105%; text-decoration: none; }


div.enlaces_menu {margin-top: 40px;
		margin-bottom: 0px;
		margin-right: -8px;
		left: -15px;
		line-height: 1.2;
		font-size: 100%;
		font-weight: bold;
		
		}

/*.......barra de menu vertical.......

	si no quiere las viñetas
.enlaces_menu ul {list-style: none;
		}
*/

.enlaces_menu li {margin-bottom: 0em;
				}

.enlaces_menu a {display: block;
		padding-top: .25em;
		padding-bottom: .25em;
		padding-right: 8px;
		height: 1%; /*arregla problemas en Internet Explorer */}	
		
.enlaces_menu a:link {color: #8b0000; text-decoration: none; background-color: none}
.enlaces_menu a:visited {color: #8b0000; text-decoration: none; background-color: none; }
.enlaces_menu a:hover {color: #8b0000; text-decoration: none; background-color: #f4a460; }
.enlaces_menu a:active {color: #8b0000; text-decoration: none; background-color: #f4a460; }


/*para el texto bajo la pagina*/
.abajo {font-size: 80%;
		margin-top: 5px;
		margin-bottom: -5px;
		text-align: center;
		color: #8b0000;
		}

.abajo_negro {font-family: "Berlin Sans FB Demi", Impact, Techno, sans-serif;
		margin-right: 2em;
		color: black;
		}

/*Para poner un mensaje detras del video*/		
#detras {position: absolute;
		top: 150px;
		width: 300px;
		right: 20%; }


		
		
/* Seccion III -- clases de la forma de página (layout) -- favor de no cambiar sin buen motivo */

.principal {	width: 80%;
		min-width: 800px;
		max-width: 1000px;
		top: 5px;
		border-left: 4px solid #8b0000;
		border-right: 4px solid #8b0000;		
		}


		/*las siguientes divisiones están adentro de la principal*/
		

/*		experimento para poner imagen de borde derecho
.borde_der {			background-color: none;
					width: 5px; 
					background-image: url(imagenes/borde_der.gif);
					background-repeat: repeat-y;
					background-position: top right;
					z-index: 0;
					}
*/

	/*Bordes y esquinas */
		
div.borde_arr {top: 0px;	/*en div.cabeza */
					height: 5px;
					background-image: url(imagenes/borde_arr.gif);
					background-repeat: repeat-x;
					z-index: 0;
					font-size: 1%; 
					}
					


div.borde_aba {bottom: 0px;	/*en div.partemayor */
					vertical-align: baseline;		/*valor predeterminado (default value) */
					height: 6px;
					background-image: url(imagenes/borde_aba.gif);
					background-repeat: repeat-x;
					background-position: bottom;
					clear: both;			/*para que un elemento (foto) flotante no sobrepase el borde de abajo */
					z-index: 0;
					font-size: 1%;
					margin-top: 5px; 
					}

					
.esquina_arr_izq {position: absolute;	/*en div.borde_arr.... */
					top: -1px;
					left: -6px;
					z-index: 1;
					}

.esquina_arr_der {position: absolute;
					top: 0px;
					right: -5px;
					}
					
.esquina_aba_izq {position: absolute;		/*en div.borde_aba... */
					bottom: 0px;
					left: -5px;
					z-index: 1;
					}
					
.esquina_aba_der {position: absolute;
					bottom: 0px;
					right: -5px;
					z-index: 1;
					}
					

div.cabeza {top: 0px;	/*esta division lleva las siguientes adentro */
			width: 100%;
			background-color: #f08080;
			vertical-align: top;
			text-align: right;
			white-space: nowrap; 
			z-index: 0;
			}
			
div.cabeza_der {text-align: right;
			margin-left: 195px;
			}
					
.cabeza_imagen_izq {position: relative;
			top: 0px;
			right: 0px;
			z-index: 1;
			vertical-align: top
			}

.cabeza_imagen_med {position: relative;
			top: 0px;
			right: 0px;
			z-index: 1;
			vertical-align: top
			}			
			
.cabeza_imagen_der {position: relative;
			top: 19px;
			right: 0px;
			z-index: 1;
			}


			
div.barra_titulo {right: 0px;
				width: 100%;
				min-height: 21px;
				text-align: right;
				vertical-align: text-bottom;
				background-image: url(imagenes/barratitulo.gif);
				background-repeat: repeat-x;
				background-position: bottom right;
				z-index: 0;
				}
				
				
				
		/*termina division cabeza*/
		
		/*Division espacio_izq con lo siguiente adentro */		

div.menu {background-color: #f08080;
		background-image: url(imagenes/borde_div_der.gif);
		background-repeat: repeat-y;
		background-position: top right;
		left: 0px;	
		top: -21px;
		width: 200px;
		float: left;
		z-index: 1;
		}

.corazon {position: absolute;
	/*		float: left; */
			top: -150px;
			left: 15px;
			z-index: 2;	
					}
		
					
.barratitulo_inicio {position: absolute;
					top: 0px;
					right: -64px;
				/*	z-index: 1;	*/
					}
					

div.menu_borde_aba {bottom: 0px;	/*absoluto necesario para escribir la division antes del menu, para que aparezca atras del menu expandible */
				left: 0px;
				padding-bottom: 27px; /*para que el borde pegue abajo y no con el ultimo renglon del menu; solo padding importa en IE*/
				height: 100%;
				width: 100%;
				background-image: url(imagenes/borde_div_aba.gif);
				background-repeat: repeat-x;
				background-position: bottom left;
			/*	z-index: 1;	*/
				}
				
.menu_esquina_aba {position: absolute;
					bottom: 1px;
					right: 0px;
				/*	z-index: 1;	*/
					}
					

/* la caja para poner un enlace a algo de noticias */

div.noticias {border: 1px solid #8b0000;
				background-color: #ffe4e1;
				padding: 5px;
				text-align: center;
				margin: 5px;
				margin-right: 10px;
				z-index: 1; 
				}
				
				
					/* Se termina menu */
		

		
div.partemayor {background-color: #ffebcd;
					background-image: url(imagenes/ladoizq.jpg);
					background-repeat: repeat-y;
					background-position: top left;
					}
					
div.texto {	padding-top: 10px;
			padding-left: 210px;
			padding-right: 20px;
			padding-bottom: 10px;
			}