/* * Fichero: public.css ,v2.0 22/12/2006 Ana Noemi Fernandez Martinez * * Hoja de estilos para presentación de los elementos principales comunes a * toda la Web. Se establecen tamaños, fuentes, solores y otros atributos * en general. * * Media screen * Navegadores IE5+, Mozilla 1.3+, Konqueror X, Opera X * CSS 2 * Fichero public.css * Version v1.0 * Autores Ana Noemi Fernandez Martinez * Comentarios */ /* INDICACIONES DE USO EN GENERAL */ /* La estructura basica de una web seria:
Precabecera
Cabecera
Subcabecera
Lateral
datos
Pie
Cuando os encontreis con .XX son para que pongais vosotros vuestra personalización. Si teneis estructuras de columnas acordaros de denominarlas como 'c1', 'c2', asi con todo. Si teneis H1, H2, H3, ..., y teneis varios formatos intentar nombrarlo como su peso semantico esto es: un H3 que es titulo de seccion llamarlo .scc, o si es un titulo de un apartado pues llamarlo .apdo, asi correlativamente. Si se van detectando tipos de datos semanticamente los iremos poniendo, asi como ir acoplando los patrones conforme se vayan teniendo. */ /* ESTILOS GENERALES */ /* Definición de estilos gglobales para la web. Evitar definir estilos generales para h1,h2,h3,h4,h5,input,... */ body { margin:0px; padding:0px; font-family: Georgia, arial, verdana, helvetica, sans-serif; font-size:11px; color:#666666; background-color:#EAE5BB; background:url(/MODULOS/global/publico/interfaces/img/fondo.jpg) top left repeat-X; text-align:center;} html, body { background-color:#EAE5BB; } td { } hr { display: none; } img {border:0px solid #ffffff;} h1, h2, h3, h4 {margin:0px; padding:0px; font-family: Georgia, arial, verdana, helvetica, sans-serif;} /* ESTILOS CAJAS GLOBALES. GRID GLOBAL */ /* Estructura de datos de grid globales para los esquemas: web-pre -> Caja web que engloba la pre home web -> Caja web que engloba todo pcab -> Caja precabecera cab -> Caja cabecera scab -> Caja subcabecera ctd -> Caja contenido que engloba laterales y datos dts -> Caja datos pie -> Caja pie */ #web-pre { } #web { margin:0px auto 0px auto; width:760px; text-align:left; background-color:#FCFAE8; padding:6px; border:3px solid #C1B979; } #pcab { } #cab { clear:both; width:760px; height:137px; background:transparent url(/MODULOS/global/publico/interfaces/img/fondo_cabecera.jpg) top left no-repeat; } #scab { } #ctd { clear:both; width:760px; margin-top:6px; } #lat { float:right; width:575px; background:url(/MODULOS/global/publico/interfaces/img/fondo_contenido.jpg) top left repeat-X; padding:10px; } #lat a { text-decoration:underline;} #lat a:hover { color:#E60005; } #dts { margin:6px 0px 0px 0px; } #pie { clear:both; width:760px; } /* ESTILOS PARA LA CABECERA DE LA WEB */ #cab .XX { } #cab .XX-padd { } #cab h1 {float:left; margin:0px; padding:10px 0px 0px 7px; width:170px; height:100px;} #cab h1 span {display:none;} /* Barra de opciones de la cabecera */ #cab .nav {float:left; width:350px; } #cab .nav-padd {padding:3px 0px 0px 70px;} #cab .nav-padd a { color:#75030C; font-size:11px; font-weight:bold; text-decoration:none;} #cab .nav-padd a:hover {background:none; text-decoration:underline;} #cab h2.XX { } #cab h3.XX { } #cab h4.XX { } #cab h5.XX { } /* ESTILOS PARA LA PRECABECERA */ #pre-scab #pre-scab-col1 {float:left; width:182px; background:#E1E2C0 url(img/fondo_subcabecera.gif) bottom left no-repeat;} #pre-scab #pre-scab-col1 h2 {margin:0px; padding:6px 17px; font-size:14px; color:#232323;} /* ESTILOS PARA LA SUBCABECERA */ #scab #scab-col1 {float:left; width:182px; background:#E1E2C0 url(/MODULOS/global/publico/interfaces/img/fondo_subcabecera.gif) bottom left no-repeat; margin-top:6px;} #scab #scab-col1 h2 {margin:0px; padding:6px 17px; font-size:14px; color:#232323;} /* ESTILOS PARA PRECONTENIDO */ #pre-ctd {float:left; width:760px; } #pre-ctd-padd {padding:0px 0px 10px 0px; background:url(/MODULOS/global/publico/interfaces/img/img_home.jpg) 70px 50px no-repeat;} #pre-ctd-col1 {} #pre-ctd-col1 h2 {margin:5px 0px; padding:0px; font-size:18px; font-weight:bold; color:#666666;} /* ESTILOS PARA EL PIE DE LA PAGINA */ #pie #pie-padd { padding:20px 2px 10px 150px;} #pie #pie-padd h3 { float:left; margin:0px; padding:0px; width:100px; } #pie #pie-col1 { float:right; padding:5px 10px 0px 0px; width:600px; } #pie #pie-col1 a { font-size:11px; color:#75030C; text-decoration:none; } #pie #pie-col1 a:hover { text-decoration:underline;} /* ESTILOS PARA EL MENU LATERAL */ #lat .XX { } #lat .XX-padd { } #lat h1.XX { } #lat h2.formato1 {color:#0A1E58; font-size:11px; background-image:url(/MODULOS/global/publico/interfaces/img/fondo_h2_1.gif); background-repeat:repeat-x; background-position:0px 15px; height:30px; margin:10px 0px 0px 0px; } #lat h2.formato2 {color:#0A1E58; font-size:11px; background-image:url(/MODULOS/global/publico/interfaces/img/fondo_h2_2.gif); background-repeat:repeat-x; background-position:0px 15px; height:30px; margin:10px 0px 0px 0px; } #lat h3.XX { } #lat h4.XX { } #lat h5.XX { } /* ESTILOS PARA EL CONTENIDO Y DATOS */ #dts {} .vertodas { clear:both; text-align:right; border-top:6px solid #E4E4E4;} #dts .XX-padd { } #dts h1.XX { } #dts h2.XX { } #dts h3.XX { } #dts h4.XX { } #dts h5.XX { } /* ESTILOS PARA MENUS DE NAVEGACION */ /* Menu de 1º Nivel, 2º Nivel y 3º Nivel anidados. Con el estilo ".act" estamos definiendo la opcion de menu actual */ .men-ctd {float:left; } .men {width:158px; margin:0px 6px 0px 0px; url(/MODULOS/global/publico/interfaces/img/menu_top.gif) left top no-repeat; } .men ul {margin:0px; padding:10px 0px 30px 10px; background: url(/MODULOS/global/publico/interfaces/img/fondo_menu.jpg) left top repeat-x; } /* 1º Nivel de navegación */ .men ul li {float:left; padding:2px 0px 2px 10px; margin:0px; width:135px; list-style-type:none; border-bottom:1px solid #D2CA81; } .men ul li a { float:right; width:135px; color:#010F4C; font-size:11px; text-decoration:none; } .men ul li a:hover { color:#75030C; text-decoration:none;} .men ul li.act { background: url(/MODULOS/global/publico/interfaces/img/flechita_menu.gif) left no-repeat; text-decoration:none; font-weight:bold; } .men ul li.act a { } .men ul li.act a:hover { } .men ul ul { } /* 2º Nivel de navegación */ .men ul ul li { } .men ul ul li a { } .men ul ul li a:hover { } .men ul ul li.act { } .men ul ul li.act a { } .men ul ul li.act a:hover { } .men ul ul ul { } /* 3º Nivel de navegación */ .men ul ul ul li { } .men ul ul ul li a { } .men ul ul ul li a:hover { } .men ul ul ul li.act { } .men ul ul ul li.act a { } .men ul ul ul li.act a:hover { } /* Menu de 1º Nivel. Con el estilo ".act" estamos definiendo la opcion de menu actual */ .men-1n { } .men-1n ul { } .men-1n ul li { } .men-1n ul li a { } .men-1n ul li a:hover { } .men-1n ul li.act { } .men-1n ul li.act a { } .men-1n ul li.act a:hover { } /* Menu de 2º Nivel. Con el estilo ".act" estamos definiendo la opcion de menu actual */ .men-2n { } .men-2n ul { } .men-2n ul li { } .men-2n ul li a { } .men-2n ul li a:hover { } .men-2n ul li.act { } .men-2n ul li.act a { } .men-2n ul li.act a:hover { } /* Menu de 3º Nivel. Con el estilo ".act" estamos definiendo la opcion de menu actual */ .men-3n { } .men-3n ul { } .men-3n ul li { } .men-3n ul li a { } .men-3n ul li a:hover { } .men-3n ul li.act { } .men-3n ul li.act a { } .men-3n ul li.act a:hover { } /* ESTILOS PARA LOS LISTADOS */ /* Listados para documentos */ .lst-doc {clear:both;} .lst-doc ul { margin:0px 0px 0px 5px; padding:2px 0px 0px 0px; } .lst-doc li { margin:0px; padding:0px 0px 2px 10px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/bullet.gif) 0px 7px no-repeat;} /* Listado para contenidos relacionados*/ .lst-rel {clear:both;} .lst-rel ul {margin:0px 0px 0px 5px; padding:2px 0px 0px 0px; } .lst-rel li { margin:0px; padding:0px 0px 2px 10px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/bullet2.gif) 0px 7px no-repeat;} /* Listado para el detalle de eventos*/ .lst-eve {float:left; width:400px; } .lst-eve ul {margin:0px; padding:0px; } .lst-eve li.lugar { margin:0px; padding:0px 0px 10px 20px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/iconos/lugar.gif) 0px 0px no-repeat;} .lst-eve li.organizador { margin:0px; padding:0px 0px 10px 20px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/iconos/organizador.gif) 0px 0px no-repeat;} .lst-eve li.programa { margin:0px; padding:0px 0px 10px 20px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/iconos/programa.gif) 0px 0px no-repeat;} /* Listados para categorias */ /*.lst-cat ul { margin:0px; padding:0px;} .lst-cat li { margin:0px; padding:0px 0px 2px 12px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/bullet.gif) 0px 7px no-repeat; }*/ .lst-cat dl { } .lst-cat dt { } .lst-cat dd { } .lst-cat { padding-bottom:20px;/*background:url(/MODULOS/global/publico/interfaces/img/fondo_categ.gif) bottom left repeat-X;*/} .lst-cat ul { margin:0px 0px 15px 0px; padding:10px 0px 10px 110px; /*border-bottom:1px dashed #666666;*/} .lst-cat li { margin:0px; padding:0px 0px 2px 12px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/bullet.gif) 0px 7px no-repeat; } .lst-cat li a { color:#75030C; text-decoration:none; } .lst-cat li a:hover {text-decoration:none; border-bottom:1px solid #75030C; background:#FFF1E3;} .lst-cat ul ul { margin:0px; padding:0px; /*border-bottom:1px dashed #666666;*/} .lst-cat ul ul li { margin:0px; padding:0px 0px 2px 12px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/bullet.gif) 0px 7px no-repeat; } .lst-cat ul ul li a { color:#75030C; text-decoration:none; } .lst-cat ul ul li a:hover {text-decoration:none; border-bottom:1px solid #75030C; background:#FFF1E3;} .lst-cat-f1 {} .lst-cat-f1 ul { margin:0px; padding:10px 0px 0px 110px;} .lst-cat-f1 li { margin:0px; padding:0px 0px 2px 12px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/bullet.gif) 0px 7px no-repeat; } .lst-cat-f1 li a { color:#75030C; text-decoration:none; font-weight:bold;} .lst-cat-f1 li a:hover {text-decoration:none; border-bottom:1px solid #75030C; background:#FFF1E3;} /* Listados para datos de resultados */ .lst-dts { } .lst-dts dl { } .lst-dts dt { } .lst-dts dd { } /* Listados para explicaciones */ .lst-exp { } .lst-exp ul { } .lst-exp li { } .lst-exp dl { } .lst-exp dt { } .lst-exp dd { } /* Listados para notas */ .lst-not { } .lst-not ul { } .lst-not li { } .lst-not dl { } .lst-not dt { } .lst-not dd { } /* Listados para opciones */ .lst-op { } .lst-op ul { } .lst-op li { } .lst-op dl { } .lst-op dt { } .lst-op dd { } /* Listados para subopciones */ .lst-sop { } .lst-sop ul { } .lst-sop li { } .lst-sop dl { } .lst-sop dt { } .lst-sop dd { } /* Listado personalizado usado en toda la web */ .lst-f1 {width:98%;} .lst-f1 ul { margin:5px 0px 0px 20px; padding:0px; border-bottom:1px dashed #b7b7b7; } .lst-f1 li {margin:0px; padding:0px 0px 5px 12px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/bullet2.gif) 0px 7px no-repeat;} /* Listado para noticias */ .lst-not {width:98%;} .lst-not ul { margin:5px 0px 0px 20px; padding:0px; border-bottom:1px dashed #b7b7b7; } .lst-not li {margin:0px; padding:0px 0px 5px 18px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/iconos/noticias.gif) 0px 0px no-repeat;} /* Listado para preguntas frecuentes*/ .lst-faq {width:98%;} .lst-faq ul { margin:5px 0px 0px 20px; padding:0px; border-bottom:1px dashed #b7b7b7; } .lst-faq li {margin:0px; padding:0px 0px 5px 20px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/iconos/faqs.gif) 0px 2px no-repeat;} /* Listados para enlaces */ .lst-url { width:98%; } .lst-url dl { margin:5px 0px 0px 20px; padding:0px; border-bottom:1px dashed #b7b7b7;} .lst-url dt { clear: both; float:left; margin:0px 0px 0px 0px; padding:0px 10px 0px 18px; width:50px; background:url(/MODULOS/global/publico/interfaces/img/iconos/enlaces.gif) 0px 3px no-repeat; } .lst-url dd { float:left; margin: 0px 0px 0px 0px; padding: 0px 0px 9px 0px; width: 450px;} /* Listado para productos*/ .lst-pro { width:98%; } .lst-pro dl { margin:5px 0px 0px 20px; padding:0px;} .lst-pro dt { clear: both; float:left; margin:0px 0px 0px 0px; padding:0px 10px 0px 18px; width:50px; background:url(/MODULOS/global/publico/interfaces/img/iconos/productos.gif) 0px 3px no-repeat; } .lst-pro dd { float:left; margin: 0px 0px 0px 0px; padding: 0px 0px 9px 0px; width: 450px;} .lst-f1 dl { } .lst-f1 dt { } .lst-f1 dd { } /* TABLA DE DATOS */ /* Tabla de datos normal */ table.tbl-dts { } table.tbl-dts caption { } .tbl-dts th { } .tbl-dts td { } /* Tabla para el calendario normal */ table.tbl-cal { margin: 0px; padding: 0px;width:200px; font-size: 12px; border-bottom: 1px solid #666666; border-collapse: collapse; } table.tbl-cal caption { padding:5px 2px 2px 2px; color: #333; font-weight: bold; border-bottom:1px solid #84B8D0; background:url(/MODULOS/global/publico/interfaces/img/fondo_calendario.gif) bottom left repeat-X;; }/* Estilos para caption de la tabla */ table.tbl-cal caption a { color: #333; font-weight: bold; text-decoration: none;} table.tbl-cal caption a:hover {text-decoration: underline;} .tbl-cal th { padding:2px 0px; background:#EFF7FA; border-bottom: 1px solid #B8C7C7; text-align:center;}/* Estilos para cabecera de tabla */ .tbl-cal td { border-bottom: 1px solid #B8C7C7; text-align:center;} .tbl-cal td span { padding: 2px; text-decoration: none; } .tbl-cal td.ant { color: #999999; }/* Estilos para los dias pasados */ .tbl-cal td.ant a { display:block; color: #666666; background: #DDDDDD;} .tbl-cal td.ant a:hover { color: #000000; text-decoration:none;} .tbl-cal td.hoy { color: #FFFFFF; }/* Estilos para el dia de hoy */ .tbl-cal td.hoy a { display:block; color: #FFFFFF; background: #FE9C37;} .tbl-cal td.hoy a:hover { color: #FFFFFF; text-decoration:none;} .tbl-cal td.fut { color: #000000; }/* Estilos para los dias futuros */ .tbl-cal td.fut a{ display:block; color: #ccc; background: #315082; } .tbl-cal td.fut a:hover { color: #ffffff;text-decoration:none; } /* Tabla para el calendario citas */ table.tbl-cit { } table.tbl-cit caption { } table.tbl-cit caption a { } table.tbl-cit caption a:hover { } .tbl-cit tr th { } /* Estilos para caption de la tabla */ .tbl-cit tr th a { } .tbl-cit tr th a:hover { } .tbl-cit td { } /* Estilos para los celdas en general */ .tbl-cit td.hoy { } /* Estilos para el dia de hoy */ .tbl-cit td.hoy a { } .tbl-cit td.hoy a:hover { } .tbl-cit td.lib { } /* Estilos para los dias libres */ .tbl-cit td.lib a { } .tbl-cit td.lib a:hover { } .tbl-cit td.nlib { } /* Estilos para los dias ocupados */ /* Tabla de datos normal, especial o personlizada: Formato 1 */ table.tbl-f1 { } table.tbl-f1 caption { } .tbl-f1 th { } .tbl-f1 td { } /* ESTILOS PARA CAJA CON FORMATOS */ .caj-tit { float:left; margin:5px 0px 10px 0px; width:100%; }/* caja de decoracion para los titulos del site*/ .caj-tit-padd { padding-bottom:7px; border-bottom:1px solid #c6c6c6;} .caj-sub { float:left; margin:0px 0px 5px 0px; width:100%; background:#E1E2C0; border-bottom:1px solid #BFDAE6;}/* caja para los subtitulos */ .caj-sub h3 { margin:0px; padding:3px 5px 3px 8px; width:auto; }/* Estilo para h3 en la caja de subtitulos*/ .caj-ent { padding:10px 10px 10px 10px; background:url(/MODULOS/global/publico/interfaces/img/fondo_subtitulo.gif) top left repeat-X;}/* caja de entradilla para paginas libres */ .caj-ent-f1 { padding:10px 10px 10px 10px; background:url(/MODULOS/global/publico/interfaces/img/fondo_noticias.gif) top left repeat-X;}/* caja de entradilla para noticias*/ .caj-lst { float:left; margin:0px 0px 5px 0px; width:100%; background:#E9F4F8; border-bottom:1px dashed #7A8342;}/* caja para los titulos de los listados de documentos*/ .caj-lst h4 { margin:0px 0px 2px 0px; padding:3px 5px 3px 8px; border-left:5px solid #E1E2C0; font-size:11px; } .caj-lst-f1 { float:left; margin:0px 0px 5px 0px; width:100%; background:#F3E9AF; border-bottom:1px dashed #91874F;}/* caja para los titulos de los listados de contenidos relacionados */ .caj-lst-f1 h4 { margin:0px 0px 2px 0px; padding:3px 5px 3px 8px; border-left:5px solid C2BA7B; font-size:11px;} .caj-deco-doc { background:transparent url(/MODULOS/global/publico/interfaces/img/documentos.jpg) 100% 20px no-repeat;}/* caja decoracion para documentos*/ .caj-deco-doc p { width:340px;} .caja-deco-img { float:left; margin:0px 0px; padding:0px 10px 0px 70px; border-bottom:1px dashed #ccc; background:transparent url(/MODULOS/global/publico/interfaces/img/imagenes.jpg) 0px 10px no-repeat;}/* Caja decoracion para imagenes*/ .caja-deco-cat { background:transparent url(/MODULOS/global/publico/interfaces/img/categorias.jpg) bottom right no-repeat;} /* Caja para la agenda de eventos*/ .caj-age { margin:10px 0px; padding:0px 0px 5px 320px; height:250px; background:url(/MODULOS/global/publico/interfaces/img/agenda.jpg) top left no-repeat;} .caj-obra { padding:10px; background-color:#EBEDD7;} .caj-borde { border:7px solid #E1DCB1; padding:5px;} /* Caja para listado de imagenes */ .caj-img {float:left; padding:0px 0px 0px 50px;}/* caja para las imagenes izda y dcha de las paginas libres (Imagenes destacadas) */ .caj-img-f1 {float:right; padding:0px 10px 0px 10px; width:120px;}/* caja para el listado de imagenes de paginas libres */ .caj-img-f2 {float:left; padding:0px 0px 0px 10px;}/* caja para el listado del modulo imagenes*/ .caj-img-ficha {float:left; margin:5px 0px 0px 0px;} /* caja para las imagenes peques de los productos*/ /* Caja para encuestas */ .caj-enc {margin: 0px; padding: 10px 0px 10px 0px; border-bottom:1px dashed #666; } .caj-enc-c1 {float: left; width: 150px; } .caj-enc-c2 {float: left; width: 400px; } /* Caja de 'No hay datos en listado o no resultados */ .caj-ndts { clear:both; margin-left:7px; height:20px; background:url(/MODULOS/global/publico/interfaces/img/iconos/sinresultado.gif) top left no-repeat; } .caj-ndts-padd { padding:0px 0px 0px 20px; } /* Caja para calendario eventos*/ .caj-cal {margin:5px 0px 0px 10px;} /* Caja de Ayuda */ .caj-ayu { } .caj-ayu-padd { } /* Caja de error */ .caj-err { } .caj-err-padd { } .caj-err strong { } /* Caja para contenidos anexos */ .caj-anx { } .caj-anx-padd { } /* Caja para contenidos notas */ .caj-not { } .caj-not-padd { } /* Caja resultados */ .caj-res { } .caj-res-padd { } /* Caja para la autentificacion */ .caj-aut { } .caj-aut-padd { } /* Caja para contenido destacado */ .caj-des { } .caj-des-padd { } .caj-des-scc { } /* Caja Tooltip */ #caj-ttip { } #caj-ttip-img { } /* Caja para personalizable: formato 1 */ /* Recordar que debeis comentar donde la empleais, eso os servira con el tiempo a encontrar las cosas */ .caj-f1 { clear:both; border-left:5px solid #E1E2C0;} /* caja de decoracion para detalle de paginas libres */ .caj-f1-padd { padding-left:10px; } .caj-f2 { clear:both; border-right:5px solid #E1E2C0; border-bottom:1px dashed #E1E2C0;} /* caja de decoracion para detalle de preguntas frecuentes */ .caj-f2-padd { padding:10px 0px 10px 10px; } .caj-f2-padd h3 {margin:0px; padding:0px 0px 5px 20px; font-size:13px; background:url(/MODULOS/global/publico/interfaces/img/iconos/faqs.gif) 0px 2px no-repeat;} .caj-f2-padd2 {padding-left:25px;} .caj-f3 { clear:both; background:url(/MODULOS/global/publico/interfaces/img/fondo_evento.gif) top left no-repeat;} /* caja de decoracion para detalle de paginas libres */ .caj-f3-padd { padding-left:10px; } .caj-f4 { margin:0px 0px 5px 0px; padding:5px 5px 5px 0px; border-bottom:1px dashed #959595;} /* ESTILOS PARA LAS PESTAÑAS */ /* La "f1" indica el tipo formato y personalización. El listado corresponde a su representacion grafica. El estilo ".pesfX-cpo", correspende al cuerpo de la carpeta y padd a su margen. El estilo "act" corresponde a la pestaña actual. Ejemplo:
Lorem ipsum dolor sit amet
En caso que hubiera dos tipos de pestañas, se denominarian: pesf2, pesf3,... asi correlativamente */ .pesf1 { } .pesf1 ul { } .pesf1 ul li { } .pesf1 ul li a { } .pesf1 ul li a:hover { } .pesf1 ul li.act a { } .pesf1 ul li.act a:hover { } .pesf1-cpo { } .pesf1-padd { } /* ESTILOS PARA EL POPUP */ #pop { } #pop-padd { } /* ESTILOS PARA COLUMNAS GENERALES */ /* Seccion donde definios los estilos globales para columnas. No se puede definir 'border', ni 'padding', ni 'margin'. Asi logramos que estos estilos lo emlemos para cosas genericas. A veces en portadas sobre todo necesitaremos definir estilos algo mas particulares pero para ello utilizaremos de las CSS el apartado 'ESTILOS PARA COLUMNAS PERSONALIZADAS'. */ /* 2 Columnas 50%-50& */ .col2f1 { } .col2f1-c1 { float: left; width: 49%; } .col2f1-c2 { float: right; width: 49%; } /* 2 Columnas 70%-30% */ .col2f2i { } .col2f2i-c1 { float: left; width: 69%; } .col2f2i-c2 { float: right; width: 29%; } /* 2 Columnas 30%-70% */ .col2f2d { } .col2f2d-c1 { float: left; width: 29%; } .col2f2d-c2 { float: right; width: 69%; } /* 2 Columnas 60%-40% */ .col2f3i { background-image:url(/MODULOS/global/publico/interfaces/img/dot_marron.gif); background-repeat:repeat-y; background-position:345px 0px; } .col2f3i-c1 { float: left; width: 57%; padding:0px 7px; } .col2f3i-c2 { float: right; width: 37%; padding:0px 7px; } /* 2 Columnas 40%-60% */ .col2f3d { } .col2f3d-c1 { float: left; width: 39%; } .col2f3d-c2 { float: right; width: 59%; } /* 2 Columnas 20%-80% */ .col2f4d { } .col2f4d-c1 { float: left; width: 19%; } .col2f4d-c2 { float: right; width: 79%; } /* 2 Columnas 80%-20% */ .col2f4i { } .col2f4i-c1 { float: left; width: 79%; } .col2f4i-c2 { float: right; width: 19%; } /* 3 Columnas 33%-33%-33% */ .col3f1 { } .col3f1-c1 { float:left; margin:0 1.99% 0 0; width:32%; } .col3f1-c2 { float:left; margin:0 0 0 0; width:32%; } .col3f1-c3 { float:right; width:32%; } /* 3 Columnas grid 1 33%-66% */ .col3f1g1 { } .col3f1g1-c1 { float:left; width:32%; } .col3f1g1-c2 { float:right; width:66%; } /* 3 Columnas grid 2 66%-33% */ .col3f1g2 { } .col3f1g2-c1 { float:left; width:66%; } .col3f1g2-c2 { float:right; width:32%; } /* 4 Columnas 25%-25%-25%-25% */ .col4f1 { } .col4f1-c1 { float:left; margin:0 1.333% 0 0; width:24%; } .col4f1-c2 { float:left; margin:0 1.333% 0 0; width:24%; } .col4f1-c3 { float:left; margin:0 0 0 0; width:24%; } .col4f1-c4 { float:right; margin:0 0 0 0; width:24%; } /* 4 Columnas grid 1 25%-50%-25% */ .col4f1g1 { } .col4f1g1-c1 { float:left; margin:0 1.5% 0 0; width:24%; } .col4f1g1-c2 { float:left; margin:0 0 0 0; width:49%; } .col4f1g1-c3 { float:right; margin:0 0 0 0; width:24%; } /* 4 Columnas grid 2 25%-25%-50% */ .col4f1g2 { } .col4f1g2-c1 { float:left; margin:0 1.5% 0 0; width:24%; } .col4f1g2-c2 { float:left; margin:0 0 0 0; width:24%; } .col4f1g2-c3 { float:right; margin:0 0 0 0; width:49%; } /* 4 Columnas grid 3 50%-25%-25% */ .col4f1g3 { } .col4f1g3-c1 { float:left; margin:0 1.5% 0 0; width:49%; } .col4f1g3-c2 { float:left; margin:0 0 0 0; width:24%; } .col4f1g3-c3 { float:right; margin:0 0 0 0; width:24%; } /* 5 Columnas 20%-20%-20%-20% */ .col5f1 { } .col5f1-c1 { float:left; margin:0 1.2% 0 0; width:19%; } .col5f1-c2 { float:left; margin:0 1.2% 0 0; width: 19%; } .col5f1-c3 { float:left; margin:0 1.2% 0 0; width: 19%; } .col5f1-c4 { float:left; margin:0 0 0 0; width:19%; } .col5f1-c5 { float:right; margin:0 0 0 0; width:19%; } /* ESTILOS PARA COLUMNAS PERSONALIZADAS */ /* Estilos empleados para modelos de columnas que se han de personalizar porque el diseño lo requiere. Un ejemplo de como nombrarlas es: - Si tenemos que hacer dos columnas seria asi .col2p1 { } 'Con el respectivo comentario de donde se emplea' .col2p1-c1 { } .col2p1-c2 { } - Si tenemos que hacer tres columnas: .col3p1 { } 'Con el respectivo comentario de donde se emplea' .col3p1-c1 { } .col3p1-c2 { } .col3p1-c3 { } Si tenemos mas de dos modelos de personalizacion de columnas, es decir dos modelos diferentes de dos columnas, las nombraremos: col2p1 y a la siguiente col2p2, recordando siempre el comentar donde se emplea. */ /* Columnas para el detalle de productos*/ .col2p1 { } .col2p1-c1 { float:left; width:185px; } .col2p1-c2 { float:left; width:380px; } /* FONDOS ESPECIALES */ .fdo-XXX { } /* ESTILOS PARA BREADCRUMS */ .pre-bdc { float:left; width:535px; }/* breadcrumbs para la home */ .pre-bdc .pre-bdc-padd { padding:0px 0px 2px 10px; } .bdc { float:left; width:430px; } .bdc .bdc-padd { padding:0px 0px 10px 8px; } .bdc .bdc-padd strong { color:#7C8449; } .bdc .bdc-padd a { color:#333333; text-decoration:underline; } .bdc .bdc-padd a:hover { text-decoration:underline; color:#75030C; } .bdc .bdc-padd .act {color:#000000; font-weight:bold; } /* ESTILO PARA LA PAGINACION */ .pag { } .pag a.ini { } /* Estilo para ir al inicio del listado paginado */ .pag a.ini:hover { } .pag a.ant { } /* Estilo para retroceder un paso en el listado paginado */ .pag a.ant:hover { } .pag a.fin { } /* Estilo para ir al final del listado paginado */ .pag a.fin:hover { } .pag a.sig { } /* Estilo para avanzar un paso en el listado paginado */ .pag a.sig:hover { } .pag .ley { } /* Estilo de la leyenda de paginacion */ .pag .ley strong { } .pag .res { } /* Estilo el texto de resultados */ .pag .act { } /* Estilo que indica la pagina en la que estamos */ .pag .act strong { } /* ESTILOS PARA LA NAVEGACION COMPLEMENTARIA */ /* Barra de opciones navegacion superior */ .nav-top { float:right; } .nav-top-padd { padding:0px 10px 0px 0px;} /* Barra de opciones navegacion inferior */ .nav-btt { float:right; } .nav-btt-padd { padding:0px 10px 7px 0px; } /* ESTILOS PARA CUALQUIER FORMULARIO */ /* Formulario Buscador */ .form-bus { } .form-bus fieldset { } .form-bus legend { } .form-bus .lbl { } .form-bus .cps { } .form-bus .btn { } /* Formulario general */ .form {margin:0px; padding:0px; } .form fieldset { margin:0px; padding:0px; border:0px solid #fff; } .form fieldset legend { } .form fieldset .lbl { float:left; } .form fieldset .lbl-gr { } .form fieldset .lbl-md { } .form fieldset .lbl-pq { } .form fieldset .cps { } .form fieldset .cps-gr { } .form fieldset .cps-md { } .form fieldset .cps-pq { } .form fieldset .cps-err { } .form fieldset .rad { } .form fieldset .chx { } .form fieldset .tex { } .form fieldset .tex-gr { } .form fieldset .tex-md { } .form fieldset .tex-pq { } .form fieldset select {display:inline; font-size:11px; color:#333;} .form .btn { } .form .btn:disabled { } .form .btn-gr { } .form .btn-md { } .form .btn-pq { } .form .dist-btn { } .form .obl { } .form .avi { } /* Formulario de filtros de busqueda, opcion de filtrado. Se anida con el estilo "form" */ .form-fil { } /* Formulario de autentificacion de entrada a la web se anida con el estilo "form" */ .form-aut { } /* Formulario de filtros de busqueda, opcion de filtrado. Se anida con el estilo "form" */ .form-fil { } /* Formulario de XXX para cajas ventanas se anida con el estilo "form" */ /* Ejemplo de como anidar:
*/ .form-deco { margin:0px 0px 5px 0px; padding:0px 0px 5px 0px; width:95%; border-bottom:1px dashed #84B8D0; } /* formulario para encuestas */ .form-f1 { margin:10px 0px 0px 20px; padding:0px; width:80%;} .form-f1 fieldset { padding:5px 10px; font-size:11px; border:none; } .form-f1 fieldset legend {} .form-f1 fieldset .lbl {} .form-f1 fieldset .rad {} .form-f1 .btn { margin:5px 0px 0px 35px; _margin:5px 0px 0px 10px; padding-bottom:4px; border:1px solid #A21924; height:20px; font-size:11px; background:url(/MODULOS/global/publico/interfaces/img/fondo_boton.gif) bottom left repeat-x;} /* ESTILOS PARA TEXTO */ .txt { } /* Estilo para el texto en general */ .ent { color:#333; font-style:italic; text-align:justify; font-size:11px;} /* Estilo para la entradilla de paginas libres y noticias */ .ent-f1 { color:#666666; font-size:11px; text-align:justify; } /* Esilo para la entradilla de productos */ .des { font-size:11px; color:#14466B; } /* Estilo para destacado */ .esp { color:#D31232; } /* Estilos especiales de color, indicar donde se usa y porque */ .esp-f1 { color:#666666; } /* Estilo utilizado en listado de documentos*/ .fec { font-size:10px; color:#005600; } /* Estilo para campo de fecha */ .fec-f1 { font-size:11px; color:#005600; } /* Estilo para campo de fecha con mayor tamaño */ .tit { font-size:11px; color:#000000; font-weight:bold;} .tit-evento { font-size:11px; color:#000000;} /* Estilo para el titulo, la decoracion incluida esta en .caj-tit */ .tit-f1 { margin:0px; padding:5px 0px; color:#333; text-align:justify; font-size:14px; } /* Estilo para el titulo, indicar donde se usa y porque, si hay algun mas se nombra correlativamente: f2, f3,... */ .tit-f2 { margin:0px; padding:0px 0px 3px 18px; color:#4891B3; font-size:15px; background:url(/MODULOS/global/publico/interfaces/img/iconos/productos.gif) 0px 3px no-repeat;} /* Estilo para el titulo del detalle de productos*/ .ant { color:#005600; font-size:11px; text-align:justify; } /* Estilo para antetitulos */ .sub { margin:0px; font-size:11px; color:#666666;} /* Estilo para la subcabecera */ .subt { padding-bottom:5px; color:#14466B; font-size:11px; text-align:justify; border-bottom:1px dashed #7A8342; } /* estilo para el subtitulo de paginas libres*/ .subt-f1 { padding-bottom:5px; color:#666666; font-size:11px; text-align:justify; border-bottom:1px dashed #FF8305; } /* estilo para el subtitulo de noticias*/ .subt-f2 { color:#666666; font-size:11px; font-style:italic; text-align:justify;} /* estilo para el subtitulo de productos */ .pvp-f1 {color:#B80C10;} .pvp { color:#B80C10; font-weight:bold; font-size:11px; } /* Estilo para precio */ .dscp { } /* Estilo para utilizar cuando descripcion */ .res { } /* Estilo para la resaltados */ .not { } /* Estilo para notas */ .ane { } /* Estilos para anexos */ .ok { } /* Estilo para Ok en resultados */ .nok { } /* Estilo para resultados no Ok en resultados */ .pvp-des { } /* Estilo para destacado */ .pvp-ant { } /* Estilo para precio anterior */ .ndts { } /* Estilo que indica que no hay resultados en listados. Se utiliza cuando no hay decoracion, si no se utilizara los definidos en las cajas */ .err { } /* Estilo que indica que no hay resultados en listados. Se utiliza cuando no hay decoracion, si no se utilizara los definidos en las cajas */ .fec-ini { } /* Estilo para campo de fecha de inicio */ .fec-fin { } /* Estilo para campo de fecha de final o utlima fecha */ .fec-crt { } /* Estilo para campo de fecha critica */ /* ESTILOS PARA EL CUERPO */ /* Estilo para el cuerpo de paginas libres y noticias*/ .cpo { text-align:justify; padding:5px 0px 10px 15px; } .cpo strong {font-weight:bold; } .cpo ul { margin:5px 10px 5px 20px; padding:0px; } .cpo li { margin:0px; padding:0px 0px 5px 0px; } .cpo p { } /* Estilos para el cuerpo de productos*/ .cpo-pro {float:left; margin-top:5px; padding:5px 10px; text-align:justify; background-color:#F2F7FA; border-top:1px dashed #3A7692; border-bottom:1px dashed #3A7692;} .cpo-pro strong {font-weight:bold; } .cpo-pro ul { margin:0px 0px 0px 10px; padding:0px 0px 0px 0px; } .cpo-pro li { margin:0px; padding:0px 0px 5px 12px; list-style-type:none; background:url(/MODULOS/global/publico/interfaces/img/bullet2.gif) 0px 8px no-repeat;} /* ESTILOS PARA IMAGENES */ .img-sm { } /* Estilo para imagenes sin marcos */ .img-cm { border:1px solid #DCC95C; } /* Estilo para imagenes con marcos */ .img-dch { float: right; margin:0px 5px 5px 10px;} /* Estilos para imagenes que flotan a la derecha */ .img-dch-pie { margin-bottom:2px; padding:2px; font-size:10px; text-align:center; background:#E1E2C0; border-bottom:1px dashed #75030C; } .img-dch-f1 { float: right; margin:0px 5px 5px 10px;} /* Estilos para imagenes que flotan a la derecha en noticias */ .img-dch-f1-pie { margin-bottom:2px; padding:2px; font-size:10px; text-align:center; background:#FFF4EA; border-bottom:1px dashed #FF8305; } .img-izq { float: left; margin:0px 10px 5px 0px; } /* Estilos para imagenes que flotan a la izquierda */ .img-izq-pie { margin-bottom:2px; padding:2px; font-size:10px; text-align:center; background:#E1E2C0; border-bottom:1px dashed #75030C; } .img-lst {float:left; margin:0px 10px 5px 0px; width:100px;}/* listado de imagenes de paginas libres de layout1 y layout2*/ .img-lst-pie {font-size:10px; text-align:center;} .img-lst-f1 {clear:both; float:right; margin:0px 10px 5px 0px; width:100px;}/* listado de imagenes verticales en layout3*/ .img-lst-f2 {float:left; margin:0px 10px 10px 0px; width:82px; text-align:center;}/* listado de imagenes en modulo imagenes*/ .img-lst-f2-pie {margin-bottom:3px; font-size:10px; text-align:center; background:#E1E2C0; border-bottom:1px dashed #75030C;} .img-lst-ficha {float:left; margin:0px 5px 5px 5px; width:70px;}/* listado de imagenes de productos */ .img-lst-ficha-pie {font-size:10px; text-align:center;} .img-lst-f3 {float:left; margin:0px 10px 10px 0px; width:121px; text-align:center;}/* listado de imagenes en modulo imagenes*/ .img-lst-f3-pie {margin-bottom:3px; font-size:10px; text-align:center; background:#E1E2C0; border-bottom:1px dashed #75030C;} /* ESTILOS PARA ENLACES */ a { color:#75030C; text-decoration:none;} /* Enlaces en general */ a:hover { text-decoration:underline; } /* a { color:#75030C; text-decoration:none;} a:hover { text-decoration:underline; } */ a.enl { color:#75030C; font-weight:bold; border-bottom:1px solid #75030C; text-decoration:none; }/* Estilo para enlace */ a.enl:hover { padding:2px 0px 0px 0px;background:#FFEEDC; border-bottom:1px solid #75030C; } a.enl-pq { } /* Enlaces pequeños */ a.enl-pq:hover { } a.enl-des { color:#A21924; font-size:11px; font-weight:bold; text-decoration:none;} /* Enlaces destacados */ a.enl-des:hover { text-decoration:underline; } a.enl-mas { color:#A21924; font-size:11px; font-weight:normal; text-decoration:none; }/* Enlaces mas informacion */ a.enl-mas:hover { text-decoration:underline; } a.enl-fot { } /* Enlaces foto */ a.enl-fot:hover { } a.enl-vid { } /* Enlaces video */ a.enl-vid:hover { } a.enl-aud { } /* Enlaces video */ a.enl-aud:hover { } a.enl-swf { } /* Enlaces flash */ a.enl-swf:hover { } a.enl-pdf { } /* Enlaces pdf */ a.enl-pdf:hover { } a.enl-amp {color:#75030C; padding-left:14px; background:url(/MODULOS/global/publico/interfaces/img/iconos/zoom.gif) 0px 2px no-repeat; text-decoration:none;} /* Enlaces ampliar foto */ a.enl-amp:hover { text-decoration:underline; } a.enl-cal {color:#75030C; padding-left:20px; background:url(/MODULOS/global/publico/interfaces/img/iconos/calendario.gif) 0px 2px no-repeat; text-decoration:none;} /* Enlace de eventos */ a.enl-cal:hover { text-decoration:underline; } a.enl-doc { } /* Enlaces para documentos */ a.enl-doc:hover { } a.enl-imp { } /* Enlaces para impresion */ a.enl-imp:hover { } a.enl-top { padding-left:20px; font-size:11px; color:#666666; text-decoration:none; background:url(/MODULOS/global/publico/interfaces/img/iconos/subir.gif) 0px 0px no-repeat; } /* Enlaces subir */ a.enl-top:hover { text-decoration:underline; } a.enl-vol { padding-left:15px; font-size:11px; text-decoration:none; background:url(/MODULOS/global/publico/interfaces/img/iconos/volver.gif) 0px 0px no-repeat;} /* Enlaces volver */ a.enl-vol:hover { text-decoration:underline; } a.enl-imp { padding-left:15px; padding-bottom:10px; font-size:11px; text-decoration:none; background:url(/MODULOS/global/publico/interfaces/img/iconos/imprimir.gif) 0px 2px no-repeat;} /* Enlaces imprimir */ a.enl-imp:hover { text-decoration:underline; } a.enl-info { padding-left:20px; font-size:11px; color:#75030C; text-decoration:none; background:url(/MODULOS/global/publico/interfaces/img/iconos/info.gif) 0px 0px no-repeat;} /* Enlaces imprimir */ a.enl-info:hover { text-decoration:underline; } a.enl-ant { } /* Enlaces para anterior */ a.enl-ant:hover { } a.enl-sig { } /* Enlaces siguiente */ a.enl-sig:hover { } a.enl-hoy { } /* Enlaces hoy */ a.enl-hoy:hover { } a.enl-ema { } /* Enlaces email */ a.enl-ema:hover { } a.enl-gua { } /* Enlaces guardar */ a.enl-gua:hover { } a.enl-res { } /* Enlaces restuarar */ a.enl-res:hover { } a.enl-sal { } /* Enlaces salir */ a.enl-sal:hover { } a.enl-ayu { } /* Enlaces ayuda */ a.enl-ayu:hover { } a.enl-edi { } /* Enlaces editar */ a.enl-edi:hover { } a.enl-nedi { } /* Enlaces no editar */ a.enl-nedi:hover { } a.enl-vis { } /* Enlaces previsualizar */ a.enl-vis:hover { } a.enl-rdo { } /* Enlaces resaltado */ a.enl-des:hover { } a.enl-ndes { } /* Enlaces no resaltado */ a.enl-ndes:hover { } a.enl-min { } /* Enlace minimizar */ a.enl-min:hover { } a.enl-max { } /* Enlaces maximizar */ a.enl-max:hover { } /* ESTILOS PARA LA LINEAS */ .lin-f1 { } /* ESTILOS PARA FLOTAR Y ALINEAR Y PADDING */ .flo-izq { float: left; } .flo-dch { float: right; } .ali-izq { text-align: left; } .ali-dch { text-align: right; } .ali-cen { text-align: center; } .ali-top { vertical-align: top; } .ali-btt { vertical-align: bottom; } .ali-med { vertical-align: middle; } /* ESTILOS PARA ESPACIOS Y DIMENSIONES */ .padd { } .padd-top { padding: 10px 0px 0px 0px; } .padd-btt { padding: 0px 0px 10px 0px; } .padd-izq { padding: 0px 10px 10px 0px; } .padd-dch { padding: 0px 0px 10px px; } /* ESTILOS PARA BORRAR ESTILOS Y OCULTAR*/ .brr { clear: both; } .ocu { display: none; } .con:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .con {display:inline-block;} @media all { .con { display:block; }} /* Para Opera */ /* Hides from IE-mac \*/ * html .con { height: 1%; display:block;} /* End hide from IE-mac */