/* CSS Document */



/* ====================================================================
 SQUELETTE 
-------------------------------------------------------------------- */
body {
font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color : #FFFFFF;
font-size : 13px;
font-style : normal;
font-variant:normal;
font-weight :normal;
text-align : center;
background:#FFFFFF;
background-repeat : repeat;
}
#conteneur {
margin: 0 auto;
width:866px;
text-align:left;
}
#head{
height: 65px ;
background:url(../images/fd_03.gif);
background-repeat:no-repeat;

}
#foot {
text-align:left;
font-size:10px;
color:#DBD7B8;
text-align:right;
padding-top:10px;
padding-right:20px;
height: 66px ;
background:url(../images/foot_12.gif);
background-repeat:no-repeat;

}
#foot a {
	font-size:12px;
	color:#DBD7B8;
	font-variant:small-caps;
	text-align:right;
	text-decoration:none;
	margin-right:10px;
	margin-left:10px;
	font-weight:bold;
}
#foot a:hover{
	font-size:12px;
	color:#ffffff;
	font-variant:small-caps;
	text-align:right;
	text-decoration:none;
	margin-right:10px;
	margin-left:10px;
		font-weight:bold;
}

/* ====================================================================
Menu
-------------------------------------------------------------------- */
#menu{
width:866px;
height: 40px ;
background:url(../images/fd_05.gif);
background-repeat:no-repeat;
margin-bottom:20px;
}
#menu-p{
float:right;
height: 40px ;

}

#menu-p ul{
float:right;
	width: auto ;
	height:40px;
	font-family:Trebuchet Ms;
	font-size: 12px;
	font-weight:normal;
	line-height:61px;
	list-style-type: none ;
	margin:0px;
}
#menu-p ul li{
	display: inline;  
    float: left;
	height:40px;
	margin-right:1px;
}

#menu-p li a{
	float:left;
	width: 109px ;
	height:40px;
	font-family:Trebuchet Ms;
	font-size: 12px;
	font-weight:bold;
	color: #000000 ;
	text-decoration: none ;
	text-align: center;
	line-height:25px;
	background:url(../images/menu_06.gif) no-repeat center top;
}
/* C'est sur les liens que le gros du travail est
 effectué, largeur, hauteur de ligne, taille de police, graisse de police,
  espacement des lettres, couleur, bordure et decoration du texte. 
  Nous pouvons dimensionner les a grâce à la propriété display: block ; */
#menu-p li a:hover{
	float:left;
	height:40px;
	width: 109px ;
	font-family:Trebuchet Ms;
	font-size: 12px;
	font-weight:bold;
	color: #000000 ;
	text-decoration: none ;
	text-align: center;
	line-height:25px;
	background:url(../images/menuroll_06.gif) no-repeat center top;
}
/* Et pour finir on décale l'image de fond au passage
 de la souris pour laisser aparaître l'état survolé de l'image, 
 voir le tutoriel sur les roll over pour plus de détails */
.pagactive {
	width: 109px ;
	height:40px;	
	font-family:Trebuchet Ms;
	font-size: 12px;
	font-weight:bold;
	color: #000000 ;
	display: block ;
	text-decoration: none ;
	text-align: center;
	background:url(../images/roll_08.gif) no-repeat center top;
}


/* ====================================================================
Acceuil
-------------------------------------------------------------------- */
#acceuil{
height: 370px ;
background:url(../images/metiers_03.jpg);
background-repeat:no-repeat;
background-position:bottom left;
}
#acceuil h1{
width: auto ;
padding-top:50px;
padding-left:385px;
font-size:22px;
color:#000000;
}
#txt1{
float:right;
width: 450px ;
height: 200px ;
color:#000000;
overflow-x:hidden;
overflow-y:auto;
margin-right:30px;
}
#txt1 p{
margin-right:30px;
}
/* ====================================================================
Valeurs
-------------------------------------------------------------------- */
#valeur{
height: 370px ;
background:url(../images/acceuil_03.jpg);
background-repeat:no-repeat;
background-position:bottom left;
}
#valeur h1{
width: auto ;
font-size:22px;
color:#000000;
}
#txt2{
float:right;
width: 450px ;
height: 300px ;
color:#000000;
overflow-x:hidden;
overflow-y:auto;
margin-right:20px;
margin-top:35px;
}
#txt2 p{
margin-right:30px;
}

/* ====================================================================
Contact
-------------------------------------------------------------------- */
#contact{
height: 370px ;
background:url(../images/contact2_03.jpg);
background-repeat:no-repeat;
background-position:bottom left;
}
#contact h1{
width: auto ;
font-size:22px;
color:#000000;
margin-bottom:0px;
font-weight:bold;
}
#txt3{
float:right;
width: 400px ;
height: 300px ;
color:#000000;
font-weight:bold;
overflow-x:hidden;
overflow-y:auto;
margin-right:20px;
margin-top:52px;
}
#txt3 p{
margin-right:30px;
}
#txt3 a{
color:#000000;
font-weight:bold;
text-decoration:underline;
}
#txt3 a:hover{
color:#666600;
font-weight:bold;
text-decoration:underline;
}

/* ====================================================================
formulaire de contact
-------------------------------------------------------------------- */
#inscription {
	border: none;
	margin-top:40px;

	padding: 0;
	width: 350px;	/*** Largeur du formulaire ***/
}
#titreForm, #piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 10px arial, hevetica, sans-serif;
	color: white;
	background: #ffffff;
	margin: 0;
	padding: .5em;
}
#piedForm {
	text-align: right; /*** Les boutons sont alignés à droite ***/
}
#piedForm input {
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
	margin-left: 1em;
}
#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	border: 1px solid black;
	font-size:11px;
	font-weight:normal;
	color: black;
	background: #F5F6E8;
	margin: 0;
	padding: 1em;
}
#corpForm textarea {	/*** Mise en forme des cadres ***/
	width:300px;
	margin: 0;
	font-style: normal;
	padding: 0 1em 1em;
}
#corpForm fieldset {	/*** Mise en forme des cadres ***/
	margin: 0;
	font-style: normal;
	padding: 0 1em 1em;
}
#corpForm legend {	/*** Mise en forme des titres des cadres ***/
	font-weight: bold;
	color: black;
	background: transparent;
}
#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: .2em 0;
	margin: 0 0 .2em 0;
}
#corpForm fieldset#coordonnees label {	/*** Mise en forme des intitulés de champs ***/
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 40%;	/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centrés verticalement. ***/
}
#corpForm label:hover, #piedForm input {
	cursor: pointer;	/*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
}

/* ====================================================================
Sous-menu
-------------------------------------------------------------------- */
#smenu{
width:800px;
height: 20px ;
text-align:center;
margin:0 auto;
margin-top:53px;

}
#soumenu ul{
	float:right;
	width: auto ;
	height:20px;
	font-family:Trebuchet Ms;
	font-size: 12px;
	font-weight:normal;
	line-height:20px;
	list-style-type: none ;
	margin:0 auto;
}
#soumenu ul li{
	display: inline; 
	float: left;
	width: auto ;
	height:20px;
	color:#000000;
	font-weight:bold;
}

#soumenu li a{
	float:left;
	width: 50px;
	height:20px;
	line-height:20px;
	font-family:Trebuchet Ms;
	font-size: 10px;
	color: #000000 ;
	text-decoration: none ;
	text-align: center;
	font-weight:normal;
}
/* C'est sur les liens que le gros du travail est
 effectué, largeur, hauteur de ligne, taille de police, graisse de police,
  espacement des lettres, couleur, bordure et decoration du texte. 
  Nous pouvons dimensionner les a grâce à la propriété display: block ; */
#soumenu li a:hover{
	float:left;
	height:20px;
	width: 50px;
	font-family:Trebuchet Ms;
	font-size: 10px;
	color: #000000 ;
	text-decoration: none ;
	text-align: center;
	line-height:20px;
	font-weight:normal;
}
/* Et pour finir on décale l'image de fond au passage
 de la souris pour laisser aparaître l'état survolé de l'image, 
 voir le tutoriel sur les roll over pour plus de détails */
.pagactive2 {
	width: 70px ;
	height:20px;	
	font-family:Trebuchet Ms;
	font-size: 12px;
	color: #ffffff ;
	display: block ;
	text-decoration: none ;
	text-align: center;
}
/* ====================================================================
Acceuil
-------------------------------------------------------------------- */
#acceuil{
height: 370px ;
background:url(../images/metiers_03.jpg);
background-repeat:no-repeat;
background-position:bottom left;
}
#acceuil h1{
width: auto ;
padding-top:50px;
padding-left:385px;
font-size:22px;
color:#000000;
}
#txt1{
float:right;
width: 450px ;
height: 200px ;
color:#000000;
overflow-x:hidden;
overflow-y:auto;
margin-right:30px;
}
#txt1 p{
margin-right:30px;
}
/* ====================================================================
Studio
-------------------------------------------------------------------- */
#stud{
height: 370px ;
background:url(../images/studio_03.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
#stud h1{
width: auto ;
font-size:22px;
color:#000000;
}

#txt4{
float:right;
width: 420px ;
height: 300px ;
color:#000000;
overflow-x:hidden;
overflow-y:auto;
margin-right:20px;
margin-top:35px;
}
#txt4 p{
margin-right:30px;
}

#stud a{
font-size:10px;
color:#F0027F;
text-decotation:none;
}
#stud a:hover{
font-size:10px;
color:#F0027F;
text-decotation:underline;
}
/* ====================================================================
REAL
-------------------------------------------------------------------- */
#real{
display:block;
width: 866px ;
height: 370px ;
text-align:center;


}

#txt5{
width: 800px ;
height: 370px ;
color:#000000;
font-weight:bold;
text-align:left;

overflow-x:scroll;
overflow-y:hidden;
overflow: -moz-scrollbars-horizontal;
margin-top:20px;
margin:0 auto;
}
#img {
height: 370px ;
width: 12000px ;
margin-top:20px;
}

/* ====================================================================
PHOTOGRAFISME
-------------------------------------------------------------------- */
#photografisme{
width: 866px ;
height: auto ;
text-align:center;
margin:0 auto;
}

#txt6{
width: 800px ;
height: auto ;
color:#000000;
font-weight:bold;
text-align:left;

overflow-x:scroll;
overflow-y:hidden;
overflow: -moz-scrollbars-horizontal;
margin-top:20px;
margin:0 auto;
}
#img2 {
height: auto ;
width: 5815px ;
}
/* ====================================================================
MACRO
-------------------------------------------------------------------- */
#macro{

width: 866px ;
height: auto ;
text-align:center;
margin:0 auto;
}

#txt6{
width: 800px ;
height: auto ;
color:#000000;
font-weight:bold;
text-align:left;

overflow-x:scroll;
overflow-y:hidden;
overflow: -moz-scrollbars-horizontal;
margin:0 auto;
}
#img3 {
height: auto ;
width: 6650px ;
margin:0 auto;
}