/*FUENTES*/
@font-face {font-family: 'roboto_condensedbold';src: url('Fonts/robotocondensed-bold-webfont.eot');src: url('Fonts/robotocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),url('Fonts/robotocondensed-bold-webfont.woff2') format('woff2'),url('Fonts/robotocondensed-bold-webfont.woff') format('woff'), url('Fonts/robotocondensed-bold-webfont.ttf') format('truetype'), url('Fonts/robotocondensed-bold-webfont.svg#roboto_condensedbold') format('svg');font-weight: normal;font-style: normal;}@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

/*INSTRUCCIONES PARA LA HTML MAPA*/
html {
    background-image: url(imagenes/ff.png);
}

header {
    padding: 20px;
    background: rgb(51, 51, 51);
}

body{
    display:inline-block;
    width: 968px;
    float: left;
    margin: 0 auto;
    padding-top: 2%;
    padding-left: 20%;
    text-align: center;
}

    

/*IMG LATERAL*/
#x {
    width: 197px;
    padding-left: 35px;
    padding-right: 40px;
    padding-bottom: 51px;
    padding-top: 20px;
    float: left;
    background : #333;}

#xx {
    width: 696px;
    padding: 0%;
    overflow: auto;
    display: block;
}




/*INSTRUCCIONES MENU DE NAVEGACION*/

#navlist { 
    font: bold 16px Verdana, sans-serif;
    font-size: 10px;}

#navlist li { 
    display: inline; 
    margin-left:10px;
    float: right;
    position: relative;}

#navlist li a { 
    padding: 3px 1em;
    border: 1px solid rgba(119, 119, 136, 0); 
    border-bottom: none;
    background: rgb(89, 196, 188); 
    text-decoration: none;
    color: #fff;
    display: block;
}
#navlist li a:hover {
    color: #fff; 
    background: rgb(248, 157, 87);}

#navlist li ul {
    padding-top: 2px;
    display: none;
    position:absolute;
    list-style:none;
    top: 19px;}

#navlist li:hover > ul {
    display: block;
}


/*INSTRUCCIONES LEYENDA*/
footer {
    clear: both;
    color: #fff;
    font-size: 10px;
    padding: 11px;
    text-align: justify;
    background: #333;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;}


/*INSTRUCCIONES CUERPO MEDIO*/
#ley {
    font-size: 25px;
    color: #333;
    font-family: roboto_condensedbold; 
    text-align: left;
    padding-left: 10px;
}

div#titulo{
    width:  693px;
    height: 360px;
    float: left;
    padding-top: 0px;
    padding-left: 0px;
    background: rgba(136, 248, 241, 0.33);
}



/*MENU IZQUIERDA*/
div#lacatedra{
    float: left;
    border-top: 3px solid #ccc;
    background:  rgba(255, 255, 255, 0.45);
    width: 965px;
}

div#lacatedra h4{
    float: left;
    color: #333;
}

/*MENU DERECHA*/
div#lacatedra nav#opcionesindex{
    height: 130px;
    width: 225px;
    float: right;
    padding-top: 100px;
}
div#lacatedra nav#opcionesindex ul li{
    padding: 0px;
    height: 35px;
    border-bottom: 1px solid #ccc;
    list-style: none;
    border-width: 3px;
    border-color: rgb(89, 196, 188);
    font-family: sans-serif;}

div#lacatedra nav#opcionesindex ul li a:hover{
    color: rgb(89, 196, 188);
    display: block;}

div#lacatedra nav#opcionesindex ul li a{
    font-size: 16px;
    margin: 0px;
    padding: 15px 10px 0px 10px;
    float: right;
    text-align: right;}

div#niveles{
    float: right;
    height: 65px;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 53rem;
    background:  rgba(255, 255, 255, 0.45);
}

div#niveles nav ul li{
    float: left;
    margin-left: 2px;
    list-style: none;
}

div#niveles nav ul li a{
    height: 20px;
    width: 60px;
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 30;
    color: #848484;
    padding: 0px;
}
div#niveles nav ul li a:hover{
    background: #333;
}
    
section#centro div#lacatedra a{
    font-size: 14px;
    text-decoration: none;
    color: #333;
    float: left;
    display: block;
    width: 150px;
}

section#centro div#lacatedra #a{
    text-align: left;
    padding-left: 10px;
    padding-right: 1px;
    height: 13px;
    width: 100px;
    clear: both;}

section#centro div#lacatedra #a:hover{
    color: rgb(89, 196, 188);
}

section#centro div#lacatedra p{
    font-size: 12px;
    width: 250px;
    height: 140px;
    float: left;
    clear: both;
    text-align: justify;
    margin-right: 200px;
    padding-left: 10px;
}


/*INSTRUCCIONES TITULARES*/
h4{ font-size: 20px;
    float: right;
    padding-left: 10px;
    font-family: roboto_condensedbold;}


/*WEB CATEDRA*/
#info{
    float: right;
    clear: both;
    color: #000;
    font-size: 12px;
    text-align: justify;
    background:  rgba(255, 255, 255, 0.81);
    padding: 15px;
}
#infotitulo{
    color:#fff;
    padding-left: 442px;
    font-family: roboto_condensedbold;
    float: right;
    background: #333;
    margin-top: 0px;
    height: 310px;
    padding-right: 0px;
    padding-top: 50px;
}

#im {
    width: 400px;
    position: absolute;
    margin-top: 100px;
    margin-left: 277px;
    margin-right: 0px;
    float: right;}


/*WEB DOCENTES*/


/*TRATAMIENTO DE IMAGENES*/
main img#izquierda {
    float: right; 
    height: 150px; 
    padding-right: 595px;
    clear: both;
    padding-top: 10px;
    padding-left: 0px;
    background: rgba(89, 196, 188, 0.28);}

main img#derecha {
    float: right; 
    height: 150px;
     padding-left: 595px;
    clear: both;
    background: rgba(196, 151, 89, 0.41);}

/*TRATAMIENTO DE TEXTO*/
main div#textoder { 
    border-bottom-style: inset;
    padding-top: 10px;
    display: inline-block;
    position: relative;
    background: #333;}

/*ESTILO DE TIPO*/
main h1 {
    font-size: 110px; 
    margin-left: 80px;
    margin-top: 0px;
    color: #fff;
    font-family: roboto_condensedbold;
    background: #333;
}

main div#textoder h3 {
    font-family: roboto_condensedbold; 
    color: #d0dda6;
    padding-left: 149px;
    }

main div#textoder h4 {
    font-family: roboto_condensedbold; 
    font-weight: 600; 
    color: #e3e3e3;
    padding-right: 180px;}


/*IMAGENES*/

.header hgroup h1{
 margin: 0;
 padding: 5px 0;
 color: rgb(220,220,220);
 text-shadow: 0 0 2px rgb(0,0,0);
 font-size: 40px;
 border-bottom: double 1px rgb(220,220,220) ;
 }
 
.header hgroup h2{
 margin:5px 0;
 color: rgb(220,220,220);
 text-shadow: 0 0 2px rgb(0,0,0);
 font-size: 22px;
 }
 
.section{
 width: 907px;
 margin: 0 auto;
 padding: 15px 30px;
 border: solid 1px rgba(250,250,250,0.8);
 box-shadow: 0 0 15px rgba(15,15,15,0.5);
 background: rgb(50,50,50);
 }

 .article{
 display: inline-block;
 width: 210px;
 position: relative;
 clear: both;
 padding: 0.5em;
 }
 
.article figure{padding: 0; margin: 0;}
 
.article figure img{
 width: 100%;
 height: 180px;
 border: solid 5px rgba(250,250,250,0.8);
 border-radius: 3px;
 box-shadow: 0 0 2px rgba(0,0,0,0.5);
 }
 
.article figure figcaption{
 padding: 5px;
 color: rgba(200,200,200,1);
 font-weight: bold;
 }

/*MANEJO DE DIV IMAGENES*/

div.background img {
 margin: 10% auto 0 ;
 border: solid 5px #FFF ;
 width: 500px;
 height: 350px;
 }

 div.background {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 height: 100%;
 width: 100%;
 text-align: center;
 background: rgba(0,0,0,0.8);
 }
 div.background:target {
 display: block;
 }
 /** IE no soporta :target, así que usaremos expresiones CSS **/
 div.background {
 display: expression((document.location.toString().split('#').slice(1) == this.
 id)?'block':'none');
 }
 
div.background .close{
 display: block;
 width: 500px;
 height: 0px;
 padding:0 10px 0 0;
 text-align: right;
 position: relative;
 color: #000;
 font-size: 18px;
 text-shadow: 0 0 4px #FFF;
 margin: -30px auto 0;
 }
 
div.background .close:hover{
 font-size: 19px;
 }
display: expression((document.location.toString().split('#').slice(1) == this.id)?'block':'none');