/* CSS Document */

body { background:url(images/bg.jpg) repeat-x #3e4349; margin:0; font-size:10px; font-family:Arial, Helvetica, sans-serif;}
#conteneur{ width:955px; margin:0 auto; position:relative; }

/************************************************************************************/
/*********************************** PAGE ACCUEIL ***********************************/
/************************************************************************************/
#contenu {float:left; display:inline; padding:0; margin:0 17px 0 18px; width:920px; background-image:url(images/bg-conteneur.jpg); background-repeat:no-repeat; background-position:0px 88px;}
#gauche {float:left; display:inline; width:487px; min-height:500px; padding:0; margin:0; color:#FFFFFF; font-size:1.2em;}
#droite {float:left; display:inline; width:433px; padding:0; margin:0;}

#logo {float:left; padding:0; margin:6px 0px 0px 12px; width:264px; height:82px; background:url(images/logo-espace-form.jpg);}
#logoSables {float:left; display:inline; padding:0; margin:1px 0px 10px 12px; width:264px; height:82px; background:url(images/logo-espace-form-sables.jpg);}
#logo h1, #logoSables h1 {padding:0; margin:0px; text-indent:-5000px;}

#gauche h2 { clear:left; float:left; padding:0; margin:11px 0 5px 15px; width:299px; height:61px; background:url(images/titre-accueil.gif); text-indent:-5000px; }
#gauche p.txtAccueil { clear:left; padding:0; margin:0px 0 10px 15px; color:#FFFFFF; font-size:12px; width:450px; line-height:18px; }
#gauche p { clear:left; padding:0; margin:0px 0 10px 15px; color:#FFFFFF; font-size:13px; width:435px; line-height:17px; }

#gauche #seanceDecouverte {float:left; padding:0; margin:0 37px 16px 15px; width:435px; height:40px; background:url(images/seance-decouverte.gif); text-indent:-5000px;}

#gauche #espaceSables {clear:left; float:left; padding:55px 18px 0 25px; margin:0 0 8px 10px; width:180px; height:55px; background:url(images/btn-espace-form-sables.jpg); color:#FFFFFF; font-weight:bold; text-decoration:none;}
#gauche #espaceRoche {float:left; padding:55px 10px 0 30px; margin:0 0 8px 0; width:180px; height:55px; background:url(images/btn-espace-form-roche.jpg); color:#FFFFFF; font-weight:bold; text-decoration:none;}

#gauche h3#mills { clear:left; padding:0; margin:0 0 0 15px; width:472px; height:21px; background:url(images/decouvrez-mills.gif) no-repeat left; text-indent:-5000px; }
#gauche #logosMills {float:left; padding:0 0 15px 0; margin:10px 0 0px 15px; width:458px; height:133px; background:url(images/logos-mills.gif) no-repeat top; text-indent:-5000px;}

#droite #forfaitPass {float:left; display:inline; padding:0; margin:0 0px 0 294px; width:124px; height:113px; background:url(images/forfait-pass-club.jpg); text-indent:-5000px;}

#droite h3#actualites {float:left; display:inline; padding:0; margin:255px 0 0 39px; width:341px; height:31px; background:url(images/dernieres-nouvelles.jpg); text-indent:-5000px;}
#droite a.titreActu {float:left; display:inline; padding:0; margin:10px 68px 0 53px; width:312px; color:#ff7e00; font-size:1.2em; font-weight:bold; text-decoration:none;}
#droite p {float:left; display:inline; padding:0 0 5px 0; margin:5px 68px 0 53px; width:312px; color:#ffffff; font-size:1.2em;}
#droite p img {float:left; margin:2px 10px 0 0; border:2px solid #ff9401;}

#footer {clear:left; padding:5px 0 20px 680px; margin:0; width:240px; border-top:1px solid #787c80;}
#footer a {float:left; padding:0; margin:0; color:#a0a1a5; font-size:1.2em; font-weight:bold; text-decoration:none;}

#animFlash {position:absolute; top:113px; left:515px;  }


/************************************************************************************/
/*********************************** PAGES DE NAV ***********************************/
/************************************************************************************/
#menuTop {float:left; display:inline; padding:0; margin:0 0 0 212px; width:400px; height:39px; background:url(images/bg-menu-top.jpg) no-repeat left;}
#menuTop a {float:left; display:inline; padding:0; margin:0 10px 0 15px; color:#FFFFFF; font-weight:bold; text-decoration:none; font-size:1.2em; line-height:26px;}

#contenuNav {float:left; display:inline; padding:0; margin:0 17px 0 18px; width:920px; background-image:url(images/bg-conteneur-nav.jpg); background-repeat:no-repeat; background-position:0px 92px;}

ul#menu1 {clear:left; padding:0; margin:0 0 0 4px; width:920px; height:40px; list-style:none;}
ul#menu1 li {float:left; display:inline; padding:14px 18px 2px 18px; margin:0 1px; height:24px;}
ul#menu1 li a.cours {float:left; display:block; padding:0px; margin:0; width:51px; height:15px; background:url(images/menu-cours.gif); text-indent:-5000px;}
ul#menu1 li a.musculation {float:left; display:block; padding:0px; margin:0; width:184px; height:15px; background:url(images/menu-musculation-cardio.gif); text-indent:-5000px;}
ul#menu1 li a.squash {float:left; display:block; padding:0px; margin:0; width:64px; height:18px; background:url(images/menu-squash.gif); text-indent:-5000px;}
ul#menu1 li a.institut {float:left; display:block; padding:0px; margin:0; width:148px; height:15px; background:url(images/menu-institut-beaute.gif); text-indent:-5000px;}
ul#menu1 li a.detente {float:left; display:block; padding:0px; margin:0; width:131px; height:18px; background:url(images/menu-espace-detente.gif); text-indent:-5000px;}
ul#menu1 li:hover {float:left; display:inline; padding:14px 18px 2px 18px; margin:0 1px; height:24px; background:url(images/hover-menu1.gif) no-repeat top center;}

ul#menu2 {clear:left; padding:0; margin:0 0 0 4px; width:920px; height:40px; list-style:none;}
ul#menu2 li {float:left; display:inline; padding:14px 18px 2px 18px; margin:0 2px 0 1px; height:24px;}
ul#menu2 li a.actualites {float:left; display:block; padding:0px; margin:0; width:85px; height:15px; background:url(images/menu-actualites.gif); text-indent:-5000px;}
ul#menu2 li a.planning {float:left; display:block; padding:0px; margin:0; width:74px; height:17px; background:url(images/menu-planning.gif); text-indent:-5000px;}
ul#menu2 li a.acces {float:left; display:block; padding:0px; margin:0; width:107px; height:15px; background:url(images/menu-plan-acces.gif); text-indent:-5000px;}
ul#menu2 li a.partenaires {float:left; display:block; padding:0px; margin:0; width:96px; height:14px; background:url(images/menu-partenaires.gif); text-indent:-5000px;}
ul#menu2 li a.contact {float:left; display:block; padding:0px; margin:0; width:134px; height:15px; background:url(images/menu-contact.gif); text-indent:-5000px;}
ul#menu2 li a.seance {float:left; display:block; padding:0px; margin:0; width:164px; height:15px; background:url(images/menu-seance-decouverte.gif); text-indent:-5000px;}
ul#menu2 li:hover {float:left; display:inline; padding:14px 18px 2px 18px; margin:0 2px 0 1px; height:24px; background:url(images/hover-menu2.gif) no-repeat bottom center;}

#gauche h2#bienvenue { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:341px; height:45px; background:url(images/titre-bienvenue-sables.gif); text-indent:-5000px; }
#gauche h2#cours { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-cours.gif) left; text-indent:-5000px; }
#gauche h2#seance { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-seance-decouverte.gif) left; text-indent:-5000px; }
#gauche h2#muscu { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-muscu-cardio.gif) left; text-indent:-5000px; }
#gauche h2#squash { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-squash.gif) left; text-indent:-5000px; }
#gauche h2#beaute { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-institut-beaute.gif) left; text-indent:-5000px; }
#gauche h2#detente { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-espace-detente.gif) left; text-indent:-5000px; }
#gauche h2#actualites { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-actualites.gif) left; text-indent:-5000px; }
#gauche h2#contact { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-contact.gif) left; text-indent:-5000px; }
#gauche h2#partenaires { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-partenaires.gif) left; text-indent:-5000px; }
#gauche h2#acces { clear:left; float:left; display:inline; padding:0; margin:35px 0 10px 15px; width:460px; height:43px; background:url(images/titre-plan-acces.gif) left; text-indent:-5000px; }

#gauche .chpForm { float:left; padding:0; margin:0px 0 5px 25px; color:#ffa201; width:450px; }
#gauche .chpForm label { float:left; width:80px; line-height:12px; }
#gauche .chpForm2 { float:left; padding:0; margin:0px 0 5px 25px; color:#ffa201; width:450px; }
#gauche .chpForm2 label { float:left; width:140px; line-height:12px; }
#gauche .btnSubmit { background:#ff8901; color:#ffffff; font-weight:bold; border:none; height:28px; width:120px;}
#gauche .message { clear:left; padding:0; margin:0px 0 10px 15px; color:#ffa201; font-weight:bold; font-size:13px; width:435px; line-height:18px; }

#gauche h3 { clear:left; padding:0; margin:0px 0 5px 15px; color:#ffa201; font-weight:bold; font-size:14px; width:435px; line-height:18px; }
#gauche a { color:#ffa201; }

#photo {float:left; padding:0; margin:40px 0 0 11px; }

#actualitesNav {float:left; padding:0; margin:38px 0 15px 15px; width:400px;}
#actualitesNav h3 {float:left; display:inline; padding:0; margin:0; width:311px; height:21px; background:url(images/titre-dernieres-nouvelles.gif); text-indent:-5000px;}
#actualitesNav a.titreActu {float:left; display:inline; padding:0; margin:10px 0 0 0; width:400px; color:#ff7e00; font-size:1.2em; font-weight:bold; text-decoration:none;}
#actualitesNav p {float:left; display:inline; padding:0 0 5px 0; margin:5px 0 0 0; width:400px; color:#ffffff; font-size:1.2em;}
#actualitesNav p img {float:left; margin:2px 10px 0 0; border:2px solid #ff9401;}

#forfaitPassNav {position:absolute; display:inline; padding:0; margin:0; top:0px; left:790px; background:url(images/forfait-pass-club-nav.gif); width:121px; height:129px; text-indent:-5000px;  }

h4.fondGris { clear:left; color:#ffa201; font-size:15px; background:#474d54; font-weight:bold; width:436px; margin:10px 0 0 15px; padding:0 12px; height:29px; line-height:29px; border-bottom:1px solid #606469;}
.encartGris{  clear:left; margin:-1px 0 10px 15px; padding:0px 12px 10px 12px; border-bottom:1px solid #606469; background-color:#474d54; width:436px; line-height:18px;}

.encartPlan{  clear:left; margin:0px 0 10px 15px; padding:8px 12px 12px 72px; border-bottom:1px solid #606469; background:url(images/icone-plan.gif) no-repeat 5px 3px #474d54; width:376px; line-height:18px;}
.encartHoraires{  clear:left; margin:0px 0 10px 15px; padding:8px 12px 6px 72px; border-bottom:1px solid #606469; background:url(images/icone-horaires.gif) no-repeat 5px 6px #474d54; width:376px; line-height:18px;}


.partenaire {float:left; padding:10px; margin:8px 3px 10px 15px; width:200px; background:#474d54; border-bottom:1px solid #606469; text-align:center;}
.partenaire img {margin-bottom:8px;}
.partenaire a {color:#ffa201; font-size:14px; text-decoration:none; font-weight:bold;}

.dhtmlgoodies_question{	
	/* Start layout CSS */
	color:#FFF;
	font-size:15px;
	background:url(images/plus-infos.gif) no-repeat right center #474d54;
	font-weight:bold;
	width:436px;
	margin:10px 0 0 15px;
	padding:0 12px;
	height:29px;
	line-height:29px;
	border-bottom:1px solid #606469;
	
	/* End layout CSS */
	
	overflow:hidden;
	cursor:pointer;
}
.dhtmlgoodies_answer{	/* Parent box of slide down content */
	/* Start layout CSS */
	border-bottom:1px solid #606469;
	background-color:#474d54;
	width:460px;
	margin:-1px 0 0 15px;
	
	
	/* End layout CSS */
	
	visibility:hidden;
	height:0px;
	overflow:hidden;
	position:relative;

}
.dhtmlgoodies_answer_content{	/* Content that is slided down */
	padding:5px 12px 10px 12px;
	color:#FFFFFF;
	font-size:11px;
	line-height:18px;
	position:relative;
}
.dhtmlgoodies_answer_content span {color:#ffa201; font-weight:bold;}
.dhtmlgoodies_answer_content img {float:right; margin:5px 0 5px 10px ; border:2px solid #ffa201;}


#video {float:left; padding:0; margin:40px 0 0 11px; width:398px; height:226px; text-align:center; overflow:hidden; }


h3#millsNav { float:left; padding:0; margin:40px 0 0 11px; width:398px; height:21px; background:url(images/decouvrez-mills.gif) no-repeat left; text-indent:-5000px; }

ul#mills {float:left; display:inline; padding:0; margin:10px 11px; width:405px; list-style:none; }
ul#mills li {float:left; padding:0; margin:0 10px 10px 0; width:125px; height:32px; /*display:inline;*/}
ul#mills li a {position:relative;/*this is the key*/ z-index:24; float:left;text-decoration:none; display:block; width:125px; height:32px;}
ul#mills li a:hover{z-index:25; float:left;background:transparent; width:125px; height:32px;}

ul#mills li a span.bodyvive, ul#mills li a span.bodystep, ul#mills li a span.bodyattack, ul#mills li a span.bodybalance, ul#mills li a span.bodycombat, ul#mills li a span.bodyjam, ul#mills li a span.bodypump, ul#mills li a span.bodybike {display:none; }/*the span will display just on :hover state*/
ul#mills li a:hover span.bodyvive { display:block; z-index:30; position:absolute; top:40px; left:0px; margin:0; width:380px; border:1px solid #6c5d9a; background-color:#b2a7d2; color:#333333; padding:8px; font-size:1.1em; text-decoration:none; text-align:justify; line-height:15px;}
ul#mills li a:hover span.bodystep { display:block; z-index:30; position:absolute; top:40px; left:-135px; margin:0; width:380px; border:1px solid #3b3e42; background-color:#adb9bf; color:#333333; padding:8px; font-size:1.1em; text-decoration:none; text-align:justify; line-height:15px;}
ul#mills li a:hover span.bodyattack { display:block; z-index:30; position:absolute; top:40px; right:0px; margin:0; width:380px; border:1px solid #937014; background-color:#ffc425; color:#333333; padding:8px; font-size:1.1em; text-decoration:none; text-align:justify; line-height:15px;}
ul#mills li a:hover span.bodybalance { display:block; z-index:30; position:absolute; top:40px; left:0px; margin:0; width:380px; border:1px solid #8a9271; background-color:#c8df8f; color:#333333; padding:8px; font-size:1.1em; text-decoration:none; text-align:justify; line-height:15px;}
ul#mills li a:hover span.bodycombat { display:block; z-index:30; position:absolute; top:40px; left:-135px; margin:0; width:380px; border:1px solid #817b00; background-color:#c0bc6d; color:#333333; padding:8px; font-size:1.1em; text-decoration:none; text-align:justify; line-height:15px;}
ul#mills li a:hover span.bodyjam { display:block; z-index:30; position:absolute; top:40px; right:0px; margin:0; width:380px; border:1px solid #c2c001; background-color:#fef200; color:#333333; padding:8px; font-size:1.1em; text-decoration:none; text-align:justify; line-height:15px;}
ul#mills li a:hover span.bodypump { display:block; z-index:30; position:absolute; top:40px; left:0px; margin:0; width:380px; border:1px solid #731e18; background-color:#ef4136; color:#333333; padding:8px; font-size:1.1em; text-decoration:none; text-align:justify; line-height:15px;}
ul#mills li a:hover span.bodybike { display:block; z-index:30; position:absolute; top:40px; right:0px; margin:0; width:380px; border:1px solid #004a72; background-color:#5cd2ff; color:#333333; padding:8px; font-size:1.1em; text-decoration:none; text-align:justify; line-height:15px;}

ul#mills li a:hover span.bodyvive img {position:absolute; top:-12px; left:3px;}
ul#mills li a:hover span.bodystep img {position:absolute; top:-12px; left:138px;}
ul#mills li a:hover span.bodyattack img {position:absolute; top:-12px; right:98px;}
ul#mills li a:hover span.bodybalance img {position:absolute; top:-12px; left:3px;}
ul#mills li a:hover span.bodycombat img {position:absolute; top:-12px; left:138px;}
ul#mills li a:hover span.bodyjam img {position:absolute; top:-12px; right:98px;}
ul#mills li a:hover span.bodypump img {position:absolute; top:-12px; left:3px;}
ul#mills li a:hover span.bodybike img {position:absolute; top:-12px; left:5px;}

#planningCours {float:left; padding:0; margin:20px 0 0 11px; width:398px; height:75px; background:url(images/btn-planning-cours.gif); text-indent:-5000px;}

ul#galerie {float:left; padding:0; margin:30px 0 0 2px; width:430px; list-style:none; }
ul#galerie li {float:left; padding:0; margin:0 13px 13px 0; width:130px; height:86px;}