html {margin: 0; padding: 0; text-align: center; height: 100%; background: #015697 url(charte/bg_html.jpg) 0 0 repeat; font-family: sans-serif}
body {text-align: left; width: 960px; margin: 10px auto;}

a img {border: none;}

img.left {float: left;}
img.right {float: right;}

/* ====================== Menu gauche ====================== */

div#menu {width: 215px; margin: 25px 15px 0 0; float: left;}

#fpp {text-align: center; width: 100%; margin-top: 10px}

div#menu .menutop {height: 35px; margin: 0 !important; margin: 0 0 -1px 0; padding: 0; background: url(charte/menu_top.gif) 0 0 no-repeat;}
div#menu .menutop h1 {font-size: 11px; color: #4c4c4c; padding: 8px 0 0 25px; background: url(charte/menu_h1.jpg) 13px 11px no-repeat;}

div#menu .menucontenu {margin: 0; padding: 0; background: url(charte/menu_contenu.jpg) 0 0 repeat-y; text-align: center}
div#menu .menucontenu ul {display: block; width: 207px; margin: 0 4px; padding: 4px 0; font-size: 11px; list-style-type: none; text-align: left}
div#menu .menucontenu ul li {display: block; height: 25px; width: 207px; margin: 0; padding: 0;}
div#menu .menucontenu ul li a {display: block; height: 25px; width: 207px; margin: 0; padding: 0; background: url(charte/menu_li.jpg) 0 0 no-repeat; color: #fff; text-decoration: none }
div#menu .menucontenu ul li a:hover {background: url(charte/menu_li.jpg) -207px top no-repeat; color: #000}
div#menu .menucontenu ul li a span {padding: 5px 14px; line-height: 24px}
div#menu .menucontenu p#numtel {color: #fff; font-size: 11px; padding: 4px 0; margin: 0; font-weight: bold}

div#menu .menubottom {height: 15px; margin: 0; padding: 0; background: url(charte/menu_bottom.gif) 0 0 no-repeat;}

div#menu #flux-rss {text-align: center; margin: 0}
div#menu .sep {height: 20px}

/* ====================== head ====================== */
div#head {height: 267px; float: left; width: 730px; margin: 0 !important; margin: 0 0 -91px 0}

div#head form {float: right; width: 360px; height: 16px; position: relative; top: -50px; left: -15px; margin: 0; padding: 0; text-align: left;font-size: 11px; line-height: 11px}
div#head form input#mail {border: none; height: 16px; margin: 0; padding: 0; width: 280px; float: left; color: #806f79}
div#head form input#ok {border: none; height: 16px; margin: 0; padding: 0; width: 70px; float: left; border-left: 1px solid black; cursor: pointer;}


/* ====================== corp ====================== */

div#corp {width: 730px; min-height: 600px; float: left; background: #fff }
div#corp h1 {margin: 10px 0 0 50px; padding: 0; color: #009bdc;  font-style: italic; font-size: 14pt;}


div#corp .box {width: 710px; margin: 10px;}
div#corp .box .top { background: transparent url(charte/box_top.png) 0 0 no-repeat; height: 7px; margin: 0; padding: 0;}
div#corp .box .contenu {background: transparent url(charte/box_contenu.png) 0 0 repeat-y; padding: 0 7px; margin: 0 !important; margin-top: -12px; height: 100%;}
div#corp .box .contenu h2 { background: transparent url(charte/box_titre.png) 0 0 no-repeat; margin: 0; padding: 5px 0 0 12px; height: 50px; color: #3A4B56; font-size: 12pt; font-style: italic;}
div#corp .box .contenu img  {margin: 0 7px}
div#corp .box .contenu #po_sept {height: 515px; background: url(actualites/PO_sept_08.jpg) bottom center no-repeat;}
div#corp .box .contenu #po_sept h3 {margin: 0; padding: 0; color: #3A4B56; font-size: 12pt; font-style: italic; text-align: center}
div#corp .box .contenu p { margin: 0; padding: 0 7px; font-size: 10pt; text-align: justify;}
div#corp .box .contenu p span {font-weight: bold; color: rgb(0, 172, 255);}
div#corp .box .contenu p span.sous-li {font-weight: bold; color: #0085e8; font-size: 9pt; padding-left: 50px;}
div#corp .box .contenu p span.prix {color: #cc0033; font-size: 12pt;}
div#corp .box .contenu ul {margin: 15px 0; padding-top: 0; color: #00599b; font-size: 10pt; font-weight: bold;}
div#corp .box .contenu a.plus {display: block; float: right; height: 46px; width: 44px; margin: 0 28px 0 0; background: url(nos_piscines/boutton_plus.jpg) 0 0 no-repeat}

div#corp .box .bottom {background: transparent url(charte/box_bottom.png) 0 0 no-repeat; height: 7px;}
div#corp a.lien_web {display: block; text-align: center; color: #00599b; font-size: 12pt; font-weight: bold; text-decoration: none;}
div#corp a.lien_web:hover {text-decoration: underline; color: #009bdc ;}
a.reserv {display: block; text-align: center; color: #00599b; font-size: 9pt; font-weight: bold; text-decoration: none;}
a.reserv:hover {text-decoration: underline; color: #cc0033;}
a.red {color: #cc0033; font-weight: bold; text-decoration: none; font-size: 11pt;}

div#corp .sep {height: 20px; clear: left;}

/* ====================== Sous menu ====================== */

ul#smenu {margin: 10px 0 0 80px; padding: 0; list-style-type: none; font-size: 9pt;}
ul#smenu li a {color: #00599b; text-decoration: none; padding-left: 20px;background: transparent url(charte/menu_h1.jpg) 5px 3px no-repeat;}
ul#smenu li a:hover {text-decoration: underline; color: #009bdc ; background: transparent url(charte/menu_h1_2.jpg) 5px 3px no-repeat;}
ul#smenu li a.smenu2 { font-size: 8pt; padding-left: 40px;}
ul#smenu li a.smenu2:hover {text-decoration: underline; color: #009bdc ;}

/* ====================== tableau page équipe ====================== */

table.equipe {width: 100%; font-size: 8pt; text-align: center;}
table.equipe tr {height: 50px;}
table.equipe span {font-weight: bold;}
table.equipe a {font-style: italic; color: #009bdc;}

/* ====================== formulaire contact ====================== */

form#contact {font-size: 10pt;}
form#contact p {padding-left: 40px}
form#contact fieldset {border: none; padding:0; margin: 0;}
form#contact span.lab {display: block; width: 40%; text-align: right; float: left;}
form#contact span.lab-rep, select.sel {display: block; border: 1px solid #3A4B56; width: 55%; margin-left: 40%; text-align: center;}
form#contact input.txt {border: 1px solid #3A4B56; width: 260px;}
form#contact input.check { margin-left: 60px;}
form#contact div.sep {height: 8px;}
form#contact textarea {border: 1px solid #3A4B56; width: 260px;}
form#contact textarea#adr {height: 80px;}
form#contact textarea#msg {height: 160px;}
form#contact #wait .wait2 {width: 300px; height: 300px; margin: 50px 0 0 160px; text-align: center;}
form#contact #wait .wait2 p {margin: 15px 0; padding: 0; font-weight: bold; text-align: center}

div.plan {width: 696px; height: 288px;  text-align:center;}
div.plan iframe {border: none; margin: 0 auto;}
div.plan a {color: #4c4c4c; text-decoration: none; font-size: 11px;}
div.plan a:hover {text-decoration: underline;}

p.adr {text-align: center; color: #4c4c4c; font-size: 13px; margin: 10px;}
p.adr span {font-weight: bold}
p.adr a {color: #4c4c4c; text-decoration: none;}
p.adr a:hover {text-decoration: underline;}

/* ====================== Services ====================== */

table#serv {width: 486px; margin: 0 auto}
table#serv td#top {height: 229px; background: transparent url(services/top_tableau_2.jpg) top right no-repeat;}
table#serv td#top_hiv {height: 229px; background: transparent url(services/top_tableau_hiv.jpg) top right no-repeat;}
table#serv td.in {padding-left: 4px; background-color: #f3f3f3; border: 2px solid white; font-size: 11px;}
table#serv td.f1, td.f2, td.f3, td.f4 {width: 50px; border: 2px solid white; padding: 2px 0 0 0; margin: 0; text-align: center; font-size: 11px;}
table#serv td.f1 {background-color: #e4f3ff;}
table#serv td.f2 {background-color: #f0fbff;}
table#serv td.f3 {background-color: #fff7d8;}
table#serv td.f4 {background-color: #e9ffe2;}


/* ====================== foot ====================== */

div#foot {height: 63px; width: 730px; float: right; background: transparent url(charte/bg-foot.png) 0 0 no-repeat; margin: 0}
div#foot p {color: #4c4c4c; font-size: 12px; text-align: center; margin: 23px 0 0 0; padding: 0}
div#foot p a {color: #4c4c4c; font-size: 12px; text-decoration: none}
div#foot p a:hover {color: #008fd1; text-decoration: underline}