* {
padding:0;
margin:0;
border;
}


body {
    background-image: url("fondsite1.jpg");
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: white;                                                /*couleur du texte par defaut*/
	                                              
	scrollbar-base-color: rgb(255,255,193);
	scrollbar-track-color:black;
	scrollbar-arrow-color:black;
	width: 995px;
}
a:hover {font-weight:;color: silver;background-color: none;display: block;}      /*couleur du texte et fond avec hover*/
a {text-decoration:none; color:white;}                                /*couleur du texte sans hover*/
.style1 {color: #FF0000}

/***** menu CSS *****/
@media print {
/*A l'impression on cache le menu, marche au moins pour IE, Moz et Opéra.*/
 
   
   

.menu, .ssmenu {
	visibility: hidden;
}

}

.menu
{
	background-image: url("fondcontact.jpg");                             /* couleur de fond du menu */
	color: red;
	font-size: small;	
	border: 1px silver solid;	
	padding: 1px;	
/* width et margin sont au cas où le javascript est désactivé. */
	width: 15em;
	margin: 1em;
}
.ssmenu 
{
	background-image: url("fondcontact.jpg");                                      /* couleur de fond du menu */
	color: white;
	font-size: small;
	font-weight: bold;
	border: 1px silver solid;
	padding: 1px;
	filter: alpha(opacity=90);
	-moz-opacity: 0.80;
	opacity: 0.80;
/* width et margin sont au cas où le javascript est désactivé. */
	width: 15em;
	margin: 1em;
}
/* .menu = les cases toujours visibles (comme Fichier, Edition... dans un logiciel) */
.menu {
	text-align: justify;
}
.menu span, .ssmenu span {
	/* Ne pas toucherC'est pour cacher les;
en fin de <li>, ce qui permet aux synthèse vocales de prendre unepause dans l'élocution */
	display: none;
}
.ssmenu ul, .ssmenu li {
/* Ne pas trop toucher.Les items (les <li>) des sous-menus, notamment pour enlever les puces des liste */
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited {
/* Les liens qui ne sont pas sous le curseur. */
    
	font-family: Arial, Helvetica, sans-serif, MS Sans Serif, Arial, Verdana;
	text-decoration: none;
	color: red;                                                   /* couleur du texte menu*/
	padding: 2px 1px;
/* Ne pas modifier le block */
	display: block;
/*Un width: 100% fait planter Mozilla, sans le width: 100% c'est IE et Opera... La combinaisonaucun width et height: 100% marche sur tous, donc ne pas toucher ces 2 lignes */
	/*height: 100%;
	margin: 0px;
*/
	margin: 0px;
	width: 100%;
}
html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active, html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active {
	width: auto;
}
.menu a:hover, .menu a:focus {
/* Les liens sous le curseur.On change les couleurs du texte et de fond, et on enlève le soulignement.*/
    color: white;                                                  /*couleur du texte menu avec hover*/
	text-decoration: none;
	text-align: right;
	background-image: url("fondcontact1.jpg");
    background-color: none;}
.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus {
/* Les liens sous le curseur.On change les couleurs du texte et de fond, et on enlève le soulignement.*/
    color: white;                                                  /*couleur du texte menu avec hover*/
	text-decoration: none;
    background-color: none;}
img {
/* Si on met une image dans un lien (par exemple un logo à gauche du lien), pas de bordurecar c'est vilain: -p */
	border: none;
}
.ssmenu img {
/* un petit espacement entre l'image et le texte du lien <a href="..."><img.../>blabla</a> */
	margin-right: 2px;
}
.ssmenu img.hr {
/* Encore un peu expérimental, un <hr /> entre deux items pour faire un "séparateur"... */
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	display: block;
}
/*Bref... pour résumer, ce qu'il y a à modifier à la base, c'est:- couleurs, police, bordure.- l'effet spécial IE pour les ssmenu si on aime ça...- police et couleurs des liens "non survolés" et "survolés".*/


/* L'en-tête */

.entete
{
   position: absolute;
   left: 1px;
   top: -18px;   
   width: 995px;
   height: 100px;    
}

.accueil
{
   position: absolute;
   left: 1px;
   top: 106px;
   text-align: center;
   width: 163px;
   height: 24px;
   background-image: url("fondcontact3.jpg");
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
  
   padding-top: 4px;
   padding-bottom: 1px;
}
.accueil a:hover, .accueil a:focus
{
   position: relative;       /*couleur du texte menu avec hover*/
   text-decoration: none;
   width: 163px;
   height: 25px;
   text-align: center;
   background-image: url("fondcontact5.jpg");
   padding-top: 10x;
}

.cadredepannage
{
   position: absolute;
   left: 1px;
   top: 262px;
   width: 163px;
   height: 139px;
   overflow: hidden;   /* Une bordure pour bien marquer les limites du corps et pour faire joli */  
}
.depannage
{
   position: absolute;
   left: 1px;
   top: 258px;
   width: 163px;
   height: 18px;
   font-size: 15px;
   font-family: Arial, Helvetica, sans-serif;   
   text-align: center; 
   background-image: url("fondcontact3.jpg");
   padding-top: 4px;
}

.cadreregle
{
   position: absolute;
   left: 1px;
   top: 428px;
   width: 163px;
   height: 104px; 
   overflow: hidden;   /* Une bordure pour bien marquer les limites du corps et pour faire joli */  
}
.regle
{
   position: absolute;
   left: 1px;
   top: 405px;
   width: 163px;
   height: 18px;
   font-size: 15px;
   font-family: Arial, Helvetica, sans-serif; 
   text-align: center; 
   background-image: url("fondcontact3.jpg");
   padding-top: 4px;
}

.lien
{
   position: absolute;
   left: 1px;
   top: 536px;
   text-align: center;
   width: 163px;
   height: 18px;
   background-image: url("fondcontact3.jpg");
   font-size: 13px;
   font-family: Arial, Helvetica, sans-serif;  
   padding-top: 5px;
   padding-bottom: 1px;  
 }
 
 /* contact email */
.contact
{
   position: absolute;
   left: 830px;
   top: 106px;
   text-align: center;
   width: 163px;
   height: 21px;
   background-image: url("fondcontact3.jpg");
   font-size: 13px;
   font-family: Arial, Helvetica, sans-serif;  
   padding-top: 10px;
   padding-bottom: 1px;
  
 }
.contact a:hover, .contact a:focus
{
   position: relative;       /*couleur du texte menu avec hover*/
   text-decoration: none;
   width: 163px;
   height: 22px;
   text-align: center;
   background-image: url("fondcontact5.jpg");
   right: 1px;
   margin-top: -11px;
   padding-top: 10px;
   border: 1px solid gray; 
}

.cadreappel
{
   position: absolute;
   left: 830px;
   top: 142px;
   width: 163px;
   height: 91px;  
   overflow: hidden;   /* Une bordure pour bien marquer les limites du corps et pour faire joli */  
}
.appel
{
   position: absolute;
   left: 830px;
   top: 234px;
   width: 163px;
   height: 18px;
   font-size: 15px;
   font-family: Arial, Helvetica, sans-serif;    
   text-align: center; 
   background-image: url("fondcontact3.jpg");
   padding-top: 2px;
}
.appel a:hover, .appel a:focus
{
   position: relative;       /*couleur du texte menu avec hover*/
   text-decoration: none;
   width: 163px;
   height: 18px;
   text-align: center;
   background-image: url("fondcontact5.jpg");
   right: 1px;
   margin-top: -11px;
   padding-top: 10px;
   border: 1px solid gray;
}

.cadremagasin
{
   position: absolute;
   left: 830px;
   top: 258px;
   width: 163px;
   height: 143px;    
   overflow: hidden;   /* Une bordure pour bien marquer les limites du corps et pour faire joli */  
}
.magasin
{
   position: absolute;
   left: 830px;
   top: 258px;
   text-align: center;
   width: 163px;
   height: 18px;
   font-size: 15px;
   font-family: Arial, Helvetica, sans-serif;  
   text-align: center; 
   background-image: url("fondcontact3.jpg");
   padding-top: 2px;    
}

.cadrechoix
{
   position: absolute;
   left: 830px;
   top: 405px;
   width: 163px;
   height: 155px; 
   overflow: hidden;   /* Une bordure pour bien marquer les limites du corps et pour faire joli */  
}
.choix
{
   position: absolute;
   left: 830px;
   top: 405px;
   text-align: center;
   width: 163px;
   height: 18px;
   font-size: 15px;
   font-family: Arial, Helvetica, sans-serif;  
   text-align: center; 
   background-image: url("fondcontact3.jpg");
   padding-top: 2px;
}

 
.entreprise
{
   position: absolute;
   left: 169px;
   top: 106px;
   width: 318px;
   height: 140px;
   padding: 4px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   color:silver;
   font-size: 11px;
   font-family: Arial, Helvetica, sans-serif;
   background-image: url("images/motif.png");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
 /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}


.texttrans
{
   position: absolute;
   left: 500px;
   top: 405px;
   text-align: center;
   width: 325px;
   height: 155px;
   font-size: 152px;
   font-family: Arial, Helvetica, sans-serif;
   overflow:hidden; 
}
   
.transformable
{
   position: absolute;
   left: 500px;
   top: 380px;
   width: 326px;
   height: 155px;
}

.textbaby
{
   position: absolute;
   left: 169px;
   top: 258px;
   text-align: center;
   width: 326px;
   height: 143px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 140px;
   overflow:hidden; 
}
   
.baby
{   
   position: absolute;
   left: 174px;
   top: 238px;
   width: 326px;
   height: 143px;
   padding:0px;
   margin-left:-5px;
}

.textpromo
{
   position: absolute;
   left: 169px;
   top: 405px;
   text-align: center;
   width: 326px;
   height: 155px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 150px;
   overflow:hidden;
   border: 1px solid gray;    
}
   
.promo
{
   position: absolute;
   left: 169px;
   top: 405px;
   width: 326px;
   height: 155px;
   background-image: url("fond_baby.jpg");  
   overflow:hidden;
}
 
.collectivite
{
   position: absolute;
   left: 500px;
   top: 258px;
   width: 325px;
   height: 143px;

   overflow:hidden;
}

.dat
{
   position: absolute;
   left: 830px;
   top: 85px;
   color: black;
   font-size: 13px;
}

.textnews
{
   position: absolute;
   left: 500px;
   top: 106px;
   width: 325px;
   height: 148px;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 150px;
   overflow:hidden;    
}
.news
{
   position: absolute;
   left: 508px;
   top: 87px;
   width: 331px;
   height: 148px;
   margin-left:-7px;
   border:none;
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* mise en page des billards tables */

 h1
{
   color: red;
   text-align: center;
   font-size: 20px;   
}
  h2
{
   color: silver;
   text-align: center;
   font-size: 16px;   
} 
.listebillardtable
{
   position: absolute;
   overflow: auto;
   left: 169px;
   top: 106px;
   width: 657px;
   height: 295px;
   color: white;
   border: 1px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
   background-color: rgb(235,235,235);
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
}

.module_central
{
   position: absolute;
   overflow: auto;
   text-align: left;
   left: 169px;
   top: 106px;
   width: 657px;
   height: 455px;
   padding: -10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   color: gray;
   font-size: 12px;
   border: 1px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
   background-color: rgb(235,235,235);  
}

.carte
{
   position: absolute;
   left: 1px;
   top: 1px;
   width: 450px;
   height: 450px;
   border: 1px solid gray;
   overflow:hidden;
}

.partenaires
{
   position: absolute;
   text-align: center;
   left: 1px;
   top: 1px;
   width: 450px;
   height: 450px;
   border: 1px solid gray;
   overflow:auto;
}

.texte_magasin
{
   position: absolute;
   left: 454px;
   top: 1px;
   width: 183px;
   height: 450px;
   border: 1px solid gray;
   overflow:hidden;
}

.texte_magasin2
{
   position: absolute;
   left: 1px;
   top: 454px;
   width: 636px;
   height: 450px;
   border: 1px solid gray;
   overflow:hidden;
}

.depan_billard
{
   position: absolute;
   left: 20px;
   top: 5px;
   width: 150px;
   height: 130px;
   border: 1px solid gray;
   overflow:hidden;
}

.texte_depan_billard
{
   position: absolute;
   left: 190px;
   top: 5px;
   width: 450px;
   height: 130px;
   border: 1px solid gray;
   overflow:hidden;
}

.depan_flip
{
   position: absolute;
   left: 20px;
   top: 145px;
   width: 150px;
   height: 130px;
   border: 1px solid gray;
   overflow:hidden;
}

.texte_depan_flip
{
   position: absolute;
   left: 190px;
   top: 145px;
   width: 450px;
   height: 130px;
   border: 1px solid gray;
   overflow:hidden;
}

.depan_juke
{
   position: absolute;
   left: 20px;
   top: 285px;
   width: 150px;
   height: 130px;
   border: 1px solid gray;
   overflow:hidden;
}

.texte_depan_juke
{
   position: absolute;
   left: 190px;
   top: 285px;
   width: 450px;
   height: 130px;
   border: 1px solid gray;
   overflow:hidden;
}

#model
{
text-align: left;
width: 400px;
height: 20px;
margin-left: 10px;
margin-top: 10px;
} 

#marque
{
text-align: right;
width: 410px;
height: 20px;
margin-left: 220px;
margin-top: -20px;
} 

#description
{
font-size: 15px;
width: 350px;
height: 150px;
margin-left: 280px;
}


.miniature1
{
overflow:hidden;
width: 200px;
height: 150px;
margin-left: 10px;
} 

.miniature2
{
overflow:hidden;
width: 200px;
height: 150px;
margin-left: 220px;
margin-top: -150px;
} 
.miniature3
{
overflow:hidden;
width: 200px;
height: 150px;
margin-left: 430px;
margin-top: -150px;
} 

#reference
{
text-align: center;
width: 200px;
height: 20px;
margin-left: 10px;
margin-top: -22px;
} 

#prix
{
background-color: gray;
text-align: center;
text-decoration: none;
margin-left: 10px;
margin-top: 0px;
padding-left: 5px;
width: 615px;
height: 20px;
} 

#remarque
{
text-align: center;
text-decoration:none;
margin-left: 10px;
margin-top: -1px;
padding-left: 5px;
width: 615px;
height: 20px;
} 

#trait
{
text-align: center;
margin-top: -15px;
} 


table
{
   margin: 20px; /* Centre le tableau */
   border-collapse: collapse; /* Colle les bordures entre elles */
   font-size: 13px;
}
td, th /* Mettre une bordure sur les td ET les th */
{
   padding: 3px;
   color: black;
   border: 1px solid black;
  
}

.dimension_image
{
   overflow: hidden;
   width: 600px;
   height: 240px;
   padding: -10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   border: 1px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* mise en page de l'ensemble du pieds de page */ 
.pied_de_page
{
   position: absolute;
   top: 565px;
   left: 1px;
   width: 995px;
   height: 23px;
   background-position: center;
   color: silver;
   font-size: 10px;
   text-align: center;
   border: none;  
}