@font-face {
    font-family: 'altairregular';
    src: url('../fonts/altair-regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 5px;
    font-family: sans-serif;
}

h1 { font-size: 180%; font-variant: small-caps; }

.h1 { margin: 1em 0; font-weight: bold; font-size:180%; font-variant: small-caps; }

img { max-width: 100%; max-height: 100%; }
audio { max-width: 100%; }

.-epub-media-overlay-active { background-color: yellow }


/* ======== TOP LEVEL ======= */


/* ~~~~~~~~~ pdocToc ~~~~~~~~ */

.pdocToc a { color: black; }
.pdocToc li li a { color: #4f4f4f; }

/* ~~~~~~~ pdocNavBar ~~~~~~ */

.pdocNavBar { display: flex; flex-direction: row; justify-content: space-between; }
.pdocNavBar .col { text-align: center; }
.pdocNavBar .colLast { text-align: right; }
/*
.pdocNavBar hr { clear: both; }
*/
.pdocNavBar a { border: none; }
.pdocNavBar a:hover { background-color: transparent; }
.pdocToc .pdocNavBar, .pdocToc .pdocNavBar div { padding-top: 0; }
.pdocToc .pdocNavBar a { padding: 0; }

.colFirst, .colLast {
    margin: 0;
    height: 59px;
    cursor: pointer;
}
.colFirst img { margin: 0; }
.col { margin: 0; padding: 0 1% 0 1%; }
.colLast { margin: 0; }
.col111 .colFirst, .col111 .col { }

/* ~~~~~~ didierSubject ~~~~~~ */

.didierSubject {
    font-size: 85%;
    color: #4f4f4f;
    margin-bottom: 1em;
}


/* ===== SECTION LEVEL ====== */


/* ~~~~~~~ pdocSection ~~~~~~ */

.pdocSection1, .pdocSection2,
.pdocSection3, .pdocSection4 {
    margin-bottom: 1.2em;
}

/* ~~~~~ pdocSection-box ~~~~ */

.pdocSection-box {
    margin: 1em 0 1em 0;
    padding: .5em 1em .5em 1em;
    border: 1px solid #000000;
    background-color: #efefef;
}
.pdocSection-box .pdocSectionTitle,
.pdocSection-box .pdocSectionSubtitle {
    text-align: center;
}

/* ~~~ pquizInstructions ~~~~ */

.pquizInstructions {
    font-weight: normal;
}

.pquizInstructionsAudios {
    display: inline-block;
}

.pquizInstructionsAudios .pdocMedia {
    float:left;
    margin-right:1em;
}
/* ~~~~~~ didierButtons ~~~~~ */

.didierButtons {
    margin-top: 1em;    
}

.didierButtons a.pquizButton {
    padding: 0;
    border: none;
    background: none;
    margin-right: .5em;
}

/* ~~~~ didierExplanation ~~~~ */

.didierExplanationText {
    display: none;
    margin-top: 1em;
    padding: .5em;
    border: 1px solid #f19612;
}

.didierExplanationText h1 {
    margin: 0 0 .5em 0;
}

.didierExplanationText legend {
    color: #f19612;
    font-weight: bold;
}

/* ~~~~ didierStrategy ~~~~ */

.didierStrategyText {
    display: none;
    margin-top: 1em;
    padding: .5em;
    border: 1px solid black;
}

.didierStrategyText h1 {
    margin: 0 0 .5em 0;
}

.didierStrategyText legend {
    color: black;
    font-weight: bold;
}

/* ~~~~~~ didierScript ~~~~~~ */

.didierScriptText {
    display: none;
    margin-top: 1em;
    padding: .5em;
    border: 1px solid #7f7f7f;
}

.didierScriptText h1 {
    margin: 0 0 .5em 0;
}

.didierScriptText legend {
    color: #7f7f7f;
    font-weight: bold;
}


/* ====== BLOCK LEVEL ======= */


/* ~~~~~~~~~~ pdocP ~~~~~~~~~ */

.pdocP {
    color: #444444;
}

.pdocSection-ex .pdocP {
    display: inline;
}

/* ~~~~~~~~ pdocList ~~~~~~~~ */

ol.composite > li {
    list-style-type: lower-alpha;
}

li.pquizChoice, ul.pdocList li {
    color: #777777;
}

/* ~~~~~~~ pdocTable ~~~~~~~~ */

.pdocTableTitle {
    font-family: sans-serif;
}

.point .pdocTable {
    width: auto;
}

.point .pdocTable td {
    padding: .3em;
    font-family: monospace;
    font-size: 131%;
    font-weight: bold;
    border: 1px solid #999999;
}

/* ~~~~~~~ pdocMedia ~~~~~~~~ */

.pdocMedia {
    position: relative;
    font-family: sans-serif;
}

.pdocMediaCaptionAbsolute {
    position: absolute;
}

/* ~~~~~~~ pdocImage ~~~~~~~~ */

.pdocImage {
    max-width: 100%;
    max-height: 100%;
}

.pdocImageDropzone {
    float: left;
    position: relative;
    line-height: 0;
}

/* ~~~~~~ pquizDropzone ~~~~~~ */

.pquizDropzone {
    font-family: sans-serif;
}

/* ~~~~~~ pquizChoices ~~~~~~ */

.pquizMatching td {
    border: none;
    vertical-align: bottom;
}


/* ====== INLINE LEVEL ====== */


/* ~~~~~~~ pdocLabelEx ~~~~~~ */

.pdocLabelEx {
    font-style: normal;
}

/* ~~~~~~ pdocHighlight ~~~~~ */

h1 .pdocHighlight, h2 .pdocHighlight,
h3 .pdocHighlight, h4 .pdocHighlight,
.pquizInstructions .pdocHighlight,
.pquizInstructions .pdocHighlightUnderline {
    font-weight: bold;
}

.pdocHighlightBoldItalic {
    font-weight: bold;
}

.pdocSection-ex .pdocHighlight,
.pdocSection-ex .pdocHighlightUnderline {
    font-weight: normal;
}

/* ~~~~~ pdocMentioned ~~~~~~ */

.pdocHighlightBold .pdocMentioned {
    font-weight: bold;
}

/* ~~~~~~~~ pdocSmil ~~~~~~~~ */

.pdocSmil {
    background-color: #ffffc0;
}

/* ~~~~~~ pquizSliding ~~~~~~ */

.pquizSliding {
    text-decoration: underline;
    background-color: #d6dee4;
}

/* ~~~~~~~~~ blank ~~~~~~~~~~ */

textarea.pquizChoice {
    width: 100%;
}


/* ~~~ Instructions popup ~~~ */
.pquizInstructions {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
}

.pquizInstructions .pdocP.first {
    position: relative;
    margin: auto;
    padding: 20px 15px;
    border: 1px solid black;
    Background-color: white;
}

.pquizInstructions .pdocP.first::before {
    content: "X";
    display: block;
    position: absolute;
    top: 2px;
    right: 6px;
}

/* ~~~ Correction rotation ~~~ */
.publiquiz {
    position: relative;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

.front {
    z-index: 2;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.back {
    position: absolute;
    left: 0;
    z-index: 1;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.flipped .back {
    z-index: 3;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
    transform: rotateX(0deg) rotateY(0deg);
}

.flipped .front {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

/* ~~~ Two picks ~~~ */
.pquizPickFloat {
    max-width: 33%;
}

/***********************************************
 BOL D'AIR STARTS HERE 
***********************************************/

/* Padding to the body, because there is no container */
div.pquizQuiz { margin:0; padding:0 25px; background-color:#fff}

/* using the top navbar as a header, really that irks, and yes negative margin because no header zone outside main container means the body padding is applied here too
 so we negate it. Talk aboult efficiency...
 Oh and top navbar and bottom navbar having the same classes ans no container around (such as.. well lets be wild and call those 'header', and 'footer'),  
 we have to play with first-child and last-child too
*/

.pdocNavBar.col111 {
    margin: -40px 0 0 0;
    padding-bottom: 0px;
}

.pdocNavBar.col111:first-child {
 background: #e85e0e none repeat scroll 0 0;
 margin:0 -25px;
 border:0 none;
 padding-bottom:0;
}


.col111:first-child .colFirst {
	/*
	background:url(../images/New_E_For_English6e_logo.png) no-repeat 25px 0;
	height:59px;
    */
    margin-left: 25px;
}

/* and yeah since it's a header, not a navbar, well we get rid of the nav, don't we ? */

div.pdocNavBar.col111:first-child div.colFirst a,
div.pdocNavBar.col111:first-child div.colFirst a img,
div.pdocNavBar.col111:first-child div.colLast a,
div.pdocNavBar.col111:first-child div.colLast a img  {display:none;}


/* and yeah the hrs are also the clearfix, so we can't disply none it, just hide it else boom goes the layout*/
hr {display: none;}

.pquizButtons {
    background-color: #fff;
    margin-top: 0;
    padding: 0;
    text-align: center;
    margin-top: 20px;
}

.pdocAudioPlayer [data-player="timeline"] {
    background: #fff;
    border-radius: 15px;
    cursor: pointer;
    height: 16px;
    position: absolute;
}

.pdocAudioPlayer [data-player="cursor"] {
    background: #89ca4d;
    border-radius: 50%;
    cursor: pointer;
    height: 16px;
    width: 16px;
}


div.pquizInstructionsAudios {width:100%; }
/* no container around each individal title/player blocs, so ets get a little crative with siblings (and pray that does not need to happen with 3 players */

div.pquizInstructionsAudios p.pdocP { float:left; font-size:115%; margin-left:2%; line-height:97px;}
div.pquizInstructionsAudios p.pdocP ~ div.pdocMedia {float:left;  margin-left:2%;}

div.pquizInstructionsAudios p.pdocP ~ div.pdocMedia ~p.pdocP {float:left;  margin-left:2%;}
div.pquizInstructionsAudios p.pdocP ~ div.pdocMedia ~p.pdocP ~ div.pdocMedia  {float:left;  margin-left:2%;}


.pquizItems, .pquizCategories, .pquizCategoriesItems {
    background-color: #ededed;
    border: 1px solid #ededed;
    border-radius: 0px;
    box-shadow:none;
}

.pquizPickFloat {
    max-width: 33%;
    width: 26%;
}

.pquizPickFloat:last-child {
	float:right;
}

.pquizItem, 
.pquizCategory, 
.pquizCategoryItem {
    background-color: #fff;
    border-color: #fff;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    padding: 0.2em;
    white-space: nowrap;
	width:130px;
	padding:8px;
	text-align:center;
	vertical-align:central;
	display:block;
	height:130px;
}

.pquizCategoryDrop .pquizCategoryItem { width:176px; height:176px;}

/*more sibling fun, because of course who whould have thought of creating a template that has a blockLeft, blockMiddle, and blockRight classes for example. It's so more fun to juggle
with siblings and pray that you don't need a different layout with the same classe on another page, because of course that won't happen ever*/
.pquizDropFloat {
	padding-left:50px;
}
.pquizDropFloat ~ .pquizPickFloat {
    float: right;
	width: 330px;	
}


.pquizCategoriesBasket {
    background-color: #ededed;
    border: 1px solid #ededed;
    border-radius: 15px 15px 5px  5px;
    box-shadow: none;
    float: left;
    margin: 1em 1em 1em 0;
}

.pquizDropFloat.Middle {
    padding-left: 0;
}
.pquizCategoriesDrops.Middle .pquizCategoriesBasket {
    margin: 1em 4em 1em 4em;
}
div.pquizInstructionsAudios .pdocAudioPlayer p.pdocP {
    line-height: 20px;
    margin-left: 0;
}
.pdocAudioPlayer div[data-player="button-play"] {
    left: 165px;
    position: absolute;
    top: -13px;
}

.pdocAudioPlayer [data-player="timeline"] {		
		left: 214px !important;
    top: 3px !important;
    width: 300px;
}
.pdocAudioPlayer [data-player="duration"] {
    line-height: 22px !important;
    margin-left: 400px  !important;
    top: 0 !important;
}


.pquizCategoriesBasket .legend {
	border-radius: 15px 15px 0px  0px;
    font-family: "altairregular", Verdana, Geneva, sans-serif ;
	background-color:transparent; 
	padding: 0 8px 0 8px;
	min-width: 194px;
}


.pquizCategoriesBasket .pquizCategoryDrop {
    border-radius: 0 0 5px 5px;
    min-height: 5em;
    min-width: 8em;
    padding: 0.5em 0.5em 0.3em;
    text-align: center;
}

#pquiz-category-1-correction.pquizCategoriesBasket .legend,
#pquiz-category-2-correction.pquizCategoriesBasket .legend,
#pquiz-category-3-correction.pquizCategoriesBasket .legend {min-width:400px;}

#pquiz-category-1-correction .pquizCategoryDrop pquizCategoryItem.pquizCategoryItemDropped { height:80px;}

#pquiz-category-1-correction.pquizCategoriesBasket .legend,
#pquiz-category-1.pquizCategoriesBasket .legend  {
	/*background:url(../images/haut_bento-rose.png) center 0 no-repeat;*/
}

#pquiz-category-1-correction.pquizCategoriesBasket .pquizCategoryDrop,
#pquiz-category-1.pquizCategoriesBasket .pquizCategoryDrop {
	/*background:url(../images/bas_bento-rose.png) center 0 repeat-y;*/
}

#pquiz-category-2-correction.pquizCategoriesBasket .legend,
#pquiz-category-2.pquizCategoriesBasket .legend  {
	/*background:url(../images/haut_bento-vert.png) center 0 no-repeat;*/
}

#pquiz-category-2-correction.pquizCategoriesBasket .pquizCategoryDrop,
#pquiz-category-2.pquizCategoriesBasket .pquizCategoryDrop {
	/*background:url(../images/bas_bento-vert.png) center 0 repeat-y;*/
}

#pquiz-category-3-correction.pquizCategoriesBasket .legend,
#pquiz-category-3.pquizCategoriesBasket .legend  {
	/*background:url(../images/haut_bento-violet.png) center 0 no-repeat;*/
}
#pquiz-category-3-correction.pquizCategoriesBasket .pquizCategoryDrop,
#pquiz-category-3.pquizCategoriesBasket .pquizCategoryDrop {
	/*background:url(../images/bas_bento-violet.png) center 0 repeat-y;*/
}

#pquiz-category-3.pquizCategoriesBasket,
.pquizCategoriesDrops.Middle .pquizCategoriesBasket.pquizCategoriesBasketSolo {
    /*margin-left: 128px;*/
		margin-left:17em;
		margin-right:17em;
}

#pquiz-category-1-correction.pquizCategoriesBasket .pquizCategoryItem,
#pquiz-category-2-correction.pquizCategoriesBasket .pquizCategoryItem,
#pquiz-category-3-correction.pquizCategoriesBasket .pquizCategoryItem {
	background-color: #fff;
	background-color: rgba(255,255,255, 0.85);
	width: 93%;
    font-family: "altairregular", Verdana, Geneva, sans-serif ;
	font-size:149%; 
	border: none;
	line-height:215%;
	height:auto;
	 width: 93%;
	 margin-left:0.3em;
}

.correction.back {
    /*padding: 0 14%;*/
		padding: 0 21%;
    text-align: center;
}
.pquizButton,
.pquizButton:hover {
    font-family: "altairregular", Verdana, Geneva, sans-serif ;
	font-size:149%; 
	padding:10px 20px;
	background-image: none;
	background: transparent;
	color:#fff;
	border:0 none;
	text-shadow:none;
}

.pquizButtonToggleInstructions, 
.pquizButtonToggleInstructions:hover {background-color:#00b1c8;}

.pquizButtonRedo,
.pquizButtonRedo:hover {background-color:#803f88;}

.pquizButtonCorrection,
.pquizButtonCorrection:hover {background-color:#8bc128;}

.pquizButtonToggleCheck,
.pquizButtonToggleCheck:hover {
    background-color: #da2c1c !important;
    display: inline;
}
.pquizVocabulaireButton,
.pquizButton.pquizVocabulaireButton,
a.pquizVocabulaireButton,
a.pquizVocabulaireButton:link,
a.pquizVocabulaireButton:hover {
    background: #3fb53d;
    background-color: #3fb53d;
}
.pquizInstructions {
    font-weight: bold;
    color:#454545;
    z-index: 100;
}
.pquizInstructions .pdocP.first::before {
    content: url("../images/close_modale.png");
    display: block;
    position: absolute;
    right: 6px;
    top: 3px;
}
.pquizInstructions .pdocP.first {
    background-color: #efecec;
    border: 3px solid #065d85;
	border-radius:5px;
    margin: auto;
    padding: 50px 15px;
    position: relative;
	font-family:Arial, Helvetica, sans-serif; color:#454545;
	font-size:25px;
    width: 60%;
    min-width: 400px;
    max-width: 800px;
    line-height: 35px;
}
div.h1{
    font-family: "altairregular", Verdana, Geneva, sans-serif ;
    margin: 0;
    padding: 0;
    top: 0;
    color: #fff;
    font-size: 250%;
    margin-left: -20%;
    margin-top:8px;
    text-align:center;
}