/* ----------------------------------- divers classique --------------------------- */
span.sauvegarde {
	font-size:x-small;
	font-weight:normal;
}

span.object1 {
	text-decoration:underline;
	font-weight:bold;
}
span.object2 {
	font-style:italic;
	font-weight:bold;
}
span.object3 {
	font-style:italic;
}

span.important {
	color:#FF3333;
}

.justifier{
	text-align:justify;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}
.center{
	text-align:center;
}


.signature{
	text-align:right;
	font-style:italic;
	font-weight:bold;
}

/* ---------------------------------- page Accueil -------------------------*/
span.importantRom {
	color:#FF3333;
}

p.contenuDossier{
	font-size:smaller;
}

h1.miniTitre{
	font-style:normal;
	font-weight:100;
	font-size:x-small;
	text-align:center;	
}

span.miniTitre{
	text-decoration:underline;	
	font-size:x-small;
	font-style:normal;
	font-weight:100;	
}

h1 span.lienSousH1{
	text-decoration:underline;	
	font-size:x-small;
	font-style:normal;
	font-weight:100;	
}

div.blocAccueil {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	margin:20px 0px 10px 0px;
}

div.blocAccueil1 {
	width:50%;
	vertical-align:top;
}
div.blocAccueil2 {
	width:50%;
	vertical-align:top;
}

div.imageAccueil {
	margin:auto 10px auto 10px;	
	vertical-align:middle;
	text-align:center;
	/*order: 2;*/
}
div.menu{
	vertical-align:top;
	min-width:120px;
	flex: 1;
	/*order: 3;*/
}
div.texteAccueil{
	margin-top:20px;
	min-width:200px;
	flex: 50%
	/*order: 1;*/
	text-align:justify;
}
div.ressource{
	text-align:justify;
	/*order: 4;*/
}

/* ----------------------------------- Balise par défaut --------------------------- */
ul{}
p{}
li{}
td{
	text-align:center
}
table{border:0px;}
/* ----------------------------------- page --------------------------- */
div.contenu {
	text-align:justify;
}
body {
	color:#FFFFFF;
	background-color:#4445A1;
	font-family: Droid Sans,Tahoma,Verdana,Arial, Helvetica;
} 
/* Le bloc titre avec image ou non et le titre en dessous */
div.blocTitre{
	text-align:center;
}

/* La cadre entourant le contenu de la page */
div.cadre2Soluce{
	/* padding:10px; Pas de padding, on ne le met que si on met une image du jeu dans le cadre. Sinon, le padding du cadre extérieur suffit */
	margin:0px;
	border:0px;
	background-color:#4445A1;
}
/* La cadre entourant le cadre 2 */
div.cadre1Soluce{
	width:1024px;
	margin:auto;
	border:0px; 
	
	padding:16px 16px;
	border:5px dashed #ccc;	
	/* par défaut, on met un border dashed gris mais le mieux, c'est de mettre un cadre de 16px avec une image du jeu
	border:0px;	
	background-image:url(DragonQuest_Fichiers/cadre.png);
	background-repeat:repeat;
	*/
	background-color:#4445A1;
}

/* Attention, le paddind compte dans le div d'où l'ajout de 32x2 (regarder en dessous) */
/*@media screen and (max-width: 1200px) {
	div.cadre1Soluce{
		width:996px;
	}
}*/
@media screen and (max-width: 1120px) {
	div.cadre1Soluce{
		width:896px;
	}
}
@media screen and (max-width: 960px) {
	div.cadre1Soluce{
		width:736px;
	}
}
@media screen and (max-width: 800px) {
	div.cadre1Soluce{
		width:576px;
	}
}
@media screen and (max-width: 640px) {
	div.cadre1Soluce{
		width:416px;
	}
}
@media screen and (max-width: 480px) {
	div.cadre1Soluce{
		width:288px;
	}
}
@media screen and (max-width: 320px) {
	div.cadre1Soluce{
		width:288px;
	}
}


.sansMarge{margin-left:0px;margin-top:0px;margin:0px;}
a.pointeurLien {
	cursor:pointer;
}

/* lien basique *//*color:#ff0000;*//*#ffffcc;*/
a{
	color:#ffffcc; font-weight: bold; 		text-decoration:none; 
}
a:link {
	color:#ffffcc; font-weight: bold; 		text-decoration:none;
}
a:visited {
	color:#ffffcc; font-weight: bold; 		text-decoration:none;
}
a:hover{
	color:#ffffcc;  font-weight: bold; 	text-decoration:underline;
	border-bottom:1px;
} 
img.flecheRetour{
	vertical-align: middle;
}
/* ################################################ Retour ######################################################## */
table.tableRetour{
	border:4px;
	border-style:ridge;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
td.caseRetour{
	text-align:center;
}
span.styleRetour{
	font-size:large;
	font-weight:bold;
	color: #00FF33;
}
a.lienRetour{color: #00FF33;}
a.lienRetour:link{color: #00FF33;} 
a.lienRetour:hover {color: #00FF33;}
a.lienRetour:visited {color: #00FF33;}
/* ----------------------------------- titres --------------------------- */
/*h1*/
h1.titre{
	text-align:center;
	font-weight:normal;
	font-size:medium;
}
span.titre{
	font-size:x-large;
	text-decoration:underline;
}
/* Copié collé car c'est ridicule de mettre titre,... c'est le principe de h1 */
h1{
	font-family: "Times New Roman", Georgia, Serif;
	text-align:center;
	font-weight:normal;
	font-size:medium;
}
h1 span{
	font-size:x-large;
	text-decoration:underline;
}
/*h2*/
h2.sousTitre{
	padding-top:30px;
	padding-left:40px;
	font-size:medium;
	font-weight:normal;
}
span.sousTitre{
	font-weight:bold;
	text-decoration:underline;
	font-size:large;
}
/* Copié collé car c'est ridicule de mettre sousTitre,... c'est le principe de h2 */
h2{
	font-family: "Times New Roman", Georgia, Serif;
	padding-top:30px;
	padding-left:40px;
	font-size:medium;
	font-weight:normal;
}
h2 span{
	font-weight:bold;
	text-decoration:underline;
	font-size:large;
}
/*h3*/
h3.sousSousTitre{
	padding-left:40px;
	font-weight:normal;
	font-size:medium;	
}
span.sousSousTitre{
	text-decoration:underline;
	font-size:large;
}
/* Copié collé car c'est ridicule de mettre sousSousTitre,... c'est le principe de h3 */
h3 {
	font-family: "Times New Roman", Georgia, Serif;
	padding-left:40px;
	font-weight:normal;
	font-size:medium;	
}
h3 span {
	text-decoration:underline;
	font-size:large;
}
/*h4*/
h4.sousSousSousTitre{
	padding-left:60px;
	font-weight:normal;
	font-size:medium;	
}
span.sousSousSousTitre{
	text-decoration:underline;
	font-size:medium;
}
/* Copié collé car c'est ridicule de mettre sousSousSousTitre,... c'est le principe de h4 */
h4 {
	font-family: "Times New Roman", Georgia, Serif;
	padding-left:60px;
	font-weight:normal;
	font-size:medium;	
}
h4 span {
	text-decoration:underline;
	font-size:medium;
}

h2.sansStyle {
	font-size:medium ;
	font-weight:normal;	
}

/* Les titres avec des images autour */
div.titreImage {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: space-between;
	padding:2px 0px 2px 0px;	
}
div.titreImage div {
		display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;		
}
div.titreImage img {
    margin: 0px auto;	
		padding:2px 2px;
}
div.divTitre1 {
	justify-content:center;
	margin: 0px 0px 0px 40px;
}
div.divTitre1 h1 {
	font-size:larger;
	padding:2px 0px;
	margin: auto;	
}
div.divTitre2 {
	justify-content:flex-start;
	margin: 20px 0px 0px 40px;
}
div.divTitre2 h2 {
	font-size:larger;
	padding:2px 2px;
	margin: auto;	
}
div.divTitre3 {
	justify-content:flex-start;
	margin: 20px 0px 0px 40px;
}
div.divTitre3 h3 {
	font-size:larger;
	padding:2px 2px;
	margin: auto;	
}
div.divTitre4 {
	justify-content:flex-start;
	margin: 20px 0px 0px 40px;
}
div.divTitre4 h4 {
	font-size:larger;
	padding:2px 2px;
	margin: auto;	
}
/*
div.sousTitreImage {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	
	align-items: space-between;
	padding:2px 0px 2px 0px;	
}
div.sousTitreImage div {
		display: flex;
		flex-direction: column;
		justify-content:space-around;
}
div.sousTitreImage h2 {
	font-size:larger;
	padding:2px 0px;
	margin: auto;	
}
div.sousTitreImage img {
    margin: auto;	
		padding:2px 0px;
}
*/


/*--------------------- Soluce ------------------*/
img.boutonManette { 
	margin: 0px 1px 0px 1px;
	padding: 0px;
}
td.soluceMenu{
	font-size:small;
}
span.titreParagraphe{
	font-style:italic;
	font-weight:bold;
	font-size:large;
}

p.pageNotice{
	text-align:center;
	overflow: auto;
}
img.pageNotice{
	width:950px;
}
@media screen and (max-width: 960px) {
	img.pageNotice{
		width:800px;
	}
}

/* Remplacement des tableaux d'images par des div */
div.blocImages {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content:space-around;
	align-items: space-between;
	padding:2px 0px 2px 0px;
}
div.caseImage {
		display: flex;
		flex-direction: column;
		justify-content:space-around;
}
div.caseImage img {
    margin: auto;	
		padding:2px 0px;
}
div.caseImage div {
    margin: auto;	
		padding:2px 0px;
}
div.caseImage div img {
    margin: auto;	
		padding:2px 0px;
}
/* Le même avec image puis texte */
div.blocImageTexte{
	 flex-wrap: nowrap;
	 flex-direction: row;
	 margin: 18px;
	 display: flex;
}
div.blocImageTexte div.caseImage {
    vertical-align: middle;
    margin: auto;	
}
div.blocImageTexte div.caseImage img {
	padding:5px;	
}
div.blocImageTexte div.caseTexte {
	vertical-align: middle;
	text-align:justify;
	margin: auto;
	padding-left:10px;
	flex:1;
}
div.blocImageTexte div.caseMultiTexte {
	display: flex;
  flex-direction: column;
	justify-content:space-around;	
	flex:1;
}
div.blocImageTexte div.caseMultiTexte div.caseTexteGauche {
	vertical-align: top;
	padding-right:20px;
	text-align:justify;
}
div.blocImageTexte div.caseMultiTexte div.caseTexteDroite {
	vertical-align:bottom;
	padding-left:20px;
	text-align:right;
}


/* Traduction */
div.blocImageTexte div.traductionGauche {
	border-right:solid 10px;
	padding-right:10px;
	vertical-align:top;
	width:50%;
}
div.blocImageTexte div.traductionGauche div {
	text-align:justify;
}

div.blocImageTexte div.traductionDroite {
	border-left:solid 10px;
	padding-left:10px;
	vertical-align:top;
	width:50%;

}
div.blocImageTexte div.traductionDroite div {
	text-align:justify;
}


.retranscription {
	font-style:italic;
}

/* Le même avec image puis texte en vertical */
div.blocImageTexteVertical{
	 flex-wrap: nowrap;
	 flex-direction: column;
	 margin: 18px;
	 display: flex;
}
div.blocImageTexteVertical div.caseImage {
    vertical-align: middle;
    margin: auto;	
}
div.blocImageTexteVertical div.caseImage img {
	padding:5px;	
}
div.blocImageTexteVertical div.caseTexte {
	vertical-align: middle;
	margin: auto;
	padding-left:10px;
	flex:1;
}
/*
div.blocImages {
	text-align:center;
	width:99%;
	float:left;
	margin-bottom: 30px;
	margin-top: 0px;	 
}
div.caseImage {
	 text-align:center;
	 display:inline-block;
	 margin:3px;
	 min-width:30%
}
div.caseImage img {padding : 8px}
*/


/*---------------------- Test -------------------*/
.testEnBref{
	text-align:left;
	font-size:larger;
	font-weight: bold;	
}

span.testCategorieNote{
	color:#FF6666;
}

td.recapTest {
	text-align:justify;
	padding:5px;
}

.testNote{
	text-align:center;
}

.testNoteGenerale{
	text-align:center;
	font-weight: bold;
}


span.testNoteGenerale{
	font-size:larger;
	color:#FF6666;	
}

td.testPlusMoins{
	font-size:smaller;
	text-align:justify;
}

td.testEnTetePlusMoins{
	text-align:center;
	font-weight: bold;
	width:350px;	
}

span.testRetourTest{
	font-size:larger;
	font-weight:bold;
}

td.testRetourTest{
	text-align:center;
}

span.testLibellesBandeauInfo{
	font-weight:bold;
}