html,body{font-family:Verdana,sans-serif;font-size:16px;line-height:1.5;background-color: #f4e8ea;}
.index-contain {
    margin-left: 80px;
    margin-right: 80px;
}
@media screen and (max-width: 680px){
.index-contain {
    margin-left: 5px;
    margin-right: 5px;
}
}
.header1 {
  font-size: 1.6em; text-align:center; text-decoration: underline; padding-left:8px; padding-right:8px; line-height:1.2;
}
.header2 {
  font-size: 1.3em; text-align:center; text-decoration: underline; padding-left:8px; padding-right:8px; line-height:1.2;
}
.header3 {
  font-size: 1.2em; text-decoration: underline; padding-left:8px; padding-right:8px; line-height:1.2;
}
.header4 {
  font-size: 1.2em; text-decoration: underline; padding-left:8px; padding-right:8px; line-height:1.2;
}
.header5 {
  font-size: 1.2em; text-decoration: underline; line-height:1.2;
}
p {
    font-size: 1em;
    margin-left: 10px;
}
a:link {text-decoration: none; color: blue}
a:visited {text-decoration: none; color: blue}
a:active {text-decoration: none}
a:hover {text-decoration: underline; color: maroon;
a.done:visited {text-decoration: none; color: green; }
}
.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
div.top-image {
    width: 99%;
    height: 160px;
    background-image: url('../images/header.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 10%;
    position: center;
    margin-left: 10px;
    margin-right: 10px;
}
.w3-sidebar{height:100%;width:200px;background-color:#deeffe;position:fixed!important;z-index:1;overflow:auto}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:680px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:680px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 8px}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar-block .w3-bar-item{width:190px;display:block;padding:8px 16px;text-align:left;border:none;background-color:#fff;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-btn,.w3-button{border:none;display:inline-block;padding:2px 6px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;position:fixed}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding: 8px 16px}
.w3-bar .w3-button{white-space:normal}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-main,#main{transition:margin-left .4s}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-container,.w3-panel{padding:0.01em 0px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-container {padding-left: 5px;}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.w3-xlarge{font-size:14px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
@media screen and (max-width: 500px){
div.top-image {
background: url('../images/header-mobile.png');
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin-left: 0px;
    padding-right: 0px;
}
div.top-image img {
visibility: hidden;
}
}
.third {
width: 1%;
visibility: hidden;
}
div.mike img {
visibility: hidden;
width: 1px;
height: 1px;
}
.adholder {
    width:95%;
    height: auto;
}
.adholder-sq {
    width:95%;
    height: auto;
}
.adholder-bott {
width:95%;
}
.40percent{
height:336px;
width:280px;
}
@media screen and (max-width: 680px){
.adholder {
    width:95%;
    height: auto;
}
}
@media screen and (max-width: 680px){
.adholder-sq {
    width:95%;
    height: auto;
}
}
@media screen and (max-width: 680px){
.adholder-bott {
    width:95%;
    height: auto;
}
}
.note {
	margin:0px; font-weight:900;

}
.subText {
margin-top:1em;
 margin-bottom:1em;

}
form {
border-style: solid; border-color: #0000ff;
 border-width:1px; background-color:#DBEBFF;
 margin:10px auto 3px 3px;
 font-size:16px;
 line-height:130%;
 padding:3px; width:90%;
 padding:10px;
}
.NG {
color:red;

}
#result {
border-style: solid; border-color: #0000ff;
 border-width:1px; background-color:#FFD7B3;
margin:20px auto 35px 0px;
 padding:15px;
 width:50%;
font-family:Arial,sans-serif;font-size:16px;

}
#container {
background-color:#f4e8ea; 
margin-left:10px; font-family:Verdana,sans-serif;font-size:16px; 
line-height:130%;
 width:95%;

}
form div {font-family:Verdana,sans-serif;font-size:16px;
}


input {font-size: 16px;
}
table#answer_box {
font-family:Verdana,sans-serif;font-size:16px;
}
.section {
    width:75%;
    margin:auto;
    padding:10px;
}
.twothirds {
width: 99%;
}
div.jp-controls-holder {
   margin-top:-1000px;
}
div.jp-interface {
   margin-top:-1000px;
}
.responsive-container iframe { width: 640px; height: 480px; 
}
.central {
width:100%; 
font-family: Arial,sans-serif; line-height:130%;
 font-size:1em; 
}
.skype1 {
width:80%; 
font-family: Arial,sans-serif; line-height:130%;
 font-size: 1em; 
}
.skype2 {
width:20%; 
font-family: Arial,sans-serif; line-height:130%;
 font-size: 1em; vertical-align:top;
}
table.gentable {
width:100%; 
padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px;
font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
.gentable {
width:100%; 
padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px;
font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
td.half_emailtable {
width:50%; vertical-align:top;
font-family: Arial,sans-serif; font-size:1em;
background-color:#DBEBFF;
padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px;
color:maroon;
}
.emailtable {
width:100%; vertical-align:top;
font-family: Arial,sans-serif; font-size:1em;
background-color:#F7E1D5;
padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px;
color:maroon;
}
.in_spanish {
font-family: Arial,sans-serif; font-size:1em; color: gray;
}
p.tenpointsparaspace {
font-family: Arial,sans-serif; font-size: 1em; margin-top: 1em;
margin-bottom: .3em; text-decoration:underline;
}
p.tenpointsindent {
font-family: Arial,sans-serif; font-size: 1em; padding-left: 8px; margin-top: 1px; margin-bottom: 0px;
}
p.paraspace {
font-family: Arial,sans-serif; font-size: 1em; margin-top: 1em;
margin-bottom: .3em;
}
table.email {
width:85%;
margin-left:auto; 
margin-right:auto;
border-width: 2px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: collapse;
horizontal-align:center;
}
td.middle {
width:64%; height:100%; vertical-align:top;
font-family: Arial,sans-serif; font-size:1em;
padding-top:20px; padding-left:15px; padding-right:15px;
}
p.genleftbrown {
color:maroon; font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
ul.index {
color:brown; font-family: Arial,sans-serif; font-size:1em; line-height:180%;

}
.tenpcentergray {
font-family: Arial,sans-serif; font-size:1em; text-align: center; color: gray;
}
.gencenternavy {
text-align:center;color:navy;font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
.gencenterbrown {
text-align:center;color:maroon;font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
.gennavy {
color:navy;font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
.genmagenta {
color:#FF00FF;font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
.genmagenta-rt {
color:#FF00FF;font-family: Arial,sans-serif; font-size:1em; text-align:right; line-height:130%;

}
.gengrey-rt {
color:#808080;font-family: Arial,sans-serif; font-size:1em; text-align:right; line-height:130%;

}
.gengrey {
color:#808080;font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
.genbrown {
color:maroon;font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
.genbrown-rt {
color:maroon;font-family: Arial,sans-serif; text-align:right; font-size:1em; line-height:130%;

}
.gengreen-rt {
color:green;font-family: Arial,sans-serif; text-align:right; font-size: 1em; line-height:130%;

}
.gengreen {
color:green;font-family: Arial,sans-serif; font-size: 1em; line-height:130%;

}
.gencenterred {
text-align:center;color:red;font-family: Arial,sans-serif; font-size:1em; line-height:130%;

}
.gencenter {
text-align:center; Arial,sans-serif; font-size:1em;
}
.align_right {
font-family: Arial,sans-serif; font-size:1em; text-align:right; 
}
.search {
font-family: Arial,sans-serif; font-size:0.9em; padding-left:8px; padding-right:8px;
}
table.gram_table {
width:100%;
border-collapse: collapse; 
font-family: Arial,sans-serif; font-size:16px; line-height:100%;

}
table.verb_demo {
width:30%;
background-color:#FFCC99;
margin-left:12px;
}
td.demo_cell {
width:33%;
font-family: Arial,sans-serif; font-size:1em;
padding-top:6px; padding-left:10px; padding-right:10px; padding-bottom:6px;
}
td.demo_cell-r {
width:33%;
font-family: Arial,sans-serif; font-size:1em;
padding-top:6px; padding-left:10px; padding-right:10px; padding-bottom:6px;
color:red;
}
td.demo_cell-m {
width:33%;
font-family: Arial,sans-serif; font-size:1em;
padding-top:6px; padding-left:10px; padding-right:10px; padding-bottom:6px;
color:magenta;
}
td.gram_cell {
width:50%; vertical-align:top;
font-family: Arial,sans-serif; font-size:16px;
padding-top:0px; padding-left:10px; padding-right:10px; padding-bottom:0px;
border-width: 2px;
border-spacing: 0px;
border-collapse: collapse;
line-height:130%;

}
td.five-cols {
width:20%; vertical-align:top;
font-family: Arial,sans-serif; font-size:1em;
}
.text_red {
font-family: Arial,sans-serif; font-size:1em;
color:green;
}
.text_maroon {
font-family: Arial,sans-serif; font-size:16px;
color:maroon;
}
.text {
font-family: Arial,sans-serif; font-size:1em;margin-top:2px; margin-bottom:2px;
}
.textgreen {
font-family: Arial,sans-serif; font-size:1em;margin-top:2px; margin-bottom:2px;
color:green;
}
option.dk {
background-color: #E4E0E0;Arial,sans-serif; font-size:1em;
}
.months {
Arial,sans-serif; font-size:1em;
}
td.fifty_fifty {
width:50%; font-family: Arial,sans-serif; font-size:1em;
padding-top:6px; padding-left:6px; padding-right:6px; padding-bottom:6px;
vertical-align:top;font-weight:bold;background-color:#F7E1D5;
border-style: outset;
border-width: 2px;
border-spacing: 2px;
border-color: blue;
}
td.triple {
width:33%; font-family: Arial,sans-serif; font-size:1em;
padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px;
vertical-align:top;
}
td.fifty{
width:50%; font-family: Arial,sans-serif; font-size:1em;
padding-top:2px; padding-left:6px; padding-right:6px; padding-bottom:6px;
vertical-align:top;
}
.twothirds {
width:67%; font-family: Arial,sans-serif; font-size:1em;
padding-top:2px; padding-left:10px; padding-right:6px; padding-bottom:6px;
vertical-align:top; font-weight:bold;
}
.third {
width:33%; font-family: Arial,sans-serif; font-size:1em;
padding-top:2px; padding-left:6px; padding-right:10px; padding-bottom:6px;
vertical-align:top; font-weight:bold;
}
p.tenpixright {
font-family: Arial,sans-serif; font-size: 1em; text-align: right;
}
table.letterformat {
width:85%;
margin-left:auto; 
margin-right:auto;
border-width: 2px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: collapse;
background-color:white;
}
td.letterformat2 {
width:85%; padding-top:40px; padding-left:40px; padding-right:40px; padding-bottom:40px;font-weight:bold;font-size: 1em;
}
td.qtr {
width:25%; font-family: Arial,sans-serif; font-size:1em;
padding-top:2px; padding-left:6px; padding-right:6px; padding-bottom:6px;
vertical-align:top; background-color:#F7E1D5;
border-style: outset;
border-width: 2px;
border-color: blue;
}
div#centerobject {
  width: 350px ;
  margin-left: auto ;
  margin-right: auto ;
  horizontal-align: center;
}
ul.contents {
font-family: Arial,sans-serif; font-size: 1em;
}
li {
font-family: Arial,sans-serif; font-size: 1em;
padding-bottom:15px; line-height:130%;
}
ul.index {
font-family: Arial,sans-serif; font-size: 1em;
line-height:130%
}
p.ind_head {
font-family: Arial,sans-serif; font-size: 1em;
line-height:130%
}
td.cvwide{
width:75%; font-family: Arial,sans-serif; font-size: 1em;
padding-left:6px; padding-right:6px;
vertical-align:top; border-left: 2px solid black; border-right: 1px solid black; background-color: white;
}
td.cvnarrow{
width:25%; font-family: Arial,sans-serif; font-size: 1em;
padding-left:6px; padding-right:6px;
vertical-align:top;background-color: #FFFAF5; text-align: right; border-left: 1px solid black; 
}
button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
td.story {
width:90%; font-family: Arial,sans-serif; font-size: 1em;
padding-top:6px; padding-left:6px; padding-right:6px; padding-bottom:6px;
vertical-align:top;background-color:#F7E1D5;
border-style: outset;
border-width: 2px;
border-spacing: 2px;
border-color: blue;
}
td.bilingual {
width:47%; font-family: Arial,sans-serif; font-size: 1em;
padding-top:6px; padding-left:6px; padding-right:6px; padding-bottom:6px;
vertical-align:top;background-color:#F7E1D5;
border-style: outset;
border-width: 2px;
border-spacing: 2px;
border-color: blue;
}
td.bil-listen {
width:6%; font-family: Arial,sans-serif; font-size: 1em;
padding-top:6px; padding-left:2px; padding-right:10px; padding-bottom:6px;
vertical-align:middle; text-align:left; background-color:#DBEBFF;
}
table.lower-table {
width:100%; 
padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px;
font-family: Arial,sans-serif; font-size: 1em; line-height:130%;


border:2px solid blue;
 background-color:#DBEBFF;
 margin:10px auto 3px 3px;

}
table.answers {
width:10%; 
padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px;
font-family: Arial,sans-serif; font-size: 1em; line-height:130%;


border:2px solid blue;
 background-color:#DBEBFF;
 margin:10px auto 3px 3px;

margin-left:auto; margin-right:auto;
}
td.solution {
width:20%; font-family: Arial,sans-serif; font-size: 1em; line-height:130%;
 
text-align:center;font-weight: bold;
}
td.letter {
width:5%; font-family: Arial,sans-serif; font-size: 1em;
padding-top:6px; padding-left:2px; padding-right:10px; padding-bottom:6px;
vertical-align:middle; text-align:right; background-color:#DBEBFF; line-height:130%;
 
}
td.number {
width:5%; font-family: Arial,sans-serif; font-size: 1em;
padding-top:6px; padding-left:0px; padding-right:0px; padding-bottom:6px;
vertical-align:middle;text-align:center;background-color:#DBEBFF; line-height:130%;
 
}