WikiLerni/front/public/themes/wikilerni/css/style.css

/*---------------- Propriétés communes à toutes les pages --------------*/

/* Général */
@font-face
{
  font-family: Millimetre;
  src: url(../webfonts/Light/Millimetre-Light_web.woff);
  font-weight: lighter;
}
@font-face
{
  font-family: Millimetre;
  src: url(../webfonts/Regular/Millimetre-Regular_web.woff);
  font-weight: regular;
}
@font-face
{
  font-family: Millimetre;
  src: url(../webfonts/Bold/Millimetre-Bold_web.woff);
  font-weight: bold;
}
body
{
margin: 0;
overflow-x: hidden;
background-color: #8c599c;
font-family: Arial, Helvetica, sans-serif;
}
/* texture de fond des éléments */
.cardboard
{
background-image: url('../img/background-texture.png');
}
/* Cache un contenu du DOM devant être réintégrer via JavaScript */
.needJS
{
display: none;
}
body, a, input
{
font-family: Millimetre;
font-weight: regular;
color: rgba(255,255,255,1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}

/* Liens */
input, #headLinks a, #footLinks a, a.button,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
text-decoration: none;
outline: none;
}
a:hover
{
color: rgba(0,0,0,0.66);
text-shadow: 0 1px 0 rgba(255,255,255,0.75);
}
a.button:hover
{
color:white;
text-shadow:none;
}
/* Liens de navigation entre pages de résultats */
#next a, #previous a, #tagsList a
{
background-image: url('../img/background-texture.png');
}
nav#pagination, nav#tagsList
{
clear:both;
display:flex;
flex-wrap: wrap;
margin:0.5em;
}
nav#pagination div
{
flex: 0 0 70%;
text-align:center;
}
nav#pagination div, nav#tagsList div
{
margin: 1em;
}


/* Boutons médias sociaux */
#zerozozio
{
margin:1em;
text-align:right;
}
#zerozozio a
{
padding:0 0.3em;
}

/* header + footer */
header, footer
{
background-color: #FF8800;
border-bottom: 1px solid rgba(0,0,0,0.75);
box-shadow: 0 0 10px black;
width: 100%;
margin-top: 1em;
}
header
{
transform: rotate(0.66deg);
height:auto;
}
footer
{
transform: rotate(-0.66deg);
height: 100px;
clear: both;
text-align: center;
}
header img
{
width:auto;
height:45px;
margin-left:5px
}
header ul, footer ul
{
list-style-type: none;
float: right;
padding: 0;
}
header ul li, footer ul li 
{
display: inline-block;
margin-left: 0.2em;
margin-right: 0.2em;
}
header ul
{
margin:0;
width:75%;
}
header ul li
{
font-size: 0.9em;
float:right;
line-height:1.5em;
}
footer ul li
{
margin-top: 10px;
}
header ul li a
{
padding:10px 5px;
}

/* Contenus textuels, paragraphes, etc. */
.engraved
{
color: white;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 1);
font-family: verdana;
}
.framed
{
width:92%;
font-size:0.8em;
font-weight:inherit;
border: 1px solid rgba(0, 0, 0, 0.33);
border-radius: 5px;
box-shadow: 0px 1px 0px rgba(255,255,255,0.5), inset 0px 1px 0px rgba(255,255,255,0.33);
display: inline-block;
margin: 1em 0 1em 0;
padding:0.5em;
}
#prompt
{
background-color: #FF8800;
width: 75%;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
}
#prompt img
{
width: 50%;
margin: auto;
display: block;
}
#prompt h1
{
text-align: center;
width: 105%;
background-color:  #FF8800;
margin-left: -2.5%;
box-shadow: 0px 0px 5px black;
border-radius: 5px;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.75);
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#prompt h2
{
text-align: center; font-size: 1.3em;
}
#prompt h3
{
text-align: center;font-size: 1.7em;
}
#prompt p
{
text-align: center;
line-height: 2em;
font-size: 1.2em;
}
#prompt a.button
{
font-size:12px;
}
p.error, p.success, p.info, div.error, div.success, div.info
{
width: 80%;
margin:1em auto;
height: auto;
border-radius: 5px;
padding: 1em;
opacity: 1;
line-height: 1.25em;
}
.info,.success,.error
{
background-image: url('../img/background-texture.png');
}
.info {background-color: #8c599c;}
.success {background-color: #00c684;}
.error {background-color: red;}

/* Formulaires */
fieldset
{
width: 100 %;
border: 0;
text-align: left;
}
label
{
display:inline-block;
width:100%;
margin-bottom:0.5em;
}
label.check
{
padding:0;
margin:0;
}
input[type=submit], input[type=text], input[type=email], input[type=password], .button
{
background-color: #8c599c;
padding: 10px;
border: 0;
border-radius: 3px;
color: white;
font-family: sans;
font-weight: bold;
font-size: 0.9em;
position: relative;
transition: 0.125s ease all;
margin-top: 0;
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.66), inset 0px -1px 0px rgba(0, 0, 0,0.66), 0px 3px 8px rgba(0,0,0,0.66);
}
input[type=submit]:hover, .button:hover
{
margin-top: 2px;
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.66), inset 0px -1px 0px rgba(0, 0, 0,0.66), 0px 0px 5px rgba(0,0,0,0.66);
}
input[type=text], input[type=password], input[type=email]
{
box-shadow: inset 0 1px 0 rgba(0,0,0,0.66), inset 0 -1px 0 rgba(255,255,255,0.66), inset 0 3px 8px rgba(0,0,0,0.66);
width: 95%;
}
input[type=checkbox]
{
width:15px;
height:15px;
margin-left: 0;
margin-right: -15px;
opacity:0.0;
}
/* The following is a trick to force browser to let me redefine checkbox style */
.checkbox_override
{
width: 15px;
height: 15px;
border-radius: 2px;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.25);
border-top: 1px solid rgba(0,0,0,0.75);
border-bottom: 1px solid rgba(255,255,255,0.5);
display: inline-block;
}
input:hover ~ .checkbox_override
{
background-color: rgba(0, 0, 0, 0.125);
}
input:checked ~ .checkbox_override
{
border-bottom: 1px solid rgba(0,0,0,0.75);
border-top: 1px solid rgba(255,255,255,0.5);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.25);
}
/* Debug chrome */
::placeholder
{
  color:#c6b4cb;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
{
-webkit-box-shadow: 0 0 0 1000px #8c599c inset !important;
-webkit-text-fill-color: white !important;
}
ul.checkbox_li
{
list-style-type: none;
text-align: left;
padding-left: 0.7em;
font-family: sans;
}
form ul.checkbox_li li
{
margin-bottom:0.5em;
}

/* explications sous formulaires */
#explanations
{
padding: 0.2em;
}
#explanations p
{
margin:1.5em;
text-align:left;
line-height:1.5em;
}

/* This allow the motion of the button while overing without displacing the content of the page : vérifier que cela est utilisé ?
.input_wrapper
{
height: 40px;
display: inline-block;
margin-top: 1em;
}*/
/* Sous-menu pour tags ou utilisateur connecté, etc. */
#menu
{
clear: both;
width: 100%;
padding: 0;
box-shadow: 0 0 5px black;
list-style-type: none;
text-align: center;
transform: rotate(-0.5deg);
background-color: #FF8800;
}
#menu li
{
display: inline-block;
margin: 0.5em;
font-size: 0.9em;
margin-left: 0.5em;
margin-right: 0.5em;
}
#menu a
{
text-decoration: none;
}

/* Répétition du logo en + grande des certaines pages */
#logo
{
width: 50%;
margin: auto;
display: block;
}

/* Les listes de quiz */
#triple-column
{
width: 90%;
margin: auto;
margin-top: 1em;
}
.column-1, .column-3, .column-2
{
width: 98%;
float: left;
margin-left:1.5%;
}
.quiz
{
width: 100%;
margin-bottom: 1em;
background-color: #FF8800;
border-radius: 5px;
border-top: 1px solid rgba(255,255,255,0.66);
border-bottom: 1px solid rgba(0,0,0,0.66);
box-shadow: 0 0 5px black;
}
.quiz h3
{
text-align: center;
margin: 1em;
}
.quiz p
{
margin: 1.7em;
text-align: justify;
}  
.quiz p:last-child
{
text-align: center;
}
.quiz-image-wrapper
{
width: 95%;
background-size: cover;
border-radius: 5px;
border-top: 1px solid rgba(0,0,0,0.66);
border-bottom: 1px solid rgba(255,255,255,0.66);
box-shadow: inset 0px 5px 5px rgba(0,0,0,0.33);
background-repeat: no-repeat;
margin: auto;
}
.quiz-image-wrapper img
{
opacity: 0;
width: 100%;
}
#intro
{
margin-top:-100px;
background-color:rgba(0,0,0,0.5);
padding:5px;
border-radius: 5px;
font-size:0.8em;
}
#listsIntro
{
padding:0 1em;
}
#listsIntro h3
{
font-size:1.2em;
}
#listsIntro p
{
font-size:1.1em;
}
#listsIntro blockquote
{
font-size:1em;
}


/* Propriétés générales à mobiles en mode paysage + petites tablettes ou grandes tablettes en mode portrait */
@media screen and (min-width: 480px)
{
    /* header & footer */
    header ul
    {
    margin: 10px 0;
    width:80%;
    }
    header, footer
    {
    font-size: 1em;
    }
    header ul li::after, footer ul li::after
    {
    width: 1px;
    height: 30px;
    display: block;
    float: right;
    content: '';
    margin-left: 10px;
    margin-top: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.25), rgba(255,255,255,0.0));
    }
    header ul li::before, footer ul li::before
    {
    width: 1px;
    height: 30px;
    display: block;
    float: right;
    content: '';
    margin-top: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0.0));
    }
    header ul li:first-child::after, footer ul li:last-child::after
    {
    display: none;
    }  
    header ul li:first-child::before, footer ul li:last-child::before
    {
    display: none;
    }
    header ul li:first-child, footer ul li:first-child
    {
    margin-right: 1em;
    }
    #prompt img
    {
    width: 33%;
    margin: auto;
    display: block;
    }
    #prompt a.button
    {
    font-size: 1em;
    }
    p.error, p.success, p.info, div.error, div.success, div.info
    {
    width: 90%;
    }
    #listsIntro
    {
    padding:0.2em 1em;
    }
}


/* Propriétés générales pour mobiles grandes tablettes et + grande */
@media screen and (min-width: 800px)
{
    /* header & footer */
    header
    {
    font-size: 1.3em;
    height:100px;
    }
    header img
    {
    height:80px;
    width:auto;
    margin-left:10px;
    margin-top: 10px;
    display: inline-block;
    }
    header ul
    {
    margin:30px 0;
    width:80%;
    }
    header ul li, footer ul li
    {
    font-size: 1em;
    margin-right:15px;
    }
    footer
    {
    font-size: 1.2em;
    }
    header ul li::after, footer ul li::after
    {
    width: 1px;
    height: 80px;
    display: block;
    float: right;
    content: '';
    margin-left: 1em;
    margin-top: -20px;
    background: linear-gradient(to top, rgba(255,255,255,0.25), rgba(255,255,255,0.0));
    }
    header ul li::before, footer ul li::before
    {
    width: 1px;
    height: 80px;
    display: block;
    float: right;
    content: '';
    margin-top: -20px;
    margin-right: 1em;
    background: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0.0));
    }
    header ul li:first-child::after, footer ul li:last-child::after
    {
    display: none;
    }  
    header ul li:first-child::before, footer ul li:last-child::before
    {
    display: none;
    }
    header ul li:first-child, footer ul li:first-child
    {
    margin-right: 1em;
    }
    
    /* Formulaires */
    fieldset
    {
    margin:0.5em 10% 0.5em 10%;
    border: 0;
    }
    fieldset label
    {
    width: 100%;
    }
    input[type=submit], input[type=text], input[type=email], input[type=password]
    {
    font-size: 1em;
    }
    input[type=checkbox]
    {
    margin-right: -16px;
    }
    form ul.checkbox_li
    {
    margin:1em 10%;
    }
    /* Contenus textuels, paragraphes, etc. */
    .framed
    {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    background-image: url('../img/background-texture.png');
    font-size:0.8em;
    }
    #explanations
    {
    padding: 0;
    margin:1em;
    }
    #explanations p
    {
    text-align:left;
    margin:1.2em;
    font-weight:normal;
    }
    p.error, p.success, p.info, div.error, div.success, div.info
    {
    line-height: 1.4em;
    }
    #prompt
    {
    width: 50%;
    }
    #prompt h2
    {
    font-size: 1.7em;
    }
    #prompt h3
    {
    font-size: 1.9em;
    }
    #prompt p
    {
    font-size: 1.5em;
    margin-bottom:1.5em;
    }
    #prompt img
    {
    width: 25%;
    }
    nav#tagsList div
    {
    margin: 1em 0.5em;
    text-align:center;
    }

    /* Sous-menu pour tags ou utilisateur connecté, etc. */
    #menu
    {
    font-size: 1.1em;
    }
    #menu li
    {
    margin-left: 1.5em;
    margin-right: 1.5em;
    }

    /* Liste de quizs */
    #triple-column
    {
    width: 95%;
    }
    .column-1,.column-2,.column-3
    {
    width: 31%;
    margin-bottom: 1em;
    }
    .column-1, .column-2
    {
    /*! margin-right: 1.33%; */
    }
    .quiz p
    {
    text-align: left;
    }
    #intro
    {
    margin-top:-0px;
    background-color:rgba(0,0,0,0.0);
    padding:20px 0 0 0;
    border-radius: 5px;
    font-size:1em;
    }
    #listsIntro h3
    {
    font-size:1.2em;
    }
    #listsIntro p
    {
    font-size:1.1em;
    }
    #listsIntro blockquote
    {
    font-size:1em;
    }
}

/* Propriétés générales pour très grands écran */
@media screen and (min-width: 1024px)
{
    header ul
    {
    margin:30px 0;
    }
    #prompt
    {
    width: 60%;
    }
}


/*-----------------Propriétés spécifiques à la page d'accueil --------------*/
#home
{
width: 85%;
background-color: #FF8800;
margin: auto;
text-align: center;
border-radius: 5px;
margin-top: -1em;
padding-top:1.5em;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
}
#home img
{
width: 50%;
margin: auto;
display: block;
}
#home h1
{
text-align: center;
width: 105%;
background-color:  #FF8800;
margin-left: -2.5%;
box-shadow: 0px 0px 5px black;
border-radius: 5px;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.75);
padding-top: 0.25em;
padding-bottom: 0.25em;
background-image: url('../img/background-texture.png');
}
#home h2
{
text-align: center; font-size: 1.3em;
}
#home h3
{
text-align: center;font-size: 1.7em;
}
#home p
{
text-align: center;
line-height: 1.5em;
font-size: 1.1em;
padding: 0.2em;
}
#home input[type="text"]
{
width:90%;
margin-bottom:1em;
}
#home input[type="submit"], #home button
{
margin-top:1em;
font-size: 1em;
}
/*
#home a.button
{
font-size:10px;
}*/
#home .framed
{
font-size:0.9em;
}
#home .engraved
{
font-family: inherit;
}

@media screen and (min-width: 480px)
{
    #home img
    {
    width: 25%;
    }
    #home p
    {
    font-size: 1.2em;
    padding: 0 0.3em;
    }
    #home input[type="text"]
    {
    width:75%;
    }
}
/*-----------------Propriétés spécifiques à la page d'accueil sur grands écrans --------------*/
@media screen and (min-width: 800px)
{
    #home
    {
    width: 65%;
    }
    #home h2
    {
    font-size: 1.7em;
    }
    #home h3
    {
    font-size: 1.9em;
    }
    #home p
    {
    font-size: 1.2em;
    margin-bottom:1.5em;
    }
    #home img
    {
    width: 25%;
    }
}

/*-----------------Pages principalement textuelles (mentions légales, etc.) --------------*/
#page
{
background-color: #FF8800;
width: 75%;
margin: auto;
margin-top: 1em;
margin-bottom: -2.2em;
padding: 0.5em 0.5em 2.5em 0.5em;
text-align: center;
border-radius: 5px;
border-bottom: 1px solid rgba(0,0,0,0.8);
box-shadow: 0 0 5px rgba(0,0,0,0.75);
font-size:1.5em;
border-top: 1px solid rgba(255,255,255,0.5);
}
#page h1
{
box-shadow: 0 0 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);
font-size: 0.9em;
}
#page h2
{
padding-top: 0;
}
#page h2, #page h3, #page p
{
text-align:left;
}
#page p, #page li
{
font-weight:normal;
}
#page ul
{
text-align: left;
padding-left:1.6em;
}
#page .framed, #page .engraved
{
text-align: left;
padding: 0.5em;
margin: inherit;
}
#page img
{
max-width:90%
}
#page figure
{
margin : 1em 2em;
}
#page figCaption
{
font-size: 0.8em;
font-style:italic;
}
#page p, #p li
{
padding-right: 0.2em;
text-align: left;
line-height: 1.3em;
}
#page p.btn
{
padding: 1em 0 1.5em 0;
text-align:center;
font-size:0.7em;
}

@media screen and (min-width: 480px)
{
    #page p.btn
    {
    font-size:1em;
    }
}

@media screen and (min-width: 800px)
{
    #page
    {
    width: 65%;
    }
}


/*----------------- Déclaration générales pour les pages quizs--------------*/
#content-picture div
{
width: 100%;
background-size: cover;
border-radius: 5px 5px 0 0;
border-top: 1px solid rgba(0,0,0,0.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
position:absolute;
z-index:-10;
}
#content-picture img
{
display:none;
}
#content-picture p
{
text-align: center;
font-family: sans;
background-color: rgba(0, 0, 0, 0.25);
padding: 5px;
border-radius: 0 0 5px 5px;
border-top: 1px solid rgba(0,0,0,0.5);
box-shadow: inset 0 3px 5px rgba(0,0,0,0.33);
border-bottom: 1px solid rgba(255,255,255,0.5); 
margin-top: 0;
margin-bottom: 0;
display: none;
}
#content-side
{
float: right;
margin-top: -0.25em;
width: 95%;
margin-bottom: 100px;
}
#content-title h1
{
background-color: #FF8800;
padding: 10px;
margin: 0;
transform: rotate(-0.33deg);
border-radius: 5px 0 0 5px;
border-bottom: 1px solid rgba(0,0,0,0.75);
border-left: 1px solid rgba(0,0,0,0.33);
box-shadow: 0 0 10px black;
border-top: 1px solid rgba(255,255,255,0.5);
position: relative;
z-index: 2;
float:left;
width: 100%;
}
#content-title h1 img
{
width:5%;
display:block;
float:left;
}
#content-title h1 span
{
width:75%;
text-align:center;
display:block;
float:left;
font-size:25px;
}
#content-title h1 img.thumb
{
width:20%;
display:block;
float:left;
opacity:1 !important;
}
#content-title-corner
{
width: 43px;
height:43px;
display:block;
margin-left:-10px;
display :none;
background-image: url('../img/corner.png');
position: relative;
z-index: -1;
} 
#author-date
{
font-size:0.75em;
color: rgba(0,0,0,0.80);
text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
}
#required-time-icon
{
margin-bottom:-3px;
}   
#content
{
width: calc(100% - 53px); /* 10 + 10 + 33 */
border-left: 1px solid rgba(0,0,0,0.33);
border-bottom: 1px solid rgba(0,0,0,0.75);
background-color: #FF8800;
margin-top: -5px;
float: right;
font-size: 1.3em;
border-radius: 0 0 0 5px; 
box-shadow: 0 0 10px black;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
#content i
{
font-size: 0.75em;
}
#content-top-decoration
{
width: calc(100% - 33px); /* 10 + 10 + 33 */
border-top: 1px solid rgba(255,255,255,0.33);
border-radius: 5px 0px 0px 0px; 
box-shadow: 0px 0px 10px black;
height: 2em;
padding-left: 10px;
padding-top:0.5em;
margin-bottom: -5px;
margin-left: 33px;
background-color: #FF8800;
}
#tags
{
background-color: #FF8800;
transform: rotate(-0.5deg);
box-shadow: 0 0 5px black;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.8);
/*! width: 100%; */
clear: both;
}
#tags ul
{
padding-left: 0;
text-align: center;
} 
#tags ul li
{
display: inline-block;
margin: 0.5em;
}
#tags ul li a
{
text-decoration: none;
outline: none;
text-transform: capitalize;
}
#content-side ul.checkbox_li
{
margin: 0;
}
#content-side .error, #content-side .info, #content-side .success
{
margin: 1em;
width: auto;
border-radius: 5px;
}
#content-side #explanations
{
padding: inherit;
margin: inherit;
}
#content-side .framed
{
width: 98%;
}
#licence p
{
text-align: center;
margin: 1.5em auto;
}
#licence p a[href="/participer-financement.html"]
{
font-weight: bolder;
}

/* Bouton permettant de demander l'affichage du quiz */
#showQuestionnaire
{
    display:none;
}
/* Boutons inscription/connexion suite réponse quiz */
.subscribeBtns
{
    display:none;
}
/* Explications de la bonne réponse, cachée avant envoi des réponses */
.help 
{
    display: none;
}
/* Affichage de l'image, suivant si la réponse est bonne ou mauvaise */
.rightResponse, .wrongResponse
{
display:none;
margin-left:5px;
}
.isCorrect .rightResponse, .isNotCorrect .wrongResponse
{
display:inline;
}
.isCorrect em
{
display:inline;
background-color: #00c684;
background-image: url('../img/background-texture.png');
}
.isNotCorrect em
{
display:inline;
background-color: red;
background-image: url('../img/background-texture.png');
}
li.checkbox_li em
{
margin-left:0.5em;
}
#links, #show, .subscribeBtns p
{
margin: 30px;
font-size: 0.7em;
text-align:center;
}
blockquote.help
{
font-style:italic;
font-size: 0.9em;
margin-left:1em;
}
#explanationsTitle
{
font-size:1.1em;
}

/*----------------- Déclaration pour les pages quizs sur grands écrans --------------*/
@media screen and (min-width: 800px)
{
    div#show
    {
    margin-top: 2em;
    }
    #content-picture
    {
    width: 34%;
    transform: rotate(-0.5deg);
    margin-left: -1%;
    background-color: #FF8800;
    margin-top: 1em;
    padding:25px;
    float: left;
    box-shadow: 0px 0px 10px black;
    border-radius: 0px 5px 5px 0px; 
    border-bottom: 1px solid rgba(0,0,0,0.75);
    border-top: 1px solid rgba(255,255,255,0.5);
    }
    #content-picture div
    {
    position:relative;
    }
    #content-picture p
    {
    display: block;
    }
    #content-picture div img
    {
    width: 100%;
    }
    #content-picture img
    {
    display:block;
    }
    #content-title h1
    {
    width:100%;
    }
    #content-title h1 span
    {
    width:90%;
    }
    #content-title h1 img.thumb
    {
    display:none;
    }
    #content-side
    {
    width: 60%;
    }
    #content-side ul.checkbox_li
    {
    margin-left: 1em;
    }
    #content
    {
    opacity: 1;
    padding: 0.5em;
    }
    #content ul:last-child
    {
    padding: 0.5em;
    display: block;
    list-style-type: none;
    font-size: 0.85em;
    }
    #content ul:last-child li
    {
    margin: 0.25em;
    }
    #content ul:last-child h5
    {
    font-size: 1em;
    }
    #content ul:last-child p
    {
    font-size: 0.85em;
    }
    #content ul:last-child li::before
    {
    content: '- ';
    }
    .isCorrect em {/*! display:block; */}
    .isNotCorrect em{/*! display:block; */}
    #links, #show, .subscribeBtns
    p
    {
    text-align:left;
    font-size: 1em;
    }
    #links, subscribeBtns p
    {
    margin: 1.5em;
    }
}

/*----------------- Déclaration générales pour les pages avec des formulaires de connexion, inscription, etc. --------------*/
#signup, #login, #account
{
width: 85%;
margin: auto;
margin-top: 1em;
margin-bottom: -2.2em;
padding-top:0;
padding-bottom: 2.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.8);
border-radius: 5px;
background-color: #FF8800;
box-shadow: 0 0 5px rgba(0,0,0,0.75);
text-align:center;
}
#signup h1, #login h1, #account h1
{
background-color: #FF8800;
box-shadow: 0 0 5px rgba(0,0,0,0.75);
width: 102%;
margin-left:-1%;
border-radius: 5px;
padding-top: 1em;
padding-bottom: 1em;
letter-spacing: 0.5em;
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.66);
font-size:0.9em;
}     
#signup h2, #login h2, #account h2
{
margin-bottom: 0;
}
#signup p, #login p, #account p
{
text-align: left;
padding-left: 1em;
}
#signup .framed .engraved, #login .framed .engraved, #account .framed .engraved
{
text-align: left;
margin: 1em;
}
#signup div.framed, #login div.framed, #account div.framed
{
font-size:0.9em;
margin-left: 1em;
width: 85%;
}

@media screen and (min-width: 480px)
{
    #signup, #login
    {
    width: 75%;
    }
    #signup div.framed, #login div.framed, #account div.framed
    {
    width: 90%;
    }
}

/*----------------- Déclaration pour grands écrans pour les pages avec des formulaires de connexion, inscription, etc. --------------*/
@media screen and (min-width: 800px)
{
    #signup h1, #login h1
    {
    font-size:1em;
    }
    #signup label, #login label
    {
    /*! width: 30%; */
    }
    ul.checkbox_li
    {
    text-align:left;
    padding: 0;
    }
    li.checkbox_li
    {
    width:100%;
    }
    #signup label.check
    {
    display:inline;
    }
    #signup div.framed, #login div.framed, #account div.framed
    {
    width: 95%;
    }
    /*
    #signup label.check, #login label.check
    {
    margin-left: 20%;
    }*/
}

@media screen and (min-width: 1024px)
{
    #signup, #login, #account
    {
    width: 60%;
    }
}