/**
Import du fichier pour les navigateurs qui n'implémentent pas html5
**/
@IMPORT url("html5.css");
@IMPORT url("menu.css");
@IMPORT url("form.css");
/**
Trame
**/
html {
	color: black;
}

body {
	-webkit-font-smoothing: antialiased;
	font: 13px "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
	background: #fff url(../images/fond.png) left top repeat-x fixed;
}

iframe {
	border: 1px solid #bfbfbf;
	padding: 1px;
}

/**
Mise en page
**/
b, strong {
    font-weight: bold;
}

/**
Lien
**/
a{
	color: black;
}
a img{
	border: 0;
	text-decoration: none;
	margin-right: 5px;
}


main > h2{
	background-color : #f8f8f8;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#F1F1F1));
	background: -moz-linear-gradient(top,  #f8f8f8,  #F1F1F1);
	border-bottom : #ccc 1px solid;
    padding: 6px;
    text-align: center;
    text-transform: uppercase;
    -moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
	border-radius: 8px;
}

#dialog{
	margin-top: 65px;
}

/**
Elément caché qui indique un chargement
**/
#chargement{
	display: none;
	background: url("../images/chargement.png") no-repeat scroll left top rgba(0, 0, 0, 0);
	position: fixed;
	top: 60px;
	z-index: 1000;
	padding: 15px;
	border: 1px solid #dddddd;
	border-radius: 8px;
	background-color: #FFFFCC;
}

#contenu{
	box-shadow: 2px 2px 6px #979797;
	border-radius: 8px;
	padding: 5px;
	margin: 10px;
}
/**
Contenu principal
**/
main{
	
}

/**
Le pied de page
**/
footer {
	background-image: url("../images/footer.png");
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 10)), url("../images/footer.png");
    background-repeat: repeat-x, repeat;
    border-top: 1px solid #7ACEF4;
    border-radius: 8px;
    padding: 5px;
    width: 100%;
    overflow: auto;
    text-align: left;
    vertical-align: bottom;
    margin-top: 10px;
    color: #FFFFFF;
}


footer a, footer strong, footer b {
    color: #FFFFFF;
    text-decoration: none;
}

section  div{
	padding-left: 5px;
}



/**
Présentation en table
*/
.table{
	display: table;
	height: 100%;
	border-spacing: 5px;
}

.table .colonne{
	/*Pour IE*/
	display: table-cell;
	vertical-align: top;
    text-align: left;
    margin: 5px;
    width: auto;
}
/**
**/
.colonne section{
	margin:0px;
}

/**
Permet d'indiquer qu'une colonne doit faire au moins 75% du contenu
**/
.table .contrainte_25{
	min-width: 25%;
	width: 25%;
}

.table .ligne{
	display: table-row;
}

/**
Permet de réaliser des cadres en combinant avec les balises h.. pour 
découper.
**/
.cadre{
	border: 0px;
	padding: 5px;
	border: 1px solid #dddddd;
	border-radius: 8px;
	background-color: #FBFBFB !important;
	vertical-align: top;
	margin: 5px;
}

.cadre h3{
	background-color : #ebebeb;
	background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#F8F8F8));
	background: -moz-linear-gradient(top,  #ebebeb,  #F8F8F8);
	border-bottom : #ccc 1px solid;
    padding: 6px;
    text-align: left;
    text-transform: uppercase;
    -moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
	border-radius: 8px;
}
.cadre h4{
	/*background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#dadada), to(#ebebeb));
	background: -moz-linear-gradient(top,  #dadada,  #ebebeb);*/
	border-bottom : #ccc 1px solid;
	margin: 5px;
    padding: 6px;
}

.cadre p{
	margin-left: 5px;
}


/**
Permet de rendre invisible un élément(sans perturber la mise en page)
**/
.invisible{
	position: fixed;
	left: -1000px;
}

/**
Met le texte à gauche
**/
.gauche{
	text-align: left;
}


/**
Permet de mettre une ligne pour séparer visuellement les listes
**/
ul.separateur > li:FIRST-CHILD{
	 border: 0px;
	}
	
ul.separateur >li{
	 padding-top: 5px;
	 border-top: 1px solid #CDCDCD;
}

/**
Permet de créer une barre de boutons
**/
.boutons{
	margin-bottom:  auto auto 10px auto;
	text-align: center;
}
/**
Boutons
**/
.bouton {
	 background-color:  #F1F1F1;
	font-weight: bold;
	cursor: pointer;
	padding: 5px;
	margin: 5px;
	border-radius: 6px;
	transition: all 0.218s ease 0s;
    background-image: linear-gradient(to right, #CDCDCD, #F1F1F1);
    text-decoration: none;
    border: 1px solid #CDCDCD;
    display: inline-block;
}

/**
Boutons desactive
**/
.desactive {
	 opacity:0.5;
}
/**
Fixe la taille du bouton pour qu'il soit tous de la même taille
**/
.boutons .taille{
	display: block;
    width:80%;
}
/**
Dessine une ombre sur le passage d'un bouton
**/
.bouton:hover {
	background-color: #CDCDCD;
    background-image: linear-gradient(to right,#F1F1F1 , #CDCDCD);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    color: #222222;
}
/**
Permet de mettre les boutons à la ligne
*/
.boutons .separateur{
	margin-bottom: 15px;
}


/**
Bouton image
**/
/**
Permet de mettre une image loupe sur un élément
**/
.filtreActif{
	padding-left: 22px;
	background: url("../images/filtreActif.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Permet de mettre une image loupe sur un élément
**/
.filtreInactif{
	padding-left: 22px;
	background: url("../images/filtreInactif.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
/**
Bouton ajouter
**/
.ajouter{
	padding-left: 22px;
	background: url("../images/ajouter.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton prolonger
**/
.prolonger{
	padding-left: 22px;
	background: url("../images/ajouter.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton agent
**/
.agent{
	padding-left: 22px;
	background: url("../images/agents.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton candidat
**/
.candidat{
	padding-left: 22px;
	background: url("../images/candidat.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton academie
**/
.academie{
	padding-left: 22px;
	background: url("../images/academie.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton afficher_nouveau
**/
.afficher_nouveau{
	padding-left: 22px;
	background: url("../images/afficher_nouveau.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton afficher_nouveau
**/
.carte{
	padding-left: 22px;
	background: url("../images/carte.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton convoquer
**/
.convoquer{
	padding-left: 22px;
	background: url("../images/entretien.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton refuser poste
**/
.refuserposte{
	padding-left: 22px;
	background: url("../images/refuserposte.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}


/**
Bouton recruter
**/
.recruter{
	padding-left: 22px;
	background: url("../images/recruter.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton transmettre
**/
.transmettre{
	padding-left: 22px;
	background: url("../images/transmettre.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton convoquer
**/
.refuser{
	padding-left: 22px;
	background: url("../images/refuser.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
/**
Bouton oui
**/
.oui{
	padding-left: 22px;
	background: url("../images/oui.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton non
**/
.non{
	padding-left: 22px;
	background: url("../images/non.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton drapeau
**/
.drapeau{
	padding-left: 22px;
	background: url("../images/drapeau.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton candidature
**/
.candidature{
	padding-left: 22px;
	background: url("../images/candidature.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton modifier
**/
.modifier{
	padding-left: 22px;
	background: url("../images/modifier.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton historique
**/
.historique{
	padding-left: 22px;
	background: url("../images/historique.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
/**
Bouton connexion
**/
.connexion{
	padding-left: 22px;
	background: url("../images/connexion.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
/**
Bouton document
**/
.document{
	padding-left: 22px;
	background: url("../images/document.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton suprimer
**/
.supprimer{
	padding-left: 22px;
	background: url("../images/supprimer.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton afficher
**/
.afficher{
	padding-left: 22px;
	background: url("../images/afficher.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}


/**
Bouton connecter
**/
.connecter{
	padding-left: 22px;
	background: url("../images/connecter.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton profil
**/
.profil{
	padding-left: 22px;
	background: url("../images/profil.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton lier
**/
.lier{
	padding-left: 22px;
	background: url("../images/lier.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton lister
**/
.lister{
	padding-left: 22px;
	background: url("../images/lister.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton retour
**/
.retour{
	padding-left: 22px;
	background: url("../images/retour.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}


/**
Bouton retour
**/
.card{
	padding-left: 22px;
	background: url("../images/vcard.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
/**
Bouton retour
**/
.suivant{
	padding-right: 22px;
	background: url("../images/suivant.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton retour
**/
.precedent{
	padding-left: 22px;
	background: url("../images/precedent.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton discipline
**/
.discipline{
	padding-left: 22px;
	background: url("../images/discipline.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**Bouton excel**/

.xls {
	padding-left: 22px;
	background: url("../images/xls.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**Bouton pdf**/

.pdf {
	padding-left: 22px;
	background: url("../images/pdf.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**Fiche attention**/

.attention {
	padding-left: 22px;
	background: url("../images/attention.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton favorable
**/
.favorable{
	padding-left: 22px;
	background: url("../images/favorable.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton defavorable
**/
.defavorable{
	padding-left: 22px;
	background: url("../images/defavorable.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}


/**
Bouton defavorable
**/
.defavorable{
	padding-left: 22px;
	background: url("../images/defavorable.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}

/**
Bouton piecejointe
**/
.piecejointe{
	padding-left: 22px;
	background: url("../images/piecejointe.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
/**
Information
**/
.information {
	padding-left: 22px;
	background: url("../images/information.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}


.email {
    background-image: url("../images/email.png");
    background-repeat: no-repeat;
    padding-left: 20px;
}


.tel {
    background-image: url("../images/tel.png");
    background-repeat: no-repeat;
    padding-left: 20px;
}

.fax {
    background-image: url("../images/fax.png");
    background-repeat: no-repeat;
    padding-left: 20px;
}

.adr {
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 15px;
}

/**
Conteneur
**/

.textLeft{
	text-align: left;
}
/**
Positionne l'élément à droite(utilisé la classe clearBoth pour forcer le saut de ligne
**/
.floatRight{
	float:right;
}

/**
Positionne l'élément à gauche(utilisé la classe clearBoth pour forcer le saut de ligne
**/
.floatLeft{
	float:left;
}
/**
Force le saut de ligne
**/
.clearBoth{
    clear: both;
    min-height: 5px;
}



/**
Message d'erreur(met le span à la ligne)
**/
.erreur{
    color: #CD0A0A;
    border: 1px solid #CD0A0A;
    border-radius: 6px 6px 6px 6px;
    padding: 2px;
    padding-left: 22px;
    font-weight: bold;
	background: url("../images/attention.png") no-repeat scroll left top #FEF1EC;
}

/**
Afficher un message
**/
.aide {
 	border-color: #0080c0;
	border-style: solid;
	border-width: 1px;
	border-radius: 8px;
	background-color: #cce6ff;
	padding: 10px;
	margin: 5px;
	overflow: auto;
}

/**
Afficher un message
**/
.message {
	border-color: #FED22F;
	border-style: solid;
	border-width: 1px;
	border-radius: 8px;
	background-color: #FBF9EE;
	padding: 10px;
	margin: 5px;
	overflow: auto;
}
/**
Affichage des labels
**/
.label{
	font-weight: bold;
}

.gras{
	font-weight: bold;
}





/**
Rend le cadre flottant avec une lat ta
**/
.flottant{
	width: 45%;
	display: inline;
	vertical-align: top;
	float: left;
}



/**
Mise en page des tableaux
**/

/*
Table Style - This is what you want
------------------------------------------------------------------ */

.tableau  {
	background:#eaebec;
	margin-left: auto;
  	margin-right: auto;
	box-shadow: 0 1px 2px #d1d1d1;
	border-collapse: collapse;
}

.tableau caption{
	background:#eaebec;
	padding : 5px;
	box-shadow: 0 1px 2px #d1d1d1;
	border-collapse: collapse;
	font-weight: bold;
}

.tableau a:link {
}

.tableau th a:visited {
}

.tableau  a:visited {
	color: #999999;
}
.tableau  a:active,
.tableau  a:hover {
	color: #bd5a35;
}

.tableau  tr {
	text-align: center;
	padding-left:20px;
}

.tableau tr	{
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
.tableau tr:nth-child(even)		{ 
	background: #f8f8f8;
	background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f8f8f8));
	background: -moz-linear-gradient(top,  #fafafa,  #f8f8f8);
}

.tableau  tr:hover  {
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
	background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);	
}


.tableau  th {
	padding:10px;
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
	background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
.tableau  th:first-child {
	text-align: left;
	padding-left:20px;
}

.tableau  th:last-child {
}

.tableau  td {
	padding: 5px;
	border:1px solid #e0e0e0;
}

.tableau  td:first-child {
	text-align: left;
}

.tableau  tr:hover td{
	/*border-top-color: #48b9ef;
	border-bottom-color: #48b9ef;*/
}

.tableau  tr:hover td:first-child  {
	border-left-color: #48b9ef;
}

.tableau  tr:hover td:last-child  {
	border-right-color: #48b9ef;
}

.tableau td ul{
	text-align: left;
}

.tableau td li{
	margin-top: 5px;
}

.tableau tfoot td {
	padding:10px;
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
	background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
/**
Pagination
**/
.pagination {
	color:#48b9ef;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align:center;
}

.pagination a {
	color:#48b9ef;
	padding:2px 5px;
	margin:0 2px;
	text-decoration:none;
	border:2px solid #f0f0f0;
}

.pagination a:hover, .pagination a:active {
	border:2px solid #ff5a00;
	color:#ff5a00;
}

.pagination span.current {
	padding:2px 5px;
	border:2px solid #ff5a00;
	color:#fff;
	font-weight:bold;
	background-color:#ff6c16;
}
.pagination span.disabled {
	display:none;
}

/**
Jquery colour picker

**/

#jquery-colour-picker {
	background: #fafafa;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));

	width: 180px;
	padding: 10px 5px 5px 10px;

	border: 1px solid #666;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

	z-index: 99;
}

#jquery-colour-picker h2 {
	margin: 0 0 5px 0;
	font-size: 14px;
}

#jquery-colour-picker ul {
	margin: 0;
	padding: 0;
	list-style-type: none;

	+zoom: 1;
}

#jquery-colour-picker ul:after {
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}

#jquery-colour-picker ul li {
	float: left;
	margin: 0 5px 5px 0;
}

#jquery-colour-picker ul li a {
	display: block;

	width: 13px;
	height: 13px;

	text-decoration: none;
	text-indent: -100000px;
	outline: 0;

	border: 1px solid #aaa;
}

#jquery-colour-picker ul li a:hover {
	border-color: #000;
}

/**
BreadCrumbs : Permet d'afficher des étapes

http://red-team-design.com/css3-breadcrumbs/
**/

ul{
  margin: 5px;
  padding: 0;
  list-style: none;
}

.liste {
	list-style-image: url("../images/puce.png");
	padding: 5px;
}

ol{
	padding: 5px;
	margin-left : 10px;
	list-style: decimal;
	list-style-type: decimal;
}

#breadcrumbs-one{
	margin: 0px;
  background: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-one li{
  float: left;
}

#breadcrumbs-one a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

#breadcrumbs-one li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-one a:hover{
  background: #fff;
}

#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#breadcrumbs-one a::after{ 
  z-index: 2;
  border-left-color: #ddd;  
}

#breadcrumbs-one a::before{
  border-left-color: #ccc;  
  right: -1.1em;
  z-index: 1; 
}

#breadcrumbs-one a:hover::after{
  border-left-color: #fff;
}

#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
  font-weight: bold;
  color: #CC3300;
  background-color: #fff;
}

#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
  /*content: normal; */ 
}


/**
Personnalisation en fonction de la taille du média
**/

/**
Desktop
**/
@media only screen and (min-width: 800px) {
	
	.table .colonne{
	}
}

@media all and (max-width: 500px){
	html {
 filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);
}
}


/**
Petits �crans
**/
/*@media only screen and (max-width: 800px)  and(-webkit-min-device-pixel-ratio:0) {*/
@media all and (max-width: 768px), 
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), 
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), 
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), 
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), 
only screen and (min-resolution: 192dpi) and (max-width: 1024px), 
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	
	
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul,
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu > ul,
  #cssmenu.align-center > ul,
  #cssmenu > ul > li > ul,
  #cssmenu > ul > li:hover > ul,
  #cssmenu ul ul li:hover > ul,
  #cssmenu ul ul ul li:hover > ul,
  #cssmenu.align-right ul ul,
  #cssmenu.align-right ul ul li:hover > ul,
  #cssmenu.align-right ul ul ul li:hover > ul {
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    display: none;
    padding: 0;
    opacity: 1;
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu > ul > li > a,
  #cssmenu ul ul li a,
  #cssmenu ul ul li:first-child > a,
  #cssmenu ul ul li:last-child > a {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  #cssmenu ul li a {
    padding-left: 12.5px;
  }
  #cssmenu ul ul li a {
    padding: 14px 15px 14px 17.5px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 42.5px;
  }
  #cssmenu ul ul ul ul li a {
    padding-left: 57.5px;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul li.has-sub > a:after,
  #cssmenu ul ul li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    position: relative;
    display: block;
    padding: 10px;
    padding-left: 12.5px;
    cursor: pointer;
    font-size: 13px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #cssmenu .submenu-button {
    position: absolute;
    right: 0;
    display: block;
    width: 53px;
    height: 34px;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    z-index: 10;
    cursor: pointer;
  }
  #cssmenu ul ul .submenu-button {
    height: 41px;
  }
  #cssmenu ul .submenu-button:after,
  #cssmenu #menu-button:after {
    content: '';
    position: absolute;
    right: 12.5px;
    top: 2.5px;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: #f5f8fa;
    
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
    background-size: 56px 56px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
  }
  #cssmenu ul .submenu-button.submenu-opened:after,
  #cssmenu #menu-button.menu-opened:after {
    background-position: 0 -28px;
  }
  #cssmenu ul ul .submenu-button:after {
    top: 6.5px;
  }
  #cssmenu #menu-button:before,
  #cssmenu .submenu-button:before {
    content: '';
    position: absolute;
    right: 22.5px;
    top: 15.5px;
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: black;
    z-index: 99;
  }
  #cssmenu ul ul .submenu-button:before {
    top: 9.5px;
  }
  #cssmenu #menu-button.menu-opened:before,
  #cssmenu .submenu-button.submenu-opened:before {
    border-top-color: #19799f;
  }
	
	.pagination{
		
	}
	.pagination a {
		margin: 5px;
		font-size: 25px;
		border-radius : 5px;
	}
	
	.pagination span.current {
		margin: 5px;
		font-size: 25px;
		border-radius : 5px;
	}
	
	.table{
	display: inline;
	}
	.table .colonne{
	display: inherit;
	}
	
	
	
	.tableau{
	width: 100%;
	margin: auto;
	}
	/* Force table to not be like tables anymore */
	.tableau thead, 
	.tableau tbody,
	.tableau th, 
	.tableau tbody td, 
	.tableau tbody tr { 
		display: block; 
	}
	
	/* Force table to not be like tables anymore */
	.tableau tfoot
	{ 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.tableau thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.tableau  tbody tr { border: 1px solid #ccc; }
 
	.tableau  tbody td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
	
	.tableau  tbody td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 25%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 	
 	/*
	Label the data
	*/
	.tableau  tbody td:after { 
	content: " ";
	}
	
	/*
	Label the data
	*/
	.tableau  tbody td:before { 
	content: attr(data-title);
	border-right:2px solid #f0f0f0;
	background-color: white;
	}
	
}
	
}