1357 lines
23 KiB
CSS
1357 lines
23 KiB
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:50px;
|
|
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: 1em;
|
|
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);
|
|
}
|
|
::placeholder
|
|
{
|
|
color:#c6b4cb;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* 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:85%;
|
|
}
|
|
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%;
|
|
}
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
blockquote.help
|
|
{
|
|
margin-left:0;
|
|
}
|
|
#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%;
|
|
}
|
|
} |