/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

*{
	margin: 0;
	padding: 0;
	font-family: Georgia, Times, serif Verdana, 	
	font-size: 10pt;
	
}	

body{	
background: url(../theme/site_BG_4.jpg)  no-repeat black center top;
background: url(../theme/fond_photo.gif)  repeat black ;




}
/*sticky footer, ne pas toucher*/
html, body, #conteneur {height: 100%;}

body > #conteneur {height: auto; min-height: 100%;}

#contenu {padding-bottom: 150px;position: relative;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 220px;
	clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac ¥*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*banniere*/
#banniere{
	position: absolute;
	margin-left: 20px;
	padding-top: 5px;
	margin-top: 40px;
	z-index: 10;
}

ul.ppt{
	position: relative;
}

.ppt li{
	list-style-type: none;
	position: absolute;
	top: 0;
	left: 0;
}


/*Conteneur*/
#conteneur{
	width: 850px;
	height: 100%;
	padding-top: 30px;
	padding-bottom: -70px;
	margin: 0 auto;
	background-color: #111111;
}

/*bouton langue*/
#bouton{
	position: fixed;
	top:200px;
	right: 0px;
}

/*header*/
#header{
	display: block;
	position: relative;
	height: 300px;
	background-color: transparent;
	
}
a.header{
	font-size: 22pt;
	font-family: Acens, Bebas, "old sans black";
	
}
#titre{
	display: block;
	position: absolute;
	width: 400px;
	height: auto;
	margin-top:7px;
	margin-left: 22px;
	margin-bottom: 10px;

	color: white;
	font-size: 14pt;
	text-transform: uppercase;
}
/*menu*/
#menu{
	display: block;
	position: absolute;
	width: 400px;
	margin-top: 20px;
	margin-bottom: 10px;
	right:-8px;
	font-weight: bold;	
	
	
}


p.nonscript{
	color: white;
	display: block;
	margin: 0 auto;
	margin-left: 140px;
	font-size: 14pt;
	margin-bottom: 10px;

}
li.choix{
	display: block;
	width: auto;
	
	float: left;
	margin-right: 10px;
	
	border-right: solid 2px #CCCCCC;
	padding-right: 8px;
	
	list-style: none;
	
	color: #CCCCCC;
}

li.choix1{

	border: none;
	list-style: none;
	
	color: #CCCCCC;
}
/*menu choix langue*/
a{
	text-decoration: none;
	color:#CCCCCC;
}

a.header{
	color: #CCCCCC;
}
a.header:visited{
	color: #CCCCCC;
}

a:visited{
	color:#CCCCCC;
}
#choixlangue{
	display: block;
	margin-left: 23px;
}


#contenu{
font-family: Georgia, Times, serif Verdana	;
	font-size: 12px;
	color:#CCC;

	display: block;
	clear: both;
}

/*Page ç Français/Anglais*/  
#info{
	clear: both;
}
#photo{
	display: block;
	width: 206px;
	height: 307px;
	margin-top: 60px;
	margin-left: 30px;
	float: left;
}

img.me{
	width: 206px;
	height: 307px;
	margin-left: 40px;
	
}

/* bloc de texte pour page info */
#text{
	display: block;
	width: 50%;
	margin-top: 40px;
	margin-right: 90px;
	color: white;
	float: right;
	font-size: 11	


}

h3.moi{
	
	color: #cccccc;
	margin-bottom: 10px;
		font-size: 12pt;
	margin-left: 10px;

	
}

p.info{
	color: #888888;
	margin-left: 35px;
	font-size: 10pt;
		font-family: Georgia, Times, serif Verdana;
}

p.contact{
	color: #cccccc;
	font-size: 11pt;
			font-family:  Georgia, Times, serif Verdana;
	margin-left: 10px;

}

p.info{
	text-align: justify;
	margin-bottom: 30px;
		margin-left: 10px;

	
}

#footer{
	display: block;
	background-color: #222222;
	color: #CCCCCC;
	width: 850px;
	margin: auto;
	bottom: 40px;
	top: 40px; 
		text-align: center;
	padding-top: 20px;
}


/*****Footer***********/
#derniernew{
	display: block;
	position: relative;
	width: 200px;
	text-align: left;
font-size: 14px;
	margin-left: 15px;
	width: auto;
	line-height: 10px;
}

#contact{
	height: auto;
	position: absolute;
	bottom:4px;
	left: 290px;
	padding-top: 70px;
}

#left{
	display: block;
	width: 400px;
	position: absolute;
	margin-left: -290px;
}

#right{
	display: block;
	width: 100px;
	margin-left: 480px;
}






h2.derniernew{
	display: block;
	position: absolute;
	width: 125px;
	text-decoration: underline;
	font-size: 16px;

}

h2.derniernew1{
	text-decoration: underline;
	font-size: 16px;

}

#dernierport{
font-size: 14px;

	display: block;
	position: absolute;
	width: 200px;
	top:17px;
	left:300px;
	
}
#dernerport{
	display: block;
	margin-bottom:30px;
}

p.postcontenu{
	display: block;
	position: relative;
	margin-left: 10px;
	text-align: left;
}
p.postportf{
	display: block;
	position: relative;
	width: 200px;
	margin-left: 10px;
	margin-top: 13px;
	text-align: left;
}
#postcontenu{
	margin-left: 25px;
	top:100px;
}
#blocport{
	margin-top:31px;
}
#dernierimg{
	display: block;
	position: absolute;
	left: 580px;
	top:15px;
	
}

img.imageffoter{
	position: absolute;
	margin-top: 40px;
}

#arrivage{
	display: block;
	padding-bottom: 50px;
	
}

h2.dernphoto{
	display: block;
	margin-left: 140px;
	position: relative;
	width: 200px;
}

/******BLOG***********/
h1.blogtitre{ 
	color: #CCCCCC;
	font-size: 12pt;
	margin-top: 20px;
	margin-bottom: -25px;
	
}

p.blogcontenu{
	color: #666666;
	display: block;
	width: 90%;
	text-align: left;
	margin-bottom: 10px;
	margin-top: 20px;
	margin-left: 20px;

		
}

#blogcomm{
	display: block;
	position: absolute;
	
}
#blog{
	margin-left: 15px;
	position: relative;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: -70px;
	
	
}
#blogtexte{
	display: block;
	position: relative;
	width: 60%;
	margin-left: 15px;
	padding-bottom:10px;
		font-size: 10pt;
	
		
		font-family: Georgia, Times, serif Verdana, 	;		
	
	
}

#menugauche{
	display: block;
	width: 200px;
	height: 100%;
	background-color: blue;
}

p.blogdate{
	display: block;
	position: absolute;
	right: 0;
	color:#CCCCCC;
	margin-right: 10px;
	margin-top: -15px;
	
}
#page{
	float: left;
	margin-right: 10px;
	font-size: 20pt;
	position: relative;
	margin-top: 50px;
	
	
}

p.page{
	display: block;
	width: 25px;
	color: #666666;
	text-align: center;
	line-height: 35px;
	border: solid 1px #666666;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	
}

#twitter{
	position: absolute;
	right: 20px;
	top:20px;
}



/*********commentaire***********/
hr{
	display: block;
	width: 60%;
	margin-top: 50px;
	
}

#utilisateur{
	
	margin-bottom: 30px;
}

#commentaire_general{
	position: relative;
	width: 60%;
	height: auto;
	margin-left: 30px;
}
#titrecommentaire{
	margin-bottom:40px; 
	
	

}
#photo_commentaire{
	display: block;
	width: 30px;
	float: left;
	
	
}
#message_commentaire{
	position: relative;
	width: 300px;
	height: auto;
	background-color: gray;
	margin-left: 50px;
	border-radius:10px;
	-moz-border-radius: 10px;
	-webkit-border-radius:10px;
	
	
}

p.nom_auteur{
	margin-left: 10px;
	margin-top: 20px;
	font-size: 14pt;
	color: #CCCCCC;
	font-variant:small-caps;
	text-decoration: underline;
}

p.message_auteur{
	margin-left: 10px;
	color: white;
}

img.twitter{
	display: block;
	position: absolute;
	right: -20px;
	top:-20px;
	border: none;
}

p.datetime{
	color: white;
	text-align: right;
	margin-right: 10px;
}

p.verif{
	color: white;
	text-align: center;
	font-size: 18pt;
}

#formulaire_commentaire{
	margin-left: 40px;
}

hr.commport{
	margin-left: 30px;
}
span.form-erreur{
	font-size: 14pt;
	color: red;
	margin-left: 20px;
 	display: none;
}
/******Formulaire commentaire*************/
label{
	display: block;
	width: 100px;
	color: #CCCCCC;
	margin-top: 20px;
	
	
}

input,textarea{
	background-color: gray;
	border-radius:7px;
	-moz-border-radius: 7px;
	-webkit-border-radius:7px;
	padding: 2px;
	color: white;
	font-size: 12pt;
	
	
}

/***********Page photo*****************/

#miniature{

	position: relative;
	
	margin-right: 20px; 
	margin-bottom: 10px;
		
	    
}

h3.titre_boite{
	
	display: block;
	position: absolute;
	bottom:0;
	width: 250px;
	height:40px;
	color: white;
	background-color: #111111;
	text-align: center;
	line-height: 40px;
	
	
}

#boite{
	width: 250px;
	height: 0px;
	opacity: 0;
	
}
#boitereactive{
	position: absolute;
	top:0;
	width: 500px;
	height: 128px;
	background-color: transparent;
}

#miniature{
	float: left;
	
    }

#boite:hover{
	opacity:0.5;
	
	
	
}

#photoaff{
	margin-left:35px;

	width: auto;
	
	
}

.flechedroite{
	display: block;
	position: absolute;
	right: 20px;
	bottom: 50px;
	color: white;
	}

.flechegauche{
display: block;
	position: absolute;
	left: 20px;
	bottom: 50px;
	color: white;
}

/************Portfolio*********/
#portfolio{
	color: #CCCCCC;
	margin-left: 20px;
	margin-top: 50px;
	
}

img.porfolio{
	border: none;
	display: block;
	margin:0 auto;
	margin-bottom: 25px;
}

p.article{
	display: block;
	margin: 0 auto;
	width: 500px;
	height: auto;
	text-align: center;
	color: white;
}

hr.portfolio{
	display: block;
	margin:0 auto;
	margin-bottom: 25px;
	
}
div.comm_port{
	display: block;
	margin-left: 30px;
}
p.annees{
	color: white;
	display: block;
	position: absolute;
	font-size: 15pt;
	margin-left: 20px;
}

h1.portfolio{
	display: block;
	position: absolute;
	margin-top: -70px;
}

span.blanc a{
	
	font-size: 14pt;
	color: #666666;
}

h4.commentport{
	
	display: block;
	margin-left: 45%;
	margin-top: -10px;
	margin-bottom: 10px;
}
/******REEL*****/


#video{
	position: relative;
	left: 105px;
	height: 325px;
}

#demo{
	
}
.reel_link{
	position: absolute;
	left:120px;
	margin-top: 20px;
	color: #666666;
}
h3.reel{
	margin-left: -18px;
	margin-bottom: 5px;
	font-size: 14pt;
}

span.reel_click{
	display: block;
	margin-left: 30px;
	margin-top: 10px;
}

.blanc{
	color: white;
}

.blanc:visited{
	color: white;
}

/*Réseau sociaux*/
#iconeSociaux{
	margin-top: 0px;
	margin-left: 10px;
}
#iconeSociaux img{
	border:none;
	margin-right: 21px;
}