@charset "utf-8";
/* CSS Document */



/**************************************************************************************************************************** 
CSS - PLANCHE A DECOUPER - Mr LOUCOUGAIN
****************************************************************************************************************************/
*{
	margin:0;
	padding:0;
}
html, body {
	background:url(../images/body_bg.jpg) repeat-x;
}
#global {
	position:relative;
	width:936px;
	margin-left: auto;
	margin-right: auto;
}
/**************************************************************************************************************************** 
POSITIONNEMENT DES ELEMENTS DE LA PAGE
****************************************************************************************************************************/

/* PLACEMENT DU HEADER */
#header_left {
	position:relative;
	float:left;
	width:446px;
	height:120px;
	background-image:url(../images/header_left.png);
}
#header_rigth {
	float:right;
	width:490px;
	height:120px;
	background-image:url(../images/header_rigth.png);
}

/* PLACEMENT DES IMAGES DE LA BANNIERE */
#picture_left {
	float:left;
	width:303px;
	height:173px;
	background-image:url(../images/picture_left.jpg);
}
#picture_middle {
	float:left;
	height:173px;
	width:323px;
	background-image:url(../images/picture_middle.jpg);
}
#picture_right {
	float:left;
	width:310px;
	height:173px;
	background-image:url(../images/picture_right.jpg);
	font-family:
}
	
/* CONTENU DE LA PAGE */
#marge{
	margin-left:15px;
}
#drapeau{
	position:absolute;
	margin-top:10px;
	width:250px;
	height:30px;
	font-size:12px;
}
#contenu {
	float:left;
	width:932px;
	border-right: 2px solid #217ce5 ;
	border-left: 2px solid #217ce5 ;
	height:auto;
}
#content_prix{
	position:absolute;
	margin-top:280px;
	margin-left:240px;
	width:198px;
	height:122px;
	background-color:#CC0;
	background-image:url(../images/prix.jpg);
}
#video{
	float:right;
	padding-top:37px;
	padding-left:20px;
	width:430px;
	background-color:#f7f7f7;
	height:450px;
}
/* PIED DE PAGE */
#footer {
	float:left;
	width:936px;
	height:25px;
	padding-top:4px;
	background:url(../images/menu.png) repeat-x;
	font-size: .85em;
	background-color:#F93;
}
#footer a{
	color:#FFF;
	font-size:12px;
	font-family:Calibri;
	text-decoration:none;
}
#footer a:hover{
	color:#FFF;
	font-size:12px;
	text-align:center;
	font-family:Calibri;
	text-decoration:underline;
}
.menu_footer{
	padding-left:330px;
	font-size:12px;
	font-family:Calibri;
	color:#FFF;
}
.copyright{
	padding-left:100px;
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;	
}

/* PLACEMENT PHOTOS PAGE PRESENTATION */

#photo_presentation{
	position:absolute;
	left:530px;
	top:380px;
	border: 2px #217ce5 solid;
}

/* CONTENEUR DE LA VIDEO */
#content_video{
	position:absolute;
	margin-top:20px;
	margin-left:50px;
	width:320px;
	height:240px;
	background-color:#C66;
}
#fleche_video{
	position:absolute;
	width:100px;
	height:100px;
	margin-left:480px;
	margin-top:60px;
}
	

/**************************************************************************************************************************** 
MENU DE NAVIGATION
****************************************************************************************************************************/
#menu{
	float:left;
	background:url(../images/menu.png) repeat-x;
	width:936px;
	height:32px;
}
#navigation{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}
#navigation li{ 
    float: left; 
    width: 130px;
	border-right: 1px solid #fff;
	height:32px;
    color: #fff; 
}
#navigation li a{ 
    display: block; 
    background: #c00 url(../images/menu.png); 
    color: #fff;
	font-family:Calibri;
	text-decoration:none;
    line-height: 1em; 
    padding: 8px 0; 
    text-align: center; 
} 
#navigation li a:hover, #navigation li a:focus, #navigation li a:active { 
    background: #c00  url(../images/menu_hover.png); 
}
#photo{
	position:absolute;
	left:530px;
	top:480px;
	border: 2px #217ce5 solid;
}
#coordonnees{
	position:absolute;
	width:300px;
	height:150px;
	left:600px;
	top:740px;
}
/**************************************************************************************************************************** 
ELEMENTS DE MISE EN FORME - TEXTE
****************************************************************************************************************************/

.titre_planche{
	color:#217ce5;
	font-weight:bold;
}
.coloris{
	color:#217ce5;
	font-weight:bold;
	margin-left:35px;
}
.coloris_produits{
	color:#ff3922;
	font-weight:bold;
}
.titre_revolutionnaire{
	color:#ff3922;
	font-weight:bold;
}
.caracteristique{
	margin-left:10px;
	color:#3d3d3d;
	font-family:Calibri;
	font-weight:500;
}
.caracteristique td{
	height:30px;
}
.image{
	border: 2px #ffcd10 solid;
}
.img_produits{
	border: 1px #ffcd10 solid;
}
.produits{
	color:#333;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
}
.titre_fabrique{
	color:#ff3922;
	font-size:12px;
}
.text_form{
	color:#333;
	font-weight:bold;
}
.select_couleur{
	width:147px;
}
.bouton{
	width:100px;
	background-color:#217ce5;
	color:#FFF;
	border:solid;
}
fieldset{
	width:400px;
	border: 2px solid #F90;
	padding-left:10px;
	background-color:#f7f7f7;
}
legend{
	color:#F90;
	padding-left:10px;
	padding-right:10px;
	font-weight:bold;
}
.rougecontact{
	color:#F00;
	font-weight:bold;
}
.vertcontact{
	color:#390;
	font-weight:bold;
}
.footer{
	margin-left:180px;
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
}
.texte{
	font-size:17px;
	font-family:Calibri;
	color:#333;
}
.orange{
	color:#F90
}
.contact_presentation{
	margin-left:150px;
	
}

/**************************************************************************************************************************** 
DIAPO - GALLERIE PHOTO
****************************************************************************************************************************/
#slider {

	/* You MUST specify the width and height */
	width:216px;
	height:144px;
	position:relative;	
	overflow:hidden;
	border: 2px #ffcd10 solid;
}
#buttons a{
	text-decoration:underline;
	color:#217ce5;
}
#buttons a:hover{
	text-decoration:underline;
	color:#217ce5;
}
#mask-gallery {
	
	overflow:hidden;	
}
#gallery {
	
	/* Clear the list style */
	list-style:none;
	margin:0;
	padding:0;
	
	z-index:0;
}
#gallery li {
/* float left, so that the items are arrangged horizontally */
float:left;
}
#mask-excerpt {
	
	/* Set the position */
	position:absolute;	
	top:0;
	left:0;
	z-index:500px;
	
	/* width should be lesser than #slider width */
	width:100px;
	overflow:hidden;	
}
#excerpt li {
	padding:5px;
}
.clear {
	clear:both;	
}
/**************************************************************************************************************************** 
DIAPO - GALLERIE PHOTO
****************************************************************************************************************************/h1{
	font-size:180%;
	font-weight:normal;
	color:#555;
}
pre{
	display:block;
	font:100% "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	overflow:auto;
	width:500px;
}

img{border:none;}
#gallerie ul,li{
	margin:0;
	padding:0;
	width:500px;
}
#gallerie li{
	list-style:none;
	display:inline;
	margin-right:10px;
}



/*  */

#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	}

/*  */