@charset "iso-8859-1";

/* BALISES GENERALES */
* {margin: 0; padding: 0;}

html {height: 100%;}

body {
	height: 100%;
	font-family: verdana, helvetica;
	font-size: 10px;
	background-color: #3B4853;
	color: white;
	text-align: center;
}

p {text-align: left;}
h1 {
	padding: 3px 0 3px 25px;
	text-align: left;
	width: 100%;
	font: bold 12pt "trebuchet ms", arial;
	color: #FFF;
	border: 0px black dashed;
	background-color: #090;
	background-position: 3px;
	background-repeat: no-repeat;
	margin: 0;
}
hr {color: #AAA;}
table, td {font-size: 1em;}
td {border: 0;}
b { color: inherit;}
input {margin: 3px;}

a:link {color: #BBB; text-decoration: none;}
a:visited {color: #BBB; text-decoration: none;}
a:hover {color: #FFC; text-decoration: underline;}
a:active {color: #666;}

/* BLOCS PRINCIPAUX */
#meteo {background-color: red; width: 100px; height: 100px; float: right; margin: 20px;}
#bandeau_sup {width: 1000px; height: 150px; border: 0; background: #666 url(../images/bandeau_sup.jpg) no-repeat top left; margin: 0 auto; position: relative; top: 0; left: 0;}
#bandeau_sup h1 {color: white; margin: 0; padding: 0; border: 0; font-size: 20pt; text-align: right; width: 100%; background: none; width: 50%; position: relative; top: 100px; left: 400px;}
.menu_horiz {border: 1px #000 solid; font-size: 1em; width: 1000px; background-color: black; margin: 0 auto; clear: both;}
#date {float: left;}
#rubriques {text-align: right;}
.menu_horiz a:link {color: white;}
.menu_horiz a:visited {color: white;}
.bande {background-image: url(../images/fond_bande20.png);}
#menu_admin {width: 100%; border: 0; margin: 0 0 20px 0;}
#infos_joueurs {
	background-color: transparent; border: 2px #FFF solid;
	color: white; font-size: 1em;
	width: 100%;
	margin: 20px auto 10px auto;
	padding: 2px;
}
#infos_joueurs h1 {display: inline; color: white; font-size: 1em; width: 100%; background: none; padding: 2px; margin: 0;}
#main_tab {
		  width: 1000px;
		  min-height: 500px;
		  margin: 0 auto;
		  /*height: 400;*/
		  color: white;
		  background-color: inherit;
		  border: 0;
		  padding: 10px;
		  text-align: left;
		  z-index: 1;
		  position: relative; top: 0; left: 0;
}

/* ELEMENTS DE L'APPLICATION */
#conteneurPlanning {float: right; width: 500px; background-color: #FFF; border: 2px #666 solid;}
#calendrier {margin: 0 0 10px 0; width: 200px; border: 0px white solid; float: left; background-color: #FFF; border: 2px #666 solid;}
#dates_possibles {text-align: left; float: left; width: 250px; border: 2px #666 solid; background-color: white; color: black;}
#rechID {margin: 10px; width: 200px; float: left;}
#legende {float: left; margin-left: 10px; text-align: left;}
#legende span {height: 15px; width: 15px; margin: 2px; border: 0px black solid;}
#bloquer_form {color: black; background-color: #FFF; }

/* dates possibles (si option) */
#dates_possibles {width: 450px; margin: 0 0 10px 0;}
#dates_possibles ul {margin: 10px 0 10px 20px;}
#dates_possibles li {list-style-type: square;}
#dates_possibles p {padding: 5px;}
#dates_possibles a:hover {color: black; text-decoration: underline; font-weight: bold;}
#dates_possibles a:link, #dates_possibles a:visited {color: #555;}
/* formulaire de réservation */
#formulaire {
	color: black;
	width: 450px;
	border: 2px #666 solid;
	margin: 20px 0 20px 0;
	background-color: #FFF;
	clear: left;
	position: relative; top: 0; left: 0;
}
#formulaire fieldset { padding: 5px; text-align: center; width: 95%; display: block; margin: 5px;}
#formulaire legend {color: green; font-weight: bold;}

#pseudobox {border: 2px black solid; background-color: #FAFAFA; padding: 3px; z-index: 10; position: absolute; top: 80px; left: 70px; visibility: hidden; text-align: left;}
.bleu {background-color: #00F; color: #FFF;}
.black {background-color: inherit; color: inherit;}

#passageaccueil_form {width: 450px; color: black; background-color: #FFF; clear: left; border-collapse: collapse; border: 2px #666 solid;}
#passageaccueil_form td {padding: 1px 5px;}
#passageaccueil_form th {padding: 0; background-color: #090; color: white;}

/* titres des pavés */
#dates_possibles h1 {background-image: url(../images/un.png); margin: 0; width: 425px;}
#calendrier h1 {background-image: url(../images/un.png); margin: 0; width: 175px;}
#formulaire h1 {background-image: url(../images/deux.png); margin: 0; width: 425px;}
#conteneurPlanning h1 {background-image: url(../images/trois.png); margin: 0; width: 475px;}
#conteneurPlanning h2 {background-color: #666; font-size: 1.5em; text-align: center;}

#passageaccueil_form h1 {margin: 0; width: 400px;}

p.indication {padding: 2px 5px; font-style: italic;}
p.indication a:link, p.indication a:hover, p.indication a:visited {color: black; text-decoration: underline;}
/* -------------------------------------------------------------------------------------------------------- */
/* PLANNING */
table.planning {color: white; background-color: #666; border: 0px white solid; float: left;}
.rdv_pris {font-size: 1em; text-align: center; color: white;}
.rdv_libre {background-color: #FFF; font-size: 1em; color: black;}
.rdv_bloque {background-color: #03F; color: white; font-size: 1em;}
.rdv_libre, .rdv_pris {width: 100px; height: 30px; padding: 0; text-align: center;}
.rdv_ext {background-color: #F00;}
.rdv_abo5 {background-color: #F90;}
.rdv_abo7 {background-color: #090;}
.rdv_passe {background-color: #6CF;}
.case_vide {font-size: 1em; background-color: #666; height: 35px;}
td.service {font-size: 1.3em; font-weight: bold; text-transform: uppercase; text-align: center;}
td.msg_planning {color: white; background: black; text-align: center; padding: 3px;}
td.coche a {color: white; font-weight: bold;}
td.coche img {border: 0;}
.employe {font-family: verdana; font-size: 1em;}
.heure {font: italic bold 1.5em "trebuchet ms", arial; color: white; vertical-align: middle; font-weight: bold; text-align: center; width: 100px;}
.important {font-weight: bold; color: #F00; font-size: 1em;}
.num {color: #F00; font-size: 12; border: 1px #F00 solid; background-color: white; padding: 1px; font-weight: normal; margin: 1.2em;}
.ligne_paire {background-color: inherit; color: inherit;}
.ligne_impaire {background-color: #F1F1F1; color: black;}
.caselegende {width: 100px; height: 30px; border: 2px #666 solid; text-align: center; font-size: 12pt; padding-top: 3px;}

div.encadre {
	padding: 5; border: 2px #FFF dashed; background-color: transparent; font-size: 1.2em;
	margin-left: auto; margin-right: auto; width: 50%; text-align: left;
}
img.bulle {margin: 1px; border: 0; width: 15px; height: 11px; position: relative; z-index: 1;}
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: 1;}
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;
	position: absolute;
	top: -30px; left: 30px;
	z-index: 200;
}

/* -------------------------------------------------------------------------------------------------------- */
/* CALENDRIER */
#revenirToday {height: 22px; color: white; text-decoration: none; border: 1px white solid; background-color: #444; padding: 3px; font-size: 10pt; width: 192px; display: block; margin: 0;}
#revenirToday:hover {color: #666;}
.calendarNav1, .calendarNav2 {font-size: 10px; font-style: normal; background-color: white;}
.calendarTop1, .calendarTop2 {font-size: 11px; font-style: normal; color: white; font-weight: bold;  background-color: #666; margin: 0;}
.calendarToday1, .calendarToday2 {font-size: 10pt; font-weight: bold; color: white; background-color: #693;}
.calendarDays1, .calendarDays2 { width: 30px; height: 20px; font-size: 10px; font-style: normal; color: black; background-color: white; text-align: center}
.calendarHL1, .calendarHL2 { width: 30px; height: 20px; font-size: 10pt; font-style: normal; color: #AAA; background-color: #AAA; text-align: center; text-decoration: line-through;}
.calendarHeader1, .calendarHeader2 { font-size: 9px; background-color: #A9B4B3; color: white;}
.calendarTable1, .calendarTable2 {  background-color: #666; border: 0px #666 solid; display: inline; border-collapse: collapse; border-spacing: 1px; margin: 0;}
.calendarTable1 td, .calendarTable2	td {border: 1px #666 solid;}

/* liens calendrier */
a.cal:link {color: #090; text-decoration: none; font: bold 10pt "trebuchet ms";}
a.cal:visited {color: #090; text-decoration: none; font: bold 10pt "trebuchet ms";}
a.cal:hover {color: #F00; text-decoration: none; font: bold 10pt "trebuchet ms";}
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;}

/* -------------------------------------------------------------------------------------------------------- */
/* RESERVATIONS */
div.resa {background-color: #AAA; color: black; border: 1px white solid; padding: 10px; margin: 10px 0; width: 400px; clear: left;}
/* Formulaire de réservation des services */
#services_form {width: 400px; float: right; font-size: 12pt;}
#services_form h1 {margin: 0 0 20px 0; padding: 0; color: #093; text-decoration: none; width: 100%; font-size: 12pt; border: 0; background: none; font-family: verdana; font-weight: bold;}
#services_form h4 {color: #093; text-align: center; margin: 10px auto 0px;}
#services_form table {border: 1px white solid; padding: 5px;}
#services_form tr {height: 30px;}
#services_form td {vertical-align: middle;}
td.nomservice {width: 50%; vertical-align: top;}
 
#msg_confirmation {border: 0; font-size: 2em; text-align: center;}

/* BOUTONS */
input.bouton {background-color: #090; color: white; font: bold 1.1em "trebuchet ms", arial;}
#bouton_validation {margin: 35px 0; text-align: left;}
#bouton_validation input {width: 450px; font-size: 12pt;}

/* faq */
/* pour cacher/montrer les réponses dans la faq */
.cachediv {	visibility: hidden;	overflow: hidden; height: 1px; margin-top: -1px; position: absolute; background-color : transparent; color: inherit;}
		 
/* -------------------------------------------------------------------------------------------------------- */
/* CREATION/MODIFICATIONS DE PROFILS UTILISATEURS */
#formProfil, #tableau_bord {margin: 10px auto; border-collapse: collapse; border: 0px #666 solid; width: 400px;}