@font-face {
  font-family: "Andika DesRev F";
  src: url(../AndikaDesRevF.ttf);
}
/* UI definitions */
body {
  margin: 0px;
  padding:0px;
  overflow-x: hidden;
}
h2{
  padding: 0px;
  margin: 0px;
  border-bottom: 1px dotted gray;
}
h5 {
  border-top: 1px solid #3B9EEF;
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  font-variant: small-caps;
}
hr {
  margin: 0; padding: 0px;
}
img {
  border-width: 0px;
}
.top_bar {
  margin: 0;
  padding: 0;
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 1;
  height: 30px;
  background-color: #99ccff;
  border-bottom: 1px solid gray;
}
h3.title {
  position: fixed;
  height: 28px;
  margin: 0px 0px 0px 210px;
  padding-top: 2px;
  text-indent: 10px;
  background-color: #99ccff;
  z-index: 2;
  font-weight: lighter;
  font-size: 20px;
  font-family: 'Trebuchet MS', 'Arial', sans-serif;
}
.menu {
  position: fixed;
  right: 10px;
  top: 4px;
  z-index: 3;
  text-align: right;
  width: 24em;
}
#site_brand {
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 3;
  font:  bold 1em "Trebuchet MS", Arial, sans-serif;
  color: gray;
}
#login_area {
  font:  13px "Trebuchet MS", Arial, sans-serif;
  color: darkblue;
  background-color: #99ccff;
  top: -5px;
  position: relative;
  margin-right: 5px;
  padding: 1px;
}
.logout, .login {
  padding: 4px;
}
.login:hover {
  background-color: #42A0FF;
  cursor: pointer;
}
#login_name {
  height: 15px;
  vertical-align: middle;
}
form, table {
  padding: 0px;
  margin: 0px;
}
.c_help_h { /*for help icon in head tags */
  float: right;
  position: relative;
  top: -24px;
  right: 5px;
}
#copyright {
  position: absolute;
  bottom: 0px;
  left: 5px;
}
#current _vocab {
  position: absolute;
  top: 5px;
  left: 5px;
}
#leftside {
  border-right: 1px solid gray;
  padding: 8px 5px 5px 5px;
  float: left;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1;
  background-color: #99ccff;
  width: 200px;
  font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
  font-size: 10pt;
  height: 100%;
}
.header {
  font:  bold 1em "Trebuchet MS", Arial, sans-serif;
  width: 98%;
  background-color: #71B8FF; /* #5EAEFF; /*#5AA4FE;*/
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  padding-left: 5px;
}
.header1 {
  position: relative;
  display: block;
  cursor: pointer;
}
.header:hover {
  background-color: #42A0FF;
  cursor: pointer;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
#options table, #options table td {
  padding: 0px;
  margin: 0px;
}
.gpcs {
  padding-bottom: 3px;
  font-family: "Andika DesRev F", "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: 13px;
}
.gpcs td {
  height: 1.7em;
}
.gpcs td:hover, .logout:hover, .login:hover, #complex_section label:hover, #options td:hover, #options a:hover {
  background-color: #42A0FF;
  cursor: pointer;
}
.gpcs td label {
  position: absolute;
  width: 22%;
}
.nohighlight {
  background-color:#99ccff !important ;
  cursor: default !important ;
  text-align: right;
}
label {
  cursor: pointer;
}
#changeTextSize{
  height: 27px;
  margin: -6px 0px 0px 0px;
}
.changeFSize {
  padding: 0 6px;
  opacity: 0.3;
}
.changeFSize:hover {
  background-color: #42A0FF;
  opacity: 1;
  cursor: pointer;
}
#debug {
  border: 1px solid red;
  bottom: 20px;
  left: 10px;
  right:10px;
  position: absolute;
  display: none;
  z-index: 3;
  height: auto;
}
.p { /* phoneme class */
  padding: 0px;
  font-family: "Doulos SIL", "Times New Roman", serif;
  color: #004080;
  letter-spacing: 1px;
}
sup {
  position: relative;
  vertical-align: 0;
  bottom: 0.4em;
}
.hide{
  display:none;
}
/* Activity area definitions */
#main {
  position: absolute;
  top: 50px;
  left: 220px;
  right: 10px;
  display: block;
  text-align: center;
}
.w {
  font-family: "Andika DesRev F", Arial, sans-serif;
  padding: 0px 5px 1px 0px;
  position: relative;
  white-space:nowrap;
}
/* change text in line content: '*' for different prefix */
/* possible use: indicator for where to start reading (left to right)
/* .w:before{
content: '*';
color: green;
font: 20pt serif bold;
top: 4px;
padding-right: 10px;
position: relative;
}*/
/* change direction for right to left scripts
.w{
direction: rtl;
unicode-bidi: bidi-override;
}
*/
#lesson_area {
  font-size: 2em;
}
.line {
  display: block;
  margin-top: 1em;
  overflow: hidden;
  background-repeat: repeat-x;
  width: 100%;
  height: 40px;
  background-image: url(graphics/dotted_lines.gif);
}
.focus {
  color: red;
}
table#vocab td {
  line-height: 1.5em;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 40px;
}
#vocab a:link, #vocab a:active, #vocab a:visited, #vocab a:hover, .header a:link, .header a:visited {
  text-decoration: none;
  color: black;
}
.highlightit img {
  opacity: 0.2;
}
.highlightit:hover img {
  opacity: 1;
  background-color: #ffffff;
}
#basic_code td:hover{
  background-color: #73BB22;
}
#phonemes {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid gray;
}
.phoneme {
  padding: 0px;
  font-family: "Doulos SIL", "Times New Roman", serif;
  color: #004080;
  letter-spacing: 1px;
}
.page {
  width: 7in;
}
#page_title {
  font-size: 20px;
  margin-top: 0px;
}
.page-break {
  display: none;
}
.sb { /*syllable break character in multi-syllable words */
  color: #B2B2B2;
  }
.stress {/*style gets changed by javascript */
  text-decoration: underline;
  font-weight: bold;
}

/* ToolTip definitions */
.sn, .ps, .def, .ex {font-size: 1em;}
.lx {font: bold 2em sans-serif; }
.sn{color: red;}
.ps{font: italic 1em sans-serif;}
.def{display: inline; }
.ex{display: block; font: italic 1.5em "Times New Roman", serif; margin-bottom: 10px; margin-left: 10px;}

/* Reading Assessment definitions */
#read_correct, #read_incorrect {
  display:block;
  font:bold 1em sans-serif;
  height: 1.7em;
  padding-bottom:3px;
}
#read_correct_control, #read_incorrect_control {}
.read_incorrect_progress_bar, .read_correct_progress_bar {
  position:absolute;
  width:0px;
  border:1px solid gray;
  text-indent:3px;
  left:30px;
  cursor:pointer;
  margin-top: 2px
}
.read_correct_progress_bar {
  background-color:#99ff99;
}
.read_incorrect_progress_bar {
  background-color:#FFFF5B;
}
#deleteWordsInLocalStorage {}
#assessment {
  display:block;
  position:relative;
  text-align:left !important;
  height:80px;
}
.yes_no {
  font-size:20px;
  padding-right:20px;
  color:#C9C9C9;
}
#assessment input {
  width:11em;
  padding:0px;
  overflow:visible;
  height:22px;
  padding-bottom:17px;
}
#main {
  top:37px;
}
#w0 {
  background-color:#99ff99;
  padding:0px 20px 0px 20px;
  margin: 0px 0px 0px -20px;
  white-space:nowrap;
}
.date{
  text-align:left;
  margin:0px;
  font:12pt serif;
}
.lesson_area p {
  text-align:left;
  margin:0px 0px 0px 0px;
  font:12pt serif;
}
.report_title {
  font-family:'Trebuchet MS', 'Arial', sans-serif;
  text-align:left;
  font-size:20px;
  margin:0px;
}
#report_table {
  font:18px sans-serif;
}
#report_table td {
  border-bottom:1px solid gray;
  padding:3px 5px;
}
#report_table a:link, #report_table a:visited {
  text-decoration:none;
}
#report_table th {
  border-bottom:2px solid gray;
  text-align:center;
}
.report_gpc_row {}
.report_correct_bar {
  background-color:#99ff99;
  border:1px solid gray;
  cursor:pointer;
  position:relative;
  float:left;
  text-indent:5px;
}
.report_incorrect_bar {
  background-color:#FFFF5B;
  border:1px solid gray;
  cursor:pointer;
  position:absolute;
  text-indent:5px;
  border-left-width:0px;
  vertical-align:top;
}
.report_total {width:1.5em;}
.report_right {width:1.5em; color:green; font-weight:bold;}
.report_wrong {width:1.5em; color:red; font-weight:bold;}
.report_percent {width:2em;}
.report_gpc {width:2em;}
.report_bar_container {
  position:relative;
  text-align:left;
}
.report_row_hide {
  text-align:center;
}
.hide_row_trigger a{
  display:block;
  width:20px;
  height:20px;
  background-image: url(../graphics/x-small.jpg);
}
.hide_row_trigger a:hover {
  background: url(../graphics/x-small-hover.jpg) no-repeat transparent;
}
.show_all_report_rows a {
  display:block;
  width:27px;
  height:27px;
  background:transparent url(../graphics/check-small.jpg) no-repeat;
}
.show_all_report_rows a:hover {
  display:block;
  width: 27px;
  height:27px;
  background:transparent url(../graphics/check-small-hover.jpg) no-repeat;
}
table.summary{
  font:18px sans-serif;
  margin-bottom:1em;
  border-top: 1px solid gray;
}
table.summary td {
  padding:0px 4px;
  text-align: center;
}
.sum {
  width: 20px;
}
.t{} .c{} .cs{} .cf{} .cn{} .ca{} .v{} .vs{} .vl{} .vr{} .vd{}
#report_row_s_s {} #report_row_a_a {} #report_row_t_t {} #report_row_n_n {} #report_row_i_i {} #report_row_p_p {} #report_row_d_d {} #report_row_e_e {} #report_row_r_r {} #report_row_g_g {} #report_row_b_b {} #report_row_schwa_u {} #report_row_m_m {} #report_row_l_l {} #report_row_ee_ee {} #report_row_o_o {} #report_row_f_f {} #report_row_ae_ai {} #report_row_k_c {} #report_row_moon_oo {} #report_row_sh_sh {} #report_row_ch_ch {} #report_row_h_h {} #report_row_ar_ar {} #report_row_k_k {} #report_row_oe_oa {} #report_row_or_or {} #report_row_w_w {} #report_row_ng_ng {} #report_row_ow_ou {} #report_row_thVL_th {} #report_row_book_oo {} #report_row_j_j {} #report_row_ks_xn {} #report_row_oi_oi {} #report_row_kw_qu {} #report_row_er_er {} #report_row_ie_ie {} #report_row_z_z {} #report_row_y_y {} #report_row_thVD_th {} #report_row_v_v {}

/* Printing definitions */
@media print {
  #leftside, .menu, .top_bar {
    display: none;
  }
  #assessment, .back_to_lesson {display: none;}
  .main {
    padding: 0em;
    margin-left: -220px;
    width: 99%;
    background-color: white;
    z-index: 0;
  }
  .lesson_area, #page_title {
    padding: 0px;
    margin: 20px 0px;
    }
  .page-break {
    display: block;
    page-break-before: always;
  }
  h3.title {
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 5px;
    margin-left: 0px;
    text-indent:0px;
    height: 25px;
    margin-top: 20px;
    z-index: 2;
  }
  table#vocab td {
    padding-right: 0px;
  }
}