/*######### Genericos #############*/

* { padding:0px; margin:0px;outline:0;}

html, body {height:100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
}

body {background: url(../img/fondo.jpg);}

p {margin: 8px 0;}

em {font-weight: bold;}

acronym {color: #f0f;
    font-style: italic;
    cursor: help;
}

h1 {position: absolute;
    right: 26px;
    top: 40px;
    padding-top:70px;
    color: #3e66a2;
    font-size: 2em;
    background: url(../img/FDW.gif) no-repeat center top;
}

h2 {display:block;
    position: relative;
    top: 4px;
    margin-left: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

#contenedor {
    min-height:100%;
}

/*######### Interfaz  #############*/

a.icono {width: 80px;
    display: block;
    position: relative;
    padding-top: 25px;
    margin-left: 20px;
    font-size: 0.7em;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

a.icono img {display: block;
    margin: 0 auto 4px;
    border: none;
}

div.ventana {position: absolute;    width: 470px;
    height: 312px;
    text-align: left;
    background: url(../img/ventana.png);
    font-size: 0.8em;
    display: none;
}

a.fijar {position: absolute;
    width: 470px;
    text-decoration: none;
    font-size: 0.7em;
    display: none;
}

a.icono:focus + a.fijar {display: block;
}

a.icono:focus + a + div.ventana {display: block;
    z-index: 4;
    background-position: center top;
}

div.ventana:hover {display: block;
    z-index: 8;
}

.uno {left: 200px; top:40px;}
.dos {left: 350px; top:100px;}
.tres {left: 150px; top:200px;}
.cuatro {left: 420px; top:160px;}

span.fijarventana {display: block;
    position: relative;
    top: -18px;
    float: right;
    padding: 23px 32px 0 0;
    background: url(../img/chincheta.gif) no-repeat top right;
    text-align:right;
    color:#fff;
    font-size: 0.8em;
    font-weight: bold;
    z-index: 6;
}

span.fijarventana:hover {text-decoration: underline;}

a.fijar:visited span.fijarventana {display: none;}

a.fijar:visited, a.fijar:active {display: block;
    z-index: 3;
    width: 470px;
    height: 312px;
    background: transparent;
}

a.fijar:focus {z-index: 5;
}

a.fijar:visited + div.ventana {display: block;
background-position: center bottom;
}

a.fijar:focus + div.ventana {z-index: 6;
background-position: center top;
}

.texto {display: block;
    position: relative;
    top: 7px;
    width: 438px;
    height: 254px;
    padding: 10px 12px 0 18px;
    overflow: auto;
    color: #000;
    text-align: justify;
}

#pie {position: absolute;
    bottom: 0;
    left: 0;
    margin-top: -2.1em;
    width: 100%;
    height: 2.1em;
    text-align: right;
    font-size: 0.8em;
    background: url(../img/pie.png) repeat-x center top;
}

#pie img {position:relative;
    top: 2px;
}

#informacion {position: relative;
    top: 2px;
    padding-left: 4px;
    margin-right: 4px;
    float: right;
    border: inset 1px #ccc;
}

.barra {position: relative;
    bottom: 2px;
}

/*######### Menu enlaces #############*/

#menu {position: relative;
    top: 2px;
    left: 4px;
    text-align: center;
}

#menu ul { list-style-type: none;}

#menu ul li.nivel1 {position: relative;
    padding: 2px 8px;
    float: left;
    width: 100px;
    color: #fff;
    font-weight: bold;
    border: outset 2px #ccc;
    background: url(../img/enlaces.png) repeat-x;
}

#menu ul li.nivel1:hover {cursor: pointer;}

#menu ul li ul {display: none;}

#menu ul li:hover ul {display: block;
    position: absolute;
    left: 0px;
    bottom: 22px;
}

#menu ul li ul li {background: url(../img/pie.png) repeat-x;
    text-align: left;
}

#menu ul li ul li a {display: block;
    padding: 6px;
    width: 160px;
    color: #000;
    font-weight: normal;
    text-decoration: none;
    border: outset 1px #fff;
}

#menu ul li ul li a:hover {color: #fff;
    border-bottom-color: #000;
    background-color: #345fb7;
}