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

/*	GENERAL HTML*/
html {
	font-family: sans-serif;
	font-size: 11pt;
	height: 100%;
	width: 100%;
	overflow: hidden; /* for iOS */
	position: fixed; /* for iOS */
}

body {
	margin: 0;
	height: 100%;
}

p {
	line-height: 1.5em;
	margin: 0.3em 0;
}

ul, ol {
	padding-left: 2.5em;
}

strong {
	color: #007B99;
}

input {
	cursor: pointer;
}

table {
	border: 1px solid black;
	border-collapse: collapse;
	margin: 0.3em auto;
}

td, th {
	border: 1px solid black;
	padding: 0 0.2em;
}

table > caption {
	color: gray;
	font-style: italic;
}

table p {
	margin: 0.1em 0;
}

td.num_tbtd p {
	text-align: right;
}

td.word_tbtd p {
	text-align: center;
}

p img {
	vertical-align: middle;
	display: inline-block;
	margin: 1px 0;
}

a {
	color: #007B99;
}

a:hover {
	opacity: 0.8;
}
a.link {
	color: #007B99;
}
a.lnkActivity {
	color: #007B99;
}
a.link:hover {
	color: #007B99;
}
a.lnkActivity:hover {
	color: #007B99;
}
a.infoLink {
	color: #007B99;
	text-decoration: none;
	border-bottom:1px dotted #97CAC3
}
a.infoLink:hover {
	color: #007B99;
	border-bottom:1px dotted #007B99
}

.acronym_ul::before, .term_ul::before, .book_ul::before {
    content: "✩ ";
}

h4, h5, h6 {
	font-size: 1em;
}

q::before, q::after {
    content: "";
}

#header button:focus {
	outline: 2px dotted #007B99;
}

#header a:focus {
	outline: 2px dotted #007B99;
}

#footer button:focus {
	outline: 2px dotted #007B99;
}

#footer a:focus {
	outline: 2px dotted #007B99;
}

#content button:focus {
	outline: 2px dotted #007B99;
}

#content a:focus {
	outline: 2px dotted #007B99;
}

#outline button:focus {
	outline: 2px dotted #007B99;
}

#outline a:focus {
	outline: 2px dotted #007B99;
}

.hidden {
	display: none;
}

/* Figcaption */
figure {
	text-align: center;
	margin: 1em;
}

figcaption, figcaption a {
	color: gray;
	text-decoration: none;
}

figcaption .collapsed .descBlock_closed::before {
	font-family: "fontello";
	content: "\e81a";
	margin-right: 5px;
}

figcaption .collapsed .descBlock_open::before {
	font-family: "fontello";
	content: "\e81b";
	margin-right: 5px;
}

figcaption .tooltip_a::before {
	color: #FFFFFF;
	content: "\e829";
	font-family: "fontello";
	font-size: 90%;
}

figcaption .tooltip_a {
	background-color: #97CAC3;
	cursor: pointer;
	display: inline-block;
	height: 1.36em;
	margin-left: 0.34em;
	vertical-align: bottom;
	width: 1.36em;
}

figcaption .tooltip_a:hover {
	background-color: #007B99;
}
figcaption .tooltip_a:hover::before {
	color: #FFFFFF;
}

figcaption .tooltip_a > span {
	display: none;
}

figcaption .desc.collBlk_open {
	background-color: #C2EBEC;
}

/*	TEMPLATE ELEMENTS */

/* program & activity */
.default .root,
.default #main,
.default #outline > ul { /* Must be set on all parent flex items of an overflowing item */
	min-height: 0;
	overflow: hidden;
}

body.default {
	background-color: #EEE;
}

body.default .root {
	margin: 0 auto;
	max-width: 1280px;
	background-color: #FFFFFF;
	color: #000000;
	height: 100%;
	display: flex;
	flex-direction: column;
}

body.default #header {
	background-color: #007C9A url;
	color: #FFFFFF;
	position: relative;
	flex: 0 0 auto;
}

body.default #accessibility {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: .6em;
}

body.default #accessibility li {
	display: inline-block;
	margin: 0 .5em;
}

body.default #accessibility a {
	color: white;
	opacity: 0;
	text-decoration: none;
}

body.default #accessibility a:focus {
	opacity: 0.9;
}

body.default #header h1 {
	margin: 0;
	text-transform: uppercase;
	line-height: 50px;
	font-size: 1.5em;
}

body.noBack.noMenu #header h1 {
	margin-left: 10px;
}

body.floatMenu #header h1,
body.hasMenu #header h1,
body.hasBack #header h1 {
	margin-left: 60px;
}

body.floatMenu.hasBack #header h1,
body.hasMenu.hasBack #header h1 {
	margin-left: 120px;
}

body.default #main {
	position: relative;
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
}

body.default #footer img {
	vertical-align: middle;
}

body.default #footer {
	display: flex;
	flex-direction: row;
	flex: 0 0 auto;
	background-color: #007C9A;
	color: #FFFFFF;
	padding: 1em;
	line-height: 1em;
	font-size: 0.7em;
}

body.default #footer a {
	color: #FFFFFF;
	text-decoration: none;
}

body.default #footer a.copyright {
	margin-right: 5px;
}

body.default #footer .footerInfo {
	flex: 1 1 auto;
}

body.default #footer .madeWith {
	flex: 0 0 auto;
}

body.default #outline {
	flex: 0 0 250px;
	order: 1;
	background-color: #C9E4F3;
	display: flex;
	flex-direction: column;
}
body.default #outline a{
	color: #007B99;
}

body.floatMenu #outline {
	position: absolute;
	padding: 1em;
	z-index: 10;
	box-shadow: 1px 1px 5px #cfcfcf;
}

body.default #outline > .toolBar {
	flex: 0 0 auto;
	order: 4;
}

body.default #outline > .menuToolbar {
	flex: 0 0 auto;
	order: 5;
	display: flex;
}

body.default #outline > .menuToolbar > * {
	flex: 1 1 auto;
}

body.default #outline > .mnuSrlUpFra {
	flex: 0 0 25px;
	order: 1;
	text-align: center;
	position: relative;
}

body.default #outline > .outlineRoot {
	flex: 1 1 auto;
	order: 2;
	position: relative;
}

body.default #outline > .mnuSrlDwnFra {
	flex: 0 0 25px;
	order: 3;
	text-align: center;
	position: relative;
}

body.default #content {
	flex: 1 1 auto;
	order: 2;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
}

body.default #content > section {
	margin: 1em;
}

/* program */
body.program .presentation::before {
	color: #007B99;
	content: "\e80A";
	display: inline-block;
	font-family: "fontello";
	font-size: 130%;
	left: 0;
	position: absolute;
	top: -2px;
}
body.program .progress::before {
	color: #007B99;
	content: "\e80A";
	display: inline-block;
	font-family: "fontello";
	font-size: 130%;
	left: 0;
	position: absolute;
	top: -2px;
}

body.program .presentation, body.program .progress {
	margin: 1em 0;
	padding-left: 1em;
	position: relative;
}

/* activity */
body.htmlActivity #content{
	display: flex;
	flex-direction: column;
}
body.htmlActivity #content > section.htmlActivity{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
body.htmlActivity #content > section.htmlActivity > .section_ti{
	flex: 0 0 auto;
}
body.htmlActivity #content > section.htmlActivity > .section_co{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
body.htmlActivity #content > section.htmlActivity .preamble{
	flex: 0 0 auto;
}
body.htmlActivity #content > section.htmlActivity .urlFrame{
	position: relative;
	flex: 1 1 auto;
	min-height: 600px;
}
body.htmlActivity #content > section.htmlActivity .fragmentFrame{
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* login */
body.login #header h1 {
	margin-left: 1em;
}

body.login #content > section.login {
	margin: 20% 20% 0;
	border: 1px solid #97CAC3;
	border-radius: 1em;
	overflow: hidden;
	background-color: #FFFFFF;

}

body.login #content .login_ti {
	background-color: #97CAC3;
	color: #FFFFFF;
	margin: 0;
	text-align: center;
	padding: 0.4em 0;
}

body.login #content .login_co {
	margin: 1em;
}

body.login #content .login_co p {
	margin: 1em 0;
}

body.login #loginMessage {
	color: red;
	font-style: italic;
}

body.login #main {
	background-color: #bfd9dd;
}

body.login div.loginControls {
	text-align: center;
}

/* menu */
button.backBtn {
	background-color: #97CAC3;
	border: medium none;
	cursor: pointer;
	display: block;
	height: 50px;
	position: absolute;
	top: 0;
	width: 50px;
}
button.menuBtn {
	background-color: #97CAC3;
	border: medium none;
	cursor: pointer;
	display: block;
	height: 50px;
	position: absolute;
	top: 0;
	width: 50px;
}
body.showMenu button.menuBtn:hover {
	background-color: #97CAC3;
	border: medium none;
	cursor: pointer;
	display: block;
	height: 50px;
	position: absolute;
	top: 0;
	width: 50px;
}
button.infoBtn {
	background-color: #97CAC3;
	border: medium none;
	cursor: pointer;
	display: block;
	height: 50px;
	position: absolute;
	top: 0;
	width: 50px;
}
.showInfo button.infoBtn:hover {
	background-color: #97CAC3;
	border: medium none;
	cursor: pointer;
	display: block;
	height: 50px;
	position: absolute;
	top: 0;
	width: 50px;
}
button.backBtn:hover {
	background-color: #007B99;
}
body.showMenu button.menuBtn {
	background-color: #007B99;
}
body.hideMenu button.menuBtn:hover {
	background-color: #007B99;
}
.showInfo button.infoBtn {
	background-color: #007B99;
}
button.infoBtn:hover {
	background-color: #007B99;
}

button.backBtn,
button.menuBtn, body.hideMenu button.menuBtn:hover {
	left: 0;
}

body.floatMenu button.backBtn,
body.hasMenu button.backBtn {
	left: 50px;
}

button.infoBtn, .showInfo button.infoBtn:hover {
	right: 0;
}

.backBtn > span, .menuBtn > span, .infoBtn > span {
	display: none;
}

.backBtn::before, .menuBtn::before, .infoBtn::before {
	display: inline-block;
	font-family: "fontello";
	line-height: 50px;
}
button.backBtn::before {
	color: #FFFFFF;
}
button.menuBtn::before {
	color: #FFFFFF;
}
body.showMenu button.menuBtn:hover::before {
	color: #FFFFFF;
}
button.infoBtn::before {
	color: #FFFFFF;
}
.showInfo button.infoBtn:hover::before {
	color: #FFFFFF;
}
button.backBtn:hover::before {
	color: #FFFFFF;
}
body.showMenu button.menuBtn::before {
	color: #FFFFFF;
}
body.hideMenu button.menuBtn:hover::before {
	color: #FFFFFF;
}
.showInfo button.infoBtn::before {
	color: #FFFFFF;
}
button.infoBtn:hover::before {
	color: #FFFFFF;
}

.backBtn::before {
	content: "\e80e";
	font-size: 1.9em;
}

.menuBtn::before {
	content: "\e80d";
	font-size: 1.5em;
}

.infoBtn::before {
	content: "\e829";
	font-size: 1.5em;
}


.folderChildren ul {
	list-style-type: none;
}

.folderChildren li {
	margin: 0.5em 0;
}

body.hideMenu #outline,
body.hideInfo aside.info {
	display: none;
}

/* METAS INFO */

aside.info .rootInfo,
aside.info .pageInfo,
body.program header.meta,
.activityBlock_desc {
	display: flex;
	font-size: 0.8em;
	padding-top: 10px;
	padding-bottom: 10px;
}

aside.info .rootInfo,
aside.info .pageInfo,
.activityBlock_desc {
	padding-left: 10px;
	padding-right: 10px;
}

aside.info .rootInfo > *,
aside.info .pageInfo > *,
body.program header.meta > * {
	flex: 1 1 auto;
}

aside.info {
	background-color: #C9E4F3;
	color: black;
	padding: 0.1em;
}

aside.info .rootInfo > *:first-child, aside.info .pageInfo > *:first-child,
body.program header.meta > *:first-child, .activityBlock_desc > *:first-child {
	flex: 20 20 auto;
	min-width: 350px;
}

aside.info .rootInfo > *:last-child, aside.info .pageInfo > *:last-child,
body.program header.meta > *:last-child, .activityBlock_desc > *:last-child {
	border-left: 1px solid #97CAC3;
	max-width: 350px;
	padding-left: 1em;
}

aside.info .rootInfo > *:only-child, aside.info .pageInfo > *:only-child,
body.program header.meta > *:only-child, .activityBlock_desc > *:only-child {
	border-left: medium none;
	max-width: inherit;
	padding-left: 0;
}

aside.info .rootInfo em, aside.info .pageInfo em,
body.program header.meta em, .activityBlock_desc em {
	color: #007B99;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
}

.abstract, .organisation, .duration {
	margin: 0 0.5em 1.5em 0;
}

.competences > ul, .themes > ul {
	margin: 0;
	padding: 0 0 0 10px;
}

.competences, .themes {
	margin: 5px 0;
}

/* CONTENT ELEMENTS */
.section_ti a {
	text-decoration: none;
}

h2.section_ti {
	text-transform: uppercase;
	border-bottom: 4px solid #97CAC3;
	color: #007B99;
}

a.anchor {
	color: #DDD;
	text-decoration: none;
	margin-left: 0.2em;
	display: none;
	line-height: 1.1;
}

.section_ti:hover a.anchor,
.info_ti:hover a.anchor,
.block_ti:hover a.anchor {
	display: inline;
}

/*	OUTLINE	*/
#outline ul {
	list-style-type: none;
	padding-left: 1em;
}

#outline > ul {
	margin: 0;
	padding: 0;
}

#outline li {
	color: #007B99;
	margin: 0.5em 0;
}

.pageOutline.outlineRoot > li {
	border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

#outline a {
	text-decoration: none;
}

.pageOutline {
	margin-bottom: 1em;
}

#outline .pageOutline ul {
	margin-top: 0;
}

.outline .pageOutline {
	margin-left: 1em;
}

.pageOutline a {
	line-height: 150%;
	text-decoration: none;
}

.pageOutline a:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.outline .outlineSelect_yes > .outlineLabel {
	background-color: #C9E4F3;
	border-right: 2px solid #007B99;
}

.pageOutline .currentSection_yes {
	background-color: #C9E4F3;
	border-right: 2px solid #007B99;
}

.outline .outlineSelect_yes .pageOutline > ul {
	background-color: rgba(255, 255, 255, 0.5);
	margin-right: 8px;
	border-radius: 5px;
}

/*	icons	*/
#outline li .section_ti_lo, #outline li .activityBlock_ti_lo, #outline li > .outlineLabel > .outlineItem, .segment_ti_lo, .quizList_ti_lo, .folderChildren li a {
	display: block;
	position: relative;
	padding: 0 0.5em;
}

#outline li .section_ti_lo > span, #outline li .activityBlock_ti_lo > span, #outline li > .outlineLabel > .outlineItem > span, .segment_ti_lo > span, .quizList_ti_lo > span, .folderChildren li a span {
	display: inline-block;
	margin-left: 20px;
}

#outline li .section_ti_lo::before, #outline li .activityBlock_ti_lo::before, #outline li > .outlineLabel > .outlineItem::before, #outline li .segment_ti_lo::before, #outline li .quizList_ti_lo::before, .folderChildren li a::before {
	font-family: "fontello";
	position: absolute;
	top: 0;
	left: 0.3em;
}

#outline li .session_ti_lo::before {
	content: "\e80f";
}

#outline li .sequence_ti_lo::before {
	content: "\e810";
}

#outline li .period_ti_lo::before {
	content: "\e811";
}

#outline li .activityBlock_ti_lo::before, #outline li.outlineType_textActivity > .outlineLabel > .outlineItem::before, .folderChildren li.textActivity a::before {
	content: "\e814";
}

#outline li.outlineType_collectionActivity > .outlineLabel > .outlineItem::before, .folderChildren li.collectionActivity > a::before {
	content: "\e815";
}
body.collection #outline ul.outlineRoot > li.outlineType_collectionActivity:first-child > .outlineLabel > .outlineItem::before {
	content: "\F114";
}
body.collection #outline ul.outlineRoot > li.outlineType_collectionActivity:first-child > .outlineSub {
	padding-left:0;
}

#outline li.outlineType_quizActivity > .outlineLabel > .outlineItem::before, #outline .quizList_ti_lo::before, .folderChildren li.quizActivity a::before {
	content: "\e80c";
}

#outline li.outlineType_htmlActivity > .outlineLabel > .outlineItem::before, .folderChildren li.htmlActivity a::before {
	content: "\e816";
}

#outline .section_ti_lo::before, #outline .segment_ti_lo::before {
	content: "\e813";
}

/*	mnuScrl	*/
button.mnuSrlUpBtn, button.mnuSrlDwnBtn {
	border: medium none;
	cursor: pointer;
	display: block;
	height: 25px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	padding: 0;
	background-color: rgba(0, 0, 0, 0.1);
}

.btnOff button.mnuSrlUpBtn, .btnOff button.mnuSrlDwnBtn {
	cursor: default;
	opacity: 0.5;
}

button.mnuSrlUpBtn::before {
	font-family: "fontello";
	font-size: 3em;
	line-height: 25px;
	color: #007B99;
}

.btnOff button.mnuSrlUpBtn:hover::before {
	font-family: "fontello";
	font-size: 3em;
	line-height: 25px;
	color: #007B99;
}

button.mnuSrlDwnBtn::before {
	font-family: "fontello";
	font-size: 3em;
	line-height: 25px;
	color: #007B99;
}

.btnOff button.mnuSrlDwnBtn:hover::before {
	font-family: "fontello";
	font-size: 3em;
	line-height: 25px;
	color: #007B99;
}

button.mnuSrlUpBtn:hover::before {
	color: #007B99;
}

button.mnuSrlDwnBtn:hover::before {
	color: #007B99;
}

button.mnuSrlUpBtn::before {
	content: "\e81d";
}

button.mnuSrlDwnBtn::before {
	content: "\e81c";
}

button.mnuSrlUpBtn > span, button.mnuSrlDwnBtn > span {
	display: none;
}

/*	menuToolbar	*/
.cbkOpenBtn > span::after {
	font-family: "fontello";
	content: "\e81a";
	margin-left: 5px;
}

.cbkCloseBtn > span::after {
	font-family: "fontello";
	content: "\e81b";
	margin-left: 5px;
}

.sldModeBtn > span::after {
	font-family: "fontello";
	content: "\e839";
	margin-left: 5px;
}

.lnkTool > span::after {
	font-family: "fontello";
	content: "\e830";
	margin-left: 5px;
}

.cbkOpenBtn {
	background-color: #97CAC3;
	border: medium none;
	cursor: pointer;
	margin: 4px;
}

.cbkCloseBtn {
	background-color: #97CAC3;
	border: medium none;
	cursor: pointer;
	margin: 4px;
}

.sldModeBtn {
	background-color: #97CAC3;
	border: medium none;
	cursor: pointer;
	margin: 4px;
}

.cbkOpenBtn {
	margin-right: 0;
}

.sldModeBtn {
	margin-left: 0;
}

.cbkOpenBtn > span {
	color: #FFFFFF;
}

.cbkCloseBtn > span {
	color: #FFFFFF;
}

.sldModeBtn > span {
	color: #FFFFFF;
}

.cbkOpenBtn:hover {
	background-color: #007B99;
}

.cbkCloseBtn:hover {
	background-color: #007B99;
}

.sldModeBtn:hover {
	background-color: #007B99;
}

body.sldMode .sldModeBtn {
	background-color: #007B99;
}
.cbkOpenBtn:hover > span {
	color: #FFFFFF;
}
.cbkCloseBtn:hover > span {
	color: #FFFFFF;
}
.sldModeBtn:hover > span {
	color: #FFFFFF;
}

body.sldMode .cbkOpenBtn {
	background-color: #91CCC6;
	cursor: default;
}

body.sldMode .cbkCloseBtn {
	background-color: #91CCC6;
	cursor: default;
}

body.sldMode .cbkOpenBtn:hover {
	background-color: #91CCC6;
	cursor: default;
}

body.sldMode .cbkCloseBtn:hover {
	background-color: #91CCC6;
	cursor: default;
}
body.sldMode .cbkOpenBtn > span {
	color: #FFFFFF;
}
body.sldMode .cbkCloseBtn > span {
	color: #FFFFFF;
}
body.sldMode .cbkOpenBtn:hover > span {
	color: #FFFFFF;
}
body.sldMode .cbkCloseBtn:hover > span {
	color: #FFFFFF;
}

body.floatMenu .sldModeBtn {
	padding: 3px;
}

body.floatMenu #outline > .toolBar a {
	margin-left: 0 !important;
	font-size: 0.9em !important;
}

/*toolBar*/
body.default #outline > .toolBar li {
	display: block;
	margin: 0;
}

body.default #outline > .toolBar a {
	display: block;
	background-color: #97CAC3;
	color:  #FFFFFF;
	border: medium none;
	margin: 4px 4px 0;
	text-align: center;
	padding: 3px;
}

body.richStreamActivity #outline > .toolBar a {
	margin-bottom: 4px;
}

body.default #outline > .toolBar a:hover {
	background-color: #007B99;
	color:  #FFFFFF;
}

/* BALISES */
.block {
	position: relative;
}

.block::before {
	background-color: #007B99;
	border-radius: 1em;
	color: #FFFFFF;
	font-family: "fontello";
	font-size: 1.3em;
	height: 1.84em;
	left: -2.35em;
	min-width: 1.84em;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}

.profInstruction::before {
	background-color: #007B99;
	border-radius: 1em;
	color: #FFFFFF;
	font-family: "fontello";
	font-size: 1.3em;
	height: 1.84em;
	left: -2.35em;
	min-width: 1.84em;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}

.studentInstruction::before {
	background-color: #007B99;
	border-radius: 1em;
	color: #FFFFFF;
	font-family: "fontello";
	font-size: 1.3em;
	height: 1.84em;
	left: -2.35em;
	min-width: 1.84em;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}

.warning {
	border-left: 3px solid #bfd9dd;
	margin: 0 0 1.5em 3em;
	padding-left: 0.5em;
}

.rule {
	border-left: 3px solid #bfd9dd;
	margin: 0 0 1.5em 3em;
	padding-left: 0.5em;
}

.extra {
	border-left: 3px solid #bfd9dd;
	margin: 0 0 1.5em 3em;
	padding-left: 0.5em;
}

.method {
	border-left: 3px solid #bfd9dd;
	margin: 0 0 1.5em 3em;
	padding-left: 0.5em;
}

.reminder {
	border-left: 3px solid #bfd9dd;
	margin: 0 0 1.5em 3em;
	padding-left: 0.5em;
}

.hypothesis {
	border-left: 3px solid #bfd9dd;
	margin: 0 0 1.5em 3em;
	padding-left: 0.5em;
}

.advice {
	border-left: 3px solid #bfd9dd;
	margin: 0 0 1.5em 3em;
	padding-left: 0.5em;
}

.example {
	border-left: 3px solid #bfd9dd;
	margin: 0 0 1.5em 3em;
	padding-left: 0.5em;
}

.definition {
	border-left: 3px solid #bfd9dd;
	margin: 0 0 1.5em 3em;
	padding-left: 0.5em;
}

.warning .block_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}

.rule .block_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}

.extra .block_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}

.method .block_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}

.reminder .block_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}

.hypothesis .block_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}

.advice .block_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}

.example .block_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}

.definition .block_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}

.info .info_ti {
	font-size: 1.2em;
	margin: 0.5em 0;
	color: #007B99;
	font-weight: normal;
}
.block_ti i {
	opacity:0.7;
}

.warning::before {
	content: '\e802';
}

.example::before {
	content: '\e800';
}

.advice::before {
	content: '\e801';
}

.extra::before {
	content: '\e803';
}

.method::before {
	content: '\e805';
}

.hypothesis::before {
	content: '\e806';
}

.rule::before {
	content: '\e807';
}

.reminder::before {
	content: '\e808';
}

.definition::before {
	content: '\e809';
}

.profInstruction {
	border-left: 2px solid #F0EAB1;
	margin: 0 0 1.5em 3.5em;
	padding-left: 0.5em;
	position: relative;
	min-height: 50px;
}

.studentInstruction {
	border-left: 2px solid #F0EAB1;
	margin: 0 0 1.5em 3.5em;
	padding-left: 0.5em;
	position: relative;
	min-height: 50px;
}

.studentInstruction {
	border-color: #97CAC3;
}

.studentInstruction::before, .profInstruction::before {
	content: '\e828';
	border-radius: 2em;
}

.profInstruction::before {
	background-color: #97CAC3;
	color: #FFFFFF;
	left: -2.7em;
}

.studentInstruction::before {
	background-color: #97CAC3;
	color: #FFFFFF;
	font-size: 1.1em;
	left: -3.2em;
}

.studentArea > textarea {
	width: 100%;
}

.visavis {
	display: flex;
	flex-flow: row;
	margin: 1em 0;
}

.visavis > .first {
	margin-right: 0.5em;
	padding-right: 0.5em;
	border-right: 1px solid #97CAC3;
}

.visavis.half-half > .first {
	flex: 1 1 50%;
}

.visavis.half-half > .next {
	flex: 1 1 50%;
}

.visavis.one-two > .first {
	flex: 1 1 33%;
}

.visavis.one-two > .next {
	flex: 1 1 67%;
}

.visavis.two-one > .first {
	flex: 1 1 67%;
}

.visavis.two-one > .next {
	flex: 1 1 33%;
}

.visavis.auto > div {
	flex: 1 1 auto;
}

/*	PART & CHAPTER COLLAPSABLE	*/
.section.collapsed {
	margin: 1em 0;
	overflow: hidden;
	position: relative;
}

.section.collapsed .section_ti {
	background-color: #C9E4F3;
	border: medium none;
	margin: 0;
	padding: 0.5em 1em;
}

.section.collapsed > .section_co {
	padding: 1em 0 1em 1em;
}

.section.collapsed .section {
	position: relative;
}

.section_closed {
	display: block;
	text-decoration: none;
	color: #007B99;
	padding-right: 20px;
}

.section_open {
	display: block;
	text-decoration: none;
	color: #007B99;
	padding-right: 20px;
}

.section_ti .section_closed {
	color: #007B99;
	margin: 0;
}

.section_open::after {
	content: '\e827';
	float: right;
	font-family: "fontello";
}

.section_closed::after {
	content: '\e803';
	float: right;
	font-family: "fontello";
}

.collBlk_closed > .colBlockTgleBtn::before {
	content: "\e803";
	font-family: "fontello";
	margin-right: 5px;
}

.collBlk_open > .colBlockTgleBtn::before {
	content: "\e827";
	font-family: "fontello";
	margin-right: 5px;
}

.colBlockTgleBtn {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #97CAC3;
	padding: 5px;
	line-height: 50px;
}

.section.collapsed > .section_ti > a.anchor {
	position: absolute;
	right: 5px;
	top: 5px;
}

body.tool .collBlk_closed,
body.activity .collBlk_closed,
body.program .collBlk_closed > section,
body.program .collBlk_closed > div {
	display: none;
}

body.program .collapsed > div > a.colBlockTgleBtn > span.labelClosed {
	display: none;
}

body.program .collapsed > div.collBlk_closed > a.colBlockTgleBtn > span.labelClosed {
	display: inherit;
}

body.program .collBlk_closed > a.colBlockTgleBtn > span.labelOpen {
	display: none;
}

*:target {
	background-color: #C9E4F3 !important;
}

#outline:target,
#navigation:target,
#extras:target,
#footer:target,
#content:target {
	background-color: inherit !important;
}

.studentArea > textarea {
	background-color: #F8F8F8;
	border: 1px solid #bfd9dd;
	color: #007B99;
}

/* TOOLTIP */
.tooltip_act {
	background-color: #bfd9dd;
}

.tooltip {
	font-size: 0.8em;
	background-color: #C2EBEC;
	border-radius: 5px 5px 0 0;
	box-shadow: 0 0 6px 0px gray;
}

.tooltip_ti {
	font-size: 1.2em;
	padding: 2px 25px 2px 5px;
	background-color: #97CAC3;
	color: #FFFFFF;
	border-radius: 5px 5px 0 0;
}

.tooltip_co {
	padding: 0 5px 2px 5px;
}

.tooltip p {
	text-align: left;
	margin: 0.1em 0;
	line-height: 1.2;
}

a.tooltip_x {
	position: absolute;
	top: 2px;
	right: 5px;
	color: #FFFFFF !important;
	text-decoration: none;
	font-size: 1.2em;
	font-weight: bold;
}

/* === START - PROGRAM ====================================================== */
body.program .collapsed > .section_co {
	padding-top: 0;
	padding-bottom: 0;
}

body.program .period > .section_co {
	padding-bottom: 0;
}

body.program .section > .section_ti .anchor::before {
	content: "";
}

body.program .section > .section_ti a::before {
	margin-right: 10px;
	font-weight: normal;
	font-family: "fontello";
}

body.program .session > .section_ti a::before {
	content: '\e80f';
}

body.program .collapsed {
	background-color: #C9E4F3;
}

body.program .collapsed .collapsed {
	background-color: #FFFFFF;
}

body.program .collapsed .collapsed .collapsed {
	background-color: #C9E4F3;
}

body.program .collapsed .collapsed .collapsed .collapsed {
	background-color: #FFFFFF;
}

body.program .sequence > .section_ti a::before {
	content: '\e810';
}

body.program .period > .section_ti a::before {
	content: '\e811';
}

body.program .activity .section_ti {
	border-bottom: 2px solid #97CAC3;
	color: #007B99;
	margin: 0.5em 0;
	padding: 0.5em 0 0.2em;
}

body.program .activity .section_co {
	padding-left: 1em;
}

/* === START - QUIZ ========================================================= */
/* --- TEMPLATE STYLES ------------------------------------------------------ */
body.default.quizActivity #content {
	padding: 0;
	display: flex;
	flex-direction: column;
}

body.default.quizActivity #content > aside {
	flex: 0 0 auto;
}

body.default.quizActivity #content > section {
	flex: 1 1 auto;
	display: flex;
}

body.default.quizActivity .iframeContainer {
	position: absolute !important;
	width: 100%;
	height: 100%;
}

body.quiz {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

body.quiz #accessibility {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: .6em;
}

body.quiz #accessibility li {
	display: inline-block;
	margin: 0 .5em;
}

body.quiz #accessibility a {
	color: #EEE;
	text-decoration: none;
}

body.quiz .root {
	margin: 0 1em;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

body.quiz #header {
	flex: 0 0 auto;
}

body.quiz #main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

body.quiz #footer {
	flex: 0 0 auto;
}

body.quiz #content {
	flex: 1 1 auto;
}

body.quiz #navigation {
	flex: 0 0 auto;
}

body.quiz #header h1 {
	text-transform: uppercase;
	border-bottom: 4px solid #97CAC3;
	color: #007B99;
	font-size: 1.3em;
}

body.quiz .quizButtons {
	text-align: center;
	margin-top: 2em;
}

body.quiz .quizButtons a.btnStart::after {
	content: "\e812";
	display: inline-block;
	font-family: "fontello";
	margin-left: 5px;
}

body.quiz .quizButtons a.btnRestart {
	margin-left: 1em;
}

body.quiz .quizButtons a.btnRestart::after {
	content: "\e819";
	display: inline-block;
	font-family: "fontello";
	margin-left: 5px;
}

body.quiz #navigation {
	display: flex;
	margin-top: 3em;
	justify-content: center;
}

body.quiz #navigation > * {
	flex: 0 0 auto;
	margin: 0 2em;
}

body.quiz #navigation > .btnNav.previous {
	order: 1;
}

body.quiz #navigation > .evalCounter {
	order: 2;
}

body.quiz #navigation > .btnNav.next {
	order: 3;
}

body.quiz #navigation > .btnNav.none {
	color: silver;
}

/*	NAVIGATION	*/
#navigation .evalCounter {
	color: #007B99;
	font-size: 1.5em;
	font-weight: bold;
}

#navigation .btnNav {
	background-color: #97CAC3;
	color: #FFFFFF;
	padding: 5px;
	text-decoration: none;
	text-transform: uppercase;
}

body.richStreamActivity .quizListStep a.next {
	background-color: #97CAC3;
	color: #FFFFFF;
	padding: 5px;
	text-decoration: none;
	text-transform: uppercase;
}

body.richStreamActivity .quizListStep a.next {
	margin-top: 0.5em;
	float: right;
}

#navigation .none {
	visibility: hidden;
}

#navigation .btnNav:hover {
	background-color: #007B99;
	color: #FFFFFF;
	opacity:1;
}

#navigation .next > span::after, body.richStreamActivity .quizListStep a.next::after {
	font-family: "fontello";
	content: "\e818";
	margin-left: 5px;
}

#navigation .previous > span::before {
	font-family: "fontello";
	content: "\e817";
	margin-right: 5px;
}

/* --- GENERAL STYLES ------------------------------------------------------- */
.exercice {
	border-left: 2px solid #97CAC3;
	border-radius: 5px;
	padding-left: 10px;
}

.exercice_ti {
	color: #007B99;
}

.quizBody {
	display: flex;
	flex-flow: column;
}

.quizBody > * {
	flex: 0 0 auto;
}

.quizBody > .toolbar {
	order: 1;
}

.quizBody > .question {
	order: 2;
}

.quizBody > .response {
	order: 3;
	margin-top: 2em;
}

.quizBody > .globalExp {
	order: 4;
}

.quizList .quizBody > .toolbar {
	order: 3;
}

.quizList .quizBody > .question {
	order: 1;
}

.quizList .quizBody > .questions {
	order: 2;
}

.toolbar {
	background-color: #bfd9dd;
	display: flex;
}

.toolbar > * {
	flex: 0 0 auto;
}

.toolbar > .scoreBox {
	flex: 3 3 auto;
}

/* Toolbar dans liste de Quiz */
.subQuiz .toolbar {
	background-color: rgba(0, 0, 0, 0.05);
}

.subQuiz .quizBody {
	margin-top: 0;
}

.btnQuiz {
	text-decoration: none;
	font-weight: bold;
	line-height: 2.5em;
	height: 2.5em;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	color: #007B99;
}

.btnQuiz:hover {
	background-color: #97CAC3;
	color: #bfd9dd;
}

.btnQuiz span::before {
	font-family: "fontello";
	font-weight: normal;
	margin-right: 5px;
}

.correction span::before {
	content: "\e81e";
}

.reset span::before {
	content: "\e81f";
}

.scoreBox {
	line-height: 2.5em;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
	text-align: right;
}

.answBest {
	color: #4a8d8a;
}

.answWorst {
	color: #ee1c25;
}

.exoAsw {
	margin-top: 20px;
}

/* --- OPENQUEST ------------------------------------------------------------ */
.openQuestion .block_closed, .openQuestion .block_open {
	text-decoration: none;
}

.openQuestion .block_open::before {
	content: '\e80b';
	margin-right: 5px;
	font-family: "fontello";
}

.openQuestion .block_closed::before {
	content: '\e80a';
	margin-right: 5px;
	font-family: "fontello";
}

.openQuestion .collBlk_open {
	margin-left: 0.5em;
}

/* --- QCU/QCM STYLES ------------------------------------------------------- */
.response_ti {
	font-weight: normal;
	font-size: 1em;
	display: flex;
	flex-flow: row;
	font-style: italic;
	color: gray;
	margin: 0;
}

.response_ti > span:nth-child(-n+2) {
	flex: 0 0 auto;
	width: 5.5em;
}

.response_ti > span:last-child {
	flex: 1 1 auto;
}

ul.choiceList {
	display: flex;
	flex-flow: column;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

li.choiceList_ch {
	flex: 0 0 auto;
	display: flex;
	flex-flow: row;
}

div.choiceList_in {
	flex: 0 0 auto;
	width: 5.5em;
}

div.choiceList_sol {
	flex: 0 0 auto;
	width: 5.5em;
}

div.choiceList_la {
	flex: 1 1 auto;
}

div.choiceList_la p {
	margin-top: 0;

}

.choiceList_sol > input {
	display: none;
}

.choiceList_sol::before {
	font-family: "fontello";
	margin: 0.25em 0.4em 0;
}

.assmntSolRight .choiceList_sol::before {
	content: "\f192";
}

.assmntSolWrong .choiceList_sol::before {
	content: "\f10C";
}

.assmntSolCheck .choiceList_sol::before {
	content: "\e82c";
}

.assmntSolUnche .choiceList_sol::before {
	content: "\f096";
}

/* --- CATEGORISATION/ORDONNANCEMENT ------------------------------------------------------- */
.mtTable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 5px;
	border: 0;
}

.mtTable td {
	border: 0;
}

.mtTdBasket {
	width: 30%;
}

.mtTdBasketSol {
	display: none;
}

.mtTdArrow::before {
	background-color: #97CAC3;
	color: #bfd9dd;
	border-radius: 15px;
	font-family: "fontello";
	font-size: 20px;
	padding: 3px 10px;
}

.ddDropContIfEmpty::before {
	background-color: #97CAC3;
	color: #bfd9dd;
	border-radius: 15px;
	font-family: "fontello";
	font-size: 20px;
	padding: 3px 10px;
}

.mtTdArrow::before {
	content: "\e80a";
}

.ddDropContIfEmpty::before {
	content: "\e80b";
}

.mtTdArrow {
	text-align: center;
	vertical-align: middle;
	width: 30px;
}

.ddDropContIfEmpty {
	height: 30px;
	padding-top: 5px;
	text-align: center;
}

.mtTdSol {
	width: 50%;
}

.mtTdDropCont, .mtTdBasket {
	padding: 0px;
	margin: 0px;
	vertical-align: top;
}

.mtTdBasket .ddBasket, .mtTdBasket .ddBasketCatch {
	min-height: 250px;
}

.mtTdHeading {
	text-align: center;
}

.olTableSol {
	width: 100%;
}

.olTdSolHead {
	width: 9em;
}

.ddBasket {
	margin-bottom: 5px;
}

.ddBasketCatch {
	border: 1px solid #97CAC3;
}

.ddDropCatch {
	border: 1px solid #97CAC3;
}

.ddBasketCont, .ddDropCont {
	padding: 2px;
}

.ddBasketSol, .ddDropContIfEmpty span {
	display: none;
}

.ddRepArea {
	margin-bottom: 5px;
}

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

.ddDropTi {
	font-weight: bold;
	background-color: #97CAC3;
	color: #FFFFFF;
	text-align: center;
}

.mtTdSol .ddDropContIfEmpty, .olTableSol .ddDropContIfEmpty {
	background: inherit;
}

/*Cadre gris des étiquettes */
.ddLabel, .ddLabelSol {
	text-align: center;
	border: 1px solid Gray;
	background-color: White;
	padding: 2px;
	min-width: 10em;
	cursor: move;
	margin: 0.1em 0.1em 0.2em 0.1em;
	display: inline-block;
	vertical-align: top;
}

.ddLabel audio, .ddLabelSol audio {
	max-width: 10em;
}

.mtLabel, .mtLabelSol {
	display: inline-block;
	vertical-align: top;
	padding: 2px;
	margin: 2px;
	border: 1px solid Gray;
	background-color: white;
	cursor: move;
}

.mtLabel span.myTT_a {
	cursor: move;
}

.mtLabelSol, .mtLabelSol span.myTT_a, .ddLabelSol {
	cursor: default;
}

/*Survol des paniers */
.ddBasketDragOver {
	background-color: #bfd9dd;
}
.ddCatchDragOver {
	background-color: #bfd9dd;
}

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

/*Titres des cat�gories et des �tiquettes  */
.ddDropTi p, .ddLabel p, .ddLabelSol p {
	margin: 0px;
	text-align: center;
}

/* 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;
}

/*Réponse juste*/
.ddLabel_Right, .assmntResult_Right {
	cursor: default;
	padding: 1px;
	border: 2px solid #4a8d8a;
}

.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 #ee1c25;
}

.ddLabel_Wrong span.myTT_a, .assmntResult_Wrong span.myTT_a {
	cursor: default;
}

.subQuiz {
	padding: 0 0 20px 0;
}

.subQuiz_ti {
	border-bottom: 1px solid;
}

/* --- TAT / field ------------------------------------------------------- */
.cloze p {
	line-height: 1.6em;
}

.exoInput {
	border: 1px solid #97CAC3;
	border-radius: 3px;
	font-size: 0.9em;
}

.gapInput {
	border: 1px solid #97CAC3;
	border-radius: 3px;
	font-size: 0.9em;
}

.gapSize {
	padding: 2px;
}

.exoInput,
.gapInput,
.gapAnswer,
.gapSize {
	font-size: 12px;
	font-family: Sans-serif;
	white-space: pre;
}

.gapInput[disabled] {
	color: #007B99;
	background-color: #bfd9dd;
}

.gapAnswer {
	color: green;
	border: 1px solid red;
	border-radius: 0px 3px 3px 0px;
	border-left: 0px;
	background-color: #F8F8F8;
	padding: 1px;
}

.assmntResult_0 .gapInput {
	border-color: red;
	color: red;
	border-radius: 3px 0px 0px 3px;
	border-right: 0px;
	text-decoration: line-through;
}

.assmntResult_1 .gapInput {
	border-color: green;
	color: green;
}

/* --- SELECT ------------------------------------------------------- */

.markers {
	display: flex;
	align-items: center;
	font-size: 0.9em;
}

.markers > span {
	flex: 0 0 auto;
	font-style: italic;
	color: gray;
}

.markers label {
	border-radius: 5px;
	padding: 0.1em 3px 0.1em 0px;
	cursor: pointer;
	margin: 0 0.5em;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.markers input {
	vertical-align: sub;
	flex: 0 0 auto;
}

.markers label span {
	padding: 0.1em 0.4em;
	flex: 1 1 auto;
}

.markers .selectRed {
	color: red;
	background-color: #FFE1E1;
}

.markers .selectGreen {
	color: green;
	background-color: #E5FFE5;
}

.markers .selectBlue {
	color: blue;
	background-color: #DCDCFF;
}

.markers .selectBlack {
	color: black;
	background-color: #E6E6E6;
}

.select .sol .text_ti, .select .sol .solution_ti,
.select .response .text_ti, .select .response .solution_ti {
	color:gray;
	margin:0;
	font-size:0.9em;
	font-style: italic;
	font-weight: normal;
}
.select .text {
	line-height: 1.8em;
}

.select_tl {
	cursor: pointer;
	border-radius: 2px;
}

.sol .select_tl {
	cursor: default;
}

.select_tl:hover {
	box-shadow: 0 0 2px 0 #efefef;
	background-color: #f7f7f7;
}

.multiSelect.Red .select_tl:hover {
	background-color: #FFE1E1;
}

.multiSelect.Green .select_tl:hover {
	background-color: #E5FFE5;
}

.multiSelect.Blue .select_tl:hover {
	background-color: #DCDCFF;
}

.multiSelect.Black .select_tl:hover {
	background-color: #E6E6E6;
}

.solution .select_tl,
.select_yes,
.sol .simpleSelect .select_tl.select_bad,
.sol .simpleSelect .select_tl.select_good {
	box-shadow: 0 0 2px 0 gray;
	background-color: silver;
}

.select_yes:hover {
	box-shadow: 0 0 2px 0 #636363;
	background-color: #ababab;
}

.sol .select_yes:hover {
	background-color: silver;
}

.solution .selectRed,
.select_Red {
	box-shadow: 0 0 2px 0 red;
	background-color: #FFE1E1;
}

.select_Red:hover {
	box-shadow: 0 0 4px 0 red;
}

.sol .select_Red:hover {
	box-shadow: 0 0 2px 0 red;
}

.solution .selectGreen,
.select_Green {
	box-shadow: 0 0 2px 0 green;
	background-color: #E5FFE5;
}

.select_Green:hover {
	box-shadow: 0 0 4px 0 green;
}

.sol .select_Green:hover {
	box-shadow: 0 0 2px 0 green;
}

.solution .selectBlue,
.select_Blue {
	box-shadow: 0 0 2px 0 blue;
	background-color: #DCDCFF;
}

.select_Blue:hover {
	box-shadow: 0 0 4px 0 blue;
}

.sol .select_Blue:hover {
	box-shadow: 0 0 2px 0 blue;
}

.solution .selectBlack,
.select_Black {
	box-shadow: 0 0 2px 0 black;
	background-color: #E6E6E6;
}

.select_Black:hover {
	box-shadow: 0 0 4px 0 black;
}

.sol .select_Black:hover {
	box-shadow: 0 0 2px 0 black;
}

.simpleSelect .select_good {
	box-shadow: 0 0 2px 0 #00aa00;
	background-color: #e6ffe6;
}

.simpleSelect .select_good:hover {
	box-shadow: 0 0 2px 0 #007d00;
	background-color: #c9ffc9;
}

.sol .simpleSelect .select_good:hover {
	box-shadow: 0 0 2px 0 #00aa00;
	background-color: #e6ffe6;
}

.simpleSelect .select_bad {
	box-shadow: 0 0 2px 0 #ff4a3e;
	background-color: #ffe5e3;
}

.simpleSelect .select_bad:hover {
	box-shadow: 0 0 2px 0 #c1251b;
	background-color: #ffd0cc;
}

.sol .simpleSelect .select_bad:hover {
	box-shadow: 0 0 2px 0 #ff4a3e;
	background-color: #ffe5e3;
}

.response {
	font-size: 1.1em;
	margin: 1.5em;
}

/* --- ICM / ICU ------------------------------------------------------------ */
.choiceMap_map {
	margin: 0 auto;
}
.choiceMap_mk{
	position: absolute;
	width: 10px;
	height: 10px;
	top: 50%;
	left: 50%;
	margin-top: -9px;
	margin-left: -9px;
	background-color: rgba(245, 121, 0, 0.5);
	border: 2px solid #f57900;
	border-radius: 40px;
	padding: 2px;
	background-clip: content-box;
	box-shadow: 0px 0px 5px 3px white;
}

/* --- LISTE DE QUIZ -------------------------------------------------------- */
.subQuestion .block_ti {
	color: #007B99;
	margin-bottom: 0;
}

.subQuestion .block_co {
	border-left: 2px solid #cccccc;
	border-radius: 0 5px;
	border-top: 2px solid #cccccc;
	margin-top: 0;
	padding: 1em;
}

/* === STOP - QUIZ ======================================================== */

/* === START - SCIMGMGR ===================================================== */
.imgZoom {
	display: inline-block;
}

.scImgZmBtnCls {
	display: inline-block;
	position: absolute;
	right: -20px;
	text-decoration: none;
	top: -30px;
}

.scImgZmBtnCls::before {
	font-family: "fontello";
	content: "\e826";
	font-size: 2em;
}

.scImgZmBtnCls span {
	display: none;
}

.scImgZmCvs {
	overflow: visible;
}

.scImgZmCo img {
	background-color: white;
}

.gallery {
	margin: 0.2em 1em 0.7em;
}

.scImgSep {
	display: none;
}

.galPv {
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	border-top: 1px solid silver;
	border-left: 1px solid silver;
	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: #bfd9dd;
}

.scImgGalCo {
	background-color: #bfd9dd;
}

.scImgGalImgFra {
	background-color: #bfd9dd;
}

.scImgGalTi {
	font-style: italic;
	color: #007B99;
	cursor: default;
}

.scImgGalTbr span.scImgGalCount {
	font-style: italic;
	color: #007B99;
	cursor: default;
}

.scImgGalTbr span {
	display: none;
	position: absolute;
}

.scImgGalTbr a {
	position: absolute;
	bottom: 3px;
	text-decoration: none;
	left: 50%;
	color: #007B99;
}

.scImgGalTbr a:hover {
	color: #007B99;
}

.scImgGalTbr a::before {
	font-family: "fontello";
}

a.scImgGalBtnNoPrv, a.scImgGalBtnNoNxt {
	color: #999999;
}

a.scImgGalBtnPrv, a.scImgGalBtnNoPrv {
	margin-left: -20px;
}

a.scImgGalBtnPrv::before, a.scImgGalBtnNoPrv::before {
	content: "\e821";
}

a.scImgGalBtnNxt, a.scImgGalBtnNoNxt {
	margin-left: 20px;
}

a.scImgGalBtnNxt::before, a.scImgGalBtnNoNxt::before {
	content: "\e820";
}

a.scImgGalBtnCls {
	right: 5px;
	left: auto;
}

a.scImgGalBtnCls::before {
	content: "\e826";
}

a.scImgGalBtnPse {
	margin-left: -3px;
}

a.scImgGalBtnPse::before {
	content: "\e823";
}

a.scImgGalBtnPly::before {
	content: "\e822";
}

.scImgZmTi {
	background-color: #bfd9dd;
	color: #007B99;
	font-style: italic;
	text-align: center;
}

.scImgZmOver {
	background: white;
}

.scImgZmMag {
	box-shadow: 0 0 5px 0 #000000;
	cursor: crosshair;
}

/* === STOP - SCIMGMGR ====================================================== */

/*	ACTIVITY BLOCK	*/
.activityBlock {
	background-color: #C9E4F3;
	display: flex;
	flex-direction: column;
	margin: 1em 0;
}

.activityBlock_ti {
	background-color: #C9E4F3;
	color: #007B99;
	margin: 0;
	padding: 0.5em 1em;
}

.activityBlock_ti a {
	text-decoration: none;
}

.lnkActivity::before {
	content: "\e814";
	font-family: "fontello";
	font-weight: normal;
}

.activityBlock_ti .lnkActivity::before {
	margin-right: 10px;
}

.activityBlock_ti .lnkActivity::after {
	color: #007B99;
	content: " \e812";
	float: right;
	font-family: "fontello";
}
.lnkActivity:hover::after {
	color: #007B99;
}
.activityBlock_co {
	margin: 0 0.6em 0.6em 0.6em;
	padding: 0.5em;
	flex: 0 0 auto;
}

.activityBlock_co .profInstruction, .activityBlock_co .studentInstruction {
	font-size: 0.8em;
}

/*	PERSON	*/
div.authors > ul,
div.contributors > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

div.authors > ul > li,
div.contributors > ul > li {
	flex: 0 0 auto;
}

div.license,
div.contributors,
div.authors {
	margin: 0.5em 0;
}

div.person {
	display: flex;
	margin: 0.5em;
	padding: 0.3em;
	border-radius: 3px;
	background-color: #DDD;

}

div.person > .photo {
	flex: 0 0 auto;
	margin-right: 3px;
}

div.person > .photo img {
	vertical-align: middle;
}

div.person > .coords {
	flex: 0 0 auto;
}

div.person > .coords > .name {
	margin: 0.2em 0;
	display: block;
}

.cc-button {
	margin: 0 3px;
}

.cc-button img {
	vertical-align: middle;
}

/* === START - RICHSTREAM ===================================================== */
body.richStreamActivity div#content {
	display: flex;
	flex-direction: column;
}

section.teContainer {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

section.teContainer > div {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

section.teContainer > div > div.mainArea {
	display: flex;
	flex: 1;
	min-height: 0;
}

section.teContainer > div > section.segment {
	opacity: 0;
	max-height: 0;
	max-width: 0;
}

section.teContainer > div > section.segment > h3 {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	border: 1px solid #97CAC3;
	border-radius: 5px;
	text-transform: uppercase;
	color: #007B99;
	padding: 0.5em 1em;
	margin: 0;
}

section.teContainer > div > section.segment.teActive {
	opacity: 1;
	transition: opacity 0.5s;
	max-height: none;
	max-width: none;
}

section.teContainer > div > section.segment .quizList_ti {
	display: none;
}

body.richStreamActivity.teVideoType div.mediaArea {
	flex: 1 0.2 25em;
	position: relative;
}

video.teMedia {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	box-shadow: none;
}

div.teContentArea {
	flex: 0 1 0;
	/*	transition: flex-basis 0.5s;*/
	display: flex;
	overflow: hidden;
	min-width: 0;
	margin-left: 0;
	font-size: 2vm;
	font-size: 2vmin;
}

div.teContentArea.teActiveSegment,
div.teContentArea.teActivePoint {
	flex: 1 1 60em;
	max-width: none;
}

body.richStreamActivity.teVideoType div.teContentArea.teActiveSegment,
body.richStreamActivity.teVideoType div.teContentArea.teActivePoint {
	margin-left: 1em;
}

body.richStreamActivity .teOverflowScroll {
	padding-right: 1em;
}

body.richStreamActivity *:target {
	background: none;
}

div.segmentTxt,
body.richStreamActivity div.quizList,
div.teContentArea.teActivePoint > div.segmentTxt.teActive {
	flex: 0 1 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s;
	align-self: center;
	min-width: 0;
	max-width: 0;
	max-height: 0;
}

div.segmentTxt.teActive,
body.richStreamActivity div.quizList.teActive {
	flex: 1;
	opacity: 1;
	max-width: none;
	max-height: 100%;
}

body.richStreamActivity div.quizList > * {
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s;
	min-width: 0;
	max-width: 0;
	max-height: 0;
}

body.richStreamActivity div.quizList > *.teActive {
	opacity: 1;
	max-width: none;
	max-height: none;
}

body.richStreamActivity div.quizList > *.teActive:first-child,
body.richStreamActivity div.quizList > *.teActive:last-child {
	transition: none;
}

nav.teController {
	display: flex;
	flex: 0 0 3em;
	margin-top: 0.5em;
}

nav.teController > * {
	margin: 0 0.5em;
}

div.controllerNavArea {
	display: flex;
	flex-direction: column;
	flex: 3;
}

div.timelines {
	flex: 2;
	display: flex;
	margin-top: 0.2em;
	min-height: 0;
	border: solid 1px #97CAC3;
}

ul.teTimeline {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
}

ul.teTimeline li {
	position: relative;
	display: flex;
}

ul.teTimeline li > div {
	display: flex;
}

ul.teTimeline a {
	display: flex;
	flex: 1 1 100%;
	border-left: solid 1px black;
	color: inherit;
	text-decoration: inherit;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

ul.teTimeline a:hover {
	cursor: pointer;
}

ul.teTimeline a span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

ul.teTimeline li.teActive > a {
	background-color: lightgrey;
}

ul.teTimeline li > a.tlQuizList {
	display: none;
	background-color: silver;
	flex: 1 2 1em;
	border-left-style: dashed;
}

ul.teTimeline li:hover > a.tlQuizList,
ul.teTimeline li.teActive > a.tlQuizList {
	display: block;
}

ul.teTimeline a:hover {
	outline: none;
	background-color: silver;
}

ul.teTimeline a:focus {
	outline: solid 2px grey;
	border: none;
}

ul.teTimeline a:active {
	outline: none;
	background-color: grey;
}

ul.teTimeline li:first-child a:first-child {
	border-left: none;
}

ul.teTimeline a > span {
	display: none;
}

ul.teTimeline li > ul a {
	border-top: none;
}

div.times {
	display: flex;
	flex-direction: column;
}

div.times > * {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	color: #007B99;
}

span.teDuration {
	border-top: solid 1px #97CAC3;
}

nav.teController input[type=range] {
	display: block;
	border: solid 1px #97CAC3;
	background-color: #C2EBEC;
	color: #007B99;
	padding: 0;
	margin: 0;
}

input[type=range].teSeek {
	margin-bottom: 0.2em;
	width: auto;
	flex: 0 0 1em;
	position: static;
}

nav.teController button {
	border: none;
	background: none;
	min-height: 0;
	width: 2em;
	justify-content: center;
}

nav.teController button > span {
	display: none;
}

nav.teController button::before {
	font-family: 'fontello';
	font-size: 1.5em;
	color: #007B99;
}

nav.teController button:hover {
	cursor: pointer;
}
nav.teController button:hover::before {
	color: #007B99;
}

button.tePlayPause::before {
	content: '\e822';
}

button.tePlayPause.teChecked::before {
	content: '\e823';
}

button.teNextTime::before {
	content: '\e820';
}

button.tePreviousTime::before {
	content: '\e821';
}

button.teMute::before {
	content: '\e824';
}

button.teMute.teChecked::before {
	content: '\e825';
}

div.volumeArea {
	position: relative;
	display: flex;
}

input[type=range].teVolume {
	height: 0.5em;
	width: 7em;
	align-self: center;
	transform: translateX(7em) rotate(-90deg);
	transform-origin: left;
	margin-left: -7em !important;
	left: 50%;
	top: 0.1em;
	visibility: collapse;
	opacity: 0;
	transition: visibility 0s 1.5s, opacity 0.5s 1s;
}

nav.teController button[disabled] {

}

nav.teController button > span {
	/* TODO Accessibilité */
	display: none;
}

input[type=range]:hover {

}

input[type=range]:hover,
input[type=range]:focus,
button.teMute:hover + input[type=range].teVolume,
button.teMute.focus + input[type=range].teVolume {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s 0s, opacity 1s 0s;
}

.richStreamActivity iframe.pdfFrame {
	height: 550px !important;
}

/* === STOP - RICHSTREAM ==================================================== */

/* === START - POSTSCRIPTUM LOAD ANIM ======================================= */
ps-loading-mask {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	pointer-events: none;
	z-index: 99999;
}

ps-loading-spinner {
	display: block;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	position: relative;
	border: 4px solid #97CAC3;
	animation: ps-spinner 2.3s infinite ease;

	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -20px;
	margin-left: -20px;
}

ps-loading-spinner::before {
	content: "";
	display: block;
	vertical-align: top;
	width: 100%;
	background-color: #97CAC3;
	animation: ps-spinner-inner 2.3s infinite ease-in;
}

@keyframes ps-spinner {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(180deg);
	}
	50% {
		transform: rotate(180deg);
	}
	75% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes ps-spinner-inner {
	0% {
		height: 100%;
	}
	25% {
		height: 100%;
	}
	50% {
		height: 0%;
	}
	75% {
		height: 0%;
	}
	100% {
		height: 100%;
	}
}

/* === STOP - POSTSCRIPTUM LOAD ANIM =================================================== */

/* === START - RESPONSIVE =================================================== */
@media (max-width: 850px) {
	body.default.showMenu header.meta > *:first-child, .activityBlock_desc > *:first-child {
		min-width: 200px;
	}
	body.default #header h1 {
		height: 50px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 1.2em;
	}
}

@media (max-width: 650px) {
	body.default header.meta > *:first-child, .activityBlock_desc > *:first-child {
		min-width: 200px;
	}
	body.default #header h1 {
		font-size: 1em;
	}

	body.default #outline {
		position: absolute;
		bottom: 0px;
		top: 0px;
		z-index: 2;
	}

	.warning, .rule, .extra, .method, .reminder, .hypothesis, .advice, .example, .definition, .profInstruction, .studentInstruction {
		border-left: none;
		margin: 0 0 1.5em 0;
		padding: 0;
	}

	.warning .block_ti, .rule .block_ti, .extra .block_ti, .method .block_ti, .reminder .block_ti, .hypothesis .block_ti, .advice .block_ti, .example .block_ti, .definition .block_ti, .info .block_ti, .profInstruction em, .studentInstruction em {
		margin: 0.5em;
		display: inline;
	}

	.block::before, .profInstruction::before, .studentInstruction::before {
		background-color: transparent;
		display: inline;
		position: static;
	}

	.profInstruction::before {
		color: #F0EAB1;
	}

	.studentInstruction::before {
		color: #007B99;
	}

	.profInstruction, .studentInstruction {
		min-height: auto;
	}
}

@media (max-width: 450px) {
	body.program header.meta {
		display: block;
	}

	.visavis {
		display: block;
	}

	.visavis > .first {
		margin-right: 0;
		padding-right: 0;
		border-right: 0;
	}
}

@media (max-height: 800px) {
	iframe.pdfFrame {
		height: 600px !important;
	}

	.richStreamActivity iframe.pdfFrame {
		height: 500px !important;
	}
}

@media (max-height: 750px) {
	iframe.pdfFrame {
		height: 550px !important;
	}

	.richStreamActivity iframe.pdfFrame {
		height: 450px !important;
	}
}

@media (max-height: 700px) {
	iframe.pdfFrame {
		height: 500px !important;
	}

	.richStreamActivity iframe.pdfFrame {
		height: 400px !important;
	}
}

@media (max-height: 650px) {
	iframe.pdfFrame {
		height: 450px !important;
	}

	.richStreamActivity iframe.pdfFrame {
		height: 350px !important;
	}
}

@media (max-height: 600px) {
	iframe.pdfFrame {
		height: 400px !important;
	}

	.richStreamActivity iframe.pdfFrame {
		height: 300px !important;
	}
}

@media (max-height: 550px) {
	iframe.pdfFrame {
		height: 350px !important;
	}

	.richStreamActivity iframe.pdfFrame {
		height: 250px !important;
	}
}

@media (max-height: 500px) {
	iframe.pdfFrame {
		height: 300px !important;
	}

	.richStreamActivity iframe.pdfFrame {
		height: 200px !important;
	}
	body.default #header h1 {
		height:34px;
		line-height:34px;
	}
	button.backBtn, button.menuBtn, body.showMenu button.menuBtn:hover, button.infoBtn, .showInfo button.infoBtn:hover {
		height: 34px;
		width: 34px;
	}
	.backBtn::before, .menuBtn::before, .infoBtn::before {
		line-height: 34px;
	}
	body.floatMenu button.backBtn, body.hasMenu button.backBtn {
		left: 34px;
	}
	.menuBtn::before {
		font-size: 1.3em;
	}
	.infoBtn::before {
		font-size: 1.3em;
	}
	.backBtn::before {
		font-size: 1.5em;
	}
	body.default #footer{
		padding: 2px 3px;
	}
}

@media (max-height: 450px) {
	iframe.pdfFrame {
		height: 250px !important;
	}

	.richStreamActivity iframe.pdfFrame {
		height: 150px !important;
	}
}

@media (max-height: 400px) {
	iframe.pdfFrame {
		height: 200px !important;
	}

	.richStreamActivity iframe.pdfFrame {
		height: 100px !important;
	}
}

@media (orientation: portrait) {
	section.teContainer > div > div.mainArea {
		flex-direction: column;
	}

	body.default #content > section {
		margin: 0.5em;
	}

	body.richStreamActivity.teVideoType div.mediaArea {
		margin: 1em 0;
		flex-basis: 15em;
	}

	body.richStreamActivity.teVideoType div.teContentArea.teActiveSegment,
	body.richStreamActivity.teVideoType div.teContentArea.teActivePoint {
		margin-left: 0;
		margin-top: 1em;
	}

	nav.teController > * {
		margin: 0 0.2em;
	}
}

/* === STOP - RESPONSIVE ==================================================== */