/* Couleurs utilisées 		*/
/* Gris très clair	#eee 	*/
/* Gris clair		#ddd 	*/
/* Gris 			#ccc	*/
/* Gris souris		#999	*/
/* Gris 			#777	*/
/* Gris anthracite	#424242 */
/* Gris très foncé	#222	*/

/* RESET CSS */
body,div,input,button,textarea,select,option,datalist,img,a{margin: 0; padding: 0; border: 0 none; vertical-align: middle; background: transparent;}
body{background-color: #424242; font-family: "Arial"; font-size: 14px; color: black; cursor:default; overflow-x: hidden;}
table{margin: 0 auto; border-collapse: collapse;}
td,th{padding-left: 5px; padding-right: 5px; border: 1px solid black;}
th{text-align: center; background-color: #ddd;}

/* Personnalisation des composants */
input{height: 23px; border: 1px solid #424242; font: inherit; color: inherit; background: white; padding-left: 5px; cursor: pointer;}
select{height: 25px; border: 1px solid #424242; font: inherit; color: inherit; background: white; padding-left: 2px; cursor: pointer;}
option{padding-left: 5px;}
button{height: 25px; border: 1px solid #424242; font: inherit; color: inherit; background-color: white; text-align: center; cursor: pointer;}
textarea{font: inherit; border: 1px solid black; padding: 2px 5px; color: inherit; background-color: white; overflow: hidden; resize: vertical; white-space: pre-line; text-align: justify; text-align-last: left;}
input:hover, select:hover, button:hover, textarea:hover{border: 1px solid white;}
.button{height: 28px; line-height: 28px; text-align: center; cursor: pointer;}
.styleButton{border-radius: 5px; color: white; background: linear-gradient(#424242, #222); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.4);}
.styleButton:hover{color: #ddd; background: linear-gradient( #ddd, #222);}
.styleButton:active{position:relative; top: 1px;}

.inputText{float: left; margin: 4px; font-size: 14px;} /* Composant input texte avec label */
.inputText label{display: block;} /* mettre le label au dessus de l'input */

.composantInput{float: left; margin: 4px; font-size: 14px;}
.labelBlock label{display: block;} /* mettre le label au dessus de l'input */
.labelInLine label{float: left; margin: 4px 5px 0 0; height: 100%; text-align: right;} /* mettre le label avant l'input */

/* Images */
/*.iconesLogout{width: 40px; height: 40px; background-image: url("../img/iconesLogout40.png"); cursor: pointer;}*/
.iconesLogout{width: 36px; height: 36px; background-image: url("../img/iconesLogout36.png"); cursor: pointer;}
.iconeLogout{background-position: 0 top;}
.iconeLogout:hover{background-position: -36px top;}
.iconesFooter{width: 30px; height: 30px; background-image: url("../img/iconesFooter.png"); cursor: pointer;}
.iconeFirefox{background-position: 0 top;}
.iconeHTML5{background-position: -30px top;}
.iconeCSS3{background-position: -60px top;}
.iconesDrapeaux15{width: 22px; height: 15px; border-radius: 2px; border:1px solid #424242; background-image: url("../img/drapeaux20x30.png"); background-size: 5100% 15px;}
.iconesDrapeaux20{width: 30px; height: 20px; border-radius: 2px; border:1px solid #424242; background-image: url("../img/drapeaux20x30.png");}
.iconesOutils{width: 20px; height: 20px; background-image: url("../img/iconesOutils.png"); cursor: pointer}
.iconeLoupe{background-position: 0 top;}
.iconeModifier{background-position: -20px top;}
.iconeFacebook{background-position: -40px top;}
.iconeWiki{background-position: -60px top;}
.iconeSiteWeb{background-position: -80px top;}
.iconeCroix{width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 11px; font-weight: bold; color: white; border: 2px solid white; border-radius: 50%; cursor: pointer;}
.iconeTriangle{font-size: 20px; color: white; cursor: pointer;}
.iconeGrandTriangle{font-size: 24px; color: white; text-decoration:none; cursor: pointer;}
.iconeLoading{width: 200px; height: 200px; background-image: url("../img/loading.png"); animation:spin 2s linear infinite;}
@keyframes spin {100% {transform:rotate(360deg);}}

/* Header */
#header{position: fixed; width: 100%; background-color: #424242; z-index: 999;}
.headerContenu{width: 1200px; height: 60px; margin: 0 auto;}
.headerContenu #logo{float:left; margin: 5px 0 0 5px;}
.headerContenu #titre{float:left; width: 170px; height: 50px; margin: 5px 0 0 5px; font-size: 36px; line-height: 50px; color: white;}
.headerContenu .connexion{float:right; width: 120px; margin: 4px 5px 0 0;}
.headerContenu #nomIdentifiant{float: left; width: 120px; margin-top: 0px; height: 20px; line-height: 20px; color: white; text-align: right;}
/*.headerContenu .identifiant{float:left; width: 70px; height: 20px; line-height: 20px; color: white; text-align: center;}*/
.headerContenu #logout{float: right;}

/* Main */
#main{float: left; width: 100%; margin-bottom: 40px; margin-top: 5px;} /* background-color: #ddd; margin-top: 5px; */
.mainContenu{width: 1200px; margin: 0 auto;}
.cadreErreur{float: left; width: 100%; height: 300px; margin-top: 20px; text-align: center; color: #424242; font-size: 40px;}

/* Footer */
#footer{position: fixed; width: 100%; background-color: #424242; z-index: 999; bottom: 0;}
.footerContenu{width: 1200px; height: 40px; margin: 0 auto;}
.footerContenu #imgFirefox{float: left; margin: 5px 0 0 5px;}
.footerContenu #imgHTML5{float: left; margin: 5px 0 0 5px;}
.footerContenu #imgCSS3{float: left; margin: 5px 0 0 5px;}
.footerContenu .copyright{float: left; margin: 12px 0 0 10px; color: white;}
.footerContenu #version{float: left; margin: 12px 0 0 5px; color: white;}
.footerContenu #remonterFleche{float: right; margin: 8px 5px 0 0;}

/* CSS pour les popin */
.popinVoile{position: absolute;  z-index: 1000; background-color: #777; opacity: 0;	transition: opacity, ease-out 0.5s;}
.popinBox{position: absolute; border: 2px solid; border-radius: 10px; z-index: 1001;}
.popinTitre{float: left; height: 25px; margin-top: 5px; color: white; text-align: center; font-size: 20px;}
.popinBoutonFermer{float: left; width: 30px; height: 30px; font-size: 18px; font-weight: bold; text-align: center; line-height: 30px; border: 2px solid; border-radius: 30px; color: white; background-color: #222; cursor: pointer;}
.popinBoutonAction{float: left; width: 100px; margin-top: 20px;}
/* CSS pour la popin de loading */
.popinLoading{position: absolute; z-index: 1001;}

/* CSS pour la popin d'avertissement d'expiration et de fin de session */
.popinSessionMessage1{float: left; clear: both; width: 400px; height: 20px; margin-top: 10px; color: white; text-align: center; font-weight: bold;}
.popinSessionMessage2{float: left; clear: both; width: 400px; height: 20px; color: white; text-align: center; font-weight: bold;}
/* CSS pour la popin d'information */
.popinInformationMessage{float: left; width: 530px; height: 40px; line-height: 40px; color: white; text-align: center; font-weight: bold;}
/* CSS pour la popin d'erreur' */
.popinErreurMessage{float: left; width: 590px; color: #424242; text-align: center; padding: 5px;}

/* CSS pour le selectDate */
.selectDate{float: left; height: 20px; line-height: 20px; text-align: center;}
.selectDate .precMois, .selectDate .suivMois, .selectDate .precAnnee, .selectDate .suivAnnee{float: left; width: 20px; cursor: pointer; color: #777; font-size: 20px;}
.selectDate .precAnnee, .selectDate .suivAnnee{letter-spacing: -4px;}
.selectDate .precAnnee{text-align: left;}
.selectDate .mois, .selectDate .annee{float: left; font-size: 13px;}
.selectDate .mois{width: 80px;}
.selectDate .annee{width: 40px;}

/* CSS pour le datePicker */
.datePicker{float: left; border: solid 1px; background-color: white; cursor: pointer;}
.datePicker-input{float: left; width: 87px; height: 23px; line-height: 23px; text-align: center;}
.datePicker-btn{float: left; width: 23px; height: 23px; background-image: url("../img/datepicker.png");}
.datePicker-shadow{box-shadow:0 1px 3px rgba(0,0,0,0.75);}
.datePicker-calendrier{position:absolute; z-index: 1000; background: #eee; padding: 10px 10px 5px 10px; border-radius: 5px; font-size: 11px; border: 2px solid; cursor:default;}
.datePicker-calendrier .calendrier{float: left; width: 200px; vertical-align: top; height: auto}
.datePicker-calendrier .entete{margin-left: 2px;}
.datePicker-calendrier .entete span, .datePicker-calendrier .jours span{float:left; margin: 2px;}
.datePicker-calendrier .entete span{text-align: center; font-weight: bold; width: 24px; padding: 1px 0; color: #777;}
.datePicker-calendrier .jours{margin-left: 2px;}
.datePicker-calendrier .jours span{text-align: right; width: 17px; height: 17px; line-height: 17px; padding: 2px 3px 2px 2px; border: 1px solid transparent; border-radius: 3px; color:#999;}
.datePicker-calendrier .calendrier-fermer{position: absolute; top:-8px; right: -8px; width: 16px; height: 16px; background:white; border: 2px solid #ccc; color: #999; line-height: 16px; text-align: center; font-size: 13px; border-radius: 50%; cursor: pointer;}
.datePicker-calendrier .calendrier-fermer:hover{background: white;}
.datePicker-calendrier .jours span.jour-actif{cursor: pointer;}