/* 
 * Copyright (c) 2007 Copyright (c) Octolys Development
 * Ce template a été réalisé par http://www.scopika.com & http://www.fredodo.com
 * Il est soumis à la licence GPL
 */

/* Ce fichier définit le style visuel pour les différents éléments des pages.
 * Dans l'ordre, vous trouverez les règles qui définissent l'apparence pour:
 * - Eléments HTML en général
 * - Page
 * - Entête
 * - Chemin
 * - Produit petit & grand
 * - Pied de page
 * - Menu général
 * - Signature
 * - Nombre de pages
 * - les styles particuliers pour les pages intérieures
 */


/* Eléments HTML en général
-------------------------------------------------------- */

body {
	padding: 0;
	margin: 0;
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center;
	background-color: #CCCCCC;
	font-size: 0.8em;
}

h1, h2, h3{
	font-family: "Trebuchet MS", sans-serif;
}
/* --- titre de la page --- */
h1{ font-size: 14px;	
    margin: 5px 0 10px 5px;	
	padding: 0;
    color:white;}
	
h2{	font-size: 11px;	
   margin: 0 0 0 3px;	
   padding: 3px 0 0 3px;
  /* border:1px solid red;*/
   }
h3{	font-size: 10px;	margin: 0;	padding: 0;}
h4{	font-size: 0.8em;	margin: 0;	padding: 0px 0px 0px 3px;}
a {
	color: #EC8000;
	text-decoration: none;
}

a:visited {
	color: #EC8000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #EC8000;
}

img {
	border: 0
}
/* formulaire -------------------- */

#contenu form {
	padding:0;
	margin:0 0 20px 0;
}

#contenu form p {
	margin: 0;
	padding: 4px 0;
	/* Empêcher le dépassement des flottants */
	overflow: hidden;
	font-size: 12px;
	border-bottom:1px solid #ccc;
	clear:both;
	float:left;
	width:100%;
}

#contenu form p.derniereLigne {
	border:none;
	margin:10px 0 0 0;
	padding:0;
	width:100%;
	float:left;
	text-align:center;
}

#contenu form p label {
	float: left;
	width: 290px;
	padding:0 10px 0 5px;
	margin: 0;
	line-height:20px;
}

#contenu form p label.codeDeReduction {
	width: 180px;
}

#contenu form p label.petit {
	width: 80px;
}

#contenu form p input, #contenu form p select, #contenu form p textarea {
	float:left;
	margin: 0;
	width: 190px;
	padding: 3px;
	border:solid 1px #a9abad;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#626164;
	font-weight:bold;
	background-color:#d8d9da;
}

#contenu form p input.codeDeReduction {
	width: 50px;
	background-color:#fff;
	padding: 4px;
}

#contenu form p select {
	width: 198px;
}

#contenu form p textarea {
	width: 300px;
}

#contenu form p input.radio, #contenu form p input.checkBox {
	float:left;
	margin: 5px 0;
	width: 20px;
	padding: 0;
	background-color:transparent;
	border: none;
}
#contenu form p .labelRadio, #contenu form p .labelCheckBox {
	float:left;
	margin: 5px 10px 0 0;
	padding: 0;
	background-color:transparent;
	border: none;
	font-weight:bold;
	/*border:1px solid red;*/
}
	
#contenu form button.bouton,
#contenu form button.boutonMemeLigneQuInput { 
   /*display:-moz-inline-box; 
   display:inline-block; */
	margin:0px 0px 0px 5px; 
    padding:0px 0 0px 0;
   
    white-space:nowrap; 
    text-align:center; 
    vertical-align:middle; 
    cursor:pointer; 
	border:none;
    
	/*font-size:14px;*/
	font-weight:bold;
	background: url(images/bttn_l.png) 0px 0px no-repeat;
	/*border:1px solid yellow;*/
	height:24px;
}

#contenu form button.boutonMemeLigneQuInput { 
    margin:0 0 0 10px; 
}
	
#contenu form button.bouton span,
#contenu form button.boutonMemeLigneQuInput span { 
   
    float:left; 
    padding:0 0 0 7px;        /* Largeur du côté gauche */ 
	margin:0 0px 0px 0;
	border: none;
/*    vertical-align:middle;*/
/*	background-color:#0081ca;*/
	background: url(images/bttn_r.png) 100% 0px no-repeat;
	/*border:1px solid red;*/
	height:24px;
	
}

#contenu form button.bouton span span,
#contenu form button.boutonMemeLigneQuInput span span {
  
   /* padding:0 8px 0 0; *//* Largeur du côté droit */ 
	padding:0 0px 0 0px; 
	margin:0 10px 0px 0px;
	color:#FFF;
	height:24px;
	line-height:22px; /* Alignement vertical du texte */ 
	border: none;
	background: url(images/bttn_m.png) repeat-x;
	/*border:1px solid green;*/
	
}

#contenu form button.bouton:hover , 
#contenu form button.boutonMemeLigneQuInput:hover  { 
background: url(images/bttn_l.png) 0 -24px no-repeat; } 
#contenu form button.bouton:hover span, 
#contenu form button.boutonMemeLigneQuInput:hover span { 
background: url(images/bttn_r.png) 100% -24px no-repeat; } 
#contenu form button.bouton:hover span span,  
#contenu form button.boutonMemeLigneQuInput:hover span span { 
   color: black; /* #fff; */
   font-weight:bold;
   background: url(images/bttn_m.png) 0 -24px repeat-x; } 




.obligatoire {
	font-size: 12px;
	color: #FF0000;
	clear:both;
	margin:10px 0;
}

/* Page -------------------------------------------------------- */

#wrapper {
	width: 990px;
	text-align: left;
	overflow: visible;
	position: relative;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0;
	background: url(images/photos_telinject_11_1.jpg);
	
}

#subwrapper {
	overflow: hidden;
	position: relative;
	padding: 0;
	width: 990px;
	background: url(images/photos_telinject_11_1.jpg) no-repeat; 
	background-color: #DAD6D5;/*#FFFFFF;*/
/*	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
*/	
}

#content {
   float:left;
	padding: 0;
	clear: both;
	margin: 0;
	width:100%;
	height:100%; /* 642px;*/
	/* pas pour l'instant background-color: #CCCCCC;*/
	/*border:2px solid blue;*/
	/*background: url(images/photos_telinject_11_1.jpg);*/
}

#contenu {	
	float: right;
	width:774px;
	padding: 0; /*0 20px;*/
	margin: 5px 10px 0 0; /*25px 20px;*/
	border-bottom:1px solid #D6DEC6;
	background: url(images/cadre_liste_produit.png) no-repeat;
	/*border:1px solid yellow;*/
}

#contenu h1 {  /* ---  je redefini le titre de la page --- */
	font-size: 12px;	
	margin: 3px 0 0px 10px;	
	padding: 0;
	color: black;
}

#contenu h2 {
    font-size: 12px;	
    margin: 3px 0 0px 10px;	
	padding: 0;
    color: #676767;

}

.titrePage {
	color: #000; /*#12335B;*/
	text-align: left;
	font-weight: bold;
	font-size: 12px;
	width: 100%; /* 765px; *//* 990 - (2*175) - 10 = 600 */
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 5px;
	/* border: 1px solid red;*/
}

.sousTitrePage {
	color: #12335B;
	text-align: left;
	font-weight: bold;
	/*width: 598px; /* 750px;*/ /* 960 - (2*175) - 10 = 600 */*/
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.textePage {
	color: #141414;
	text-align: left;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
}

.separation {
	height: 1px;
	width: 600px;
	background-color: #7f8eb9;
	margin-top: 4px;
	margin-bottom: 4px;
	overflow:hidden;
	zoom:1;
}


/* --- Entête -------------------------------------------------------- */

#entete {
	float: left;
	/*background-color: #4BA12D; *//* #12335b; */
	background: url(images/logo.png) no-repeat; 
	height:54px; /* hauteur de l img = 76px ??? */
	width: 990px;
	
	margin: 0;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	color: #B6B4B2; /*#000000;*/
	
}

.logo {
	float: left;
	width: 460px;
	margin: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 10px;
}




.boutonMonCompteEntete {	
	/*float: left;*/
	margin: 0;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

a.LIEN_entete:link {
	font-size: 0.7em;
	color: #a9c9e9;
	text-decoration: none;
	font-weight: 600;
}

a.LIEN_entete:visited {
	font-size: 0.7em;
	color: #a9c9e9;
	text-decoration: none;
	font-weight: 600;
}

a.LIEN_entete:hover {
	font-size: 0.7em;
	color: #a9c9e9;
	text-decoration: underline;
	font-weight: 600;
}


/* Chemin -------------------------------------------------------- */
#chemin {
	float: left;
	width:990px;
	color: #7A7A7A; /* un gris *//*#FFC581;*/ /*EC8000; #0066CC;#12335B;  #a9c9e9;*/
	font-size: 12px;
	font-weight: 600; /* 700 = bold;*/
	background-color: #FFF; /* #0066CC; bleu ciel */
	margin: 0;
	padding-top:3px;
	padding-left: 6px;
/*	border-top-width: 0px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
*/	
	background: url(images/cadre_chemin.png) no-repeat; /* #FFF6F9  #E9F6F9*/
}
/* ------------------------------------------------------------------------ */
/* --- normalement avec ça on n'a plus besoin de LIEN_chemin --- */
/* ---  7A7A7A = un gris ----------------------------------------------- */
/* ------------------------------------------------------------------------ */
#chemin a { color: #7A7A7A; text-decoration: none; }
#chemin a:link{ color: #7A7A7A; text-decoration: none; }
#chemin a:visited{ color: #7A7A7A; text-decoration: none; }
#chemin a:hover{ color: #7A7A7A; text-decoration: underline;}



/* Produit petit & grand
-------------------------------------------------------- */

.ListeProduitsPetits {
	float: left;
	width: 750px;
	margin: 3px 0 0 5px;
	padding: 0;
	/*border:1px solid blue;	*/
}

.produitPetit {
	float: left;
	width: 345px; /* 180px;*/
	margin-top: 10px;
	margin-right: 2px;
	margin-bottom: 0;
	margin-left: 10px;
	padding: 0;
	/*border:1px solid blue;*/
	background: url(images/cadre_petit_produit.png) no-repeat;
}

.contourImage {
	border: 1px outset gray; 
	/*border-style: outset;*/
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	
	/*float: left;*/
}

.titreProduit {
	color: #12335B;
	text-align: left;
	font-weight: bold;
	margin-top: 3px;
	margin-bottom: 0px;
	margin-left: 5px;
	font-size: 0.8em;
	/*width: 100%;*/
}

.chapoProduit {
	color: #12335B;
	text-align: left;
	font-style: italic;
	font-size: 13px;
	line-height: 16px;
	margin-bottom: 3px;
	margin-left: 5px;
	/*width: 100%;*/
}

.descriptionProduit {
	color: #12335B;
	text-align: left;
	margin-top: 5px;
	margin-bottom: 5px;
}
.postcriptumProduit {
    float:left;
	color: #FF0000;
	text-align: top;
	margin-top: 5px;
	margin-bottom: 10px;
	font-size: 11px;
	
}
.cadre_bas_produit { 
    background: url(images/cadre_bas_produit.png) no-repeat;
    background-position: 0px 0px;
	height:10px;
	margin-bottom:0px;
}
.cadre_bas_liste_produit { 
position:inherit;
    background: #FFF url(images/cadre_bas_liste_produit.png) no-repeat;
   /* background-position: 0px 0px;*/
	height:10px;
	margin-bottom:0px;
	width:605px;
	/*border:1px solid black;*/
	
}

.labelprixProduit {
	color: #000; /* #EC8000;*/
	text-align: left;
	font-weight: none;
	margin-top: 5px;
	margin-left: 2px;
}

.prixProduit { 
	color: #EC8000;
	text-align: left;
	font-weight: bold;
	/*margin-top: 5px;
	margin-left: 2px;*/
}

.ficheProduit {
	float:left;
	/*width: 470px;*/
	margin-left: 10px;
}

/* ajouter au panier */
a.LIEN_commander {
	font-size: 10px;
	color: #0066CC;  
	font-weight: bold;
	margin-left:5px;
}
a.LIEN_commander:link 	{color: #0066CC;  text-decoration: none;}
a.LIEN_commander:visited{color: #0066CC;  text-decoration: none;}
a.LIEN_commander:hover 	{color: #0066CC;  text-decoration: underline;}

/* Nombre de pages
-------------------------------------------------------- */

#pages {
	float: left;
	width: 738px;
	text-align: right;
	font-size: 10px;
	margin: 0;
	margin-top:3px;
	margin-left:1px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right:5px;
	color: #12335B;
/*	border:1px solid black;*/
	background-color: transparent;/*#dedce6;*/
}
a.LIEN_pages {
	color: #12335B;
	font-weight: bold;
}
a.LIEN_pages:link 	{text-decoration: none;}
a.LIEN_pages:visited {text-decoration: none;}
a.LIEN_pages:hover 	{text-decoration: underline;}


/* Pied de page
-------------------------------------------------------- */
/* --- celui de la version 140 adapté --- */
#footer {
    text-align: center;/*right;*/
	float: left;
	width: 990px;
	color: #606060; /* #ec8000;*/  /* #9a9b9d;*/
	font-size: 10px; /* 11px;*/
	font-weight:normal;
	padding:2px 0px 2px 0px;
	background-color: #DAD6D5; /* #e7e8e9;*/
	border-top:dotted 1px #606060; /*#ec8000; *//* #d8d9da;*/
	
/*	border : 1px solid red;*/
	}
	
#footer .colonne {
	float: left;
	width: 310px;
	margin:0;
	padding:0 10px;
	}
	
#footer .colonne p {
	font-size:11px;
	margin:0;
	padding:0;
	}
	
#footer h4 {
	font-size:11px;
	color: #626164;
	background-image:none;
	padding:0;
	margin:3px 0 0 0;
	}
			
#footer a, #footer a:visited  {
	color: #808080; /*#ec8000; *//*#FFC581; #0066CC;*/
	font-weight: 600; /*bold;*/
	/*color: #9a9b9d;*/
	text-decoration: none;
	/*padding:0 5px;*/
	/* border-right:solid 1px #ec8000; */ /*#9a9b9d;*/	
}

#footer h4 a, #footer h4 a:visited {
	font-weight:bold;
	border:none;
	}

#footer a:hover {
	text-decoration: underline;
}

#footer .colonne p.validator {
	float:left;
	margin:5px 0 0 0;
	}
	
#footer .colonne p.validator a, #footer .colonne p.validator a:visited {
	border:none;
	}





/* Divers éléments de formulaires & tableaux
-------------------------------------------------------- */

.enteteTableau {
    font-size: 0.9em;
	color: #12335B;
	font-weight: bold;
	background-color: #dedce6;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}

.ligneTableau {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #c6cdde;
	font-size: 0.9em;
}

.footerTableau {
	color: #12335B;
	font-weight: bold;
	background-color: #bdbbcd;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}

.boutonMonCompteContenu {
	font-weight: bold;
	/* width: 320px;*//*580px;*/
	width: 580px;
	text-align: center;
	margin: 10px;
}

.zoneDeSaisie {
	color: #12335B;
	font-weight: bold;
	font-size: 0.9em;
}

.obligatoire {
	color: #FF0000;
}

.commentaires {
	font-size: 1em;
	font-style: italic;
	font-weight: bold;
	color: #12335B;
}



/* Signature
-------------------------------------------------------- */

#signature {
    text-align:center;
	padding: 0;
	width: 990px;
	color: #808185;
	font-size: 10px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	/*font-weight: bold;*/
	background-color: #CCCCCC;
}

.W3C {
	width: 88px;
	margin: 0;
	padding: 0;
	float: right;
}

a.LIEN_signature:link {
	color: #808185;
	text-decoration: none;
	/*font-weight: bold;*/
}

a.LIEN_signature:visited {
	color: #808185;
	text-decoration: none;
	/*font-weight: bold;*/
}

a.LIEN_signature:hover {
	color: #808185;
	text-decoration: underline;
	/*font-weight: bold;*/
}

/* Correction des bug Internet Explorer
-------------------------------------------------------- */

* html button {width:1%; overflow:visible;} 
*:first-child+html button {overflow:visible;}