/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2 juin 2020, 10:42:48
    Author     : jeanchris
*/
body{
    margin: 0px;
}

h1{
    background: #E08D18 0% 0% no-repeat padding-box;
    opacity: 1;
    color: #FFFFFF;
    text-align: center;
    font-family: 'Permanent Marker', cursive;
    font-size:27px;
    font-weight: 300;
    padding-top: 5px;
    height: 49px;
    margin: 0px;
}

.first{
    cursor:pointer;
	margin-top: 1px;
    position: relative;
}

#ajaxloader{
    display:none;
}

#header{
    background-image: url("images/rectangle 58_long.png");
    height: 152px;
    position:absolute;
    width:100%;
    background-size: cover;
}

#logo{
    top: 8px;
    left: 99px;
    width: 150px;
    height: 57px;
    background: transparent url('images/logo.png') 0% 0% no-repeat padding-box;
    opacity: 1;
    position:absolute;
    background-size: cover;
}

#drapeaux{
    margin: 91px auto 0px;
    width: 441px;
    height: 61px;
    background: transparent url(images/flags.png) 0% 0% no-repeat padding-box;
    opacity: 1;
    position: relative;
    background-size: cover;
    max-width: 100%;
}

#bloc-haut{
    top: 10px;
    right: 10px;
    width: 156px;
    background: #E08D18 0% 0% no-repeat padding-box;
    border-radius: 23px;
    opacity: 1;
    text-align: center;
    letter-spacing: 0px;
    position: absolute;

    height: 25px;
    padding-top: 10px;

    color: #FFFFFF;
    text-transform: uppercase;
    font-size:16px;
    text-decoration:none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

#bloc-haut a{
    color: #FFFFFF;
    text-transform: uppercase;
    font-size:12px;
    text-decoration:none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    display: inline-block;
    position: relative;
    left: 3px;
    top: -1px;
}

#conteneur{
    width:100%;
    opacity: 1;

    position: relative;
    top: 216px;
}

#choix-unite{
    max-width: 557px;
    min-height:497px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 2px;
    margin:0px auto; 
}

#ecouter, #commencer{
    display:none;
}
.img-drapeau{
    height:35px;
    left: 96px;
    position: absolute;
}
.next {
    height: 43px;
    margin: 0px 8px;
    padding: 5px 0px 0px;
    letter-spacing: 0px;
    color: #080808;
    font-family: 'Quicksand', sans-serif;
    position:relative;
    display:none;
    cursor:pointer;
    border-bottom: 1px solid #E8E8E8;
}

.lib-choix{
    position: absolute;
    top: 13px;
    left: 147px;
}

.bouton.enligne{
    background: #E08D18 0% 0% no-repeat padding-box;
    border-radius: 25px;
    height: 50px;
    color: #FFFFFF;
    max-width:320px;
    margin:10px auto 10px;
    font-size: 18px;
    padding-top: 12px;
    padding-left: 16px;
    height: 38px;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    text-align:center;
    cursor: pointer;
}

.bouton.enligne.ecouter{
    background-color:#80a1d8;
}
.bouton.enligne.fausse{
    background-color:#535456;
}

.bouton.enligne.double{
    height: 58px;
}

.bouton.enligne img{
    vertical-align: middle;
    margin-right: 5px;
}

#menu-principal{
    display:none;
    background-color: grey;
    background: #535456 0% 0% no-repeat padding-box;
    opacity: 1;
    color: white;
    font-family: 'Quicksand', sans-serif;
    width: 300px;
    position: absolute;
    right: 0px;
    top: -10px;
    z-index: 10;
    border: 1px solid white;
}

#menu-burger{
    height: 21px;
    position: absolute;
    right: 15px;
    top: 15px;
    cursor:pointer;
}

#menu-principal a {
    font-family: 'Quicksand', sans-serif;
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    padding: 5px 0px;
    border-bottom: 1px solid grey;
    width: 92%;
    margin-left: 4%;
}

#contenu-int{
    /* max-width: 960px; */
    margin: 0px auto;
    height: 800px;
    position: relative;
}

#page-gauche{
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    color: black;
    font-weight: bold;
    /* position:absolute; */
    width: 557px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 2px;
    opacity: 1;
    padding: 5px 10px;
    margin: 0px auto 45px;
}

/* AGRANDISSEMENT SUR TRADUCTIONS */
.type-7 #page-gauche{
    position: absolute;
    left: 80px;
    width: initial;
    right: 418px;
}

#page-droite{
    top: 0px;
    right: 10px;
    width: 321px;
    background: #535456 0% 0% no-repeat padding-box;
    opacity: 1;
    position: absolute;
    color:white;
    font-family: 'Quicksand', sans-serif;
    margin-bottom: 45px;
}

#page-droite a{
    color:white;
    text-decoration:none;
}

.menu-nav{
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    padding: 13px 0px 14px 92px;
    border-top: 1px solid grey;
    background-image: url(images/crayon.png);
    background-position: 40px 5px;
    background-repeat: no-repeat;
    background-size: 30px;
}

.menu-nav.texte{
    background-image: url(images/texte.png);
    background-size: 36px;
    background-position: 37px 7px;
}
.menu-nav.pdf,.menu-nav.pdf2{
    background-image: url(images/pdf.png);
}
.menu-nav.pdf2{
    background-image: url(images/pdf.png);
	display:none;
}

.dropdown {
    padding: 0px 0px 10px 119px;
    background-image: url(images/coingris.png);
    background-position: 93px -7px;
    background-repeat: no-repeat;
    background-size: 20px;
}

.dropdown img{
    margin-left: 21px;
    height: 17px;
    vertical-align: middle;
}


#titre-unite{
    position: absolute;
    top: -64px;
    background: #E08D18 0% 0% no-repeat padding-box;
    opacity: 1;
    width: 100%;
    height: 40px;
    text-align: center;
    color: white;
    font-size: 18px;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    padding-top:14px;
}

#instruction{
    text-align: center;
    font-size:27px;
    font-family: 'Permanent Marker', cursive;
    color: #E08D18;
}

.titre-nav{
    text-align: center;
    font-size:18px;
    font-weight:bold;
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    margin: 16px 0px;
}

.numero-question{
    text-align: left;
    font-size:14px;
    /* font-weight:bold; */
    font-family: 'Quicksand', sans-serif;
    color: #FFFFFF;
    opacity: 1;
    margin-left: 100px;
    padding-left:18px;
    margin-bottom: 10px;
    background-image: url('images/bulletorange.png');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position-y: 5px;
}

.env-questions{
    display:none;
    background: transparent linear-gradient(180deg, #0000004D 0%, #80808000 100%) 0% 0% no-repeat padding-box;
}
/* PAGE CONNEXION */
#div-login{
    top: -64px;
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
}

.bt_logs{
    background-color: #E08D18;
    border-radius: 25px;
    color: white;
    font-size: 18px;
    width: 287px;
    padding: 15px;
    border: none;
    background-image: url(images/ok.png);
    background-position: 41px 10px;
    background-repeat: no-repeat;
    background-size: 32px;
}

input.inp_logs {
    width: 234px;
    font-size: 22px;
    padding: 4px;
}

/* ECOUTER */
#contenu-lecteur{
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
}

#contenu-lecteur h2, h2.titre-pages-exos{
    font-family: 'Permanent Marker', cursive;
    color: #E08D18;
    font-size:27px;
    padding-bottom:0px;
    margin-bottom:0px;
    text-align:center;
}

#icone-lecture{
    background-image: url(images/cercleGM.png);
    background-repeat: no-repeat;
    width: 77px;
    height: 77px;
    background-size: contain;
    margin: 0px auto;
    text-align:center;
}
#icone-lecture img{
    width: 37px;
    margin-top: 23px;
}
.libelle-bouton.stylo{
    background-image: url(images/crayonbulle.png);
    background-position: 13px -1px;
    background-repeat: no-repeat;
    background-size: 32px;
    padding: 1px 0px 7px;
}
#sur-lecteur{
    margin-bottom:10px;
}
#lecteur-audio{
    display:none;
}

audio{
    min-width: 340px;
}

/* QUESTIONS */
.question, .ecrire, .reponse{
    width: 100%;
    border: none;
    height: 68px;
    padding: 10px;
    color: #E08D18;
    font-family: 'Quicksand', sans-serif;
    font-weight:bold;
    font-size:18px;
    background-color:#f9e8d1;
    resize: none;
}

.ecrire{
    margin-top:4px;
     color: #535456;
     background-color:#e2e2e2;
}

.voir-reponse{
    display:none;
}

.titre-exo{
    text-align:center;
    margin-bottom:10px;
}

#composants-textes #texte{
    width:49%;
    padding-right:1%;
    float:left;
    margin-bottom:20px;
}

#composants-textes #texte-trad{
    width:50%;
    float:left;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    color: black;
    font-weight: bold;
    margin-bottom:20px;
}

#composants-textes #texte-trad2{
    width:49%;
    padding-right:1%;
    display:none;
    float:left;
    margin-bottom:20px;
}

.table-bilan{
    margin:0px auto;
    width:90%;
    font-family: 'Quicksand', sans-serif;
}

.table-bilan-titres1{
    padding:3px 2px;
}

#reponse-test{
    display:none;
    margin:20px 0px;
}

.textes-tests{
    text-align:center;
    margin:5px 0px;
}

.surl_test{
    color:#E08D18;
}

.test-juste, .test-faux{
    display:none;
}

#footer{
    position: fixed;
    bottom: 0px;
    text-align: right;
    width: 100%;
    height: 30px;
    background-color: #535456;
}

#int-footer{
    margin: 6px 10px;
    font-family: 'Quicksand', sans-serif;
    font-weight:bold;
    font-size:14px;
    color: #FFFFFF;
    padding-top: 5px;
}

#texte-trad textarea{
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    color: black;
    font-weight: bold;
}

.lib-choix {
    left: 255px;
}
.img-drapeau {
    left: 200px;
}
#list_unite .lib-choix{
    left: 230px;
}
#nom-page{
	display:none;
}

.lecteur-son-exos{
	display:none;
}


/* QCM */
.images-qcm.quest {
    width: 25%;
    display: inline-block;
}

.images-qcm.unique {
    width: 30%;
	margin:4px auto;
    display: block;
	text-align:center;
}
.images-qcm.quest img, .images-qcm.unique img{
    max-width: 100%;
}


.images-qcm.rep img{
	max-height: 160px;
}

.texte-qcm input[type="radio"]{
	height: 28px;
    width: 28px;
    position: relative;
    bottom: -7px;
    margin-right: 6px;
}

@media only screen and (max-width: 1170px) {
    #contenu-int{
        max-width: 960px;
    }
    #page-gauche, .type-7 #page-gauche{
        position:absolute;
        top: 0px;
        left: 0px;
    }

    #page-droite{
        right: 0px;
    }
}

@media only screen and (max-width: 960px) {
    #page-gauche, .type-7 #page-gauche{
        position:initial;
        padding: 5px 3%;
        width: 90%;
        margin: 0 2%;
    }

    #page-droite{
        position:initial;
        width: 100%;
		padding-bottom: 30px;
    }
    #logo {
        left:8px;
    }
}

@media only screen and (max-width: 570px) {
    .lib-choix {
        left: 45%;
    }
    .img-drapeau {
        left: 32%;
    }
    #list_unite .lib-choix{
        left: 37%;
    }
	.images-qcm.quest {
		width: 100%;
		display: block;
	}
}

.affichage-pdf{
	position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1000;
	background-color: white;
	overflow: scroll;
}

.affichage-pdf .fermer{
	background-color: black;
    color: red;
    font-weight: bold;
    text-align: right;
    font-size: 32px;
    padding: 8px;
	cursor:pointer;
}

.bouton-aide{
    position: absolute;
    right: 4px;
    top: -33px;
    cursor: pointer;
    /* background-image: url(/exercices/images/icone-aide.png);
    background-size: cover;  */
    /* width: 26px; */
    /* height: 26px; */
    background-color: #E08D18;
    color: white;
    padding: 5px 11px;
    border-radius: 14px;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    border: 1px solid #DDD;
}

.bouton-aide.dedans{
    position: absolute;
    width: 54px;
    top: 10px;
    left: 5%;
    display: inline-block;
    font-size: 20px;
    padding: 3px 5px;
}

#cadre-aide {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display:none;
    background-color: rgba(100, 100, 100, 0.9);
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    color: black;
    font-weight: bold;
}

#cadre-aide img{
    max-width: 100%;
    margin: 20px auto;
    display: none;
}
#cadre-aide #interieur-outer {
    overflow: hidden;
    position: fixed;
    top: 52px;
    left: 20%;
    right: 20%;
    bottom: 52px;
    background-color: white;
    padding: 40px;
    text-align: justify;
    line-height: 1.5em;
    border-radius: 23px;
    box-shadow: 5px 5px 5px white;
}

#cadre-aide #interieur {
    height: 100%;
    padding-right: 30px;
    overflow-y: auto;
}




#cadre-aide #interieur li{
    margin-bottom: 10px;
}

@media only screen and (max-width: 570px) {
    #cadre-aide #interieur-outer {
        top: 12px;
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
    
    #cadre-aide #interieur {
        padding-right: 20px;
    }
    
    .bouton-aide.dedans{
        left: 6px;
    }
}

.aide-rouge {
    font-size: 28px;
    color: #E08D18;
    font-weight: bold;
    margin-bottom: 15px;
}

.aide-bleu {
    font-size: 24px;
    color: #E08D18;
    font-weight: bold;
    margin-bottom: 10px;
}