/*---------------------------------------------*
|                   sietom.css                 |
|    Eric (Gesbac Environnement) 2019-06-05    |
|     surcharge ou complète les classes de     |
|                  pure-min.css                |
----------------------------------------------*/


/* Général :
--------------------------------------------------------*/

/* fontes SIETOM */
body, html, h1, h2, h3, p {
  font-family: Roboto, Helvetica, Arial, Lucida, sans-serif; 
}


.pure-img-responsive {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Centrer une image horizontalement */
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Ombre portée autour d'une image */
.ombrage {
  -moz-box-shadow: 3px 3px 4px #8D8D8D;
  -webkit-box-shadow: 3px 4px 3px #8D8D8D;
  box-shadow: 3px 3px 4px #8D8D8D; 
}

/* texte centré */
.centrage {
  text-align: center;
}

/* italique */
.italique {
  font-style: italic;
}


/* contenu en rouge */
.rouge {
  color: red;
}

/* Contenu en vert */
.vert {
  color: #01994D;
}

/* contenu en orange */
.orange {
  color: #ED5B00;
}

/* Avertissement javascript */
#alerte-js{
  margin: 0; 
  padding: 10px;
  text-align: center;
  background-color: #F4F4F4;
  color: red;
  /*border-bottom: 1px solid red;*/
}

#alerte-js p {
  margin: 0;
  padding: 0;
}

/* Affichage conditionnel (formulaire bacs) */
/*
#session-pas-ok {
  display: none;
}

#session2-pas-ok {
  display: none;
}
*/


/* Contenu 
--------------------------------------------------------*/


/* bloc avec contenu calé à droite */

.a-droite {
  float: right;
}


.content {
  margin: 0 auto;
  padding: 0 2em;
  max-width: 90%; /*800px;*/
  margin-bottom: 50px ;
  line-height: 1.4em;
  color: #666666; /*#848484; /*#646464; /*#757575;*/
}

.content-espace-haut {
  margin-bottom: 2em;
}

.content-subhead {
  margin: 0px 0 20px 0;
  padding: 3px 0 3px 0;
  text-align: center;
  font-weight: 100;
  color: #888;
  background-color: #D4FFA0;
}

/* paragraphe d'introduction */
.intro {
  margin-top: 0;
}

.content h2 {
  color: #6F6F6F;
  font-size: 1.2em;
}

.content h3 {
  color: #666666;
  font-size: 1.1em;
}

/*
.content h4 {
  margin: 0;
  padding: 0px 0 5px 0;
  font-weight: 100;
  font-size: 100%;
  font-style: italic;
  text-align: center;
  color: #7C6F6F;
}
*/

.content a {
  color: #1F8DD6;
  text-decoration: none;
}

.content a:hover {
  text-decoration: underline;
}

.content ul {
  padding-left: 1.5em;
}

.content li {
  list-style-type: none;
}

/* paragraphe de confirmation */
.confirmation {
  text-align: center;
  font-weight: bold;
  color: #88B135;/*#1F8DD9;*/
}

/* texte en italique */
p.italique {
  font-style: italic;
}


/* Couleur des icones :
--------------------------------------------------------*/
.fa-pencil-square {
   margin-right: 0.5em;
}

/* conteneur "responsive" */
.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
}

/* appliquer aux différents contenus embarqués */
.embed-container iframe, .embed-container object, .embed-container embed  {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

/* En-tête de page :
--------------------------------------------------------*/
.header {
  margin: 0;
  color: #333;
  padding: 0.5em 0em 0.5em 0;
  /*background-image:url(../../Images/Logo-sietom-200_v2.png);
  background-repeat:no-repeat;
  background-position:100% 0%;*/
  /*background: #F3F3F3;*/
  text-align: left;
  /*border-bottom: 1px solid #E5E5E5; /*#757575; /*#E5E5E5; /*#1f8dd6;*/
}

.header h1 {
  margin: 0.7em 0 0.5em 0;
  font-size: 2em;
  font-weight: 300;
  /*text-align: center;*/
  color: #333333; /*#0697D6; /*#037FB5; /*#3366FD; /*#757575; /*#646464;*/
}

.header h2 {
  font-weight: 300;
  font-size: 1.8em;
  color: #6F6F6F; /*#0697D6; /*#88B135; /*#5DB127; /*#1f8dd6;*/
  padding: 0 0 0 0em;
  margin: 0 0 0 0;
  /*text-align: center;*/
}


/* Menu horizontal :
--------------------------------------------------------*/

.custom-wrapper {
    background-color: white; /*yellow; /*#ffd390;*/
    margin-bottom: 1em;
    -webkit-font-smoothing: antialiased;
    height: 2.1em;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    transition: height 0.5s;
    border-bottom: 1px solid #E5E5E5; /*red;*/
}

.custom-wrapper.open {
    height: 14em;
}

.custom-menu-3 {
    text-align: right;
}

.custom-toggle {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.custom-toggle .bar {
    background-color: #777;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 100px;
    position: absolute;
    top: 18px;
    right: 7px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

.custom-toggle .bar:first-child {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}

.custom-toggle.x .bar {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


/* Formulaire
--------------------------------------------------------*/

/* champ affichage propositions dotation */
.commentaire {
  text-align: center;
  background-color: #FBFBFB;
  border: 1px solid #AAAAAA;
  margin: 10px 10px 0 0;
  min-height: 20px;
  padding: 10px;
}


/* Messages d'erreur */
.error {
  color: red;
  font-weight: normal;
  font-style: italic;
  /*font-size: smaller;*/
  background: transparent url(../images/dialog-warning.png) top left no-repeat;
  padding-left: 22px;
  margin-left: 5px;
}

/* champs requis */
.required {
  color: red;
}

/* centrage contenu formulaire */
.centrer-formulaire {
    margin: 0 auto;
    width: 700px;
}

/* fond gris*/
.fond-gris {
  margin-top: 10px;
  padding: 1px 10px 10px 10px;
  background-color: #EBECEE; /*#F6F6F6;*/
  border: 2px solid #D9D9D9;
  border-radius: 8px;
}

.fond-gris h3 {
  background-color: white;
  color: #0697D6;
  font-size: 18px;
  padding: 3px;
}

.fond-gris h4 {
  margin: 0;
  padding: 0px 0 5px 0;
  font-weight: 100;
  font-size: 110%;
  font-style: italic;
  color: #126E50;
}

.fond-jaune {
  margin-top: 10px;
  padding: 1px 10px 10px 10px;
  background-color: #ffe9b3;
  border: 2px solid #D9D9D9;  
  border-radius: 8px;
}

.button-small {
  font-size: 85%;
}

/* commentaire associé à un champ du formulaire */
.hint {
  font-size: 80%;
  display: block;
  padding-bottom: 5px;
  font-style: italic;
  line-height: 16px;
}

/* couleur de fond du champ ayant le focus */
input:focus {
  background-color: #FFFAE8; /*#FFF9E2;*/
}

/* surcharge pure css */
.pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
.pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"],
.pure-form select,
.pure-form textarea {
    box-shadow: none;
    border-radius: 4px; /*4px;*/
    border: 1px solid #C0C0C0; /*#CACACA;*/
}

.pure-form legend {
  font-weight: bold;
  font-size: 1.2em;
  color: #0697D6;
}

.pure-form label {
  color: #126E50; /*#00A653; /*#2F893D; /*black;*/
  margin-bottom: 0;
}


/* Aligned Forms */
.pure-control-group {
    margin-top: 0.8em;
}

.pure-control-group label {
  /*color: #6E6E6E; /*#5C5C5C;*/
  font-weight: 600;
  /*color: #414141;*/
}

.pure-button {
  border-radius: 5px;
}

.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected  {
  background-color: #0697D6; /*#037FB5; /*#0078e7;*/
  color: #fff;
}

.pure-button-precedent {
  background-color: #B6CD2E;  
  color: white;
}


/* On cache des div par défaut, on les affichera avec javascript */
#bacs-verts, #bacs-jaunes {
  display: none;
}



/* tableaux (surcharge pure-min.css
--------------------------------------------------------*/

.pure-table {
  margin: 0 auto; 
  font-size: 90%;
}

.pure-table td {
  border: 1px solid #BEBEBE; /*#cbcbcb;*/
  /*padding: 5px 8px 5px 8px;*/
}

.pure-table th {
  background: #F3F3F3; /*#F0F0F0;*/
  /*font-weight: 100;*/
  color: #686868;
  /*padding: 5px 8px 5px 8px;*/
}

/* tableau (surcharge pour tableau en-tête
-----------------------------------------------------------------------------*/

.table-haut tr {
  border: none;
}


.table-haut th {
  border: none;
  /*color: #46B44F;*/
}

.table-haut td {
  border: none;
}

/* Surcharge jquery ui
-----------------------------------------------------------------------------*/

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {

  z-index: 100;
 
}




/* Pied de page
--------------------------------------------------------*/
.footer {
  /*background: #F3F3F3 none repeat; scroll 0 0;*/
  /*border-top: 1px solid #E5E5E5;; /*#757575; /*#E5E5E5; /*#1f8dd6; /*#eee;*/
  font-size: 87.5%;
  margin-top: 3.4286em;
  padding: 1.em; /*1.1429em;*/
  /*opacity: 0.80;*/
}

.footer-blocs {
  padding: 0 1em;
}

.footer h3 {
  margin-left: 0.9em; /*3.9em; /*2.5em;*/
  margin-bottom: 0;
  color: #1F8DD6;
}

.footer ul {
  padding-left: 1em; /*4.5em;*/
}

.legal {
  text-align: center;
  font-size: smaller;
}

.copyright {
  text-align: center;
  background: #F4F4F4; /*#FAFAFA; /*#F5F5F5;*/
  color: #1F8DD6;
}


/* Modifications en fonction de la largeur d'affichage */
@media (max-width: 47.999em) {

  .custom-menu-3 {
      text-align: left;
  }
  .custom-toggle {
      display: block;
  }
  
  .header {
    display: none;
  }
  
  .pure-form .pure-input-2-3 {
    width: 100%;
  }

  .centrer-formulaire {
      margin: 0 auto;
      width: 100%;
  }

}