@charset "utf-8";
/* CSS Document */

* {border:none; padding:0; margin:0;}
html {overflow:hidden; height:100%;}
body {background:#ebebeb; font-family:Arial, sans-serif; overflow:hidden; height:100%;}
h3 {color:#ebebeb; font-weight:lighter; font-size:1.5em; margin-bottom:20px;}
.style1 {color:#274556; font-size:0.95em;}
.style2 {color:#536a77; font-size:1.05em;}
.style3 {color:#617682; font-size:1.2em;}
.style4 {color:#9ba7ae; font-size:1.4em;}
.style5 {color:#d7dfe4; font-size:1.6em;}
#programmingLanguage {width:280px;}
.date ul li {list-style:none;}
.date .year {font-size:2em; font-weight:bold; color:#1c3c4e; float:left; width:100px; text-align:right; margin-right:10px;}
.date .title {color:#a6b1b7; width:200px; display:block; float:left; margin-top:2px;}
.date .subTitle {font-size:0.95em; color:#788a94; width:200px; display:block; float:left;}
#overlay {background:#f0f0f0; visibility:hidden; opacity:0;  position:absolute; z-index:100; width:100%; height:100%; cursor:pointer; }

a.hyperlink {color:#e56a1d; text-decoration:none; padding:2px 0;}
a.hyperlink:hover {text-decoration:none; color:#ebebeb !important; background:#e56a1d; padding:2px 5px !important;}
.clear {clear:both; height:0; line-height:0;}
.panel {background:#05283c; position:absolute; top:0; left:0; z-index:101; display:none; }
.panel .button {position:absolute; cursor:s-resize; text-indent:-777em;}
.panel a.hyperlink:hover {background:#8697A1 !important; color:#05283c !important;}
.panel .shadow {width:100%; height:26px; background:url(../medias/panel_shadow.png) repeat-x; position:absolute; bottom:-26px;}
.panel .slider {width:100%; height:0; background:#fae1d2; position:absolute; bottom:-8px; overflow:hidden;}
.panel .slider div.knob {background:#e56a1d; width:50px; height:6px; cursor:w-resize;}
.panel .block {float:left; height:100%; width:370px;  padding:20px; color:#788a94;}
.panel .block p {font-size:0.8em;}
.panel .block li {list-style:none; font-size:0.8em; margin-bottom:2px;}
.panel .block .pointyWrapper li {margin-bottom:0; font-size:1em;}
.panel .block .pointyDivot {left:-9px !important;}
.panel .panelContent {position:absolute; top:0; left:0;}
.panel#about .button {background:url(../medias/en/mainMenu_about.png) no-repeat; width:107px; left:45%;  height:134px; bottom:-134px;}
.panel#about #experience {width:320px;}
.panel#twitter .button {background:url(../medias/en/mainMenu_twitter.png) no-repeat; width:86px; height:140px; left:80%; bottom:-140px;}
.panel#twitter {}
.panel#twitter .post {float:left; width:295px; padding:20px; height:100%; font-size:14px; font-weight:lighter; position:relative;}
.panel#twitter .post h3 {background:url(../medias/twitter_bird.gif) no-repeat; padding:0 0 5px 65px; position:relative; margin-bottom:0;}
.panel#twitter .post h3 a {color:#ebebeb; text-decoration:none;}
.panel#twitter .post h3 a:hover {text-decoration:underline;}

.panel#twitter .post .info {width:200px; position:absolute; top:47px; left:85px;}
.panel#twitter .post .info .hour {color:#5c717e; margin-right:10px; float:left;}
.panel#twitter .post .info .from {color:#5c717e; float:left; color:#b1babf; width:130px;}
.panel#twitter .post .info .from a {color:#b1babf; text-decoration:none;}
.panel#twitter .post .info .from a:hover {text-decoration:underline;}
.panel#twitter .post .text {background:url(../medias/twitterBg_top.gif) no-repeat #1c3c4e; display:block; padding-top:30px; width:310px; overflow:hidden; margin:0 0 0 5px;}
.panel#twitter .post .text p {font-size:12px; line-height:1.6em; background:url(../medias/twitterBg_bottom.gif) no-repeat bottom; padding:15px 20px; color:#b7bfc4;}
.panel#twitter .twitterError {width:625px; height:200px; background:url(../medias/twitter_bigBird.gif) no-repeat;}
.panel#twitter .twitterError .content {margin-left:315px; width:280px; color:#84949d; padding-top:50px; position:relative; height:125px;}
.panel#twitter .twitterError .content h3 {margin-bottom:5px;}
.panel#twitter .twitterError .content p {color:#84949d; font-size:0.8em; line-height:1.4em;} 
.panel#twitter .twitterError .content cite {color:#adb7bc; font-size:0.8em; text-align:right; position:absolute; bottom:0; right:10px;}

.panel#contact .button {background:url(../medias/en/mainMenu_contact.png) no-repeat; width:140px; height:102px; left:10%; bottom:-102px;} 
.panel#contact h3 {font-size:1.5em; font-weight:lighter; color:#fff;}
.panel#contact .block {height:auto; width:400px;}
.panel#contact .formItem {margin-bottom:5px; padding:0;}
.panel#contact .formItem label {color:5c717e; font-size:0.9em; display:block; width:100px; text-align:right; margin-right:10px; display:block; float:left; margin-top:2px;}
.panel#contact .formItem input, .panel#contact .formItem textarea {float:right; width:280px; background:#ebebeb; padding:4px 5px; font-size:11px; color:#05283c;}
.panel#contact .formItem textarea {height:70px;}
.panel#contact .formButton input {float:right; background:#ebebeb; color:#05283c; padding:3px 20px; margin-left:5px;}
.panel#contact .item {margin-bottom:10px; line-height:1.2em;}
.panel#contact .item .left {color:#465f6d; font-size:0.9em; float:left; width:80px; text-align:right;}
.panel#contact .item .right {color:#8697a1; font-size:0.9em; float:left; width:220px; margin-left:20px;}
.panel#contact .item .right a {color:#8697a1; text-decoration:underline;}
.panel#contact .item .right a:hover {text-decoration:none;}
.panel#contact .block#directway {width:350px;}
.panel#contact .block#directway .item .right {width:250px;}
.panel#contact .block#quickway {width:330px;}


#content {height:232px; width:860px; position:absolute; top:50%; left:50%; margin-left:-445px; margin-top:-116px; z-index:1;}
#logoInfo {width:442px; float:left; margin-top:50px;}
#screenshots {float:left; margin-left:35px; position:relative;}
#screenshots p {font-size:0.7em; color:#002438; float:left; margin-top:1px;}
#screenshots p a {line-height:2em;}
#next {margin-left:10px;}
#navigation {float:right; font-size:0.75em; font-weight:bold;}
#logoInfo #email { color:#e56a1d; font-size:0.8em; text-decoration:underline; float:right; margin-right:5px;}
#logo {background:url(../medias/jean-francois_desgagne_logo.gif) right top no-repeat; width:100%; height:52px; text-indent:-777em;} 
#subLogo {background:url(../medias/jean-francois_desgagne_subLogo.gif) right top no-repeat; width:100%; height:28px; text-indent:-777em;} 
#mask {border:4px solid #e5a277; margin-bottom:10px; position:relative; width:373px; height:198px; overflow:hidden;}
#mask #handler {position:absolute;}
#mask #handler h3 {display:block; float:left; width:373px;}
#mask #handler h3 span {display:none;}

#logos {position:absolute; bottom:10px; right:10px; height:25px;}
#logos li {list-style:none; text-indent:-777em; display:inline; float:left;}
#logos li a {display:block; background-repeat:none; outline:none;}
#logos li.terrain {width:41px; margin-right:5px; margin-top:-2px;}
#logos li.terrain a {background-image:url(../medias/logo_terrain.gif);}
#logos li.terrain a:hover {background-image:url(../medias/logo_terrain_rll.gif);}
#logos li.mootools {width:87px; margin-right:2px; margin-top:-2px;}
#logos li.mootools a {background-image:url(../medias/logo_mootools.gif);}
#logos li.mootools a:hover {background-image:url(../medias/logo_mootools_rll.gif);}
#logos li.twitter {width:70px; margin-top:3px; margin-right:5px; }
#logos li.twitter a {background-image:url(../medias/logo_twitter.gif);}
#logos li.twitter a:hover {background-image:url(../medias/logo_twitter_rll.gif);}
#logos li.facebook {width:54px; margin-top:2px; }
#logos li.facebook a {background-image:url(../medias/logo_facebook.gif); height:18px;}
#logos li.facebook a:hover {background-image:url(../medias/logo_facebook_rll.gif);}
#logos li.delicious {width:15px; margin-top:3px; margin-left:5px;}
#logos li.delicious a {background-image:url(../medias/logo_delicious.gif); height:15px;}
#logos li.delicious a:hover {background-image:url(../medias/logo_delicious_rll.gif);}

/* LIGHTBOX */
.jfdLB_container {position:absolute; visiblity:hidden; z-index:102; text-align:left; border:4px solid #e5a277; background:#ebebeb;}
.jfdLB_loading {background:url(../medias/loader.gif) center no-repeat #ebebeb;}
.jfdLB_containerBox {position:relative; width:100%; height:100%;}
.jfdLB_closeBtnContainer {position:absolute; top:-98px; right:50px; width:133px; height:94px; overflow:hidden;}
.jfdLB_closeBtn { background:url(../medias/close.gif) no-repeat; cursor:pointer; bottom:-94px; width:100%; height:100%; position:absolute;}
.jfdLB_controlsContainer {position:absolute; left:0; height:45px; overflow:hidden; width:100%; margin-top:10px}
.jfdLB_controls {color:#002438; font-size:0.75em; overflow:hidden; position:absolute; top:-45px; width:100%;}
.jfdLB_controls a {color:#e56a1d;}
.jfdLB_navigation {float:right; line-height:2em;}
.jfdLB_navigation li {color:#e56a1d; display:inline; margin-left:10px;}
.jfdLB_navigation li a {padding:2px 5px;}
.jfdLB_navigation li a.disabled {color:#e5a277; cursor:default;}
.jfdLB_navigation li a.disabled:hover {color:#e5a277 !important; cursor:default; background:none;}
.jfdLB_title {position:relative; float:left; font-size:11px; font-weight:normal; text-align:left; display:inline; margin-top:5px;}
.jfdLB_title a.hyperlink {line-height:2em;}