/* CSS Document */

body
  {
	
	margin: 40px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:center;
	color:#3e3e3e;


  }

body, div, h1, h2, p, span, a, ul, li
  {
   font-family: Arial, Helvetica, sans-serif;
  }

/* ----------------------------le div qui englobe tout le contenu */

div#page
  {
/* position */
   position:relative;
   z-index:1;
   top:0px;

/* marge */
   margin-right: auto;
   margin-left: auto;

/* Boite */
   background-color: white;
   width:780px;
   height:100%;
  }
 
 /*-------------calque qui regroupe l'animation du haut----------------*/  
DIV#entete
   {
	Z-INDEX: 1;
	POSITION: absolute;
	TOP: 0px;
	LEFT: 0px;
	WIDTH: 780px;
	HEIGHT: 64px;
	text-align:left;
	margin:0px;
	padding:0px;
	border-top:1px solid #707070;
	border-left:1px solid #707070;
	background-image:url(../images/contenu/pix-hd.gif);
	background-position:right top;
	background-repeat:no-repeat;
   }
    /*----titre anime---*/
   DIV#titre_anim
   {
   Z-INDEX: 1;
	POSITION: absolute;
	TOP: 1px;
	left: 86px;
	WIDTH: 390px;
	HEIGHT: 60px;
	margin:0px;
	padding:0px;
   }
 
   /*----LOGO VIEORAMA */
   DIV#logo
   {
   Z-INDEX: 1;
	POSITION: absolute;
	TOP: 4px;
	left: 4px;
	WIDTH: 52px;
	HEIGHT: 61px;
	margin:0px;
	padding:0px;
   }
/*------------------calque qui regroupe liens reference contact et espaces client---------*/    
   DIV#menuhaut
   {
	Z-INDEX: 1;
	POSITION: absolute;
	TOP: 64px;
	LEFT: 0px;
	WIDTH: 780px;
	HEIGHT: 25px;
	margin:0px;
	padding:0px;
	text-align:right;
	border-left:1px solid #707070;
		
   }
/*-------------------------l'animation de la banniere------------------------*/   
    DIV#animation
   {
	Z-INDEX: 1;
	POSITION: absolute;
	TOP: 89px;
	LEFT: 0px;
	WIDTH: 780px;
	HEIGHT: 126px;
	margin:0px;
	padding:0px;
	border-left:1px solid #707070;
   }
   
   /*-------------------------l'animation de la page reperage------------------------*/   
    DIV#reperage
   {
	Z-INDEX: 1;
	POSITION: absolute;
	TOP: 90px;
	LEFT: 0px;

	WIDTH: 780px;
	HEIGHT: 340px;
	border-left:1px solid #707070;
	margin:0px;
	padding-left:98px;
		
   }
   
   /*-------------le calque qui regroupe les rubriques principales dans la pages reperage----------*/ 
    #menugauchereperage
   {
	Z-INDEX: 1;
	position:absolute;
	left:2px;
	top:130px;
	
	margin:0px;
	padding:0px;
	
	width:162px;
	height:200;	
	}

/*-------------le calque qui regroupe les rubriques principales de la page d'accueil----------*/
   DIV#menu
   {
	Z-INDEX: 1;
	POSITION: absolute;
	TOP: 215px;
	LEFT: 0px;
	WIDTH: 780px;
	HEIGHT: 25px;
	background-image:url(../images/contenu/fond-menu.gif);
	background-repeat: no-repeat;
	background-position:top left;
	margin:0px;
	padding:0px;
	border-left:1px solid #707070;
   }
   /*-------------le calque qui regroupe les rubriques principales dans les pages decliner sous la banniere----------*/
   DIV#menusousbanniere
   {
	Z-INDEX: 1;
	POSITION: absolute;
	TOP: 215px;
	LEFT: 0px;
	WIDTH: 780px;
	HEIGHT: 25px;
	margin:0px;
	padding:0px;
	z-index:1;
	background-color:#FFFFFF;
	border-left:1px solid #707070;
   }
   /*-------------le calque qui regroupe les rubriques principales horizentalement  dans les pages déclinée----------*/
   DIV#menudec
   {
	WIDTH: 780px;
	HEIGHT: 25px !important;
	HEIGHT: 14px;
	POSITION: absolute;
	LEFT: 0px;	
	margin:0px;
	padding:10px 0px 0px 0px;
	background-image:url(../images/contenu/pix-bas.gif);
	background-repeat:no-repeat;
	background-position:bottom left;
	padding-bottom:1px;	
	border-left:1px solid #707070;
   }
 
 /*-------------le calque qui regroupe les images des deux videos et le bouton apropos de la page d'accueil--------------------------------*/    
   DIV#baspage
   {
	Z-INDEX: 1;
	POSITION: absolute;
	TOP: 240px;
	LEFT: 0px;
	WIDTH: 780px;
	HEIGHT: 190px;
	margin:0px;
	padding:0px;
	background-image:url(../images/contenu/videorama.gif);
	background-repeat: no-repeat;
	background-position:top left;
	text-align:left;
   }
 /*-------------le bouton apropos de la page d'accueil--------------------------------*/  
    DIV#play
   {
	Z-INDEX: 2;
	POSITION: absolute;
	TOP: 400px;
	LEFT: 536px;
	margin:0px;
	padding:0px;
	
   }
   
   /* ----------------le div qui englobe realisation pyxicom */
	div#pyxicom
	{
	position:absolute;
	TOP: 434px;
	LEFT: 341px;
	background-image: url(../images/contenu/logopyxicom.gif);
	background-position:0px 0px;
	background-repeat:no-repeat;
	padding-left:16px;
	Z-INDEX: 1;
	}
	#pyxicom a
	{
	font-size: 11px;
	color:#797878;
	text-decoration:none;
	}
	#pyxicom a:hover
	{
	font-size: 11px;
	color:#797878;
	text-decoration:underline;
	}
   
   
   #videos
   {
   width:40%;
   margin:10px 0px 0px 10px;
   }
   
 /*-------------- les pages declinés ------------------------*/  
   
 /*-------------calque qui regroupe l'image videorama maroc----------------*/
   DIV#entetedec
   {
	Z-INDEX: 1;
	POSITION: absolute;
	TOP: 0px;
	LEFT: 0px;

	WIDTH: 780px;
	HEIGHT: 80px;
	
	text-align:left;
	
	margin:0px;
	padding:0px;
	
	border-top:1px solid #707070;
	border-left:1px solid #707070;
	
	background-image:url(../images/contenu/pix-hd.gif);
	background-position:right top;
	background-repeat:no-repeat;	
   }
   
    DIV#entetedec img
	{
	margin-top:16px;
	} 
   
  /*-------------le calque qui regroupe les rubriques principales ddes pages declinees----------*/ 
    #menugauche
   {
	Z-INDEX: 1;
	position:absolute;
	left:2px;
	top:240px;
	
	margin:0px;
	padding:0px;
	
	width:162px;
	height:200;	
	}
   
    /*-------------le calque qui regroupe le menu gauche le contenu et les liens du bas de page----------*/  
    #cadre_contenu
   {
	Z-INDEX: 2;
	position:absolute;
	left:0px;
	top:215px;
	
	margin:0px;
	padding:0px 0px 4px 0px;
	
	width:780px;
	height:auto;
	
	text-align:left;
	
	}
 
     /*-------------le calque qui regroupe le contenu ----------*/  
   DIV#contenu
   {
	
	TOP: 0px;
	LEFT: 0px;

	/*WIDTH: 574px;*/
	HEIGHT:100%;
		
	margin:0px;
	padding:35px 10px 10px 206px;
	
	text-align:left;
	font-size:13px;
	
	
	border-left:1px solid #707070;
	/*background-image:url(../images/contenu/pix-bas.gif);
	background-repeat:no-repeat;
	background-position:bottom left;*/	
   }
   
   p
	{
	font-size:13px;
	text-align:justify;
	line-height:16px;
	margin:0px 0px 16px 0px;		
	}
	 p.mrg_petit
	{
	font-size:13px;
	text-align:justify;
	line-height:16px;
	margin:0px 0px 2px 0px;		
	}
	
	 h2
	{
	font-size:13px;
	font-weight:bold;
	color:#852f26;
	margin:0px 0px 6px 0px;	
	}
	 h2.confiance
	{
	font-size:13px;
	color:#000000;
	font-weight:bold;	
	margin:0px 0px 4px 0px;
	text-align:left;		
	}
	
	ul
	{
	font-size:13px;
	text-align:justify;
	line-height:16px;
	margin:0px 10px 10px 40px;		
	}
	
	li
	{
	list-style:none;
	background-image: url(../images/contenu/puce-li.gif);
	background-repeat:no-repeat;
	background-position:0px 6px;
	padding-left:10px;
	}
	
	 a
    {
    font-size:13px;
    color:#9c3801;
	text-decoration: underline;
	font-weight:normal;
    }
   
    a:hover
    {
    font-size:13px;
    color:#f89660;
	text-decoration:none;
    }
	
	
    DIV#contenu strong
	{
	font-size:13px;
	font-weight:bold;
	color:#F89660;
	}
	
	DIV#titpage
   {
	Z-INDEX: 1;
	POSITION: absolute;
	TOP: 58px;
	LEFT: 197px;

	WIDTH: 400px;
	HEIGHT: 179px;
	
	margin:0px;
	padding:2px 0px 0px 4px;;
	text-align:left;
	
	background-image:url(../images/contenu/ap-titre-menu.gif);
	background-repeat: no-repeat;
	background-position:top left;	
   }
/*-------------------------les liens apropos et accueil---------------------*/   
   #copyright
   {
   font-size:11px;
   color:#6C6B6C;
   text-align:right;
   background-image:url(../images/contenu/ap-copyright.gif);
   background-repeat:no-repeat;
   /*background-position:594px -12px;*/
   background-position:668px 20px;
   height:21px;  
   padding-right:4px;
   padding-top:25px; 
   } 
   #copyright span
   {
   font-size:11px;
   color:#852f26; 
   } 
   
   #copyright a
   {
   
    font-size:11px;
    color:#6C6B6C;
	text-decoration:none;
   }
   
   #copyright a:hover
   {
   
   font-size:11px;
    color:#F95B00;
	text-decoration:none;
   }
   
  /* #accueil
   {
   
    Z-INDEX: 1;
	POSITION: absolute;
	TOP: 6px;
	LEFT: 724px;
    
     height:17px;
	 width:56px;
	 background-image: url(../images/contenu/fond-accueil.gif);
     background-repeat:no-repeat;
     background-position:-4px -3px;
  
   } */
   
  /* -------------------page référence--------------- */
#reference
  {
  margin-bottom:4px;
  }
  
  #reference a
   {
    font-size:13px;
	font-weight:bold;
    color:#9c3801;
	background-image:url(../images/contenu/puce-off.gif);
	background-position:0px 3px;
	background-repeat:no-repeat;
	padding-left:10px;
	text-decoration:none;
   }
   
   #reference a:hover
   {
    font-size:13px;
	font-weight:bold;
    color:#f89660;
	background-image:url(../images/contenu/puce-on.gif);
	background-position:0px 5px;
	background-repeat:no-repeat;
	padding-left:12px;
	text-decoration:none;
   }
   
   #reference a.actif
   {
    font-size:13px;
	font-weight:bold;
    color:#f89660;
	background-image:url(../images/contenu/puce-on.gif);
	background-position:0px 5px;
	background-repeat:no-repeat;
	padding-left:12px;
	text-decoration:none;
   }
   
   
   /* ------------------------page contact-------------------------- */
   form
   {
   margin:0px;
   }
   
   .contact
   {
   margin-top:20px;
   }
   .contact th
   {
	font-size:13px;
	font-weight:bold;
	color:#000000;
	text-align:right;
	padding-right:4px;
	padding-top:2px;		
    }
	.contact td
	{
	padding-bottom:2px;
	}
	.contact input
    {
	font-size:13px;	
	color:#000000;
	border: 1px solid #852F26;		
    }
	
	.contact select
    {
	font-size:13px;	
	color:#000000;
	border: 1px solid #852F26;		
    }
	.contact textarea
    {
	font-size:13px;	
	color:#000000;
	border: 1px solid #852F26;		
    }
	
	.bouton
	{
	margin:4px 4px 0px 0px;
	background-color:#F89660;
	}
/*--------page realisateurs calque qui contient le contenu et l'image de  fond ------*/
	.realisateur
	{
	TOP: 0px;
	LEFT: 0px;		
	margin:0px;
	padding:0px;
	background-image:url(../images/backgrounds/realisateur.gif);
	background-position:center;
	background-repeat:no-repeat;
	}
/*--------page materiels au maroc calque qui contient le contenu et l'image de  fond ------*/
	.materiel
	{
	TOP: 0px;
	LEFT: 0px;		
	margin:0px;
	padding:0px;
	background-image: url(../images/backgrounds/materiels.gif);
	background-position:center;
	background-repeat:no-repeat;
	}
/*--------page videos et son detail ------*/	
	.imgvideo
	{
	border-left:1px solid black;
	border-right:1px solid black;
	text-align:center;
	}
	
	#video
	{
	width:346;
	text-align:center;
	margin:0px;
	}
	#video td img
	{
	margin:10px 10px 4px 10px;
	}
	#video td img.bouton
	{
	margin:0px;
	}
	
	#detailvideo
	{
	text-align:center;
	}
	
	#detailvideo span.titre
	{
	font-size:14px;
	font-weight:bold;
	}
	#detailvideo span.date
	{
	font-size:13px;
	font-weight:bold;
	}
	#detailvideo span.taille
	{
	font-size:13px;	
	color:#852F26;
	font-weight:bold;
	}

/*le nom du client*/	
	.bonjour
	{
	font-size:14px;
	font-weight:bold;
	}

/*page casting*/
#casting
{
width:540px;
}

#casting td
{
text-align:center;
vertical-align:middle;
}

#casting img
{
margin:3px;
border:1px solid #9c3801;
}
/********************************************************************************/
/****************************Noueau CSS*****************************************/
/********************************************************************************/
.miniTitre{
	color:#F89660;
	font-size:13px;
	line-height: normal;
}

.ContenuSpecial{
color:#000066;
font-size:13px;
text-decoration:underline;
}
/*a propos collaborateurs------------------------------*/
span.noir
{
font-weight:bold;
font-size:13px;
}
.equ
{
margin-bottom:10px 0px 20px 0px;
height:120px;
width:430px;
}
.equ img
{
border:1px solid black;
margin-left:30px;
}

.equipe
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;

float:left;
padding-left:10px;
}

cite
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
font-weight: normal;
font-style:normal;
text-align:justify;
}

.equipe a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#852f26;
text-decoration:underline;
padding-left:14px;
background-image:url(../images/backgrounds/plus.gif);
background-repeat:no-repeat;
background-position:0px 3px;
}
.equipe a:hover
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
text-decoration:underline;
padding-left:14px;
background-image:url(../images/backgrounds/plus2.gif);
background-repeat:no-repeat;
background-position:0px 3px;
}

.responsable
{
color:#852f26;
}

/*popup de la page a propos*/
.equ1
{
margin:0px;
text-align:left;
background-color:#DADADA;
width:450px;
border:1px solid #000000;
}
.equ1 img
{
border:1px solid black;
margin-left:10px;
margin-top:10px;
}

.equipe1
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
font-weight:bold;
float:left;
padding-left:10px;
padding-right:10px;
padding-top:10px;
text-align:justify;
}
.equipe1 cite
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
font-weight: normal;
font-style:normal;
}
/*--------------------calque dont lequel on place les images cales à droite-------------------*/
.img_droite
{
margin: 2px 0px 4px 8px;
float: right;
}