/* Title: Universia España master styles for screen media Author: jandropoch, Universia España Updated: April 12 2007 */ /* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// elementos xhtml */ /* Estos son elementos generales para toda la maquetación por tanto no pueden ser modificados */ body { color:#333333; font-family:Arial,Helvetica,sans-serif; font-size:75%; text-align:center; } img { border: 0; } h1 { margin: 20px 10px 10px 15px; float: left; font-size: 3em; } h1 img{ float: left; } fieldset { border: 0; } hr { clear: both; width: 1%; visibility: hidden; height: 1px; } /* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// big-content */ /* Esta es la capa que engloba todo el cuerpo de la web. Está alineada al centro de pantalla y a una resolución de 1024 px de ancho. He incluido clases que se aplican en toda la maquetación, como flotar elementos a izquierda o derecha, o para ocultar elementos */ /*#big-content { width: 975px; margin: 0 auto 0 auto; background: #FFFFFF; padding: 10px; float: left; }*/ #big-content { background:#FFFFFF none repeat scroll 0%; width: 975px; /* margin:10px auto;*/ margin:auto; text-align:left; } .float-left { /* clase para flotar un elemento a la izquierda */ float: left !important; text-align: left; } .float-right { /* clase para flotar un elemento a la derecha */ float: right !important; text-align: right; } .img-left { /* clase para flotar una imagen a la izquierda */ float: left; margin: 0 15px 5px 0; } .hidden { /* clase para ocultar un elemento */ display: none; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// header */ /* O cabecero o cabezote. Incluimos el logo, sección y formularios para entrada usuarios y para búsqueda */ #header { background: #FF0000; height: 78px; width: 100%; font-size: 0.8em; color: #FFFFFF; float: left; border-top: 1px #CCCCCC solid; margin-top: 5px; } #header a{ color: #FFFFFF; text-decoration: none; } #header a:hover{ text-decoration: underline; } /* Formulario del buscador */ /* form#buscador { float: right; margin: 10px 0 0 30px; width: 180px; } form#buscador input{ font-size: 1em; font-family: Arial, Helvetica, sans-serif; padding: 0; height: 12px; border: #CCCCCC 1px solid; } form#buscador label{ float: none; clear: both; } form#usuarios { width: 210px; float: right; margin: 10px 0 0 0; } form#usuarios input{ font-size: 1em; font-family: Arial, Helvetica, sans-serif; padding: 0; height: 12px; border: #CCCCCC 1px solid; } form#usuarios select{ font-family: Arial, Helvetica, sans-serif; font-size: 1em; width: 100px; padding: 0; } form#usuarios p{ margin: 0 0 5px 0; } */ form#buscador { float:right; margin:10px 0pt 0pt; width:180px; } form#buscador img { float:left; margin-right:3px; } form#buscador input { border:1px solid #CCCCCC; float:left; font-family:Arial,Helvetica,sans-serif; font-size:1em; height:12px; padding:0pt; } form#buscador label { float:left; width:30px; } form#usuarios { float:right; margin:10px 0pt 0pt; width:210px; } form#usuarios input { border:1px solid #CCCCCC; font-family:Arial,Helvetica,sans-serif; font-size:1em; height:12px; padding:0pt; } form#usuarios select { font-family:Arial,Helvetica,sans-serif; font-size:1em; padding:0pt; width:100px; } form#usuarios p { margin:0pt 0pt 5px; } #header label{ width: 65px; float: left; } #header legend { display: none; } #entrar-usuario { /* boton del usuario */ border: none !important; width: 20px; height: 18px !important; margin-left: 5px; } #buscar { /* boton del buscador */ border: none !important; width: 20px; height: 18px !important; margin: 12px 0 0 5px; } #usuario { background: url(/public/images/corporativo/background-usuario.gif) no-repeat; float: right; height: 55px; padding: 23px 20px 0 20px; } #usuario p{ margin: 0 0 2px 0; } .portal { /* clase para la sección o jerarquía de la web en Universia, por ejemplo "Becas", o "España" */ float: left; border-left: 1px solid #FFADAB; padding: 10px 0 0 10px; margin: -20px 0 0 20px; color: #FFADAB; position: relative; letter-spacing: -1px; } .pais { /* clase para el pais de la sección o jerarquía de la web en Universia */ float: left; padding: 10px 0 0 10px; margin: 35px 0 0 -100px; color: #FFADAB; position: relative; letter-spacing: -1px; font-size: 2.2em; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// sub-header */ /* En esta capa se incluye el breadcrumds (navegación o migas de pan), fecha y servicios, etc, dependiendo del portal */ #sub-header { width: 100%; color: #999999; font-size: 0.9em; text-align: right; float: left; padding: 2px 0 0 0; } #sub-header p{ margin: 0 0 0 10px; display: inline; } #sub-header a{ color: #999999; text-decoration: none; } #sub-header a:hover{ text-decoration: underline; } #sub-header ul{ display: inline; padding: 0; margin: 0 10px 0 0; text-transform: uppercase; } #sub-header li{ display: inline; } #sub-header li a{ color: #333333; } #sub-header strong{ font-weight: normal; color: #F42841; } /* Esta son las clases para la bandera del país. */ .spain { background: url(/public/images/corporativo/spain.gif) no-repeat 1px; padding-left: 20px; } .argentina { background: url(/public/images/corporativo/argentina.gif) no-repeat 1px; padding-left: 20px; } .colombia { background: url(/public/images/corporativo/colombia.gif) no-repeat 1px; padding-left: 20px; } .brasil { background: url(/public/images/corporativo/brasil.gif) no-repeat 1px; padding-left: 20px; } .portugal { background: url(/public/images/corporativo/portugal.gif) no-repeat 1px; padding-left: 20px; } .chile { background: url(/public/images/corporativo/chile.gif) no-repeat 1px; padding-left: 20px; } .mexico { background: url(/public/images/corporativo/mexico.gif) no-repeat 1px; padding-left: 20px; } .peru { background: url(/public/images/corporativo/peru.gif) no-repeat 1px; padding-left: 20px; } .puertorico { background: url(/public/images/corporativo/puertorico.gif) no-repeat 1px; padding-left: 20px; } .uruguay { background: url(/public/images/corporativo/uruguay.gif) no-repeat 1px; padding-left: 20px; } .venezuela { background: url(/public/images/corporativo/venezuela.gif) no-repeat 1px; padding-left: 20px; } /* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// menu */ /* Incluye el menu por pestañas o tabs de la parte superior de la web. Modificando anchura y altura de las pestañas (los elementos de las lista "li") podemos personalizar la apariencia del menu y ampliar o reducir sus pestañas */ #menu { margin: 10px 0 -1px 0; float: left; position: relative; } #menu ul{ list-style-type: none; } #menu li{ width: 125px !important; width /**/: 137px; /*height + padding + borders IE Hack*/ height: 45px !important; height /**/: 46px; /*height + padding + borders IE Hack*/ padding: 2px 5px 0px 5px; float: left; border-top: 1px #cccccc solid; border-left: 1px #cccccc solid; border-right: 1px #cccccc solid; margin-right: 2px; color: #999999; font-size: 0.9em; } #menu li.seleccionado{ /* Clase para la pestaña seleccionada */ border-top: 1px #999999 solid; border-left: 1px #999999 solid; border-right: 1px #999999 solid; background: url(/public/images/corporativo/background-menu-li2.gif) repeat-x; color: #333333; font-weight: bold; padding-bottom: 1px; height: 47px; } #menu li.seleccionado a{ color: #ff0000; } #menu li a{ font-size: 1.1em; text-decoration: none; color: #999999; font-weight: bold; } #menu li a:hover{ color: #ff0000; } /* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// caja1 */ /* Esta clase de caja contiene los contenidos de cada pestaña superior. Engloba a su vez varias cajas como destacado1 o destacado2 */ .caja1 { border: 1px solid #999999; background: url(/public/images/corporativo/background-caja1.gif) repeat-x top; padding-bottom:5px; float: left; width: 973px; height:auto; /* height:260px; */ } .caja1 a{ color: #333333; text-decoration: none; } .caja1 img{ border: 1px solid #999999; } .caja1 a:hover{ text-decoration: underline; } .caja1-noticias { border: 1px solid #999999; background: url(/public/images/corporativo/background-caja1.gif) repeat-x top; padding-bottom:5px; float: left; width: 973px; height:210px; } .caja1-noticias a{ color: #333333; text-decoration: none; } .caja1-noticias img{ border: 1px solid #999999; } .caja1-noticias a:hover{ text-decoration: underline; } .entradilla { /* Clase para el antetítulo */ color: #ff0000; text-transform: uppercase; margin: 0; font-size: 0.8em; } .seccion { /* Clase para el titular de cada sección */ text-transform: uppercase; font-weight: bold; margin: 0; font-size: 0.8em; } .mas { /* Clase para el boton leer más */ background: url(/public/images/corporativo/boton-mas.gif) no-repeat 1px; padding-left: 15px; font-size: 0.9em; font-weight: bold; } .multimedia { /* Clase para el boton multimedia */ background: url(/public/images/corporativo/boton-noticias.gif) no-repeat 1px; padding-left: 20px; font-size: 0.9em; font-weight: bold; margin-left: 5px; } .audio { /* Clase para el boton audio */ background: url(/public/images/corporativo/boton-audio.gif) no-repeat 1px; padding-left: 15px; font-size: 0.9em; font-weight: bold; margin-left: 5px; } /* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// destacado1 */ /* Dentro de la caja1 caja de la izquierda con noticia destacada */ .destacado1 { width: 500px; background: url(/public/images/corporativo/background-destacados1.gif) no-repeat right center; padding: 15px 20px 0 10px; float: left; } .destacado1 h2{ font-size: 1.5em; margin: 0; } .destacado1 p{ margin: 5px 0 5px 0; text-align:justify; } /* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// destacado2 */ /* Dentro de la caja1 caja segunda por la izquierda */ .destacado2 { width: 295px; padding: 15px 5px 0 10px; background: url(/public/images/corporativo/background-destacados1.gif) no-repeat right center; float: left; text-align:justify; overflow: hidden; height:auto; /* height:220px; */ /* height: 215px !important; */ } .destacado2 h3{ font-size: 1em; margin: 5px; } .destacado2 h3 a{ color: #FF0000; } .destacado2 p{ margin: 0px; padding: 0px; } /* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// caja1-menu */ /* caja con el menu de la sección correspondiente dentro de la caja1 */ .caja1-menu { clear: both; text-transform: uppercase; border-top: 1px #cccccc dotted; padding-top: 10px; font-weight: bold; margin: 10px 10px 0 10px; } .caja1-menu p { float: left; margin: 0; } .caja1-menu ul{ float: left; list-style-type: none; margin: 0 0 0 10px; padding: 0; color: #999999; } .caja1-menu li{ display: inline; /* margin-left: 10px; background: url(/public/images/corporativo/bullet6.gif) no-repeat; padding-left: 20px; */ } .caja1-menu li a{ color: #FF0000; } /* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// paises */ /* Caja con la lista completa de países que forman parte de universia */ .paises { float: left; padding: 15px 0 18px 10px; } .paises ul{ list-style-type: none; margin: 10px 0 0 0; padding: 0; } .paises li{ background: url(/public/images/corporativo/bullet5.gif) no-repeat 1px; padding-left: 20px; font-weight: bold; } .universia { /* Estilo del elemento de la lista universia.net */ background: url(/public/images/corporativo/bullet7.gif) no-repeat 1px !important; } .universia a{ color: #ff0000; } /* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// content */ /* Esta caja sirve de contenedor para todo el resto de contenidos más específicos y regionales. */ #content { float: left; margin-top:2px; } /* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// footer*/ /* Footer o pie o piezote */ #footer { background: #cccccc; font-size: 0.8em; line-height: 1em; margin: 10px 0 0 0; width: 100%; } html>body #footer { /* Truquito para que se visualize correctamente en explorer 6 */ float: left; } #footer a{ text-decoration: none; color: #333333; } #footer a:hover{ text-decoration: underline; } #footer p{ float: left; margin: 10px; } #footer img{ float: left; } #footer ul{ float: right; list-style-type: none; margin: 5px 50px 0 0; padding: 0; } #footer li{ margin-bottom: 4px; } /* Clases para cada una da las opciones del pie */ .footer-li-1 { background: url(/public/images/corporativo/bullet1.gif) no-repeat 1px; padding: 1px 0 0 17px; } .footer-li-2 { background: url(/public/images/corporativo/bullet2.gif) no-repeat 1px; padding: 1px 0 0 17px; } .footer-li-3 { background: url(/public/images/corporativo/bullet3.gif) no-repeat 1px; padding: 1px 0 0 17px; } .footer-li-4 { background: url(/public/images/corporativo/bullet4.gif) no-repeat 1px; padding: 1px 0 0 17px; } /* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// publicidad */ /* De lo que todos comemos así que mejor tratar este código con cariño */ .publicidad { /* Clase con la palabra publicidad en vertical, sweeeeeeeet! */ background: url(/public/images/corporativo/publicidad.gif) center no-repeat; width: 17px; height: 92px; float: left; text-indent: -1000px; overflow:hidden; } /* Banner superior con mega-banner más chiqui-banner */ #publi-superior *{ float: left; } #publi-superior { background: url(/public/images/corporativo/background-publicidad.gif); border-bottom: 1px #999999 solid; float: left; width: 100%; padding-top: 4px; }