/* CSS Document */

/*************
 ************* RESET
 *************/
* {
	margin: 0px; padding: 0px;
	font-size: 1em; line-height: 15px; font-family: Georgia, Helvetica, sans-serif; font-weight: normal;
	text-decoration: none;
	border: 0px none; list-style: none;
	font-style: italic;
}   
/*************
 ************* GLOBALS
 *************/
html { width: 100%; height: 100%;}
body {
	background: #e9eaea url(../img/bg/bg.jpg) no-repeat center 0;
	font-size: 10px; color: #000;
	width:100%; height: auto;
}
a {color: #CA1134;}
a:hover {color: #000;}
strong {font-weight: bold;}  
/*************
 ************* PQP Navigation
 *************/
 
 
#pqpNavigation {
	height: 26px;
	overflow: hidden;   
	position: fixed; top:0; left:0; z-index: 10;                                                   
	padding: 0 0 0 39px; margin: 0;
	background: transparent url(../img/visu/sprite.png) no-repeat -594px -750px;
	cursor: pointer;
}
#pqpNavigation:hover {
	background-position: -594px -776px;
}
#pqpNavigation li {
	height: 26px;
	margin: 0 1px 0 1px; padding: 0px;
	display: inline-block; 
}
#pqpNavigation li a, #pqpNavigation li span {
	height: 20px;
	display: block;
	padding: 5px 5px 0 5px;  
	font-size: 10px; font-weight: bold; color: #808080; font-family: Arial, Helvetica, sans-serif; font-style: normal;     
	background-color: #fff;
}
#pqpNavigation li a:hover { 
 	color: #808080;  
	background-color: #E8E6E5;
}
#pqpNavigation li span {
	cursor: default;          
	background-color: #808080;
	color: #FFF;        
} 
 
/*************
 ************* WRAPPER
 *************/    
#wrapper {
	width: 680px; height: 200px;
	position: relative;       
	margin:145px auto;padding:0 0 0 170px;
}
h1{
	margin-left:120px; padding:0;
	width:560px;height:55px; 
	background: transparent url(../img/visu/sprite.png) no-repeat 130px -55px;
	text-indent: -9999px;
	border-bottom:1px solid #2c2c2c;
}
h2 {
	margin:23px 0 0 473px;
	width:207px;height:22px; 
	background: transparent url(../img/visu/sprite.png) no-repeat 0 -110px;
	text-indent: -9999px;
}
p {
	padding: 20px 50px 0;
	width:450px;
	font-size: 1.4em;
	line-height:1.3em;
}
h3 {
	margin-top:60px;
	width:550px;height:62px; 
	text-indent: -9999px;
}
.item {
	width:550px;
}
#who h3 {margin-top:125px;background: transparent url(../img/visu/sprite.png) no-repeat 0 -140px;}





#navigation {
	position: fixed; top: 260px; left: 50%;
	margin: 0 0 0 340px;
}
* html #navigation {
	display: none;
}
#navigation li {
	width: 40px; height: 40px;
}
#navigation li a {
	outline: 0px none;
	display: block; position: relative;
	width: 40px; height: 40px;
	background: transparent url(../img/visu/sprite.png) no-repeat 0 0;
}
#navigation li a span {
	display: none;	position: absolute;   
	width: auto;  height: 23px;       
	margin: 5px 0 0 40px; padding: 7px 10px 0 15px;      
	background: #808080 url(../img/visu/sprite.png) no-repeat -625px -270px;                                  
	font-size: 1.2em; color: #EBE9E8; font-weight: bold;
}
#navigation li a:hover {
	overflow: visible;
	background: transparent url(../img/visu/sprite.png) no-repeat 0 0;
}                
#navigation li a:hover span {
	display: inline-block;
}
#navigation li.who a {background-position: -550px -10px;}
#navigation li.who a:hover {background-position: -590px -10px;}
#navigation li.skills a {background-position: -550px -50px;}
#navigation li.skills a:hover {background-position: -590px -50px;}
#navigation li.experiences a {background-position: -550px -90px;}
#navigation li.experiences a:hover {background-position: -590px -90px;}
#navigation li.works a {background-position: -550px -130px;}
#navigation li.works a:hover {background-position: -590px -130px;}
#navigation li.awards a {background-position: -550px -170px;}
#navigation li.awards a:hover {background-position: -590px -170px;}
#navigation li.contact a {background-position: -550px -210px;}
#navigation li.contact a:hover {background-position: -590px -210px;}

/*************
************* SKILLS
*************/  
#skills h3 {background: transparent url(../img/visu/sprite.png) no-repeat 0 -210px;}
#skills ul {
	margin: 20px 0 0 50px;   
}
#skills li {                    
	position: relative;
	width: 375px; height: 50px;
	margin: 0 0 5px 0;
	background-color: #808080;
	font-size: 1.4em;
}
#skills ul li span {
	display:block;
	height: 50px;
	background-color: #2c2c2b;
}
#skills ul li span span {  
	height: 35px;
	padding: 16px 0 0 65px;
	background-color: transparent;
	color: #ebe9e8;
}
#skills ul li span.value {
	display:block; position: absolute; top: 0px; left: 375px;
	padding: 15px 0 10px 10px;  
	height: 25px;  width: 150px;
	background-color: transparent;
	font-size: 1.7em; font-weight: bold; color: #2c2c2b;
}
#skills ul li.more span.value {
	color: #ebe9e8;
}    
#skills ul li.saxo span {
	display:block;
	height: 50px; width: 15px;
	margin-left: -15px;
	background-color: #2c2c2b;
}
#skills ul li.saxo span span {
	height: 35px; width: auto;
	margin: 0; padding: 16px 0 0 80px;
	background-color: transparent;
}

#skills ul li.saxo span.value {
	height: 50px; width: 100px;
	margin: 0;
	background-color: transparent;
}









/*************
************* EXPERIENCES
*************/          
#experiences h3 { background: transparent url(../img/visu/sprite.png) no-repeat 0 -280px;}
#experiences .exp_pro {
	width: 248px; height: 17px;
	margin: 20px 0 10px;   
	background: transparent url(../img/visu/sprite.png) no-repeat 0 -580px;
	overflow:hidden; text-indent: -9999px;
}
#experiences .formations {
	width: 98px; height: 13px;
	margin: 20px 0 10px;
	background: transparent url(../img/visu/sprite.png) no-repeat 0 -560px;
	overflow:hidden; text-indent: -9999px;
}
#experiences p {
	padding: 0px 50px 20px;
}
#experiences .details {
	color: #808080; font-weight: bold;
}
#experiences .date {
	margin: 0 0 0 -25px;
	line-height: 20px;
}
#experiences .description {
	font-size: 0.85em;
}









/*************
************* WORKS
*************/  
#works h3 { background: transparent url(../img/visu/sprite.png) no-repeat 0 -350px;}
#works .wrapper {
	overflow:hidden;
	padding:0; margin: 25px 0 0 0;
	position:relative;
	width:550px;  
} 
#works .carousel {
	position:relative; left: 0;
}      
#works .wrapper ul {
	position: relative;
}
#works .wrapper ul li {
	float: left;
}
#works .wrapper ul li img, #works .wrapper ul li span {
	position: relative;
	display: block;
}
#works .wrapper ul li span.title, #works .wrapper ul li span span.date {
	display:none;
}
#works .wrapper ul li span:hover span {
	display:block;
}
#works .wrapper ul li span span.title {
	position: absolute; bottom:0px; left:0px;
	width: 375px; height: auto;
	padding: 13px 155px 13px 20px;
	background-color: #000000;
	font-size: 1.2em;
}
#works .wrapper ul li span:hover span.title {
	color: #FFF;
}          
#works .wrapper ul li span span.date {
	position: absolute; bottom:0px; right:0px;
	width: 200px; height: auto;
	padding: 13px 20px 13px 0;
	text-align: right;
	color: #FFF;
}       
#works .wrapper ul li span span.date a {color: #CA1134;}
#works .wrapper ul li span span.date a:hover {color: #FFF;}
#works .prev, #works .next { 
	display: block;
	position: absolute; top: 30px;
	height: 230px; width: 19px;     
	text-indent: -9999px; overflow: hidden;
	outline: 0px;
}
#works .prev:hover {
	background-position: -580px -490px;
}
#works .next:hover {
	background-position:-560px -490px;
}
#works .prev {
	left:-20px;
	background: transparent url(../img/visu/sprite.png) no-repeat -580px -260px;
}
#works .next {
	left:550px;
	background: transparent url(../img/visu/sprite.png) no-repeat -560px -260px;
} 

              
              
  
/*************
************* COLLECTION
*************/     
#collection h3 { background: transparent url(../img/visu/sprite.png) no-repeat 0 -420px;}
     
#collection p {
	padding: 10px 50px 20px;
} 
#collection h4 {
	margin: 20px 0;
	line-height: 20px;font-size: 1.5em;
}              
#collection ul {
}  
#collection ul li {
	margin: 10px 0;  
	padding: 0 0 0 25px;
	list-style: none;
	font-size: 1.2em;
	background: transparent url(../img/visu/sprite.png) no-repeat -610px -298px;
}
              

/*************
************* CONTACT
*************/    
#contact h3 { background: transparent url(../img/visu/sprite.png) no-repeat 0 -490px;}
#contact p span {
	padding: 0 5px;
	vertical-align: middle;
}
#contact .pictoTel {
	display: inline-block;
	width: 10px; height: 10px;
	background: transparent url(../img/visu/sprite.png) no-repeat -410px -120px;
}
#contact .pictoMail {
	display: inline-block;
	width: 10px; height: 10px;
	background: transparent url(../img/visu/sprite.png) no-repeat -370px -120px;
}
#contact .pictoViadeo {
	display: inline-block;
	width: 10px; height: 10px;
	background: transparent url(../img/visu/sprite.png) no-repeat -460px -120px;
}
#contact form { 
	width: 700px;
	margin: 25px 0 0 50px; padding:0;
	display:inline-block;
}
*+html #contact form {               
	display:inline;
}
#contact form p {  
	width: 700px;
 	margin: 0 0 5px 0;padding: 0;
	font-size: 1em;
}
#contact input {
	display: block;
	width: 190px; height: 24px;
	padding: 2px 4px; margin: 0;
	border: 1px solid #808080;
	font-size: 1.4em;     
	resize: none;
	float: left; clear: left;
}
#contact textarea {
	display: block;
	width: 440px; height: 144px;
	padding: 2px 4px; margin: 0;
	border: 1px solid #808080;
	font-size: 1.4em;
	resize: none; overflow: auto;  
	float: left; clear: left;
}
#contact .inactive {
	color: #808080;
}
#contact input#submit {
	display: block;
	width: 202px; height: 32px;
	padding: 0; margin: 0 0 5px 0;
	background-color: #2c2c2b;
	border: 1px solid #808080;
	font-size: 1.4em; color: #ebe9e8;
}
#contact input#submit:hover {
	cursor: pointer;
	background-color: #ebe9e8;
	color: #2c2c2b;
}

#contact .error {
	display: block;
	width: 195px; height: 22px;
	padding: 8px 10px 0 20px; margin: 0 10px 0 25px;
	background: #808080 url(../img/visu/sprite.png) no-repeat -625px -270px;
	font-size: 1.2em; color: #ebe9e8; font-weight: bold; text-align: center;
	float: left;
}
#contact span.message {
	margin: 0 0 5px 25px;
}
#contact .successInfo {
	color: #1e9049;
}
#contact .errorInfo {
	color: #901e1e;
}






/*************
************* FOOTER
*************/ 
.footer {
	margin:50px 0:
	padding:20px 0 0 0;
	width:680px; height:20px;
	border-top:1px solid #2c2c2c;
}
.footer li a{
	float:left;
}
.footer p{
	float:left;
}
.footer p {
	margin:0;
	padding:0;
	font-size:12px;

	width:680px;
}
.footer li img{
	display:block;
}






/*************
************* SOCIAL NETWORK	
*************/ 
#footer p {         
	width: 730px;
	padding: 20px 0; margin: 20px 0;
	border-top: 1px solid #2c2c2b;
}
#footer p .social {
	display: inline-block;
	width: 30px; height: 30px;
	background: transparent url(../img/visu/sprite.png) no-repeat 0 0;
	text-indent: -9999px; overflow: hidden; vertical-align: middle;
}
#footer p a.fb {background-position: -440px -560px;}
#footer p a.tw {background-position: -480px -560px;}
#footer p a.fl {background-position: -520px -560px;}
#footer p a.fb:hover {background-position: -440px -590px;}
#footer p a.tw:hover {background-position: -480px -590px;}
#footer p a.fl:hover {background-position: -520px -590px;}

/*************
************* EASY CLEARING		
*************/ 

#socialnetwork:after,
#skills li:after,
#contact form:after,
#contact form p:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow:hidden;
}