@import url('reset.min.css');
body{background:#e3e3e3;font-family:Helvetica,Arial}
a{color:#069;text-decoration:none}
#container{background:url(../images/jheader.jpg) no-repeat 15% 0;padding:0 0 20px}
.imgTxt{display:block;overflow:hidden;text-indent:-999px}
.clear{clear:both}
.separator{margin:0 0 10px}
.info{background:#ffc url(../images/warning.png) 15px center no-repeat;border:1px solid #DDDB54;padding:20px 5px 20px 65px}
#header{margin:0 auto;width:800px}
#logo{float:left;margin:40px 0 0}
#logo h1 a{background:url(../images/logo.png) no-repeat;height:55px;width:200px}
#menu{float:right;margin:70px 15px 0}
#menu ul{list-style-type:none}
#menu ul li a{display:block;height:18px;margin:0 10px;overflow:hidden;text-indent:-9999px}
#menuHome{background:url(../images/menuHome.png) no-repeat;width:60px}
#menuHome:hover,#menuHome.active{background:url(../images/menuHomeActive.png) no-repeat}
#menuAbout{background:url(../images/menuAbout.png) no-repeat;width:80px}
#menuAbout:hover,#menuAbout.active{background:url(../images/menuAboutActive.png) no-repeat}
#menuFolio{background:url(../images/menuFolio.png) no-repeat;width:42px}
#menuFolio:hover,#menuFolio.active{background:url(../images/menuFolioActive.png) no-repeat}
#menuContact{background:url(../images/menuContact.png) no-repeat;width:120px}
#menuContact:hover,#menuContact.active{background:url(../images/menuContactActive.png) no-repeat}
#infoJS{display:block}
#mainContent{margin:0 auto;overflow:hidden;width:800px}
#mainContent .content{background:#fff;margin:0 auto;padding:25px;width:750px}
#mainContent .arrow{height:15px;margin:0 auto;width:720px}
#home .content{width:800px}
#home h2{font-size:3em;height:55px;margin:0 0 10px;width:220px}
#home p{font-size:1.2em;line-height:1.5em}
#home p a{color:#6EA4CF}
#home p a.linkFolio{color:#9BB450}
#home p del{color:#999}
#home h3{font-size:2.3em;display:none;height:40px;margin:30px 0 15px;width:285px}
#about{font-size:.95em}
#about h2{font-size:2.3em;height:40px;margin:0 0 10px;width:340px}
#aboutImg{float:left;margin:12px 13px 0 0;width:150px}
#aboutImg .detailsIn{background:url(../images/detailsIn.png) no-repeat 5px 0;height:40px;width:150px}
#aboutImg .detailsIn:hover{background:url(../images/detailsInHover.png) no-repeat 5px 0}
#aboutText{color:#ccc;float:left;font-size:1em;line-height:1.6em;margin:10px 0;width:580px;text-align:center}
#aboutText ul li{display:inline;margin:10px;}
#aboutText ul li.tag1{font-size:1.3em}
#aboutText ul li.tag2{font-size:1.2em}
#aboutText ul li.tag3{font-size:1.1em}
#aboutText ul li.tag4{font-size:0.9em}
#aboutText a{color:#69c}
#twitt{color:#000;float:left;font-size:1em;line-height:1.1em;margin:0 0 0 20px}
#twitt h3{margin:10px}
#twitt h3 a{background:url(../images/aboutTwitter.png) no-repeat;display:block;overflow:hidden;text-indent:-999px;width:80px}
#twitt .tweet{background:url(../images/bgTweet.jpg) no-repeat;font-size:.9em;height:110px;padding:12px 12px 0 100px;width:200px}
#twitt .tweet.failWhale{background:url(../images/bgFailwhale.jpg) no-repeat}
#twitt .tweet a{color:#ccc}
#twitt .tweet a.tweetHashtag{color:#000}
#twitt p.copyright{color:#aaa;font-size:.55em;text-align:right;width:300px}
#music{float:left;margin:0 0 0 50px;width:350px}
#music h3{background:url(../images/aboutMusic.png) no-repeat;height:21px;margin:10px;width:65px}
#musicAlbums{background:url(../images/bgMusic.jpg) no-repeat;height:151px;list-style:none;padding:8px 0 5px 120px;width:289px}
#musicAlbums li{float:left;position:relative;width:115px}
#musicAlbums li a{color:#000;display:block;height:75px;overflow:hidden;padding:15px;position:relative;width:80px}
#musicAlbums li a:hover{text-decoration:none}
#musicAlbums li a img{border:0;left:0;position:absolute;top:0}
#folio .content{width:770px}
#folio h2{background:url(../images/folioTitle.png) no-repeat;height:35px;margin:0 0 10px;width:100px}
#projectsList li.project{border-bottom:1px solid #ccc;font-size:.9em;padding:10px;width:750px}
#projectsList li.project:hover{background:#eee}
.headProject:hover{cursor:pointer}
.headProject .logo{background:#fff;border:1px solid #ccc;float:left;height:95px;width:95px}
.headProject .infos{float:left;margin:0 10px}
.headProject .infos h3,.infos h4{color:#069;margin:10px 0}
.headProject .infos p{font-size:.9em;text-align:justify}
.headProject .link{width:210px}
.headProject .link ul li{border:none;float:left;margin:5px 5px 0 0;padding:0;width:30px}
.image{height:260px;width:750px}
.image img{margin:10px 0 0}
.content{padding:25px 25px 10px}
.sideContact{float:left;width:350px}
#contactDirect h2{background:url(../images/contactDirect.png) no-repeat;height:25px;width:350px}
#formContact{border-right:1px solid #ccc;font-size:.9em;margin:10px 0 0}
.messageForm{background:#F8FAFC url(../images/msg_info.png) no-repeat scroll 7px 50%;border:1px solid #B5D4FE;font-size:.9em;margin:0 10px 10px 0;padding:5px 5px 5px 35px;width:300px}
#formContent{margin:0 5px;width:300px}
#formContent label{display:block;float:left;margin:0;padding:7px 0;width:100px}
#formContent input{border:2px solid #ccc;float:left;margin:3px 0;padding:1px;width:150px}
#formContent input.valid{background:#F8FAFC;border:2px solid #48A016}
#formContent input.error{background:#f77;border:2px solid #D43C3C;color:#fff}
#formContent textarea{border:2px solid #ccc}
#formContent .validBtns{height:30px;width:30px}
#formContent .validBtns img{height:20px;margin:3px 5px;width:20px}
#formBtns{margin:10px auto;width:165px}
#formBtns a{color:#69c;text-decoration:none}
#loader{-moz-opacity:0.7;background:#ccc;display:none;filter:alpha(opacity=70);height:42px;opacity:0.7;padding:110px 0;position:relative;text-align:center;top:-270px;width:350px}
#success{background:url(../images/success.png) 10px center no-repeat;border:1px solid #48A016;line-height:1.2em;margin:30px 0 0;padding:23px 0 23px 70px;width:300px}
#success p{color:#48A016;font-weight:700}
#error{background:url(../images/error.png) 10px center no-repeat;border:1px solid #D43C3C;margin:10px 0 0;padding:23px 10px 23px 70px;width:240px}
#error p{color:#D43C3C;font-weight:700}
#contactElse{margin:0 0 0 10px;width:330px}
#contactElse h2{background:url(../images/contactElse.png) no-repeat;height:25px;width:350px}
#contactElse .comment{color:#999;font-size:.6em;margin:0 0 15px;text-align:right}
#contactElse ul li{float:left;width:150px}
#contactElse ul li a{display:block;padding:15px 10px 15px 50px;width:80px}
#contactElse ul li a:hover{color:#666;text-decoration:none}
#contactElse ul li a.twitter{background:#fff url(../images/twitter.png) 5px 7px no-repeat}
#contactElse ul li a.twitter:hover{background:#eee url(../images/twitter.png) 10px 7px no-repeat}
#contactElse ul li a.facebook{background:#fff url(../images/facebook.png) 5px 7px no-repeat}
#contactElse ul li a.facebook:hover{background:#eee url(../images/facebook.png) 10px 7px no-repeat}
#contactElse ul li a.linkedin{background:#fff url(../images/linkedin.png) 5px 7px no-repeat}
#contactElse ul li a.linkedin:hover{background:#eee url(../images/linkedin.png) 10px 7px no-repeat}
#contactElse ul li a.skype{background:#fff url(../images/skype.png) 5px 7px no-repeat}
#contactElse ul li a.skype:hover{background:#eee url(../images/skype.png) 10px 7px no-repeat}
#contactElse ul li a.netvibes{background:#fff url(../images/netvibes.png) 5px 7px no-repeat}
#contactElse ul li a.netvibes:hover{background:#eee url(../images/netvibes.png) 10px 7px no-repeat}
#contactElse ul li a.delicious{background:#fff url(../images/delicious.png) 5px 7px no-repeat}
#contactElse ul li a.delicious:hover{background:#eee url(../images/delicious.png) 10px 7px no-repeat}
#contactElse ul li a.flickr{background:#fff url(../images/flickr.png) 5px 7px no-repeat}
#contactElse ul li a.flickr:hover{background:#eee url(../images/flickr.png) 10px 7px no-repeat}
#contactElse ul li a.lastfm{background:#fff url(../images/lastfm.png) 5px 7px no-repeat}
#contactElse ul li a.lastfm:hover{background:#eee url(../images/lastfm.png) 10px 7px no-repeat}
#contactElse p#copyright{background:url(../images/komodomedia.png) 6px center no-repeat;color:#aaa;font-size:.55em;margin:40px 0 0;padding:10px 20px 5px 26px}
a:hover,#about #aboutText p a:hover,#formBtns a:hover{text-decoration:underline}
.hide,#home #homeCarrousel{display:none}
#menu ul li,#mainContent .scrollContainer .panel,#formContent .validBtns{float:left}
#about #twitt .tweet a.tweetReply,#about #twitt p.copyright a,#contactElse p#copyright a{color:#069}
#projectsList li .headProject .title,#contactDirect{width:400px}