/* CSS Document */

::placeholder { color: #c0c0c0; }

body {
	background-color: #FFFFE1;
}

body * {
	position: relative;
	font-family: "Roboto", sans-serif;
}

p {
	font-size: 16px;
}

td.chapitreMenu {
	font-family: "Verdana";
	font-size: 12px;
	font-weight: bold;
}
	
td.titre {
	font-size: 24px;
	border: #009900;
	background-color: #FFFFEA;
	text-align: center;
	color: #009900;
}

.titreFlash {
	font-size: 1.2em;
	font-weight:bold;
	background-image: url(images/fond.jpg);
	background-color: #9a2f25;
	text-align: center;
	color: #FFFFE1;
}

.texteFlash {
	font-size: 1.1em;
	text-align: center;
	color: #000000;
}

td.piedFlash {
	font-size: 1.1em;
	font-weight:bold;
	text-align: center;
	color: #000000;
}

h1,
.sousTitre {
	color:#060;
	font-size:24px;
    font-weight: normal;
	/*background-image:url(images/fondVert.jpg);*/
	padding: 5px 10px;
	/*width:100%;*/
	margin-top: 0;
	color: #fff;
	background-color: #008a00;
	border-radius: 8px;
}

.Mnu {
	border: thin outset;
	background-image: url(images/_fond.jpg);
}
a:link {
	color: #006600;
}
a:visited {
	color: #003300;
}
a.accueil:link {
	color: #009900;
	text-decoration: none;
}
a.accueil:visited {
	color: #009900;
	text-decoration: none;
}
a.menu:link {
	color: #FFFFE1;
}
a.menu:visited {
	color: #FFFFE1;
}
a.mailto:link {
	color: #000000;
}
a.mailto:visited {
	color: #000000;
}
td.puceMenu {
	background-image: url(images/PuceBalle.gif);
	background-repeat: no-repeat;
	background-position: 0% 50%;
	vertical-align: top;
	width: 30px;
	height: 30px;

}
h2,
.chapitre {
	font-size:18px;
	color: #060;
	font-weight: bold;
	background-image: url(images/PuceBalle.gif);
	background-repeat: no-repeat;
	padding-left:30px;
	margin-top:30px;
	margin-bottom:5px;
}
.chapitre.documents {
	font-size:16px;
	text-decoration:none;
}
.chapitre.documents span {
	font-weight:normal;
	font-size:smaller;
}

blockquote {
	margin:0 0 10px 16px;
}
blockquote p {
	margin:0 15px;
}
blockquote p.histo {
	color: #666;
}

.fond { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .6; }
.tennis1 { background-image: url(images/tennis1.jpg); background-size: 230px; }
.tennis2 { background-image: url(images/tennis2.jpg); background-size: cover; }
.center { text-align:center; }
.justify { text-align:justify; }
.left { text-align:left; }
.right { text-align:right; }
.fontSize1 { font-size:.8em; }
.fontSize2 { font-size:.9em; }
.fontSize3 { font-size:1em; }
.fontSize4 { font-size:1.1em; }
.fontSize5 { font-size:1.2em; }
.fontSize6 { font-size:1.3em; }
.vert { color:#060; }
.rougeF { color:#930; }

.histo {
	display: inline-block;
}

.cases {
	display: flex;
    flex-wrap: wrap;
	justify-content: space-evenly;
}
.cases > div {
	margin-bottom: 20px;
}

#container {
	margin:auto;
}

#header { position: relative; }

#bandeau { position: relative; padding: 10px; }
#bandeau div { display: inline-block; z-index: 999; }
#bandeau .gauche { 
	width:24.5%; 
}
#bandeau .centre { 
	width:50%; 
	text-align:center; 
	vertical-align: top;
}
#bandeau .droite { 
	width:24.5%; 
	text-align:right; 
}
#top-menu {
	position: relative;
	width:100%;
	background-color:rgb(156 82 38 / 90%); 
    border-bottom: 2px solid #ffffe1;
    border-top: 2px solid #ffffe1;
	}
#top-menu .sigle {
	padding-left:10px;
	font-size:2em;
	color: #fff;
	text-shadow: none;
	}
#top-menu .ident {
	color: #fff;
	padding-top:10px;
	position: absolute;
	right: 2px;
}
#top-menu .sigle,
#top-menu .ident,
#top-menu .ident form {
	display: inline-block;
}

#middle {
	position: relative;
	height:100%;
	display: flex;
}
#left-menu {
	flex: none;
	padding:10px;
	width: 210px;
	vertical-align: top;
}
#left-menu .menu {
	line-height: 40px;
	font-family: "Comic Sans MS";
	font-size: 1.2em;
	padding: 0 10px;
}
#left-menu .menu a {
	padding-left:30px; 
	background-image: url(images/PuceBalle.gif);
	background-repeat: no-repeat;
	background-position: 0% 50%;
	line-height: 40px;
	height: 40px;
	text-decoration: none;
}
#left-menu .menu a:link,
#left-menu .menu a:visited {
	color: #333;
}
#left-menu .menu:hover a {
	color: #FFF;
}
#left-menu .menu:hover {
	background-image: url(images/cadre_menu.gif);
	background-size: cover;
	text-shadow: none;
}

#mainContent {
	background-color: #ffe8b0;
    flex: auto;
	padding:10px;
	}

#result {
	margint-top: 0;
}

#footer {
	width:100%;
	background-color:#9c5226; 
	margin-top:2px; 
	padding:4px 0;
	}
#footer div {
	text-align:center;
	color:#fff;
	}
#footer a:link,
#footer a:visited {
	color: #fff;
	text-shadow: none;
}


/* login */
span.login,
span.logout {
    display: flex;
}

span.login span.username, 
span.login span.password,
span.login span.login-button-icon,
span.logout span.username, 
span.logout span.logout-button-icon {
    margin-right: 5px;
    overflow: hidden;
}

span.login span.username,
span.login span.password {
    width: 73px;
    height: 16px;
    padding: 2px 2px 2px 25px;
    overflow: hidden;
}

span.login span.username {
    background: url(images/username_bg.png) 0 0 no-repeat;
}
span.login span.username:hover {
    background: url(images/username_bg.png) 0 -20px no-repeat;
}

span.login span.password {
    background: url(images/password_bg.png) 0 0 no-repeat;
}
span.login span.password:hover {
    background: url(images/password_bg.png) 0 -20px no-repeat;
}

span.login span.username input,
span.login span.password input {
    padding: 0px;
    width: 100%;
    background: none;
    border: none;
    outline: none;
    color: #646464;
    font-size: 11px;
	margin-top: 2px;
}

span.login span.username input:hover,
span.login span.password input:hover,
span.login span.username input:focus,
span.login span.password input:focus {
    color: #000000;
}

span.logout span.username {
	padding:0;
    font-size: 16px;
}

span.login span.login-button-icon {
    width: 21px;
    height: 20px;
    background: url(images/login_button_bg.png) 0 0 no-repeat; /* ie6png:crop */
}

span.login span.login-button-icon:hover {
    background: url(images/login_button_bg.png) 0 -20px no-repeat;
}

span.login span.login-button-icon button {
    display: block;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 20px;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

span.logout span.logout-button-icon {
    width: 21px;
    height: 20px;
    background: url(images/logout_button_bg.png) 0 0 no-repeat; /* ie6png:crop */
}

span.logout span.logout-button-icon:hover {
    background: url(images/logout_button_bg.png) 0 -20px no-repeat;
}

span.logout span.logout-button-icon button {
    display: block;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 20px;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

#cadreResa {  }
#cadreListeResa { width:350px; }
#cadrePwd { width:550px; }
#cadreRechercheMembres, #cadreListeMembres { width:350px; }

.cssbgbrd{
    margin : 1em 0;
}
.cssbgbrd .up{
    padding-right : 7px;
    background : url(images/border-sprits.png) no-repeat 100% 0;
}
.cssbgbrd .up div{
    height : 7px;
    background : url(images/border-sprits.png) no-repeat 0 -7px;
}
.cssbgbrd .down{
    padding-right : 7px;
    background : url(images/border-sprits.png) no-repeat 100% -21px;
}
.cssbgbrd .down div{
    height : 7px;
    background : url(images/border-sprits.png) no-repeat 0 -14px;
}
.cssbgbrd .middle{
    padding-left : 2px;
    background : url(images/border-sprits.png) no-repeat 0 -28px;
}
.cssbgbrd .middle div{
    margin : 0;
    padding : 3px 10px 3px 7px;
    /*background : #C4E0EB url(images/border-sprits.png) no-repeat 100% -28px;*/
    background : #BFFFBF url(images/border-sprits.png) no-repeat 100% -28px;
}
#tableau {margin:0;width:auto;height:auto;overflow:hidden;}
#tableau table { border:none; border-collapse:collapse; }
.motDePasse td { padding: 5px 10px; white-space: nowrap; }

#tableau .vide { 
	height:26px; 
	width:40px;
	border-right:#666 1px solid; 
	border-bottom:#666 1px solid; 
	}
#tableau .horaires { 
	height:20px; 
	border:#666 1px solid; 
	border-top:none;
	background-color:#090;
	color:#fff;
	text-align:right;
	vertical-align:top;	
	font-size:10px; 
	padding:5px; 
	}
#tableau .jours { 
	height:20px; 
	border:#666 1px solid; 
	border-left:none; 
	background-color:#090;
	/*background-image:url(images/fond.jpg);*/
	color:#fff;
	font-weight:normal;
	width:120px; 
	text-align:center; 
	}
#tableau .resaLibre, #tableau .resaClub, #tableau .resaMembre, #tableau .resaAutre, #tableau .resaInterdit { 
	height:29px; 
	border-right:#666 1px solid; 
	border-bottom:#666 1px solid; 
	width:120px; 
	font-size:10px; 
	text-align:center; 
	background-color:#E9ED96;
}
#tableau .resaLibre { cursor:pointer; }
#tableau .horsResa { background-image:url(images/hachure.gif); cursor:default; }
#tableau .resaClub { background-color:#DA6522; cursor:default; font-weight:bold; }
#tableau .resaMembre { background-color:#00D200; cursor:default; }
#tableau .resaAutre { background-color:#FFCC00; cursor:default; }
#tableau .resaInterdit { cursor:default; }
#tableau .pointer { cursor:pointer; }

#tableau #message {
	display:block;
	padding-left:40px;
	padding-bottom:10px;
	color:#DA6522;
}

.tarifs th.titre {
	/*background-image:url(images/fond.jpg);*/
	font-size:18px;
	color:#FFFFE1;
	background-color:#a35a2e;
}
.tarifs td.sTitre,
.tarifs th.sTitre {
	background-image:none;
	background-color:#E6FFE6;
	font-size:16px;
	color:#008040;
}

#listeMembres span { font-size:smaller; }
#listeMembres>span { display:block; line-height:175%; }

#ficheMembre { padding:10px; }
#ficheMembre hr {width:80%; }
#ficheMembre span { width:80px; display:block; float:left; line-height:200%; font-size:; }

/* --- Container pour le message patientez lors de l'enregistrement de la réservation --- */
#patientez{
	margin:auto;
	margin-top:15%;
	font-size:14px;
	text-align:center;
}


/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.8;
}

button:hover {
  opacity: 1;
}

button.loginbtn {
	background-color: inherit;
	width:auto;
	margin: auto;
	margin-right: 5px;
	padding: 6px;
	border: 1px solid #fff;
	border-radius: 6px;
	margin-top: -7px;
}

/* Extra styles for the cancel button */
button.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 10px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}