/* 
    Created on : Jul 6, 2016, 8:59:18 PM
    Author     : Leonard Garcia.  All rights reserved.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color:  black;
    color: darkgrey;
    margin: 0;
} 
::-webkit-scrollbar {
    width: 1.5em;
    height: 1em;
}

::-webkit-scrollbar-track {
  background-color: hsl(120 75% 50%/1);
  border-radius: 100vw;
  margin-block: 0.5em;
}

::-webkit-scrollbar-thumb {
  background: hsl(120 100% 20% / 1);
  border: 0.25em solid hsl(120 100% 20% / 1);
  border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(120 100% 10% / 1);
}

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */       
}

#header, #pvHeader {
    color: darkgreen;
    text-shadow: 0px 2px 3px #555;
    font-family: Harry p, Verdana;
    font-size:270%;
    position: absolute;
    left: 550px;
    top: 5px;
    padding:5px;
    margin-bottom: 5px;
    max-width: 90%;
}

.header2 {
    color: darkgreen;
    font-family: Harry p, Helvetica;
    font-size: 3.1em;
    font-weight: 600;
    text-shadow:#fff 0 -1px 4px, 
    #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
}
.headShot {
    margin-top: 5%;
    margin-left: 32%;
}
.theme {
    margin-top: 5%;
    margin-left: 17%;
    width: 45%;
}
#presHead, #pastHead, #conjHead, #futureHead, #ppHead, #pastpHead, #c2Head, 
#rsHead, #fpHead, #causeHead 
{
    position: absolute;
    top:    5px;
    left:   30%;
}
#vgiHead {
    position: absolute;
    top:    5px;
    left:   10%;
}
#select::before {
    content: url(../images/wizman_tiny.png);
}
#presPerfShot {
    width: 320px; height: 220px;
    margin-bottom: -2%;
    margin-left: 30%;
}
#presShot {
    width: 320px; height: 220px;
    margin-top: 8rem;
    margin-bottom: -2%;
    margin-left: 28%;
}
#futureShot{
    border: 4px;
    border-color: #cabc26;
    border-style: groove;
    border-radius: 6rem;
    margin-left: 25%
}
#appleShot {
    width: 200px; height: 220px;
    margin-top: 8rem;
    margin-bottom: -4rem;
}
#reportShot {
    border: 5px gold;
    border-style: groove;
    margin-top: 5%;
    margin-left: 26.5%;
    margin-bottom: -2rem;
}
#VGIShot {
    border: 5px gold;
    border-style: groove;
    width: 400px; height: 300px;
    margin-top: 5%;
    margin-left: 15%;
    margin-bottom: -2rem;
}
#scrbar {
    border: 4px;
    border-color: #089494;
    border-style: ridge;
    border-radius: 5px;
    position: relative;
    top:      5vh;
    left:     5vw;
    width: 30%; height: 30%;
    margin-top: 1rem;
    margin-left: 20%;
}
.ball{
    width: 20px; height: 20px;
}
.yellowHand {
    float: left;
    margin: .5rem;
    margin-bottom: 5rem;
    width: 30px; height: 50px;
}
.txtPrompt {
    background-image:url('../images/txtPrompt2.jpg');
    float: left;
    padding-left: 43px;
    background-size: 38px;
    background-repeat: no-repeat;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
}
#wizwel {
    border: 6px;
    border-color: goldenrod;
    border-radius: 6px;
    border-style: groove;
    margin-left: 2rem;
    margin-top: 4rem;
    margin-bottom: -2rem;
}

#woeVid {
    border: 8px;
    border-color: goldenrod;
    border-radius: 3rem;
    border-style: groove;
    margin-left: 5rem;
    margin-top:  2rem;
    margin-bottom: 1rem;
}
    
.ww {
    width: 200%; /*100% */
    height: 340px;
    margin: 0px 0px 5px 5px; /*top, right, bottom, left */
} 
.woewoe {
    width: 200%; 
    height: 400px;
    margin: 0px 0px 5px 5px; /*top, right, bottom, left */
}

#preTest {
    border: 2px;
    border-color: silver;
    background-color: white;
    border-style: inset;
    padding: .5rem;
}

.conjunction2 {
     width: 400px;
     aspect-ratio: 16/ 9;
     margin-top: 5rem;
     margin-left: 80px;
     border: 8px;
     border-style: solid;
     border-color:#3399ff;
     border-radius: 5%;
     outline: 10px groove blueviolet;
     outline-offset: -1px;
     background-position: 0 0;
     background: rgb(2,0,36);
     background: linear-gradient(90deg, rgba(14,136,201,0.004639355742296902) 20%, rgba(58,133,135,0.8897934173669468) 31%, rgba(0,212,255,1) 100%);
     background-size: 140% 140%; 
}

#bedside {
    float: left;
    border-width: 2px;
    border-color:transparent;
    border-radius: 50% 50%;
    width: clamp(8rem, 9vw, 20rem);
    margin-right: 1rem;
    
}
/*-----------------------------begin future.html---------------------------*/
h1  {
    color: darkgreen;
    font-family:verdana;
    font-size: 200%;
    position: relative;
    left: 310px;
    top:   30px;
    padding: 10px;
}
#gcu {
    color:burlywood;
    text-shadow: -2px 2px 2px black;
}
h2  {
    color: yellow;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 80%;
    position: relative;
    left: 5px;
    top:   5px;
    padding: 5px;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
}
h3 {
    color: #29c389;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 100%;
    margin-left: 25px;
    margin-bottom: -10px;
}
#dancer {
    border: 5px;
    border-radius: 5%;
    border-color:lightgreen;
    border-style:solid;
    margin-top: 5rem;
    margin-left: 2rem;
    margin-bottom: -3rem;
}
#alive {
    color: yellow;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 40px;
    font-weight: 600;
    margin-top:  5rem;
    margin-left: 3rem;
}
#radioDir {
    border: 4px;
    border-color: silver;
    border-style:double;
    border-radius: 5%;
    color:          black;
    background-color: silver;
    font-size: 20px;
    padding: .5rem;
    margin-top: 3rem;
    margin-left: 3rem;
    width: 380px;
}

.pnorm {
   color: darkgreen;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-size: 1em; 
   font-weight: 300;
   width: auto;
}
.norm_story {
    background-color: white;
    font-size: 20px;
    font-style: normal;
    width: 80%;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    box-shadow: 10px 10px 5px lightgreen;
    padding: 5px;
    position: relative;
    top: 50px;
    left: 20px;
    margin-bottom: 5px;
}
.pspec {
   color: darkgreen;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-size: 1em; 
   font-weight: 300;
   width: auto;
}
.select{
    background-color:white;
    color: #A52A2A; 
    border: 4px;
    border-color: silver;
    border-style: solid;
    border-radius: 4px;
    text-indent: 5%; 
    font-size: 1.3rem; 
    padding: 2px;
    width:20rem;
    margin-left: 2rem;
}
.directions{
    background-color:white;
    color:darkgreen; 
    border: 4px;
    border-color: silver;
    border-style: solid;
    border-radius: 4px;
    text-indent: 3%; 
    font-size:  1.3rem; 
    padding:    2px;
    width:      20rem;
    margin-left: 2rem;
}

.splitImages {
    border: 4px;
    border-color: darkgreen;
    border-style: ridge;
    border-radius: 4px;
    margin-left:  3rem;
    margin-right: -2.5rem;
    width: 300px; height: 200px;
}
.textWindow {
    color: black;
    background-color: white;
    font-size:      20px;
    border:         4px;
    border-color:   darkgreen;
    border-style:   ridge;
    border-radius:  4px;
    margin-left:    2rem;
    margin-right:   2rem;
    width:          250px;
}
.inRow {
    display:        inline-block;
}

p#blue {
   color: blue;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-size: 1em; 
   font-weight: 600;
}
p#red {
   color: red;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-size: 1em; 
   font-weight: 600;
}
p#story {
   background-color: white;
   color: black;
   font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
   font-style: italic;
   font-size: .85em; 
   font-weight: 500;
   margin-bottom: 10px;
}
.p1::first-letter {
    font-size: 200%;
    color: #186321;
} 
#p1::first-letter {
    font-size: 200%;
    color: #186321;
}

.sentence::firstSent{
    font-family: Lucida Calligraphy;  
    font-size: 1.3em;  
    color: rgb(33, 74, 4);  
    text-shadow: 5px 8px 9px rgb(148, 205, 148);  
}
.standOut{
    font-weight: 600;
    color:black;
}
.conj {
    border: 4px;
    border-color:#186321;
    border-style:dotted;
    background-color: white;
    color: #186321;
    padding-left: 2.5rem;
}
.conj2 {
    font-family:cursive;
    font-size:  20px;
    font-weight: 600;
    border: 4px;
    border-color:#186321;
    border-style:dotted;
    background-color: white;
    color: #186321;
    padding: .5rem;
    margin-left: 20px;
    width: fit-content;
}

ol {
    border: 4px;
    border-color: #186321;
    border-style: double;
}
#timeline {
    position: relative;
    left: 20px;
}
#topimage {
    position: relative;
    top: 60px;
    left: 30px;
}
#def {
    position: relative;
    top: 60px;
    left: 30px;
}

.textwrap {
    float: left;
    margin: 10px;
    border: 2px;
    border-color: transparent;
    border-style: solid;
    border-radius: 50%;
}
.postImg {
    padding: 1rem;
}
#cartoon {
    position: relative;
    top: 5px;
    left: 20px;
    margin-bottom: -7px;
}

#gramMan {
    float: left;
    width: 3.5rem; height: 5rem;
    margin-right: 1rem;
    margin-top: -.8rem;
    margin-bottom: .5rem;
}
#grammarMan{
    float: left;
    width: 3.5rem; height: 5rem;
    margin-right: .5rem;
    margin-top: -.8rem;
    margin-bottom: .5rem;
    clip-path: circle(50%);
    shape-outside: circle(50%);

} 

.iconic {
    float: left;
    width: 3rem; height: 3em;
    margin-right: 1rem;
    margin-top: -.5rem;
    margin-bottom: .5rem;
}
#inset {
    margin-top: -1.5rem;
    margin-left: -.5rem;
    margin-bottom: 1.8rem;
}
#larger {
    font-size: 1.5rem;
    padding: 1rem;
    margin-top: -1.5rem;
    margin-left: -.5rem;
    margin-bottom: 1.8rem;
}
#small {
    width: 50px; height: 50px;
}
#except {
    width: 2rem; height: 2rem;
    margin-top: -.3rem;
}
#reporter {
    border: 4px transparent;
    border-radius: 25%;
    float: left;
    margin-top: -1rem;
    margin-left: -1rem;
    padding: 1rem;
    width: 6rem; height: 8rem;
}
#pad {
    font-family: serif;
    font-size: 24px;
    padding: 4px;
    height: 8rem;
}
#TEdison {
    background-image: url("../images/old_paper.jpg");
    background-color: grey;
    color: black;
    font-size: 25px;
    font-weight: 600;
    border: 6px gold;
    border-radius: 5%;
    border-style: groove;
    width: fit-content;
    padding: 6px;
    margin-top: 8rem;
    margin-left: 2rem;
}
div#warning {
    background-image: url("../images/old_paper.jpg");
    background-color: grey;
    color: black;
    font-size: 20px;
    font-weight: 600;
    border: 6px gold;
    border-radius: 5%;
    border-style:ridge;
    width: fit-content;
    padding: 6px;
    margin-top: 4rem;
    margin-left: 2rem;
}

div#header {
    width: 700px;
}  
  
div#content {
    height: 200px;
    width: auto;     
}  

.pVerb {
    background-color: lightgoldenrodyellow;
    background-image: url("../images/old_paper.jpg");
    color: darkgreen;
    font-size: 1.2rem;
    width: 640px;
    border: 2px;
    border-radius: 4px;
    border-style: ridge;
    padding: 2px;
    margin-left: 20px;
}
.caption {
    color: yellow;
    text-shadow: 0px 2px 3px #555;
    font-family:verdana;
    font-size: 1.3em;
    position: absolute;
    left: 40px;
    top: 90px;
    padding:5px;
    margin-bottom: 10px;
    
}
#rules {
    font-size:  15px;
    font-weight: bold;  
    width: 45vw;
    padding: 4px;
    border: 8px;
    border-radius: 6px;
    border-color: #139483;
    border-style: ridge;
    background-color: black;
    color:      gold;
    position:   relative;
    left:       5px;
}
#fortune {
    position: relative;
    top:      80px;
    left:    -600px;
}

/*-----------------------------end future.html---------------------------*/
.verbs {
    float: left;
    width: 10%; height: 5%;
    margin-right: 1rem;
}
.list {
    width: fit-content;
    margin-left: 9rem;
}
.flow {
    font-size: 1em;
    float: left;
    margin-top: -5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.btn {
    position: relative;
    top: 260px;
    left: 100px;
    width: 100px;
    padding: 5px;
    border-width: 5px;
    font-size: 1.2em;
    font-weight: 600;
    font-style: italic;
    font-family: cursive;
    color: darkgreen;
    background-color: #c6d7ce;;
    margin-bottom: 20px;
    margin-top: 20px;
}
.btn:hover {
    background-color: yellow;
}

.ital {
    background-color: lightgreen;
    color: darkgreen;
    font-size: 20px;
    font-style: oblique;
    width: 500px;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 7px;
    position: relative;
    top: 70px;
    left: 20px;
    margin-bottom: 5px;
}
.norm {
    background-color: lightgreen;
    color: darkgreen;
    font-size: 20px;
    font-style: normal;
    width: 80%;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 5px;
    position: relative;
    top: 25px;
    left: 20px;
    margin-bottom: 20px;
    margin-top:    20px;
}
.norm_short {
    background-color: lightgreen;
    color: darkgreen;
    font-size: 20px;
    font-style: normal;
    width: 136px;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 5px;
    position: relative;
    top: 120px;
    left: 20px;
    margin-bottom: 5px;
}
.norm_list {
    background-color: lightgoldenrodyellow;
    color: darkgreen;
    font-size: 20px;
    font-style: normal;
    max-width: 200px;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 5px;
    position: relative;
    top: 30px;
    left: 20px;
    margin-bottom: 5px;
}
.norm_list {
    color: black;
    font-weight: 600;
    background-image: url("../images/launch_BG.png");
    background-repeat: no-repeat;
}
.norm_skinny {
    background-color:#86ec86;
    color: black;
    font-size: 13.5px;
    font-style: normal;
    width: 420px;
    border: 3px;
    border-radius: 5px;
    border-style:groove;
    padding: 2px;
    position: relative;
    top: 10px;
    left: 5px;
    margin-left: 1rem;
    margin-bottom: 18px;
}
.norm_highlight {
    background-color: lightgoldenrodyellow;
    color: darkgreen;
    font-size: 1.5em;
    font-weight: 600;
    font-style: normal;
    width: 420px;
    border: 5px;
    border-radius: 10px;
    border-style:groove;
    padding: 2px;
    margin-left: 1rem;
}
.norm_wide {
    background-color: lightgreen;
    color: darkgreen;
    font-size: 20px;
    font-style: normal;
    width: 800px;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 5px;
    position: relative;
    top: 50px;
    left: 20px;
    margin-bottom: 5px;
}

.indent{
    font-size:   18px;
    color:       yellow;  
    margin-left: 20px;
}
.PhV {
    background-color:#86ec86;
    color: black;
    font-size: large;
    padding: 2px;
    border: 6px;
    border-color: yellow;
    border-style:double;
    width: fit-content;
    margin-left: 20px;
}
aside {
    position:relative;
    top: -250px;
    left: 300px;
}
#ex {
    display: inline;
}
.subtitle {
    background-color: lightgreen;
    color:          black;
    font-size:      1.5em;
    border:         6px;
    border-color:   silver;
    border-radius:  6px;
    border-style:   ridge;
    padding:        4px;
    position:       relative;
    left:           15px;
    margin-bottom: -25px;
    width:          50%;
}
div#hideanswer {
    display: none;
    background-color: lightgreen;
    color: darkgreen;
    font-size: 22px;
    font-style: oblique;
    width: 970px;
    border: 5px;
    border-radius: 15px;
    border-style:groove;
    padding: 7px;
    position: relative;
    top: 60px;
    left: 20px;
    margin-bottom: 10rem;
}
p#hideAns1  {
    display:none;
    background-color:lightgoldenrodyellow;
    color: black;
    border: 4px;
    border-color: #73AD21;
    border-style: double;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    padding: 1rem;
    width: fit-content;
}
         
p#hideAns2  {
    display:none;
    font-size: 14px;
}
textarea {
    position: relative;
    left: 17px;
    width : 80%;
    height: auto;
    margin: 0;
    background-color: khaki;
    color: black;
    border-width: 2px;
    border-color: #635208;
    font-family: sans-serif;
    text-align: left;
    
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
       -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
            box-sizing: border-box;
}
#styled {
     background-color: #fff;   
}
div.intro
{
    color: #A52A2A;
    font-size: 2rem;
    font-weight: 900;
    margin-left: 20px;
}
div.instruct {
    background-color: #089494;
    color:       floralwhite;
    font-size:   1.2rem;
    padding:     .5rem;
    margin-top:  1rem;
    margin-left: 20px;
    width: fit-content;
}

div.correct { }

div.panel,div.flip {
  margin:0px;
  padding:5px;
  text-align:center;
  background:yellow;                    
  border:solid 2px darkolivegreen;             
  width:140px;
}
div.panel
{
  display:none;
  color: #A52A2A;
}
div.flip 
{
  margin-bottom: 5px;
}
.inrow {
    display: block;
    width: fit-content;
}
figure {
    display: inline-block;
    width: 80%;
}

figcaption {
  background-color: black;
  color: white;
  font-size: 25px;
  font-style: italic;
  padding: 2px;
  text-align: left;
}

#holder {
    position: fixed;
    top: 70%; 
    border: 3px;
    border-color: yellow;
    border-style: solid;
    margin-left: 30%;
    z-index: -1;
}
.question
{
    cursor: url(../images/hand.png), default;  
    position: relative;
    top:  10px;
    left: 20px;
    float: left;
    margin-bottom: -5px;
}   
.cquestion
{
    cursor: url(../images/hand.png), default;  
    position: relative;
    top:  -5px;
    left: 20px;
    margin-bottom: -25px;
}   
.questions
{
    color: darkgreen;
    font-weight: 600;
    height: 80px;
    margin-top: 10px;
    margin-bottom: 5px;
}
.tquestion
{
    background-image: linear-gradient(to bottom right, darkgreen, #42F551, yellow);
    background-color: lightgoldenrodyellow;
    color: black;
    font-weight: 600;
    border: 4px;
    border-radius: 10px;
    padding:        5px;
    cursor: url(../images/hand.png), default;  
    float:left;
    margin-left: 1rem;
    margin-bottom: 2px;
    width: auto;
}
input {
    cursor: url(../images/hand.png), default;
}
.answers {
    margin-left: 1rem;
    margin-top: 10px;
    overflow: hidden; 
}

.canswers {
    margin-top: 10px;
    overflow: hidden; 
}
.spacer2 {
    
}

button {
    position     : relative;
    left         : 20px;
    top          : 20px;
    padding      : 5px;
    font         : bold 1em sans-serif;
    border       : 2px solid #635208;
    border-radius: 5px;
    background-color:#ff0;
    color        : darkgreen;
    cursor       : pointer;
}

button:after {
    content: " ";
}

button:hover,
button:focus {
     outline   : none;
     background-color: #d1e012;
     color   : #635208;
}

.sounds {
    display: inline;
    float:   left;
}
.AudBox {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 300px;
    height: 30px;
    position: relative;
    left: 30px;
    margin:90px 5px 0px 0px; /*top, right, bottom, left */
}
 @-moz-document url-prefix() {
    .audbox_future {
        display: inline-block;
        border-radius: 20px;
        padding: 5px;
        width: 150px;
        height: 35px;
        position: relative;
        top: -10px;
        margin:0px 5px 10px 0px; /*top, right, bottom, left */
    }

    audio {
        -moz-appearance: normal;
        padding: 3px;
        width: 60px;  
        height: 5px; 
        position: relative;
        top: 3px;
        left: -5px;
    }
}  
    
.audbox_future {
    border-radius: 25px;
    background: darkgreen;
    padding: 5px;
    width: 170px;
    height: 24px;
    float:left;
    margin:0px 0px 0px 15px; /*top, right, bottom, left */
}

.audbox_report {
    display: inline-block;
    border-radius: 25px;
    background: darkgreen;
    padding: 20px;
    width: 158px;
    height: 24px;
    float:left;
    margin:0px 0px 0px 2px; /*top, right, bottom, left */
}
audio {
    padding: 1px;
    width:159px;
    height: 15px;
    position: relative;
    top: 2px;
    left: -5px;
    margin:0px 0px 1px 10px; /*top, right, bottom, left */
}

#full {
    padding: 2px;
    width: 315px;
    height: 15px;
    position: relative;
    top: 2px;
    float: left;
    margin:0px 3px 1px 10px; /*top, right, bottom, left */
}

#pc_tab {
    display: block;
}
#cell {
    display: none;
}
.cp {
    display: none;
}
div#example {
    position: relative;
    left: 15px;
    margin-bottom: 2px;
}
#test {
    padding: 7px;
    margin-bottom: 30px;
}

.question {
    color: darkgreen;
    font-weight: 600;
}
.answers {
    color: darkgreen;
}
.answers li {
    list-style: upper-alpha;
}
input {
    margin: .5rem;
}
label {
    color: yellow;
    margin-left: 0.5em;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
}

#results {
    -webkit-box-shadow: 0 5px 5px rgba(13, 108, 12, .4);
    box-shadow: 0 5px 5px rgba(13, 108, 12, .4);
    background-repeat: repeat-y;
    background: yellowgreen;
    color: red;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    font-weight: 600;
    font-size: 1.35em;
    padding: 3px;
    text-align: center;
    width: 200px;
    cursor: pointer;
    border: 8px;
    border-color: darkgreen;
    border-radius: 10px;
    margin-left: 1rem;
}

#results:hover {
    background: yellow;
    color: red;
    font-weight: 600;
    padding: 3px;
    text-align: center;
    width: 200px;
    cursor: pointer;
    border: 8px chartreuse;
    border-radius: 10px;
}

#categorylist {
    margin-top: 6px;
    display: none;
}

#category1, #category2, #category3, #category4, #category5, #category6, #category7, #category8, #category9, #category10, #category11 {
    display: none;
    color: red;
    font-style: normal;
    font-size: 1rem;
}

#closing {
    display: none;
    font-style: italic;
} 

/* tooltip styles */
a.info{
    position:relative; /*this is the key*/
    z-index:24; 
    background-color: lightgreen;  
    color: darkgreen;     
    font-weight: bold;
    text-decoration:none
}

a.info:hover{z-index:25; background-color: #FFD700;}  /* gold */

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display: block;
    position: absolute;
    padding: 2px;
    top: 2em; left:2em; width:10em;   
    border: 1.5px solid darkgreen;    
    border-radius: 7px;
    background-color: greenyellow; 
    color: black;  
    font-size: .7em;
    text-align: center
}
table {
    margin-left: 1rem;
}
td {
    width: 205px; height: 50px; 
    border-radius: 8px;
    border-style: solid;
    border-width: 15px; 
    border-color:  darkgreen;    /* was chartreuse  */
    background-color: white;
    margin: 15px;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-style:  normal;
    font-size: 14px;
    font-weight: bold;
    color:       black;
} 

.fp {
    width: 30px; height: 50px; 
    border-radius: 5px;
    border-style: solid;
    border-width: 3px; 
    border-color:  darkgreen;    /* was chartreuse  */
    background-color: yellow;
    margin: 10px;
    padding: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-style:  normal;
    font-size: 10px;
    font-weight: bold;
    color:       darkgreen;
}
.fp2 {
    width: 3px; height: 50px; 
    border-width: 3px;
    font-size: 25px;
    color:       darkred;
}

.drags, .drops, .nodrops {
    width: 150px; height: 50px; 
    border-radius: 8px;
    border-style: solid;
    border-width: 15px; 
    border-color:  darkgreen;
    margin: 15px;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-style:  normal;
    font-size: 14px;
    font-weight: bold;
    color:  dodgerblue;  
} 
#Drag_1, #Drag_2, #Drag_3, #Drag_4, #Drag_5 { 
    width: 150px; height: 50px; 
}
#Drop_1, #Drop_2, #Drop_3, #Drop_4, #Drop_5 { 
    width: 150px; height: 50px; 
}
#NoDrop_1, #NoDrop_2, #NoDrop_3, #NoDrop_4, #NoDrop_5 { 
    width: 150px; height: 50px; 
}
#dragrow {
              
}
#pc {
      visibility: visible; 
      margin-left: 2rem;
}
#tab {
      visibility: hidden; 
}
#cell {
      position: relative;
      top:10px;
      visibility: hidden;
}
#next {
    width: 220px;
    height: 85px;
    border: 3px;
    border-color: darkgreen;
    border-radius: 15px;
    padding: 3px;
    opacity: .6;
    position: relative;
    top: 20px;
    left:30px;
    margin-bottom: 3px;
}

#next:hover {
    opacity: 1;
}

#back {
    opacity: .6;
    width: 220px;
    height: 85px;
    padding: 3px;
    position: relative;
    top: 80px;
    left:30px;
    border: 3px;
    border-color: darkgreen;
    border-radius: 15px;
    margin-bottom: 5px;
}

#back:hover {
    opacity: 1;
}

.guide {
    position: relative;
    left: 20px;
    background-color: linen;
    color:          black;
    font-size:      1.2em;
    font-weight:    600;
    border:         6px;
    border-color:   goldenrod;
    border-radius:  5%;
    border-style:   groove;
    padding:        4px;
    width:          50%;
    margin-bottom:  -10px;
}

#preVid {
    position: relative;
    left: 20px;
    background-color: linen;
    color:          black;
    font-size:      1.2rem;
    font-weight:    600;
    border:         6px;
    border-color:   goldenrod;
    border-radius:  5%;
    border-style:   ridge;
    padding:        .3rem;
    width:          50%;
    margin-bottom:  10px;
}

.video {
     width: 400px;
     aspect-ratio: 16/ 9;
     margin-top: 5rem;
     margin-left: 80px;
     border: 8px;
     border-style: solid;
     border-color:#3399ff;
     border-radius: 5%;
     outline: 10px groove blueviolet;
     outline-offset: -1px;
     background-position: 0 0;
     background: rgb(2,0,36);
     background: linear-gradient(90deg, rgba(14,136,201,0.004639355742296902) 20%, rgba(58,133,135,0.8897934173669468) 31%, rgba(0,212,255,1) 100%);
     background-size: 140% 140%; 
}

#footer {
    position: relative;
    top: 90px;
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:7px;
}
#pastFooter {
    position: relative;
    top: 120px;
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:    7px;
}

#dir::before {
    
}
#pvbutton {
    position: relative;
    top:   80px;
    left: -330px;
    margin-top: 5rem;
}
#pvfooter {
    position: relative;
    top: 175px;
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:7px;
}
#pv1 {
   background-color: #29c389; 
}
#pv2 {
   background-color: #86ec86;
}
#pv3 {
   background-color: #8baf3b; 
}
#pv4 {
   background-color: #cabc26; 
}
#pv5 {
   background-color: #d1e012; 
}
#gbk1 {
    border-color: #2F58CA;
    position: relative;
    top:    60px;
    left:   40px;
    margin-top: 1rem;
}
#gbk2 {
    border-color: #C4305F;
    position: relative;
    top:    50rem;
    left:   -5rem;
    margin-top: 1rem;
}
#gbk3 {
    border-color: #B92BAE;
    position: relative;
    top:    550px;
    left:   -400px;
    margin-top: 1rem;
}
#gbk4 {
    border-color: #8CAE29;
    position: relative;
    top:    750px;
    left:   -400px;
    margin-top: 1rem;
}
#gbk5 {
    border-color: #2FD1CD;
    position: relative;
    top:   700px;
    left: -400px;
    margin-top: 1rem;
}

.normal_blue {
    color:              black;
    background-color:   lightblue;
    font-family:        sans-serif;
    font-weight:        normal;        
    border:             6px;
    border-color:       silver;
    border-style:       ridge;
    border-radius:      4px;
    padding:            4px;
    width:              40vw;
    margin-left:        5px;
}

#gramIcon {
    display: block;
    cursor: pointer;
    width: fit-content;
    border-radius: 50%;
    padding:       4px;
    border: 5px solid yellow;
    margin-top:  -1rem;
    margin-left: 2rem;
    opacity: .6;
}
#gramIcon:hover {
    opacity: 1;
}

#base {
    color: darkgreen;
    margin-left: 2.5rem;
    margin-top:  1rem;
}


#baseRS {
    color: darkgreen;
    margin-left: 2rem;
    margin-top:  1rem;
}
#baseVGI {
    color: darkgreen;
    margin-left: 4rem;
    margin-top:  11rem;
}

.query {
    border: 4px;
    border-color:#089494;
    border-style: solid;
    padding: .3rem;
    color: white;
    margin-top: 1rem;
    margin-left: 2rem;
    width: fit-content;
}

#imgReport {
    display: none;
    width:   fit-content;
    margin-left: 3rem;
}
.imgPrompt {
    width: 15%; height: 15%;
}
#instructions{
    
}
#buttonIntro {
    font-size: 20px;
    font-weight: 600;
}
#continue {
    width: 5%; height: 5%;
    margin-top:        6rem; 
    margin-left:       2rem;
}

#hw {
    width: fit-content;
    margin-left: 1rem;
}


/******************************************************************************/
/****************************LAPTOP Wide***************************************/
/******************************************************************************/
@media screen and (min-width: 768px) {
    .header2 {
        font-size:      3.3em;
        font-weight:    600;
        position:       absolute;
        top:            10px;
        left:           25%;
    }
    .theme {
        margin-top: 5%;
        margin-left: 17%;
        width: 45%;
    }
    #futureShot{
        margin-top:  8%;
        margin-left: 20%
    }
    .AudBox {
        clear: left; 
        display: inline-block; 
        border-radius: 25px;
        background: #73AD21;
        padding: 20px;
        width: 300px;
        height: 30px;
        position: relative;
        top:    5px;
        left:  12px;
        margin: 60px 5px 20px 0px; /*top, right, bottom, left */
    }
    .AudBox2 {
        clear: left;
        width: 300px;
        height: 30px;
        position: relative;
        top: 25px;
        left: 12px;
        margin:50px 5px 20px 0px; /*top, right, bottom, left */
    }
    .audbox_report {
        /*clear: left; */
        display: inline-block;
        border-radius: 25px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 20px;
        position: relative;
        top: 20px;
        left: 12px;
        margin:0px 5px 20px 0px; /*top, right, bottom, left */
    }
    cquestion {
        position: relative;
        top:  -5px;
        left: 20px;
    }
    .canswers {
        margin-top: 30px;
        overflow: hidden; 
    }
    
    .future{
        position: relative;
        top: 2px;
        height: 18px; 
    }
    .rs{
        position: relative;
        top: 2px;
        height: 18px; 
        width: 100%;
    }
    .vg{
        position: relative;
        top: 2px;
        height: 18px; 
    }
    .cv{
        position: relative;
        top: 2px;
        height: 18px; 
    }
    #gbk1 {
        border-color: #2F58CA;
        position: relative;
        top:      55rem;
        left:   -400px;
    }
    #gbk2 {
        border-color: #C4305F;
        position: relative;
        top:    62rem;
        left:   -400px;
    }
    #gbk3 {
        border-color: #B92BAE;
        position: relative;
        top:     50rem;
        left:   -400px;
    }
    #gbk4 {
        border-color: #8CAE29;
        position: relative;
        top:    70rem;
        left:   -400px;
    }
    #gbk5 {
        border-color: #2FD1CD;
        position: relative;
        top:   62rem;
        left: -400px;
    }
    #except {
        width: 2rem; height: 2rem;
        margin-top: .1rem;
    }
}

/******************************************************************************/
/****************************LAPTOP Normal************************************/
/******************************************************************************/
@media only screen and (max-width : 1028px) and (min-width: 768px) {
    .header2 {
        font-size:      2em;
    }
    .theme {
        margin-top: 5%;
        margin-left: 17%;
        width: 45%;
    }
    .AudBox {
        position: relative;
        top: -30px;
        left: 550px;
        margin:0px 5px 0px 0px; /*top, right, bottom, left */
    }
    audio {
        padding: 1px;
        width:150px;
        height: 15px;
        position: relative;
        top: 2px;
        left: -18px;
        margin:0px 0px 1px 10px; /*top, right, bottom, left */
    }
}    

/*********************************************************************/
/* FOR TABLET ******************************TABLET*********************/
/*********************************************************************/
@media only screen and (max-width : 1180px) and (min-width: 820px) {
    #header {
        color: darkgreen;
        text-shadow: 0px 2px 3px #555;
        font-family:verdana;
        font-size:190%;
        position: absolute;
        left: 150px;
        top: 5px;
        padding:5px;
        margin-bottom: 5px;
    }
    .header2 {
        color: darkgreen;
        font-family: Harry p, Helvetica;
        font-size: 2.2em;
        font-weight: 600;
        text-shadow:#fff 0 -1px 4px, 
        #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
        margin-left: 1.2rem;
    }
    .theme {
        margin-top: 7%;
        margin-left: 17%;
        width: 45%;
    }
    #pvHeader {
        font-size:  3.4em;
        position: absolute;
        left: 350px;
        top: 5px;
        padding:5px;
        margin-bottom: 5px;
        max-width: 90%;
    }
    #presHeader, #pastHead, #conjHead, #futureHead, #ppHead, #pastpHead, #c2Head, 
    #rsHead, #vgiHead, #fpHead, #causeHead
    {
        position: absolute;
        top:    5px;
        left:   25%;
    }
    
    h1  {
        font-size: 150%;
        position: relative;
        left: 180px;
        top:   30px;
        padding: 15px;
    }
    #topimage {
        width: 470px;
        position: relative;
        top: 60px;
        left: 30px;
    }
    #timeline {
        position: relative;
        left: 20px;
        width: 85%;
    }
    .btn {
        position: relative;
        top: 820px;
    }
    
    .AudBox {
        clear: left;
        display: inline-block;
        border-radius: 25px;
        background: #73AD21;
        padding: 20px;
        width: 300px;
        height: 30px;
        position: relative;
        top:  2.5rem;
        left: 12px;
        margin:0px 5px 20px 0px; /*top, right, bottom, left */
    }
    .rs{
        height: 20px; 
        width: 100%;
    }
    .norm_wide {
        font-size: 16px;
        font-style: normal;
        width: 500px;
        border: 5px;
        border-radius: 15px;
        border-style:groove;
        padding: 5px;
        position: relative;
        top: 45px;
        left: 20px;
        margin-bottom: 5px;
    }
    .subtitle {
        color: darkgreen;
        background-color: #FFD700;
        font-size: 1em;
        position: relative;
        left: 20px;
        margin-bottom: -35px;
    }
    aside {
        position:relative;
        top: 50px;
        left: 15px;
        margin-bottom: 100px;
    }
    td {
        width: 150px; height: 40px; 
        border-width: 10px; 
        margin: 5px;
        padding: 2px;
        font-size: 12px;
        font-weight: bold;
    }
    .drags, .drops, .nodrops {
        border-width: 6px; 
    }
    .drags {
        font-size: 75%;
        width: 120px; height: 40px;
        border-width: 6px; 
        margin-bottom: 2px;
    }
    #Drag_1, #Drag_2, #Drag_3, #Drag_4, #Drag_5 { 
        width: 120px; height: 40px; 
    }

    #Drop_1, #Drop_2, #Drop_3, #Drop_4, #Drop_5 { 
        width: 120px; height: 40px; 
    }

    #NoDrop_1, #NoDrop_2, #NoDrop_3, #NoDrop_4, #NoDrop_5 { 
        width: 120px; height: 40px; 
    }
    .audbox_future {
        display: inline-block;
        border-radius: 25px;
        padding: 15px;
        width: 90px;
        height: 20px;
        margin:0px 5px 5px 0px; /*top, right, bottom, left */
    }
    @-moz-document url-prefix() {
        .audbox_future {
            display: inline-block;
            border-radius: 20px;
            padding: 5px;
            width: 120px;
            height: 35px;
            position: relative;
            top: -25px;
            margin:0px 5px 10px 0px; /*top, right, bottom, left */
        }
        
        audio {
            -moz-appearance: normal;
            padding: 3px;
            width: 50px;  
            height: 5px; 
            position: relative;
            top: 3px;
            left: -5px;
        }
    }    
    audio {
        padding: 1px;
        width: 80px;  
        height: 5px;  
        position: relative;
        top: 13px;
        left: -6px;
        margin:0px 3px 1px 0px; /*top, right, bottom, left */
    }
    #TEdison {
        font-size: 20px;
        font-weight: 600;
        width: fit-content;
        padding: 6px;
        margin-top: 12rem;
        margin-left: 2rem;
    }
    div#example {
        position: relative;
        top:  15px;
        left: 15px;
        margin-bottom: 2px;
    }
    #pc {
        visibility: hidden;
        display: none;
    }
    #tab {
        visibility: visible;
    }
    #cell {
        visibility: hidden;
        display: none;
    }
    .cp {
        display: block;
    }
    #next {
        width: 180px;
        height: 80px;
        position: relative;
        top: 80px;
    }
    #gramIcon {
        margin-top:   1rem;
        margin-left:  2rem;
    }
    #base {
        color: darkgreen;
        margin-left:  4rem;
        margin-top:  11rem;
    }
    #baseVGI {
        margin-left:  4rem;
        margin-top:  11rem;
    }
    .spacer {
         width: 20px;
         height: 78px;
     }
    
    #pvfooter {
        position: relative;
        top: 215px;
    }
    btn {
        
    }
    #fortune {                  /*For Present Tense for Future*/
        position: relative;
        top:      30px;
        left:     80px;
    }
}
/* FOR SMARTPHONE ***********************SMARTPHONE*********************/
/*********************************************************************
**********************************************************************/
@media only screen and (max-width : 414px) and (min-width: 240px) {
    #body {
        width: 400px;
        overflow-x: hidden; 
        margin: 0;
    }  
    #header {
        color: darkgreen;
        text-shadow: 0px 2px 3px #555;
        font-family:verdana;
        font-size:1.2em;
        position: absolute;
        left: 40px;
        top: 5px;
        padding:5px;
        margin-bottom: 10px;
    }
    .theme {
        margin-top: 14%;
        margin-left: 10%;
        width: 80%;
        height: 25vh;
    }
    #pvHeader {
        color: darkgreen;
        text-shadow: 0px 2px 3px #555;
        font-family: Harry p, Verdana;
        font-size:  2.4em;
        position: absolute;
        left: 50px;
        top: 5px;
        padding:5px;
        margin-bottom: 5px;
        max-width: 90%;
    }
    .header2 {
        color: darkgreen;
        font-family: Harry p, Helvetica;
        font-size: 1.8em;
        font-weight: 600;
        text-shadow:#fff 0 -1px 4px, 
        #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
    }
    .headShot {
        margin-top:  20%;
        margin-left: 25%;
        width: 200px;
    }
    #presHead, #conjHead, #pastpHead, #c2Head, #rsHead,
    #fpHead, #causeHead
    {
        position: absolute;
        top:    10px;
        left:   23%;
    }
    #futureHead {
        font-size: 2.6rem;
        position: absolute;
        top:    10px;
        left:   26%;
    }
    #pastHead {
        position: absolute;
        top:    15px;
        left:   28%;
    }
    #ppHead {
        position: absolute;
        top:    12px;
        left:   27%;
        font-size: 35px;
    }
    #vgiHead {
        position: absolute;
        top:    15px;
        left:    5%;
        font-size: 1.5rem;
    }
    #presShot {
        width: 320px; height: 220px;
        margin-top: 8rem;
        margin-bottom: -2%;
        margin-left: 7%;
    }
    #presPerfShot {
        width: 320px; height: 220px;
        margin-bottom: -2%;
        margin-left: 5%;
    }
    #futureShot{
        width: 60%;
        margin-top:  10%;
        margin-left: 16%
    }
    #appleShot {
        width: 150px; height: 170px;
        margin-top: 6rem;
        margin-bottom: -4rem;
        margin-left: 5rem;
    }
    .textwrap {
        float: left;
        margin: 5px;
    }
    
    #preVid {
        position: relative;
        left: 20px;
        background-color: linen;
        color:          black;
        font-size:      1.2rem;
        font-weight:    600;
        border:         6px;
        border-color:   goldenrod;
        border-radius:  5%;
        border-style:   ridge;
        padding:        .3rem;
        width:          70%;
        margin-bottom:  10px;
    }
    
    .video {
        width: 80%;
        aspect-ratio: 16/ 9;
        margin-top: 2rem;
        margin-left: 2rem;
        border: 8px;
        border-style: solid;
        border-color:#3399ff;
        border-radius: 5%;
        outline: 10px groove blueviolet;
        outline-offset: -1px;
        background-position: 0 0;
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(14,136,201,0.004639355742296902) 20%, rgba(58,133,135,0.8897934173669468) 31%, rgba(0,212,255,1) 100%);
        background-size: 140% 140%; 
    }

    #wizwel {
        border: 6px;
        border-color: goldenrod;
        border-radius: 6px;
        border-style: groove;
        margin-left: 2rem;
        margin-top: 4rem;
        margin-bottom: -2rem;
    }
    
    #woeVid {
        border: 8px;
        border-color: goldenrod;
        border-radius: 5rem;
        border-style: groove;
        margin-left: 2rem;
        margin-top:  2rem;
        margin-bottom: 1rem;
    }
    
    .ww {
        width: 70%; /*100% */
        height: 340px;
        margin: 0px 0px 5px 5px; /*top, right, bottom, left */
    } 
    
    .woewoe {
        width: 90%; 
        height: 340px;
        margin: 0px 5px 5px 5px; /*top, right, bottom, left */
    }

    h1  {
        font-size: 1.4rem;
        position: relative;
        left: 40px;
        top:   30px;
        padding: 20px;
        text-shadow: -2px 2px 2px #A1A1A1;
    }
    h2  {
        font-size: 1.5em;
    }
    
    .postImg {
        padding: .5rem;
    }
    
    p#blue {
        color: blue;
        font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
        font-size: 1rem; 
        font-weight: 600;
    }
    p#red {
        color: red;
        font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
        font-size: 1rem; 
        font-weight: 600;
    }
    #dancer {
        width: 15rem;
        height: 10rem;
        border: 3px;
        border-radius: 25%;
        border-color:lightgreen;
        border-style:solid;
        margin-top: 2.5rem;
        margin-left: 3rem;
        margin-bottom: -2rem;
    }

    #scrbar {
        position: relative;
        top:      3vh;
        left:     1vw;
        width:    80%;
        height:   100px;
        margin-top: 1rem;
        margin-left: 10%;
    }
    #topimage {
        width: 280px; height: 95px;
        margin-top: -15px;
        margin-bottom: 25px;
    }
    #def {
        display: none;
    }
    #timeline {
        position: relative;
        left: 10px;
        width: 280px; height: 95px;
    }
    #apple {
        width: 50px; height: 60px;
    }
    
    #reportShot {
        width: 220px; height: 120px;
        margin-top:  12%;
        margin-left: 9%;
        margin-bottom: -2rem;
    }
    .flow {
        font-size: 1em;
    }
    .verbs {
        float: left;
        width: 40%; height: 8%;
        margin-right: 1rem;
    }
    .list {
        width: fit-content;
        margin-top: 2rem;
        margin-left: .5rem;
    }
    p#story {
        font-size: 1.2rem; 
        width: fit-content;
    }
    .pnorm {
        color: darkgreen;
        font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
        font-size:  .9em; 
        font-weight: 400;
        width: auto;
     }
    .pspec {
        color: darkgreen;
        font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
        font-size: 1em; 
        font-weight: 500;
        width: 240px;
    }   
    p#rules {
        width: 55%;
        font-size: .8em;
        font-weight: bold;          
        color:    yellow;
        position:relative;
        left: 5px;
    }
    .lg {font-size: .9em;}
    #pepito {
        width: 50%;
        margin-bottom: 10px;
        
    }
    #pc_tab {
        display: none;
    }
    #cell {
        display: block;
    }
    .cp {
        display: block;
        width:   80%;
    }
    .AudBox {
        display: inline-block ;
        border-radius: 15px;
        background: #73AD21;
        padding: 10px;
        width: 100px;
        height: auto;
        position: relative;
        top: 25px;
        left: 5px;
        margin:30px 5px 50px 5px; /*top, right, bottom, left */
    }
    .AudBox2 {
        display: inline-block;
        border-radius: 15px;
        background: #73AD21;
        padding: 10px;
        width: 200px;
        height: auto;
        position: relative;
        top: 25px;
        left: 5px;
        margin:40px 5px 20px 0px; /*top, right, bottom, left */
    }
    audio{
        width:90px;
        height:60%;
        position: relative;
        top: 5px;
    }
    .rs{
        position: relative;
        top: 2px;
        height: 18px; 
        width: 100px;
    }
    .ital {
        font-size: .9em;
        font-style: oblique;
        width: 240px;
        border: 5px;
        border-radius: 15px;
        border-style:groove;
        padding: 5px;
        position: relative;
        top: 60px;
        left: 10px;
        margin-bottom: 10px;
    }
    .norm {
        background-color: lightgreen;
        color: darkgreen;
        font-size: 1.2rem;
        font-style: normal;
        width: 320px;
        border: 5px;
        border-radius: 15px;
        border-style:groove;
        padding: 5px;
        position: relative;
        top: 20px;
        left: 10px;
        margin-bottom: 9px;
    }
    .norm_skinny {
        overflow: auto;
        background-color: lightgoldenrodyellow;
        color: darkgreen;
        font-size: 12.5px;
        font-style: normal;
        width:  380px;
        border: 2px;
        margin-left: 1rem;
    }
    
    .norm_wide {
        font-size: 1.3rem;
        font-style: normal;
        width: 360px;
        border: 5px;
        border-radius: 15px;
        border-style:groove;
        padding: 5px;
        position: relative;
        top: 20px;
        left: 10px;
        margin-bottom: 5px;
    }
    .norm_highlight {
        font-size: 1.1em;
        width: fit-content;
    }
    .conj {
        border: 4px;
        border-color:#186321;
        border-style:dotted;
        background-color: white;
        color: #186321;
        padding-left: 2.5rem;
        padding-right: 2rem;
        width: fit-content;
    }
    
    .conjunction2 {
        width: 320px;
        aspect-ratio: 16/ 9;
        margin-top: 2rem;
        margin-left: 5%;
        border: 8px;
        border-style: solid;
        border-color:#3399ff;
        border-radius: 5%;
        outline: 10px groove blueviolet;
        outline-offset: -1px;
        background-position: 0 0;
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(14,136,201,0.004639355742296902) 20%, rgba(58,133,135,0.8897934173669468) 31%, rgba(0,212,255,1) 100%);
        background-size: 140% 140%; 
    }
    #boxed {
        font-size: .9em;
        width: 90%;
    }
    #inset {
        width: 290px;
        margin-top: -1rem;
        margin-left: -.5rem;
        margin-bottom: 1.7rem;
    }
    .subtitle {
        color: darkgreen;
        font-size: 1.1em;
        font-weight: 600;
        position: relative;
        left: 15px;
        margin-bottom: -10px;
        width: 80%;
    }
    aside {
        position:relative;
        top: 30px;
        left: 15px;
        margin-bottom: 80px;
    }
    div#hideanswer {
        display: none;
        background-color: lightgreen;
        color: darkgreen;
        font-size: 1.3rem;
        font-style: oblique;
        width: 320px;
        border: 5px;
        border-radius: 15px;
        border-style:groove;
        padding: 7px;
        position: relative;
        top: 40px;
        left: 5rem;
        margin-left: -3rem;
        margin-bottom: 15px;
    }
    textarea {
        width: 80%;
        position: relative;
        top: -15px;
    }
    
    .textWindow {
        margin-top:     1rem;
        margin-left:    2rem;
        margin-right:   2rem;
        width:          250px;
    }
    #styled {
        width: 50%;
        text-align: left;
        font-size: .6em;
    }
    
    
    .answers {
        font-size: .8em;
        position: relative;
        top: -10px;
        overflow: visible;
    }
    td {
        width: 100px; height: 40px; 
        border-width: 4px; 
        margin: 3px;
        padding: 1px;
        font-size: 11px;
        font-weight: bold;
    } 
    
    div#content {
        height: 200px;
        width: 350px;     
    }
    
    .drags, .drops, .nodrops {
        width: 30px; height: auto;   
        border-radius: 8px;
        border-style: solid;
        border-width: 3px; 
        border-color:  darkgreen;
        margin: 2px;
        padding: 1px;
        font-family: Arial, Helvetica, sans-serif;
        font-style:  normal;
        font-size: .65em; 
        font-weight: bold;
        color:  dodgerblue;  
    } 
        
    #Drag_1, #Drag_2, #Drag_3, #Drag_4, #Drag_5 { 
        /* font-size: 35%; */
        width: auto; height: auto; 
        margin-bottom: 2px;
    }
    
    #Drop_1, #Drop_2, #Drop_3, #Drop_4, #Drop_5 { 
        font-size: .95em;
        width: 55px; height: 50px;  
        margin-bottom: 5px;
    }
    /*********************************/
    /* Radio Show Styles Begin Here */
    /*********************************/
    #alive {
        font-size: 28px;
    }
    #radioDir {
        margin-left: 2rem;
        width:       300px;
    }
    
    #queries {
        color: white;
        background-color: blue;
        font-size: 1.1rem;
        position: relative;
        top:  6rem;
        left: 1rem;
        margin-right: 2rem;
        margin-bottom: 5rem;
        width: fit-content; 
    }
    
    .AudBox {
        border-radius: 25px;
        background: #73AD21;
        padding: 20px;
        width: 80%;
        height: 30px;
        position: relative;
        left: 15px;
        margin:10px 5px 5px 0px; /*top, right, bottom, left */
    }
    .audbox_future {
        display: inline-block;
        border-radius: 25px;
        padding: 15px;
        width: 100px;
        height: 20px;
        position: relative;
        top: 10px;
        margin:0px 5px 8px 3px; /*top, right, bottom, left */
    }
    .audbox_perfect {
        border-radius: 25px;
        background: darkgreen;
        padding: 15px;
        width: fit-content;
        height: 20px;
        position: relative;
        top: -15px;
        left: 15px;
        margin:0px 0px 5px 2px; /*top, right, bottom, left */
    }
    .audbox_report {
        display: inline-block;
        border-radius: 25px;
        padding: 15px;
        width: 95px;
        height: 20px;
        position: relative;
        top: 10px;
        margin:0px 5px 8px 0px; /*top, right, bottom, left */
    }
    audio {
        padding: 1px;
        width: 115px;
        height: 15px;
        position: relative;
        top: 10px;
        left: -8px;
        margin:0px 3px 1px 0px; /*top, right, bottom, left */
    }
    
    div#example {
        position: relative;
        top: 5px;
        left: 15px;
        margin-bottom: 5px;
    }
    #pc {
        visibility: hidden;
        display: none;     
    }
    #tab {
        visibility: hidden;
        display: none;
    }
    #cell {
        visibility: visible;
    }
       
    #next {
        width: 95px;
        height: 50px;
        opacity: .6;
        position: relative;
        top: 20px;
        padding: 2px;
    }
    #next::hover {
        opacity: 1;
    }
    #gramIcon {
        display: block;
        cursor: pointer;
        width: fit-content;
        margin-top:   2rem;
        margin-left:  2rem;
        opacity: .6;
    }
    #gramIcon:hover {
        opacity: 1;
    }
    #base {
        margin-left:  2rem;
        margin-top:   1rem;
    }
    #baseRS {
        margin-left: 2rem;
        margin-top:  1rem;
    }
    #baseVGI {
        margin-left:  4rem;
        margin-top:  10rem;
    }
    
    p {
        font-size: .8em;
        width: 85%;
    }   
    #larger {
        font-size: 1.1rem;
        padding: .5rem;
        width: 290px;
        margin-top: -1.5rem;
        margin-left: -.5rem;
        margin-bottom: 1.8rem;
    }
    #small {
        width: 50px; height: 50px;
    }
    #reporter {
        border: 4px transparent;
        border-radius: 15%;
        float: left;
        margin-top: -1rem;
        margin-left: -1rem;
        padding: 1rem;
        padding-bottom: .3rem;
        width: 3.2rem; height: 6rem;
    }
    #pad {
        font-family: serif;
        font-size: 1.1rem;
        padding: 4px;
        height: 19rem;
    }
    #VGIShot {
        border: 5px gold;
        border-style: groove;
        width: 320px; height: 240px;
        margin-top: 15%;
        margin-left: 5%;
        margin-bottom: .8rem;
    }
    div.panel,div.flip
    {
      margin:0px;
      padding:5px;
      text-align:center;
      background: yellow;       /* was #DAA520  */             
      border:solid 2px darkolivegreen;             
      width:auto;
    }
    .question {
        margin-left:    5px;
        margin-top:     14px;
        margin-bottom:   2px;
    }
    .questions {
      font-size: .8em;
      width: 260px;
    }
    .tquestion
    {
        width: auto;
        float:left;
        margin-left: 1rem;
        margin-bottom: 5px;
    }
    .spacer {
        width: 20px;
        height: 25px;
    }
    
    .btn {
        background-color: #c6d7ce;
        position: relative;
        left: -80px;
        margin-top: 10px;
    }
    .pVerb {
        font-size: 1rem;
        width: 300px;
        margin-left: 20px;
    }
    .caption {
        color: yellow;
        text-shadow: 0px 2px 3px #555;
        font-family:verdana;
        font-size: 1.3em;
        position: absolute;
        left: 40px;
        top: 90px;
        padding:5px;
        margin-bottom: 10px;
    }
    #gbk1 {
        position: relative;
        top:    830px;
        left:   -7rem;
        margin-top: 1rem;
    }
    #gbk2 {
        position: relative;
        top:    895px;
        left:   -150px;
        margin-top: 1rem;
    }
    #gbk3 {
        position: relative;
        top:    720px;
        left:   -150px;
        margin-top: 1rem;
    }
    #gbk4 {
        position: relative;
        top:     67rem;
        left:    3rem;
        margin-top: 1rem;
    }
    #gbk5 {
        position: relative;
        top:    63rem;
        left:   3rem;
        margin-top: 1rem;
    }
    #TEdison {
        background-image: url("../images/old_paper.jpg");
        background-color: grey;
        color: black;
        font-size: 20px;
        width: fit-content;
        padding: 6px;
        margin-top: 9rem;
        margin-left: .5rem;
    }
    
    #fortune {           /*style for Present Tense for Future*/
        position: relative;
        top:     20px;
        left:    30px;
        margin-left: 5rem;
    }
    #pvbutton {
        position: relative;
        top:  -4rem;
        left: 3rem;
    }
    .inrow {
        display: block;
        width: fit-content;
    }
    figure {
        display: inline-block;
        width: 120%;
    }

    figcaption {
      background-color: black;
      color: white;
      font-size: 15px;
      font-style: italic;
      padding: 2px;
      text-align: left;
    }
    #holder {
        position: fixed;
        top: 70%; 
        border: 3px;
        border-color: yellow;
        border-style: solid;
        width: 25%;
        height: 10%;
        margin-left: 50%;
        z-index: -1;
    }

    #buttonIntro {
        font-size: 20px;
        font-weight: 600;
        text-indent: -250px;
        width:      320px;
        margin-top: 2rem;
    }
    #continue {
        width: 20%; height: 20%;
        margin-top:        6rem; 
        margin-left:       2rem;
    }
    #directRP {
        margin-left:    -2rem;
        width:          320px;
    }
    
    
    #imgReport {
        display: none;
        width:   360px;
        margin-left: 3rem;
    }
    .imgPrompt {
       width: 40%; height: 40%;
    }
    
    #hw {
        overflow: auto;
        font-size: 12px;
        width: fit-content;
        margin-top: 2rem;
        margin-left: 1rem;
    }
    #footer {
        left: 5px;
    }
    #pvfooter {
        position: relative;
        top:   140px;
        left:   10px;
    }
    #pastFooter {
        position: relative;
        top:    60px;
        left:   15px;
    }
        
}