@import url(reset.css);

/**
 *
 *
 *
 *
 *  STRUCTURE GLOBALE
 *
 *
 *
 *
*/

html, body {
	font:  "Lucida Sans Unicode";
	color: #666666;
background-color : transparent;	
}

#top {
  top:0;
  left:0;
  width:100%;
}

#world {
padding: 0; margin: 0; overflow: hidden; position : absolute; z-index: 0;
}


#header {
width: 440px;
height : 315px;
margin : 0 auto;
padding-top : 50px;

}

#wrapper {
	width: 939px;
	height : 100%;
	margin : 0 auto;
background-color : transparent;
}

/**
 *
 *
 *
 *
 *  HEADER et FOOTER
 *
 *
 *
 *
*/

#logo {
	background: url("../images/logo/logoss.gif") 0 0 no-repeat;
	width : 252px;
	height : 168px;
	position : relative;
	margin-top : 10px;
	margin-left : 10px;
}


/*
 *
 *
 *
 *
 *  NAVIGATION
 *
 *
 *
 *
*/

#slideshow {position:relative;height:18x;}
#slideshow IMG {position:absolute;top:0;left:0;z-index:-1;}
#slideshow IMG.active {z-index:-3;}
#slideshow IMG.last-active {z-index:-2;}



/**/

.headMenu { }
#navbar ul{padding: 0px;margin: -50px 105px; list-style: none;}
#navbar ul li{margin: 0 10px; }
#navbar ul li a{float : left;  background: url("../images/menu/menu.gif") 0 0 no-repeat; }

#navbar ul.menu #web a {width: 100px; height: 82px; background-position : 0px 0px ;}
#navbar ul.menu #web a:hover {background-position: -121px 6px;}
#navbar ul.menu #web a:active {background-position: 0px  0px;}

#navbar ul.menu #bio a {width: 100px; height: 30px; background-position: 0px -85px ;}
#navbar ul.menu #bio a:hover {background-position: -121px -79px;}

#navbar ul.menu #contact a {width: 120px; height: 60px; background-position: 0px -115px ;}
#navbar ul.menu #contact a:hover {background-position: -121px -109px;}
#navbar ul.menu #contact a:active {background-position: -121px -109px;}


/**
 *
 *
 *
 *
 *  BODY
 *
 *
 *
 *
*/

#index {
height : 600px;
width : 600px;
z-index: -999;
background-color : transparent;
}

#content{
	overflow:hidden;
	width: 939px;
	height : 100%;
	min-height : 200px;
	max-height : 500px;
	margin : 0 auto;
	background-color : transparent;
	position:relative;
	
}

.section{
	width:6000px;
	position:relative;
}

.section .sub{
	position:relative;
	float:left;
	padding-top : 20px;

	width:939px;
	height : 500px;
}


.arrows {margin-left: 0px; margin-top : 20px;}
.arrows ul{padding: 0px;margin: 10px 0;list-style: none;float: left;clear: left;}
.arrows ul li{float: left;display: inline; height: 40px;}
.arrows ul li a{float: left;height: 40px; background: url("../images/portfolio/navigation.gif") 0 0 no-repeat; }

.arrows ul.navarrows .prev a {margin-left : 20px; width: 40px; background-position: -40px 0;}
.arrows ul.navarrows .prev a:hover {background-position: -40px -40px;} 
.arrows ul.navarrows .prev a:active {background-position: -40px -40px;}

.arrows ul.navarrows .next a {margin-right : 20px;  width: 40px; background-position : 0px 0px ;}
.arrows ul.navarrows .next a:hover {background-position: 0px -40px;}
.arrows ul.navarrows .next a:active  {background-position: 0px  -40px;}


.portfolio-left {
width : 620px;
height : 411px;
float : left;
margin-left : 10px;
margin-right : 10px;
}

.portfolio-about {
width : 200px;
height : 401px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
border-radius : 10px;
border : 1px solid #0e79c3;
float : left;
padding-left : 10px;
padding-right : 10px;
padding-top : 10px;
z-index : 2;
}

.portfolio-about p {
font : Trebuchet MS;
color: #777;
}

.portfolio-about h1 {
font-size : 20px;
color : #0e79c3;
width : auto;
margin-bottom : 30px;
text-transform : uppercase;
}

.portfolio-about h3 {
font-size : 16px;
color : #0e79c3;
margin-top : 20px;
width : auto;
text-transform : uppercase;
}

.view-site {
float : right;
margin-top : 40px;
color : #0e79c3;
text-decoration : none;
}



/**
 *
 *
 *
 *
 *  PORTFOLIO
 *
 *
 *
 *
*/

/*
	background : url("../images/screen.jpg") no-repeat;
	width: 688px; 
	height: 387px; 


#overscroll {
	width : 939px;
	height : 500px;
	overflow: hidden; 
	position : absolute;
	margin-top : 30px;
}

#overscroll-holder {
	margin-left:0px;
	margin-right:0px;
	width: 4000px;
}

.works-image {
	width:300px; 
	height:200px; 
	float:left; 
	margin-right:0px;
	padding : 20px;
}

.plus {
position : absolute;
padding-left : 280px;
margin-top : -50px;
}

.view-site {
	text-indent : -9999px;
	background: url("../images/portfolio/viewsite.gif") no-repeat;
	height : 115px;
	width : 99px;
	position : absolute;
	-moz-border-radius : 10px;
	-webkit-border-radius : 10px;
	border-radius : 10px;
	border-bottom-left : 1px solid #0e79c3;
	margin-left : 111px;
	margin-top : 64px;
	
}
*/

#overscroll {
	width : 939px;
	height : 500px;
	overflow: hidden; 
	position : absolute;
	margin-top : 30px;
}

#overscroll-holder {
	margin-left:0px;
	margin-right:0px;
	width: 4000px;
}

.works-image {
	width:300px; 
	height:200px; 
	float:left; 
	margin-right:0px;
	padding : 20px;
}

.plus {
position : absolute;
padding-left : 280px;
margin-top : -50px;
}

.view-site {
	text-indent : -9999px;
	background: url("../images/portfolio/viewsite.png") no-repeat;
	height : 115px;
	width : 99px;
	position : absolute;
	-moz-border-radius : 10px;
	-webkit-border-radius : 10px;
	border-radius : 10px;
	border-bottom-left : 1px solid #0e79c3;
	margin-left : 110px;
	margin-top : 0px;
	
}


/**
 *
 *
 *
 *
 *  BIO
 *
 *
 *
 *
*/

#blockleft{
float : left;
width : 300px;
height : 200px;
margin-left: 100px;
margin-top : -10px;
}

#blockleft p {
font : Trebuchet MS;
text-align: justify; 
text-justify: newspaper ;
margin-top : 20px;
}

#blockright {
float : left;
margin-top : 30px;
}

#blocktext {
margin : 50px;
padding-top : 50px;
}

/*
*
*
*
*	NAVIGATION BIO
*
*
*
*/

.biomenu {position : absolute; margin-left: 40px; margin-top : 20px;}
#bionavbar ul{padding: 0px;margin: 10px 0;list-style: none;float: left;clear: left;}
#bionavbar ul li{float: left;display: inline;margin: 0 10px;height: 22px;}
#bionavbar ul li a{float: left;height: 20px;background: url("../images/menu/menubio.png") 0 0 no-repeat; }

#bionavbar ul.submenu #codage a {width: 100px; background-position : 0px 0px ;}
#bionavbar ul.submenu #codage a:hover {background-position: 0px -20px;}
#bionavbar ul.submenu #codage a:active {background-position: 0px  -20px;}

#bionavbar ul.submenu #design a {width: 70px; background-position: -120px 0;}
#bionavbar ul.submenu #design a:hover {background-position: -120px -20px;}
#bionavbar ul.submenu #design a:active {background-position: -120px -20px;}

#bionavbar ul.submenu #marketing a {width: 110px; background-position: -200px 0; margin-left : -20px;}
#bionavbar ul.submenu #marketing a:hover {background-position: -200px -20px; margin-left : -20px;}
#bionavbar ul.submenu #marketing a:active {background-position: -200px -20px; margin-left : -20px;}

#bionavbar ul.submenu #bonus a {width: 62px; background-position: -340px 0; }
#bionavbar ul.submenu #bonus a:hover {background-position: -340px -20px;}
#bionavbar ul.submenu #bonus a:active {background-position: -340px -20px;}

/**
 *
 *
 *
 *
 *  CONTACT
 *
 *
 *
 *
*/

.divlinestopcon {
  background: url("../images/lines/divlines.gif") no-repeat;
	position : absolute;
	width : 861px;
	height: 2px;
	margin-top : 20px;
	margin-left : 20px;
}

.divlinesbottomcon {
  background: url("../images/lines/divlines.gif") no-repeat;
	position : absolute;
	width : 861px;
	height: 2px;
	margin-top : 450px;	
	margin-left : 20px;
}

#blockleftcontact{
float : left;
width : 300px;
height : 200px;
margin-left: 60px;
margin-top : 20px;
}

#blockrightcontact {
float : left;
margin-top : -40px;
margin-left : 80px;
z-index : 99;
}

.headMenu {position : absolute; margin-top : -150px; padding-left: 200px;}
#contactnavbar ul{padding: 0px;margin: 10px 0;list-style: none;float: left;clear: left;}
#contactnavbar ul li{float: left;display: inline;margin: 0 10px;height: 22px;}
#contactnavbar ul li a{float: left;height: 84px;background: url("../images/menu/menu.png") 0 0 no-repeat; }

#contactnavbar ul.contactmenu #web a {width: 205px; background-position : 0px -84px ; margin-top : 22px;}
#contactnavbar ul.contactmenu #web a:hover {background-position: 0px 0px; margin-top : 0px;}
#contactnavbar ul.contactmenu #web a:active {background-position: 0px  0px;}

#contactnavbar ul.contactmenu #bio a {width: 171px;background-position: -206px 0; margin-top : 22px;}
#contactnavbar ul.contactmenu #bio a:hover {background-position: -206px -84px; margin-top : 21px;}
#contactnavbar ul.contactmenu #bio a:active {background-position: -206px -84px; margin-top : 21px;}

#contactnavbar ul.contactmenu #contact a {width: 260px; background-position: -380px -84px; margin-top : 15px;}

#linnavbar {
margin-top : 40px;
}

#contact-area {
	width: 300px;
	margin-left : 20px;
	margin-top : 60px;
	z-index : 99;
}

#contact-area input, #contact-area textarea {
	z-index : 99;
	padding: 10px;
	width: 300px;
	font-family: Helvetica, sans-serif;
	font-size: 1.0em;
	margin: 0px 0px 10px 80px;
	border: 1px solid #ccc;
	background-color : #e8e8e8;
}

#contact-area textarea {
	height: 100px;
	z-index : 99;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #127bc4;
	z-index : 99;
}

#contact-area input.submit-button {
	width: 100px;
	margin : 10px;
	float: right;
	z-index : 99;
	    border: 1px solid #0E79C3;
    background: #fff;
		text-transform : uppercase;
}



.links {margin-top : 20px; 	z-index : 99;}
#linnavbar ul li a{float: left;height: 73px;background: url("../images/contacts/contactslinks.gif") 0 0 no-repeat; }

#linnavbar ul.links #facebook a {width: 80px; background-position : 0px 0px ;}
#linnavbar ul.links #facebook a:hover {background-position: 0px -73px;}
#linnavbar ul.links #facebook a:active {background-position: 0px  -73px;}

#linnavbar ul.links #twitter a {width: 80px; background-position: -80px 0;}
#linnavbar ul.links #twitter a:hover {background-position: -80px -73px;}
#linnavbar ul.links #twitter a:active {background-position: -80px -73px;}

#linnavbar ul.links #linkedin a {width: 80px; background-position: -160px 0; }
#linnavbar ul.links #linkedin a:hover {background-position: -160px -73px; }
#linnavbar ul.links #linkedin a:active {background-position: -160px -73px; }