/*  ----------------------------------------------------------- */
/*  Feuilles de styles CalliWeb                                 */
/*  ----------------------------------------------------------- */
* {margin: 0; padding: 0; border: 0; font-style: normal; text-decoration: none; list-style: none }
/*  ---------------------  */
/*  MISE EN PAGE GENERAL */
/*  --------------------*/
body{ font-family: arial,helvetica,sans-serif; font-size: 12px;background:#dddada}
#page{position:relative; width: 873px; margin-left: auto;margin-right: auto;margin-top: 5px; background: url(../img/middle.jpg) repeat-y top;}
#header{ width: 873px; height:40px; background: #fff url(../img/top.jpg) no-repeat top; }
#anim{ width: 873px; height:174px; background: #fff url(../img/middle.jpg) repeat-y top; }
#footer{ width: 873px; height:66px; background: #1764a2 url(../img/bottom.jpg) no-repeat top;}
object{ position: absolute; left:12px; top:1px }
#menu-haut{ position:relative; width: 849px; height:29px; margin-left:12px; background: #8f8d8e url(../img/bg-menu.jpg) no-repeat left;}

#centre, #centre2 {
margin: 0 12px 0 297px;
padding:45px 25px 0 22px;
}
#centre2 {
padding:45px 25px 0 5px;
}
#menu {
position: absolute;
left:12px;
width: 285px;
}
#menu ul li a strong, #menu #item7 strong, em, #menu-haut ul li a strong, #menu-haut p strong, h1#mp3 strong,h1#contact strong, h1#ml strong
{position:absolute; left:-7000px; top:-7000px;}
/*  ----------------------------*/
/*  MISE EN PLACE DU MENU HAUT */
/*  --------------------------*/
#menu-haut ul {padding-left:291px}
#menu-haut ul li {float: left; margin-top:9px}
#menu-haut #item1{ margin-right: 24px; }
#menu-haut #item1 a{ display: block; width: 120px; height: 11px; background: url(../img/menu/accueil.gif) no-repeat top left }
#menu-haut #item1.active a:link{ background: url(../img/menu/accueil.gif) no-repeat bottom left }
#menu-haut #item1.active a:visited{ background: url(../img/menu/accueil.gif) no-repeat bottom left }
#menu-haut #item1 a:hover{background: url(../img/menu/accueil.gif) no-repeat bottom left }

#menu-haut #item2{ margin-right: 169px; }
#menu-haut #item2 a{ display: block; width: 98px; height: 11px; background: url(../img/menu/contact.gif) no-repeat top left }
#menu-hautu #item2.active a:link{ background: url(../img/menu/contact.gif) no-repeat bottom left }
#menu-haut #item2.active a:visited{ background: url(../img/menu/contact.gif) no-repeat bottom left }
#menu-haut #item2 a:hover{background: url(../img/menu/contact.gif) no-repeat bottom left }

#menu-haut a.mai{ position:absolute; top:7px; left:10px; color:#282627; text-decoration:underline; font-weight:bold; color:#fff}
#menu-haut p{ float: left; margin-top:9px; width: 123px; height: 11px; background: url(../img/menu/tel.gif) no-repeat top left }
/*  ----------------------------*/
/*  MISE EN PLACE DU MENU GAUCHE */
/*  --------------------------*/
#menu #item14 a{display: block; width: 285px; height: 74px; background: url(../img/menu/catalogue.gif) no-repeat top left }
#menu #item14.active a:link{ background: url(../img/menu/catalogue.gif) no-repeat bottom left }
#menu #item14.active a:visited{ background: url(../img/menu/catalogue.gif) no-repeat bottom left }
#menu #item14 a:hover{background: url(../img/menu/catalogue.gif) no-repeat bottom left }

#menu #item9 a{ display: block; width: 285px; height: 74px; background: url(../img/menu/textile.gif) no-repeat top left }
#menu #item9.active a:link{ background: url(../img/menu/textile.gif) no-repeat bottom left }
#menu #item9.active a:visited{ background: url(../img/menu/textile.gif) no-repeat bottom left }
#menu #item9 a:hover{background: url(../img/menu/textile.gif) no-repeat bottom left }

#menu #item10 a{ display: block; width: 285px; height: 74px; background: url(../img/menu/dev.gif) no-repeat top left }
#menu #item10.active a:link{ background: url(../img/menu/dev.gif) no-repeat bottom left }
#menu #item10.active a:visited{ background: url(../img/menu/dev.gif) no-repeat bottom left }
#menu #item10 a:hover{background: url(../img/menu/dev.gif) no-repeat bottom left }

/*#menu #item6 a{ display: block; width: 285px; height: 74px; background: url(../img/menu/mp3.gif) no-repeat top left }
#menu #item6.active a:link{ background: url(../img/menu/mp3.gif) no-repeat bottom left }
#menu #item6.active a:visited{ background: url(../img/menu/mp3.gif) no-repeat bottom left }
#menu #item6 a:hover{background: url(../img/menu/mp3.gif) no-repeat bottom left }*/

#menu #item11 a{ display: block; width: 285px; height: 74px; background: url(../img/menu/mp3.gif) no-repeat top left }
#menu #item11.active a:link{ background: url(../img/menu/mp3.gif) no-repeat bottom left }
#menu #item11.active a:visited{ background: url(../img/menu/mp3.gif) no-repeat bottom left }
#menu #item11 a:hover{background: url(../img/menu/mp3.gif) no-repeat bottom left }

#menu #item13 a{display: block; width: 285px; height: 74px; background: url(../img/menu/catalogue_virtuel.gif) no-repeat top left }
#menu #item13.active a:link{ background: url(../img/menu/catalogue_virtuel.gif) no-repeat bottom left }
#menu #item13.active a:visited{ background: url(../img/menu/catalogue_virtuel.gif) no-repeat bottom left }
#menu #item13 a:hover{background: url(../img/menu/catalogue_virtuel.gif) no-repeat bottom left }

#menu #item7 { width: 285px; height: 74px; background: url(../img/menu/hole.gif) no-repeat top left }
/*  ----------------------------*/
/*  MISE EN PLACE DU CONTENU */
/*  --------------------------*/
h1{ width:290px; height:18px; margin-bottom:8px; background: url(../img/titre1.gif) no-repeat top }
h2{ width:489px; height:41px; margin-bottom:8px; background: url(../img/titre2.gif) no-repeat top }
#titre3{ width:377px; height:19px; margin-bottom:8px; background: url(../img/titre3.gif) no-repeat top }
p{color:#434445; line-height:16px; margin-bottom:20px;}
/* catalogue */
#catalogue{  height:700px;
margin-bottom: 30px; }

/* mp3 */
h1#mp3{width:517px; height:42px; margin-bottom:15px; background: #ccc url(../img/titre-mp3.jpg) no-repeat left  }
#prix{margin-bottom:40px; font-weight:bold  }
.famille{position: relative; float: left; width:508px;/* background:#BFDCF0;*/ margin:0 0px 30px 0px; padding:0 0px 10px 0; color:#000; border-bottom:1px solid #8f8d8e}
.famille h2.mp3{width:300px;height:14px;  font-size:14px;margin:0; padding:0 0 10px 0;background: none }
h2.mp3 .blue{ color:#0164a8; font-size:14px }
.famille img{float:left; padding-right:15px;margin-bottom:10px}
.famille a img{border:none  }
.famille a:hover img{border:none  }
.famille p{ color:#434445; margin:0; padding:0;  }
.famille p.diametre {  color:#000; padding-top:10px}
.famille .dim{ color:#afb4b9 }
/* Contact */
h1#contact{ width:83px; height:19px; margin-bottom:8px; background: url(../img/contact.gif) no-repeat top }
/* INPUTS DU FORMULAIRE */
p.thankyou{ text-align: center; padding: 10px; margin: 20px 0 0 0; border: 1px dashed #CCC;}
#errors{ color: red; background: #CCC; padding: 10px; font-size:11px; margin: 0 10px 10px 0;}
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;
margin-bottom:30px;
width:77px;
border:none
}
/* Mention légales */
h1#ml{ width:136px; height:19px; margin-bottom:4px; background: url(../img/ml.gif) no-repeat top }
#mention-legales{ margin:20px 0 30px 0;  }
#mention-legales ul{ margin-bottom: 20px; margin-top:0; padding:0}
#mention-legales h3{ font-size: 14px; margin:0 0 5px 0; padding:0; background:none}
#mention-legales h4{ font-size: 11px;margin:0; padding:0;  }
#mention-legales p{ margin: 0 0 10px 0; }
/*  ----------------------------*/
/*  MISE EN PLACE DU FOOTER */
/*  --------------------------*/
#footer p{ margin: 0 11px; padding:3px 0 0 0; height:45px; text-align:center; color:#FFF; line-height:20px; background: #1764a2; border-left: 1px solid black;border-right: 1px solid black;border-bottom: 1px solid #393738; word-spacing: 2px }
#footer p a{ color:#fff }
#footer p a:hover{ text-decoration: underline}
#footer .mn{ font-size:11px; color:#9d9c9c }
#footer .mn a{ color:#9d9c9c }
#footer .mn a:hover{ text-decoration: underline }