/* This is the CSS stylesheet used in the exercise. */





/* Elements in square brackets are replaced by data based on configuration settings when the exercise is built. */





/* BeginCorePageCSS */





/* Made with executable version 7.0 Release 2 Build 0 */



@import "ColorsClasses.css";



/* CSS variables for colours. */



:root {

    --strFontFace: Geneva, Arial, sans-serif;

    --strFontSize: medium;

    --strTextColor: #000000;

    --strTitleColor: #444444;

    --strFuncLightColor: #fff8f2;

    --strFuncShadeColor: #7f7973;

    --strLinkColor: #0000FF;

    --strVLinkColor: #0000CC;

    --strNavBarColor: #0000ff;

    --strNavLightColor: #7f7fff;

    --strNavShadeColor: #00007f;

    --strNavTextColor: #ffffff;

    --strPageBGColor: #eeeeee;

    --strExBGColor: #FFf2e6;

}



body {

    font-family: var(--strFontFace);

    /* background-color: var(--strPageBGColor); */

    color: var(--strTextColor);

    margin-right: 5%;

    margin-left: 5%;

    font-size: var(--strFontSize);

    /*padding-bottom: 0.5em;*/

    background-image: linear-gradient(to bottom, transparent 25px, white 25px, #d6d6d6), repeating-linear-gradient(-45deg, #303030, #303030 6px, #2a2a2a 6px, #2a2a2a 12px);

    padding-top: 21px;

}



p {

    text-align: justify;

    margin: 0px;

    font-size: 1em;

    margin-top: 0.5em;

    margin-bottom: 0.5em;

}



div,

span,

table,

td {

    font-size: 1em;

    color: var(--strTextColor);

}



div.Titles {

    padding: 0.5em;

    ;

    text-align: center;

    color: var(--strTitleColor);

}



button {

    font-family: var(--strFontFace);

    font-size: 1em;

    display: inline;

}



li button {

    font-family: var(--strFontFace);

    font-size: 15px;

    display: inline;

}



.ExerciseTitle {

    font-size: 140%;

    color: var(--strTitleColor);

}



.ExerciseSubtitle {

    font-size: 120%;

    color: var(--strTitleColor);

    margin-left: 5%;

    margin-right: 5%;

}



div.StdDiv {

    /*background-color: var(--strExBGColor);*/

    text-align: center;

    font-size: 120%;

    color: var(--strTextColor);

    /*	

			padding: 0.5em;

			

			border-style: solid;

			border-width: 1px 1px 1px 1px;

			border-color: var(--strTextColor);

			margin-bottom: 1px;

			*/

}



div.ExerciseContainer,

div.ReadingContainer {

    background-color: var(--strExBGColor);

    text-align: center;

    font-size: 1em;

    color: var(--strTextColor);

    padding: 0.5em;

    border-style: solid;

    border-width: 1px 1px 1px 1px;

    border-color: var(--strTextColor);

    margin-bottom: 1px;

}



div.ReadingContainer,

div.ExerciseContainer {

    flex-grow: 1;

    flex-basis: 0;

    margin: 1px;

}



div#ContainerDiv {

    margin: -1px;

    padding: 0;

    border: none;

    display: flex;

    justify-content: space-between;

}



@media (orientation: landscape) {

    div#ContainerDiv {

        flex-direction: row;

    }

}



@media (orientation: portrait) {

    div#ContainerDiv {

        flex-direction: column;

    }

}





/* EndCorePageCSS */



.RTLText {

    text-align: right;

    font-size: 150%;

    direction: rtl;

    font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", var(--strFontFace);

}



.CentredRTLText {

    text-align: center;

    font-size: 150%;

    direction: rtl;

    font-family: "Simplified Arabic", "Traditional Arabic", "Times New Roman", var(--strFontFace);

}



button p.RTLText {

    text-align: center;

}



.RTLGapBox {

    text-align: right;

    font-size: 150%;

    direction: rtl;

    font-family: "Times New Roman", var(--strFontFace);

}



.Guess {

    font-weight: bold;

}



.CorrectAnswer {

    font-weight: bold;

}



div#Timer {

    padding: 0.25em;

    margin-left: auto;

    margin-right: auto;

    text-align: center;

    color: var(--strTitleColor);

}



span#TimerText {

    padding: 0.25em;

    border-width: 1px;

    border-style: solid;

    font-weight: bold;

    display: none;

    color: var(--strTitleColor);

}



.FeedbackText,

.FeedbackText span.CorrectAnswer,

.FeedbackText span.Guess,

.FeedbackText span.Answer {

    color: var(--strTitleColor);

}



.LeftItem {

    font-size: 1em;

    color: var(--strTextColor);

    text-align: left;

}



.RightItem {

    font-weight: bold;

    font-size: 1em;

    color: var(--strTextColor);

    text-align: left;

}



input,

textarea {

    font-family: var(--strFontFace);

    font-size: 100%;

}



select {

    font-size: 1em;

}



div.Feedback {

    background-color: #ffffcc;

    left: 33%;

    width: 34%;

    top: 33%;

    z-index: 1;

    border-style: solid;

    border-width: 1px;

    border-radius: 10px;

    padding: 5px;

    text-align: center;

    color: var(--strTitleColor);

    position: absolute;

    display: none;

    font-size: 1em;

}



.ReadingText {

    text-align: left;

}



#ReadingDiv h3.ExerciseSubtitle {

    color: var(--strTextColor);

}



div.ExerciseDiv {

    color: var(--strTextColor);

}





/* JMatch standard output table. */



table.MatchTable {

    margin: 2em auto;

    border-width: 0;

}





/* JMatch flashcard styles */



table.FlashcardTable {

    background-color: transparent;

    color: var(--strTextColor);

    border-color: var(--strTextColor);

    margin-left: auto;

    margin-right: auto;

    margin-top: 2em;

    margin-bottom: 2em;

    /*width: 90%;*/

    position: relative;

    text-align: center;

    padding: 0px;

}



table.FlashcardTable tr {

    border-style: none;

    margin: 0px;

    padding: 0px;

    background-color: var(--strExBGColor);

}



table.FlashcardTable td.Showing {

    font-size: 140%;

    text-align: center;

    width: 50%;

    display: table-cell;

    padding: 2em;

    margin: 0px;

    border-style: solid;

    border-width: 1px;

    border-radius: 0.5em;

    color: var(--strTextColor);

    box-shadow: 0.2em 0.3em 0.2em var(--strNavShadeColor);

    background-color: var(--strPageBGColor);

}



table.FlashcardTable td.Hidden {

    display: none;

}





/* JMix styles */



div.JMixDrag,

div.JMatchDrag {

    padding: 0;

    background-color: var(--strPageBGColor);

    border-style: none;

}



div#GuessDiv {

    padding: 0.5em;

    margin-bottom: 2em;

}



div#SegmentDiv {

    margin-top: 2em;

    margin-bottom: 2em;

    text-align: center;

}



a.ExSegment {

    font-size: 120%;

    font-weight: bold;

    text-decoration: none;

    color: var(--strTextColor);

    display: inline-block;

    padding: 0.5em;

    border: solid 1pt gray;

    margin-bottom: 0.5em;

}



span.RemainingWordList {

    font-style: italic;

}



div.DropLine {

    position: absolute;

    text-align: left;

    border-bottom-style: solid;

    border-bottom-width: 1px;

    border-bottom-color: var(--strTitleColor);

    width: 80%;

    left: 10%;

}





/* JCloze styles */



.ClozeWordList {

    text-align: center;

    font-weight: bold;

}



div.ClozeBody {

    text-align: left;

    margin-top: 1em;

    margin-bottom: 1em;

    line-height: 1.5;

    margin-left: 5%;

}



span.GapSpan {

    font-weight: bold;

}





/* JCross styles */



table.CrosswordGrid {

    margin: auto auto 1em auto;

    border-collapse: collapse;

    padding: 0px;

    background-color: #000000;

}



table.CrosswordGrid tbody tr td {

    width: 1.5em;

    height: 1.5em;

    text-align: center;

    vertical-align: middle;

    font-size: 140%;

    padding: 1px;

    margin: 0px;

    border-style: solid;

    border-width: 1px;

    border-color: #000000;

    color: #000000;

}



table.CrosswordGrid span {

    color: #000000;

}



table.CrosswordGrid td.BlankCell {

    background-color: #000000;

    color: #000000;

}



table.CrosswordGrid td.LetterOnlyCell {

    text-align: center;

    vertical-align: middle;

    background-color: #ffffff;

    color: #000000;

    font-weight: bold;

}



table.CrosswordGrid td.NumLetterCell {

    text-align: left;

    vertical-align: top;

    background-color: #ffffff;

    color: #000000;

    padding: 1px;

    font-weight: bold;

}



.NumLetterCellText {

    cursor: pointer;

    color: #000000;

}



.GridNum {

    vertical-align: super;

    font-size: 66%;

    font-weight: bold;

    text-decoration: none;

    color: #000000;

}



.GridNum:hover,

.GridNum:visited {

    color: #000000;

}



table#Clues {

    margin: auto;

    vertical-align: top;

}



table#Clues td {

    vertical-align: top;

}



table.ClueList {

    margin: auto;

}



td.ClueNum {

    text-align: right;

    font-weight: bold;

    vertical-align: top;

}



td.Clue {

    text-align: left;

}



div#ClueEntry {

    text-align: left;

    margin-bottom: 1em;

}





/* Keypad styles */



div.Keypad {

    text-align: center;

    display: none;

    /* initially hidden, shown if needed */

    margin-bottom: 0.5em;

}



div.Keypad button {

    font-family: var(--strFontFace);

    font-size: 120%;

    background-color: #ffffff;

    color: #000000;

    width: 2em;

    border-style: solid;

    border-width: 1px;

    border-radius: 0.5em;

    color: var(--strTextColor);

    box-shadow: 0.2em 0.3em 0.2em var(--strTextColor);

}





/* JQuiz styles */



div.QuestionNavigation {

    text-align: center;

}



.QNum {

    margin: 0em 1em 0.5em 1em;

    font-weight: bold;

    vertical-align: middle;

}



textarea {

    font-family: var(--strFontFace);

}



.QuestionText {

    text-align: left;

    margin: 0px;

    font-size: 1em;

}



.Answer {

    font-size: 120%;

}



.PartialAnswer {

    font-size: 120%;

    letter-spacing: 0.1em;

    color: var(--strTitleColor);

}



.Highlight {

    color: #000000;

    background-color: #ffff00;

    font-weight: bold;

    font-size: 120%;

}



ol.QuizQuestions {

    text-align: left;

    list-style-type: none;

    padding-inline-start: 0%;

    margin-left: 7%;

    margin-right: 7%;

}





/*

		li.QuizQuestion {

				padding: 1em;

		

			border-style: solid;

			border-width: 0px 0px 1px 0px;

			

			

		}

*/



ol.MCAnswers {

    text-align: left;

    list-style-type: upper-alpha;

    padding-inline-start: 5%;

    /*

			padding: 1em;

			*/

}





/*

		ol.MCAnswers li {

			margin-bottom: 1em; 

				}

*/



ol li ol li {

    display: inline;

}



ol.MSelAnswers {

    text-align: left;

    list-style-type: lower-alpha;

    /* padding: 1em; */

}



div.ShortAnswer {

    padding: 1em;

}



.FuncButton {

    border-style: solid;

    border-radius: 0.5em;

    padding: 0.2em;

    min-width: 3em;

    border-left-color: var(--strFuncLightColor);

    border-top-color: var(--strFuncLightColor);

    border-right-color: var(--strFuncShadeColor);

    border-bottom-color: var(--strFuncShadeColor);

    color: var(--strTextColor);

    background-color: var(--strExBGColor);

    border-width: 1pt;

    cursor: pointer;

    box-shadow: 0.1em 0.2em 0.1em var(--strFuncShadeColor);

}



.FuncButtonQ {

    border-style: none;

    border-radius: 0.5em;

    /*

			padding: 0.5em;

			*/

    min-width: 3em;

    color: var(--strTextColor);

    background-color: var(--strExBGColor);

    border-width: 1pt;

    cursor: pointer;

    text-align: left;

}



.FuncButtonH {

    border-style: none;

    /*

			border-radius: 0.5em;

		

			padding: 0.5em;





			border-width: 1pt;



			*/

    color: var(--strTextColor);

    background-color: var(--strExBGColor);

    cursor: pointer;

    text-align: center;

}



.CheckAnswersButton {

    border-style: solid;

    border-radius: 0.5em;

    padding: 0.5em;

    min-width: 3em;

    border-left-color: var(--strFuncLightColor);

    border-top-color: var(--strFuncLightColor);

    border-right-color: var(--strFuncShadeColor);

    border-bottom-color: var(--strFuncShadeColor);

    color: var(--strNavBarColor);

    background-color: var(--strExBGColor);

    font-weight: bolder;

    border-width: 1pt;

    cursor: pointer;

    box-shadow: 0.2em 0.3em 0.2em var(--strFuncShadeColor);

}



.FuncButton:active {

    box-shadow: none;

}



.FuncButton:hover {

    color: var(--strExBGColor);

    background-color: var(--strTextColor);

}



.FuncButtonQ:hover,

.FuncButtonH:hover {

    color: var(--strExBGColor);

    background-color: var(--strTextColor);

}





/*BeginNavBarStyle*/



div.NavButtonBar {

    text-align: center;

    margin: 0.25rem 0;

    clear: both;

    font-size: 1em;

    padding: 0.2em;

    box-sizing: border-box;

}



.NavButton {

    border-style: solid;

    border-radius: 0.5em;

    padding: 0.5em;

    min-width: 3em;

    border-left-color: var(--strNavLightColor);

    border-top-color: var(--strNavLightColor);

    border-right-color: var(--strNavShadeColor);

    border-bottom-color: var(--strNavShadeColor);

    background-color: var(--strNavBarColor);

    color: var(--strNavTextColor);

    border-width: 1pt;

    cursor: pointer;

    box-shadow: 0.2em 0.3em 0.2em var(--strNavShadeColor);

}



.NavButton:active {

    box-shadow: none;

}



.NavButton:hover {

    color: var(--strNavBarColor);

    background-color: var(--strNavTextColor);

}





/*EndNavBarStyle*/



a {

    color: var(--strLinkColor);

}



a:visited {

    color: var(--strVLinkColor);

}



a:hover {

    color: var(--strLinkColor);

}



div.CardStyle {

    /*position: absolute;*/

    font-family: var(--strFontFace);

    font-size: 1em;

    border-radius: 0.5em;

    padding: 0.5em;

    min-width: 2em;

    border-width: 1pt;

    color: black;

    border-style: solid;

    /*box-shadow: 0.2em 0.3em 0.2em var(--strTextColor);

			background-color: white;

			

			left: -50px;

			top: -50px;

		 */

    overflow: visible;

    touch-action: none;

    box-sizing: border-box;

    text-align: left;

}



.DR {

    cursor: grab;

}





/*

		div.CardStyle {

			position: absolute;

			font-family: var(--strFontFace);

			font-size: 1em;

			border-style: solid;

			border-radius: 0.5em;

			padding: 0.5em;

			min-width: 2em;

			border-width: 1pt;

			color: var(--strTextColor);

			box-shadow: 0.2em 0.3em 0.2em var(--strTextColor);

			background-color: var(--strExBGColor);

			left: -50px;

			top: -50px;

			overflow: visible;

			touch-action: none;

			user-select: none;

			box-sizing: border-box;

			

		}

	

*/



div.CardStyleCentered {

    text-align: center;

}



.rtl {

    text-align: right;

    font-size: 140%;

}



figcaption {

    font-size: 14px;

    text-align: center;

}



#logo {

    text-align: center;

    margin-top: -5px;

    margin-bottom: 0px;

}



table.RBGrid {

    border-collapse: collapse;

}



table.RBGrid td,

th {

    border: 1px solid black;

    text-align: center;

}



div.ClozeBody p {

    text-align: justify;

    font-size: 1em;

    margin-top: 1%;

    margin-bottom: 1%;

}



.refrao {

    font-family: Abadi, 'Times New Roman', Times, serif;

    font-weight: bold;

}



.logo1 {

    top: 10px;

    height: 15%;

    float: left;

    position: absolute;

}



.logo2 {

    height: 15%;

    position: absolute;

    right: 5%;

    top: 10px;

    display: block;

}



table.PageTop {

    margin: auto auto 1em auto;

    border-collapse: collapse;

    padding: 0px;

}



table.PageTop tbody tr td {

    text-align: center;

    vertical-align: middle;

    font-size: 140%;

    padding: 1px;

    margin: 0px;

}