html
	{
	height: 100%;
	margin: 0px;
	padding: 0;
	}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0;
	background-color:#a6c5b3  ;
	background-image:url('/img/bg2.jpg');
	background-repeat:repeat-x;
	height: 100%;
	}

img
	{
	border:0;
	}

	
div 	
	{
	border: 0px solid #dddddd;
	}

*			{font-family:Arial;    color:#000000;}
A.			{  color:#000; text-decoration:none;}
A:link 		{  color:#000; text-decoration:none;}
A:visited	{  color:#000; text-decoration:none;}
A:hover		{  color:#98040C; text-decoration:underline;}


.noview
	{
	display:none;
	}


div.clear
	{
	clear:both;
	}


@media screen and (min-width: 801px) {
  /* Styles pour les écrans > 800px */
	div.container 
		{
		width: 90%; 
		}
	div.page
		{
		width: 90%;
		}
	table.tableauadmin 
		{
		width: 800px;
		}
	div.footer
		{
		width: 90%;
		}
	div.header 
		{
		width: 90%;
		}
	div.blocmenu 
		{
		width: 95%;
		}
}

@media screen and (max-width: 800px) {
  /* Styles pour les écrans <= 800px */
  div.container 
		{
		width: 100%; 
		}
	div.page
		{
		width: 95%;
		}
	table.tableauadmin 
		{
		width: 90%;
		}
	div.footer
		{
		width: 95%;
		}
	div.header 
		{
		width: 95%;
		}
	div.blocmenu 
		{
		width: 95%;
		}
}

div.container 
	{
 
	margin: 0 auto;
	background-color:#2e5332;
	min-height:100%;
	}

div.header
	{
	width: 1100px; 
	margin: 0px auto;
	padding-top:10px;
	height:170px;
	}	




div.page
	{
	
	margin: 0 auto;
	background-color:#2e5332;
	height: 100%;

	}

div.contenu
	{
	background-color:#fcfcfc;
	border: 5px solid #98040C;
	margin-bottom:10px;
	-moz-border-radius: 10px;
	padding-left:20px;
	padding-right:20px;
	height: 100%;
	}

div.footer
	{
	
	text-align:center;
	margin: auto;
	padding-top:20px;
	padding-bottom:20px;
	background-color:#2e5332;
	color:#b7f360;
	}

.footer a
	{
	color:#b7f360;
	}	
	

div.logo
	{
	float:left;
	width:160px;
	height:160px;
	background-color:#2e5332;
	
	}
div.login
	{
	float:right;
	width: 320px; 
	font-size:12px;
	background:#84a949;
	padding:10px;
	-moz-border-radius: 10px;
	height:80px;
	
	}


div.login A.			{  color:#fff; text-decoration:none;}
div.login A:link 		{  color:#fff; text-decoration:none;}
div.login A:visited	{  color:#fff; text-decoration:none;}
div.login A:hover	{  color:#98040C; text-decoration:underline;}
div.login td			{  color:#fff;}	
	
div.login input.inputtext
	{
	height:12px;
	font-size:11px;
	width:160px;
	}
	
div.bandeau
	{
	height:120px;
	width:750px;
	background-color:#2e5332;
	
	}
	
div.bandeau2 
	{
	
	padding-top:0px;
	padding-left:155px;
	}
	
div.bandeau2 img
	{
	width:580px;
	height:106px;
	}
	
div.blocmenu
	{
	width: 1100px; 
	z-index:99;
	}

	



	
/* ********************************************************** */
/* ***************** PARAGRAPHES **************************** */
/* ********************************************************** */	
	

div.gauche
	{
	float:left;
	}

div.droite
	{
	float:right;
	
	width: 33%;
	height:25px;
	text-align:right;
	}
	


div.popup
	{
	background-color:#a6c5b3  ;
	background-image:url('/img/bg2.jpg');
	padding:0px;
	margin:0px;
	width:580px;
	
	}
	
div.agendadescription
	{
	background-color:#fcfcfc;
	border: 5px solid #98040C;
	margin:30px 30px 0 30px;
	-moz-border-radius: 10px;
	padding-left:20px;
	padding-right:20px;
	font-size:12px;
	min-height:300px;
	width:500px;
	}
div.paragraphe
	{
	padding-left:5px;
	padding-right:5px;
	color:#000; 
	
	}

div.paragraphe p,div.paragraphe a,div.paragraphe li
	{
	font-size:13px;
	line-height:18px;
	}
div.paragraphe a			{  color:#98040C; text-decoration:underline;}
div.paragraphe a:link 	{  color:#98040C; text-decoration:underline;}
div.paragraphe a:visited	{  color:#98040C; text-decoration:underline;}
div.paragraphe a:hover	{  color:#98040C; text-decoration:underline;}


	
div.editparagraphe
	{
	padding-left:20px;
	padding-right:20px;
	margin: 0 auto;
	/*background-color:#6DE9D9;*/
	height:25px;
	}
	

div.evenement
	{
	background-color:#84a949;
	-moz-border-radius: 10px;
	padding:20px;
	margin:5px;
	}

div.evenement2
	{
	background-color:#aaaaaa;
	-moz-border-radius: 10px;
	padding:20px;
	margin:5px;
	}	
	
/*  Album Photo */

div.photo
	{
	float:left;
	/*background-color:#000;*/
	}
	
div.photo img
	{
	border:0;
	padding:5px;
	}
	
/* ********************************************************** */
/* ***************** Agendas ******************************** */
/* ********************************************************** */	

div.calendrier
	{
	margin-left: auto;
	margin-right: auto;
	width:300px;
	background:#84a949;
	text-align:left;
	padding:5px;
	
	}

div.calendrieravenir
	{
	width:500px;
	text-align:left;
	font-size:32px;
	color:#ffffff;
	}

div.calendrierdate
	{
	width:100px;
	float:left;
	margin-left:10px;
	margin-right:10px;
	margin-top:5px;
	margin-bottom:5px;
	
	}
	
div.calendriermois
	{
	background:#ffffff;
	width:100px;
	text-align:center;
	font-size:32px;
	height:35px;
	}
	
	
div.calendrierheure
	{
	background:#20231c;
	width:100px;
	text-align:center;
	font-size:14px;
	color:#ffffff;
	height:15px;
	}

div.calendrierligne
	{
	border-top: 1px solid #20231c;
	height:60px;
	margin:0px;
		
	}
div.calendriertitre
	{
	background:#98040C;
	width:158px;
	float:right;
	height:50px;
	text-align:center;
	margin-left:10px;
	margin-right:10px;
	margin-top:5px;
	margin-bottom:5px;
	vertical-align: middle;
	line-height:50px;
	}

table.tableaucalendrier
	{
	
	border: medium solid #98040C;
	background-color:#CCC;
	border-collapse: collapse;
	padding: 0px;
	border-spacing: 0px;
	background-repeat:no-repeat;
	}


div.calendriertitre a.calendriertitre				{  color:#fff; text-decoration:none;vertical-align:middle;font-size:12px;}
div.calendriertitre a.calendriertitre:link 		{  color:#fff; text-decoration:none;vertical-align:middle;font-size:12px;}
div.calendriertitre a.calendriertitre:visited		{  color:#fff; text-decoration:none;vertical-align:middle;font-size:12px;}
div.calendriertitre a.calendriertitre:hover		{  color:#fff; text-decoration:underline;vertical-align:middle;font-size:12px;}

div.calendriertitre a.calendriertitre strike				{  color:#fff; text-decoration:strike;vertical-align:middle;font-size:12px;}
div.calendriertitre a.calendriertitre strike:link 		{  color:#fff; text-decoration:strike;vertical-align:middle;font-size:12px;}
div.calendriertitre a.calendriertitre strike:visited		{  color:#fff; text-decoration:strike;vertical-align:middle;font-size:12px;}
div.calendriertitre a.calendriertitre strike:hover		{  color:#fff; text-decoration:underline;vertical-align:middle;font-size:12px;}

	
table.tableaucalendrier td.cellcalendrier a				{  color:#000; text-decoration:none;vertical-align:middle;font-size:12px;}
table.tableaucalendrier td.cellcalendrier a:link 		{  color:#000; text-decoration:none;vertical-align:middle;font-size:12px;}
table.tableaucalendrier td.cellcalendrier a:visited		{  color:#000; text-decoration:none;vertical-align:middle;font-size:12px;}
table.tableaucalendrier td.cellcalendrier a:hover		{  color:#000; text-decoration:underline;vertical-align:middle;font-size:12px;}

table.tableaucalendrier th	{	
	background-color:#98040C;
	color:#ffffff;
	height:30px;
	padding-left:4px; 
	text-align:left;
	font-size:16px;
	}

	
table.tableaucalendrier td.cellcalendrier
	{
	background:#84a949;
	height:80px;
	
	text-align:right;
	}

div.cellcalendrier
	{
	
	}
	
/* ********************************************************** */
/* ***************** Reservations *************************** */
/* ********************************************************** */

div.dateresa
	{
	text-align:center;
	font-size:24px;
	}

div.court
	{
	float:left;
	padding: 5px;
	}

div.nomjoueur
	{
	text-align:left;
	font-size:11px;
	overflow: hidden;
white-space: nowrap;
min-width:130px;

	}
table.court
	{
	width:190px;
	border: medium solid #98040C;
	background-color:#CCC;
	border-collapse: collapse;
	padding: 5px;
	border-spacing: 5px;
	background-repeat:no-repeat;
	}
	
table.court1
	{
	width:390px!important;
	
	}

table.courtfull
	{
	width:280px;
	border: medium solid #98040C;
	background-color:#CCC;
	border-collapse: collapse;
	padding: 5px;
	border-spacing: 5px;
	background-repeat:no-repeat;
	}	
	
table.court th.court
	{
	text-align:center;
	font-size:14px;
	}

table.court tr
	{
	height:15px;
	}
	
table.courtfull tr
	{
	height:18px;
	}
	
tr.fond1
	{
	background-color:#ddd;
	
	}

 tr.fond2
	{
	background-color:#ccc;
	
	
	}
	
table.court td.heure,table.courtfull td.heure
	{
	width:35px;
	font-size:10px;
	text-align:center;
	} 

table.court td.resaadmin,table.courtfull td.resaadmin
	{
	
	width:25px;
	font-size:10px;
	text-align:center;
	} 

table.court a.lien
	{
	font-size:10px;
	}

div.date
	{
	width:800px;
	text-align:center;
	}


		
table.court input 
	{
	width:120px;
	height:12px;
	}

table.courtfull input 
	{
	width:120px;
	height:12px;
	}
	
/* ********************************************************** */
/* ***************** Administration ************************* */
/* ********************************************************** */

/*  Tableau gestion des cotisations */

table.tableauadmin
	{
	
	border: medium solid #98040C;
	background-color:#CCC;
	border-collapse: collapse;
	padding: 0px;
	border-spacing: 0px;
	background-repeat:no-repeat;
	}
	
table.tableauadmin tr.c1 {background-color:#CCC}
table.tableauadmin tr.c2 {background-color:#999}
table.tableauadmin tr.cover {background-color:#009900}


table.tableauadmin td.c1 {background-color:#CCC}
table.tableauadmin td.c2 {
	background-color:#009900;
	color:#FFFFFF;
	}
table.tableauadmin td.cover {background-color:#04470B;color:#FFFFFF;}
table.tableauadmin td.cover2 {background-color:orange;color:#FFFFFF;}

table.tableauadmin th	{	
	background-color:#98040C;
	color:#ffffff;
	height:30px;
	padding-left:4px; 
	text-align:left;
	font-size:16px;
	}

table.tableauadmin th sup	{	
	color:#ffffff;
	}
	
table.tableauadmin th a.dansth	{	
	
	color:#ffffff;
	}
	
table.tableauadmin th.center {text-align:center;}

table.tableauadmin td
	{
	padding-left:4px;
	height:25px;
	font-size:16px;
	}
	
table.tableauadmin td.adminpetit
	{
	font-size:11px;
	}
		

/* ********************************************************** */
/* ***************** Ou sont ils ?  ************************* */
/* ********************************************************** */	

td.entete
		{
		
		background-color:#98040C;
		border: thin solid #04470B;	
		border-right: 0px;
		border-left: 0px; 
		border-bottom: 1px;
		padding: 1px;
		text-align:center;
		}
	td.ligne
		{
		
		border: thin solid #04470B;	
		border-right: 0px;
		border-left: 0px; 
		border-bottom: 1px;
		padding: 1px;
		
		}
		
	tr.fondout
		{
		background-color:#84a949;
		}

	tr.fondover
		{
		background-color:#98040C;
		}
		
		
div.cache
	{
	display:none;
	}
	
div.affiche
	{
	display:block;
	}
	
/* ********************************************************** */
/* ***************** infos Perso ?  ************************* */
/* ********************************************************** */

fieldset
	{
	background:#f1f1f1;
	}

legend
	{
	background:#f1f1f1;
	border: 1px solid #000000;	
	font-size:12px;
	}
	
table.infoperso 
	{
	font-size:11px;
	background:#f1f1f1;
	border:0px;
	margin:0px;
	padding:0px;
	width:100%;
	}

table.infoperso input,textarea
	{
	font-size:11px;
	}
	
table.infoperso li
	{
	margin-left:40px;
	}

/* ********************************************************** */
/* ***************** SLIDER  ************************* */
/* ********************************************************** */
	
	
#slider {
    width: 280px; /* important to be same as image width */
    height: 150px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
	
}
#sliderContent {
    width: 280px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
	margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
	display: none;
}
.sliderImage span {
    position: absolute;
	
	font: 10px/15px Arial, Helvetica, sans-serif;
    
    width: 280px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
#slider ul { list-style-type: none;}	


/* ********************************************************** */
/* ***************** BASKET		    ************************* */
/* ********************************************************** */

div.basketinsite
	{
	position: fixed;
	width:350px;
	z-index: 600;
	top: 1px;
	right: 1px;
	}

div.basket
	{
	background-color:#fcfcfc;
	border: 5px solid #98040C;
	margin:10px;
	-moz-border-radius: 10px;
	padding-left:20px;
	padding-right:20px;

	font-size:10px;
	}

div.contenubasket
	{
	height:300px;
	overflow:auto;
	}

tr.pair
	{
	background-color:#ccc;
	}

tr.impair
	{
	background-color:#fff;
	}	
	
div.caisse_detail
	{
	margin:10px;
	}
	
#draggable 
	{
	position:fixed;
	background-color:#cccccc;
	border: 2px dotted #000;
	width: 350px; 
	height: 800px; 
	z-index: 600; 
	top: 1px;
	right:1px;
	display:none;
	padding:10px;
	cursor: move;
	}



#draggable .button {
  width: 70%;
  background: #2e5332;
  border: 1px solid #132214;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  margin: 0;
  padding: 10px 20px 11px;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: background-color 0.15s ease-in-out;
  -moz-transition: background-color 0.15s ease-in-out;
  -o-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
  text-align:left;
}

#draggable   .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes égales */
  gap: 10px; /* espace optionnel entre les éléments */
}

	#draggable  .col-6 {
  background: #ccc;
  width:100%;
  text-align: center;
  white-space: nowrap;
}
#draggable  label {
  color:#fff;
}

	
table.menuvalidbasket
	{
	width:100%;
	margin:0px;
	border-spacing:0px;
	}
	
table.menuvalidbasket td
	{
	text-align:center;
	padding:10px;
	background:#ddd;
	margin:0px;
	
	}
table.menuvalidbasket td.selected
	{
	background:#bbb;
	}
table.menuvalidbasket td.flecheg
	{
	background-image:url('/img/fleche1.png');
	height:29px;
	width:19px;
	}
table.menuvalidbasket td.fleche
	{
	background-image:url('/img/fleche.png');
	height:29px;
	width:19px;
	}
table.menuvalidbasket td.fleched
	{
	background:url('/img/fleche.png') #bbb;
	height:29px;
	width:19px;
	
	}

a.button
	{
	text-align:center;
	
	background:#2e5332;
	color:#fff !important;
	text-decoration:none !important;
	padding:20px;
	font-size:16px;
	margin:5px;
	}	

input.button
	{
	border:0;
	text-align:center;
	
	background:#2e5332;
	color:#fff !important;
	font-size:16px;
	margin:5px;
	padding:20px;
	}		
	
 a:hover.button,input:hover.button
	{
	background:#a6c5b3;
	color:#fff;
	text-decoration:underline !important;
	}
	
.basketbutton
	{
	text-align:center;
	width:200px;
	background:#2e5332;
	color:#fff;
	margin:5px auto;
	}
	
.basketbutton2	
	{
	text-align:center;
	width:200px;
	background:#a6c5b3;
	color:#fff;
	margin:5px auto;
	padding:20px 0;
	font-size:16px;
	cursor:pointer;
	}
	
.basketbutton a
	{
	
	padding:20px;
	font-size:16px;
	display:block;
	background:#2e5332;
	color:#fff;
	
	}
	
.basketbutton a:hover
	{
	
	background:#a6c5b3;

	
	}

#ecap
	{
	float:left;
	width:790px;
	min-height:300px;
	}
#basket
	{
	border:2px solid #98040C;
	
	border-radius: 15px 15px 15px 15px;
	margin-top:10px;
	
	float:left;
	width:250px;

	background:#ccc;
	}
#basket th
	{
	background:#98040C;
	color:#fff;
	}	
.basket_site
	{
	font-size:10px;
	min-height:100px;
	}

.pointer
	{
	cursor:pointer;
	}
	
div.caisse_total
	{
	font-size:14px;
	text-align:right;
	padding-right:10px;
	}
	
	
.error input, input.error, select.error, .error textarea, textarea.error, .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { border-color: #c60f13; background-color: rgba(198, 15, 19, 0.1); }	

span.error
	{
	color: red;
	}
span.success
	{
	color: green;
	}
/*  Tableau  */

table.tableaucap
	{
	width:90%;
	border: medium solid #98040C;
	background-color:#CCC;
	border-collapse: collapse;
	padding: 0px;
	border-spacing: 0px;
	background-repeat:no-repeat;
	}
	
table.tableaucap tr.c1 {background-color:#CCC}
table.tableaucap tr.c2 {background-color:#999}
table.tableaucap tr.cover {background-color:#009900}


table.tableaucap td.c1 {background-color:#CCC}
table.tableaucap td.c2 {
	background-color:#009900;
	color:#FFFFFF;
	}
table.tableaucap td.cover {background-color:#04470B;color:#FFFFFF;}
table.tableaucap td.cover2 {background-color:orange;color:#FFFFFF;}

table.tableaucap th	{	
	background-color:#98040C;
	color:#ffffff;
	height:30px;
	padding-left:4px; 
	text-align:left;
	font-size:14px;
	}

table.tableaucap th a.dansth	{	
	
	color:#ffffff;
	}
	
table.tableaucap th.center {text-align:center;}

table.tableaucap td
	{
	padding-left:4px;
	height:25px;
	font-size:12px;
	}
	
table.tableaucap td.adminpetit
	{
	font-size:11px;
	}
	
	
div.notification 
	{
	position: relative;
	margin: 10px 60px 10px 60px;
	padding: 10px 10px 10px 40px;
	
	border: 1px solid;
	background-position: 10px 11px !important;
	background-repeat: no-repeat !important;
	font-size: 13px;
	
	}
	
div.error
	{
	background: #ffcece url('../images/icons/cross_circle.png');
	border-color: #df8f8f;
	color: #665252;
	}

div.attention 
	{
	background: #fffbcc url('../images/icons/exclamation.png') 10px 11px no-repeat;
	border-color: #e6db55;
	color: #666452;
	}

div.information 
	{
	background: #dbe3ff url('../images/icons/information.png');
	border-color: #a2b4ee;
	color: #585b66;
	
	}

div.success 
	{
	background: #d5ffce url('../images/icons/tick_circle.png');
	border-color: #9adf8f;
	color: #556652;
	}
	
	
.jcarousel-wrapper {
    margin: 10px auto 40px;
	width:540px;
    position: relative;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}


.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

.jcarousel-wrapper .photo-credits a {
    color: #fff;
}

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 540px;
    height: 360px;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 200px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #f8ff59;
    color: #fff;
    text-decoration: none!important;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.jcarousel-control-prev {
    left: -50px;
}

.jcarousel-control-next {
    right: -50px;
}

.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    bottom: -50px;
    left: 15px;
}

.jcarousel-pagination a {
    text-decoration: none !important; 
    display: inline-block;
    
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    
    background: #f8ff59;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    
    margin-right: 2px;
    
    opacity: .75;
}

.jcarousel-pagination a.active {
    background: #98040c;
    color: #f8ff59 !important;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}


.datatable tbody td {
	font-size:12px;
}

.plus-circle {
  display: inline-block;
  background-color: #f0f0f0;
  color: black;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  text-align: center;
  line-height: 13px !important;
  font-weight: bold;
  font-size: 16px;
  border: 1px solid #ccc;
  text-decoration: none !important;
  margin-left:3px;
}

.plus-circle:hover {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  transform: scale(1.1); /* zoom léger */
}

/* Effet au clic (facultatif) */
.plus-circle:active {
  transform: scale(0.95); /* petit effet de "pression" */
}