/*** RESET ***/
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, dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body{
line-height: 1;
font-family: "Trebuchet MS";
background: url("imagenes/background-header.png") repeat-x;
}
:focus{
outline: 0;
}
ol, ul {
list-style: none;
}
blockquote:before, blockquote:after, q:before, q:after{
content: "";
}
blockquote, q{
quotes: "" "";
}
input, textarea{
margin: 0;
padding: 0;
}

/* HTML */
.clear{
clear: both;
}
h2{
font-size: 24px;
color: #000;
line-height: 1.6em;
padding: 0;
margin: 0 0 15px 0;
border-bottom: 1px dotted #ccc;
text-shadow: 0 0 3px #999;
}
h2 span{
color: #376e8b;
}
h3{
font-size: 16px;
font-weight: bold;
font-weight: bold;
color: #b85b5a;
line-height: 1.6em;
}
h4{
font-size: 14px;
font-weight: bold;
color: #fff;
width: 255px;
padding: 5px;
background: #000;
}
h4.diseño{
color: #376E8B;
padding: 10px 0 0 0;
background: none;
}
h4.error{
color: #b85b5a;
font-weight: bold;
padding: 10px 0 5px 0;
background: none;
}
p{
font-size: 13px;
color: #565656;
line-height: 1.6em;
margin: 10px 0 10px 0;
}
strong{
font-weight: bold;
color: #2f2f2f;
}
a{
font-size: 13px;
color: #376e8b;
text-decoration: none;
}
a:hover{
color: #000;
}
ul{
font-size: 13px;
color: #565656;
}
.hr, .hr2{
background: url("imagenes/back_hr.png") no-repeat;
height: 9px;
margin: 30px 0 20px 0;
width: 680px;
}
* + html .hr{
margin: 0 0 20px 0;
}
.hr2{
margin: 10px 0 20px 0;
}
.hr3{
border-top: 1px dashed #ccc;
margin: 5px 0 5px 0;
}
* + html .hr3{
margin: 20px 0 5px 0;
}

/* TITLE */
#easyTooltip{
color: #fff;
font-size: 13px;
padding: 5px;
border: 1px solid #000;
background: #376e8b;
}

/* CONTENEDOR */
#contenedor {
width: 960px;
margin: 0 auto;
}

/* HEADER */
#header{
height: 93px;
}
h1 a {
float: left;
width: 459px;
height: 92px;
display: block;
margin: 0 66px 0 0;
background: url("imagenes/logo.png") no-repeat;
}
h1 a span{
display: none;
}

/* MENU */
.menu{
margin: 0;
padding: 0;
}
.menu li{
float: left;
margin: 10px 0 0 0;
padding: 0 10px;
background: url("imagenes/separador.png") no-repeat;
}
.menu a{
font-size: 17px;
color: #565656;
font-weight: bold;
line-height: 70px;
}
.menu a:hover{
color: #b85b5a;
}
.menu span{
font-size: 17px;
color: #b85b5a;
font-weight: bold;
line-height: 70px;
}

/* INFO */
#info{
background: #f9f9f2 url("imagenes/background-info.jpg") repeat-y;
}

/* IZQUIERDA */
#izquierda{
float: left;
width: 690px;
margin: 10px 0 0 0;
}
#izquierda a.link{
float: right;
margin: 0 10px 0 0;
padding: 5px 0 5px 20px;
background: url("imagenes/flecha-2.gif") no-repeat left;
}
#izquierda p.off{   /* portfolio2 */
color: #376e8b;
float: left;
margin: 0 10px 0 0;
padding: 5px 0 5px 20px;
background: url("imagenes/flecha-2.gif") no-repeat left;
}
#izquierda ul{
margin: -5px 0 0;
padding: 5px 0 20px 0;
letter-spacing: 0.04em;
line-height: 1.6em;
}
#izquierda ul.logos{ /* logotipos */
padding: 5px 0 0 5px;
}
#izquierda ul li{
list-style: none;
padding: 5px 0 0 20px;
}
#izquierda ul li.mover{  /* sitemap */
padding-left: 31px;
}
#izquierda ul.columna{
float: left;
width: 330px;
margin-bottom: 15px;
}
#izquierda img.sergio{  /* index */
float: left;
margin: 0 10px 10px 0;
}
#izquierda img .posicionamiento{  /* posicionamiento */
width: 660px;
height: 470px;
}
#izquierda img.centro{  /* psd y dominios */
margin: 0 0 0 70px;
}

/* DERECHA */
#derecha{
float: right;
width: 265px;
}
.info_derecha h3{
color: #777;
padding: 6px 10px;
margin: 10px 0 10px 12px;
background: #e5e5e5;
border-top: 1px solid #d5d5d5;
border-bottom: 1px solid #d5d5d5;
}

/* CATEGORIAS */
.categorias{
float: left;
width: 265px;
text-align: left;
}
.categorias h3{
font-size: 15px;
margin: 10px 0 10px 7px;
}
.categorias p{
margin: 10px 0 10px 20px;
}
.categorias ul{
margin: -5px 0 0;
padding: 0 0 5px 25px;
letter-spacing: 0.04em;
line-height: 1.6em;
}
.categorias ul li{
list-style: none;
padding: 5px 0 0 20px;
background: url("imagenes/bullet.png") no-repeat left;
}
.categorias p.tel{
font-size: 25px;
padding: 0 0 0 40px;
background: url("imagenes/telefono.png") no-repeat left;
}
.categorias .redes-sociales{
margin: 0 0 75px 25px;
}
.categorias .amigos ul{
float: left;
}
.categorias .amigos ul li{
background: none;
margin: 0 0 0 -22px;
}

/* CURRICULUM */
#izquierda h3.personal, #izquierda h3.estudios, #izquierda h3.software, #izquierda h3.programacion, #izquierda h3.cursos{
height: 40px;
text-transform: uppercase;
padding: 5px 0 0 60px;
background: url("imagenes/personal.jpg") no-repeat;
}
#izquierda h3.estudios{
background: url("imagenes/estudios.jpg") no-repeat;
}
#izquierda h3.software{
background: url("imagenes/software.jpg") no-repeat;
}
#izquierda h3.programacion{
background: url("imagenes/programacion.jpg") no-repeat;
}
#izquierda h3.cursos{
background: url("imagenes/cursos.jpg") no-repeat;
}

/* VIDEO */
.video{
width: 227px;
height: 172px;
margin: 0 0 0 25px;
}

/* PORTFOLIO */
.portfolio{
height: 120px;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #adadad;
}
.portfolio h3{
color: #b85b5a;
font-weight: bold;
}
.portfolio p{
margin-top: 5px;
}
#izquierda .portfolio a{
float: none;
}
.portfolio img{
width: 180px;
height: 120px;
float: left;
margin: 0 10px 10px 0;
border: 1px solid #ddd;
}

/* NAVIGATION */
.navigation{
font-size: 11px;
color: #666;
margin: 20px 0 20px 0;
}
.navigation a{
font-size: 11px;
color: #636363;
padding: 3px 6px;
background: #f9f9f9;
border: 1px solid #e6e6e6;
}
.navigation a:hover{
color: #fff;
background: #3b84d0;
}
.navigation span{
font-size: 11px;
color: #fff;
padding: 3px 6px;
background: #3b84d0;
border: 1px solid #e6e6e6;
}

/* SLIDER LOGOTIPOS */
#featured{
margin: 0 auto;
overflow: hidden;
text-align: center;
}
#featured-pics{
width: 373px;
height: 241px;
margin: 0 auto;
}
#featured-pics img{
width: 373px;
height: 241px;
}
#featured .featured-nav{
width: 373px;
margin: 0 auto;
position: relative;
}
#featured .featured-nav p a{
width: 44px;
height: 44px;
position: absolute;
top: 100px;
display: block;
text-indent: -9999px;
display: none;
}
#featured .featured-nav p a.prev{
background: url("imagenes/arrows.png") 0 -44px;
right: 380px;
}
#featured .featured-nav p a.next{
background: url("imagenes/arrows.png") 0 0;
left: 380px;
}
#featured .featured-nav p a.prev:hover{
background: url("imagenes/arrows.png") 0 -132px;
}
#featured .featured-nav p a.next:hover{
background: url("imagenes/arrows.png") 0 -88px;
}

/* PSD A HTML */
#navegadores{
margin: 0 0 20px 20px;
}
#navegadores ul{
float: left;
width: 250px;
}
#navegadores ul li{
font-family: Arial;
color: #757575;
text-indent: 20px;
margin-top: 10px;
}
#navegadores li.ie{
background: url("imagenes/ie.png") no-repeat;
}
#navegadores li.firefox{
background: url("imagenes/firefox.png") no-repeat;
}
#navegadores li.chrome{
background: url("imagenes/chrome.png") no-repeat;
}
#navegadores li.opera{
background: url("imagenes/opera.png") no-repeat;
}
#navegadores li.safari{
background: url("imagenes/safari.png") no-repeat;
}
#navegadores img{
width: 412px;
height: 199px;
margin-top: 15px;
}

/* DISEÑO GRÁFICO */
#izquierda img.triptico{
width: 295px;
height: 174px;
float: right;
}
#izquierda img.logotipos{
width: 338px;
height: 174px;
float: right;
margin-right: 60px;
}
#izquierda img.multimedia{
width: 181px;
height: 174px;
float: right;
}
/* CONTACTO */
#contacto form fieldset{
border: none;
}
#contacto label span{
color: #999;
font-style: italic;
}
#contacto a{
color: #aaa;
text-decoration: none;
}
#contacto a:hover{
color: #f7d400;
text-decoration: underline;
}
#contacto input, select, textarea{
padding: 7px;
width: 350px;
background: #f2f8fb;
border: 1px dashed #c8c7c7;
}
#contacto select{
width: 200px;
}
#contacto textarea{
width: 450px;
}
#contacto input:hover, textarea:hover{
background: #d2f0ff;
}
#contacto input:focus, textarea:focus{
background: #d2f0ff;
}
#contacto #enviar{
width: 100px;
color: #fff;
font-weight: bold;
cursor: pointer;
background: #777;
}
#contacto #enviar:hover{
background: #1c4b96;
}

/* PIE */
#pie{
height: 152px;
margin: 8px 0 0 0;
background: url("imagenes/background-pie.jpg") no-repeat;
}
#pie p{
font-family: Georgia;
font-size: 11px;
color: #575757;
text-align: center;
letter-spacing: 1px;
padding: 51px 10px 0 0;
}
* + html #pie p{
padding: 41px 10px 0 0;
}