body{font-family:Verdana,sans-serif;font-size:1em;line-height:1.5;background-color: #ffffcc;}
.index-contain {
    margin-left: 80px;
    margin-right: 80px;
}
.body-gram-ex {
background-color: #f5f5f0;
font-family: Verdana,sans-serif;
font-size:1em;
line-height:1.5;
}
@media screen and (max-width: 680px){
.index-contain {
    margin-left: 5px;
    margin-right: 5px;
}
}
.header1 {
  font-size: 1.4em; text-align:center; text-decoration: underline; line-height:1.2; margin-left: 20px; margin-right: 20px;
}
.header2 {
  font-size: 1.3em; text-align:center; text-decoration: underline; line-height:1.2; margin-left: 20px; margin-right: 20px;
}
.header3 {
  font-size: 1.2em; text-decoration: underline; line-height:1.2; margin-left: 20px; margin-right: 20px;
}
.header4 {
  font-size: 1.2em; line-height:1.2; margin-left: 20px; margin-right: 20px;
}
.header5 {
  font-size: 1.2em; line-height:1.2; margin-left: 20px; margin-right: 20px;
}
.headersp {
  font-size: 0.95em; text-align:center; text-decoration: underline; line-height:1;
}
.bfont {
font-weight: bold;
}
p {
    font-size: 1em;
    margin-left: 20px;
}

hr {
display: block;
margin-before: 0.5em;
margin-after: 0.5em;
margin-start: auto;
margin-end: auto;
overflow: hidden;
border-style: inset;
border-width: 2px;
background-color:#666;
}
p.menu-titles {
font-size: 1.1em; line-height:1.1; margin-left: 25px; margin-right: 25px; font-weight: bold;
text-align:center; }
#menuleft {
font-size: 1.1em;
color: yellow;
font-weight: bold;
display: block;
text-align: center;
}
.italic{
font-style: italic;
}
.strikethru {
text-decoration: line-through;
}
dt {
padding-left: 40px
}
dd {
padding-left: 60px
}

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; }
}
div.top-image {
    width: 99%;
    height: 125px;
    background-image: url('../images/logo.gif');
    border-radius: 25px;
    border-style: solid;
    border-color: teal;
    border-width:3px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 10%;
    position: center;
    margin-left: 10px;
    margin-right: 10px;
}
/* width */
::-webkit-scrollbar {
  width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: teal;
  border-radius: 10px;
    border-style: solid;
    border-color:  yellow;
    border-width:1px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: teal; #006666
}
.w3-sidebar{height:100%;width:200px;background-color:#006666;position:fixed!important;z-index:1;border-radius: 10px;border-style: solid;border-color:yellow;font-family:Verdana,sans-serif;font-size:1em;border-width:1px; 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;border-radius:5px;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/logo2b.jpg');
    border-radius: 25px;
    border-radius: 25px;
    border-style: solid;
    border-color: teal;
    border-width:3px;
    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 {
margin: auto;
border-style: solid; border-color: teal;
 border-width:3px; background-color:white;
 font-size:1em;
 line-height:130%;
 padding:3px; width:90%;
 padding:10px;
border-radius: 25px;
}
.NG {
color:red;
}
#result {
margin: auto;
border-style: solid; border-color: teal;
border-width:3px; background-color:yellow;
margin-top: 20px;
margin-bottom: 20px;
padding:15px;
width:50%;
font-family:Verdana,sans-serif;font-size:1em;
border-radius: 15px;
}
#container {
background-color:e6ffff;
margin-left:10px; font-family:Verdana,sans-serif;font-size:1em;
line-height:130%;
width:95%;
margin: auto;
}
form div {
font-family:Verdana,sans-serif;font-size:1em;
}
input[type=submit] {
    color:white;
    padding:5px 15px;
    background:teal;
    border: none;
    cursor:pointer;
    border-radius: 5px;
    border: 2px solid teal;
    box-shadow: 6px 6px #999;
    transition-duration: 0.2s;
    margin-right: 20px;
    margin-left: 25px;
}
input {font-size: 16px;
    border-radius: 5px;
    border: 2px solid teal;
}
input:hover {font-size: 16px;
    border-radius: 5px;
    border: 2px solid teal;
    background-color: yellow;
}
input[type=submit]:hover {
  background-color: yellow;
  color: black;
  border: 6px;
  border: 2px solid teal;
}
input[type=submit]:active {
  box-shadow: 3px 3px #666;
  transform: translateY(4px);
}

table#answer_box {
font-family:Verdana,sans-serif;font-size:1em;
}
.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 {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.central {
width:100%;
font-family: Verdana,sans-serif; line-height:130%;
 font-size:1em;
}
.skype1 {
width:80%;
font-family: Verdana,sans-serif; line-height:130%;
 font-size: 1em;
}
.skype2 {
width:20%;
font-family: Verdana,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: Verdana,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: Verdana,sans-serif; font-size:1em; line-height:130%;
}
.video-container {
  width: 70vw;
  max-width: 560px ;
  margin:auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
  width: 70vw;
  max-width: 560px ;
  height:calc((9/16)*70vw);
  max-height:calc((9/16)*560px);
}
td.half_emailtable {
width:50%; vertical-align:top;
font-family: Verdana,sans-serif; font-size:1em;
background-color:#DBEBFF;
padding-top:10px; padding-left:10px; padding-right:32px; padding-bottom:10px;
color:navy;
}
.emailtable {
width:50%; vertical-align:top;
font-family: Verdana,sans-serif; font-size:1em;
background-color:#F7E1D5;
padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px;
color:maroon;
margin-left: auto;
margin-right: auto;
}
.in_spanish {
font-family: Verdana,sans-serif; font-size:1em; color: gray;
}
p.tenpointsparaspace {
font-family: Verdana,sans-serif; font-size: 1em; margin-top: 1em;
margin-bottom: .3em; text-decoration:underline;
}
p.tenpointsindent {
font-family: Verdana,sans-serif; font-size: 1em; padding-left: 8px; margin-top: 1px; margin-bottom: 0px;
}
p.paraspace {
font-family: Verdana,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: Verdana,sans-serif; font-size:1em;
padding-top:20px; padding-left:15px; padding-right:15px;
}
.genleftbrown {
color:navy; font-family: Verdana,sans-serif; font-size:1em; line-height:1.5;
}
ul.index {
color: #ffff00; font-family: Verdana,sans-serif; font-size:1em; line-height:180%;
}
#sidebar {
color: white;
}
#sidebar li a {
color: #ffff00;
hover: underline;
}
#sidebar li {
color: #ffff00;
margin-right: 5px;
}
.separator {
    border-bottom: solid 4px;
    position: relative;
    color: blue;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.tenpcentergray {
font-family: Verdana,sans-serif; font-size:1em; text-align: center; color: gray;
}
.gencenternavy {
text-align:center;color:navy;font-family: Verdana,sans-serif; font-size:1em; line-height:1.5;

}
.gencenterbrown {
text-align:center;color:navy;font-family: Verdana,sans-serif; font-size:1em; line-height:1.5;

}
.gennavy {
color:navy;font-family: Verdana,sans-serif; font-size:1em; line-height:1.5;

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

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

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

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

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

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

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

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

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

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

}
table.verb_demo {
width:30%;
background-color:#FFCC99;
margin-left: auto;
margin-right: auto;
}
td.demo_cell {
width:33%;
font-family: Verdana,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: Verdana,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: Verdana,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: Verdana,sans-serif; font-size:1em;
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: Verdana,sans-serif; font-size:1em;
}
.text_red {
font-family: Verdana,sans-serif; font-size:1em;
color:green;
}
.text_maroon {
font-family: Verdana,sans-serif; font-size:1em;
color:maroon;
}
.text {
font-family: Verdana,sans-serif; font-size:1em;margin-top:2px; margin-bottom:2px;
}
.textgreen {
font-family: Verdana,sans-serif; font-size:1em;margin-top:2px; margin-bottom:2px;
color:green;
}
option.dk {
background-color: #E4E0E0;Verdana,sans-serif; font-size:1em;
}
.months {
Verdana,sans-serif; font-size:1em;
}
td.fifty_fifty {
width:50%; font-family: Verdana,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:white;
border-style: outset;
border-width: 3px;
border-spacing: 2px;
border-color: teal;
border-radius: 25px;
}
td.triple {
width:33%; font-family: Verdana,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: Verdana,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: Verdana,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: Verdana,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: Verdana,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: Verdana,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;
}
div#mc_embed_signup {
  margin-left: auto ;
  margin-right: auto ;
  max-width: 500px;
  horizontal-align: center;
}
ul.contents {
font-family: Verdana,sans-serif; font-size: 1em;
}
li {
font-family: Verdana,sans-serif; font-size: 1em;
padding-bottom:15px; line-height:130%;
}
p.ind_head {
font-family: Verdana,sans-serif; font-size: 1em;
line-height:130%
}
td.cvwide{
width:75%; font-family: Verdana,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: Verdana,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: Verdana,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: Verdana,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: Verdana,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: Verdana,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: Verdana,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: Verdana,sans-serif; font-size: 1em; line-height:130%;

text-align:center;font-weight: bold;
}
td.letter {
width:5%; font-family: Verdana,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: Verdana,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%;

}