@charset "iso-8859-1";

/* BALISES GENERALES */
* {margin: 0; padding: 0;}
html, body {height: 100%;}

body {
	font-family: verdana, helvetica;
	font-size: 12px;
	background-color: #EEE;
	color: #777;
	text-align: center;
}

p {text-align: left;}
h1 {font-size: 2em; text-align: left; text-decoration: none; color: black; margin: 1em auto;}
h4 {color: green; text-align: left; padding-left: 10px; margin: 10px auto 5px;}
hr {color: #AAA;}
table, td {font-size: 1em;}
b { color: inherit;}
input {margin: 2px;}
input.bouton {background-color: #690; color: #FFF; font: normal bold 1.2em tahoma; margin: 10px auto; padding: 2px 20px;}
option {color: #777; padding: 0 2px;}
img.puce {border: 0; margin: 0 5px; vertical-align: middle;}
a {font-family: tahoma;}
a:link {color: green; text-decoration: underline;}
a:visited {color: green; text-decoration: underline;}
a:hover {color: #900; text-decoration: none;}
a:active {color: #000;}
.couleur {color: #690;}
.indication {font: italic 0.9em arial;}
.indication a:link, .indication a:visited, .indication a:hover {color: black; text-decoration: underline;}
.msg_client {padding: 5px; text-align: center; color: white; background-color: #690;}
.msg_client h4 {color: black; margin-top: 2px; font-size: 1.2em; border-bottom: 2px white dotted;}
.important {font-weight: bold; color: #F00; font-size: 1em;}
.titre {
	color: #FFF;
	background-color: #690;
	height: 30px;
	padding: 5px 5px 3px 5px;
	border: 0px #060 solid;
	border-bottom: 1px #777 solid;
	text-align: left;
	font-size: 1.1em; font-weight: bold;
	font-family: arial, "trebuchet ms", arial;
}
td.num {width: 50px; text-align: center; vertical-align: top;}
.ligne_paire {background-color: #FFA5; }
.ligne_impaire {background-color: #CBB99D;}
div.encadre {
	padding: 5px; border: 2px #690 dashed; background-color: none; font-size: 1em;
	margin: 1em auto; text-align: left;
}

/* BANDEAU SUPERIEUR */
#bandeau_sup {width: 1000px; height: 175px; background-color: white; margin: 0 auto;}
#bandeau_sup img {width: 700px; height: 140px; border: 0; float: right; margin: 3px;}
.menu_horiz {height: 20px; width: 100%; color: #FFF; border: 0px black solid; clear: both; background-color: #690; font: bold 10pt arial, tahoma; padding: auto 10px;}
div.bloc_vert { float: left; height: 20px;}
div.bloc_vert a {color: #FFF; text-decoration: none;}
div.bloc_vert a:hover {text-decoration: none; border-bottom: 7px red solid; color: #FFF;}
div.bloc_vert a:visited {color: #FFF;}
#info_pro {width: 270px; text-align: left; padding: 5px;}
#info_pro h1 {color: #C39; font-size: 15pt; font-family: arial; margin: 5px 2px 10px 2px; border-bottom: 3px #C39 solid; text-decoration: none;}
#info_pro p {font: bold 1.5em "trebuchet ms"; color: inherit; text-align: center;}

/* INDEX */
.etablissement {width: 280px; height: 80px; margin: 10px; padding: 5px; float: left; border: 1px white solid; background-color: #DDD; color: black;}

/* PLANNING: BLOCS PRINCIPAUX */
#infos_client {
	background-color: transparent; border: 0px #777 solid;
	color: #777; font-size: 1em;
	width: 100%; height: 25px;
	margin: 0 auto;
	padding: 2px;
}
#infos_client marquee {width: 950px; color: #C39; font: bold 1.3em "trebuchet ms";}

#main_tab {
		  width: 980px; min-height: 850px;
		  margin: 0 auto;
		  /*height: 400;*/
		  color: #777;
		  background-color: white;
		  border: 0px #060 solid;
		  padding: 1px 10px 5px 10px;
		  text-align: left;
}

/* ELEMENTS DE L'APPLICATION */
#conteneurPlanning {float: right; border: 2px #060 solid; width: 300px;}
#conteneurPlanning p {font-size: 0.5em;}   
#legende {width: 450px; height: 20px;}
#legende div {float: left;}
div.lgd {width: 15px; height: 8px; margin: 3px; border: 1px black solid;}
#annulation_form {width: 453px;}
#calendrier {margin: 10px 0; width: 450px; height: 200px; border: 2px #060 solid; background-color: #FFF; text-align: center;}
#bloquer_form {color: black; background-color: #FFF; }
#rechID {width: 200px; height: 40px; color: inherit; background-color: #EEE; border: 1px #CCC solid; float: left; position: relative; top: 0; left: 0;}
#pseudobox {color: black; background-color: white; position: absolute; top: 40px; left: 0; z-index: 50; width: 200px; padding: 5px; border: 1px black solid; text-align: left;}

/* dates possibles (si option_reservationNjours = true) */
#dates_possibles {width: 450px; background-color: inherit; margin: 10px 0px; border: 2px #060 solid;}
#dates_possibles ul {margin-left: 20px;}
#dates_possibles li {list-style-type: square; color: #000;}
#dates_possibles p {padding: 5px;}
#dates_liste_deroulante {margin-left: 25px;}
#dates_liste_deroulante select {width: 100%; border: 0;}
#dates_liste_deroulante option {background-color: inherit; color: green; font-weight: bold;}

/* lien revenir à aujourd'hui */
#revenirToday {
	margin: 2px 0 0 50px; float: right; display: block;
	padding: 3px;
	height: 20px;
	color: white;
	font-size: 1.1em;
	text-decoration: none;
	border: 1px white solid;
	background-color: #060;
	text-transform: uppercase;
}
#revenirToday:visited {color: #FFF;}
#revenirToday:hover {color: #AAA; text-decoration: none;}
#revenirToday:active {color: #FFF; text-decoration: none; position: relative; top: 1px;}

/* formulaire de réservation */
#formulaire {
	color: black;
	width: 450px; min-height: 300px;
	border: 2px #060 solid;
	background-color: #FFF;
	text-align: center;
}
#formulaire fieldset { padding: 5px; text-align: center; width: 400px; display: block; margin: 10px auto;}
#formulaire legend {color: green; font-weight: bold;}
#desc_rdv {background-color: #EEE; border: 1px #CCC solid; padding: 0px 5px; color: red; font-weight: bold; margin: 3px auto;} 

#annulation_form {color: black; background-color: #FFF; border: 2px #060 solid;}
#annulation_form td {padding: 1px 5px;}

/* planning */
table.planning {color: #777; background-color: #060; border: 0px #777 solid; float: left; width: 100%;}
.rdv_pris {background-color: #F00; text-align: center; color: #FFF;}
.rdv_libre {background-color: #FFF;}
.rdv_bloque {background-color: #03F; color: #FFF;}
.rdv_libre, .rdv_pris {width: 70%; font-size: 0.9em;}
.case_vide {font-size: 1em; background-color: #060; height: 35px;}
/* classes pour les clients spéciaux */
.rdv_1 {background-color: #FFE000; text-align: center; color: #000;} /* occupation perso */
.rdv_2 {background-color: #486CE8; text-align: center; color: black;} /* occupation pro */
/* ID client toujours visible. Ici: cours collectif */
.rdv_3 {background-color: #FF9500; color: white; text-align: center;}
td.service {font-size: 1.3em; font-weight: bold; text-transform: uppercase; text-align: center; color: #060;}
td.msg_planning {color: #777; background: black; text-align: center; padding: 3px;}
.rdv {padding: 5px 10px; font-size: 1em; color: black; background: #FFF;}
.bande {background-image: url(../images/fond_titre.jpg);}
.employe {font-family: verdana; font-size: 1em;}
.heure {font-size: 1em; color: #FFF; vertical-align: top; height: 35px; width: 30%; font-weight: bold; text-align: center;}

img.bulle {margin: 1px; border: 0; width: 15px; height: 11px; z-index: 5;}
img.numero {border: 0; width: 15px; height: 20px; margin: 0 5px 5px; float: left;}

/* lien BULLE en mode admin */
div.aide {position: relative; top: 0; left: 0; width: 10px; height: 10px; display: inline; margin: 0 2px;z-index: 5;}
div.bloc_aide {
	width: 200px;
	border: 1px black solid;
	padding: 5px;
	background: #FFC;
	color: black;
	font: bold 1.2em arial;
	text-align: left;
	visibility: hidden; z-index: 20;
	position: absolute;
	top: -30px; left: 20px;
}

/* -------------------------------------------------------------------------------------------------------- */
/* CALENDRIER */
.calendarNav1, .calendarNav2 {font-size: 10px; font-style: normal; background-color: #FFF;}
.calendarTop1, .calendarTop2 {font-size: 11px; font-style: normal; color: #FFF; font-weight: bold;  background-color: #060; height: 18px; text-align: center;}
.calendarToday1, .calendarToday2 {font-size: 12pt; font-weight: bold; color: #FFF; background-color: #693; text-align: center;}
.calendarDays1, .calendarDays2 { width: 30px; height: 20px; font: bold 10pt arial; color: black; background-color: #FFF; text-align: center; border: 1px #690 solid;}
.calendarHL1, .calendarHL2 { width: 30px; height: 20px; font-size: 10px; font-style: normal; color: #AAA; background-color: #AAA; text-align: center; text-decoration: line-through;}
.calendarHeader1, .calendarHeader2 { font-size: 9px; background-color: #A9B4B3; color: #FFF;}
.calendarTable1, .calendarTable2 {  background-color: #FFF; border: 1px #690 solid; margin: 3px; border-collapse: collapse;}

/* liens calendrier */
a.cal:link {color: #690; text-decoration: none;}
a.cal:visited {color: #693; text-decoration: none;}
a.cal:hover {color: #FFF; background-color: #690; text-decoration: none; font-weight: bold; padding: 2px;}
a.cal:active {color: blue; }

/* lien MediaPro DX */
a.mpdx {font-size: 12px; color: #444; font-family: tahoma;}
a.mpdx:hover {text-decoration: none;}
a.mpdx:visited {color: #444; text-decoration: none;}
a.mpdx:active {font-weight: normal; text-decoration: none;}

/* PROFILS/COMPTES */
#formprofil {width: 500px; border: 2px #060 solid; margin: 1em auto;}
#tableau_bord {width: 500px; border: 2px #060 solid; margin: 1em auto;}
/* faq */
/* pour cacher/montrer les réponses dans la faq */
.cachediv {
	visibility: hidden;	overflow: hidden;
	height: 1px;
	margin-top: 5px;
	position: absolute;
}
.montrediv {
	background-color : none;
	border-width: 1px 1px 1px 5px;
	border-color: #DDD #DDD #DDD #777;
	border-style: solid;
	color: black;
	padding: 3px;
	margin: 10px auto;
}

/* CONTACT */
#contact_form {border: 2px #060 solid; color: inherit; margin: 1em auto;}

/* TARIFS (option) */ 
#tab_tarifs {width: 850px; margin: 20px auto; border-collapse: collapse; border: 2px #06C solid; background-color: white; color: #06C;}
#tab_tarifs td {border: 1px blue solid; padding: 10px; text-align: left;}
#tab_tarifs th {border: 1px blue solid; padding: 3px; text-align: center; font-size: 10pt;}
#tab_tarifs p {width: 30%; height: 100%; float: left; margin: 5px; color: inherit; font: bold 1.2em "trebuchet ms";}
#tab_tarifs ul {margin-left: 10px;}
#tab_tarifs b {font: bold 1.2em "trebuchet ms";}
td.bleu1 {background-color: #06C; color: white; font-size: 10pt;}
td.bleu2 {background-color: #69F; color: white; font-size: 10pt;}
td.bleu3 {background-color: #9CF; color: inherit; font-size: 10pt;}
td.prix {font: bolder 16pt "trebuchet ms"; text-align: center;}