/*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*----------------------------------------- TOMADATO ------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Reset Styles -----------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:transparent;} ol, ul {list-style:none;} h1, h2, h3, h4, h5, h6, li {line-height:100%;} blockquote, q {quotes:none;} table {border-collapse:collapse; border-spacing:0;} input, textarea {font-family:inherit; font-size:1em;} /*- Fin de Reset Styles ----------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Estilos generales ------------------------------------------------------*/ body {font:76% Arial, Helvetica, sans-serif; background:#FFF;} /*- Links -*/ a {text-decoration:none;} a:hover {text-decoration:underline;} /*- Labels accesibles -*/ .accesible {width:1px; height:1px; overflow:hidden; position:absolute; top:0; left:-9999px;} /*- Ancho para la resolucion -*/ .wrap, #intro, #central, #header {width:938px; margin:0 auto;} /*- Float clears -*/ #header, #central, .wrap, #brands ul, #footerMenu ul, .sidebarBox ul, .sidebarBox p, #box-caseStudies a, .projectList, .relatedClients {overflow:hidden;} /*- Carga del sprite -*/ #logo a, .menu a, .search button, #content .title, .actionLink, .serviceBox h4 a, .sidebarBox h4, #box-seguimiento a, #brands a, #location span, #developedBy a {display:block; font-size:1px; text-indent:-9999em; background:url(../images/sprite.png) no-repeat 0 0;} /*- Links de acciones -*/ .actionLink {height:12px; cursor:pointer;} .action-descargar {width:63px; background-position:-1px -156px;} .action-enviar {width:32px; background-position:-257px -75px;} .action-casoDeEstudio {width:86px; background-position:-110px -156px;} .action-verTodos {width:60px; background-position:-197px -156px;} .action-verMas {width:52px; background-position:-258px -156px;} .action-volver {width:47px; background-position:-311px -156px;} .action-requisitos {width:62px; background-position:-1px -169px;} .action-descargarDocumentacion {width:133px; background-position:-64px -169px;} .action-verCaso {width:38px; background-position:-198px -169px;} /*- Fin de Estilos generales -----------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Header -----------------------------------------------------------------*/ #header {background:#2d54a6; position:relative;} #logo, #subMenu {background:#FFF;} .menu {float:right;} .menu li {float:left; margin-right:9px;} /*---------------------------*/ /* LOGO */ /*---------------------------*/ #logo {position:absolute; top:0; left:1px;} #logo h1 {padding:9px 0 0 44px;} #logo a {width:127px; height:64px; background-position:-1px -1px;} /*---------------------------*/ /* MAIN MENU */ /*---------------------------*/ #mainMenu {clear:right; width:337px; padding:61px 0 55px 602px; background:url(../images/bgs/header.png) no-repeat 0 100%;} /*- Links -*/ #mainMenu a {height:12px; border-bottom:2px solid #FFF;} #mainMenu a:hover, #mainMenu .current a {border-color:#C30100;} #mMenu-inicio a {width:31px; background-position:-1px -75px;} /*INICIO*/ #mMenu-servicios a {width:53px; background-position:-33px -75px;} /*SERVICIOS*/ #mMenu-clientes a {width:49px; background-position:-87px -75px;} /*CLIENTES*/ #mMenu-cobertura a {width:62px; background-position:-137px -75px;} /*COBERTURA*/ #mMenu-contacto a {width:55px; background-position:-200px -75px;} /*CONTACTO*/ /*- Fin de Header ----------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Seccion central --------------------------------------------------------*/ #central {margin-top:20px; background:url(../images/bgs/central.jpg) repeat-y 0 0;} /*---------------------------*/ /* SIDEBAR PRINCIPAL */ /*---------------------------*/ #mainSidebar {float:left; width:176px; padding:0 10px 0 20px;} .sideList {text-transform:uppercase;} .sideList li {padding-bottom:4px;} .sideList a {display:block; padding:10px; background:#D9D9D9 url(../images/bgs/sideList.jpg) no-repeat 0 0;} .sideList a:hover {background-color:#C9C9C9; background-position:-177px 0; text-decoration:none;} .sideList em {font-style:normal; font-size:0.9em; color:#777;} .sideList strong {display:block; padding-top:2px; color:#666;} .sideList img {display:block; margin:0 auto;} /*---------------------------*/ /* CONTENIDO */ /*---------------------------*/ #content {float:left; width:480px; padding:5px 20px 20px; position:relative;} #content .title {height:38px; margin-bottom:20px; background:url(../images/titles.gif) no-repeat 0 0;} #content .subTitle {color:#BE281B; text-transform:uppercase; padding-bottom:2px;} #content p {line-height:140%; color:#333; text-align:justify; padding-bottom:10px;} /*- Informacion de la seccion (Donde estoy?) -*/ .sectionInfo {padding:0 50px 20px 0 !important;} .sectionInfo span {display:block; font-weight:bold; color:#666;} .sectionInfo strong {font-size:1.2em;} .sectionInfo strong em {font-style:normal;} /*- Proyectos -*/ .projectList {padding-top:10px;} .projectList li {float:left; margin:0 6px 6px 0; padding:5px; width:224px; background:#ECECEC;} .projectList .projectTitle, .projectPreview {border:1px solid #CBCBCB;} /*- Titulo -*/ .projectList .projectTitle {display:block; font-weight:normal; font-size:1.1em; text-transform:uppercase; color:#5B5A5B; padding:7px 10px; background:#D5CFD1 url(../images/bgs/projectPreview.jpg) no-repeat 0 0;} .projectList .projectTitle span {padding-left:5px; border-left:5px solid #C30100;} /*- Scroller -*/ .projectPreview {border-top:0; width:222px; height:115px; overflow:auto; background:#FFF;} .projectPreview img {display:block; width:222px; height:auto;} /*---------------------------*/ /* SIDEBAR SECUNDARIA */ /*---------------------------*/ #auxSidebar {float:right; width:210px; padding-top:10px; background:url(../images/bgs/auxSidebar.jpg) no-repeat 0 0;} #auxSidebar .search {margin:0 0 20px 34px; padding:0;} #auxSidebar .search button {margin:0;} /*- Fin de Seccion central -------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Cajas de los sidebars --------------------------------------------------*/ /*- Default -*/ .sidebarBox {font-size:0.9em; color:#333; padding-left:34px; margin-bottom:10px; clear:both;} .sidebarBox h4 {width:176px; height:24px; margin-bottom:10px;} .sidebarBox li {line-height:120%; text-align:justify; padding:0 1px; margin-bottom:10px; clear:both;} .sidebarBox li a {color:#333;} .sidebarBox li strong {display:block; font-weight:normal; color:#BE281B;} /*- Si es un formulario de contacto -*/ .contactBox {} .contactBox p {clear:both; padding:0 2px 10px;} .contactBox form p {padding-bottom:0;} .contactBox label, #box-contacto input {float:left; margin-bottom:4px;} .contactBox label {width:60px; padding-top:4px;} .contactBox input {width:106px; padding:3px; background:#F2F2F2; border:0;} .contactBox span {color:#BE281B;} .contactBox .action-enviar {clear:both; float:right; margin-top:3px;} /*- CONTACTO -*/ #box-contacto {} #box-contacto h4 {background-position:-172px 0px;} /*- Fin de Cajas de los sidebars -------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Si la pagina es HOME ---------------------------------------------------*/ body#page-home {} #page-home #content {width:650px; padding:9px 20px 20px 55px;} #page-home #content .title {width:405px; height:25px;} /*- Caja de servicios -*/ .serviceBox {float:left; width:181px; padding-bottom:30px; margin:0 25px 25px 0; color:#666; background:url(../images/bgs/boxShadow.jpg) no-repeat center bottom;} .serviceBox h4 a {height:35px;} .serviceBox img {display:block; margin:10px 0; border:1px solid #DDD;} .serviceBox p {padding:0 !important; text-align:left !important;} .serviceBox li {font-size:0.6em; padding-top:8px; list-style:inside disc;} .serviceBox li a {font-size:1.6em; line-height:90%; color:#666; position:relative; top:1px;} .serviceBox li a:hover {color:#333;} /*- Fin de Si la pagina es HOME --------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Si la pagina es TOMADATO INICIO ---------------------------------------------*/ body#page-inicio {} #page-inicio #content .title {width:408px; background-position:0 -123px;} #page-inicio #content .subTitle, #page-inicio .sideList strong, #page-inicio #box-contacto span, #page-inicio #box-descargas strong, #page-inicio #box-descargas a:hover {color:#C30100;} /*- Fin de Si la pagina es TOMADATO --------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Si la pagina es CONTACTO ---------------------------------------------*/ body#page-contacto {} #page-contacto #content .title {width:98px; background-position:0 -153px;} #page-contacto #content .subTitle, #page-contacto .sideList strong, #page-contacto #box-contacto span, #page-contacto #box-descargas strong, #page-contacto #box-descargas a:hover {color:#C30100;} /*- Fin de Si la pagina es CONTACTO --------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Si la pagina es NOTICIAS ----------------------------------------*/ body#page-noticias {} #page-noticias #content {width:685px;} #page-noticias #content .title {width:84px; background-position:0 -120px; height:20px;} #page-noticias #content .news {} #page-noticias #content .news li {padding-bottom:15px;} #page-noticias #content .news h4 {font-weight:normal;} #page-noticias #content .news h4 strong {display:block; color:#BE281B; text-transform:uppercase; padding:3px 0;} #page-noticias #content .news h4 em {color:#666; font-style:normal;} #page-noticias #content .news p {padding-bottom:5px;} /*- Fin de Si la pagina es NOTICIAS ---------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Si la pagina es Clientes -----------------------------------------------*/ body#page-clientes {} #page-clientes #content .title {width:85px; height:21px; background-position:0 -78px;} #page-clientes #content .action-volver {position:absolute; top:83px; right:20px;} #page-clientes #content .subTitle, #page-clientes .sideList strong, #page-clientes #box-contacto span, #page-clientes #box-descargas strong, #page-clientes #box-descargas a:hover {color:#C30100;} /*- Segun el caso aplicar clase a #central -*/ #central.caso-mpowerment .sectionInfo strong em, #central.caso-mpowerment #box-descargas strong, #central.caso-mpowerment .relatedClients strong {color:#841979;} #central.caso-mpowerment .projectList strong span, #central.caso-mpowerment .relatedClients .relatedInfo {border-color:#7F1577;} #central.caso-tecnologia .sectionInfo strong em, #central.caso-tecnologia #box-descargas strong, #central.caso-tecnologia .relatedClients strong {color:#6A8F01;} #central.caso-tecnologia .projectList strong span, #central.caso-tecnologia .relatedClients .relatedInfo {border-color:#80AA18;} #central.caso-incubus .sectionInfo strong em, #central.caso-incubus #box-descargas strong, #central.caso-incubus .relatedClients strong {color:#D8AE02;} #central.caso-incubus .projectList strong span, #central.caso-incubus .relatedClients .relatedInfo {border-color:#EFBF00;} /*- Clientes relacionados -*/ .relatedClients {} .relatedClients li {clear:both; padding:10px 10px 0; margin:0; background:#FFF;} .relatedClients img {float:left; width:78px; height:40px; margin-right:5px; border:1px solid #C2C2C2;} .relatedClients .relatedInfo {float:left; padding-left:5px; border-left:1px solid #C2C2C2;} .relatedClients span {display:block; padding:2px 0; color:#444;} .relatedClients .actionLink {float:left;} /*- Lista de clientes -*/ .clientList {} .clientList li {padding:12px 80px 12px 2px; border-bottom:1px solid #ECECEC; position:relative;} .clientList strong {display:block; padding-bottom:4px;} .clientList span {font-weight:bold; text-transform:uppercase;} .clientList .actionLink {position:absolute; top:21px; right:3px;} .clientItem-mpowerment span {color:#841979;} .clientItem-tecnologia span {color:#6A8F01;} .clientItem-mbusiness span {color:#097B9D;} .clientItem-incubus span {color:#D8AE02;} /*- Fin de Si la pagina es Clientes ----------------------------------------*/ /*- Si la pagina es CASOS ---------------------------------------------*/ body#page-casos {} #page-casos #content .title {width:386px; background-position:0 -395px;} #page-casos #content .subTitle, #page-casos .sideList strong, #page-casos #box-contacto span, #page-casos #box-descargas strong, #page-casos #box-descargas a:hover {color:#C30100;} /*- Fin de Si la pagina es CASOS --------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Footer -----------------------------------------------------------------*/ #footer {clear:both; padding-top:35px; background:#333 no-repeat center top;} /*---------------------------*/ /* INFORMACION */ /*---------------------------*/ #bottomInfo {padding-top:20px; background:#000;} #bottomInfo .wrap {position:relative;} /*- Lugar, Telefono, Email -*/ #location {float:left; width:299px; margin-left:28px} #location span {width:101px; height:39px; margin-bottom:10px; background-position:-172px -25px;} #location p {color:#CFCFCF;} #location a {color:#CFCFCF;} /*- Navegacion inferior -*/ #footerMenu {float:left; width:403px ;padding-bottom:30px;} #footerMenu li {float:left; min-height:100px; padding:0 10px; border-right:1px solid #333;} #footerMenu li li {float:none; min-height:0; padding:5px 0 0 0; border:0;} #footerMenu a {color:#7A7A7A;} #footerMenu a:hover {text-decoration:underline;} #footerMenu strong a {color:#CFCFCF;} #footerMenu .lastItem {border:0;} /*- Khuint -*/ #developedBy {clear:both; position:absolute; bottom:35px; right:0;} #developedBy a {width:39px; height:10px; background-position:-74px -322px; z-index:1;} /*- Fin de Footer ----------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-------------------------------------- FIN DE TOMADATO --------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/