/* vietnamese */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Josefin Sans SemiBold'), local('JosefinSans-SemiBold'), url(https://fonts.gstatic.com/s/josefinsans/v13/Qw3FZQNVED7rKGKxtqIqX5Ec0lhtdF0hspo.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Josefin Sans SemiBold'), local('JosefinSans-SemiBold'), url(https://fonts.gstatic.com/s/josefinsans/v13/Qw3FZQNVED7rKGKxtqIqX5Ec0lhtdV0hspo.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Josefin Sans SemiBold'), local('JosefinSans-SemiBold'), url(https://fonts.gstatic.com/s/josefinsans/v13/Qw3FZQNVED7rKGKxtqIqX5Ec0lhte10h.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {font-family : Verdana,sans-serif;background : #6487fb;color : #330099;font-size : 14px;margin-left : 190px;margin-right : 20px;}
#menu {position : fixed;top : 40px;left : 20px;width : 150px;}
h1 {font-family: 'Josefin Sans', sans-serif;color : #6487fb;font-size : 30px;}
.wrapper { 
	background:#ffff99; 
	padding:20px;
	text-align:center;
}
.main-banner {
    width: 60%;
    height: auto;
    max-width: 700px;
	margin: 0 auto;
}
table { width: 100%;}
h2 {font-family: 'Josefin Sans', sans-serif;color : #6487fb;font-size : 23px;}
h3 {font-family: 'Josefin Sans', sans-serif;color : #6487fb;font-size : 20px;}
#sm {position : fixed;bottom : 20px;left : 20px;}
.copy {font-weight : bold;font-size : 12px;background : transparent;color : #fff;}
.Text {font-family : Arial,sans-serif;font-size : medium;color : #66cc00;}
.Blank {font-family : Arial,sans-serif;font-size : large;font-weight : bold;color : #66cc00;}
.Letters1 {font-family : Arial,sans-serif;font-size : large;font-weight : bold;color : #6488fb;}
.Letters2 {font-family : Arial,sans-serif;font-size : large;font-weight : bold;color : #66cc00;}
.Letters3 {font-family : Arial,sans-serif;font-size : large;font-weight : bold;color : #ff6600;cursor : default;}
.Letters4 {font-family : Arial,sans-serif;font-size : large;font-weight : bold;}
.ExSubtitle {color : #ffff99;}
.ExTitle{font-weight : bold;text-align : center;color : #ffff99;}
p {text-align : justify;margin : 0px;font-size : 14px;}
p.Titles {padding-top : 5px;padding-bottom : 5px;text-align: center;}
table,tr,td,div,span {font-size : 14px;}
span.Answer {font-size : medium;font-weight : bold;}
span.CorrectAnswer {font-weight : bold;}
span.Title {font-family : Arial,sans-serif;font-size : large;color : #ffff99;text-align : center;}
#SegmentDiv{margin-top : 2em;margin-bottom : 2em;text-align : center;}
a.ExSegment{font-size : medium;font-weight : bold;text-decoration : none;color : #330099;}
span.RemainingWordList{font-style : italic;}
span.underline{ text-decoration:underline;}
.footer {background : transparent;color : #ffffff;font-weight : bold;}
div.Titles{padding-top : 10px;text-align : center;margin-bottom : 4px;background : transparent;color : #ffff99;}
.Exercise {background : #ffff99;font-family : Arial,sans-serif;font-size : medium;color : #66cc00;margin-left : auto;margin-right : auto;text-align : center;}
.ExerciseDiv {border-style : solid;border-color : #66cc00;border-width : 1px;padding : 10px;}
.ExerciseTitle {font-size : 17px;background : transparent;color : #ffff99;}
.ExerciseSubtitle {color : #ffff99;}
div.ExerciseDiv {text-align : center;}
div.ButtonRow {margin-bottom : 10px;}
div.ExerciseText {line-height : 20px;text-align : justify;}
div.ExerciseText2 {line-height: 20px;text-align: justify;}
.FeedbackDiv {border-style : solid;border-color : #66cc00;border-width : 1px 1px 0px 1px;padding : 10px;}
div.Feedback {background : #6488fb;left : 1px;top : 33%;z-index : 1;border-style : solid;border-width : 1px;padding : 5px;text-align : center;color : #ffff99;position : absolute;display : none;font-size : 14px;}
div.Feedback2 {background-color : #6488fb;left : 1px;top : 1px;z-index : 1;border-width : 1px;border-style : none;text-align : center;color : #ffff99;padding : 5px;position : absolute;}
.WordListStyle {text-align : center;font-weight : bold;color : #330099;}
div.ExerciseDiv {color : #330099;}
div.StdDiv{background : #ffff99;text-align : center;font-size : 12px;color : #6488fb;padding : 8px;border-style : solid;border-width : 1px 1px 1px 1px;border-color : #330099;margin : 1px;}
.FunctionButton {background : #ffff99;color : #330099;text-align : center;border-style : solid;border-color : #ffff99;border-width : 2px;padding : 3px 6px 3px 6px;cursor : pointer;}
div.NavButtonBar {background : #6488fb;text-align : center;margin : 2px 0px 2px 0px;clear : both;font-size : 14px;}
div.NavButtonBar button {border-style : solid;border-color : #6488fb;background : #6488fb;border-width : 2px;padding : 2px 2px 2px 2px;color : #000000;cursor : pointer;}
div.Heading {text-align : center;}
div.FeedbackVisible {border-style : solid;border-width : 1px;border-color : #ffff99;background : #6488fb;padding : 5px;margin-bottom : 2px;top : 33%;left : 33%;position : absolute;display : block;}
div.FeedbackHidden {display : none;}
div.Item {border-style : solid;border-width : 1px;border-color : #ffff99;background : #6488fb;position : absolute;overflow : visible;padding : 5px;left : -50px;top : -50px;}
div.CategoryFrame {border-style : solid;border-width : 2px;border-color : #ffff99;background : #0000a4;position : absolute;overflow : visible;padding : 10px;	font-size : large;}
div.NavigationDiv {background : #6488fb;font-size : small;color : #000000;text-align : center;padding : 2px;}
button.NavButtons {color : #000000;background : #6488fb; border-style : solid;border-color : #6488fb;border-width : 2px;padding : 3px;	}
button.NavButtonsOver {color: #000000;background : #6488fb; border-top-color : #A5CBFF;border-left-color : #A5CBFF;border-right-color : #000047;border-bottom-color : #000047;border-width : 2px;padding : 2px 4px 4px 2px;cursor : pointer;}
button.NavButtonsDown {color : #000000;background : #6488fb;border-top-color : #000047;border-left-color : #000047;border-right-color : #A5CBFF;border-bottom-color : #A5CBFF;border-width : 2px;padding : 4px 2px 2px 4px;cursor : pointer;}
div.ButtonRow {font-size : medium;color : #ffff99;text-align : center;padding : 2px;}
button.InlineButtons {color : #ffff99;background : #6488fb;border-style : solid;border-color : #6488fb;border-width : 2px;padding : 3px;	}
button.InlineButtonsOver {color : #ffff99;background : #6488fb; border-top-color : #A5CBFF;border-left-color : #A5CBFF;border-right-color : #000047;border-bottom-color : #000047;border-width : 2px;padding : 2px 4px 4px 2px;cursor : pointer;}
button.InlineButtonsDown {color : #ffff99;background-color : #6488fb;border-top-color : #000047;border-left-color : #000047;border-right-color : #A5CBFF;border-bottom-color : #A5CBFF;border-width : 2px;padding : 4px 2px 2px 4px;cursor : pointer;}
.InlineButtons {color : #66cc00;text-align : center;background : #ffff99;border-style : solid;border-color : #ffff99;border-width : 2px;padding : 3px;}
.InlineButtonsOver {color : #66cc00;text-align : center;background : #ffff99;border-top-color : #FFFFDA;border-left-color : #FFFFDA;border-right-color : #4B4D00;border-bottom-color : #4B4D00;border-width : 2px;padding : 2px 4px 4px 2px;}
.InlineButtonsDown {color : #66cc00;text-align : center;background-color : #ffff99;border-top-color : #4B4D00;border-left-color : #4B4D00;border-right-color : #FFFFDA;border-bottom-color : #FFFFDA;border-width : 2px;padding : 4px 2px 2px 4px;}
div.CardStyle {position : absolute;font-family : Arial,sans-serif;font-size : 14px;padding : 5px;border-style : solid;border-width : 1px;color : #330099;background : #ffff99;margin-left : 140px;left : 0px;top : -50px;overflow : visible;}
div.CardStyle2 {position : absolute;font-family : Arial,sans-serif;padding : 5px;border-style : solid;border-width : 1px;color : #330099;background : #ffff99;left : 200px;top : 200px;}
div.CardStyle3 {position : absolute;font-family : Arial,sans-serif;padding : 5px;border-style : solid;border-width : 1px;color : #330099;background : #ffff99;margin-left : 250px;left : 0px;top : 0px;overflow : visible;}
div.Navigation {background : #ffff99;font-family : Arial,sans-serif;font-size : medium;color : #000000;text-align : center;padding : 2px;}
.NavButtons {color : #000000;text-align : center;background : #ffff99;border-style : solid;border-color : #ffff99;border-width : 2px;padding : 3px;}
.NavButtonsOver {color : #000000;text-align : center;background : #ffff99;border-top-color : #FFFFDA;border-left-color : #FFFFDA;border-right-color : #4B4D00;border-bottom-color : #4B4D00;border-width : 2px;padding : 2px 4px 4px 2px;}
.NavButtonsDown {color : #000000;text-align : center;background : #ffff99;border-top-color : #4B4D00;border-left-color : #4B4D00;border-right-color : #FFFFDA;border-bottom-color : #FFFFDA;border-width : 2px;padding : 4px 2px 2px 4px;}
div.GlossCard {border-style : dashed;border-width : 1px;border-color : #000;background : #F2F201;position : absolute;overflow : visible;visibility : hidden;padding : 5px;left : -50px;top : -50px;}
DIV.DropLine {text-align : center;border-bottom-style : solid;border-bottom-width : 1px;border-bottom-color : #ffff99;width : 100%;}
TD.NavBar{background-color : #6488FB;text-align : center;}
a:link,a:active {background : transparent;color : #6488fb;}
a:visited {background : transparent;color : #1433cd;text-decoration : none;}
a:hover {background : transparent;color : #6488fb;text-decoration : none;}
ul {list-style-type : none;}
.mainmenu{ width: 11.5em; padding: 0; float: left;}
.mainmenu ul { float: left; width: 100%; list-style: none; line-height: 1; color:#FFFFFF; background: #6487fb; padding: 0; border: solid #6487fb; border-width: 1px 1px; margin: 0 0 0 0;}
.mainmenu a, .mainmenu a:visited { display: block; width: 100%;font-family:Verdana,sans-serif;font-size:14px;font-weight:700;font-style:normal;text-decoration:underline; color: #FFFF99;  text-decoration: none; padding: 1em 0em; text-indent:1em; margin: 0; }
.mainmenu li li a{padding:1em;text-indent:0;}
.mainmenu ul ul a{ width:100%; height:100%;}
.mainmenu ul a{  width: 100%;}
.mainmenu li  { float: left; width:100%; margin:0; padding:0;}
.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li  {width:100%;}
 / !!!!! / .mainmenu li ul { position: absolute; left: -999em; height: auto; width:15em;  background: #FFFFFF; font-weight: normal; border-width: 1px; margin: 0;}
.mainmenu li li { width: 100% ; }
.mainmenu li a{width: 100% ; }
.mainmenu li li a{ width: 100%;}
.mainmenu li ul  { margin: -2.1em 0 0 -0.3em;}
.mainmenu li ul ul { margin: -2.1em 0 0 -0.3em;}
.ul_ch, .mainmenu li:hover ul ul,.mainmenu li li:hover ul ul,.mainmenu li li li:hover ul ul,.mainmenu li li li li:hover ul ul,.mainmenu li li li li li:hover ul ul{ left: -999em;}
.mainmenu li:hover ul,.mainmenu li li:hover ul,.mainmenu li li li:hover ul,.mainmenu li li li li:hover ul,.mainmenu li li li li li:hover ul{ left: 100%; / !!! /}
.mainmenu li:hover>ul.ul_ch   { left: 100%; / !!! /}
.mainmenu li:hover{ background: #FFFF99;}
.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{ color:#000000;}
.mainmenu li:hover li a, .mainmenu li li:hover li a, .mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, .mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited{ color:#000000;}
.mainmenu li li:hover, .mainmenu li li li:hover, .mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover { background: #FFFF99; z-index:9999;}
.mainmenu li li:hover a,.mainmenu li li li:hover a, .mainmenu li li li li:hover a, .mainmenu li li li li li:hover a{ color: #000000; }
.mainmenu ul ul a, .mainmenu ul ul a:visited,.mainmenu li li a, .mainmenu li li a:visited{ color: #000000;}
.mainmenu ul ul a:hover,.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{ color: #000000;}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{ color: #000000;}
footer { padding: 20px; }