/* 
Document   : test
Created on : 2013-04-07, 13:54:17
Author     : Alain
Description:
Purpose of the stylesheet follows.
*/
body{
background-color:white;
font-family:Arial,sans-serif;
font-size:.85em;
margin:0px;
padding:0px;
}

    .logo{
    background-size: 100% 100%;
    background-image: url('images/logo-e-potentiel.png');
    background-repeat: no-repeat;
    height:56px;
    width:300px;
    }

    .bonhomme{
    background-size: 100% 100%;
    background-image: url('images/bonhomme.png'); 
    height: 55px;
    width:  55px;
    }

    .fleche_d_color{
    background-size: 100% 100%;
    background-image: url('images/fleche-d-vert.png'); 
    height:50px;
    width:  55px;
    display: block;
    margin: 3px auto;
    max-width: 64px;
    text-align: center;
    }

    .fleche_g_color{
    background-size: 100% 100%;
    background-image: url('images/fleche-g-vert.png'); 
    height:50px;
    width:  55px;
    display: block;
    margin: 3px auto;
    max-width: 64px;
    text-align: center;
    }  




.fleche_g_gris{
background-size: 100% 100%;
background-image: url('images/fleche-g-gris.png'); 
height:50px;
width:  55px;
display: block;
margin: 3px auto;
max-width: 64px;
text-align: center;
}   

h3{
color: #5d5d5d ;
font-size: 18px;
line-height: 20px;
margin:10px 0 10px;
overflow: hidden;
text-transform: uppercase;    
}
hr{
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #A2A2A3 -moz-use-text-color -moz-use-text-color;
border-image: none;
border-style: dotted none none;
border-width: 2px medium medium;
height: 5px;
}
#audio_question{
display:none;
}
.bouton_continuer{
margin:15px 0 0 0;
text-align:center;
}
.cliquable{
cursor:pointer;
}
#confirmation_body{
padding-bottom:20px;
}
.formErreurObligatoire, .formErreurDoublon{
display:none;
margin:-2px 0 0 0;
padding:0px 5px;
}
.hidden{
display:none;
}

#saisie_code_test_body{
margin:0 0 15px 0;
min-height:265px;
padding:25px 0 20px 150px;
text-align:left;
width:720px;
background-color:white;
border-radius:6px;
}
#saisie_code_test_body button img{
width:16px;
}
#saisie_code_test_body input {
margin: -2px 0 5px 2px;
}
#saisie_code_test_body ul li label{
display:inline-block;
margin:4px 0 0 0;
text-align:left;
}
#saisie_code_test_body #message_erreur{
padding:5px;
}
.zoneBoutonsPage{
display:block;
float:right;
text-align:right;
margin:-34px 5px 0 0;
padding:0 5px;
min-width:95px;
text-align:left;
}
#zoneBoutons button:hover, #zoneBoutonsDroite button:hover, .zoneBoutonsPage button:hover, .zoneBoutonsDatatable button:hover{
/*    font-weight:bolder;*/
cursor:pointer;
}
#zoneBoutons button[disabled="disabled"]:hover, 
#zoneBoutonsDroite button[disabled="disabled"]:hover,
.zoneBoutonsPage button[disabled="disabled"]:hover,
.zoneBoutonsDatatable button[disabled="disabled"]:hover {
cursor:default;
font-weight:normal;
}
.zoneBoutonsPage button img{
width:16px;
}
.zoneBoutonsPage button[disabled=disabled] img{
opacity:.6;
}
.zoneBoutonsPage button.boutonEnregistrer{
width:120px;
}

#login_container, #test_container, #confirmation_container, 
#saisie_code_test_container,
#zone_intro_fin_container, #zone_question_container,
#zone_menu_container, #zone_question_reponse{
background-color:#e6e6e6;
margin:0 auto;
overflow:auto;
padding:10px 20px 0 20px;
max-width:870px;
min-width:450px;
}
#login_container{
background-color: #e6e6e6;
overflow:auto;
}
#login_body{
overflow:auto;
padding:10px 0 0 0;
height:400px;
}

.bluebutton{
cursor : pointer;
font-size: 20px; color: white; width: 98%; height: 75px
; border-top-left-radius: 5px; border-top-right-radius: 5px
; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px
; border: none; opacity: 0.8; transition: all 0.5s !important
; -webkit-transition: all 0.5s !important
; background-image: linear-gradient(rgb(43, 129, 175), rgb(0, 102, 153))
}

.greenbutton{
cursor : pointer;
font-size: 20px; color: white; width: 98%; height: 75px
; border-top-left-radius: 5px; border-top-right-radius: 5px
; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px
; border: none; opacity: 0.8; transition: all 0.5s !important
; -webkit-transition: all 0.5s !important
;  background-image: linear-gradient(rgb(0, 153, 51), rgb(0, 204, 102))
}


#login_footer hr{
color:black;
background-color:black;
border:0px solid;
height:1px;
}

.bandeau_test hr, .bandeau_login hr{
background-color:black;
border:1px solid;
height:10px;
}
.bandeau_test_1{
overflow:auto;
}
.form_erreur{
color: #D32929;
font-size:.95em;
}
input:focus, textarea:focus, select:focus, .boutonAction:hover{
border-color:#006699;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 5px #006699;
outline:0 none;
}
input, textarea, select, .cadre_audio, .cadre_radio, .cadre_texte, .donnee_sans_cadre{
border:1px solid #BDBDBD;
border-radius:4px 4px 4px 4px;
padding:2px;
margin:4px;
}
.donnee_sans_cadre{
border:0;
padding:1px;
}

textarea{
resize: vertical;
}

#logo_test{
float:left;
}
#logo_test img, #logo_login img{
width:300px;
}
#logo_login{
overflow:auto;
width:100%;
}

#zone_utilisateur{
float:right;
font-size:1.1em;
vertical-align:middle;
}
#zone_utilisateur img{
margin-left:10px;
vertical-align: middle;
width:55px;
}
#zone_utilisateur #langue{
font-size:.8em;
padding:0 5px 5px 5px;
text-align:right;

}
#zone_utilisateur table tr td{
vertical-align:middle;
}
#zone_utilisateur #salutation{
font-weight:bolder;
}
#zone_utilisateur #seDeconnecter a{
color:#5d5d5d;
margin:5px 0 0 0;
float:right;
font-size:.8em;
}
#zone_utilisateur #seDeconnecter a:hover{
color:#D32929;
}

/*

Propriétés pour la page de login et modification du mot de passe.


*/
.deja_inscrit{
font-size:.8em;
margin:10px 0 0 0;

}
button.inscrire{
margin-top:10px;
}
.login_groupe_donnees{
width:100%;
    min-height:30px;
    clear:both;
}

#zone_profil .login_groupe_donnees{
    clear:inherit;
}

#zone_profil .login_groupe_donnees input{
    width: 200px;
}

#formInscription label{
    clear:both;
}

#formInscription .login_groupe_donnees{
    clear:both;
}
#sexe_femme,#sexe_homme{
    width:17px !important;
}
.login_groupe_donnees input,
.login_groupe_donnees label, 
.login_groupe_donnees table 
{
float:left;
}





#formIdentification .form_erreur{
margin-left: 30%;
padding-left: 10px;
}

#formInscription .form_erreur{
margin-left: 30%;
padding-left: 10px;
display:block;
margin-top:5px;
}

#formInscription .conseil{
margin-left: 30%;
padding-left: 10px;
display:block;
}

.conseil.oublie_pass{
font-size:.8em;
color:#7D7D7D ;
margin: 2px 0 0px 2px;
width:80%;
margin-left:30%;
padding-left: 10px;
margin-top:15px;
display:block;
}
.login_groupe_donnees #cryptogram{
border-radius:4px;
margin-left:2px;
clear:both;
}
.mdp_oublie_consigne{
margin:20px 0;
text-align:justify;
}
.titre_zone{
color:white;
padding:5px;
background-color:#006699;
background-image:linear-gradient(#2b81af, #069 );
}


.zone_login{
    display:none;
}

#zone_inscription, #zone_identification, #zone_mdp_oublie{
/*    float:right;*/
margin:0px auto;

width:700px;
}

#zone_mdp_oublie ul li label,
#zone_inscription ul li label,
#zone_identification ul li label{
display:block;
float:left;
font-weight:bolder;
margin:3px 10px 0 0;
text-align:right;
width:30%;
}

#zone_mdp_oublie input,
#zone_identification input{
margin:2px 0 5px 2px;
width:45%;
}


.zone_mdp_oublie_contenu,
.zone_inscription_contenu,
.zone_identification_contenu{
background-color:#fff;
border: 1px solid #b3b3b3;
margin:0 0 20px 0;
padding:10px;
}
#ins_nom, #ins_courriel, 
#ins_confirmation_mot_de_passe{

}
#zone_inscription #ins_mot_de_passe, 
#zone_identification #iden_mot_de_passe{
margin-bottom:0;
}

/*

Propriétés pour la zone de paniers.

*/
.compteur_item_panier{
background-color:white;
border:2px solid #d1d1d1;
border-radius:12px;
color:black;
float:right;
margin:0px 10px 0 0;
text-align:center;
width:30px;
}
.drop-active {
background: #ffff99;
}
.drop-hover {
background: #99ff99;
background:#b4c46c;
background:#CCD79D;
background:#D8E4A0;
}
/*.en_mouvement{*/
.ui-draggable-dragging, .beingDragged{
background:#ffffff;
border:2px solid #757575;
border-radius:4px;
font-size:.7em;
overflow:auto;
margin-left:10px;
opacity:1;
padding:10px 10px;
width:300px;
}
.libelle_panier{
border-radius:4px 4px 0 0;
color:#fff;
font-weight:bolder;
height:1.5em;
padding:2px 0 0 0;
margin: 0;

/* Généré avec Colorzilla. */
background: #627d4d; /* Old browsers */
background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 ); /* IE6-9 */
}
.panier{
background-color:#ffffff;
border-radius:4px;
overflow:hidden;
vertical-align:top;
}
.panier .item{
border:2px solid #757575;
border-radius:4px;
margin:0 0 5px 0;
min-height: 50px;
}
.panier .item:hover{
cursor:move;
}
.panier .item .question_infos{
display:none;
}
.panier_container{
/*    height:100%;*/
padding:10px 5px 5px 5px;
min-height:100px;
height:auto;
/*    overflow:auto;*/
width:auto;
}
#paniers{
margin-top:5px;
width:100%;
}

.panierDeborde{
background-color:#D32929;
color:white;
}
.panierPlein{
background-color:#7dbd00;
color:white;
}

#zone_question.item{
height:150px;
margin-left:auto;
margin-right:auto;
padding:10px 10px;
width:500px;
}
/*

Propriétés pour la zone de profil.

*/
#zone_profil ul li{
    overflow:auto;
}
#zone_profil ul li label{
color:#757575;
display:block;
float:left;
font-weight:bolder;
margin:5px 10px 0 0;
text-align:right;
width:165px;
}
#zone_profil span.form_erreur_globale{
padding:5px;
margin:0 0 0 4px;
display:block;
max-width:400px;
}
#zone_profil span.form_erreur{
margin:0 0 0 4px;
display:block;
}
#zone_profil span.form_info{
background-color:#efefef ;
display:block;
border:1px solid #6e6e6e;
border-radius:4px;
margin:2px 0 0 4px;
padding:3px;
}
#zone_profil span.form_info_globale{
padding:5px;
display:block;
font-size:1em;
margin:0 0 10px 0;
max-width:500px;
}
#zone_profil.formulaire_consentement{
border:1px solid #bdbdbd;
border-radius:4px;
margin:5px 0;
padding:5px;
}
#zone_profil .login_groupe_donnees{
width:500px;
}
#zone_profil .login_groupe_donnees label{
color:black;
font-weight:normal;
margin-right:15px;
text-align:left;
width:auto;
}
#zone_profil .utilisateur_adresse{
width:400px;
}
#zone_profil .utilisateur_code_postal{
width:70px;
}
#zone_profil .utilisateur_courriel{
width:250px;
}
#zone_profil .utilisateur_compte_wp{
float:left;
width:30px;
}
#zone_profil .utilisateur_nom{
width:200px;
}
#zone_profil .utilisateur_nom_entreprise{
width:250px;
}
#zone_profil .utilisateur_prenom{
width:150px;
}
#zone_profil .utilisateur_ville{
width:300px;
}


/*

Propriétés pour l'affichage de la zone d'instruction/conclusion/consentement

*/
#zone_intro_fin_container{
display:none;
/*    float:left;*/
/*    position:absolute;*/
/*  margin:-370px 0 0 -20px;*/
height:360px;
z-index:10;
overflow:auto;
}
#zone_intro_fin{
background-color:white;
border-radius:6px;
height:300px;
margin:0 0 15px 0;
overflow-y:scroll;
overflow-x:auto;
-webkit-overflow-scrolling: touch; /*/adding this line will enable inertial scrolling;*/
padding:5px;
text-align:left;
}
#zone_intro_fin_bouton{
text-align:center;
}

.zone_consentement_acceptation{
margin:0 0 15px 0;
text-align:center;
}
/* Cachons la case à cocher */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
display:none;
}

/* on prépare le label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative; /* permet de positionner les pseudo-éléments */
padding-left: 25px; /* fait un peu d'espace pour notre case à venir */
cursor: pointer;    /* affiche un curseur adapté */
}

/* Aspect des checkboxes */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: -2px;
margin-left:2px;
width: 17px; height: 17px; /* dim. de la case */
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px; /* angles arrondis */
box-shadow: inset 0 1px 3px rgba(0,0,0,.3) /* légère ombre interne */
}

/* Aspect général de la coche */
/*AL - 2014-04-07 : [type="checkbox"]:not(:checked) + label:after,

Sur la ligne suivante, remplacer :after par :before
*/
[type="checkbox"]:checked + label:before {
content: '✔';
position: absolute;
top: -2px; left: 0px;
font-size: 14px;
color: black; /*#09ad7e;*/
/*AL 2014-04-07 transition: all .2s; /* on prévoit une animation */
}
/* Aspect si "pas cochée" */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0; /* coche invisible */
transform: scale(0); /* mise à l'échelle à 0 */
}
/* Aspect si "cochée" */
[type="checkbox"]:checked + label:after {
opacity: 1; /* coche opaque */
transform: scale(1); /* mise à l'échelle 1:1 */
}

/* aspect désactivée */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
/* styles de la coche (si cochée/désactivée) */
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
/* on style aussi le label quand désactivé */
[type="checkbox"]:disabled + label {
color: #aaa;
}

/* aspect au focus de l'élément */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
border: 1px dotted blue;
}
/*

Propriétés pour la zone de navigation et progression.

*/
.fleche{
width:50px;
}
#img_son, #img_aide{
height:40px;
}
#zone_aide{
float:right;
}
#zone_barre_progression{
float:left;
height:15px;
margin:12px 0 0 70px;
width:60%;
}
#zone_barre_progression .label{
color:#333333 ;
float:left;
font-size:.7em;
font-weight:bolder;
margin-top:1px;
text-align:center;
text-shadow: 1px 1px 0 #fff;
width:100%;
height:100%;
vertical-align: middle;
}
#zone_fleche_d{
float:right
}
#zone_fleche_g{
float:left;
text-align:left;
width:25%;
}
#zone_fleche_d button, #zone_fleche_g button, #zone_aide button{
padding:0;
border:0px;
background:none;
}
#zone_fleche_d button:enabled, #zone_fleche_g button:enabled,
#zone_aide button:enabled{
cursor:pointer;
}
.zone_navigation{
height:55px;
overflow:auto;
padding: 20px 0 15px 0;
text-align:center;
}
#zone_navigation_top{
padding:0;
}

#zone_progression{
border:1px solid #989898;
border-radius:5px;
float:left;
height:40px;
margin:0 auto;
min-width:215px;
padding:5px;
text-align:center;
width:50%;
}
#zone_son{
float:left;
text-align:left;
width:20%;
}

/*

Propriétés pour la zone question

*/
.question_image{
min-height:90px;
/* height:90px; */
}
.question_titre{
font-size:1.4em;
font-weight:bolder;
margin:0 0 10px 0;
text-align:center;
}
.panier .question_titre{
font-size:1em;
font-weight:normal;
margin:0px;
padding:3px;
text-align:left;
}
.question_infos{
font-size:1.2em;
}
.panier .question_infos{
font-size:1em;
}
#zone_question{
background-color:white;
border-radius:6px;
min-height:120px;
/* height:120px; */
margin: 5px 0 0 0;
overflow:auto;
padding:10px 40px;
text-align:center;
}
#zone_question.item:hover{
cursor:move;
}
#zone_question_container{
text-align:center;
}
/*

Propriétés pour la zone réponse.

*/
#reponse_consigne{
font-size:1.1em;
font-weight:bolder;
margin:0 0 5px 0;
min-height: 40px;
}
td.rangClic div.rangClic{
background-color:white;
border:2px solid #d1d1d1;
border-radius:12px;
color:black;
margin:3px auto 0;
padding:2px;
width:30px;    
}
#question_table_reponses td.rangClic{
height:30px;
text-align:center;
}
#question_table_reponses td.reponse_possible{
background-color:#fff;
border:2px solid #fff;
border-radius:4px;
vertical-align:middle;
height:70px;
}
#question_table_reponses td.reponse_possible div.reponse_a_classer{
display:table-cell;
vertical-align:middle;
height:70px;
width:inherit;
text-align:center;
}

/*#question_table_reponses td.reponse_possible:not(.disabled):hover{*/
#question_table_reponses td.reponse_possible.reponseHover{
/*#question_table_reponses td.reponse_possible:not(.disabled).selected:hover{*/

border:2px solid #ffe45c;    
cursor:pointer;
}

#question_table_reponses td.reponse_possible.selected,
#question_table_reponses td.reponse_possible.selected:hover{
border:2px solid #7dbd00;    
}

#question_table_reponses{
border-collapse: separate;
border-spacing:20px 0px;
width:100%;
}
#zone_reponse{
margin-top:15px;
text-align:center;
}

#zone_reponse #reponse_saisie{
height:55px;
resize:none;
width: 500px;    
}
#zone_reponse .reponse_ouverte_zone_ctr_car{
font-size:.9em;
font-style:italic;
}

#zone_question_reponse{
min-height:300px;
padding-top:0px;
}


/*

PROPRIÉTÉS POUR LA ZONE DE MENU.

*/
.menu_item{
float:left;
margin:20px;
text-align:center;
width:95px;
}
.menu_item a, .menu_item a:visited,
.menu_sessions a, .menu_sessions a:visited{
text-decoration:none;   
color:#000000;
}
.menu_item a:hover,
.menu_sessions a:hover
{
color:#7dbd00;
}
.menu_session_en_cours{
color:#F39814;
font-style:italic;
}
.menu_item img{
display:block;
margin:3px auto;
max-width:64px;
text-align:center;
}
#div_image_home{
float:left;
padding:0;
height:32px;
margin:0 5px 0 0 ;
overflow:hidden;
vertical-align: middle;
width:32px;
}
.lien_home{
float:right;
overflow:auto;
}

.lien_home a #image_home{
width:32px;
height:96px;
transition: all 0.5s ease 0s;
}
.lien_home a #image_home:hover{
margin-top: -64px;    
}

ul.tests_deja_faits li{
padding:5px 0 0 25px;
}
.sommaire_ligne_test_pair{
background-color:#f1f1f1;
padding:5px 0;
}
.sommaire_ligne_test_pair td,
.sommaire_ligne_test_impair td{
padding:5px 15px 5px 0;
}
.sommaire_tests_a_faire_container{
overflow:auto;
}
.sommaire_tests_a_faire{
margin:10px auto;
min-width:50%;
}
.sommaire_tests_a_faire th{
padding:5px 15px 0 0;
text-align:left;
text-decoration:underline;
}
.sommaire_tests_a_faire th.etat{
width:85px;
}
.tests_deja_faits_sous_titre{
padding:0 0 2px 24px;    
text-decoration:underline;
}
#zone_menu, #zone_consentement_container{
background-color:white;
border-radius:6px;
min-height:300px;
margin:0 0 15px 0;
padding:5px;
text-align:left;
}
#zone_consentement_container{
height:auto;
}
#zone_menu .ajouter{
float:right;
}
.zone_menu_session{
padding:15px;
}
.zone_menu_session:first-child{
padding-top:0px;
}
.zone_menu_session .aucun_test_dispo{
font-style:italic;
}
.zone_menu_session h4{
margin:0 0 10px 0;
text-decoration:underline;
text-transform:uppercase;
}
.menu_sessions li{
background: url("../images/bullet_green_alt.png") no-repeat 0px -2px transparent;
list-style-type: none;
margin: 0 0 0 15px;
padding:0 0 0 25px
}