/*
URL: www.matteobatazzi.eu
Design and CSS by Matteo Batazzi 11/08/2010 (info@matteobatazzi.eu)
*/

/* Reset */
* {margin: 0}
html {height: 100%}
body {height: 100%; margin: 0; padding: 0; font-family: 'Droid Sans', Arial,helvetica,sans-serif; text-align: center; background: url(../img/bg.jpg) repeat-x}
h1, h2, h3, h4, h5, h6, ul, li, p {margin: 0; padding: 0}
ul {list-style: none}
a {outline: none; text-decoration: none}


/* Containers */
#wrapper {width: 940px; margin: 0 auto; position: relative}
#container {width: auto; text-align: left}
#header {height: 170px}
#intro {height: 309px; background: url(../img/img_intro.png) no-repeat 554px 43px}
#portfolio {height: 525px; padding: 30px 0}
#about {height: 760px; padding: 30px 0}
#contact {height: 410px; padding: 35px 0}

/* Global */
h1 {width: 560px; padding: 70px 0 0 0; color: #fff; font-size: 50px; font-weight: 100; text-shadow: 0 1px 1px #333}
h1 span {display: block}
h2 {font-size: 36px; margin: 0 0 0 0; font-weight: 100; color: #333}
h3 {font-size: 28px; margin: 40px 0 30px 0; font-weight: 100; color: #333}
a {color: #277CD1}
a:hover {color: #669bd1}
ul.menuContainer {float: right; width: auto}
ul.menuContainer li {float: left; margin: 0 0 0 20px}
ul.menuContainer li a {font-size: 20px; color: #333}
ul.menuContainer li a:hover {color: #74ba1f}
ul.menuContainer li a.active {padding: 6px 12px; color: #fff; background: #74ba1f; -moz-border-radius: 10px; border-radius: 10px}

/* Header */
.logo {float: left; margin: 65px 0 0 0}
.logo a {display: block; width: 339px; height: 43px; background: url(../img/logo.png)}
.logo a span {display: none}
#header ul.menuContainer {margin: 85px 0 0 0; color: #fff}
#header ul.menuContainer a {color: #fff}

/* Portfolio */

ul.portfolioContainer {}
ul.portfolioContainer li {float: left; width: 278px; height: 153px; position: relative; background: #d6d6d6; border: 1px solid #c5c5c5; margin: 0 35px 35px 0; padding: 10px 0 0 10px}
ul.portfolioContainer li.last {margin: 0 0 35px 0} 
ul.portfolioContainer li img {width: 268px; height: 144px; border: 1px solid #5d5d5d}
ul.portfolioContainer li h4 {display: none; position: absolute; bottom: 7px; width: 250px; height: 40px; padding: 10px; background: #000; color: #fff; font-size: 17px; opacity: 0.8}
ul.portfolioContainer li h4 span {display: block; font-size: 14px; padding: 2px 0 0 0}

/* About */

#about .leftContent {float: left; width: 300px}
#about .leftContent p {}
#about .leftContent p span {padding: 15px 0 0 0; display: block}
#about .leftContent ul.skillsContainer {}
#about .leftContent ul.skillsContainer li {margin: 0 0 25px 0}
#about .leftContent ul.skillsContainer li span {float: right; display: block; width: 90px; height: 30px; padding: 0 0 0 80px; text-indent: -9999px}
#about .leftContent ul.skillsContainer li span.html {background: url(../img/skills-html-css.png) no-repeat 0 -3px}
#about .leftContent ul.skillsContainer li span.psd {background: url(../img/skills-psd.png) no-repeat 0 -3px}
#about .leftContent ul.skillsContainer li span.ai {background: url(../img/skills-ai.png) no-repeat 0 -3px}
#about .leftContent ul.skillsContainer li span.jquery {background: url(../img/skills-jquery.png) no-repeat 0 -3px}
#about .leftContent ul.skillsContainer li span.flash {background: url(../img/skills-swf.png) no-repeat 0 -3px}
#about .leftContent ul.skillsContainer li span.php {background: url(../img/skills-php.png) no-repeat 0 -3px}
#about h3.cv {float: left; width: 290px; margin: 54px 0 0; padding: 8px 0 15px 85px; background: url(../img/ico-cv.png) no-repeat}
#about h3.cv a {}
#about .rightContent {float: right; width: 620px; position: relative}
#about .rightContent .bar {float: left; width: 85px; height: 625px; background: url(../img/bg_timeline.png) no-repeat}
#about .rightContent ul.years {float: left; width: 215px; margin: 25px 20px 0}
#about .rightContent ul.years li {color: #c6cbd0; font-size: 35px; font-weight: 100; text-align: right}
#about .rightContent ul.years li.synthesio {margin: 0 0 68px}
#about .rightContent ul.years li.sorin {margin: 0 0 61px}
#about .rightContent ul.years li.kapit {margin: 0 0 113px}
#about .rightContent ul.years li.publico {margin: 0 0 130px}
#about .rightContent ul.companies {float: left; top: 130px; right: 0; position: absolute}
#about .rightContent ul.companies li {font-size: 18px; background: url(../img/timeline-marker.png) no-repeat left; padding: 0 0 0 90px; color: #408411}
#about .rightContent ul.companies li.synthesio {margin: 0 0 60px}
#about .rightContent ul.companies li.sorin {margin: 0 0 60px}
#about .rightContent ul.companies li.kapit {margin: 0 0 113px}
#about .rightContent ul.companies li.publico {margin: 0 0 121px}
#about .rightContent ul.companies li span {display: block}
    
/* Contact */

#contact ul.menuContainer a {color: #fff}
#contact h2 {color: #fff}
.info {float: left; width: 325px}
.info h3 {color: #fff}
.info .card {width: 289px; height: 199px; background: url(../img/bg_card.png) no-repeat; position: relative}
.info .card img {position: absolute; top: 5px; left: 5px}
.info .card h4 {color: #408411; font-size: 20px; padding: 15px 0 10px 103px}
.info .card h5 {color: #333; font-size: 13px; padding: 3px 0 0 103px}
.info .card ul.socialContainer {margin: 37px 0 0 13px}
.info .card ul.socialContainer li {float: left}
.info .card ul.socialContainer li a {display: block; width: 32px; height: 32px; margin: 0 12px 0 0}
.info .card ul.socialContainer li.twitterBdg a {background: url(../img/social-twitter.png) no-repeat}
.info .card ul.socialContainer li.skypeBdg a {background: url(../img/social-skype.png) no-repeat}
.info .card ul.socialContainer li.flickrBdg a {background: url(../img/social-flickr.png) no-repeat}
.info .card ul.socialContainer li.tumblrBdg a {background: url(../img/social-tumblr.png) no-repeat}
.info .card ul.socialContainer li.linkedinBdg a {background: url(../img/social-linkedin.png) no-repeat}
.info .card ul.socialContainer li.lastfmBdg a {background: url(../img/social-lastfm.png) no-repeat}
.info .card ul.socialContainer li a span {display: none}

.flickr {float: left; width: 325px}
.flickr h3 {color: #ff1c84}
.flickr h3 span {color: #0066e1}
.flickr ul.flickrContainer {}
.flickr ul.flickrContainer li {float: left; width: 125px; height: 80px; padding: 5px; margin: 0 20px 20px 0; background: #fff}
.flickr ul.flickrContainer li a {border: none}
.flickr ul.flickrContainer li img {width: 125px; height: 80px; border: none}

.twitter {float: left; width: 290px}
.twitter h3 {color: #34ccff}
.twitter #twitter {width: 290px; height: 180px; background: url(../img/bg_twitter.png) no-repeat; position: relative}
.twitter #twitter h2 {display: none}
.twitter #twitter span {font-size: 12px}
.twitter #twitter a {font-size: 12px}
.twitter #twitter a:hover {font-size: 12px}
.twitter #twitter ul {}
.twitter #twitter li {padding: 15px}
.twitter #twitter .profileLink {padding: 0 15px 0 0; text-align: right}
.twitter a.twitLink {display: block; width: 135px; height: 115px; background: url(../img/icon-twitter.png) no-repeat 2px 0; position: absolute; bottom: 42px; right: 0}
.twitter a.twitLink span {display: none}

.footer {clear: left; padding: 45px 0 0; color: #fff; font-size: 12px}
.footer p.copyright {float: left}
.footer a.backTop {float: right; padding: 0 15px 0 0; color: #fff; cursor: pointer; background: url(../img/ico-arrow_top.png) no-repeat right}
.footer a.backTop:hover {text-decoration: underline}