/* StyleSheet genérico de PHPGenerator */ /* ========= Diseño de la página ========== */ /* ┌───────────────────────────────────┐ │ │ │┌─────────────────────────────────┐│ ││

││ ││┌───────────────────────────────┐││ │││

│││ │││

│││ ││└───────────────────────────────┘││ ││┌───────────────────────────────┐││ │││

│││ │││

│││ ││└───────────────────────────────┘││ ││

││ │└─────────────────────────────────┘│ │ │ └───────────────────────────────────┘ */ .separador, .enlaceInterno, .oculto { height: 1px; left: -9999px; position: absolute; top: -9999px; width: 1px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* HACK: Esconder de IE/Mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* FIN-HACK: Esconder de IE/Mac */ /* ================================================================ ==================== 1. Secciones DIV ==================== ================================================================ */ /* ------------------------------------------------------------------ ---------------------------- Wrapper ----------------------------- ------------------------------------------------------------------ */ body{ text-align: center; font-size: 16px; } #wrapper { border: 1px solid green; background-image:url(img/fondo.jpg); width: 1024px; margin: 0 auto 0 auto; text-align: left; } /* ------------------------------------------------------------------ ---------------------------- Encabezado -------------------------- ------------------------------------------------------------------ */ #encabezado { border: 1px solid green; margin: 1em; padding: 0.3em; height: 200px; position: relative; } #encabezado form.login{ position: relative; width: 100%; } #encabezado img { } #encabezado p { text-align: justify; text-indent: 5px; margin-top: 0px; font-size: 12px; } #encabezado span { display: block; font-size: 14px; color: #FFF8DC; } #encabezado div.cabecera{ float: left; width: 230px; height: 190px; margin: 5px; } #encabezado fieldset.usuariosCabecera{ height: 130px; position: relative; } #encabezado div.inicioCabecera{ height: 20px; float: left; padding-top: 10px; width: 100%; text-align: left; } #encabezado div.inicioCabecera a{ display: block; float: left; } #encabezado div.inicioCabecera div.inicioCabeceraEstadistica{ float: right; width: 165px; text-align: left; } #encabezado div.inicioCabecera div.inicioCabeceraEstadistica span{ margin-left: 20px; width: 90px; display: block; float: left; font-size: 12px; } #encabezado div.inicioCabecera div.inicioCabeceraEstadistica span.numero{ color: green; width: 15px; display: block; float: left; margin-left: 2px; } #encabezado div.encabezadoImagen { width: 735px; height: 100%; float: left; margin-left: 2px; text-align: center; } #encabezado div.encabezadoImagen img{ height: 200px; } #encabezado fieldset.usuariosCabecera img#info{ float: left; } #encabezado a.enlaceInicio, #encabezado a.enlaceInico:visited{ display: block; text-align: center; width: 60px; margin: 0 auto 0 auto; } #encabezado form a.enlaceInicio img, #encabezado form a.enlaceInico:visited img{ border: none; } #encabezado a.login{ margin: 15px 15px 0px 0px; float: right; } #areatexto div#pizarra{ background-image: url(img/pizarra.gif); background-repeat: no-repeat; height: 450px; width: 657px; position: relative; margin: 0 auto 0 auto; } #areatexto div#pizarra div#actuaciones{ margin: 20px; padding-top: 20px; position: relative; color: #FFF8DC; } #areatexto div#pizarra p{ margin: 2px; } #areatexto div#pizarra div#actuaciones span#tituloActuaciones{ font-family: Times; font-size: 13px; font-weight: bold; } #areatexto div#pizarra div#actuaciones span#fechaActuaciones{ font: italic 11px Gregoria; } #areatexto div#pizarra div#actuaciones span#textoActuaciones:FIRST-LETTER{ font-size: 13px; font-weight: bold; } #areatexto div#pizarra div#actuaciones span#textoActuaciones{ font-size: 11px; font: Time; display: block; margin-top: 10px; } /* ------------------------------------------------------------------ ---------------------------- Navegación -------------------------- ------------------------------------------------------------------ */ #navegacion { border: 1px solid green; text-align: left; width: 140px; float: left; margin-left: 1em; } #navegacion a { color: green; line-height: 1.8em; z-index: 10; } #navegacion a:hover { text-decoration: none; color: #33e; z-index: 5; } #navegacion a:active { background-color: none; } #navegacion ul { text-align: left; list-style-type: disc; } #navegacion ul li { margin: 10px 0.6em 0 0; } /* ------------------------------------------------------------------ ---------------------------- Área texto -------------------------- ------------------------------------------------------------------ */ #areatexto { border: 1px solid green; min-height: 22em; padding: 0.3em; width: 818px; float: left; margin-left: 20px; margin-bottom: 1em; } #areatexto h1, #areatexto h2{ margin: 20px auto 20px auto; text-align: center; border: 2px solid #FFF8DC; width: 300px; } #areatexto .volver { clear: both; } #areatexto table { margin: 5px; margin-left: 50px; } #areatexto table tfoot { text-align: center; } #areatexto table tfoot a { background-color:#FFFFE0; border:1px solid black; display:block; text-align:center; width:130px; margin: 0 auto 0 auto; } #areatexto table tr { } #areatexto table tr th { } #areatexto table tr th.acciones { } #areatexto table tr td { padding: 5px; } #areatexto table tr td.acciones { } #areatexto table img { } #areatexto table a:hover img { } #areatexto table a:active img { } #areatexto ul.acciones li { } #areatexto form { } #areatexto form.buscar { margin: 10px; margin-left: 40px; width: 300px; } #areatexto form.buscar input.buscar{ width: 200px; } #areatexto a{ border: none; } #areatexto a img{ border: none; } #areatexto form label { } #areatexto form label span.requerido { } #areatexto form textarea { } #areatexto form .inputtext { } #areatexto form.inputfecha { } #areatexto form img.imgfecha { } #areatexto form textarea:focus, input:focus { } #areatexto p{ text-align: justify; text-indent: 10px; } #areatexto form.edicion{ width: 100%; margin: 0px auto 0px 50px; } #areatexto form.edicion label{ font-size: 16px; font-weight: bold; } #areatexto form.edicion input{ width: 100px; margin: 5px 0px 10px 90px; } #areatexto form.edicion iframe{ width: 650px; margin: 5px 0px 10px 90px; } #areatexto form.edicion select{ width: 130px; margin: 5px 0px 10px 90px; } #areatexto form.edicion .inputtextmiddle{ width: 250px; } #areatexto form.edicion .inputtextlong{ width: 450px; } #areatexto form.edicion textarea{ width: 570px; min-height: 130px; text-align: justify; margin: 5px 0px 10px 90px; } #areatexto .actual { } #areatexto .addElemento { display: block; border: 1px solid black; background-color: #FFFFE0; width: 130px; margin: 0 auto 0 auto; text-align: center; } #areatexto div.paginador { display: block; margin-left: 40px; margin-top: 0px; } #areatexto h3.componentes{ margin-left: 3em; border: 2px; } #areatexto ul.componentes{ margin-left: 5em; border: 2px; } a.curriculum{ margin-left: 6em; background-image: url(img/script_edit.png); background-repeat: no-repeat; padding-left: 1em; } #areatexto div.noticias{ width: 85%; margin: 0 0 5px 40px; } #areatexto h3.tituloNoticia{ font-weight: bold; background-color: #F0E68C; margin: 0; border: 1px solid #000000; } #areatexto h3.tituloNoticiaInterna{ font-weight: bold; background-color: #E0FFFF; margin: 0; border: 1px solid #000000; } #areatexto h3.tituloNoticia span, h2.tituloNoticia span, h3.tituloNoticiaInterna span, h2.tituloNoticiaInterna.span{ padding-left: 10px; padding-right: 10px; margin: 0px; margin-right: 10px; border-right: 1px solid black; } #areatexto p.textoNoticia{ border: 1px solid #000000; border-top: none; margin: 0; } #areatexto h2.tituloNoticia{ margin: 0; width: 95%; font-weight: bold; } #areatexto h2.tituloNoticiaView{ width: 600px; font-weight: bold; } #areatexto span#fechaNotiviaView{ display: block; float: right; margin-right: 110px; font-weight: bold; } #areatexto div.textoNoticiaView{ margin: 60px auto 10px auto; width: 600px; text-indent: 20px; text-align: justify; border-top: none; } #areatexto p.accionesList{ margin: 0; } #areatexto .accionesNoticiaCorreo{ float: left; } #areatexto .accionesNoticia{ float: right; } #areatexto .nuevaNoticia{ height: 20px; width: 40px; text-transform: capitalize; font-style: italic; font-weight: bold; } #areatexto .noticiaInterna{ height: 20px; width: 200px; text-transform: capitalize; font-style: italic; font-weight: bold; color: #FFF8DC; margin-left: 15px; } #areatexto div.trio{ float: left; width: 31%; text-align: center; } #areatexto div.trio h3.componentes{ background-image:url(img/iconos/music.gif); background-repeat: no-repeat; } #areatexto div.izquierdaEdicion{ float: left; width: 350px; margin-left: 10px; } #areatexto div.derechaEdicion{ float: left; width: 350px; } #areatexto div.derechaEdicion input.largo{ width: 120px; } #areatexto div.submitEdicion{ clear: both; width: 100%; margin-left: -50px; text-align: center; } #areatexto div.submitEdicion input{ margin: 0px; } #areatexto address#contacto{ width: 450px; background-color: #FFFFE0; margin: 0 auto 0 auto; height: 150px; padding: 10px; } #areatexto span.contactoIzquierda{ display: block; float: left; width: 70px; font-weight: bold; text-align: left; } #areatexto span.contactoDerecha{ display: block; float: left; width: 360px; text-align: left; margin-left: 20px; margin-bottom: 5px; } #areatexto div#pergamino{ background-image: url(img/pergamino.gif); background-repeat: no-repeat; background-position: center; height: 270px; padding: 10px; } #areatexto div#pergamino span{ display: block; width: 330px; margin: 30px auto 0 auto; } #areatexto div#pergamino span a{ background-image: url(img/iconos/links.gif); background-repeat: no-repeat; padding-left: 20px; display: block; margin-top: 5px; } #areatexto div.fotos{ width: 680px; margin: 0 auto 0 auto; } #areatexto div.fotos div.elemFoto{ margin: 4px 5px 4px 5px; float: left; height: 170px; width: 210px; display: block; text-align: center; border: 2px solid #FFF8DC; } #areatexto div.fotos div.elemFotoGaleria{ margin: 3px 0px 3px 12px; float: left; height: 115px; width: 150px; display: block; text-align: center; border: 2px solid #FFF8DC; } #areatexto div.fotos div.elemFotoGaleria img{ height: 112px; width: 150px; display: block; } #areatexto div.fotos label{ height: 25px; width: 210px; display: block; border-bottom: 2px solid #FFF8DC; background-color: #FFF8DC; font-size: 14px; } #areatexto div.fotos img{ height: 140px; width: 210px; margin-top: 2px; display: block; } #areatexto div.fotoEmergente{ position: absolute; top: 15%; left: 27%; /* min-height: 480px;*/ border: 3px solid #FFF8DC; } #areatexto div.fotoEmergente div.cerrarVentana{ margin-top: -30px; margin-right: 10px; text-align: right; } #areatexto div.fotoEmergente div.siguiente{ top: 40px; right: 5%; position: absolute; background-color: #FFF8DC; border-style: ridge; width: 70px; padding-left: 2px; background-image: url(img/iconos/resultset_next.gif); background-repeat: no-repeat; background-position: right; } #areatexto div.fotoEmergente div.anterior{ top: 40px; left: 5%; position: absolute; width: 60px; background-color: #FFF8DC; border-style: ridge; padding-left: 15px; background-image: url(img/iconos/resultset_previous.gif); background-repeat: no-repeat; background-position: left; } #areatexto div.fotoEmergente div.cerrarVentana a{ color: #FFF8DC; } #areatexto .descargas{ margin-botom: 5px; } #areatexto fieldset.descargas div.centrado{ text-align: center; width: 100%; } #areatexto fieldset.descargas span.agradecimientos{ text-align: center; width: 100%; display: block; color: #FFF8DC; } #areatexto ul.tablaTitulos { text-align: left; list-style-type: none; padding: 0px; } #areatexto ul.tablaTitulos li { border: 1px solid green; float: left; display: block; width: 185px; margin-left: 8px; margin-top: 5px; } .elementoCentro{ display: block; text-align: center; font-size: 12px; } .elementoIzquierda{ margin-left: 15px; display: block; float: left; } .elementoDerecha{ display: block; float: right; margin-right: 15px; } #areatexto fieldset div.centrado object{ margin: 0 auto 0 auto; } /* ************** VENTANAS DESPLEGABLES *************** */ #areatexto div.ventanaCurriculum{ border: 2px solid #000000; position: absolute; top: 20%; left: 30%; background-color: #F0E68C; width: 50%; text-align: justify; margin: 1em; } #areatexto div.ventanaCurriculum p{ margin: 1em; } #areatexto div.ventanaCurriculum div.cerrarVentana{ text-align: right; margin-right: 1em; float: right; } #areatexto div.ventanaCurriculum img{ float: left; width: 80px; height: 100px; margin: 10px; margin-left: 20px; margin-top: 20px; } div.ventanaLogin{ border: 2px solid #000000; position: absolute; top: 150px; background-color: #F0E68C; width: 250px; text-align: justify; margin: 1em; } div.ventanaLogin div.cerrarVentana{ text-align: right; margin-right: 1em; float: right; } /* ************** FIN VENTANAS DESPLEGABLES *************** */ #areatexto p.historia{ text-align: justify; text-indent: 1.5em; margin: 10px; } #areatexto img.historiaIzquierda{ float: left; width: 220px; height: 150px; margin: 5px; margin-left: 0px; } #areatexto img.historiaDerecha{ float: right; width: 170px; height: 150px; margin: 5px; margin-right: 0px; } #areatexto div.discografia { margin-left: 10px; } #areatexto div.discografia img{ float: left; border: 2px solid black; height: 200px; width: 200px; } #areatexto div.discografia ul{ float: left; margin-top: 0px; width: 520px; margin-left: 20px; } #areatexto div.discografia li{ margin-bottom: 4px; } #areatexto div.discografia li span{ font-weight: bold; } #areatexto div.discografia a.fragmento, #areatexto div.discografia a.fragmento:visited, #areatexto div.discografia a.fragmento:hover{ display: block; width: 100px; font-size: 11px; } #areatexto div.discografia a span{ cursor: pointer; font-weight: normal; color: #FFF8DC; font-style: italic; } #areatexto div.discografia div#reproductor { text-align: center; margin-top: 5px; margin-bottom: 20px; } #areatexto div.discografia a.uno { width: 700px; display: block; text-indent: 20px; text-align: justify; color: black; } #areatexto div.discografia a, #areatexto div.discografia a:focus, #areatexto div.discografia a:hover, #areatexto div.discografia a:visited { width: 700px; display: block; color: black; cursor: text; } #areatexto div.clearfixLocal{ clear: both; height: 25px; } /* ------------------------------------------------------------------ ------------------------------ Pie ------------------------------- ------------------------------------------------------------------ */ #pie { clear: both; border: 1px solid green; margin: 1em; padding: 0.3em; } /* ================================================================== ==================== 2. Elementos HTML generales ============= ================================================================== */ body { } a { text-decoration: none; color: #00008B; border: none; } a:link { color: #00008B; border: none; } a:visited { color: #00008B; border: none; } a:hover, a:focus { } a:active { } h1 { } h2 { } p ul { } address { text-align: center; /* Centrar */ font-size: 80%; /* 80% del tamaño por defecto */ font-style: normal; /* Normal */ letter-spacing: 2px; /* Espacio entre letras = 2 pixels */ line-height: 1.5em; /* Espacio entre líneas = 1,5 veces tamaño de fuente */ }