/* Título: Hoja de Estilo para sitio Tarkus.mx Autor: Xavier Fajardo Año: 2010 Versión: 1.1 Contacto: xfajardo@taller2.net ----------------------------------------------------------------------------------------------------*/ /* Guía de Colores Gris de Fondo: #F1F1F1; Gris oscuro: #595959 Rojo Vínculos: #CD3B5B Gris Texto: #767676 ----------------------------------------------------------------------------------------------------*/ /* Estilos Generales ----------------------------------------------------------------------------------------------------*/ body {background-color: #F1F1F1; } .v_fondogris:link, .v_fondogris:visited, .v_fondogris {background-color:#262626; -webkit-gradient( linear, left top, left bottom, color-stop(0.22, rgb(92,92,92)), color-stop(0.58, rgb(38,38,38)), color-stop(0.79, rgb(38,38,38)) ) -moz-linear-gradient( center top, rgb(92,92,92) 22%, rgb(38,38,38) 58%, rgb(38,38,38) 79% ); background-image: url(../pics/link_arrow_icon.png); background-position: 90% center;background-repeat: no-repeat;color: #fff;padding: 12px 35px 12px 12px;-moz-border-radius: 12px; -webkit-border-radius: 12px; border: 1px solid #6E6E6E; font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; font-style: italic; cursor: pointer;} .v_fondogris:hover {background-color: #545454} .filete {border-bottom: 1px solid #AAAAAA;} .head2 {font-size: 48px; text-transform: uppercase;} .head3 {font-size: 36px; text-transform: uppercase; letter-spacing: 1px} acronym {border-bottom: 1px dashed #F1F1F1} /* Masthead ----------------------------------------------------------------------------------------------------*/ #masthead {position: relative; border-bottom: 8px solid #595959;} #masthead h1 {background-image:url(../pics/tarkus_logo.png); background-repeat: no-repeat; height: 59px; text-indent: -999999px; width: 230px; } #masthead h1 a { height: 59px; display: block; width: 230px; } #slogan {height: 55px; font-size: 36px; border-left: 1px solid #CFCFCF; padding-left: 30px; position: absolute; top: 6px; left:259px;} /*Navegación ----------------------------------------------------------------------------------------------------*/ #navdiv {;position: absolute; width: 400px; right: 25px; top:0; z-index: 100} #nav, #nav2 { list-style-type: none; } #nav {background-color: #fff; overflow: hidden; padding: 25px 15px; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border: 1px solid #EFEFEF; box-shadow: 0px 0px 5px #C6C6C6; } #nav li, #nav2 li {margin: 0; float: left;} #nav li {font-family: 'LeagueGothicRegular'; font-size: 24px; text-transform: uppercase; letter-spacing: 1px; border-right: 1px dashed #CFCFCF; padding: 10px } #nav li:last-child {border: none;} #nav li a:link, #nav li a:visited, #nav2 li a:link, #nav2 li a:visited {color: #767676;} #nav li a:hover, #nav2 li a:hover {color: #CD3B5B} #nav li a span { font: 13px/1.5 Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; padding-top: 47px; position: absolute; z-index: 1; top:35px; left:25px; display: none;} #nav li a:hover span {display: block;} #nav2 {position: absolute; top:-30px} #nav2 li {padding: 0 10px} li#ini, li#con, li#client_access {background-repeat: no-repeat; padding-left: 25px;} #ini {background-image:url(../pics/home_icon.png); } #con {background-image: url(../pics/nav-mail-icon.png)} #client_access {background-image:url(../pics/nav-folder-icon.png) } /* Contenido ----------------------------------------------------------------------------------------------------*/ #contenido {padding: 53px 60px; background-color: #fff; margin: 0; position: relative} #contenido h2 {font-size: 75px; text-transform: uppercase; border-right: 1px solid #C7C6C6; width: 28%; } #slider .navigation {font-family: 'LeagueGothicRegular'; font-size: 36px; text-transform: uppercase; letter-spacing: 1px; list-style-type: none; position: absolute; top:80px; left: 36%} #slider .navigation li {display: inline; margin: 0 5px 0 0} #slider .navigation li a:link, #slider .navigation li a:visited {color: #767676; border-bottom: 1px dashed #767676;} #slider .navigation li a:hover {color: #CD3B5B; border-color: #CD3B5B} #n-empres {background-image:url(../pics/empresa-mini-icon.png); } #n-vismis {background-image:url(../pics/visio-mini-icon.png);} #n-met {background-image:url(../pics/met-mini-icon.png);} #n-empres, #n-vismis, #n-met {background-repeat: no-repeat; padding-left: 45px; background-position: left center } .panel {padding-left: 300px; border-bottom: 1px dashed #C7C6C6; padding-bottom: 1.5em; margin-bottom: 1.5em} #empresa {background: url(../pics/text-empres-icon.png) no-repeat;} #vismis {background: url(../pics/text-vis-icon.png) no-repeat; min-height: 291px} #metodo {background: url(../pics/text-met-icon.png) no-repeat;} #metodo ol li {padding: .5em 0; border-bottom: 1px dotted #C7C6C6; color: #4AA098; margin-left: -1px; font-family: 'LeagueGothicRegular'; font-size: 24px; text-transform: uppercase} /* Pie de pagina ----------------------------------------------------------------------------------------------------*/ #piedepagina {background-color: #5C5C5C; /* fallback color */background-image: -moz-linear-gradient(100% 100% 90deg, #5C5C5C, #262626);background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#262626), to(#5C5C5C));color:#ffffff; overflow: hidden; padding: 35px 0 0 35px;border-top: 1px solid #fff; color: #E8E8E8} #map {background-image:url(../pics/mapa.png); background-position: center right; background-repeat: no-repeat; overflow: hidden; min-height: 253px; list-style-type: none; } #map li {width: 219px; margin: .72em 0; padding: 3px 0 5px; border-bottom: 1px solid #828282} #map .telf_icon, #map #mail_icon {background-position: left center; background-repeat: no-repeat; padding-left: 34px; width: 185px} #map .telf_icon {background-image:url(../pics/pnoe_icon.png);} #map #mail_icon {background-image:url(../pics/mail_icon.png);} #contacto input {width: 279px; padding: 10px; background-color: #F9F9F9; border: 1px solid #8E8E8E; -moz-border-radius: 10px; -webkit-border-radius:10px;} #contacto input[type="submit"] {background-color: #F1F1F1; background-image: url(../pics/link_arrow_icon.png); background-position: 90% center;background-repeat: no-repeat;padding: 9px 35px 9px 12px;-moz-border-radius: 12px; -webkit-border-radius: 12px; border: 1px solid #6E6E6E; font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; font-style: italic; cursor: pointer; width: 130px;} #contacto input:focus, #contacto textarea:focus {background-color: #FCE3E8} #contacto input:hover, #contacto textarea:hover {border: 1px solid #CD3B5B; } /* Servicios ----------------------------------------------------------------------------------------------------*/ .desc_servs {float: left; width: 30%; margin-right: 15px; min-height: 197px;} .desc_servs dt {font-family: 'LeagueGothicRegular'; font-size: 24px; text-transform: uppercase; color: #4AA098; padding: 5px 5px 0} .desc_servs dd {border-bottom: 1px solid #c9c9c9; margin-bottom: 2em; padding: 0 5px 15px 67px; min-height: 98px; background-image:url(../pics/serv_list.png); background-repeat: no-repeat; } #serv_lista {list-style-type: none; margin-bottom: 3.5em} #serv_lista li {border-bottom-color: #c9c9c9; margin: 0; padding-left: 240px; border-bottom: 1px dashed #c9c9c9; padding-bottom: .5em; margin-bottom: .5em} #serv_lista li h3 {font-size: 42px;} #serv_lista li p {font-size: 14px;} #serv_proc, #serv_apps, #serv_opt, #serv_capt, #serv_seg {background-position: 20px center; background-repeat: no-repeat; } #serv_proc {background-image: url(../pics/serv_proc_icon.png); } #serv_opt {background-image: url(../pics/serv_opt_icon.png); } #serv_apps {background-image: url(../pics/serv_apps.png); } #serv_capt {background-image: url(../pics/serv_capt.png); } #serv_seg {background-image: url(../pics/serv_seg.png); } /* Clientes ----------------------------------------------------------------------------------------------------*/ #slider .n-navigation {list-style-type: none; width: 520px; position: absolute; top: 90px; left:350px} #slider .n-navigation li {display: inline; margin: 10px 5px; border-left: 1px solid #CD3B5B; padding-left: 10px; } #slider .n-navigation li:first-child {border-left: none; margin-left: 0; padding-left: 0 } #slider .n-panel {border-bottom: 1px dashed #767676; margin-bottom: .5em; overflow: hidden; } .caso {float: left; width: 60%; margin-right: 10%} .testimonio {float: left; width: 30%} .testimonio h5 {font-family: Georgia, serif; font-style: italic; font-size: 12px;}