/*---------------------------------------------*
|         projet.css - Eric 2018-05-24         |
|     surcharge et complète les classes de     |
|                  pure-min.css                |
----------------------------------------------*/


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

body, html {
  font-size: 0.9em;
  background-color: white;
}

body.bonjour {
  font-size: 0.9em;
  background-color: #ADC1E3;
}


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

/* Suppression des marches */
.sansmarge {
  margin: 0;
  padding: 0;
}

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

/* texte calé à droite */
.droite {
  text-align: right;
}

/* soulignement */
.u {
  text-decoration: underline;
}

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

/* gras */
.gras {
  font-weight: bold;
}

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

/* contenu en gris */
.gris {
  color: #838383; /*#8C8C8C; /*#ACACAC;*/
}

/* Cnntenu en vert */
.vert {
  color: green;
}

/* contenu sélectionné */
.selection {
  background-color: #FFE7D3; /*yellow;*/
  color: black; /*#656565;*/
}

/* Centrer une image horizontalement dans un bloc */
img.centree {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* centrer un bloc */
#centrer-bloc {
  max-width: 750px ;
  margin-left: auto ;
  margin-right: auto ;  
  padding: 0 5px 0 5px;
  /*margin: 0 auto;*/
}

/* changer le curseur au survol de la balise acronym */

acronym {
  cursor: pointer;
}


/* Page de connexion --------------------------------------------------------*/

#bloc-connexion {
    position:fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 250px;
    margin-top: -200px; /*set to a negative number 1/2 of your height*/
    margin-left: -200px; /*set to a negative number 1/2 of your width*/
    padding-top: 10px;
    border: 1px solid #ccc;
    background-color: white; /*#f3f3f3;*/
    box-shadow: 0 2px 23px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(60,60,60,0.15);
    border-radius: 5px;    
}

#bloc-connexion form {
  padding: 0 15px 0 15px;
}

/* liens */
bloc-connexion a {
  color: #1F8DD6;
  text-decoration: none;
}

bloc-connexion a:hover {
  color: #1F8DD6;
  text-decoration: underline;
}

bloc-connexion a:selected {
  color: #1F8DD6;
  text-decoration: underline;
}

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

/* contenant */
.top-nav {
  position: sticky;
  left: 180px;
  top: 0px;
}

.top-nav-id {
  margin: 0;
  height: 52px;
  background-color: #F8F8F8;
  box-shadow: 5px 0px 20px #888888;
}

#partie-gauche {
  padding-right: 120px;
}

.bloc-top-menu {
  position: relative;
  display: block;
  white-space: nowrap;
  padding-left: 0;
  margin: 0;
}

.top-menu {
  padding: 15px 0 0 0;
  margin-left: -0.8em;
  min-height: 47px;
  text-align: center;
}


ul.top-menu {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  list-style: none;
  display: table;
}

li.top-menu, li.top-menu-selected {
  min-width: 60px;
  text-align: center;
  vertical-align: bottom;
  float: left;
  position: relative;
  display: block;
  padding: 5px 3px 0 3px;
  margin: 0 0 0 0;
  /*font-weight: lighter;*/
  /*font-size: smaller;*/
  border-right: 1px solid #D6D6D6; /*#819CAF;*/
}

li.top-menu a, li.top-menu-selected a {
  text-decoration: none;
  color: #546B92; /*#819CAF; /*#8DAABF; /*#1A8ABE;  */
}

li.top-menu a:hover, li.top-menu-selected a:hover {
  text-decoration: none;
  color: #1F8DD9; /*#8DAABF; /*#1A8ABE;  */
}

.login-block {
  position: absolute;
  padding-top: 5px;
  padding-right: 20px;
  text-align: right;
  right: 0;
  top: 0;
  font-weight: bold;
  max-width: 130px;
}

.login-block-user {
  display: inline-block;
  font-size: smaller;
  color: #425977;
  padding-top: 3px;
  min-width: 120px;  
}

.login-block-icones {
  display: inline-block;
  padding-top: 3px;
  clear: both;
}

/* icone de déconnection */
.fa-power-off {
  color: #CE383D; /*#819CAF; /*red;*/
}


.top-nav .pure-g .pure-u-1 .pure-u-md-1-2 {
  margin: 0;
  padding: 0;
}


.top-gauche {
  float: left;
}

.top-droite {
  float: right;
  background-color: grey;
  height: 35px;
}


/* menu de gauche -----------------------------------------------------------*/
.pure-menu {
  padding: 0;
}


/* En-tête de page ----------------------------------------------------------*/



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

.content {
  margin: 0 auto;
  padding: 0 2em;
  margin-bottom: 50px ;
  line-height: 1.2em;
  color: black; 
}

/* 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;
}


/* Titre de la page */

.content-subhead {
  margin: 20px 0 15px 0; 
  padding: 2px 0 3px 0px;
  font-weight: 300;
  color: #888;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.content h2 {
  color: #1F8DD9; /*#1FBF13;*/
  font-size: 1.3em;
}

.content h3 {
  color: #1FBF13; /*#1FBF13;*/
  font-size: 1.1em;
}



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

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

/* Pagination ---------------------------------------------------------------*/

.pagination {
  text-align: right;
}

/*
.paginate {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .7em;
}
*/

a.paginate {
	border: 1px solid #546B92; /*#000080;*/
	padding: 2px 6px 2px 6px;
	text-decoration: none;
	color: #546B92; /*#000080;*/
}

a.paginate:hover {
	background-color: #208DD9; /*#000080;*/
	color: white; /*#FFF;*/
	text-decoration: none; /*underline;*/
}

a.current {
	border: 1px solid #000080;
	font: bold; /* .7em Arial,Helvetica,sans-serif;*/
	padding: 2px 6px 2px 6px;
	cursor: default;
	background: #546B92; /*#000080;*/
	color: white; /*#FFF;*/
	text-decoration: none;
}



/* Tables -------------------------------------------------------------------*/

.pure-table th, td {
  margin: 0;
}

.pure-table th {
  border: none;
  padding: .5em .5em;
  text-align: left;
  border-top: 1px solid #CACACA; /*#637799;*/
  border-bottom: 1px solid #C5C5C5;
  background: #E3E3E3;
}

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

/* affichage couleurs de fond alternées dans les tables */

/* Couleur de base */
.pure-table tr:nth-child(odd){ 
  background: #F3F9FD; /*#F8FBFD; /*#EEFFED; /*#EAFFE9;*/
}
/* Couleur alternative */
.pure-table tr:nth-child(even){
  background: white; /*#dae5f4;*/
}

.pure-table a {
  text-decoration: none;
  color: #546B92;
}

.pure-table a:hover {
  text-decoration: none;
  color: #1F8DD9;
}




/* Pied de page -------------------------------------------------------------*/

.footer {
  font-size: 87.5%;
  margin-top: 3.4286em;
  padding: 1.em; 
}

.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;*/
}

.copyright p {
  padding: 3px;
  text-align: center;
  background: #F8F8F8; /*#E1E1E1;; /*#F4F4F4; /*#FAFAFA; /*#F5F5F5;*/
  color: #1F8DD6;
  border-top: 1px solid #D6D6D6;
}

/* Formulaires --------------------------------------------------------------*/

#centrer-formulaire {
  margin: 0 auto;
  width: 650px;
}

label {
  color: #1A76B7;
}

/* fond bleu ciel */
.fond-ciel {
  margin-top: 10px;
  padding: 1px 10px 10px 10px;
  background-color: #F3F9FD; /*#FBFBFB;*/
  border: 1px solid #1F8DD9; /*#546B92; /*#999999; /*#D9D9D9;*/
  border-radius: 4px;
}



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


/* Formulaire horizontal au dessus d'une table */
.formulaire-horizontal {
  padding: 10px;
  background: #E3E3E3; /*yellow;*/
  border-top: 1px solid #878787; /*black;*/
}

/* couleur de fond du champ ayant le focus */
input:focus {
    background-color: #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 #5CBDDB; /*#CACACA;*/
}

/* Boutons ------------------------------------------------------------------*/

.pure-button-primary,
.bouton-cherche-adresse,
.bouton-liste-adresses,
.bouton-ajout,
.bouton-annule,
.bouton-module,
.bouton-admin,
.bouton-login,
.bouton-logout,
.bouton-export {
  color: white;
  border-radius: 4px;
}

.pure-button-primary {
  background: #637799;
}

.supprime {
  background: #EC4700;
  color: white;
  margin-left: 5px;
}


/*.pure-button-primary:over {
  background: #1F8DD9;
}*/

.bouton-ajout {
  background: #22C017;
}

.bouton-annule {
  background: #E6E6E6;
  color: #637799;
}


.bouton-cherche-adresse {
  margin-top: 15px;
  background: #1CB841;
}

.bouton-liste-adresses {
  margin-top: 15px;
  background: #42B8DD;
}

.bouton-login {
  background-color: #1CB841;
}

.bouton-module {
  background-color: #5EB95E;
}

.bouton-admin {
  background-color: #746F6F; /*#1F8DD6;*/
}


.bouton-logout,
.bouton-logout a
 {
  background-color: #DD514C;
}

.bouton-export {
  background-color: #768DB4;
}


/* Media query (adaptation en fonction taille écran) ------------------------*/

@media only screen and (max-width: 930px) {
  .content {
    padding: 0 1em; /* 5px;*/
  }
  label span {
    font-size: 14px;
  }
  label .fa {
    font-size: 16px;
  }
  .header h1 {
    font-size: 2.4em;
  }
  .header h2 {
    font-size: 1.4em;
  }
  
  #centrer-formulaire {
    margin: 0 auto;
    padding: 0 5px 0 5px;
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  
  .top-nav {
    position: relative;
    width: 100%;
    left: 0;    
  }
  
  .top-nav h1 {
    font-size: 1.5em;
    padding-left: 40px;
  }

  label span {
    display: none;
  }
  label .fa {
    font-size: 14px;
  }
  .tab_container {
    width: 98%;
  }
  .header h1 {
    font-size: 1.6em;
  }
  
  #centrer-formulaire {
    margin: 0 auto;
    padding: 0 10px 0 5px;
    width: 100%;
  }
  
}

@media only screen and (max-width: 500px) {

 .top-nav {
    position: relative;
    width: 100%;
    left: 0;
  }

  .top-nav h1 {
    line-height: 90%;
  }

  .pure-table th,
  .pure-table td {
    margin: 0;
    padding: 5px 3px 5px 3px;
  }

  .content {
    padding: 0 3px; /* 5px;*/
  }
  
  #centrer-formulaire {
    margin: 0 auto;
    padding: 0 10px 0 5px;
    width: 100%;
  }
  
}