"@charset "utf-8";
/* CSS Document powered by Jerome Mercier et Tanguy Bodivit*/





/*  ************************

j'initialise  la page html tag...

******************************** */
* {
	padding: 0px;
	margin: 0px;
}

body {
	background: black;
	font-family: Arial, Times new roman, Helvetica, sans-serif;
	color: white;
	margin: 0px;
	padding: 0px;
	border: 0px;
	text-align: center;
	}
	
	a:link, a:visited {
	color: white;
	text-decoration: none;
	 }
	a:hover, a:active {
	color: #ff7f0b;
	text-decoration: none;
}
/* ********************************
	Magicbox je cale la magic box pour qui contient tou mon site
******************************** */
	
#magicbox{
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
text-align: left;
background: yellow;
	}
	
	
/* ********************************
	je cale un bg dans le titre h1 attention ce "trick" est non sémentique et dans le h2 pour la categorie de la page
******************************** */


#header {
position: absolute;
left: 550px; /*  pourquoi ce chiffre? car le logo fait 200 px la magicbox fait 750 px  /2 375 - la moitié du logo 275 on arive donc o milieu de la page..*/
height: 48px;
width: 200px;
margin-top: 0px;
margin-bottom: 0px;
background: url(images/V2/Logo_siteV2.png) no-repeat;
}
#header h1 {
position: absolute;
top: 150px;
left: -526px;  /*  pourquoi ce chiffre? h2 va partir de la position de son encetre header qui est de 275px  en left une autre methode est applicable mais trop complexe pour le tuto*/
height: 255px;
width: 735px;
background: url(images/V2/panier_acceuil.jpg) no-repeat;
}
#header h2 {
position: absolute;
top: 150px;
left: -526px;  /*  pourquoi ce chiffre? h2 va partir de la position de son encetre header qui est de 275px  en left une autre methode est applicable mais trop complexe pour le tuto*/
height: 255px;
width: 735px;
background: url(images/V2/panier_film.jpg) no-repeat;
}
#header h4 {
position: absolute;
top: 150px;
left: -526px;  /*  pourquoi ce chiffre? h2 va partir de la position de son encetre header qui est de 275px  en left une autre methode est applicable mais trop complexe pour le tuto*/
height: 255px;
width: 735px;
background: url(images/V2/panier_archi.jpg) no-repeat;
}
#header h5 {
position: absolute;
top: 150px;
left: -526px;  /*  pourquoi ce chiffre? h2 va partir de la position de son encetre header qui est de 275px  en left une autre methode est applicable mais trop complexe pour le tuto*/
height: 255px;
width: 735px;
background: url(images/V2/panier_promo.jpg) no-repeat;
}
#header h6 {
position: absolute;
top: 150px;
left: -526px;  /*  pourquoi ce chiffre? h2 va partir de la position de son encetre header qui est de 275px  en left une autre methode est applicable mais trop complexe pour le tuto*/
height: 255px;
width: 735px;
background: url(images/V2/panier_design.jpg) no-repeat;
}
h2#acceuil {
position: absolute;
top: 150px;
left: -526px;  /*  pourquoi ce chiffre? h2 va partir de la position de son encetre header qui est de 275px  en left une autre methode est applicable mais trop complexe pour le tuto*/
height: 255px;
width: 735px;
background: url(images/V2/panier_agence.jpg) no-repeat;
}

/* ********************************
	galerie et contenu
******************************** */
#contenu {
position: absolute;
top: 430px;
left: 0px;
}
/* ********************************
	galerie seule
******************************** */
#gal {
width: 150px;
position: relative;
left: 20px;
top: 30px;
}
#gal2 {
width: 735px;
height: 200px;
position: relative;
left: 0px;
background: none;
}
#gal3 {
width: 85px;
height: 85px;
position: absolute;
top: 30px;
left: 88px;
background: none;
z-index: 99;
}
#gal4 {
width: 85px;
height: 85px;
position: absolute;
top: 135px;
left: 213px;
background: none;
z-index: 99;
}
#gal5 {
width: 85px;
height: 85px;
position: absolute;
top: 35px;
left: 473px;
background: none;
z-index: 99;
}
#gal6 {
width: 85px;
height: 85px;
position: absolute;
top: 150px;
left: 641px;
background: none;
z-index: 99;
}


/* ********************************
image1 script
******************************** */
a.image1 {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/film_1_ro.gif) no-repeat 0 0;

}
a:hover.image1 {
background-position: -70px 0px;
}

a.image1 span {display: none;}

a:hover.image1 span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;

}
a.image1a {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/archi_1_ro.gif) no-repeat 0 0;

}
a:hover.image1a{
background-position: -70px 0px;
}

a.image1a span {display: none;}

a:hover.image1a span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;

}
a.image1b {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/promo_1_ro.gif) no-repeat 0 0;

}
a:hover.image1b {
background-position: -70px 0px;
}

a.image1b span {display: none;}

a:hover.image1b span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;

}
a.image1c {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/design_1_ro.gif) no-repeat 0 0;

}
a:hover.image1c {
background-position: -71px 0px;
}

a.image1c span {display: none;}

a:hover.image1c span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;

}

/* ********************************
image2 script
******************************** */
a.image2 {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/film_2_ro.gif) no-repeat 0 0;
}
a:hover.image2 {
background-position: -71px 0px;
}

a.image2 span {display: none;}

a:hover.image2 span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;
}
a.image2a {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/archi_2_ro.gif) no-repeat 0 0;
}
a:hover.image2a{
background-position: -71px 0px;
}

a.image2a span {display: none;}

a:hover.image2a span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;
}
a.image2b {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/promo_2_ro.gif) no-repeat 0 0;
}
a:hover.image2b {
background-position: -71px 0px;
}

a.image2b span {display: none;}

a:hover.image2b span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;
}
a.image2c {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/design_2_ro.gif) no-repeat 0 0;
}
a:hover.image2c {
background-position: -71px 0px;
}

a.image2c span {display: none;}

a:hover.image2c span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;
}


/* ********************************
image3 script
******************************** */
a.image3 {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/film_3_ro.gif) no-repeat 0 0;
}
a:hover.image3 {
background-position: -71px 0px;
}

a.image3 span {display: none;}

a:hover.image3 span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px;
  z-index: 20; 
  width:70%; 
  padding:2px 4px;
 
}
a.image3a {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/archi_3_ro.gif) no-repeat 0 0;
}
a:hover.image3a {
background-position: -71px 0px;
}

a.image3a span {display: none;}

a:hover.image3a span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px;
  z-index: 20; 
  width:70%; 
  padding:2px 4px;
 
}
a.image3b {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/promo_3_ro.gif) no-repeat 0 0;
}
a:hover.image3b {
background-position: -71px 0px;
}

a.image3b span {display: none;}

a:hover.image3b span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px;
  z-index: 20; 
  width:70%; 
  padding:2px 4px;
 
}
a.image3c {
display: block;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/design_3_ro.gif) no-repeat 0 0;
}
a:hover.image3c {
background-position: -71px 0px;
}

a.image3c span {display: none;}

a:hover.image3c span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px;
  z-index: 20; 
  width:70%; 
  padding:2px 4px;
 
}
/* ********************************
	personnage
********************************** */
a.imaget {
display: block;
float: left;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/tanguy_ro.gif) no-repeat 0 0;

}
a:hover.imaget {
background-position: -70px 0px;
}

a.imaget span {display: none;}

a:hover.imaget span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;

}
a.imagew {
display: block;
float: left;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/weihan_ro.gif) no-repeat 0 0;

}
a:hover.imagew {
background-position: -70px 0px;
}

a.imagew span {display: none;}

a:hover.imagew span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;

}
a.imager {
display: block;
float: left;
width: 70px;
height: 70px;
padding: 2px;
background: url(images/V2/rachel_ro.gif) no-repeat 0 0;

}
a:hover.imager {
background-position: -70px 0px;
}

a.imager span {display: none;}

a:hover.imager span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;

}
a.imagem {
display: block;
float: left;
width: 71px;
height: 71px;
padding: 2px;
background: url(images/V2/mail_ro.gif) no-repeat 0 0;

}
a.imagem span {display: none;}

a:hover.imagem span {
  display: inline; 
  position: absolute;  
  top: 0px; 
  left: 77px; 
  z-index: 20; 
  width:70%; 
  padding:2px 4px;

}
/* ********************************
	content
********************************** */
a.imagearchi {
display: block;
float: left;
width: 85px;
height: 85px;
background: url(images/V2/archi_ro.gif) no-repeat 0 0;
border: 1px dashed #777; 

}
a:hover.imagearchi {
background-position: -85px 0px;
}

a.imaget span {display: none;}

a:hover.imagearchi span {
  display: inline; 
  position: absolute;  
  top: 75px; 
  left: 88px;
  z-index: 20;
  width:70%;

}
a.imagepromo {
display: block;
float: left;
width: 85px;
height: 85px;
background: url(images/V2/promo_ro.gif) no-repeat 0 0;
border: 1px dashed #777; 

}
a:hover.imagepromo {
background-position: -85px 0px;
}

a.imagepromo span {display: none;}

a:hover.imagepromo span {
  display: inline; 
  position: absolute;  
  top: 212px; 
  left: 193px;
  z-index: 20; 
  width:70%;

}
a.imagedesign {
display: block;
float: left;
width: 85px;
height: 85px;
background: url(images/V2/design_ro.gif) no-repeat 0 0;
border: 1px dashed #777; 

}
a:hover.imagedesign {
background-position: -85px 0px;
}

a.imagedesign span {display: none;}

a:hover.imagedesign span {
  display: inline; 
  position: absolute;  
  top: 317px; 
  left: 473px;
  border-width:thin;
  z-index: 20; 
  width:70%;

}
a.imagefilm {
display: block;
float: left;
width: 85px;
height: 85px;
background: url(images/V2/film_ro.gif) no-repeat 0 0;
border: 1px dashed #777; 

}
a:hover.imagefilm {
background-position: -85px 0px;
}

a.imagefilm span {display: none;}

a:hover.imagefilm span {
  display: inline; 
  position: absolute;  
  top: 318px; 
  left: 500px;
  z-index: 20; 
  width:70%;

}
/* ********************************
	vignette_acceuil
******************************** */
a.b_1_16 {
	position:absolute;
	top: 90px;
	left: 100px;
	background:#000;
	height: 70px;
	width: 70px;
	background-image:url(images/V2/b_1_16.gif);
	list-style-type: none;
	z-index:0;
	}	
a.b_2_24 {
	position:absolute;
	top: 90px;
	left: 174px;
	background:#000;
	height: 70px;
	width: 70px;
	background-image:url(images/V2/b_2_24.gif);
	list-style-type: none;
	z-index:0;
	}
a.b_3_32 {
	position:absolute;
	top: 90px;
	left: 248px;
	background:#000;
	height: 70px;
	width: 70px;
	background-image:url(images/V2/b_3_32.gif);
	list-style-type: none;
	z-index:0;
	}
a.b_4_40 {
	position:absolute;
	top: 90px;
	left: 322px;
	background:#000;
	height: 70px;
	width: 70px;
	background-image:url(images/V2/b_4_40.gif);
	list-style-type: none;
	z-index:0;
	}
a.b_5_48 {
	position:absolute;
	top: 90px;
	left: 396px;
	background:#000;
	height: 70px;
	width: 70px;
	background-image:url(images/V2/b_5_48.gif);
	list-style-type: none;
	z-index:0;	
	}
a.b_6_56 {
	position:absolute;
	top: 90px;
	left: 470px;
	background:#000;
	height: 70px;
	width: 70px;
	background-image:url(images/V2/b_6_56.gif);
	list-style-type: none;
	z-index:0;	
	}
a.b_7_64 {
	position:absolute;
	top: 90px;
	left: 544px;
	background:#000;
	height: 70px;
	width: 70px;
	background-image:url(images/V2/b_7_64.gif);
	list-style-type: none;
	z-index:0;	
	}
a.b_8_72 {
	position:absolute;
	top: 90px;
	left: 618px;
	background:#000;
	height: 70px;
	width: 70px;
	background-image:url(images/V2/b_8_72.gif);
	list-style-type: none;
	z-index:0;	
	}
/* ********************************
	bloc flottant text pour epouser bloc parent
******************************** */
#texte_film {
position: absolute;
top: -15px;
left: 472px;
width: 267px;
font-size:13px;
text-align: justify;
font-family: Arial, Times new roman, Helvetica, sans-serif;
color:#5A6E62;
}
#texte_archi {
position: absolute;
top: -15px;
left: 472px;
width: 267px;
font-size:13px;
text-align: justify;
font-family: Arial, Times new roman, Helvetica, sans-serif;
color: #6C5428;
}
#texte_promo {
position: absolute;
top: -15px;
left: 472px;
width: 267px;
font-size:13px;
text-align: justify;
font-family: Arial, Times new roman, Helvetica, sans-serif;
color: #B7A790;
}
#texte_design {
position: absolute;
top: -15px;
left: 472px;
width: 267px;
font-size:13px;
text-align: justify;
font-family: Arial, Times new roman, Helvetica, sans-serif;
color: #963017;
}
#texte_agence {
	position: absolute;
	top: 15px;
	left: 250px;
	width: 510px;
	font-size:13px;
	text-align: justify;
	font-family: Arial, Times new roman, Helvetica, sans-serif;
	color: #CC9966;
	height: 222px;
}
#mail_contact {
	position: absolute;
	top: 85px;
	left: 100px;
	width: 200px;
	font-size:13px;
	text-align: justify;
	font-family: Arial, Times new roman, Helvetica, sans-serif;
	color: #fff;
	height: 20px;
}
/* ********************************
	axx foot
******************************** */

#axx {
position: absolute;
top: 730px;
left: 0px;
height: 30px;
width : 750px;
text-align: center;
font-family: Arial, Times new roman, Helvetica, sans-serif;
font-size:13px;
}
#arrow {
position: absolute;
left: 300px;
width: 150px;
background: url(images/V2/arrow.gif) no-repeat 2px;
}
a.ax:link, a.ax:visited {
color: #999999;
}
a.ax:hover, a.ax:active {
color:#ff7f0b;
text-decoration:none;
}
/* ********************************
	bloc menu  et menu
******************************** */
#bloc_menu{
	position: absolute;
	top: 95px;
	width: 750px;
	text-align: center;
	font:Arial, Helvetica, sans-serif;
	}

ul#menu {
list-style-type: none;
}

#menu  li {
display: inline;
font:Arial, Helvetica, sans-serif;
font-size: 13px;
margin: 0 2px;
}

/* ********************************
	foot du site
******************************** */
#footer {
position: absolute;
top: 780px;
width: 770px;
text-align: center;
font-family: Arial, Times new roman, Helvetica, sans-serif;

}
h3 {
display: block;
width: 12px;
height: 12px;
top: 570px;
left: 500px;
padding: 2px;
background: url(../V3/images/arrow.gif) no-repeat 0 0;
}
#p {
font: Arial, Times new roman, Helvetica, sans-serif;
font-size: 13px;
}
#p4 {
font: Arial, Times new roman, Helvetica, sans-serif;
font-size: 13px;
color:#CCCCCC;
}
#p1 {
font-size: 12px;
}

#p2 {
font-size: 10px;
color: #666666;

}
#header h1 span, h2 span{
	display:none;
	}
	
	
	/* ********************************
test
******************************** */