/* CSS 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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none;}

:focus{outline:0;}

ins{text-decoration:none;}
del{text-decoration:line-through;}

table{border-collapse:collapse; border-spacing:0;}

/* CSS Genérico */
html{background: url(../img/bg_repeat.jpg) repeat-y; background-position:center;}
body{margin:0px; background: url(../img/bg_bot.jpg) no-repeat center bottom; font-family:Verdana; font-size:11px; color:#333;}
#fondo_sup{width:100%; height:190px; background: #fff url(../img/bg_sup.jpg) no-repeat center top; margin-bottom:-190px;}

.italicas{font-style:italic !important;}
.derecha{text-align:right !important;}

a{text-decoration:none; color:#0C82D6;}
a:hover{text-decoration:underline;}

#msg_ok{width:80%; padding:5px; text-align:center; margin:10px auto; color:#59BF47; border:1px solid #76CF67; background-color:#F1FFEF;}

#contenedor{width:948px; margin:0px auto;}
#titular img{float:left; height:124px;}
#titular #last_tweet{float:right; margin-top:15px; width:385px; margin-right:84px; overflow:hidden; line-height:12px; height:14px;}
#titular #last_tweet a{color:#000; text-decoration:none;}

#pie{height:220px; width:100%; overflow:hidden;}

ul#menu{width:500px; margin:-21px auto 30px auto;}
ul#menu li{display:inline; list-style:none; margin:0px 36px;}
ul#menu a{color:#BFBFBF;}

#centro_seccion #col_izq{width:650px; float:left; margin-right:5px; margin-bottom:20px;}
#centro_seccion #col_der{width:280px; float:left; padding-left:10px; background: url(../img/sidebar_bg.jpg) no-repeat left top;}
#centro_seccion #bloque_inf{width:100%; float:left; margin-top:-10px; padding-bottom:20px;}

#centro_seccion h2{margin:20px 10px 10px 10px; color:#333333; border-bottom:1px dashed #999; font-size:18px;}

/* Sobre mi */
#col_izq h4{color:#6B95BF; padding-bottom:0px; margin:20px 0px 0px 20px; font-size:14px;}
#col_izq ul{border-bottom:1px solid #B5CADF; border-top:1px solid #B5CADF; background-color:#EFF7FF; margin:0px 20px; padding:5px 30px; color:#333;}
#col_izq ul li{margin:5px 0px; list-style-image:url(../img/flecha.gif); line-height:15px;}
#col_izq ol{border-bottom:1px solid #B5CADF; border-top:1px solid #B5CADF; background-color:#EFF7FF; margin:10px 20px; padding:5px 30px; color:#333;}
#col_izq ol li{margin:5px 0px;}
#col_izq ul#datos_personales li{list-style:none; list-style-image:none;}

#col_izq p{margin:10px 15px; text-align:justify; line-height:16px; font-size:11px;}

#ebrochure_nopie{width:240px; height:75px; padding:42px 40px 5px 40px; margin:20px auto; overflow:hidden; background:url(../img/ebrochure_bg.jpg) no-repeat left top;}
#ebrochure_nopie p{margin:0px; text-align:left; line-height:normal; color:#FFFFFF;}

#centro_seccion #bloque_inf #galeria{margin-left:10px; margin-bottom:5px;}
#centro_seccion #bloque_inf #galeria img{margin-left:4px;}
#link_galeria{float:right; font-size:12px; margin-right:10px;}

#col_der .retrato{margin-top:1100px; margin-left:-10px;}

/* Habilidades */
#habilidades{width:270px; height:500px; float:right; padding-left:7px; text-align:justify; background:url(../img/hab_bg.jpg) no-repeat center 65px;}
#habilidades #titulo{margin-bottom:10px;}
.habilidad{margin:20px auto 28px auto; padding-left:8px;}
.habilidad h3{margin:0px; padding:0px; font-size:14px; font-weight:bold; color:#333;}
.habilidad .grado{padding-left:10px; color:#666;}
.habilidad .grado img{position:relative; top:3px; margin-right:3px;}
.habilidad img.tick{float:left; margin-right:10px;}

/* Servicios */
#servicios{width:270px; height:500px; float:right; padding-left:7px; text-align:justify; margin-bottom:20px;}
#servicios #titulo{margin-bottom:10px;}

#servicios ul{margin:0; padding:0; font-size:11px;}
#servicios ul li{list-style:none; border-bottom:1px solid #CFCFCF; background:url(../img/flechita.jpg) no-repeat left 12px; padding-left:10px;}

#servicios ul li a:link, #servicios ul li a:visited{padding:11px 0px 7px 0px; color:#333; width:252px; display:block; padding-left:10px;}
#servicios ul li a:hover, #servicios ul li a:active{background:url(../img/menu_servicios_bg.jpg) repeat-y;}

.invito_contactarme{padding:5px; border:1px dashed #CCCCCC; padding-left:45px; background:#EFEFEF url(../img/contacto_servicios_bg.jpg) no-repeat 5px center; margin-bottom:25px !important;}

/* Portfolio */
.portfolio_item{width:900px; margin:10px auto 30px auto; padding:0px 20px 60px 20px; background:url(../img/portfolio_item_bg.jpg) no-repeat bottom center;}
.portfolio_item .izq{width:590px; margin-right:10px; float:left;}
.portfolio_item .der{width:300px; float:right;}

.portfolio_item h3{color:#4b73b1; padding:0px; margin:0px; font-size:20px; font-weight:normal; margin-left:15px;}
.portfolio_item p{margin:10px 0px 10px 15px;}
.portfolio_item .tecnologias{text-align:right;}
.portfolio_item .tecnologias span{position:relative; top:-13px;}

.portfolio_item .img_principal{width:550px; height:233px; overflow:hidden; padding:13px; background:url(../img/portfolio_big_bg.jpg) no-repeat top left;}
.portfolio_item .img_secundaria{width:270px; height:150px; overflow:hidden; padding:13px; background:url(../img/portfolio_small_bg.jpg) no-repeat top left;}

/* Contacto */
.seccion_contacto{background:url(../img/ilustracion_contacto.jpg) no-repeat bottom left; margin-bottom:5px;}

#contacto{width:270px; margin:0px auto 20px auto;}
#contacto form{margin-left:40px;}
#contacto form label{color:#666; display:block; padding:8px 0px 3px 0px;}
#contacto form input, #contacto form select, #contacto form textarea{color:#437AA7; border:1px solid #CCCCCC; background-color:#F8F8F8; padding:2px; font-family:"Trebuchet MS", Verdana; font-size:11px;}
#contacto form input#enviar{border:none; float:right; margin-top:10px; margin-right:-80px !important; padding:0px !important;}

#otros_contacto{width:270px; float:right; padding-left:7px; text-align:justify; height:500px; margin-bottom:20px;}
#otros_contacto #titulo{margin-bottom:20px;}

span#email, span#msn, span#twitter, span#skype, span#telefono, span#movil, span#direccion {display:block; padding-left:22px; line-height:25px;}
span#email{background:url(../img/icon_email.jpg) no-repeat center left;}
span#msn{background:url(../img/icon_msn.jpg) no-repeat center left;}
span#twitter{background:url(../img/icon_twitter.jpg) no-repeat center left;}
span#skype{background:url(../img/icon_skype.jpg) no-repeat center left;}
span#telefono{background:url(../img/icon_telefono.jpg) no-repeat center left;}
span#movil{background:url(../img/icon_movil.jpg) no-repeat center left;}
span#direccion{background:url(../img/icon_direccion.jpg) no-repeat left 3px;}

/* Pie */
#contacto_rapido{width:300px; height:185px; float:left; margin:30px 0px 0px 235px; overflow:hidden;}
#descargar_ebrochure{width:240px; height:80px; float:right; margin:85px 55px 0px 0px; overflow:hidden;}

#contacto_rapido form, #descargar_ebrochure form{margin-left:0px;}
#contacto_rapido form label{color:#666; display:block; padding:0; margin:5px 0px -1px 0px;}
#descargar_ebrochure form label{color:#FFF; display:block; padding:0; margin:2px; font-size:10px;}
#contacto_rapido form input, #contacto_rapido form textarea, #descargar_ebrochure form input{color:#29415F; border:1px solid #CCCCCC; background-color:#F8F8F8; padding:2px;}
#contacto_rapido form textarea{height:50px;}
#enviar_rapido{border:0px !important; float:right; margin-top:8px; background:none !important;}
.descargar{border:0px !important; float:right; margin:4px; background:none !important;}

#contacto_rapido .verif{display:none;}

/* CSS HintBox */
.hintanchor{font-weight: bold; color: navy; margin: 3px 0px;}

#hintbox{position:absolute; top:0px; background:url(../img/hover_bg.png) no-repeat 0px 0px; width:156px;  font:normal 11px Verdana; line-height:15px; z-index:100; visibility: hidden; padding:5px 9px; text-align:center;}
#hintbox strong{float:left;}