body
{
  background:#dedee7 url(bgbody.png) repeat-x;
  background-color:#606060;
  color:#333333;
  font-family:Trebuchet MS,Verdana,Arial,sans-serif;
  margin:0px;
  text-align:center;
}

body, td, th { font-size:75%; }
td, th { padding:0px; }
tr { vertical-align:middle; }
img { border:0px; }
a { color:#6699cc; }
a:hover { color:#cc0000; }

#container
{
  width:775px;
  background:#ffffff url(bgcont-black.png) repeat-y;
  margin:0px auto;
  text-align:center;
}

#page
{
  width:755px;
  background:#ffffff url(bgpage150.png) repeat-y;
  margin:0px auto;
  text-align:left;
}

h1#logo
{
  background:#ffffff url(logo.png) center no-repeat;
  width:300px;
  height:90px;
  float:left;
  font-size:150%;
  line-height:45px;
  margin:0px;
  overflow:hidden;
  text-align:center;
  text-indent:-1000px;
}

h1#logo a
{
  width:300px;
  height:90px;
  float:left;
  text-indent:-1000px;
}

h2#slogan
{
  background:#ffffff url(baseline.png) center no-repeat;
  width:300px;
  height:90px;
  float:right;
  line-height:90px;
  margin:0px;
  overflow:hidden;
  text-align:center;
  text-indent:-2000px;
}

#head
{
  width:100%;
  height:130px;
  background:#ffffff url(photos-aires-de-jeux.jpg) center no-repeat;
  border-top:5px solid #00cc00;
  clear:both;
  overflow:hidden;
}

#head p
{
  line-height:15px;
  margin:0px;
  text-align:left;
  text-indent:-1000px;
}

#menu
{
  width:100%;
  height:30px;
  background:#ffffff url(bgmenu150.png) left bottom no-repeat;
  list-style:none;
  margin:0px;
  padding:0px;
}

#menu li
{
  background:url(bgpuce.png) 0px 0px no-repeat;
  float:left;
  font-family:Verdana,Arial,Georgia,Trebuchet MS,sans-serif;
  font-size:75%;
  font-weight:bold;
  margin:3px 10px 0px 5px;
}

#menu li a
{
  color:#008000;
  margin-left:8px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0px;
  word-spacing:0px;
}

#menu li a:hover
{
  color:#00c000;
  text-decoration:underline;
}

#menu li img.up
{
  width:9px;
  height:10px;
  vertical-align:middle;
}

#text
{
  width:580px;
  float:right;
  margin:0px 5px;
}

#smenu
{
  width:150px;
  float:right;
  margin-right:10px;
}

#smenu ul
{
  list-style:none;
  margin:0px;
  padding:0px;
}

#smenu ul li
{
  background:url(bgpuce.png) no-repeat;
  background-position:1px 3px;
  margin:5px 0px 5px 5px;
}

#smenu ul li a
{
  color:#008000;
  font-weight:bold;
  margin-left:11px;
  text-decoration:none;
}

#smenu ul li a:hover
{
  color:#00c000;
  text-decoration:underline;
}

#smenu #contacts { margin:30px 10px; text-align:center; }
#smenu #contacts h3 { color:#6699cc; font-size:100%; margin:8px 0px; text-transform:uppercase; }
#smenu #contacts .nom { display:block; font-size:90%; font-weight:bold; margin-top:8px; }
#smenu #contacts .tel { display:block; font-size:90%; font-style:italic; }

#foot
{
  width:580px;
  border-top:1px solid #e3e3e3;
  clear:right;
  color:#666666;
  float:right;
  font-family:Arial,Verdana,sans-serif;
  font-size:75%;
  margin:15px 5px 0px 5px;
  padding:5px 0px;
  text-align:left;
}

#foot a
{
  color:#666666;
  text-decoration:none;
}

div.clear
{
  clear:both;
  height:1px;
  overflow:hidden;
}

#bottom
{
  background:url(bgbottom-black.png) top no-repeat;
  height:8px;
}

#text h1
{
  width:560px;
  height:25px;
  background-repeat:no-repeat;
  border:1px;
  color:#5a299c;
  font-size:150%;
  margin:10px 0px 15px 0px;
  overflow:hidden;
  text-indent:-1000px;
}

h1#accueil { background-image:url(h1/dalle-hexdalle-dalamat.png); }
h1#presentation { background-image:url(h1/presentation-de-la-dalle-hexdalle-dalamat.png); }
h1#utilisation { background-image:url(h1/utilisation-et-entretien.png); }
h1#caracteristiques { background-image:url(h1/caracteristiques-techniques.png); }
h1#contact { background-image:url(h1/nous-contacter.png); }

#text h2 { color:#6699cc; font-size:110%; margin:16px 0px 8px 0px; }
#text p { margin:8px 0px; }
#text ul { margin:8px 0px 8px 30px; }

#text ul.liens li { font-size:90%; margin-bottom:5px; }
#text ul.liens li a { color:#333333; text-decoration:none; }
#text ul.liens li a:hover { color:#cc0000; }
#text ul.liens li a .large { background-color:#ddddff; border-top:1px solid #6699cc; border-bottom:1px solid #6699cc; padding:0px 4px; }
#text ul.liens li a:hover .large { background-color:#ffdddd; border-color:#cc0000; }

.small { color:#888888; font-size:75%; }

.tarifs { border-collapse:collapse; margin:0px auto; }
.tarifs tr { vertical-align:middle; }
.tarifs tr.titre th { background-color:#cccccc; text-align:center; }
.tarifs th { background-color:#dddddd; text-align:center; }
.tarifs th, .tarifs td { border:1px solid #aaaaaa; padding:1px 2px; cursor:default; }
.tarifs tr.over td { background-color:#ffcc66; }

#ConfigSalle { text-align:center; }
#ConfigSalle a { font-weight:bold; margin:0px 5px; line-height:30px; }

#coordonnees { font-size:80%; margin:10px 0px 0px 8px; }

#contact, form { margin:0px auto; }
#contact tr { vertical-align:middle; }
#contact tr th { font-weight:normal; padding:1px 3px; text-align:right; }
#contact tr td { padding:1px 3px; }
#contact input.text, #contact input.button,
#contact textarea { background:#ffffff url(bginput.png) repeat-x; background-position:top; border:1px solid #999999; }
#contact button { background:none; border:0px; margin:0px; }
#contact tr.req th { font-weight:bold; }
#contact tr.req th span { color:#cc0000; font-weight:bold; }
#contact tr.req td input { background:#ffffff url(bginputreq.png) repeat-x; }

#text .annonce { clear:both; padding:0px 10px; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; }
#text .annonce_over { background-color:#f0f0f0; border-top:1px dotted #00cc00; border-bottom:1px dotted #00cc00; }
#text .annonce img.left { float:left; margin:10px 10px 10px 0px; border:1px solid #999999; }
#text .annonce img.right { float:right; margin:10px 0px 10px 10px; border:1px solid #999999; }
#text .annonce h2 { margin:8px 0px; }
#text .annonce .prix { font-weight:bold; }
#text .annonce .dispo { color:#cc0000; font-weight:bold; }
#text .annonce a { color:#00cc00; font-weight:bold; text-decoration:none; float:right; margin-right:50px; }
#text .annonce a:hover { text-decoration:underline; }
#text .annonce div.clear { clear:both; height:1px; overflow:hidden; }