/*

Les couleurs
-------------
#999999 : gris clair
    #5A5E6B; gris + foncé
#FF0000 : rouge

    rgb(51, 51, 51) : gris foncé
#003366 : bleu "planete mer"


    les couleurs sont assignés aux attributs 
color 	background	border

*/


body
{
  width: auto;
  margin: 10px 0;
  text-align: center ;
  font: "Trebuchet MS", helvetica, sans-serif ;
  font-size: 1em;
  color:#808080; /* défini la couleur des lignes des cadres, dans body */
  background-color:  #44403a; /*couleur de fond de la page    #ad9776 = marron clair */
}
p
{
  padding-left: 1em;
}



/* ========= LES CADRES ====================== */

/* Une page : conteneur pricipal (juste apres body) : utilisation div id="page" */
#page
{
  max-width: 850px ; 
  width: auto ; 
  margin-left: auto ;
  margin-right:auto;
}

/* défini un cadre de la page : englobe le cadre pour le menu, le cadre principal */
.conteneur
{
  /* centrage du bloc de 900 px max dans la page */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom : 1em;
  text-align: left ;
  /* word-break: break-all; */
  word-wrap: break-word;
  border: 1px solid #ffffff;
  background: #fff ; /* fond blanc */
  border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px;

}

/* contenu du cadre principal (est inclu dans <div class="conteneur") */
.contenu
{
  padding: 0 2em 2em 2em ;  /* padding haut , droite, bas, gauche  */
}

/* cadre pour le titre */
div#panelTitre
{
  /* centrage du bloc de 900 px max dans la page */
   max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom : 1em;
  color:#fff; /* couleur du texte blanc */
  border: 1px solid #ffffff;
  border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px;
  background-color: #5778eb; /* couleur qd pas d'image de fond '*/
}

/* cadre pied de page */
div.footer
{
  text-align: center;
  margin-bottom : 10px;
  border:1px solid #ffffff ;
  border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px;

  padding-top : 10px;
  padding-bottom : 10px;
  background-color: #999999; /* couleur qd pas d'image de fond '*/
}


/* ========= TITRE ==================== */


div#panelTitre h1
{
  font-size:2em;
  text-shadow: 5px 5px 5px #666;
}

div#panelTitre h2
{
  font-size:1.3em;
  text-shadow: 5px 5px 5px #666;
}

.logo
{
  float:right;
  height:90px;
  alt:" ";
  width:auto;
  margin-right: 10px;
}


/* ========= FOOTER =================== */
p#footer
{
  margin: auto ;
  padding-right: 10px ;
  line-height: 20px ;
  text-align: right ;
  color: #c0c0c0; 
}
#spanfooter
{
  color: #FFF ;
  text-align: left ;
}
.p_eleve_footer
{
  font-weight: bold ;
  font-size:1.2em;
  text-align:left;
}

/* =========== MENU ================ */

div#menu 
{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#menu a
{
  font-size: 1.2em ;
  text-align: center ;
  padding-left: 15px;
  padding-right:  15px;
  color : #0058b0;
  border-right: 2px solid #d6d6d6 ;
}

.info_user_menu
{
  text-align: right ;
  line-height: 5px ;
  color : #999999;
  padding-right:5px;
}



/* ========== les boutons valider ===============  */
.div_button_valider  
{
    text-align:center;
    margin-top: 1em;
    margin-bottom:  1em;
    font-size: 1.2em;
}

.boutonValiderbouton
{
  font-size: 1.2em;
  padding: 5px 15px 5px 15px;/* padding haut , droite, bas, gauche  */
}

/* ========== LOGIN ===============  */
#login_fieldset
{
 text-align: center;
}


/* ========= Resa ===================== */
#resa_do_div
{
  font-size: 1.2em;
}

#div_resa_faites
{
  margin-top: 3em;
  margin-bottom: 1em;
}

#resa_faite_label
{
  text-decoration:underline;
}

.resa_confirmer
{
  color:green;
}

.resa_demander
{
  color:#5778eb;
}

.resa_refus
{
  color:red;
}

.resa_supprimer
{
  color:red;
}

.resa_suppression_demander
{
  color:#FF6600;
}


/* ========= ===================== */

.eleve_main_infos
{
  font-size: 1.2em ;
}
.remarque
{
  text-align: right ;
  color : #999999;
  font-style: italic ;
}

.error
{
  font-size: 1.1em ;
  font-weight: bold ;
  color:#FF0000;
  margin:10px;
}

.message_confirm
{
  font-size: 1.1em ;
  font-weight: bold ;
  color:#008000; 
}

.message_important
{
  font-size: 1.1em ;
  font-weight: bold ;
}

.message_warning
{
  font-size: 1.1em ;
  font-weight: bold ;
  color:#FF0000;
}

.warning
{
  color:#FF0000;	
}

/* :required {    border:2px dotted red;} */


.important_couleur /* date resa */
{
  font-weight: bold ;
  color:black;
}

/* ============= Texte de demande  ===================== */

.demande
{
    font-size: 1.2em;
    color:#008000;
    font-weight: bold ; 
}

 

/* ============= ELEMENTS PARTICULIER AVEC UN ID ===================== */
#solderesto,
#soldecafet,
#soldeproduit
{
  margin-left: 1em;
}

#montant_repas, 
#boursesResteDeductibles,
#creance,
#finDroits
{
  margin-left: 2em;
}

#payeur_name_div { padding: 10px;}
 #payeur_name_label label {padding-top: 0px;}
 #payeur_name { font-size: 1em;   } 

 
 #passoubli { font-size: 0.7em;}

.retrait {
    margin-left: 2em;
}

.info
{
  font-size: 1.1em ;
  font-weight: bold ;
  margin: 10px;
  color:#008000;
}

.debug
{
  font-size: 1.1em ;
  color:#FF0000;
  background: #303035;
}

.testColor{
    color:#DFE1E1;
}

.nota
{
  font-size: 0.9em ;
  font-style: italic ; 	
}


.nota_majsolde
{
  font-size: 0.9em ;
  font-style: italic ; 	

  display: block;
  float: right;
  padding-right: 5px;
  text-align: right;
  letter-spacing: 1px;	
} 

a
{
  color:#8aa;
}

div.contenu h2,
div.contenu h3
{
  padding-left: 5px ; /* décalage à gauche du texte */
  margin-bottom: 1em;
  font-size: 1.3em ;
  color: #0058b0 ;
  border-left: 5px solid #0058b0 ;
  border-bottom: 1px solid #0058b0 ; /* une ligne en dessous du titre */
}


div.contenu a
{
  color: #0058b0 ;
}

div.contenu a:hover
{
  color: #0058b0;
}  

.a_no_link, .a_no_link:link, .a_no_link:visited
{
  color:#5A5E6B;
  text-decoration: none;
}

.imageBoutonSupprimer
{
  display:block;
  border: none;
  background: transparent no-repeat scroll 0 0;
}

/* FORM */

.formulaire
{
  /*width: 770px ;  défini la largeur du cadre principale de la page */
  margin: auto auto ;
  padding: 10 20 10 20;  /* défini la position du contenu */
  /*text-align: left ;*/
  /*border: 1px solid ;/*#ab4;solid ; #ab4 ;*/
  background: #fff ; /* fond blanc */
}


form p
{
  align:center;
}

fieldset
{
  margin-bottom: 5px;
  /*border: #CCC 3px solid;*/
  border: 1px solid;
}
.fieldset_mail
{
  border: #DFE1E1 1px solid ;
}


label
{
  display: block;
  width: 40%;
  float: left;
  padding-right: 1%;
  text-align: right;
  letter-spacing: 1px;
  padding-top: 2px;
}

input
{
  width:auto;
}


input.mail
{
  width:220px;
}

input.wide
{
  width:300px;
}

input.width90
{
  width:90%;
}
input.width100
{
  width:100%;
}

input.auto
{
  width:auto;
}

/* TABLE */

table
{
  margin-top:0px;
  margin-left:30px;
  border-collapse: collapse;
  width:95%;
  font-size: 0.9em  ;
}		

td
{
  padding:2px  10px;
}


th, td
{
  text-align: left;
}


/* ======================================================================================== */
/* ================= @media (min-width: 901) =================================================== *
/* ======================================================================================== */

@media (min-width: 901px) {
  
div#panelTitre
{
  background-image: url(../images/fond_titre.jpg);
}

/* cadre pied de page */
div.footer
{
  background-image: url(../images/footer.jpg);
}
}

/* ======================================================================================== */
/* ================= @media (max-width: 900) =================================================== *
/* ======================================================================================== */

@media (max-width: 900px) {
  
  /* Un message personnalisé */
body:after {
  content: "Nota : Ecran < 900px";
  font-size: 0.5em;
  display: block;
  color: #777;
  text-align: left;
  font-style: italic;
}


body
{
  padding: 0;
  font-size: 1em;
  margin: 0;
  background-color:  #ff6600;
}

p
{
  padding-left: 0em;
}

.conteneur
{
  border-radius: 0 ;
  margin-bottom : 0.2em;
}

  
.contenu
{
  padding: 0 0.1em 0 0.4em; /* padding haut , droite, bas, gauche  */
}

div#panelTitre
{
  margin-bottom : 0em;
  margin-top: 0em;
  border-radius: 0 ;
}
/* ========= TITRE ==================== */

div#panelTitre h1
{
  font-size:1.6em;
  text-shadow: 0;
  color: #44cf1c
}

div#panelTitre h2
{
  font-size:1.2em;
   text-shadow: 0;
   color: #44cf1c
}

/* =========== MENU ================ */

div#menu 
{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 200%; /* pour permettre de cliquer plus facilemment si il y a 2 lignes */
}

label
{
  display: inline; 
  width: auto;
  float: none;
  padding-right: 1%;
  text-align: right;
  letter-spacing: 1px;
  padding-top: 0px;
}

input
{
  line-height: 120%; /* pour faciliter le click */
  font-size: 1.2em;
}

table
{
  margin-left:auto;
  margin-right: auto;
}		

/* =========== TABLE ========================= */
td
{
  padding-top:  0.5em; /* donne un espace entre chaque ligne */
}

#div_resa_faites td
{
  padding-top:  1em; /* espace + important pour la resa pour pouvoir cliquer sur le bouton "supprimer" */
}

/* ============= login ======================== */

#login_p
{
  margin-bottom: 1.6em; /* pour eviter qu'il soit trop prêt de passe */
}

/* DIVERS  */
input.mail
{
  width:auto;
}

/* ============== A CACHER ================== */
.footer,
#menu_aide, 
#lastmaj
{
  display: none;
}

.logo
{
  height: 75px;
  margin-right: 0;
  display: none
}

.hide_mobile
{
  display: none !important;
}

}
/* ======================================================================================== */
/* ================= @media (max-width: 500) =================================================== *
/* ======================================================================================== */

@media (max-width: 500px) {
  
  /* Un message personnalisé */
body:after {
  content: "Nota : Ecran < 500px ";
  font-size: 0.5em;
  color: #777;
  text-align: center;
  font-style: italic;
}

#resa_do_div
{
  font-size: 1em;
}


/* ============== A CACHER ================== */
#nota_login
{
  display: none !important;
}

#login_p
{
  margin-bottom: 0em;
}
  
}