/* Made by Damien Delire with enthusiasm ! */

/*  Color reference

blue mydesk: #09f
pink ?: #f9c

*/



/*---------------------------------------------------------------------------------------------------------- Global structure --*/

* { margin: 0; padding: 0;}
body { background: url(../image/wave.gif) no-repeat;}
#container { height:1800px; width:6000px; background:url(../image/border_container.png) no-repeat;}
.title { width: 142px; height: 55px; position: absolute; margin: 60px 700px; z-index: 501;}
.nav_left { width: 160px; height: 250px; position: fixed; top: 220px; left: 170px; z-index: 0;}
.nav_left ul li { line-height: 35px; list-style: none; text-indent:-9999px;}
.nav_left ul li a { display: block; width: 165px; height: 35px;}
.nav_left_w { width: 177px; height: 661px; position: absolute; top: 1120px; left: 1670px; z-index: 512; background:#09f;}
.nav_left_w ul li { list-style: none; line-height: 35px; padding-left: 10px; text-indent:-9999px;}
.nav_left_w ul li a { display: block; width: 165px; height: 35px;}
.page { background: #0cf; color: #fff;}
#blackstrip { width: 5885px; height: 150px; position: absolute; margin: 750px 16px; z-index: 9;}
#blackstrip h2 { font-size: 60px; line-height: 55px; color: #222;}
img { border:0;}
#texte { font:normal 0.8em/1.4em arial; color:#333; width: 800px; margin: 20px auto; text-align: justify; background:#fff; padding: 40px; }
#texte h1 { margin:50px 0 40px 0; }
#texte li { margin-bottom:20px; list-style: outside; }
.tw { margin-left:100px}
iframe { position:fixed; bottom:0px; width:100%; min-height:270px; z-index:2000; border:0;}
.gplus {position:fixed; bottom:50px; right:-10px; z-index:1001}
.facebook { position:fixed; bottom:0; right:20px;}
.vertical { position:fixed; top:50px; right:20px; z-index:5000 }

/*-------------------------------------------------------------------------------------------------------------- Navigation --*/

.nav_a { background:url(../image/nav_a.png) no-repeat;}
.nav_b { background:url(../image/nav_b.png) no-repeat;}
.nav_c { background:url(../image/nav_c.png) no-repeat;}
.nav_d { background:url(../image/nav_d.png) no-repeat;}
.nav_e { background:url(../image/nav_e.png) no-repeat;}
.nav_f { background:url(../image/nav_f.png) no-repeat;}
.nav_g { background:url(../image/nav_g.png) no-repeat;}
.nav_a a:hover { background:url(../image/nav_ah.png) no-repeat;}
.nav_b a:hover { background:url(../image/nav_bh.png) no-repeat;}
.nav_c a:hover { background:url(../image/nav_ch.png) no-repeat;}
.nav_d a:hover { background:url(../image/nav_dh.png) no-repeat;}
.nav_e a:hover { background:url(../image/nav_eh.png) no-repeat;}
.nav_f a:hover { background:url(../image/nav_fh.png) no-repeat;}
.nav_g a:hover { background:url(../image/nav_gh.png) no-repeat;}

/*-------------------------------------------------------------------------------------------------------- Navigation my desk --*/

.nav_wa { background:url(../image/nav_wa.gif) no-repeat;}
.nav_wb { background:url(../image/nav_wb.gif) no-repeat;}
.nav_wc { background:url(../image/nav_wc.gif) no-repeat;}
.nav_wd { background:url(../image/nav_wd.gif) no-repeat;}
.nav_we { background:url(../image/nav_we.gif) no-repeat;}
.nav_wf { background:url(../image/nav_wf.gif) no-repeat;}
.nav_wg { background:url(../image/nav_wg.gif) no-repeat;}


/*-------------------------------------------------------------------------------------------------------------------- Header --*/

#header { width: 1495px; height: 750px; position: absolute; z-index: 511; }
#logo { width: 67px; height: 264px; position: absolute; margin: 225px 80px;}
#left_header { width: 838px; height: 143px; position: absolute; margin: 520px 12px; background: url(../image/left_header.png) no-repeat; z-index: 8;}
#intro_title { width:400px; height:25px; position:absolute; margin: 530px 50px; background: #000;}
#intro_title h1 { font: italic 16px Georgia, arial; color: #fff; padding: 3px 5px;}
#intro_title h1 span { unicode-bidi : bidi-override; direction : rtl ; }
#cite { position:absolute; width:736px; height: 168px; margin:300px 500px;}


/*------------------------------------------------------------------------------------------------------------------ Identity --*/


#content_identity { height:750px; width:1500px; position: absolute; margin-left: 1500px; z-index: 510;}
.home { width: 56px; height: 20px; position: absolute; margin: 50px 320px; z-index: 502;}
.home#top { margin:0;}
#identity_pipe { width: 862px; height: 1112px; position: absolute; background: url(../image/identity_pipe.png) no-repeat; z-index: 500; margin: 0px 150px;}
#identity_gallery { width: 292px; height: 292px; position: absolute; margin: 220px 0px 0px 430px; z-index: 520; }
#identity_gallery h1 { font: normal 0.9em georgia; color: #FFF; margin: 10px 0 10px 0; }
.identity_paypal { position:absolute; margin:580px 916px; z-index:503}


/*--------------------------------------------------------------------------------------------------------------------- Print --*/

#content_print { height:750px; width:1500px; position: absolute; margin-left: 3000px; z-index: 3;}
#print_gallery { width: 283px; height: 276px; position: absolute; margin: 220px 430px; z-index: 520;}
#print_gallery h1 { font: normal 0.9em georgia; color: #FFF; margin: 20px 0 10px 0; }

/*----------------------------------------------------------------------------------------------------------------- Webdesign --*/

#content_web { height:750px; width:1500px; position: absolute; margin-left: 4500px; z-index: 4;}
#web_gallery { width: 283px; height: 276px; position: absolute; margin: 220px 430px; z-index: 520;}

/*------------------------------------------------------------------------------------------------------------------ About me --*/


#content_about { height:891px; width:1500px; position: absolute; margin: 900px 0px; z-index: 507; background:url(../image/content_about_background.gif) }
#about_me { position:absolute; margin: 400px 430px; width: 682px; background:url(../image/transparent_bg.png); color: #fff; font: 0.8em Georgia, serif; padding: 20px; height: 310px;}
#about_right { width: 1080px; height: 18px; position: absolute; margin: 750px 430px; background: #09f; z-index: 3;}
#about_me p { margin: 0; padding-bottom: 12px; }
#about_me a.bubble, #about_me a.bubble:visited { color:#fff; position:relative; z-index:1; text-decoration:none; border-bottom: 1px dotted #fff; background: #666;}
#about_me a.bubble em {position:absolute; visibility:hidden; width:200px; height:0;}
#about_me a.bubble:hover {border:0; z-index:1000;}
#about_me a.bubble:hover em {visibility:visible; height:150px; cursor:pointer; z-index:500;}
#about_me a.bubble:hover em img {border:0;}
#about_me .bqstart { width: 0px; float: left; margin: -50px 0px -50px 0px; height: 45px;  padding-top: 0px; font-size: 1200%; color: #fff;}
#about_me .bqend { width:0; float: right; font-size: 1200%; color: #fff; height: 50px; position: absolute; margin: -10px 10px;}
#about_me .first_letter { font-size: 48px; padding-left: 60px; }


/*--------------------------------------------------------------------------------------------------------------------- My desk --*/


#content_office { height:891px; width:1500px; position: absolute; margin: 900px 1500px; background: #09f; z-index: 508;}
#thedesk { width: 800px; height: 534px; position: absolute; margin: 200px 400px; background: url(../image/thedesk.gif) no-repeat; z-index: 1000; }
.desk_left { width: 142px; height: 55px; position: absolute; margin: 0px -43px;}
.desk_right { width: 142px; height: 55px; position: absolute; margin: 0px 1413px;}
.home_desk { width: 56px; height: 20px; position: absolute; margin: 50px 1120px; z-index: 501;}
#desk_txt { margin: 400px 1190px; font-size: 2em; color:#fff; position:absolute; text-align:right; width: 170px; }
#desk_txt_left { margin: 800px 370px; font-size: 1.8em; color:#fff; position:absolute; width: 350px; }
.square {position: absolute; height:100px; width:100px; cursor: move; padding-left:60px;}
.square a {font-family: georgia; font-size:60px; position:absolute; text-decoration:none; color:#333;}
.square a b {display:none; bottom:80px; left:50px; position:absolute;}
.square a:hover b {display: block; position: relative; margin-bottom:50px; width:250px; height:80px;}
#box1 { background: url(../image/tyrano.png) no-repeat; margin: 370px 500px; }
#box2 { background: url(../image/teeth.png) no-repeat; margin: 250px 10px; }
#box3 { background: url(../image/brain.png) no-repeat; margin: 120px 320px; }
#box4 { background: url(../image/coffee.png) no-repeat; margin: 30px 520px; }
#box5 { background: url(../image/eye.png) no-repeat; margin: 400px 100px; }


/*--------------------------------------------------------------------------------------------------------------------- Contact--*/


#content_contact { height:894px; width:1500px; position: absolute; margin: 900px 3000px; z-index: 7; font: 16px Georgia, serif; }
#form form { background: url(../image/transparent_bg.png); padding: 30px 50px 30px 0px; width: 450px; margin-top: 140px; height: 300px; text-align:right;}
#form { height:514px; width:656px; position: absolute; margin: 250px 580px; background: url(../image/back_flowers.gif) no-repeat top right; }
#form p { font-size: 14px; color: #fff; padding-bottom: 10px;}
#form input { width: 300px; border: 0; height: 25px;}
#form textarea { width: 299px; height:150px; overflow: auto; border: 0; }
#form label.top { width:147px; float: left; }
#form input.submit{ display: inline; float: right; background: url(../image/submit.gif) no-repeat; width: 110px; height: 40px; border: 0px; cursor: pointer;}
#contact_left { width: 1080px; height: 18px; position: absolute; margin: 750px 0px; background: #09f;}
#contact_texte { width: 363px; height: 100px; position: absolute; margin: 500px 170px; }
#contact_texte p { font-size: 2em; background: #f69;}
#content_contact .info { width: 374px; height: 136px; position: absolute; margin: 220px 580px; z-index: 10;}
address { font: italic 0.9em/1.2em georgia;}
address span { unicode-bidi : bidi-override; direction : rtl ; }
address a { border-bottom: 1px dotted #333; text-decoration: none; color: #333;}
.hidden { display:none;}


/*---------------------------------------------------------------------------------------------------------------------Links--*/


#content_links { height:891px; width:1400px; position: absolute; margin: 900px 4500px; background: url(../image/content_links_bg.gif) no-repeat;}
.home_links { width: 56px; height: 20px; position: absolute; margin: 50px 900px; z-index: 501;}
#first_element { width: 600px; height: 600px; position: absolute; margin: 100px 700px; background:url(../image/first_element.png) no-repeat; z-index: 11;}
#visuallplan { width: 1400px; height: 369px; position: absolute; margin: 522px 0px; background:url(../image/bottom_element.png) no-repeat;}
#visuallplan p {color:#fff; font: normal 0.7em georgia; margin: 40px 135px;}
#visuallplan a { color:#fff;}
#visuallplan img{ position: absolute; margin:-88px 300px; }
#tanks { position:absolute; margin:50px 350px; width:274px; }
#tanks ul { list-style:none;}
#tanks ul li { display:inline; padding:0; margin:0;}
#tanks p { font: italic 0.8em/1.5em georgia, arial; color:#333; padding-top:10px; padding-bottom:10px;}
#tanks h2 { background:url(../image/star.gif) no-repeat 100px;}
#links { position:absolute; margin:350px 350px; width:274px; }
#links ul { list-style:none; margin-top:10px}
#links ul li { display:inline; padding:0; margin:0;}



/*-------------------------------------------------------------------------------------------------------------------Gallery--*/



.switch { display:block; width:50px; height:50px; cursor:pointer; float:left; margin:5px; text-align:center; }
.switch img { border: 4px solid #ccc;}
.switch img:hover { border: 4px solid #111;}
.switch img:active { border: 4px dashed #111;}
.hide { display: none;}
.show { position:absolute; top:0; left:320px; display:block; width:355px; z-index:500; background: url(../image/back_gallery.png) repeat; padding: 25px 25px 20px 20px; font-family: Georgia, arial; }/*left règle la position du contenu*/
.show a { color: #fff; text-decoration: none; border-bottom: 1px dotted #fff; font: italic 0.7em georgia; }
.show a:active { text-decoration: none;}
.show span { font: bold 36px Georgia, serif; position:relative; margin:-40px 5px; width:0px; float: left; cursor:pointer; }
.show p { font-size:0.8em; margin-top: 20px; padding-bottom: 10px; color: #fff; }
.show dl { font-size:0.9em; color:#fff;}
.show dt { font-weight:bold; padding-bottom: 0.5em;}
.show dd { padding-bottom:0.8em;}
.clear {clear:both;}
blockquote.testimonial p { position:absolute; margin: 70px -80px; font: italic 1em georgia, arial; width: 500px; color: #333; }
blockquote.testimonial  p  span.q { width:0; float: left; font-size: 9em; color: #ccc; margin-top: -30px; margin-left: -90px; }