/* SKIN.CSS */

/*	Couleurs de la charte :
Bleu : #0099D2
Orange : #EE7700
Gris fonc�: #B3B3B3
Gris clair : #cccccc	*/

/* FONT */
@font-face {
	font-family: 'fontello';
	src: url('font/fontello.eot');
	src: url('font/fontello.eot') format('embedded-opentype'),
	url('font/fontello.woff') format('woff'),
	url('font/fontello.ttf') format('truetype'),
	url('font/fontello.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*	STYLAGE DE BASE	*/
html, body {
    height: 100%;
}
body{
	font-family: arial, sans-serif;
	font-size:1em;
	color:black;
	background:#f2f2f2 url("img/crossword.png") repeat fixed 0 0;
	margin:0;
}
a{
	text-decoration: none;
	color:#EE7700;
}
a:hover{
	text-decoration: underline;
}
a img{
	border-width:0px;
}
p{
	hyphens: auto;
	margin:0;
}
.hidden {
    display: none;
}
ul, ol {
    text-align: left;
}
table{
	border:1px solid #0099D2;
	border-collapse: collapse;
	margin: 1.5em auto;
}
td, th{
	border:1px solid #0099D2;
	padding: 0 2px;
}
th {
    background-color: #cccccc;
}
table>caption{
	font-weight: bold;
	margin-bottom: 0.5em;
}
table p{
	margin: 0.1em 0;
}
td.num_tbtd p{
	text-align:right;
}
td.word_tbtd p{
	text-align:center;
}

/* ROOT */
#root {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/*	HEADER	*/
#header{
	background-color: #0099d2;
	flex: 0 0 auto;
}
header h1 {
    color: #ffffff;
    left: calc(50% - 490px);
    line-height: 60px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    right: calc(50% - 620px);
    text-align: right;
    text-overflow: ellipsis;
    top: 0;
    white-space: nowrap;
}

/*	TOOLS	*/
#tools {
    margin: 0 auto;
    max-width: 1280px;
	padding: 5px 1em;
}
#tools .out {
    list-style-type: none;
	margin: 0;
	padding: 0;
	height:50px;
}
#tools .out li{
	display:inline-block;
	margin-right: 1em;
}
.out_i > span{
	display:none;
}
.out_i{
	display:inline-block;
	width:50px;
	height:50px;
	background:url("img/menu.svg") no-repeat top;
	background-size:100%;
	box-sizing: border-box
}
.outCat_sel_yes .homeBtn{
	background-position: 0 0;
}
.outCat_sel_yes .glosBtn{
	background-position: 0 -60px;
}
.homeBtn{
	background-position: 0 -120px;
}
.glosBtn{
	background-position: 0 -180px;
}
a.out_i:hover{
	opacity:0.9;
}

/*	ACCESSIBILITY	*/
#accessibility{
	position: absolute;
	top: 0;
	right:0;
	margin:0;
	font-size: 60%;
	list-style-type: none;
	padding:0;
	margin:0;
	z-index:2;
}
#accessibility li{
	display:inline-block;
	margin:0 1em;
}
#accessibility a{
	opacity:0.2;
	color: #cccccc;
	text-decoration: none;
}
#accessibility:hover a{
	opacity:0.5;
}
#accessibility a:focus{
	opacity:1;
}

/*	MAIN	*/
main{
	padding:0 1em;
	flex: 2 1 auto;
	max-width:1280px;
	width:100%;
	box-sizing:border-box;
	align-self:center;
	display:flex;
}
#content {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 5px #b3b3b3;
    margin: 20px 0 1em;
	position:relative;
	display: flex;
    width: 100%;
}
#content::before {
	background:url("img/mainSel.png") no-repeat top left;
    display: block;
    height: 15px;
    width: 25px;
	content:"";
	position:absolute;
	top:-15px;
	left:12px;
}
.glos #content::before {
	left:78px;
}

/*	CONTENT	*/
.mainContent {
    flex:2 1 auto;
    padding: 1em;
    position: relative;
	vertical-align: top;
}
.exo_co {
    margin-top: 60px;
}
.refItem {
    color: #999;
    font-size: 0.7em;
    text-align: right;
}
.question {
    background: linear-gradient(to left, #ffffff, #0099D2, #ffffff) no-repeat center bottom / 100% 1px;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
}
.headerQ {
    text-align: center;
}

/*	MENU	*/
.menu {
    border-right: 1px solid #0099d2;
    flex: 0 0 250px;
    padding: 1em;
}
.tplIco .deco {
    background: transparent url("img/logo.png") no-repeat scroll center center / 200px auto;
    display: block;
    height: 250px;
    width: 250px;
}
.mnuOpn {
    flex: 0 0 20px;
}
.mnuOpnBtn, .mnuClosedBtn {
    background: url("img/menuCls.svg") no-repeat top left / 100% auto;
    display: block;
    height: 42px;
    width: 20px;
	margin-top: 15px;
}
.mnuOpnBtn{
	background-position: -2px 0;
}
.mnuClosedBtn {
    background-position: 0 -43px;
}
.mnuOpnBtn > span, .mnuClosedBtn > span {
    display: none;
}
.tplMainMnu_closed .menu {
    display: none;
}
.tplIco {
    text-align: center;
	margin-top:1em;
}
.menu .btnOff {
    visibility: hidden;
}
.mnuSrlUpBtn > span, .mnuSrlDwnBtn > span {
    display: none;
}
.mnuSrlUpBtn, .mnuSrlDwnBtn{
	display:block;
	width:250px;
	height:22px;
	background:url("img/navScroll.svg") no-repeat;
	background-size:100%;
}
.mnuSrlUpBtn{
	background-position: 0 0;
}
.mnuSrlDwnBtn{
	background-position: 0 -28px;
}
.mnuSrlUpBtn:hover, .mnuSrlDwnBtn:hover{
	opacity:0.9;
}
#outline > ul {
    max-height: 600px;
    position: relative;
}
#outline ul {
    list-style-type: none;
    padding: 0;
	margin:0.5em 0;
}
#outline li {
    line-height: 150%;
	position:relative;
	padding-left:18px;
}
.mnu_sel_yes {
    background-color: #0099D2;
    color: #ffffff;
}
.mnu_l {
    padding:0.2em;
}
#outline a {
    color: #4c4c4c;
}
#outline a.seen::after,
#outline span.seen::after {
	content:"";
	position:absolute;
	left:0;
	top:4px;
	width:16px;
	height:16px;
	background:url("img/check.svg") no-repeat 0 -31px / 16px auto;
}

/*	TOOLBAR	*/
#navigation {
    top: 35px;
    position: absolute;
    right: 40px;
	z-index: 10;
}
.pageTurner ul {
    list-style-type: none;
	margin: 5px 0 0;
	padding: 0;
}
.pageTurner li {
    display:inline-block;
	margin-left: 0.5em;
}
.btnNav > span{
	display:none;
}
.btnNav, .btnCorrection a::before, .btnReset a::before, .attachBtn::before, .attachBtn_act::before{
	display:inline-block;
	width:30px;
	height:30px;
	background:url("img/toolbar.svg") no-repeat top;
	background-size:100%;
	box-sizing:border-box;
}
.btnCorrection a::before{
	background-position:0 0;
}
.btnReset a::before {
	background-position:0 -35px;
}
.prevBtn{
	background-position: 0 -70px;
}
.nextBtn{
	background-position: 0 -105px;
}
.btnCorrection a.toggleButtonOn::before, .btnCorrection:hover a::before{
	background-position:0 -140px;
}
.btnReset:hover a::before{
	background-position:0 -175px;
}
.prevBtn:hover{
	background-position: 0 -210px;
}
.nextBtn:hover{
	background-position: 0 -245px;
}
.btnCorrection a::before, .btnReset a::before, .attachBtn::before, .attachBtn_act::before {
	content:"";
	vertical-align: middle;
	margin-right:10px;
}
.bkSolResOut {
	background:linear-gradient(to left, #ffffff, #cccccc);
    top: 35px;
    height: 40px;
    left: 40px;
    position: absolute;
    right: 40px;
	padding-bottom: 0.2em;
}
.btnCorrection, .btnReset {
    display: inline-block;
    line-height: 40px;
    margin-left: 2em;
}
.btnReset {
    display: inline-block;
}
.btnQuiz {
    display: inline-block;
    height: 40px;
	color:#0099D2;
	font-weight:bold;
}
.btnQuiz:hover, .toggleButtonOn {
	color:#EE7700;
	text-decoration:none;
}
.btnQuiz > span {
    vertical-align: middle;
}
.scoreBox {
    display: inline-block;
    font-weight: bold;
    line-height: 40px;
    margin-left: 2.5em;
}
.subQuiz .scoreBox {
    margin-left: 0;
}
.answBest {
	color:#009B46;
}
.answWorst {
	color:#ee1c25;
}

/*	FOOTER	*/
footer {
    margin: 0 auto;
    max-width: 1280px;
    text-align: right;
	flex:0 1 auto;
}

/*	GLOS	*/
.glos .refOutline{
	background-color: #cccccc;
	margin: 1em;
	margin-bottom: 20px;
	padding: 5px;
	text-align: center;
}
.mField_ti{
	font-weight: bold;
	color: #4c4c4c;
}
.glos .refOutlineEntry, .glos .mField_ti{
	margin: 1em;
	font-weight: bold;
	color: #4c4c4c;
}
.glos .refOutlineEntry a{
	color:#0099d2;
	text-decoration:none;
}
.glos .refOutlineEntry a:hover{
	text-decoration:underline;
}
.glos .refCateg{
	margin: 1em 0em;
	color: #4c4c4c;
	font-size: 2em;
}
.glos dfn, .glos dt{
	color: #4c4c4c;
	font-weight: bold;
}
.glos dd{
	margin-left:15px;
}

/*	QUIZ	*/

/* --- QCU/QCM STYLES ------------------------------------------------------- */
table.choiceList, table.choiceList td {
    border: none;
}
.choiceList_in input {
    height: 18px;
    width: 18px;
	cursor:pointer;
}
.choice .label{
	cursor:pointer;
}
.assmntSolUnche .chExpln, .assmntSolWrong .chExpln{
	color:#ee1c25;
}
.assmntSolCheck .chExpln, .assmntSolRight .chExpln{
	color:#009B46;
}
.assmntSolUnche .chExpln a, .assmntSolWrong .chExpln a{
	color:#ee1c25;
	text-decoration:underline;
}
.assmntSolCheck .chExpln a, .assmntSolRight .chExpln a{
	color:#009B46;
	text-decoration:underline;
}
.assmntSolUnche .choiceList_in::after, .assmntSolCheck .choiceList_in::after, .assmntSolRight .choiceList_in::after, .assmntSolWrong .choiceList_in::after {
	content:"";
	display:inline-block;
	width:20px;
	height:18px;
	background:url("img/check.svg") no-repeat top;
	background-size:100%;
	box-sizing:border-box;
	margin-right: 10px;
}
.assmntSolCheck .choiceList_in::after {
	background-position:0 0;
}
.assmntSolUnche .choiceList_in::after {
	background-position:0 -20px;
}
.assmntSolRight .choiceList_in::after {
	background-position:0 -40px;
}
.assmntSolWrong .choiceList_in::after {
	background-position:0 -60px;
}

/* --- CATEGORISATION/ORDONNANCEMENT ------------------------------------------------------- */
.mtTable {
	width:100%;
	border-collapse: separate;
	border-spacing:5px;
	border:none;
}
.mtTable td {
	vertical-align: top;
	border:none;
}
.mtTdBasket {
	width:30%;
	padding: 0px;
	margin: 0px;
}
.mtTdBasketSol {
	display: none;
}
.mtTdArrow {
	width: 20px;
	background-image:url("img/quiz/dragArrow.gif");
	background-repeat: no-repeat;
	background-position: center;
}
.mtTdSol{
	width:50%;
}
.mtTdDropCont {
	padding: 0px;
	margin: 0px;
}
.mtTdBasket .ddBasket, .mtTdBasket .ddBasketCatch {
	min-height:250px;
}
.mtTdHeading {
	text-align: center;
}
.olTableSol {
	width: 100%;
}
.ddDropCatch {
	border: 1px solid #4463A1;
}
.mtTdDropCont .ddDropCatch,
.mtTdSol .ddDropCatch{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.ddDropCont {
	padding: 2px;
}

.mtLabel p, .mtLabelSol p {
	text-indent: 0;
	margin: 0;
	padding: 0;
	font-size: 1.1em;
}
.ddLabel p, .ddDropCont .ddLabel p {
	font-size: 1.1em;
}

/*	En phrase	*/
.ddBasket, .ddRepArea{
	margin-bottom: 5px;
}
.ddBasketCatch {
	border: 1px solid #4463A1;
}
.ddBasketCont {
	padding: 2px;
}
.ddBasketSol {
	display: none;
}
.olTdSolHead{
	width: 9em;
	font-weight:bold;
}

/*	En colonne	*/
.ddRepAreaVertical, .ddBasketVertical, .ddRepAreaSolVertical {
    display: inline-block;
    vertical-align: top;
    width: 45%;
}
.ddBasketVertical {
    margin-right: 25px;
}
.olTdSolHeadVertical {
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    width: 45%;
}
.ddBasketSolVertical {
	display:none;
}

/*	Etiquettes	*/
.ddLabel {
	text-align: center;
	border: 1px solid Gray;
	background-color: White;
	padding: 2px;
	width: 10em;
	cursor: move;
	margin: 0.1em 0.1em 0.2em 0.1em;
	display:inline-block;
	zoom: 1; /* Hack inline-block pour ie6 & 7*/
	vertical-align: top;
}
.ddBasketVertical .ddLabel {
    margin: 0.1em 0.05em 0.2em;
    padding: 2px;
    text-align: center;
    width: 98%;
}
.ddBasketVertical .ddLabel  p,
.ddBasketVertical .ddLabel .ddDropCont .ddLabel p {
	text-align:center;
	margin: 5px;
}
.ddDropCatch .ddLabel {
	text-align: center;
	padding: 2px;
	width: 10em;
	margin: 0.1em 0.1em 0.2em 0.1em;
}
.ddRepAreaVertical .ddLabel, .ddRepAreaSolVertical .ddLabel {
    width: 98%;
}

.mtLabel {
	display:inline-block;
	zoom: 1; /* Hack inline-block pour ie6 & 7*/
	vertical-align: top;
	padding: 2px;
	margin: 2px;
	border: 1px solid Gray;
	background-color: white;
	cursor: move;
}
.mtLabel span.myTT_a {
	cursor: move;
}
.mtLabelSol {
	display:inline-block;
	zoom: 1; /* Hack inline-block pour ie6 & 7*/
	vertical-align: top;
	padding: 2px;
	margin: 2px;
	border: 1px solid Gray;
	background-color: white;
	cursor: default;
}
.mtLabelSol span.myTT_a {
	cursor: default;
}

/*	encadr� rose des �tiquettes */
.ddLabelDrag, .olLabelDrag p {
	border: 1px solid #F08080;
}

/* DragOver classes: pour le panier de propositions et pour les r?ponses */
.ddBasketDragOver,
.ddCatchDragOver {
	background-color: #e6f5ff;
	border: 1px solid #80b0f0;
}

/* fin du panier */
.ddBasketEnd,
.ddCatchDragEnd {
	clear: both;
}

/* Si le panier de propositions est vide */
.ddBasketIfEmpty {
	clear: both;
	font-style: italic;
	font-size: 0.9em;
	color: #686868;
	text-align: center;
	padding: 5px 0px;
}

/* En gris ... */
.ddDropTi {
	font-weight: bold;
	background-color: #4463A1;
	color: white;
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.ddDropTi p {
	color:white;
	margin:0;
}

.ddDropContIfEmpty {
	height: 27px;
	background: url("img/quiz/drop.gif") no-repeat center;
}
.mtTdSol .ddDropContIfEmpty,
.olTableSol .ddDropContIfEmpty{
	background: inherit;
}
.ddDropContIfEmpty span {
	display: none;
}

/* R�ponse juste */
.ddLabel_Right,
.assmntResult_Right {
	cursor: default;
	padding: 1px;
	border: 2px solid #00aa00;
}
.ddLabel_Right span.myTT_a,
.assmntResult_Right span.myTT_a {
	cursor: default;
}

/*	R�ponse fausse */
.ddLabel_Wrong,
.assmntResult_Wrong {
	cursor: default;
	padding: 1px;
	border: 2px solid #ed4b36;
}
.ddLabel_Wrong span.myTT_a,
.assmntResult_Wrong span.myTT_a {
	cursor: default;
}

.subQuiz{
	padding:20px 0;
}
.subQuiz_ti{
	border-bottom:1px solid;
	text-transform:uppercase;
}
.choiceMap_map {
	margin:auto;
}

/* --- TEXTE A TROU ------------------------------------------------------- */
.cloze p{
	line-height: 1.6em;
}

.gapAnswer, .exoSol {
    background-color: #cccccc;
    border: 1px solid #ee1c25;
    border-radius: 3px;
    color: #ee1c25;
    margin-left: 5px;
    padding: 2px;
}
.assmntResult_0 > input {
    color: #ee1c25;
}
.assmntResult_1 > input {
    color: #009b46;
}
.gExpln {
    margin-top: 0.5em;
}

/*	TOOLTIP	*/
.tooltip{
	background-color: #cccccc;
	border:2px solid #0099d2;
}
.tooltip_co{
	padding: 2px 4px;
}
.tooltip_ti{
	background-color: #0099d2;
	min-height:20px;
	color:#ffffff;
	text-align:center;
}
.tooltip_x{
	display:inline-block;
	padding:0;
	margin: 0 ;
	box-sizing: border-box;
	width: 16px;
	height: 16px; 
	padding-left: 16px;
	overflow: hidden;
	background: url("img/buttons.svg") no-repeat top;
	background-size: 100%;
	background-position: 0 -32px;
	position:absolute;
	right:2px;
	top:2px;
}

/* === START - SCIMGMGR ===================================================== */
.imgZoom{
	display:inline-block;
}
.scImgZmBtnCls {
	background: url("img/buttons.svg") no-repeat scroll 0px -120px / 100% auto rgba(0, 0, 0, 0);
	position: absolute;
	right: -30px;
	top: -30px;
	display:inline-block;
	box-sizing: border-box;
	height: 30px;
	width: 30px;
	padding-left: 30px;
	overflow: hidden;
}
.scImgZmCvs{
	overflow: visible;
}
.scImgZmCo img{
	background-color: white;
}
.gallery{
	margin:0.2em 1em 0.7em;
}
.gallery_co{
}
.scImgSep{
	display: none;
}
.galPv{
	box-shadow:0 1px 3px 0 #b5b5b5;
	margin: 2px;
	background-color: white;
}
.galPvLnk:hover {
	opacity:0.8;
}
.imgPv{
	border-top: 1px solid gray;
	border-left: 1px solid gray;
	border-right: 1px solid silver;
	border-bottom: 1px solid silver;
}
.scImgGalOver,
.scImgZmOver{
	background-color: white;
}
.scImgGalFra{
	background-color: white;
	box-shadow:0 1px 3px 0 #b5b5b5;
}
.scImgGalImgFra > img {
    max-width: 700px;
	max-height: 500px;
}
.scImgGalCo,
.scImgGalImgFra{
	background-color: white;
	text-align:center;
}
.scImgGalTi{
	font-style: italic;
	color: #0099d2;
	cursor: default;
}
.scImgGalTbr span.scImgGalCount{
	font-style: italic;
	color: #0099d2;
	cursor: default;
}
.scImgGalTbr span{
	display: none;
	position: absolute;
}
.scImgGalTbr a{
	display: block;
	width:16px;
	height:16px;
	position: absolute;
	bottom:3px;
	background:url("img/gallery.svg") no-repeat 0 0 scroll transparent;
}
.scImgGalTbr .scImgGalBtnPrv{
	background-position:0 -135px;
	left:330px;
}
.scImgGalTbr .scImgGalBtnPrv:hover{
	background-position:0 -152px;
}

.scImgGalTbr .scImgGalBtnNoPrv{
	background-position:0 -50px;
	left:330px;
	cursor: default;
}
.scImgGalTbr .scImgGalBtnNxt{
	background-position:0 -67px;
	right:330px;
}
.scImgGalTbr .scImgGalBtnNxt:hover{
	background-position:0 -84px;
}
.scImgGalTbr .scImgGalBtnNoNxt{
	background-position:0 -33px;
	right:330px;
	cursor: default;
}
.scImgGalTbr .scImgGalBtnCls{
	background-position:0 0;
	right:5px;
}
.scImgGalTbr .scImgGalBtnCls:hover{
	background-position:0 -17px;
}
.scImgGalTbr .scImgGalBtnPse{
	background-position:0 -169px;
	left:352px;
}
.scImgGalTbr .scImgGalBtnPse:hover{
	background-position:0 -186px;
}
.scImgGalTbr .scImgGalBtnPly{
	background-position:0 -101px;
	left:352px;
}
.scImgGalTbr .scImgGalBtnPly:hover{
	background-position:0 -118px;
}
.scImgZmTi {
	background-color: #e0ecec;
	color:#0099d2;
	font-style:italic;
	text-align:center;
}

/*	RESINFLOW	*/
.resInFlow {
    border: 3px solid #0099d2;
    border-radius: 5px;
    display: inline-block;
    padding: 0.3em;
    position: relative;
}
.resInFlow  .zoom > span{
    display:none;
}
.resInFlow  .zoom {
    position: absolute;
    right: -10px;
    top: -10px;
	display:block;
	width:26px;
	height:26px;
	background:rgba(0, 0, 0, 0) url("img/more.svg") no-repeat scroll 0 0 / 26px auto;
}
table.choiceList  > tbody  {
	display:flex;
	flex-direction:column;
}

/*	RESPONSIVE	DESIGN	*/
@media (max-width: 1280px){ 
	header h1 {
		right: 1em;
		left:150px;
	}
	footer{
		padding:0 1em;
	}
}
@media (max-width: 700px){ 
	body{
		font-size:0.8em;
	}
	.refItem, .btnQuiz > span, .mnuOpn{
		display:none;
	}
	#content::before, body{
		background:none;
	}

	main{
		padding:0;
		order:1;
		margin-top:60px;
	}
	#content{
		border-radius: 0;
		box-shadow: none;
		flex-direction:column;
		margin:0;
	}
	
	#header{
		order:2;
	}
	#header h1{
		right:0;
		left:0;
		background-color: #0099d2;
		font-size: 1.2em;
		padding:0 4em 0 1em;
	}
	#header h1 span{
		line-height:60px;
		padding-right:0.5em;
	}
	#outline ul {
		max-height: 250px;
		text-align: center;
	}
	.tplIco{
		max-height:200px;
	}
	.tplIco .deco {
		background-size: auto 100%;
		display: block;
		height: 100%;
		width: 100%;
	}
	.tplIco .deco:empty {
		height: 200px;
	}
	#accessibility .waiMenu a{
		height: 30px;
		position: absolute;
		width: 30px;
		opacity:1;
		top:13px;
		right:15px;
		color:#fff;
		font-size: 4em;
		line-height: 30px;
	}
	#accessibility .waiMenu a::before {
		font-family:"fontello";
		content:"\e801"
	}
	#accessibility .waiMenu a:hover{
		color:#ee7700;
	}
	.waiMenu a span {
		position:absolute;
		left:-9999px;
	}
	.question {
		margin-bottom: 0.5em;
		padding-bottom: 0;
	}

	.mainContent {
		order:1;
	}
	.menu {
		text-align:center;
		border-right: medium none;
		border-top: 1px solid #0099d2;
		width:100%;
		flex:0 1 auto;
		order:2;
		padding:1em 0;
	}
	.mnuSrlUpBtn, .mnuSrlDwnBtn {
		margin: 0 auto;
		width:150px;
		height:14px;
	}
	.mnuSrlDwnBtn {
		background-position: 0 -17px;
	}
	.bkSolResOut {
		left: 0;
	}
	.exo_co {
		margin-top: 80px;
	}
	footer {
		margin: 1em 0;
		order: 3;
	}
	
	footer > #linkSp {
		padding: 0 1em;
	}
}