/* =====================================================
   PAZ PARA VIVIR — ESTILOS
   El orden de las secciones sigue la misma secuencia en
   que aparecen en index.html, de arriba hacia abajo.
   ===================================================== */


/* =====================================================
   RESET
   Quita el margen y relleno por defecto del navegador.
   ===================================================== */

html, body {
    margin: 0;
    padding: 0;
}


/* =====================================================
   FONDO Y TIPOGRAFÍA BASE
   Fondo repetido de girasoles, fuente y color de texto
   por defecto para todo el sitio.
   ===================================================== */

body {
    background-image: url("../img/background.jpg");
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =====================================================
   IMÁGENES
   Quita el borde por defecto de las imágenes y ajusta su
   comportamiento como bloque. Usada por el Banner, el
   fondo del menú superior, el Contenedor Gráfico y el
   Footer Gráfico.
   ===================================================== */

img { border: 0; }
.img-no-border { border: none; }
.img-bloque { display: block; }


/* =====================================================
   ENLACES
   Comportamiento general de los enlaces del sitio.
   ===================================================== */

a:link, a:visited { text-decoration: none; color: #000; }
a:hover, a:active { text-decoration: none; }
a:active { color: #FFF; }


/* =====================================================
   ESTRUCTURA GENERAL
   Contenedores principales que centran y posicionan todo
   el diseño de ancho fijo (1300px): #Wrapper-Centrado y
   #Contenedor.
   ===================================================== */

#Wrapper-Centrado {
    width: 1300px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    transform-origin: top left;
}

#Contenedor {
	position: absolute;
	width: 1300px;
	height: 3764px;
	z-index: 1;
	left: 0;
	top: -12px;
}


/* =====================================================
   MENÚ SUPERIOR
   Barra de navegación principal: contenedor, tabla,
   celdas de color y tipografía blanca de los enlaces.
   ===================================================== */

#Menu-Superior {
    position: absolute;
    width: 1300px;
    height: 49px;
    z-index: 2;
    left: 0;
    top: 453px;
}

#Menu-Superior table {
    width: 1300px;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

#Contenedor #Menu-Superior table tr td {
    text-align: center;
    padding: 0;
    border: none;
    vertical-align: middle;
}

.bg-verde-oscuro { background-color: #496314; }
.bg-verde-medio   { background-color: #597818; }
.bg-verde-claro   { background-color: #8CBE23; }

.font26white,
#Contenedor #Menu-Superior table tr td a {
    color: #FFFFFF !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: normal;
    text-decoration: none;
    display: block;
    width: 100%;
    line-height: 47px;
}


/* =====================================================
   MENÚ INFERIOR
   Accesos a Música, Televisión, Cine y Audiolibros: zonas
   de texto, tipografía, imágenes en su estado normal/hover
   y la interacción que alterna entre ambas al pasar el
   cursor (controlada por CSS, no por JavaScript).
   ===================================================== */

#Menu-Inferior {
    position: absolute;
    width: 1300px;
    height: 94px;
    z-index: 3;
    left: 0;
    top: 3680px;
}

#Tex-Musica      { position: absolute; width: 1px; height: 0; z-index: 4; font-size: 32px; left: 34px;  top: 13px; }
#Tex-Television  { position: absolute; width: 1px; height: 1px; z-index: 4; font-size: 32px; left: 344px; top: 13px; }
#Tex-Cine        { position: absolute; width: 0;   height: 0; z-index: 7; font-size: 32px; left: 701px; top: 13px; }
#Tex-Audiolibros { position: absolute; width: 150px; height: 25px; z-index: 2; font-size: 32px; left: 969px; top: 12px; }

.Font32 { color: #000000; text-align: center; font-size: 32px; font-family: Georgia, "Times New Roman", Times, serif; }

#Img-Musica-01 { position: absolute; width: 100px; height: 118px; z-index: 2; left: 151px; top: -23px; }
#Img-Musica-02 { position: absolute; width: 121px; height: 123px; z-index: 3; left: 152px; top: -23px; visibility: hidden; }

#Img-Television-01 { position: absolute; width: 108px; height: 112px; z-index: 5; left: 506px; top: -23px; }
#Img-Television-02 { position: absolute; width: 108px; height: 112px; z-index: 6; left: 506px; top: -23px; visibility: hidden; }

#Img-Cine-01 { position: absolute; width: 93px;  height: 118px; z-index: 8; left: 781px; top: -23px; }
#Img-Cine-02 { position: absolute; width: 109px; height: 104px; z-index: 9; left: 781px; top: -8px;  visibility: hidden; }

#Img-Audiolibros-01 { position: absolute; width: 107px; height: 126px; z-index: 11; left: 1154px; top: -23px; }
#Img-Audiolibros-02 { position: absolute; width: 114px; height: 114px; z-index: 12; left: 1154px; top: -7px;  visibility: hidden; }

#Tex-Musica:hover ~ #Img-Musica-01,
#Tex-Television:hover ~ #Img-Television-01,
#Tex-Cine:hover ~ #Img-Cine-01,
#Tex-Audiolibros:hover ~ #Img-Audiolibros-01 {
    visibility: hidden;
}

#Tex-Musica:hover ~ #Img-Musica-02,
#Tex-Television:hover ~ #Img-Television-02,
#Tex-Cine:hover ~ #Img-Cine-02,
#Tex-Audiolibros:hover ~ #Img-Audiolibros-02 {
    visibility: visible;
}


/* =====================================================
   CONTADOR
   Icono de usuario y contador de visitas externo.
   ===================================================== */

#Contardor-Visita {
    position: absolute;
    width: 116px;
    height: 78px;
    z-index: 2;
    left: 75px;
    top: 536px;
}

#Visita   { position: absolute; width: 67px; height: 85px; z-index: 4; left: 0;    top: -9px; }
#Contador { position: absolute; width: 0;    height: 0;    z-index: 4; left: 74px; top: 31px; }


/* =====================================================
   COPYRIGHT
   Aviso legal en la parte inferior de la página y enlace
   a las condiciones de uso.
   ===================================================== */

#copyright {
    position: absolute;
    width: 1298px;
    height: 22px;
    z-index: 2;
    left: 16px;
    top: 3782px;
    text-align: center;
    font-size: 16px;
    color: #FFF;
}

.uso { color: #FFF; }


/* =====================================================
   DONAR
   Botón de enlace al formulario de donación de PayPal.
   ===================================================== */

#Donar {
    position: absolute;
    width: 175px;
    height: 80px;
    z-index: 2;
    left: 1097px;
    top: 614px;
}


/* =====================================================
   CONTACTO
   Botón de enlace a la página de contacto.
   ===================================================== */

#Contacto {
    position: absolute;
    width: 200px;
    height: 101px;
    z-index: 2;
    left: 1072px;
    top: 505px;
}


/* =====================================================
   PUBLICIDAD INFERIOR
   Banner inferior con las mariposas animadas y el botón
   "Comienza Ahora".
   ===================================================== */

#Publicidad-Inferior {
    position: absolute;
    width: 1185px;
    height: 420px;
    z-index: 2;
    left: 84px;
    top: 3256px;
}

#Boton-Comienza { position: absolute; width: 247px; height: 60px;  z-index: 2; left: 600px; top: 119px; }
#Mariposa3      { position: absolute; width: 100px; height: 110px; z-index: 2; left: 396px; top: -17px; }
#Mariposa4      { position: absolute; width: 100px; height: 110px; z-index: 2; left: 940px; top: -16px; }


/* =====================================================
   PUBLICIDAD SUPERIOR
   Espacio reservado (vacío) sobre el banner principal.
   ===================================================== */

#Publicidad {
    position: absolute;
    width: 728px;
    height: 90px;
    z-index: 2;
    left: 301px;
    top: 603px;
}


/* =====================================================
   AJUSTES DENTRO DE #Contenedor
   Correcciones puntuales para imágenes y tablas dentro
   del contenedor principal.
   ===================================================== */

#Contenedor img {
	max-width: none;
}
#Contenedor table { margin: 0; padding: 0; }

/* FIN */