/* CUSTOM CSS FOR EMBEDDED HTML5 QUIZZES  */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300);
/*FONT COLOUR CHANGED 10 06 2020 */
body {font-family:'Open Sans',Helvetica,Arial,sans-serif!important;font-size:16px!important;color:#000000!important}

/*REMOVE UNWANTED BORDER STYLING - EDITED 4 12 2017 */
.h5p-question-content, .h5p-dragquestion-has-no-background {
    border-bottom:0;
}

/*ADJUST LINE HEIGHT - 24 3 2018 */
.h5p-question-content p {line height: 2em;}

/*SELECTIONS AND PERMISSIONS */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*DISABLE UNWANTED DESCRIPTIONS ON IMAGE SEQUENCING */

.sequencing-feedback {
    line-height: 1.5em;
    margin-right: 1em;
    font-size: 1em;
    display: none;
    -webkit-transform: scale(0, 0) rotate(90deg);
    -moz-transform: scale(0, 0) rotate(90deg);
    -ms-transform: scale(0, 0) rotate(90deg);
    transform: scale(0, 0) rotate(90deg);
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
}

.draggabled .image-desc {
    display: none;
    height: 0;
}




/*ADJUST SIZE OF DRAGGABLES AND BOXES TO PREVENT SNAFUS ON MOBILE DISPLAY */

.sequencing-item {
    width: 150px;
    padding: 6px;
    height: 150px;
    float: left;
    display: inline-block;
    border-radius: 0.4em 0.4em 0.4em 0.4em;
    margin: 0 12px 1em 0;
    cursor: pointer;
    border: solid 2px #dbe2e8;
}
.sequencing-dropzone {
    width: 150px;
    padding: 6px;
    height: 150px;
    float: left;
    border-radius: 0.4em 0.4em 0.4em 0.4em;
    margin: 0 12px 1em 0;
    cursor: pointer;
    border: solid 2px #dbe2e8;
    background-color: #dcf6ff;
    border: dashed 2px #5c9adf;
}

.draggabled .image-container {
    width: 150px;
    height: 150px;
    -webkit-box-shadow: inset 0px 2px 74px 0px rgba(203, 213, 222, 1);
    -moz-box-shadow: inset 0px 2px 74px 0px rgba(203, 213, 222, 1);
    box-shadow: inset 0px 2px 74px 0px rgba(203, 213, 222, 1);
    text-align: center;
}

@media only screen and (min-width: 576px) {
  /* small devices */
  /* 3 images per row */
  /* (2*(margin+border)+3(border+margin_right+padding+ image_width))
  /* (2*(10+2))+4((2+2)+(12)+(6+6)+(156))== 552 */
    .h5p-image-sequencing {
        max-width: 552px;
    }
    .sequencing-item {
        width: 150px;
    }
    .draggabled .image-container {
        width: 150px;
    }
    .sequencing-dropzone {
        width: 150px;
    }
}

@media only screen and (min-width: 768px) {
  /* Medium devices */
@media only screen and (min-width: 576px) {
  /* small devices */
  /* 3 images per row */
  /* (2*(margin+border)+3(border+margin_right+padding+ image_width))
  /* (2*(10+2))+4((2+2)+(12)+(6+6)+(156))== 552 */
    .h5p-image-sequencing {
        max-width: 552px;
    }
    .sequencing-item {
        width: 150px;
    }
    .draggabled .image-container {
        width: 150px;
    }
    .sequencing-dropzone {
        width: 150px;
    }
}

@media only screen and (min-width: 768px) {
  /* Medium devices */
  /* 4 images per row */
  /* (2*(margin+border)+4(border+margin_right+padding+ image_width))
  /* (2*(10+2))+4((2+2)+(12)+(6+6)+(158))== 768 */

    .h5p-image-sequencing {
        max-width: 744px;
    }
    .sequencing-item {
        width: 150px;
    }
    .draggabled .image-container {
        width: 150px;
    }
    .sequencing-dropzone {
        width: 150px;
    }
}

@media only screen and (min-width: 992px) {
  /* large devices */
  /* 5 images per row */
  /* (2*(10+2))+5((2+2)+(12)+(6+6)+(165.6))== 992 */
    /* 4 images per row - MODIFIED 12 08 2020 TO FIX UPGRADE ISSUES */
    .h5p-image-sequencing {
        max-width:800px;
    }
    .sequencing-item {
        width: 150px;
    }
    .draggabled .image-container {
        width: 150px;
    }
    .sequencing-dropzone {
        width: 150px;
    }
}

@media only screen and (min-width: 1200px) {
    /* For Extra large devices */
    /* 6 images per row */
    /* (2*(10+2))+6((2+2)+(12)+(6+6)+(168))== 1200 */

    .h5p-image-sequencing {
        max-width: 744px;
    }
    .sequencing-item {
        width: 150px;
    }
    .draggabled .image-container {
        width: 150px;
    }
    .sequencing-dropzone {
        width: 150px;
    }
}


    .h5p-image-sequencing {
        max-width: 744px;
    }
    .sequencing-item {
        width: 150px;
    }
    .draggabled .image-container {
        width: 150px;
    }
    .sequencing-dropzone {
        width: 150px;
    }
}



/*HIDE INTROS FOR EXERCISES - 3 12 2017 */

.h5p-question-introduction p {
    line-height: 1.5em;
    margin-right: 1em;
    font-size: 1em;
    display: none;
    -webkit-transform: scale(0, 0) rotate(90deg);
    -moz-transform: scale(0, 0) rotate(90deg);
    -ms-transform: scale(0, 0) rotate(90deg);
    transform: scale(0, 0) rotate(90deg);
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
}

/*HIDE INTROS FOR TEXT DRAG AND DROP - 11 3 2018 */
.h5p-matching-title {display: none!important;}


/*TEXT STYLINGS FOR GAP FILLS - 4 12 2017 */

.h5p-text-input, .h5p-input-wrapper, h5p-text-input{
font-family:'Open Sans',Helvetica,Arial,sans-serif!important;font-size:16px!important;
}

/*SET BACKGROUND COLOUR FOR GAP FILL - MODIFIED 19 1 2018 */
.h5p-question-content, .h5p-blanks{
background:#FFFFFF;border:0;
}

/*SET BACKGROUND COLOUR FOR RIGHT AND WRONG ANSWERS - 4 12 2017 */
.h5p-correct {
background:#FFFFFF;
}
.h5p-wrong {
background:#FFFFFF;
}

/*SET FONTS FOR BUTTONS*/
button{font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:16px;display:inline;margin:0;border:0;padding:0}

/*SET LINE SPACING FOR PARAGRAPHS IN GAP FILLS - 19 1 2018*/
..h5p-blanks .h5p-question-content p {
line-height:40px;
}

/*ADJUST TITLE ALIGNMENT FOR DIALOG CARDS*/
.h5p-dialogcards-title-inner {
text-align:center;}

/* DISABLE BUTTON OUTLINE IN CHROME */
button:focus {outline:0;}
button:active {
outline: none;
border: none;
}

/* BACKGROUND AND TEXT COLOUR FOR GAP FILLS */
.h5p-blanks .h5p-correct .h5p-text-input{
background:#DCEFE6;
color:#000000!important;
}

/* ADJUST PADDING FOR GAP FILL BOXES */
.h5p-blanks .h5p-text-input {
padding:0 1em 0.1875em 0.5em;
}

/* ADJUST LINE HEIGHT FOR GAP FILL QUIZZES */
.h5p-blanks .h5p-question-content p {line-height: 2em;}

/* ADJUST MARGINS ON TEXT DRAGGABLES */
.h5p-drag-text [aria-grabbed] margin: {.3em;}

.h5p-drag-text .h5p-drag-draggables-container {
    position: relative;
    padding-top: 1em;
    display: inline-block;
}

.h5p-memory-desc {
font-size:16px;}

/* ADJUST TEXT FOR ESSAY FEEDBACK - 14 11 2018 */
.h5p-essay .h5p-essay-input-field-message-char-important {font-weight: normal;}
.h5p-essay .h5p-essay-input-field-message-char {margin-top:10px;font-size: 16px;float: left;}

/* BUTTON BACKGROUND COLOURS*/
.h5p-joubelui-button, .h5p-joubelui-button {background-color:#1a73d9}

/* FIX FONT SIZES FOR DISPLAY ON MOBILE - - 26 03 2019 */
body{ -webkit-text-size-adjust:none;}


/* MODIFY FONT FOR RESPONSIVE PICTURE QUIZ DRAG AND DROP - 20 05 2019 */
.h5p-draggable{font-size:18px;font-weight:bold}
@media only screen and  (max-width:960px){.h5p-draggable{font-size:16px;font-weight:bold}}
@media only screen and (max-width: 768px) {.h5p-draggable{font-size:14px;font-weight:bold}}
@media only screen and (max-width: 576px){.h5p-draggable{font-size:12px;font-weight:bold}}
@media only screen and (max-width:450px){.h5p-draggable{font-size:9px;font-weight:bold}}
@media only screen and (max-width:340px){.h5p-draggable{font-size:8px;font-weight:bold}}

/* MODIFY MARGINS FOR WORD SEARCH GAME - 11 05 2020 */
.h5p-find-the-words .h5p-play-area {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}



/* NEW CLASS FOR ADDITIONAL PICTURE VOCABULARY PAGE TABS WITH BORDERS - JUNE 2020 */
.pv-small-bordered {float:left; width: 120px;height:120px;margin:10px 10px 10px 10px;border:1px solid #8C8C8C}
/* STYLING FOR TABS WITH DROPDOWN NAVIGATION - JUNE 2020 */
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {color: #ffffff;background-color: #4D4D4D;}
.nav-pills > li.activity-grey > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {color: #000000;background-color: #F4F4F4;}
.nav-pills > li.activity-grey-selected > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {color: #ffffff;background-color: #4D4D4D;}
.label-grey {color: #ffffff;background-color: #4D4D4D;}
.dropdown-item {margin-bottom:7px;padding-left:5px}
/* STYLE H2 FOR TABBED STYLE LESSONS - ADJUSTED 17 07 2020 SLJ */
.tabbed-browsing{font-size:16px;padding-top:5px;padding-bottom:5px;font-weight:normal;color:#404040;vertical-align:top}
.tabbed-browsing-dropdown{font-size:16px;font-weight:normal;margin-top:-10px;margin-bottom:7px;padding-left:15px;color:#000000;}
.tabbed-browsing-dropdown-options{font-size:16px;font-weight:normal;margin-top:2px;margin-bottom:5px; color: #404040;}
.dropdown-divider {height:5px;border-bottom:1px solid #cdcdcd}

/*BORDERED IMAGES FOR PICTURE VOCABULARY PAGES */
.pv-small {float: left;width: 120px;height: 120px;margin: 10px 10px 10px 10px;border: 1px solid #000000;}

/* REMOVE UNDERLINE ON LINKS */
.tab-content a {text-decoration:none!important;}
.preamble a {text-decoration:none!important;}
#main-content a, a:hover {text-decoration: none!important;}

/* CONDENSED WHITE TEXT BOX - ADDED 18 07 2020 */	
.textbox-white-condensed{background: #FFFFFF; margin-top:15px;margin-bottom:0;padding:0}

/*  BOTTOM MARGIN ADJUSTED - 19 07 2020 */
.sb-widget{margin-bottom:25px;overflow:hidden}

/*  FONT SIZE FOR ACCORDION DROPDOWN ADJUSTED - 10 08 2020 */
.h5p-accordion .h5p-panel-title {font-size: 18px!important;}

/*  FONT SIZE FOR DIALOG CARDS ADJUSTED - 01 09 2020 */
.h5p-dialogcards .h5p-dialogcards-card-text-area p, .h5p-dialogcards .h5p-dialogcards-title p {font-size: 16px!important;line-height: inherit;margin: inherit;margin-bottom: inherit;}
/*  TURN OFF UNWANTED FLASH CARDS ELEMENTS - 01 09 2020 */
.h5p-flashcards .h5p-description {border-bottom: 0!important;;padding: 1.5em 0; margin:0;font-size: 0;}

/* MODIFIED 13 8 2020 TO FIX H5P UPGRADE ISSUES - SLJ */
.h5p-image-sequencing {max-width: 1176px;margin:0!important;}
.h5p-image-sequencing > ul {border:0 #fff;max-width:800px}
.h5p-content {border:0 #fff;}

/* MODIFIED 13 8 2020 TO FIX H5P UPGRADE ISSUES - SLJ */
/*IMAGE SEQUENCING QUIZ - FORCE 4 ROWS OF CARDS TO LOAD ON DESKTOP - MODIFIED 13 8 2020 */
@media only screen and (min-width:1050px) and (orientation: landscape){.Sequencing {min-width: 1000px!important;margin-left:-5px;overflow:hidden;float:left}}

/* TASK DESCRIPTIONS - MODIFIED 13 8 2020 TO FIX H5P UPGRADE ISSUES */
/* BE CAREFUL EDITING THIS */
.h5p-task-description {font-size:16px!important;font-weight:normal!important;color:#000000;!important;margin:0!important;padding-left:6px!important;padding-top:3px!important;padding-bottom:10px!important;font-family:Open Sans, Helvetica, Arial, sans-serif;border-bottom: 1px solid #fff;!important}

/* ADJUST FONT SIZE FOR IMAGE CARDS - 09 09 2020 */
.h5p-imagetext {font-size:16px!important;}

/* SET MINIMUM HEIGHT FOR TABS - SLJ */
.tab-content {min-height:500px!important}

/* MODIFY ESSAY PADDING - 21 04 2021 */
.h5p-essay {padding:0 5px 0 0;font-family:Open Sans, Helvetica, Arial, sans-serif;font-size:16px!important;}
.h5p-essay .h5p-essay-input-field-textfield {border: 1px solid #404040;font-family:Open Sans, Helvetica, Arial, sans-serif;font-size:16px!important;}

/* EDIT PRINT STYLES */
@media print { body { display:none }}

/*LAST UPDATE 21 04 2021 */