/*
-----------------------------------------------------------------------
Estilos generales
-----------------------------------------------------------------------
*/

a { color: #3558a8; }
blockquote { font-style:italic; text-align:center; background-color:#eeeeee; line-height:30px; border:solid 1px #cccccc; }
p { margin: 0px; margin-bottom:12px; line-height:24px; text-align:justify; }
ul,
ol { margin-top: 6px; }
li { margin-bottom: 6px; }

/*
-----------------------------------------------------------------------
Clases
-----------------------------------------------------------------------
*/

.linea { display: inline-block; }
.multilinea { white-space: pre-line; }
.mascaraOculta { width: 0%; height: 0%; opacity: 0; position: fixed; z-index: 100; top: 0; left: 0; overflow: hidden; background-color: #000000; transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s; }
.mascaraActiva { width: 100%; height: 100%; opacity: 0.7; transition: opacity 0.3s; }
.img-inline-center { float: none; }

.img-float-left { float: left; }
.img-float-right { float: right; margin-left: 20px; }
.border { border: solid 1px; }

/*
-----------------------------------------------------------------------
Fuentes
-----------------------------------------------------------------------
*/

@font-face {
     font-family: Source Sans Pro;
     src: url(../fonts/SourceSansPro/SourceSansPro-Regular.ttf);
     font-weight: normal;
 }

@font-face {
     font-family: Source Sans Pro;
     src: url(../fonts/SourceSansPro/SourceSansPro-Bold.ttf);
     font-weight: bold;
 }

@font-face {
     font-family: playfairDisplay;
     src: url(../fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf);
     font-weight: normal;
 }

@font-face {
     font-family: playfairDisplay;
     src: url(../fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf);
     font-weight: bold;
 }

/*
-----------------------------------------------------------------------
Posicionamiento general de la página
-----------------------------------------------------------------------
*/
body { margin:0px; padding:0px; font:normal 14px 'Source Sans Pro'; color: #444444; background:#efefef url(../images/libreta.gif); }
#pagina { width:960px; margin-left:auto; margin-right:auto; margin-bottom: 50px; text-align:left; background-color:#ffffff; box-shadow: 2px 2px 15px #666666; border-color:#333333; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

/*
-----------------------------------------------------------------------
Cabecera
-----------------------------------------------------------------------
*/
header { background-color: #acb7c6; }

    #tituloCabecera { width:960px; height:100px; background-image:url(../images/conselleria.jpg), url(../images/cabecera.jpg); background-repeat:no-repeat, no-repeat; background-position:left center, right center; }
    #tituloCabecera > h1 { display:none; }

    #showMenu { display:none; float:left; margin-top: 103px;}
        #menuIcon { margin-left:7px; margin-top:1px; width:20px; }
        #menuIcon:focus { outline-width: 0; }


    #barraEnlacesExternos { margin-left:220px; height:28px; font-variant:small-caps; font:normal 14px/28px Century Gothic, Arial; text-align:right; background: #6e9bc1; }
    #barraEnlacesExternos > h2 { display:none; }

        #listaEnlacesExternos { display:inline; }
        #listaEnlacesExternos > li { display:inline; padding-left:8px; padding-right:8px; color:#ffffff; border-left:solid 1px #94abe0; border-right:solid 1px #5e71a3; text-shadow:0px 1px 1px #333333; }
        #listaEnlacesExternos > li:first-of-type { padding-left:0px; border-left:0px; }
        #listaEnlacesExternos > li:last-of-type { border-right:0px; margin-right: 2px; }
        #listaEnlacesExternos a { text-decoration:none; color:#ffffff; }
        #listaEnlacesExternos a:hover { color:#30400f; }
        
    #barraIdiomas { float:right; width: 200px; background-color:#ffffff; height:28px; font-variant:small-caps; font:normal 14px/28px Century Gothic, Arial; text-align:right; }
    #barraIdiomas > h2 { display:none; }

        #listaIdiomas { display:inline;  }
        #listaIdiomas > li { display:inline;  padding:10px 10px 0px 6px; font-size:14px; font-family:Century Gothic, Arial; }
        #listaIdiomas a { text-decoration:none; color:#666666; }

/*
-----------------------------------------------------------------------
Cuerpo
-----------------------------------------------------------------------
*/
main { background-color:#ffffff; }


/*
-----------------------------------------------------------------------
Barra lateral
-----------------------------------------------------------------------
*/
#sidebar { padding:5px; float:left; width:210px; background: linear-gradient(to bottom, #f4f5f7 80%, #ffffff) no-repeat; }

    nav { margin-top:10px; }
    nav > h2 { display:none; }

        #menuNavegacion { margin-left:-15px; list-style-type:none; }
        #menuNavegacion > li { padding-left:5px; margin: 0px 5px 0px -20px; border-bottom:solid 1px #c9dbf4;  font: 13px/24px Century Gothic, Arial; letter-spacing: 0.05em;  }
        #menuNavegacion > li:last-of-type { border-bottom: 0px; }
        #menuNavegacion > li > a { text-decoration:none; color:#666666; }
        #menuNavegacion > li > a:hover { font-weight:bold; }

        .menuMultiple { margin: 1px 3px 0px -37px; font-weight:bold; list-style-type:none; background:#f5f4d2;}    
        .menuMultiple > ul { margin-left:-6px; margin-top:0; margin-bottom:0; list-style-position:outside; }
        .menuMultiple > ul > li { padding:2px; padding-left:5px; margin: 0px -1px 0px -38px; list-style-type:none; border-bottom:solid 1px #eeeeee; background-color:#ffffff; font:normal 11px/18px Century Gothic, Arial; }
        .menuMultiple > ul > li > a { text-decoration:none; color:#666666; }
        .menuMultiple > ul > li > a:hover { font-weight:bold; text-shadow:0px 1px 1px #bbbbbb; }

    aside { margin-bottom:50px; padding-bottom: 50px; }

        #erasmus { text-align:center; }
        #erasmus > a > img { width:206px; }

        #fse { margin-top: 10px; text-align:center; }
        #fse > a > img { width:210px; }

        #podcast { margin-top: 20px; text-align:center; }
        #podcast > a > img { width:200px; border: solid 1px #999999; }

        #clarioDigital { margin-top: 20px; text-align:center; }
        #clarioDigital > a > img { width:200px; border: solid 1px #999999; }

        #ampa { margin-top: 20px; text-align:center; }
        #ampa > a > img { width:150px; border: solid 1px #999999; }

        #itaca { margin-top: 20px; text-align:center; }
        #itaca > a > img { border:solid 1px #999999; }

        #premios { margin-top: 60px; text-align:center; }
        #premios > img { width:120px; margin-bottom:10px; }
        #premios > .borde { border:solid 1px #999999; }

/*
-----------------------------------------------------------------------
Contenido
-----------------------------------------------------------------------
*/
section { margin-left:220px; padding: 30px; }
section > h2 {  margin: 0px; margin-bottom:5px; font:12px Verdana; text-transform: capitalize; color:#aaaaaa;  }
section > h3 {  margin: 0px; margin-bottom:20px; font:bold 24px playfairDisplay; color:#555555; letter-spacing: 0.1em; border-bottom: solid 1px #aaaaaa; border-top: solid 1px #aaaaaa; }
section > h4 {  margin: 0px; margin-bottom:5px; margin-top: 30px; border-bottom:solid 1px #cccccc;}

    #mapa { margin: 0px; margin-top:20px; text-align:center; }
    #mapa > iframe {  margin: 0px;  border:solid 1px #000000; width:90%; height:450px; }

    #organigrama { position:relative; text-decoration:none; text-align:center; color: #ffffff; }
        #organigrama > img { display:block; margin-left:auto; margin-right: auto; width: 100%; border:0px; }
        #organigrama a { display:block; position: absolute; width: 18%; height: 12%; z-index:100; /*background-color: aqua; opacity:0.4;*/ }
        #orgEquipoDirectivo > a { left:20%; top:21%; }
        #orgPAS > a { left:41%; top:21%; }
        #orgAMPA > a { left:83%; top:21%; }
        #orgConsejoEscolarMunicipal > a { left:4%; top:38%; }
        #orgConsejoEscolar > a { left:4%; top:55%; }
        #orgClaustro > a { left:4%; top:72%; }
        #orgCoCoPe > a { left:66%; top:38%; }
        #orgOrientacion > a { left:66%; top:55%; }
        #orgTutores > a { left:66%; top:72%; }
        #orgDepartamentos > a { left:66%; top:88%; }


    .fotografia { text-align:center; }
    .fotografia img { width:300px; border:solid 1px; } 
    .correoEquipoDirectivo { border:0px; margin-left:10px; vertical-align:middle; }

    
    #contador { text-align: right; }
        #contador > img { vertical-align:middle; width: 100px; }

    #noticias { margin:0px 10px 10px 0px; border-collapse: collapse; }
        .noticia { overflow:auto; padding-top: 10px; border-bottom: solid 1px #eeeeee; }
        .noticia:last-of-type { border-bottom:0px; }
            .imagenPrincipal {  float:left; padding: 10px; }
            .imagenPrincipal img { border:solid 1px #666666; width:150px; }

            .imagenPrincipal + .contenido { margin-left: 180px; }
            .contenido {  padding: 10px; vertical-align: top; }
            .contenido > h4 { margin:0px; font-family: Source Sans Pro; font-size: 18px; }
            .contenido > h4 > a { text-decoration:none; color:#526590; }
                .fecha { margin-top:3px;  color:#999999; font:normal 12px Source Sans Pro; }
    
    #paginador { display:block; }
    .pagination-container { margin-top: 30px; text-align:center; }
    #mensajeErasmus { margin-top: 30px; }
    #mensajeErasmus > img{ display:block; margin-left:auto; margin-right: auto; vertical-align:middle; width: 250px; }
    

    #noticia,
    #galeria,
    #cartel { margin:0px 0px 10px 0px; }

    #noticia > h3,
    #galeria > h3,
    #cartel > h3 { margin: 0px; font-family: Source Sans Pro; font-size: 20px;  text-transform: uppercase; color:#526590; }

    #noticia > #fecha,
    #galeria > #fecha,
    #cartel > #fecha { margin:0px; margin-bottom:20px; font:normal 12px Source Sans Pro; color:#999999; }

    #noticia > h4,
    #galeria > h4,
    #cartel > h4 { margin: 0px; margin-bottom:0px; font-size:16px; color:#666666; }

    #noticia > p,
    #galeria > p,
    #cartel > p { text-align: justify; }

        #imagenesNoticia { float:right; margin:4px 2px 0px 20px; width:160px; }
        #imagenesNoticia > h5 { display:none; }
        #imagenesNoticia > a > img { border:solid 1px #999999; width:150px; }
        #imagenesNoticia > p { margin:10px 0px 0px 20px; text-align:left; font:10px Verdana; }

        #imagenesGaleria { overflow:auto; margin-top:30px; }
        #imagenesGaleria > h5 { display:none; }
            #imagenGaleria { float:left; width:31%; padding: 1%;}
            #imagenGaleria img { display:block; margin-left:auto; margin-right:auto; border:solid 1px #999999; width:100%; }
            #imagenGaleria > p { margin:0px 12px 0px 0px; }

        #imagenesCartel { margin:20px 0px 0px 0px; width:100%; }
        #imagenesCartel > h5 { display:none; }
        #imagenesCartel > img { border:solid 1px #999999; margin-bottom:20px; width:100%; }

    #pieNoticia, 
    #pieGaleria { margin-bottom: 20px; }
    #pieNoticia > h5, 
    #pieGaleria > h5,
    #pieCartel > h5 { margin:0px; border-top-left-radius: 5px; border-top-right-radius: 5px;  padding-left:10px; font-size:14px; line-height:32px; color:#526590; background:#dedac5; border-bottom: dashed 1px #aaaaaa; }
    #pieNoticia > ul,
    #pieGaleria > ul,
    #pieCartel > ul { margin:0px; margin-bottom: 10px; padding-top: 20px; padding-bottom: 20px; padding-right:20px; background:#f3f1e7; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;  } 
        
        #autor { clear: right; margin-top: 10px; display: block; padding-top:3px; border-top:solid 1px #999999; }
        #autor > a > img { border:0px; margin-left:5px; margin-bottom: -3px; height:14px; }

        #volver { margin-top:40px; text-align:center; }
        #volver > a > img { border:0px; width: 40px; }


/*
-----------------------------------------------------------------------
Pie
-----------------------------------------------------------------------
*/
footer { clear: both; height:45px; margin-top: 50px; padding-top: 1px; background-color:#494745; color:#ffffff; font-size:14px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
footer > h2 { display:none; }
footer > p { display:block;  margin-top: 10px; margin-left:auto; margin-right:auto; text-align:center; }


/*
-----------------------------------------------------------------------
Responsive
-----------------------------------------------------------------------
*/
@media (max-width:980px) {
    #pagina { width:100%; min-width:360px; margin-bottom:0px; box-shadow:none; border-color:#ffffff; border-radius: 0px; }
    #tituloCabecera { width:100%; height:100px; background-image:url(../images/conselleria.jpg), url(../images/cabecera.jpg); background-repeat:no-repeat, no-repeat; background-position:left center, right center; }
    body { background:#ffffff; }
    footer { border-radius: 0px; }
}

@media (max-width:820px) {
    #barraEnlacesExternos { font:normal 12px/28px Century Gothic, Arial; }
}

@media (max-width:760px) {
    #showMenu { display: block; }
    .imagenPrincipal { width: 110px; }
    .imagenPrincipal img { width: 100px; }
    .imagenPrincipal + .contenido { margin-left: 120px; }
    #tituloCabecera { width:99.8%; background-image:url(../images/cabecera.jpg); background-repeat:no-repeat; background-position:right center; }
    #barraEnlacesExternos { margin-left:0px; }
    #listaEnlacesExternos > li:first-of-type { margin-left:-30px; }
    #sidebar { z-index:200; position: fixed; height:100%; overflow-y:auto; width:230px; top: 0px; left:-240px; transition:left 1s; border-right: solid 1px #eeeeee; }
    #premios { display: none; }
    section { margin-left:0px; }
}

@media (max-width:540px) {
    .img-float-right { width: 80%; display:block; margin-top:20px; margin-bottom:20px; margin-left: auto; margin-right:auto; float:none; }
    .noticia { display: flex; flex-direction: column; }
    .imagenPrincipal { width: 80%; margin-left:auto; margin-right:auto; display:block; order: 1; }
    .imagenPrincipal img { width: 100%; }
    .imagenPrincipal + .contenido { margin-left: 0px; order: 2; }
    #imagenGaleria { float:left; width:46%; padding: 2%;}
    #tituloCabecera { margin-left:0px; border-left: 0px; }
    #barraEnlacesExternos { font:normal 11px/28px Century Gothic, Arial; }
    section { padding: 15px; padding-top: 30px; padding-bottom: 30px; }
    #listaEnlacesExternos > li { padding-left:2px; padding-right:2px; }
    #listaEnlacesExternos > li:last-of-type { margin-right:5px; }
    footer { height:70px; margin-bottom: 0px; }
}

@media (max-width:440px) {
    #noticia { display: flex; flex-direction: column; }
    #noticia > #fecha { order: 1; }
    #noticia > h4 { order: 2; }
    #noticia > #imagenesNoticia { order: 3; float:none; width:90%; margin-top: 20px; margin-left: auto; margin-right:auto; }
    #noticia > #imagenesNoticia > a > img { width: 100%; }
    #noticia > p { order: 4; }
    #noticia > hr { order: 4; margin-left:0px; margin-right:0px; }
    #noticia > ul { order: 4; }
    #noticia > div > iframe { order: 4; }
    #noticia > #autor { order: 5; }
    #noticia > #volver { order: 6; }
    #barraEnlacesExternos { font:normal 10px/28px Century Gothic, Arial; }
}