/* animations */
@-webkit-keyframes pulse { 0% {opacity: .50; -webkit-transform: scale(0.75);} 50% { opacity: 0.75; -webkit-transform: scale(1.25);} 100% { opacity: 1.0; -webkit-transform: scale(1.0);}}
@-webkit-keyframes scale { 0% {-webkit-transform: scale(1.10);} 50% {-webkit-transform: scale(1.20);} 100% {-webkit-transform: scale(1.0);}}
@-webkit-keyframes rotate { 0% { -webkit-transform: scale(1.1); } 100% {-webkit-transform: scale(1.0); -webkit-transform: rotate(-3deg);}}

/* general rules */
html{background:#fff url(../images/bg_body.jpg) left -100px repeat-x}
#wrapper header{float:left; width:100%; height:119px;}
#logo {float:left; margin:25px 0 0 0; width:100%; height:44px;}
#index #logo { background:url(../images/bg_logo.png) no-repeat -304px 0; height:44px; display:block; text-indent:-9999px; }
#logo a {height:44px; background:url(../images/bg_logo.png) no-repeat -304px 0; text-indent:-9999px; display:block; width:302px; position:relative}
#logo a:hover { background-position:0 0}
#wrapper{width:980px; margin:0 auto; position:relative}
#content{float:left; width:980px; -moz-border-radius:12px; -webkit-border-radius:12px; color:#666; padding:0 5px; margin:0}
#index #content{padding:0 0 20px 0; -moz-box-shadow:none;}

/* top nav */
#wrapper #topNav{float:right; color:#FFF; margin:10px 0 0 0}
#wrapper #topNav li {float:left; list-style-type:none; margin:0 15px 0 0}
#wrapper .faux_anim li > a { position:relative; top:0;}
#wrapper #topNav li a{color:#BFECFF; text-decoration:none; font-size:16px; padding:4px 8px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; text-shadow:1px 1px 5px #054b92; display:block;}
#wrapper #topNav li a:hover {color:#3d3d3d; text-shadow:1px 1px 2px #cdcdcd; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.13,rgb(210,210,210)), color-stop(1,rgb(245,245,245))); background:-moz-linear-gradient( center bottom, rgb(210,210,210) 13%, rgb(245,245,245) 100%);  -webkit-animation-name: scale; -webkit-animation-duration: 1s; -webkit-animation-direction: alternate;}
#wrapper #topNav li a:active {color:#fff; text-shadow:none; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.13,rgb(1,48,108)), color-stop(1,rgb(0,120,230))); background:-moz-linear-gradient( center bottom, rgb(1,48,108) 13%, rgb(0,120,230) 100%); -webkit-transform: scale(1.05);}
#my-work #wrapper #topNav li .navMyWork, 
#contact #wrapper #topNav li .navContactMe,
#index #wrapper #topNav li .navHome {color:#fff; -moz-text-shadow:0 0 50px #00d2ff,0px 0px 45px #00ffe4,0px 0px 40px #b7f1ff,0px 0px 35px #e9fbff; -webkit-text-shadow:0 0 50px #00d2ff,0px 0px 45px #00ffe4,0px 0px 40px #b7f1ff,0px 0px 35px #e9fbff; text-shadow:0 0 50px #00d2ff,0px 0px 45px #00ffe4,0px 0px 40px #b7f1ff,0px 0px 35px #e9fbff; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.13,rgb(1,48,108)), color-stop(1,rgb(0,120,230))); background:-moz-linear-gradient( center bottom, rgb(1,48,108) 13%, rgb(0,120,230) 100%)}
/* fallback content */
html.no-cssgradients #wrapper #topNav li a:hover { background:url(../images/ie_nav.jpg) bottom left repeat}
html.no-cssgradients #my-work #wrapper #topNav li .navMyWork, 
html.no-cssgradients #contact #wrapper #topNav li .navContactMe,
html.no-cssgradients #index #wrapper #topNav li .navHome { background:url(../images/ie_nav.jpg) top left repeat}

/* content */
#index #wrapper #content #cv > h2:first-child { display:none}
#content p { line-height:150%}
.clearb{clear:both}
.hidden { display:none;}
a { cursor:pointer}
#wrapper #content h2, 
#wrapper #content h3, 
#wrapper #content h4, 
#wrapper #content h5, 
#wrapper #content h6, 
#wrapper #topNav li a,
#hcard-Leonardo-Picado .org,
#gallery #thumbs li a span {font-family:'Droid Sans',Verdana,Arial,Helvetica,sans-serif}
#wrapper #content h2{color:#F76A1D; font-size:22px; font-weight:normal;}
#my-work #wrapper #content h2{ margin-bottom:0;}
#wrapper #content h3{color:#01306C; font-size:18px; font-weight:bold}
.webkit #wrapper #content h3,
.webkit #wrapper #content h5 {font-weight:normal}
#wrapper #content h4{color:#666; font-size:16px; text-align:left; font-weight:normal}
#wrapper #content aside > h3, 
#wrapper #content aside > h4{background:#fff; -moz-border-radius:12px; -webkit-border-radius:12px; padding:10px; margin-bottom:35px; position:relative; -moz-box-shadow:0 0 5px #888; -webkit-box-shadow:0 0 5px #888; box-shadow:0 0 5px #888; filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=120, Strength=3)}
#wrapper #content aside .arrow{background:url(../images/bg_bubble.png) top right no-repeat; position:absolute; bottom:-45px; left:-120px; display:block; height:46px; width:211px}
#wrapper #content aside > h3{margin-right:10px}
#wrapper #content aside > h4{margin-left:20px; background:#eee}
html.no-borderradius #wrapper #content aside > h4 { }
#wrapper #content aside > h3 .arrow{background-position:top right; left:-170px}
#wrapper #content aside > h4 .arrow{background-position:bottom left; left:230px; bottom:-28px}
.ie7 #wrapper #content aside > h4 .arrow{bottom:-27px}
#wrapper #content h5{font-size:14px; color:#000}
#wrapper #content h6{font-size:14px; font-weight:normal; text-decoration:underline}
#wrapper #content a{text-decoration:underline; color:#2db1e8;}
#wrapper #content a:hover, 
#wrapper #content a:visited:hover{color:#069}

#index #wrapper #content #cv{float:left; clear:left; width:640px; padding:0; background:url(../images/bg_cv.gif) no-repeat 750px 113px}
#index #wrapper #content #cv ul li ul{margin-top:-5px}
#index #wrapper #content aside{float:right; clear:none; width:300px; padding:15px 10px 0 10px; background:#ccc url(../images/bg_aside.png) top left repeat-x; border:1px solid #fff; border-width:0; -webkit-border-radius:0 0 8px 8px; -moz-border-radius:0 0 8px 8px; border-radius:0 0 8px 8px; position:relative}
aside,
header { margin:0;}
#index #wrapper #content aside ul{margin-left:0}
#index #wrapper #content aside #download li{list-style-type:none; padding:2px 4px; margin-bottom:5px; overflow:hidden; font-size:92%; line-height:120%; padding-top:10px; clear:none; height:80px; -moz-border-radius:4px; -webkit-border-radius:4px; float:left; width:47%; height:50px}
#index #wrapper #content aside #download li ul li{border:none; font-size:85%; text-transform:uppercase; margin-bottom:0px; margin-top:0px; float:left; font-weight:bold; margin-left:5px}
#index #wrapper #content aside #download li ul{margin-top:0px}
#index #wrapper #content aside #download li img{padding-bottom:10px; margin-right:10px}
#index #wrapper #content aside #download li:hover{border-top-width:1px; border-left-width:1px; border-top-color:#999; border-left-color:#999; border-right-width:1px; border-bottom-width:1px; border-right-color:#999; border-bottom-color:#999; background:url("../images/bg_body.jpg") -1180px 0 no-repeat; color:#fff}
#index #wrapper #content aside ul li{list-style-type:none;  margin-left:0}
#index #wrapper #content aside ul li a{border:none}
#index #wrapper #content aside #fb{background:#fff}
#index #wrapper #content aside #fb, 
#index #wrapper #content aside #tw{margin:20px 0}
#index #wrapper #content aside #tw .twtr-ft a{float:right}
#index #wrapper #content aside #tw .twtr-join-conv{display:none}
#index #wrapper #content li{line-height:150%; margin:5px 0 5px 10px; list-style-type:square}
#index #wrapper #content ul li ul li{margin:10px 0 0 10px}
.twtr-ft { background:#F0F0F0; display:none!important}
.ie7 .twtr-widget,
.ie8 .twtr-widget { background:#fff;}


#wrapper form strong{color:#F60}
#wrapper form{margin-bottom:30px; float:left; width:550px}
#wrapper form fieldset{float:left; overflow:hidden; padding:0 10px; margin:0 5px}
#wrapper form fieldset > label,
#wrapper form fieldset #recaptcha_widget_div {display:block; clear:both; margin:10px 0; position:relative;}
#wrapper form label span { display:block; clear:both; padding-bottom:5px;}
#wrapper form label input,
#wrapper form textarea {margin-left:8px;}
.recaptchatable #recaptcha_response_field,
#wrapper form label input,
#wrapper form textarea { border:1px solid #aaa!important; color:#999999; width:302px; padding:2px 5px; font-style:italic; background:#FAFAFA; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.ie7 #wrapper form label input,
.ie7 #wrapper form textarea { clear:both; display:block}
#wrapper form textarea{height:100px;}
.recaptchatable #recaptcha_response_field:hover,
#wrapper form label input:hover,
#wrapper form textarea:hover { background:#fff; border:1px solid #0066CC!important}
#wrapper form label input:focus,
#wrapper form textarea:focus,
.recaptchatable #recaptcha_response_field:focus {border:1px solid #0066CC; -moz-box-shadow:0 0 12px #c0d9f3,0px 0px 6px #80b3e6,0px 0px 3px #0066CC; -webkit-box-shadow:0 0 12px #c0d9f3,0px 0px 6px #80b3e6,0px 0px 3px #0066CC; box-shadow:0 0 12px #c0d9f3,0px 0px 6px #80b3e6,0px 0px 3px #0066CC; outline:none; background:#fff}
#wrapper form #submitButton{clear:both; float:left; margin:5px 0 0 15px; display:inline; font-weight:bold}
#wrapper form #submitButton input {float:right; color:white; padding:7px; width:85px; color:#fff; font-size:92%; font-weight:bold; cursor:pointer; margin:0 auto; border:none; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:-moz-linear-gradient(center bottom , #01306C 13%, #0078E6 100%); background:-webkit-gradient( linear, left bottom, left top, color-stop(0.13,rgb(1,48,108)), color-stop(1,rgb(0,120,230))); font-family:Arial, Helvetica, sans-serif }
#wrapper form label.error { padding:2px 5px; font-size:100%; background:#F76A1D; color:#FFFFFF; margin:0 0 0 5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; position:absolute; bottom:0; right:-80px; line-height:18px;}
/* captcha */
#recaptcha_logo,
#recaptcha_tagline {display:none!important}
.recaptchatable #recaptcha_response_field {font-size:inherit!important}
#wrapper form .recaptchatable label.error {right:-134px; bottom:7px;}

html.no-cssgradients #wrapper form #submitButton input {background:url(../images/ie_nav.jpg) top left repeat}
#wrapper form #submitButton input:hover {background:-webkit-gradient( linear, left bottom, left top, color-stop(0.13,rgb(210,210,210)), color-stop(1,rgb(245,245,245))); background:-moz-linear-gradient( center bottom, rgb(210,210,210) 13%, rgb(245,245,245) 100%); color:#3d3d3d; text-shadow:1px 1px 2px #cdcdcd; }
html.no-cssgradients #wrapper form #submitButton input:hover {background:url(../images/ie_nav.jpg) bottom left repeat}
#wrapper form  label span.placeholder {display:block; clear:both; }
#wrapper #thanks,
#wrapper #processing,
#wrapper #error {display:none;}


#contact #wrapper #hcard-Leonardo-Picado { float:left; width:380px; margin:10px 20px 10px 0; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; padding:15px 10px; background:#ccc; position:relative}
#contact.ie7 #wrapper #hcard-Leonardo-Picado { min-height:204px}
#contact #wrapper #hcard-Leonardo-Picado .photo { float:left; margin:0 15px 50px 5px; padding:3px; border:1px solid #eee; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow: 0px 0px 8px #888; -webkit-box-shadow: 0px 0px 8px #888; box-shadow: 0px 0px 8px #888; background:#fff; display:block;}
#contact #wrapper #hcard-Leonardo-Picado .photo:hover {-moz-transform:  rotate(-3deg);  -webkit-animation-name: rotate; -webkit-animation-duration: 0.5s; -webkit-transform:  rotate(-3deg);}
#contact #wrapper #hcard-Leonardo-Picado .org { font-size:16px; font-weight:bold; margin:0 0 1em 0;}

#contact #wrapper #hcard-Leonardo-Picado .tags { display:none }
#contact #wrapper #hcard-Leonardo-Picado .fn { display:block}
#contact #wrapper #hcard-Leonardo-Picado div,
#contact #wrapper #hcard-Leonardo-Picado .fn,
#contact #wrapper #hcard-Leonardo-Picado p { margin-bottom:0.5em}
#contact #wrapper #hcard-Leonardo-Picado .qrcode,
#contact #wrapper #hcard-Leonardo-Picado .download { height:110px; width:110px; float:left; }
#contact #wrapper #hcard-Leonardo-Picado .download  { margin:0 15px 0 0}
#contact #wrapper #hcard-Leonardo-Picado .download > a { display:block; height:110px; width:110px; background:url(../images/vcard.jpg) top left no-repeat; text-indent:-9999px; border:3px solid #eee; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow: 0px 0px 8px #888; -webkit-box-shadow: 0px 0px 8px #888; box-shadow: 0px 0px 8px #888;}
#contact #wrapper #hcard-Leonardo-Picado .qrcode img {display:block; height:110px; width:110px; background:url(../images/vcard.jpg) top left no-repeat; text-indent:-9999px; border:3px solid #eee; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow: 0px 0px 8px #888; -webkit-box-shadow: 0px 0px 8px #888; box-shadow: 0px 0px 8px #888;}
#contact #wrapper #hcard-Leonardo-Picado .download > a:hover { background-position:top right}
#contact #wrapper #hcard-Leonardo-Picado #urls {margin:20px 60px 0 0;}
#contact #wrapper #hcard-Leonardo-Picado #urls li {display:inline-block; height:32px; width:32px; margin:0 10px 10px 0;}
#contact.ie7 #wrapper #hcard-Leonardo-Picado #urls li { list-style-type:none; float:left}
#contact #wrapper #hcard-Leonardo-Picado #urls li a {display:block; height:32px; width:32px; background:url(../images/social_icons.png) top left no-repeat; text-indent:-9999px;}
#contact #wrapper #hcard-Leonardo-Picado #urls li a:hover { -webkit-animation-name: scale; -webkit-animation-duration: 0.5s; -webkit-animation-direction: alternate;}
#contact #wrapper #hcard-Leonardo-Picado #urls #email a {background-position:0 -42px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #email a:hover {background-position:-38px -42px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #facebook a {background-position:top left;}
#contact #wrapper #hcard-Leonardo-Picado #urls #facebook a:hover {background-position:-38px 0;}
#contact #wrapper #hcard-Leonardo-Picado #urls #twitter a {background-position:0 -124px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #twitter a:hover {background-position:-38px -124px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #skype a {background-position:0 -166px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #skype a:hover{background-position:-38px -166px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #yahoo a {background-position:0 -205px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #yahoo a:hover {background-position:-38px -205px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #lin a {background-position:0 -82px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #lin a:hover{background-position:-38px -82px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #download a { background-position:0 -241px;}
#contact #wrapper #hcard-Leonardo-Picado #urls #download a:hover { background-position:-36px -241px;}

/* faux rounded corners */
html.no-borderradius .faux_rc .bl,
html.no-borderradius .faux_rc .br,
html.no-borderradius .faux_rc .tr,
html.no-borderradius .faux_rc .tl { height:7px; width:7px; background:url(../images/ie_corners.jpg) top left no-repeat; position:absolute}
html.no-borderradius .faux_rc .tl { top:0; left:0;}
html.no-borderradius .faux_rc .tr { top:0; right:0; background-position:top right}
html.no-borderradius .faux_rc .br { bottom:0; right:0; background-position:bottom right}
html.no-borderradius .faux_rc .bl { bottom:0; left:0; background-position:bottom left}

/* footer */
#wrapper footer {clear:both; padding:0 0 10px 0; border-top:1px solid #d0d0d0; display:block}
#wrapper footer p {font-size:85%; color:#999; clear:both; padding:10px 0 0 0 }
#wrapper footer p a{color:#025cb6; text-decoration:none}
#wrapper footer p a:hover{text-decoration:underline}
#wrapper footer ul{margin-left:0; clear:both}
#wrapper footer ul li{font-size:85%; list-style:none; float:left}
#wrapper footer ul li a{text-decoration:none; color:#025cb6; margin-right:10px; padding-right:10px; border-right:1px dotted white; }
#wrapper footer ul li a:hover{color:#0CF}
.ie7 #wrapper form #submitButton{width:100px; margin:10px 0 0 0}