/*  ----------------------------------------------------------- */
/*  Feuilles de styles CalliWeb                                 */
/*  ----------------------------------------------------------- */
* {margin: 0; padding: 0; border: 0; font-family: arial,helvetica,sans-serif; font-style: normal; text-decoration: none; list-style: none }
/*  --------------- */
/*  BackGround du site     */
/*  --------------*/
body{ font-size: 12px; color:#474545}
#page{width: 802px; margin-left: auto;margin-right: auto;margin-top: 5px; background: url(../img/bg-middle.gif) repeat-y top;}
#top{ width: 802px; height:30px; background: #0099FF url(../img/bg-top.gif) no-repeat top; position:relative}
#footer{ width: 802px; height:30px; background: #0099FF url(../img/bg-footer.gif) no-repeat top; }
#bande-bleu{ background: #0099FF; margin:0 12px; height:100px}
#menu{margin:0 12px;}
/*  ---------------------  */
/*  MISE EN PAGE GENERAL */
/*  --------------------*/
#top a{  display:bloc; position:absolute; top:21px; left :41px}
#top img.accroche{ display:bloc; position:absolute; top:46px; left :192px  }
/*  ----------------------------*/
/*  MISE EN PLACE DU MENU HAUT */
/*  --------------------------*/
#menu{background: #474545;  height:34px; border-top:1px solid #928E8E}
#menu ul {padding:7px 0 0 28px}
#menu ul li {float: left;}
#menu ul li a strong{position:absolute; left:-7000px; top:-7000px;}
#menu p{ float:right; color:#FFF; padding:0 28px 0 15px; margin:2px 0 0 0;  background: url(../img/tel.gif) no-repeat left; }

#menu #item1 a{ display: block; width: 73px; height: 20px; background: url(../img/menu/accueil.gif) no-repeat top left }
#menu #item1.active a:link{ background: url(../img/menu/accueil.gif) no-repeat bottom left }
#menu #item1.active a:visited{ background: url(../img/menu/accueil.gif) no-repeat bottom left }
#menu #item1 a:hover{background: url(../img/menu/accueil.gif) no-repeat bottom left }

#menu #item2 a{ display: block; width: 84px; height: 20px; background: url(../img/menu/societe.gif) no-repeat top left }
#menu #item2.active a:link{ background: url(../img/menu/societe.gif) no-repeat bottom left }
#menu #item2.active a:visited{ background: url(../img/menu/societe.gif) no-repeat bottom left }
#menu #item2 a:hover{background: url(../img/menu/societe.gif) no-repeat bottom left }

#menu #item3 a{ display: block; width: 117px; height: 20px; background: url(../img/menu/produits.gif) no-repeat top left }
#menu #item3.active a:link{ background: url(../img/menu/produits.gif) no-repeat bottom left }
#menu #item3.active a:visited{ background: url(../img/menu/produits.gif) no-repeat bottom left }
#menu #item3 a:hover{background: url(../img/menu/produits.gif) no-repeat bottom left }

#menu #item4 a{ display: block; width: 175px; height: 20px; background: url(../img/menu/productions.gif) no-repeat top left }
#menu #item4.active a:link{ background: url(../img/menu/productions.gif) no-repeat bottom left }
#menu #item4.active a:visited{ background: url(../img/menu/productions.gif) no-repeat bottom left }
#menu #item4 a:hover{background: url(../img/menu/productions.gif) no-repeat bottom left }

#menu #item5 a{ display: block; width: 85px; height: 20px; background: url(../img/menu/contact.gif) no-repeat top left }
#menu #item5.active a:link{ background: url(../img/menu/contact.gif) no-repeat bottom left }
#menu #item5.active a:visited{ background: url(../img/menu/contact.gif) no-repeat bottom left }
#menu #item5 a:hover{background: url(../img/menu/contact.gif) no-repeat bottom left }
/*  --------*/
/*  ENCARTS */
/*  ----- */
#encart-actu{ width:181px; height:118px;  margin-bottom:40px; background: url(../img/encart-actu.gif) no-repeat top left}
#encart-actu h3{font-size: 13px; color:#FFF; text-align:center; padding:12px 8px 0 0; }
#encart-actu p{font-size: 11px; color:#000;  padding:10px 18px 0 15px;  margin:0}
#encart-actu p.ensavoir { float:right; margin:0; padding-top: 0; font-size:10px; }
#encart-actu p a{color:#FFF; text-decoration:underline}
#encart-actu p a:hover{color:#000;}

#encart-produits{ width:181px; height:186px;  background: url(../img/encart-produits.gif) no-repeat top left}
#encart-produits h3{font-size: 13px; color:#FFF; text-align:center; padding:2px 8px 0 0; }
#encart-produits ul{ padding:12px 0 0 10px; }
#encart-produits ul li{ padding-left:10px; margin-bottom:10px; background: url(../img/arrow.png) no-repeat left}
#encart-produits ul li a{ color:#474545;}
#encart-produits ul li a:hover{ color:#ED6712;}
#encart-produits ul li a:hover, #encart-produits ul li.active a{ color:#ED6712;}
/*  --------*/
/*  CONTENT */
/*  ----- */
#content{ position:relative; padding-left:28px; margin:35px 0 0 12px ; }

#div_left{ width:512px; margin-bottom:35px}
#div_right{position:absolute; right:30px; top:40px;}
h1, h2.accueil{ font-size:16px; padding-bottom:10px; margin-bottom:7px; color:#0099FF; background: url(../img/trait_heading.gif) no-repeat bottom left }
#content p{ padding-bottom:5px }
/* accueil */
h2.accueil{ margin-top:25px; }
/* SOCIETE */
#societe{ position:relative; margin-right: 40px; margin-bottom:30px}
#societe #image{ margin: 0 0 30px 0; }
#societe #image img{ border:1px solid #454545 }
#societe h1{ margin:10px 0; }
#societe H2{ font-size: 13px;margin:5px 0 }
#societe li{ padding-left:10px; background: url(../img/puce-small.gif) no-repeat 0 8px }
#societe ul{ margin-left:10px; padding-bottom:10px }
#societe ul.hist li{ margin-bottom:3px }
#societe .pcarte{ margin-right: 400px; margin-bottom:200px}
#societe #carte{ position: absolute;top:830px; LEFT: 370PX; width:220px; height:224px; }
/* produits */
.p1{ padding-right: 40px; }
#produits{ margin-top:30px; margin-bottom:30px }
#prod-famille{position: relative; float: left; width:320px; background:#EEEDEB; margin:0 20px 15px 0; padding:10px 10px 10px 20px; color:#000 }
#prod-famille h2{font-size:14px;  }
#prod-famille img{float:left; padding-right:15px  }
#prod-famille p.ensavoir { position:absolute; right:10px; top:100px; font-size:11px; }
#prod-famille a{ color: #551A8B; }
#prod-famille a:hover{ text-decoration:underline }
/* familles */
#file_ariane{ position:absolute; top:-20px;  }
#file_ariane a{ text-decoration: underline; color:#474545 }
#file_ariane a:hover{color:#000000 }

#div_left_famille{ width:512px; margin-bottom:35px; padding-top: 10px;}
#div_left_famille h2{ font-size:14px }
#div_left_famille ul{ margin:0 0 10px 10px }
#div_left_famille .pul{ margin-bottom:5px }
#div_left_famille li{ padding-left:10px; background: url(../img/puce-md.gif) no-repeat 0 7px }

/*#famille .thumbscontainer, #famille .thumbscontainer ul{ margin: 0; }
#famille .thumbscontainer li{ background:none; margin:0; padding: 0 }*/

#div-famille{ margin-top:20px}
#famille{position: relative; float: left; width:472px; background:#BFDCF0; margin:0 20px 15px 0px; padding:10px 10px 10px 15px; color:#000 }
#famille h2{font-size:14px;padding-bottom:5px  }
#famille img{float:left; padding-right:10px  }
#famille p.diametre { position:absolute; right:20px; top:100px; }
/* PRODUCTION ET CONTROLE */
#societe ul.rest{position:relative; margin-right:270px; margin-left:0px; }
#societe .rest li{background:  none ;padding-left:0px; margin-bottom:2px  }
#societe li.col{ background: #F0F0FF; }
#societe li span{position:absolute; left: 400px; }
#societe #improd1{ position: absolute; top: 50PX; LEFT: 540PX; width:190px; height:193px;}
#societe #improd2{ position: absolute; top: 320PX; LEFT: 550PX; width:190px; height:193px;}

/* Mention légales */
#mention-legales{ margin:20px 0 30px 0;  }
#mention-legales ul{ margin-bottom: 20px; }
#mention-legales h2{ font-size: 14px; margin:0; padding:0}
#mention-legales h3{ font-size: 12px; }
#mention-legales p{ margin-bottom: 10px; }
/*  --------*/
/*  FOOTER */
/*  ----- */
#footer{ clear:both }
#footer p{text-align:center; font-size:10px; padding-top:3px}
#ml{ text-align: center; font-size:10px; padding-bottom:20px}
#ml a{color:#000}
#ml a:hover{text-decoration:underline}


/* CONTACT */
address{ line-height: 17px; }
#div_left_contact{ float:left; width:350px; margin-right:20px; }
#div_right_contact{ float:left; width:350px; padding-top:10px }
#div_right_contact h2{ padding-left:30px; margin-bottom:10px; font-size: 14px; background: url(../img/picto-infos-pratiques.gif) no-repeat left }
#div_right_contact #plan-acces h2{background: url(../img/picto-plan-acces.gif) no-repeat left }
#plan-acces{ margin-top:30px;}
#div_right_contact a{ text-decoration: underline; color:#474545 }
#div_right_contact a:hover{color:#000000 }
#div_right_contact #map{ width:350px; height:350px; }
#div_left_contact p{ font-size:13px; padding-right:10px; margin:0; }
#div_left_contact p.thankyou{ text-align: center; padding: 10px; margin: 20px 0 0 0; border: 1px dashed #CCC;}
#div_left_contact #errors{ color: red; background: #CCC; padding: 10px; font-size:11px; margin: 0 10px 10px 0;}
#clearcontact {clear:both; width:10px; height:1px; margin-top:-40px; padding:0; margin-bottom: 45px;}

/* INPUTS DU FORMULAIRE */
input{ font-size: 12px; height:15px; padding: 1PX 0 1PX 4px; border-top: 1px solid #ACA899; border-left: 1px solid #ACA899;border-bottom: 1px solid #E4E3DE; border-right: 1px solid #E4E3DE;   width: 200px; }
textarea{ font-size: 12px; padding: 4px; border: 1px solid #7F9DB9; width: 330px; height:140px }
select{ border: 1px solid #C0C0C0; width: 60px;}
#valid {
background:transparent url(../img/bt.gif) no-repeat left top;
cursor:pointer;
display:block;
height:22px;
margin-left:10px;
width:77px;
border:none
}