/* 1996-2006 Inter Media S.A. Todos los Derechos Reservados. */ /* CSS para proyecto {PROYECTO} */ /* Version 1.0 */ /* media: SCREEN */ /* Fecha de creación dd/mm/aaaa */ /* HISTORIAL DE MODIFICACIONES */ /* dd/mm/aaaa Comentario de la modificacion realizada */ /* dd/mm/aaaa Comentario de la modificacion realizada */ /* dd/mm/aaaa Comentario de la modificacion realizada */ /* IMPORTANTE • Los nombres de los estilos deben hacer referencia a la funcionalidad del elemento que se esta definiendo, en ningun caso a caracteristicas gráficas o ubicación, por ejemplo NO NOMBRAR #menu_left o #menu_rojo SI NOMBRAR #menu_principal • NO USAR guiones al centro(-) al nombrar estilos ya que puede generar problemas si se necesita que el estilo interactue con una funcion javascript o PHP, para separar palabras utilizar guion bajo (_) • Lo ideal es generar el Css para impresión al final de la programacion HTML, CSS de modo que existan las mismas clases en ambos Css, de no ser posible es importante que cada vez que se cree un estilo nuevo en la versión SCREEN, este sea replicado en la versión PRINT con las características que corresponden. • Se debe privilegiar la utilización de etiquetas HTML por sobre las clases. • Todos los comentarios adicionales a una definición de estilos SON DE AYUDA Y SON BIENVENIDOS estos deben estar ubicados al principio de la definicion y ser lo mas breve posibles y en un leguaje claro. */ /* REDEFINICION DE ELEMENTOS HTML */ body{background:url(../images/html/bg_header.jpg) top repeat-x #30393F; margin:0; font:11px Tahoma, Arial, Helvetica, sans-serif; color:#666;} table{} td{} h1{font:bold 12px Arial, Helvetica, sans-serif; text-transform:uppercase; margin:0;} h2{margin:0;} h3{margin:0;} h4{margin-bottom:0px;} h5{} h6{} p {margin:0;} img {border:none;} strong, b{} a {outline:none;} a:link{text-decoration:none;} a:visited{text-decoration:none;} a:hover{text-decoration:underline;} a:active{text-decoration:underline;} form{} label{} ul{margin:0;} button{} /*ETIQUETAS APLICABLES PARA EL ESTILO DE PAGINA DE ACCESIBILIDAD*/ #accesibilidad{width: 0; clear: both;} #accesibilidad #txt_accesibilidad{width: 0;} #accesibilidad #txt_accesibilidad h1{} #accesibilidad #txt_accesibilidad h2{} #accesibilidad #txt_accesibilidad p{} #accesibilidad #iconos_accesibilidad{float: right; width: 0;} #accesibilidad #iconos_accesibilidad p{} #accesibilidad #iconos_accesibilidad img{} /*HEADER*/ .header {font:10px Arial, Helvetica, sans-serif; color:#FFF; width:1003px; height:97px; margin:0 auto; overflow:hidden; position:absolute;} .header .menu_secundario {display:none;} .header .logo_hyucam {margin:26px 0px 0px 0px; float:left;} .header .fono_contacto {float:right; clear:right; margin:18px 7px 0px 0px;} /*CONTENIDO*/ .contenido {width:1003px; overflow:hidden; background:#C1C4C6; margin:0 auto; overflow:hidden;} /*MENU PRINCIPAL*/ .contenido .menu_principal {display:none;} /*--- Menu Principal - Sub nivel 01*/ .contenido .menu_principal ul li ul.menu_principal_sub01 {width:1003px; height:25px; background:#DADBDC;} .contenido .menu_principal ul li ul.menu_principal_sub01 li {color:#30393F; width:333px; height:25px; border-right:solid 1px #C1C4C6; padding:0;} .contenido .menu_principal ul li ul.menu_principal_sub01 li a {width:333px; height:20px; color:#30393F; padding:6px 0 0;} .contenido .menu_principal ul li ul.menu_principal_sub01 li a:hover, .contenido .menu_principal ul li ul.menu_principal_sub01 li a.activo_sub {background:url(../images/html/bg_menu_principal_sub01_over.gif) repeat-x; color:#4B7196;} /*--- Menu Principal - Sub nivel 02*/ .contenido .menu_principal ul li ul.menu_principal_sub01 li ul.menu_principal_sub02 {background:url(../images/html/bg_menu_principal_sub02_top.gif) top no-repeat; width:333px; height:150px; overflow:hidden; display:block; padding:11px 0 0;} .contenido .menu_principal ul li ul.menu_principal_sub01 li ul.menu_principal_sub02 li .menu_principal_sub02_cont {background:#FFF; overflow:hidden; display:block;} .contenido .menu_principal ul li ul.menu_principal_sub01 li ul.menu_principal_sub02 li .menu_principal_sub02_cont .menu_principal_sub02_list {background:#FFF; width:135px; height:auto; text-align:left; padding-left:20px; overflow:hidden;} .contenido .menu_principal ul li ul.menu_principal_sub01 li ul.menu_principal_sub02 li .menu_principal_sub02_cont .menu_principal_sub02_list p {background:#FFF; font-weight:normal; width:135px;} .contenido .menu_principal ul li ul.menu_principal_sub01 li ul.menu_principal_sub02 li .menu_principal_sub02_cont .menu_principal_sub02_list p a {background:none; width:135px;} .contenido .menu_principal ul li ul.menu_principal_sub01 li ul.menu_principal_sub02 li .menu_principal_sub02_cont .menu_principal_sub02_list p a:hover {color:#0AA2D3;} .contenido .menu_principal ul li ul.menu_principal_sub01 li ul.menu_principal_sub02 li .menu_principal_sub02_cont .menu_principal_sub02_cont_img {width:156px; float:right; padding-right:15px;} .contenido .menu_principal ul li ul.menu_principal_sub01 li ul.menu_principal_sub02 li .menu_principal_sub02_bottom {background:url(../images/html/bg_menu_principal_sub02_bottom.gif) no-repeat; width:333px; height:11px; position:relative;} /*PRINCIPAL HOME*/ .principal_home {background:url(../images/html/bg_principal_home.gif) repeat-y; width:100%; overflow:hidden; padding:90px 0px 30px 0px;} /*--- Video*/ .principal_home #video {width:561px; padding:60px 0px 0px 30px; float:left;} /*--- Destacados de marca*/ .principal_home .destacados_marca {width:395px; padding:60px 0px 0px; float:right;} .principal_home .destacados_marca p {color:#8C9EA6; padding-top:10px;} .principal_home .destacados_marca a {color:#C6C7C9;} .principal_home .destacados_marca a.ver_mas {background:url(../images/html/bullet_ver_mas.gif) left 5px no-repeat; margin-top:8px; padding-left:8px; display:block;} .principal_home .destacados_marca h1 {height:13px; padding-top:15px;} .principal_home .destacados_marca h1 a, .principal_home .destacados_marca h1 a:hover {text-decoration:none; height:20px; display:block;} /*--- Contenido destacados de marca*/ .principal_home .destacados_marca .destacados_marca_cont {overflow:hidden; padding:0px 13px 22px 18px; border-bottom:solid 2px #000;} .principal_home .destacados_marca .destacados_marca_cont .destacados_marca_txt {width:190px; float:left; padding-right:7px;} .principal_home .destacados_marca .destacados_marca_cont img {border:none; padding:15px 0 0; float:right;} /*--- Títulos destacados de marca*/ .principal_home .destacados_marca h1.tit_red_concesionarios {background:url(../images/html/tit_red_concesionarios.gif) left bottom no-repeat;} .principal_home .destacados_marca h1.tit_respuestos {background:url(../images/html/tit_repuestos.gif) left bottom no-repeat; height:13px;} /*PRINCIPAL*/ .principal {padding:97px 23px 25px 0px;} .principal a {color:#4977A3;} .principal h1 {background:url(../images/html/bg_principal_h1.jpg) no-repeat; color:#FFF; width:938px; height:23px; padding:8px 0px 0px 17px;} .principal h2 {font:bold 12px Arial, Helvetica, sans-serif; color:#4777A3; margin-bottom:15px;} .principal h3 {font:bold 11px Arial, Helvetica, sans-serif; color:#4777A3; margin-bottom:15px;} .principal h4 {font:bold 11px Arial, Helvetica, sans-serif;} .principal .breadcrumb {display:none;} .principal .principal_contenido {background:#FFF; width:953px; margin:0; padding:0; border-right:solid 1px #FFF; border-bottom:solid 3px #E2E8EB; border-left:solid 1px #FFF;} .principal .principal_contenido .cenefa {width:953px; margin:0 auto; border-bottom:solid 1px #FFF;} .principal .principal_contenido .contenedor {background:url(../images/html/bg_contenedor.gif) repeat-y; overflow:hidden; height:auto;} .principal .principal_contenido .contenedor .main {width:657px; float:left;} .principal .principal_contenido .contenedor .sec {width:243px; float:right; padding:25px;} .principal .principal_contenido .contenedor .sec ul {padding:0px 0px 0px 13px;} .principal .principal_contenido .contenedor .sec ul li {margin-bottom:10px;} .principal .principal_contenido .contenedor .main .txt {padding:25px;} .principal .principal_contenido .contenedor .main .txt_img {width:135px; padding:0px 0px 0px 25px; float:right;} .principal .principal_contenido .contenedor .main .txt_img img {margin-bottom:30px;} a.bt_128x26, a.bt_128x26:link, a.bt_128x26:visited, a.bt_128x26:hover, a.bt_128x26:active {font:bold 11px Arial, Helvetica, sans-serif; color:#FFF; text-align:center; background:url(../images/botones/bt_128x26.gif) no-repeat; width:128px; height:26px; padding-top:5px; display:block; text-decoration:none;} input.bt_82x26 {font:bold 11px Arial, Helvetica, sans-serif; color:#FFF; text-align:center; background:url(../images/botones/bt_82x26.gif) no-repeat; width:82px; height:26px; display:block; text-decoration:none; border:none;} /*ANEXO*/ .anexo {background:#FFF; width:100%; padding:0 0 30px; border-top:solid 2px #B8BCBE; border-bottom:solid 3px #E2E8EB; overflow:hidden;} .anexo h1 {color:#4877A3; padding:10px 0px 5px 25px;} /*DESTACADOS NOTICIAS*/ .anexo .destacados_noticias {width:561px; padding:15px 0px 0px 30px;} .anexo .destacados_noticias p {font:12px Arial, Helvetica, sans-serif; line-height:20px;} .anexo .destacados_noticias p a {color:#666;} .anexo .destacados_noticias h1.tit_destacados {height:13px; margin:0; padding:0;} .anexo .ornamental_home {position:absolute; margin-top:-172px; margin-left:665px;} /*GLOBAL ITEMS*/ .global_items {display:none;} /*FOOTER*/ .footer {color:#D7D7D7; width:1003px; margin:0 auto; padding-bottom:50px; overflow:hidden;} .footer a {color:#D7D7D7;} .footer .footer_bottom {background:url(../images/html/bg_footer_bottom.jpg) no-repeat; height:20px;} .footer .footer_cont {background:url(../images/html/bg_footer.jpg) repeat-x #283035; padding:15px 15px 0px; overflow:hidden; height:auto;} .footer .footer_cont .hyundai {float:left;} .footer .footer_cont .hyundai a {font-size:10px; padding-top:3px; padding-right:8px; height:20px; display:block; float:left;} .footer .footer_cont .hyundai a.logo_hyundai {width:115px; float:none;} .footer .footer_cont .hyundai a.indicadores_ec {background:url(../images/html/ico_indicadores_ec.gif) no-repeat; padding:3px 8px 0px 23px;} .footer .footer_cont .hyundai .divisor_link {padding-top:3px; padding-right:8px; height:20px; display:block; float:left;} .footer .footer_cont .hyundai .direccion {font-size:10px; margin-top:0px; padding:0px 0px 8px;} .footer .footer_cont .anexos {text-align:right; float:right;} .footer .footer_cont .anexos a, .footer .footer_cont .anexos a:link, .footer .footer_cont .anexos a:visited {text-decoration:underline;} .footer .footer_cont .anexos a:hover, .footer .footer_cont .anexos a:active {text-decoration:none;} .footer .footer_cont .anexos p {float:left; padding-top:3px;} .footer .footer_cont .anexos .indumotora {margin:0px 0px 30px; clear:both; display:block;} .footer .footer_cont .anexos .anekos_links {padding:0px 0px 0px 10px; float:left;} /*CONCESIONARIOS*/ .principal .principal_contenido .concesionarios {background:url(../images/html/bg_concesionarios.gif) repeat-y; width:907px; margin:0 auto 25px; border:solid 1px #CCC; overflow:hidden;} .principal .principal_contenido h2.tit_conc {font:bold 11px Arial, Helvetica, sans-serif; color:#0A9FD2; padding:25px;} .principal .principal_contenido .concesionarios .chile {border-right:solid 1px #CCC; width:102px; float:left;} .principal .principal_contenido .concesionarios .ciudades {width:330px; float:left; overflow:hidden;} .principal .principal_contenido .concesionarios .ciudades ul {color:#4777A3; float:left; padding:20px 50px;} .principal .principal_contenido .concesionarios .ciudades ul li {padding:10px 0;} .principal .principal_contenido .concesionarios .ciudades ul li a:hover, .principal .principal_contenido .concesionarios .ciudades ul li a:active, .principal .principal_contenido .concesionarios .ciudades ul li a.activo {color:#0AA1D2;} .principal .principal_contenido .concesionarios .direcciones {width:474px; float:left;} .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle {border-bottom:solid 1px #CCC; width:424px; padding:25px;} .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle a.open, .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle a.open:link, .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle a.open:visited, .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle a.open:hover, .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle a.open:active {font:bold 11px Arial, Helvetica, sans-serif; color:#FFF; text-align:center; background:url(../images/botones/bt_128x26_open.gif) no-repeat; width:128px; height:26px; padding-top:5px; display:block; text-decoration:none; } .direcciones_detalle a.close:link, .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle a.close:visited, .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle a.close:hover, .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle a.close:active {font:bold 11px Arial, Helvetica, sans-serif; color:#FFF; text-align:center; background:url(../images/botones/bt_128x26_close.gif) no-repeat; width:128px; height:26px; padding-top:5px; display:block; text-decoration:none;} .principal .principal_contenido .concesionarios .direcciones .direcciones_detalle .mapa {display: none; margin-top:25px;} .principal .principal_contenido .concesionarios .direcciones .last {border:none;} /*NOTICIAS*/ .principal .principal_contenido .contenedor .main img {padding:1px; border:solid 1px #ccc;} .principal .principal_contenido .contenedor .main .fecha {font-size:10px; color:#0AA0D2;} .principal .principal_contenido .contenedor .main .titular_noticia {padding:25px; border-bottom:solid 1px #ccc;} .principal .principal_contenido .contenedor .main .titular_noticia h2, .principal .principal_contenido .noticias .titular_noticia p {width:456px;} .principal .principal_contenido .contenedor .main .titular_noticia a {margin-top:15px; display:block;} .principal .principal_contenido .contenedor .main .titular_noticia h2 {font-size:11px; padding:0;} .principal .principal_contenido .contenedor .main .titular_noticia h2 a {margin:0;} .principal .principal_contenido .contenedor .main .titular_noticia a.link_img {float:right; margin:0;} .principal .principal_contenido .contenedor .main .titular_noticia .fecha {padding:0px;} .principal .principal_contenido .sec ul.list_noticias {color:#4677A3;} /*DIVISION USADOS*/ .principal .principal_contenido .contenedor .main .usado {width:132px; height:145px; border:solid 1px #ccc; margin:25px 0px 25px 25px; float:left;} .principal .principal_contenido .contenedor .main .usado img {padding:0; border:none;} .principal .principal_contenido .contenedor .main .usado p {font-size:10px; margin:5px;} .principal .principal_contenido .contenedor .main .usado p a {color:#666;} /*CONTACTO*/ .principal .principal_contenido .contenedor .main .contacto {padding:25px 25px 25px 100px;} .principal .principal_contenido .contenedor .main .contacto table {color:#4977A3;} .principal .principal_contenido .contenedor .main .contacto table td {vertical-align:top;} .form_label {text-align:right;} .principal .principal_contenido .contenedor .main .contacto .select_form, .principal .principal_contenido .contenedor .main .contacto .txt_form, .principal .principal_contenido .contenedor .main .contacto .txt_form_mje {font:11px Tahoma, Arial, Helvetica, sans-serif; color:#666; width:374px; border:solid 1px #C1C4C6;} .principal .principal_contenido .contenedor .main .contacto .select_form {height:23px;} .principal .principal_contenido .contenedor .main .contacto .txt_form {height:20px;} .principal .principal_contenido .contenedor .main .contacto .txt_form_mje {height:95px;} /*MODELOS FICHA*/ a.tab_left, a.tab_left:link, a.tab_left:visited, a.tab_left:hover, a.tab_left:active {width:183px; height:30px; font:bold 12px Arial, Helvetica, sans-serif; text-decoration:none; text-align:left;} a.tab_left, a.tab_left:link, a.tab_left:visited {background:url(../images/html/bg_tab_left.jpg) left no-repeat; color:#000000;} .tabs-nav a.tab_left:hover, .tabs-nav a.tab_left:active {background:url(../images/html/bg_tab_left_over.gif) left no-repeat; color:#4977A3;} .tabs-selected a.tab_left, .tabs-selected a.tab_left:link, .tabs-selected a.tab_left:visited {background:url(../images/html/bg_tab_left_over.gif) no-repeat; color:#4977A3;} a.tab_mid, a.tab_mid:link, a.tab_mid:visited, a.tab_mid:hover, a.tab_mid:active {display:none;} a.tab_mid, a.tab_mid:link, a.tab_mid:visited {background:url(../images/html/bg_tab_mid.jpg) repeat-x; color:#FFFFFF;} .tabs-nav a.tab_mid:hover, .tabs-nav a.tab_mid:active {background:#FFFFFF; color:#4977A3;} .tabs-selected a.tab_mid, .tabs-selected a.tab_mid:link, .tabs-selected a.tab_mid:visited {background:#FFFFFF; color:#4977A3;} a.tab_right, a.tab_right:link, a.tab_right:visited, a.tab_right:hover, a.tab_right:active {display:none;} a.tab_right, a.tab_right:link, a.tab_right:visited {background:url(../images/html/bg_tab_right.jpg) right no-repeat; color:#FFFFFF;} .tabs-nav a.tab_right:hover, .tabs-nav a.tab_right:active {background:url(../images/html/bg_tab_right_over.gif) right no-repeat; color:#4977A3;} .tabs-selected a.tab_right, .tabs-selected a.tab_right:link, .tabs-selected a.tab_right:visited {background:url(../images/html/bg_tab_right_over.gif) right no-repeat; color:#4977A3;} /*-----------------tabs*/ @media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */ .tabs-hide { display: none; } } /* Hide useless elements in print layouts... */ @media print { .tabs-nav { display: none; } } /* Skin */ #tabs {background:url(../images/html/bg_tabs.gif) repeat-x bottom #C1C4C6; width:955px; height:auto; margin:0px 0px 30px 0px;} #tabs h1 {background:none; font-size:13px; text-transform:none; color:#4977A3; width:auto; height:auto; padding-left:20px;} #tabs h2 {font:bold 11px Arial, Helvetica, sans-serif; color:#0AA1D2; padding:0px 0px 0px 20px;} #tabs .descrip {width:910px; height:auto; border:solid 1px #CCCCCC; margin:0px 0px 0px 20px; padding:0px; display:block; overflow:hidden;} #tabs .descrip .descrip_txt {width:550px; height:auto; overflow:hidden; border-right:none; float:left; margin:0; } #tabs .descrip .descrip_txt p {margin:10px 10px 5px 12px;} #tabs .descrip .descrip_txt table {width:550px; height:100%; border-collapse:collapse;} #tabs .descrip .descrip_txt table th, #tabs .descrip .descrip_txt table td {padding:5px 10px; border-bottom:solid 1px #CCCCCC; } #tabs .descrip .descrip_txt table th.last, #tabs .descrip .descrip_txt table td.last {border-bottom:none;} #tabs .descrip .descrip_txt table th {text-align:left; font-weight:normal; color:#4977A3; background:#E2E2E2; border-right:solid 1px #CCCCCC;} #tabs .descrip .descrip_txt table td {background:#F3F3F3;} #tabs .descrip .descrip_txt table td.total {color:#333333;} #tabs .descrip .otros {background:#F3F3F3;} #tabs .descrip .otros h3 {color:#7A9BBA; margin:13px 0px 0px 0px; padding:0px 0px 0px 12px;} #tabs .descrip .descrip_img {float:right; border:none; height:190px; padding:0;} .tabs-nav {list-style: none; margin: 0; padding: 0px; border-bottom:solid 1px #FFFFFF; display:block; } .tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ display: block; clear: both; content: " ";} .tabs-nav li {height:30px; float:left; margin: 0px; min-width: 84px; text-align:center; display:list-item /* be nice to Opera */} .tabs-nav a, .tabs-nav a span {display: block; padding: 0 20px; background: url(tab.png) no-repeat;} .tabs-nav a {position: relative; top: 1px; z-index: 2; padding-left: 0; color: #27537a; font-size: 12px; font-weight: bold; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; /* required in IE 6 */} .tabs-nav .tabs-selected a {color: #000;} .tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {background-position: 100% -150px; outline: 0; /* prevent dotted border in Firefox */} .tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {background-position: 100% -100px;} .tabs-nav a span {width: 64px; /* IE 6 treats width as min-width */ min-width: 64px; height: 18px; /* IE 6 treats height as min-height */ min-height: 18px; padding-top: 6px; padding-right: 0;} *>.tabs-nav a span { /* hide from IE 6 */width: auto; height: auto;} .tabs-nav .tabs-selected a span {padding-top: 7px;} .tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {background-position: 0 -50px;} .tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {background-position: 0 0;} .tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ /*cursor: text;*/} .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... *//*cursor: pointer;*/} /*.tabs-nav .tabs-disabled {opacity: .4;}*/ .tabs-container {width:955px; height:auto; border: solid 1px #FFFFFF; padding:1px 0px 0px 0px; background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */} .tabs-loading em {padding: 0 0 0 20px; background: url(loading.gif) no-repeat 0 50%;} .anexo .modelo_thumb {width:170px; padding:0px 0px 0px 25px; float:left;} .anexo .modelo_thumb img {border:solid 1px #ccc;} .anexo .modelo_thumb p {text-align:center; margin-top:20px;} .anexo .modelo_thumb p a {color:#4977A3;} .intro_modelo {width:162px; padding:20px; float:left;} .intro_modelo p {margin-bottom:20px;} .intro_modelo img {float:right;} .intro_modelo .bt_128x26 {margin-top:45px;}