/* * Fichero: public.css ,v1.0px 17/10/2005 Francisco Javier Lopez * * 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 Francisco Javier Lopez * Comentarios */ /* INDICACIONES DE USO EN GENERAL */ /* 1- 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. 2- Esto vale no solo para este estilo si no para los grupos de: web-pre, pcab, cab, scab, pie, si queremos poner elementos en columnas intetaremos no definir las columas como tal si no describirlas como por ejemplo: #pcab .c1 { } #pcab .c2 { } 3. En el caso de que sobre todo en los elementos de cabecera o pie existan una navegación menor como por ejemplo: "inicio, mapa web, contacto" Se ha definido un estilo en cada uno de esos grupos con el estilo ".nav" */ /* ESTILOS GENERALES */ /* Definición de estilos gglobales para la web. Evitar definir estilos generales para h1,h2,h3,h4,h5,input,... */ body { background-color:#EAEEDD; margin:0px; padding:0px; } html, body { } td { } hr { display: none; } /* 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 precabeceradts cab -> Caja cabecera scab -> Caja subcabecera ctd -> Caja contenido que engloba laterales y datos dts -> Caja datos pie -> Caja pie */ #web-pre { } #web { font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:11px; color:#333333; width:770px; background-color:#FFFFFF; background-image:url(/MODULOS/global/publico/interfaces/img/fondo_web.gif); background-repeat:repeat-y; } #pcab { } #cab { background-image:url(/MODULOS/global/publico/interfaces/img/fondo_cabecera.gif); background-repeat:repeat-x; background-color:#FFFFFF; border-right:1px solid #7E9A24; padding-top:10px; } #scab { background-color:#FFFFFF; } #ctd { } #lat { width:158px; background-image:url(/MODULOS/global/publico/interfaces/img/top_menu.gif); background-repeat:no-repeat; background-position:top; float:left; } #dts { width:611px; float:left; padding-bottom:10px; } #dts .fondo { padding:10px; background-image:url(/MODULOS/global/publico/interfaces/img/fondo_datos.gif); background-repeat:no-repeat; margin:1px 0px 10px 5px; width:570px; } #pie { background-image:url(/MODULOS/global/publico/interfaces/img/fondo_pie.gif); background-position:top; background-repeat:no-repeat; clear:both; width:770px; text-align:center; font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:11px; color:#333333; padding-top:10px; } /* ESTILOS PARA LA WEB */ /* Definicion de los estilos necesarios para hacer que si es liquida al redeimensionarse haya un ancho minimo para que el diseño no se estropee. La estructura en HTML seria asi:
Lorem ipsum
Ejemplo de utilizacioón: Si la web debe de ajustarse a ajustarse al 100% pero con minimo de 750px de ancho, los estilos deberian ser: #web { width: 100%; min-width: 750px; text-align: left; } #web-blo { } #web-min { padding-left: 750px; } #web-con { margin-left: -750px; position: relative; } * html #web-min { padding-left: 750px; } * html #web-con { margin-left: 750px; position: relative; } html #web-min, * html #web-con, * html #web-blo { height:1px; } */ #web-blo { } #web-min { } #web-con { } * html #web-min { } * html #web-con { } /*\*/ * html #web-min, * html #web-con, * html #web-blo { } /**/ /* ESTILOS PARA LA PREHOME DE LA WEB */ #web-pre .XX { } #web-pre .XX-padd { } #web-pre h1.XX { } #web-pre h2.XX { } #web-pre h3.XX { } #web-pre h4.XX { } #web-pre h5.XX { } /* ESTILOS PARA LA PRECABECERA */ #pcab .XX { } #pcab .XX-padd { } #pcab .nav { } #pcab h1.XX { } #pcab h2.XX { } #pcab h3.XX { } #pcab h4.XX { } #pcab h5.XX { } /* ESTILOS PARA LA CABECERA DE LA WEB */ #cab .izda { width:406px; float:left; padding:12px 0px 0px 0px; } #cab .dcha { width:190px; float:right; padding:22px 0px 0px 0px; text-align:center; } #cab .dcha a { font-size:10px; color:#65413D; font-weight:bold; } #cab .buscador { background-color:#CB3131; padding:5px; margin-top:4px;} #cab .XX-padd { } #cab .nav { } #cab h1.XX { } #cab h2.XX { } #cab h3.XX { } #cab h4.XX { } #cab h5.XX { } /* ESTILOS PARA LA SUBCABECERA */ #scab .promocion { float:left; width:191px;background-image:url(/MODULOS/global/publico/interfaces/img/fondo_promocion.gif); background-repeat:no-repeat; margin:3px 0px 0px 2px; } #scab .promocion h2 { padding:0px; margin:0px 0px 4px 0px; font-size:14px; color:#778E2E; } #scab .promo-destacada { float:left; width:221px; min-width:223px; background-image:url(/MODULOS/global/publico/interfaces/img/fondo_promo_destacada.gif); background-repeat:no-repeat; background-position:top right; margin:3px 0px 0px 2px; } #scab .promo-destacada h2 { padding:0px; margin:0px 0px 4px 0px; font-size:14px; color:#778E2E; } #scab .promocion-padd { padding:4px; } #scab .nav { } #scab h1.XX { } #scab h2.XX { } #scab h3.XX { } #scab h4.XX { } #scab h5.XX { } /* ESTILOS PARA EL PIE DE LA PAGINA */ #pie a { color:#65413D; } #pie .XX-padd { } #pie .nav { } #pie h1.XX { } #pie h2.XX { } #pie h3.XX { } #pie h4.XX { } #pie h5.XX { } /* ESTILOS PARA EL MENU LATERAL */ #lat .XX { } #lat .XX-padd { } #lat h1.XX { } #lat h2.XX { } #lat h3.XX { } #lat h4.XX { } #lat h5.XX { } /* ESTILOS PARA EL CONTENIDO Y DATOS */ #dts .XX { } #dts .XX-padd { } #dts h1.XX { } #dts h2 { padding:0px; margin:0px 0px 4px 0px; font-size:14px; color:#778E2E; } #dts h2.alo { background-image:url(/MODULOS/global/publico/interfaces/img/icono_alojamiento.gif); background-repeat:no-repeat; background-position:0px; padding-left:30px; padding-top:5px; height:20px;} #dts h2.bus { background-image:url(/MODULOS/global/publico/interfaces/img/icono_busca.gif); background-repeat:no-repeat; background-position:2px 0px; padding-left:30px; padding-top:5px; height:20px;} #dts h2.oci {background-image:url(/MODULOS/global/publico/interfaces/img/icono_propuestas.gif); background-repeat:no-repeat; background-position:0px; padding-left:30px; padding-top:5px; height:20px;} #dts h2.ofe {background-image:url(/MODULOS/global/publico/interfaces/img/icono_ofertas.gif); background-repeat:no-repeat; background-position:0px; padding-left:30px; padding-top:5px; height:20px;} #dts h2.rut {background-image:url(/MODULOS/global/publico/interfaces/img/icono_rutas.gif); background-repeat:no-repeat; background-position:0px 0px; padding-left:30px; padding-top:0px; height:25px;} #dts h2.rut2 {background-image:url(/MODULOS/global/publico/interfaces/img/icono_rutas_2.gif); background-repeat:no-repeat; background-position:0px 0px; padding-left:30px; padding-top:5px; height:25px;} #dts h2.cont {background-image:url(/MODULOS/global/publico/interfaces/img/icono_contacto_2.gif); background-repeat:no-repeat; background-position:0px 0px; padding-left:30px; padding-top:5px; height:25px;} #dts h2.map {background-image:url(/MODULOS/global/publico/interfaces/img/icono_mapa.gif); background-repeat:no-repeat; background-position:0px 0px; padding-left:30px; padding-top:5px; height:25px;} #dts h3.map {padding:0px; margin:0px 0px 4px 0px; font-size:11px; color:#778E2E; } #dts h4.XX { } #dts h5.XX { } .todas { background-image:url(/MODULOS/global/publico/interfaces/img/dotted_verde.gif); background-repeat:repeat-x; background-position:top; margin:5px 0px 0px 0px; text-align:right;} .dotted { background-image:url(/MODULOS/global/publico/interfaces/img/dotted_verde.gif); background-repeat:repeat-x; background-position:top; margin:5px 0px 0px 0px; text-align:right;} .contiene-destacados { background-color:#DDEEAC; background-image:url(/MODULOS/global/publico/interfaces/img/fondo_destacado.gif); background-repeat:repeat-x; background-position:bottom; } .destacado { float:left; width:180px; margin:0px 0px 0px 4px; padding-bottom:15px; } .destacado h2 { padding:0px; margin:0px 0px 4px 0px; font-size:14px; color:#778E2E; } /* 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 { background-color:#BA0000; margin-top:93px; padding-bottom:6px; } .men ul { margin:0px 5px; padding:0px; } /* 1º Nivel de navegación */ .men ul li { list-style-type:none; background-image:url(/MODULOS/global/publico/interfaces/img/dotted_menu.gif); background-repeat:repeat-x; background-position:bottom; margin:0px; padding:2px 0px 2px 15px;} .men ul li a { font-size:14px; color:#FFFFFF; } .men ul li a:hover { text-decoration:none; color:#DBECAA; } .men ul li.act { font-weight:bold; background-image:url(/MODULOS/global/publico/interfaces/img/marcador_1.gif); background-repeat:no-repeat; } .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 { } /*SUBMENU*/ .submen { background-image:url(/MODULOS/global/publico/interfaces/img/bottom_menu.gif); background-repeat:no-repeat; padding:10px 0px 0px 25px; color:#778E2E; font-size:14px; font-weight:bold; margin-bottom:10px;} .submen a { font-size:11px; color:#D68203; font-weight:normal; padding-left:10px; background-image:url(/MODULOS/global/publico/interfaces/img/marcador_2.gif); background-position:0px 5px; background-repeat:no-repeat;} /* ESTILOS PARA LOS LISTADOS */ /* Listados para documentos */ .lst-doc ul { } .lst-doc li { } .lst-doc dl { } .lst-doc dt { } .lst-doc dd { } /* Listados para enlaces */ .lst-url { } .lst-url ul { margin:0px 0px 0px 35px; padding:0px; list-style-type:none; } .lst-url li { background-image:url(/MODULOS/global/publico/interfaces/img/marcador_3.gif); background-repeat:no-repeat; background-position:0px 5px; padding-left:12px; } .lst-url li h3 { padding:0px; margin:0px 0px 0px 0px;} .lst-url li h3 a { color:#4F6604; font-weight:bold; font-size:11px;} .lst-url dl { } .lst-url dt { } .lst-url dd { } /* Listados para categorias */ .lst-cat { } .lst-cat ul { } .lst-cat li { } .lst-cat dl { } .lst-cat dt { } .lst-cat dd { } /* 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 especial o personlizada: Formato1 */ .lst-f1 ul { } .lst-f1 li { } .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 { } table.tbl-cal caption { } /* Estilos para caption de la tabla */ table.tbl-cal caption a { } table.tbl-cal caption a:hover { } .tbl-cal th { } /* Estilos para cabecera de tabla */ .tbl-cal th a { } .tbl-cal th a:hover { } .tbl-cal td { } /* Estilos para los dias futuros */ .tbl-cal td a { } .tbl-cal td a:hover { } .tbl-cal td.hoy { } /* Estilos para el dia de hoy */ .tbl-cal td.hoy a { } .tbl-cal td.hoy a:hover { } .tbl-cal td.ant { } /* Estilos para los dias pasados */ .tbl-cal td.ant a { } .tbl-cal td.ant a:hover { } /* 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 */ /* Caja de Ayuda */ .caj-ayu { } .caj-ayu-padd { } /* Caja de error */ .caj-err { } .caj-err-padd { } .caj-err strong { } /* Caja de 'No hay datos en listado */ .caj-ndts { } .caj-ndts-padd { } .caj-ndts 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 { } .caj-f1-padd { } /* 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 30%-70& */ .col2f1 { background-color:#FFFFFF; width:590px; } .col2f1-c1 { float: left; width: 30%; height:300px; background-image:url(/MODULOS/global/publico/interfaces/img/fondo_foto_oferta.gif); background-repeat:no-repeat; } .col2f1-c1 .piefoto { background-color:#D1DDAA; padding:4px 0px; width:151px; margin:auto; margin-right:15px;} .col2f1-c1 .thumb {width:80px; float:left; margin-right:2px;} .col2f1-c2 { float: right; width: 68%; background-image:url(/MODULOS/global/publico/interfaces/img/fondo_txt_oferta.gif); background-repeat:no-repeat; } .col2f1-c2 .precio { border-bottom:1px solid #BCCF81; clear:both;} .col2f1-c2 .precio span {font-size:14px; font-weight:bold; color:#CB3131} .col2f1 h3.relacionados { font-size:11px; color:#778E2E; background-image:url(/MODULOS/global/publico/interfaces/img/dotted_verde.gif); background-repeat:repeat-x; background-position:bottom; padding:0px; margin:10px 0px 5px 0px;} .col2f1-c2 ul { margin:0px 0px 0px 35px; padding:0px; list-style-type:none; } .col2f1-c2 li { background-image:url(/MODULOS/global/publico/interfaces/img/marcador_3.gif); background-repeat:no-repeat; background-position:0px 5px; padding-left:12px; } /* 2 Columnas 30%-70& */ .col2f2 { width:570px; } .col2f2-c1 { float: left; width: 30%; height:300px; } .col2f2-c1 .piefoto { background-color:#D1DDAA; padding:4px 0px; width:151px; margin:auto; margin-right:15px;} .col2f2-c1 .thumb {width:80px; float:left; margin-right:2px;} .col2f2-c2 { float: right; width: 68%; } .col2f2-c2 .precio { border-bottom:1px solid #BCCF81; clear:both;} .col2f2-c2 .precio span {font-size:14px; font-weight:bold; color:#CB3131} .col2f2 h3.relacionados { font-size:11px; color:#778E2E; background-image:url(/MODULOS/global/publico/interfaces/img/dotted_verde.gif); background-repeat:repeat-x; background-position:bottom; padding:0px; margin:10px 0px 5px 0px;} .col2f2-c2 ul { margin:0px 0px 0px 35px; padding:0px; list-style-type:none; } .col2f2-c2 li { background-image:url(/MODULOS/global/publico/interfaces/img/marcador_3.gif); background-repeat:no-repeat; background-position:0px 5px; padding-left:12px; } /* 2 Columnas 50%-50% */ .col2f2i { } .col2f2i-c1 { float: left; width: 50%; } .col2f2i-c2 { float: right; width: 50%; } /* 2 Columnas 30%-70% */ .col2f2d { } .col2f2d-c1 { float: left; width: 29%; } .col2f2d-c2 { float: right; width: 69%; } /* 2 Columnas 60%-40% */ .col2f3i { } .col2f3i-c1 { float: left; width: 59%; } .col2f3i-c2 { float: right; width: 39%; } /* 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: 70%; } .col2f4i-c2 { float: right; width: 20%; } /* 3 Columnas 33%-33%-33% */ .col3f1 { } .col3f1-c1 { float:left; margin:0% 1.99% 0% 0%; width:30%; } .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. */ .colXp1 { } .colXp1-c1 { } .colXp1-c2 { } .colXp1-c3 { } /* FONDOS ESPECIALES */ .fdo-XXX { } /* ESTILOS PARA BREADCRUMS */ .bdc { font-size:10px; padding-left:15px; } .bdc-padd { } .bdc strong { } .bdc a { } .bdc a:hover { } /* ESTILO PARA LA PAGINACION */ .pag { text-align:right; } .pag a {color:#65413D;} .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 { color:#7E9A24; font-weight:bold; } /* Estilo que indica la pagina en la que estamos */ .pag .act strong { } /* ESTILOS PARA LA NAVEGACION COMPLEMENTARIA */ /* Barra de opciones navegacion superior */ .nav-top { } .nav-top-padd { } /* Barra de opciones navegacion inferior */ .nav-btt { } .nav-btt-padd { } /* ESTILOS PARA CUALQUIER FORMULARIO */ input { font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:11px; color:#333333; } select { font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:11px; color:#333333; } textarea { font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:11px; color:#333333; } /* Formulario Buscador */ .form-bus { padding:0px; margin:0px;} .form-bus fieldset { } .form-bus legend { } .form-bus .lbl { } .form-bus .cps { } .form-bus .btn { background-image:url(/MODULOS/global/publico/interfaces/img/fondo_botones.gif); background-repeat:repeat-x; color:#FFFFFF; font-weight:bold; text-transform:uppercase; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #EFBFBF; border-right-color: #EFBFBF; border-bottom-color: #921111; border-left-color: #EFBFBF; } .form-cen label { float:left; font-size:12px; font-weight:bold;} /*.form-cen .lbl { float:left; font-size:12px; font-weight:bold;}*/ .form-cen .cps { margin-bottom:10px; font-size:11px; vertical-align:top;} .form-cen .sel { margin-bottom:10px; } .form-cen .tex { float:left; margin:5px 0px; width:225px; color:#333333; font-size:11px; font-family:Arial;}/*Textarea*/ .form-cen .rad { float:left; margin:0px 4px 10px 0px; } .form-cen .sel-mult { float:left; margin:5px 3px 10px 0px; width:140px; height:140px;} /* Formulario general */ .form { } .form fieldset { border:0px; } .form fieldset legend { } .form fieldset .lbl { text-align: right; float: left; width: 30%; margin-right: 4px; padding-top: 2px; font-weight:bold; } .form input { margin:3px 0px; font-size:11px; font-family:Trebuchet MS, Arial, Helvetica, sans-serif;} sup { color:#FF0000;} .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 .btn { background-image:url(/MODULOS/global/publico/interfaces/img/fondo_botones.gif); background-repeat:repeat-x; color:#FFFFFF; font-weight:bold; text-transform:uppercase; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #EFBFBF; border-right-color: #EFBFBF; border-bottom-color: #921111; border-left-color: #EFBFBF; } .form .btn:disabled { } .form .btn-gr { } .form .btn-md { } .form .btn-pq { } .form .dist-btn { } .form .obl { } .form .avi { } .busc {border:1px solid #CCCCCC;padding: 0px 15px; 0px 15px; width:530px;} .caj-btn-cen { clear:both; margin:10px auto; text-align:center; width:100%;}/*Caja boton centrado al formulario*/ /* 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-XXX { } /* ESTILOS PARA TEXTO */ .txt { } /* Estilo para el texto en general */ .ent { } /* Estilo para la entradilla */ .ent-f1 { } /* Esilo para la entradilla con otro formato, si hay algun mas se nombra correlativamente: f2, f3,... */ .des { color:#000000; font-weight:bold; } /* Estilo para destacado */ .des-f1 { } /* Esilo para destacado con otro formato, si hay algun mas se nombra correlativamente: f2, f3,... */ .esp { } /* Estilos especiales de color, indicar donde se usa y porque */ .esp-f1 { } /* Estilos especiales de color, indicar donde se usa y porque, si hay algun mas se nombra correlativamente: f2, f3,... */ .fec { } /* Estilo para campo de fecha */ .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 */ .tit { } /* Estilo para el titulo */ .tit-f1 { } /* Estilo para el titulo, indicar donde se usa y porque, si hay algun mas se nombra correlativamente: f2, f3,... */ .ant { } /* Estilo para antetitulos */ .sub { } /* Estilo para la subcabecera */ .dscp { } /* Estilo para utilizar cuando descripcion */ .res { } /* Estilo para la resaltados */ .not { font-size:10px; } /* Estilo para notas */ .ane { } /* Estilos para anexos */ .ok { } /* Estilo para Ok en resultados */ .nok { } /* Estilo para resultados no Ok en resultados */ .pvp { } /* Estilo para precio */ .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 */ /* ESTILOS PARA EL CUERPO */ .cpo { } .cpo strong { } .cpo ul { } .cpo li { } .cpo ul { } .cpo li { } .cpo p { } /* ESTILOS PARA IMAGENES */ img { } a.img { } a.img:hover { } .img-sm { } /* Estilo para imagenes sin marcos */ .img-cm { border:1px dotted #7E9A24; } /* Estilo para imagenes con marcos */ .img-dch { float: right; } /* Estilos para imagenes que flotan a la derecha */ .img-dch-padd { } .img-izq { float:left; margin:0px 4px 4px 0px; } /* Estilos para imagenes que flotan a la izquierda */ .img-izq-padd { } /* ESTILOS PARA ENLACES */ a { text-decoration:none; color:#D68203;} /* Enlaces en general */ a:hover { text-decoration:underline; } a.enl { }/* Estilo para enlace */ a.enl:hover { } a.enl-pq { } /* Enlaces pequeños */ a.enl-pq:hover { } a.enl-des {font-size:12px;} /* Enlaces destacados */ a.enl-des:hover { } a.enl-mas { font-weight:bold; color:#65413D; padding-left:18px; background-image:url(/MODULOS/global/publico/interfaces/img/icono_ampliar.gif); background-repeat:no-repeat; background-position:0px 2px; } /* Enlaces mas informacion */ a.enl-mas:hover { } 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:#65413D; font-weight:bold; padding:0px 0px 0px 50px; background-image:url(/MODULOS/global/publico/interfaces/img/lupa.gif); background-position:30px 0px; background-repeat:no-repeat; } /* Enlaces ampliar foto */ a.enl-amp:hover { } a.enl-doc { } /* Enlaces para documentos */ a.enl-doc:hover { } a.enl-imp { } /* Enlaces para impresion */ a.enl-imp:hover { } a.enl-top { } /* Enlaces subir */ a.enl-top:hover { } a.enl-vol { } /* Enlaces volver */ a.enl-vol:hover { } 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 */ .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 */ .padd10{ padding:10px;} .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 0px; } .padd15dcha {padding: 0px 15px 0px 0px; } .marg-for {margin: 0px 0px 5px 3px;} /*ESTILOS CAJA */ .caj-cen { margin:0px auto 0px auto; text-align:center;}/* Estilo para caja que centra el contenido en su interior */ /*ESTILO PARA ANCHOS*/ .an-cen { width:500px;}/*Ancho para cajas centradas*/ .an-lbl { width:230px; text-align:right;} /* ESTILOS PARA BORRAR ESTILOS Y OCULTAR*/ .brr { clear: both; } .ocu { display: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display:inline-block;} @media all { .clearfix { display:block; }} /* Para Opera */ /* Hides from IE-mac \*/ * html .clearfix { height: 1%; display:block;} /* End hide from IE-mac */