@import url(reset.css);
@import url(modal.css);
body{font:100% Georgia, "Times New Roman", Times, Serif; background:url(../img/global/bg.jpg) 0 0 repeat-x fixed;}

/* Global styles */
h3{width:350px; height:37px; padding:0 0 0 3px; background:url(../img/global/separation.png) 0 35px no-repeat;}
h3 span{display:block; height:22px; width:325px; background-image:url(../img/global/titles.png); background-repeat:no-repeat; text-indent:-9999px;}
h4{color:#52616a; font-size:15px; font-weight:bold; text-shadow:#fff 0 1px;}
p{line-height:21px; text-align:justify; color:#52616a; font-size:15px; text-shadow:#fff 0 1px;}
abbr{border-bottom:1px dashed #999;}
label, #submit{cursor:pointer;}
textarea{resize:none;}
.clear{clear:both;}
.disabled{opacity:0.5; filter:alpha(opacity=50);}

#container{position:relative; z-index:5; width:811px; margin:0 auto;}
#tip{position:absolute; z-index:15; top:-50px; left:-50px; width:auto; max-width:130px; padding:10px 7px 5px; color:#fff; font-size:12px; font-family:Tahoma, Verdana, "Courrier Sans"; background:url(../img/global/tip.png) top left no-repeat;}


/* English version
---------------------------------------------------------------- */
/* Menu */
#en #menu li.about a{background-position:-1px -283px;}		#en .about a span{background-position:-139px -283px !important;}     #en #menu li.about.active a, #en #menu li.about a:active{background-position:-277px -283px !important;}
#en #menu li.works a{background-position:-1px -325px;}		#en .works a span{background-position:-139px -325px !important;}     #en #menu li.works.active a, #en #menu li.works a:active{background-position:-277px -325px !important;}
#en #menu li.services a{background-position:-1px -365px;}	#en .services a span{background-position:-139px -365px !important;}  #en #menu li.services.active a, #en #menu li.services a:active{background-position:-277px -365px !important;}
#en #menu li.contact a{background-position:-1px -405px;}	   #en .contact a span{background-position:-139px -405px !important;}   #en #menu li.contact.active a, #en #menu li.contact a:active{background-position:-277px -405px !important;}
#en #menu li.photos a{background-position:-1px -445px;}		#en .photos a span{background-position:-139px -445px !important;}    #en #menu li.photos a:active{background-position:-277px -445px !important;}
#en #menu li.blog a{background-position:-1px -485px;}       #en .blog a span{background-position:-139px -485px !important;}      #en #menu li.blog a:active{background-position:-277px -485px !important;}

/* Titles */
#en #last h3 span{background-position:-327px 0;}
#en #services h3 span{background-position:-327px -88px;}
#en #web h3 span{background-position:-327px -22px;}
#en #other h3 span{background-position:-327px -44px;}
#en #contact h3 span{background-position:-327px -66px;}

/* Statut work */
#en .work .statut.new{background-position:0 -116px;}
#en .work .statut.maj{background-position:-31px -116px;}



/* Left
---------------------------------------------------------------- */
#left{position:fixed; width:213px; height:618px; background:url(../img/global/left.png) top left no-repeat;}
   #left h1{float:left; width:125px; padding:30px 0 0 41px;}
   #left h1 a{display:block; width:112px; height:26px; background:url(../img/global/logo.png); text-indent:-9999px;}
   #left h1 a:hover{background-position:bottom left;}

/* Language */
#lang{position:absolute; z-index:21; top:3px; right:22px; width:200px; text-align:right;}
   #lang a{display:block; padding:2px 56px 2px 0; color:#7d97a3; font-size:13px; background-image:url(../img/ic/lang.png); background-repeat:no-repeat; text-decoration:none;}
   #lang a:hover{color:#3179a4;}
   
   /* Langs */
   #lang a.en{background-position:149px 0;}      #lang a:hover.en{background-position:149px -19px;}
   #lang a.fr{background-position:149px -38px;}  #lang a:hover.fr{background-position:149px -57px;}

/* Ribbon */
#ribbon{position:fixed; z-index:20; top:0; width:603px; margin:0 0 0 -11px; height:122px; background:url(../img/global/ribbon.png) top right no-repeat;}
#ribbon h2{float:right; width:550px; padding:34px 43px 0 0; text-align:left; color:#fff; font-size:15px; font-weight:400; text-shadow:#7f281f 0 2px;}


/* Menu */
#menu{clear:both; width:100px; padding:80px 0 0 29px;}
   #menu li{width:136px;}
   #menu li a{position:relative; display:block; width:136px; height:40px; text-indent:-9999px; cursor:pointer; background-image:url(../img/global/menu.jpg); background-repeat:no-repeat;}
   #menu li a:hover span{display:block;}
   #menu li.about a{height:42px; background-position:-1px 0;}		#menu .about a span{background-position:-139px 0;}          #menu li.about.active a, #menu li.about a:active{background-position:-277px 0;}
   #menu li.works a{background-position:-1px -42px;}		         #menu .works a span{background-position:-139px -42px;}      #menu li.works.active a, #menu li.works a:active{background-position:-277px -42px;}
   #menu li.services a{background-position:-1px -82px;}		      #menu .services a span{background-position:-139px -82px;}   #menu li.services.active a, #menu li.services a:active{background-position:-277px -82px;}
   #menu li.contact a{background-position:-1px -122px;}	         #menu .contact a span{background-position:-139px -122px;}   #menu li.contact.active a, #menu li.contact a:active{background-position:-277px -122px;}
   #menu li.photos a{background-position:-1px -162px;}	         #menu .photos a span{background-position:-139px -162px;}    #menu li.photos a:active{background-position:-277px -162px;}
   #menu li.blog a{background-position:-1px -202px;}              #menu .blog a span{background-position:-139px -202px;}      #menu li.blog a:active{background-position:-277px -202px;}

   /* Rollovers */
   #menu li a span{display:none; position:absolute; top:0; left:0; width:136px; height:41px; text-indent:-9999px; background-image:url(../img/global/menu.jpg); background-repeat:no-repeat;}
   /*#menu li.about a span{height:42px;}*/

/* Player */
#player{position:absolute; bottom:97px; left:43px; width:150px; opacity:.25; filter:alpha(opacity=25);}
   #player span{float:left; color:#8eb2cf; font-size:13px; text-shadow:#222 0 1px;}
   #player p{float:right; padding:0 43px 0 0;}
   #player a{float:left; height:15px; text-indent:-9999px; background-image:url(../img/ic/player.png); background-repeat:no-repeat; opacity:.85; filter:alpha(opacity=85);}
   #player a:hover{opacity:1; filter:alpha(opacity=100);}
   
   /* Buttons */
   #player #audio{position:absolute; top:0; left:0; visibility:hidden;}
   #player #play{width:10px; background-position:top left;}
   #player #pause{width:9px; margin-left:12px; background-position:top right;}



/* Content
---------------------------------------------------------------- */
#main{position:relative; float:right; width:544px; height:500px; padding:80px 43px 0 0;}


/* ----- About ----- */
#about{}

/* Intro */
#intro{padding:20px 0 0; line-height:23px; font-size:16px;}
   #intro strong{font-weight:400;}
   #intro span{display:block; margin:0 0 10px;}
   #intro a{color:#4a92bd;}
   #intro a:hover{color:#3179a4;}
   /* Area */
   .area{width:562px; margin-bottom:80px;}

/* More */
#more{margin:20px 0 0;}
   #more .infos{height:130px;}
   
   /* Link */
   #more .link{display:none; margin:0 0 35px;}
   .more a{color:#4a92bd; font-size:16px; text-shadow:#fff 0 1px; text-decoration:none;}
   .more a span{text-decoration:underline;}
   .more a:hover{color:#3179a4;}

/* Presentation */
#more #presentation{float:left; width:340px;}
   #more #presentation h4{height:35px; background:url(../img/global/separation.png) 0 26px no-repeat;}

/* Skills */
#skills{float:right; width:160px;}
   #skills h4{height:35px; background:url(../img/global/separation.png) 0 -3px no-repeat;}
   #skills li{width:100%; line-height:21px; color:#52616A; font-size:14px;  text-shadow:#fff 0 1px;}
   
   /* Stars */
   #skills .skill{float:right; width:40px; height:16px; margin:3px 0 0; text-indent:-9999px; background-image:url(../img/ic/skills.png); background-repeat:no-repeat; }
   #skills .lvl5{background-position:0 -80px;}
   #skills .lvl10{background-position:0 -64px;}
   #skills .lvl15{background-position:0 -48px;}
   #skills .lvl20{background-position:0 -32px;}
   #skills .lvl25{background-position:0 -16px;}
   #skills .lvl30{background-position:0 0;}


/* Available */
#main .available{float:right; width:79px; height:79px; margin:12px 0 0; text-indent:-9999px; background-image:url(../img/global/available.png); background-repeat:no-repeat;}
   #main .available.no{background-position:top left;}
   #main .available.yes{background-position:top right;}
   #main .available.yes:hover{background-position:bottom right;}

/* Last work */
#last{margin-bottom:60px; padding:45px 0 0; clear:both;}
   #last h3{margin-bottom:0;}
   #last h3 span{background-position:0 0;}

/* Slider */
#slideshow{position:relative; z-index:1; left:-9px; width:562px; height:249px; margin:20px 0 0; background:url(../img/global/slider.png) top left no-repeat;}
   /* Controls */
   #slideshow #control{display:none; position:absolute; z-index:5; top:16px; right:11px; width:532px;}
   #slideshow #control p{float:right; padding:2px 0 0; line-height:13px; height:22px; background:url(../img/global/control.png) top left no-repeat; text-shadow:none;}
   #slideshow #control a{float:left; width:15px; height:15px; margin:0 3px 0 0; text-align:center; color:#fff; font-size:10px; text-decoration:none; background-image:url(../img/global/numbers.png); background-repeat:no-repeat;}
   #slideshow #control a:hover{background-position:bottom;}
   
   /* Slider */
   #slide{clear:both; overflow:hidden; position:relative; top:16px; left:3px; width:532px; height:205px; margin:0 auto;}
   #slide li{display:inline;}
   
   /* Legend */
   #legend{position:relative; padding:22px 10px 0 0; text-align:center; color:#fff; font-size:14px; text-shadow:#356f8f 0 1px;}
   #legend a{margin-left:7px; color:#fff; font-size:12px; text-decoration:none; text-shadow:#356f8f 0 1px;}
   #legend #links{position:relative; top:-3px; float:right; padding-right:10px; text-align:right;}
   #legend .link{padding-left:20px; background:url(../img/ic/link.png) center left no-repeat;}
   #legend .role{padding-left:20px; background:url(../img/ic/role.png) center left no-repeat;}


/* ----- Services ----- */
#services{width:570px; margin-bottom:0; padding:20px 0 0;}
   #services h3{margin-bottom:20px;}
   #services h3 span{background-position:0 -88px;}
   #services .service{float:left; width:44.5%; height:155px; margin:0 5.5% 30px 0;}
   #services .service h4{padding-bottom:10px;}
   #services .service img{position:relative; top:4px; float:right; padding:0 0 5px 20px;}
   #services .more{clear:both; width:540px; padding:0 0 80px;}
   #services .more a{clear:both; color:#4a92bd; text-shadow:#fff 0 1px; text-decoration:underline;}
   #services .more a:hover{color:#3179a4;}


/* ----- Work ----- */
#web{width:562px; clear:both; padding:4px 0 0;}
   #web h3{margin-bottom:12px;}
   #web h3 span{background-position:0 -22px;}

#other{clear:both; padding:60px 0 0;}
   #other h3{margin-bottom:12px;}
   #other h3 span{background-position:0 -44px;}
   #other .list.reduce{height:470px;}

/* Work */
.list{padding:15px 0 0;}
.list li{float:left; width:260px; margin:0 21px 0 0;}

/* Zoom */
#zoom{display:none; position:relative; padding:0 0 0 2px;}
   
   /* Picture */
   #zoom #picture{width:541px; padding:6px 0 0 6px; background:url(../img/global/work-zoom.png) top left no-repeat;}
   #zoom #picture #screen img{width:529px;}
   #zoom .close{position:absolute; top:-2px; right:15px; width:30px; height:30px; background:url(../img/modalbox/fancy_close.png) top left no-repeat;}

   /* Informations */
   #zoom #infos{width:529px; padding:20px 0 0 6px;}
      #zoom #infos h4{padding:0 0 10px;}
      #zoom #infos div p .left{float:left; clear:left; width:87px; text-align:right;}
      #zoom #infos div p .right{float:right; clear:right; width:435px; text-align:left;}
      #zoom #infos .link{padding:20px 0 0;}
      #zoom #infos .link span{float:none;}
      
   /* Clear & load */
   #zoom .padding{height:50px;}
   #load{display:none; position:absolute; z-index:10; padding:10px 15px 10px 35px; font-size:14px; background:#fff url(../img/ic/load.gif) 10px 11px no-repeat; -moz-border-radius:7px; -webkit-border-radius:7px;}
   

/* Work */
.work{position:relative; float:left; width:260px; height:200px; margin:5px 18px 20px 3px; padding:6px 0 0; text-align:center; background:url(../img/global/work.png) top left no-repeat;}
   .work .img{opacity:.75; filter:alpha(opacity=75);}
   .work .img:hover{opacity:1; filter:alpha(opacity=100);}
   .work .statut{position:absolute; z-index:2; top:-5px; right:13px; width:31px; height:116px; text-indent:-9999px; background:url(../img/global/statut.png); background-repeat:no-repeat;}
   #fr .work .statut.new{background-position:0 0;}
   #fr .work .statut.maj{background-position:-31px 0;}
   .work .title{color:#fff; text-shadow:#356f8f 0 1px;}
   .work .infos{position:absolute; bottom:4px; left:6px; width:243px; height:20px; line-height:18px; padding:3px 0 0 5px; text-align:left; color:#fff; font-size:14px; background:url(../img/global/legend.png) bottom left no-repeat;}
   .work .links{position:absolute; bottom:0; right:0;}
   .work .link{float:left; width:22px; height:19px; padding:3px 1px 0 3px; text-align:center; background:url(../img/global/links.png) top left no-repeat;}
   .work .role{width:25px; padding-left:3px; padding-right:1px; background-position:top right;}
   .work .link:hover.role{background-position:bottom right;}
   .work .link:hover{background-position:bottom left;}
   .work:hover{background-position:top right;}

/* Pages */
.pages{display:none; width:530px; padding-left:8px;}
   .pages a{width:240px; height:23px; padding-top:4px; color:#4a92bd; font-size:14px; background-image:url(../img/ic/pages.png); background-repeat:no-repeat; text-shadow:#fff 0 1px; text-decoration:none;}
   .pages a span{color:#fff; text-shadow:#555 0 1px;}
   .pages a em{font-style:normal;}
   .pages a:hover{color:#3179a4;}
   .pages a:hover em{text-decoration:underline;}
   .pages a:active{position:relative; top:1px;}
   
   /* Prev button */
   .pages .prev{float:left;}
   .pages .prev a{float:left; padding-left:7px; text-align:left; background-position:0 0;}
   .pages .prev a span{padding-right:15px;}
   .pages .prev a:hover{background-position:0 -28px;}
   .pages .prev a:active{background-position:0 -56px;}
   
   /* Next button */
   .pages .next{float:right;}
   .pages .next a{float:right; padding-right:7px; text-align:right; background-position:219px 0;}
   .pages .next a span{padding-left:15px;}
   .pages .next a:hover{background-position:219px -28px;}
   .pages .next a:active{background-position:219px -56px;}


/* ----- Contact ----- */
#contact{clear:both; width:548px !important; margin-bottom:40px; padding:20px 0 15px;}
   #contact h3{margin-bottom:20px;}
   #contact h3 span{background-position:0 -66px;}

/* Form */
#form{position:relative; float:left; width:260px; padding:50px 0 0;}
   #form p{position:relative;}
   #form label{display:block; margin:3px 0 0;}
   #form .text{position:relative; top:-6px; left:-11px; width:246px; height:16px; padding:14px 17px 11px 16px; text-align:left; color:#fff; font:13px Georgia; background:url(../img/global/input.png) 0 0 no-repeat; border:none;}
   #form .text:hover{background-position:-277px 0;}
   #form .text:focus{background-position:-554px 0;}
   #form textarea{height:219px !important; padding-bottom:20px !important; background-position:0 -43px !important;}
   #form textarea:hover{background-position:-277px -43px !important;}
   #form textarea:focus{background-position:-554px -43px !important;}
   
   /* Submit */
   #form #submit{position:relative; left:-11px; width:271px; height:36px; padding:0 0 3px 4px; text-align:center; font:15px Georgia; color:#fff; text-shadow:#333 0 1px; background:url(../img/global/input.png) -2px -302px no-repeat; border:none;}
   #form #submit:hover{background-position:-279px -302px;}

   /* Errors validation */
   #form label.error{position:absolute; top:24px; right:20px; margin:0;}
   #form label.error[for="message"]{top:25px;}

/* Messages */
.message{position:absolute; top:17px; left:0; width:530px; padding:3px 0 3px 26px; font-size:14px; text-shadow:0 1px #fff;}
   .message.error{color:#f00; background:url(../img/ic/bad.png) top left no-repeat;}
   .message.sended{color:#1d8d20; background:url(../img/ic/ok.png) top left no-repeat;}


/* ----- Flayks ----- */
#flayks{position:relative; float:right; width:215px; height:445px; margin:57px 0 0;}
   #flayks div, #flayks p{text-align:right;}
   #flayks p{clear:both;}
   #flayks p a{color:#4a92bd;}
   #flayks p a:hover{color:#3179a4;}
   .button a{float:left; background-image:url(../img/ic/buttons.png); background-repeat:no-repeat;}
   .button a span{display:none;}
   #perso{position:absolute; top:0; right:0;}
   #perso h4{padding-bottom:10px;}

   /* CV */
   #cv{cursor:pointer; position:relative; float:right; width:17px; height:15px; margin:0 0 0 10px; padding:0 15px 0 0; color:#d0d4d6; font-size:11px; font-style:normal; font-weight:400; background:url(../img/ic/cv.png) top left no-repeat; text-decoration:none; text-transform:lowercase;}
   #cv span{display:none; position:absolute; top:-23px; right:-18px; width:60px; height:50px;}
   #cv span a{color:#41535f; float:left; padding:0 10px 0 0; font-size:11px; text-decoration:none;}
   #cv span a:hover{color:#637079; text-align:center; text-decoration:none;}
   #cv:hover{color:#fff; background-position:bottom left;}
   #cv:hover span{display:block;}

/* Alternatives */
#alternatives{width:190px; float:right; padding:20px 0 0;}
   #alternatives li a{margin:5px 0 3px 25px;}
   
   /* Buttons */
   #alternatives li.gtalk a{width:67px; height:32px; background-position:0 0;}		   #alternatives li.gtalk a:hover{background-position:0 -33px;}
   #alternatives li.skype a{width:70px; height:32px; background-position:-68px 0;}	#alternatives li.skype a:hover{background-position:-68px -32px;}
   #alternatives li.msn a{width:84px; height:33px; background-position:-141px 0;}	#alternatives li.msn a:hover{background-position:-141px -33px;}
   #alternatives li.ichat a{width:37px; height:33px; background-position:-227px 0;}	   #alternatives li.ichat a:hover{background-position:-227px -35px;}

/* Here */
#here{position:absolute; bottom:0; right:0;}
   #here ul{position:relative; left:16px; padding:16px 0 0;}
   #here li{float:left; width:32px; height:32px; margin:4px 10px 5px 0;}
   #here li a{width:32px; height:32px;}
   
   /* Buttons */
   #here li.linkedin a{background-position:0 -71px;}				#here li.linkedin a:hover{background-position:0 -105px;}
   #here li.ziki a{background-position:-32px -71px;} 				#here li.ziki a:hover{background-position:-32px -105px;}
   #here li.rss a{background-position:-64px -71px;}				#here li.rss a:hover{background-position:-64px -105px;}
   #here li.facebook a{background-position:-96px -71px;}		   #here li.facebook a:hover{background-position:-96px -105px;}
   #here li.lastfm a{background-position:-128px -71px;}			#here li.lastfm a:hover{background-position:-128px -105px;}
   #here li.twitter a{background-position:-159px -71px;}			#here li.twitter a:hover{background-position:-159px -105px;}
   #here li.flickr a{background-position:-192px -71px;}			#here li.flickr a:hover{background-position:-192px -105px;}
   #here li.delicious a{background-position:-224px -71px;}		#here li.delicious a:hover{background-position:-224px -105px;}
   #here li.friendfeed a{background-position:-256px -71px;}		#here li.friendfeed a:hover{background-position:-256px -105px;}
   #here li.deviantart a{background-position:-320px -71px;}		#here li.deviantart a:hover{background-position:-320px -105px;}


/* Footer
---------------------------------------------------------------- */
#footer{clear:both; width:544px; height:71px; background:url(../img/global/footer.jpg) bottom center no-repeat;}
#footer p{text-align:center; font-size:13px;}