.ex {
    /*font-weight : normal; color: #68d;*/
    font-weight : bold; color: #039;
    font-size:1em;
}


.ex2 {
    font-style : italic; 
    /*color: rgb(117, 117, 117);*/
    font-size:1em;
}

.exstr {
	font-weight : bold; color: #039;
}

.ex2str {
  font-style : italic; 
  font-weight : bold; 
}

table {
  /* width: 85%; */
  border-bottom: 0.20em solid rgba(95,121,149,0.5);
  margin: 0em 0em 2em 0em;
  width: 100%;
  /*top right bottom left*/
  /* border-spacing: 0; */
}


table.widetable {
  width: 100%;
  border-bottom: 0.25em solid rgba(95,121,149,0.5);
  margin: 0em 0em 2em 0em;
  padding-left: .5em;
  /*top right bottom left*/
  /* border-spacing: 0; */
}

table.widetable100 {
  width: 100%;
  border-bottom: 0.25em solid rgba(95,121,149,0.5);
  margin: 0em 0em 2em 0em;
  /*top right bottom left*/
  /* border-spacing: 0; */
}

/* 100 width with 50:50 */
table.widetable100 td {
  vertical-align: top;
  width: 50%;
}

table.widetable85 {
  width: 85%;
  border-bottom: 0.25em solid rgba(95,121,149,0.5);
  margin: 0em 0em 2em 0em;
  /*top right bottom left*/
  /* border-spacing: 0; */
}

table.widetable85 td,
table.widetable85 th {
  vertical-align: top;
  width: 50%;
  padding-left: .5em;
}


/* 3 column widetable */
table.widetable1003col {
  width: 100%;
  border-bottom: 0.25em solid rgba(95,121,149,0.5);
  margin: 0em 0em 2em 0em;
  /*top right bottom left*/
}

.widetable1003col td:nth-child(1) {
  width: 30%;
  vertical-align: top;
  }
    
  .widetable1003col td:nth-child(2) {
  width: 40%;
  vertical-align: top;
  }
  
  .widetable1003col td:nth-child(3) {
  width: 40%;
  vertical-align: top;
  }
  
/* /// */



/* 4 column widetable */
table.widetable1004col {
  width: 100%;
  border-bottom: 0.25em solid rgba(95,121,149,0.5);
  margin: 0em 0em 2em 0em;
  /*top right bottom left*/
}

.widetable1004col td:nth-child(1) {
  width: 25%;
  vertical-align: top;
  }
    
  .widetable1004col td:nth-child(2) {
  width: 25%;
  vertical-align: top;
  }
  
  .widetable1004col td:nth-child(3) {
  width: 25%;
  vertical-align: top;
  }

  .widetable1004col td:nth-child(4) {
    width: 25%;
    vertical-align: top;
    }
  

/* /// */

/* 5 column widetable */
table.widetable1005col {
  width: 100%;
  border-bottom: 0.25em solid rgba(95,121,149,0.5);
  margin: 0em 0em 2em 0em;
  /*top right bottom left*/
}

.widetable1005col td:nth-child(1) {
  width: 20%;
  vertical-align: top;
  }
    
  .widetable1005col td:nth-child(2) {
  width: 20%;
  vertical-align: top;
  }
  
  .widetable1005col td:nth-child(3) {
  width: 20%;
  vertical-align: top;
  }

  .widetable1005col td:nth-child(4) {
    width: 20%;
    vertical-align: top;
    }
  
    .widetable1005col td:nth-child(5) {
      width: 20%;
      vertical-align: top;
      }

/* /// */









/* widetable 2 column, wider on right 25 / 75 */

table.table10042colwideright {
  width: 100%;
  border-bottom: 0.25em solid rgba(95,121,149,0.5);
  margin: 0em 0em 2em 0em;
  padding-left: .5em;
  /*top right bottom left*/
}

.table10042colwideright td:nth-child(1) {
  width: 18%;
  vertical-align: top;
  }
    
  .table10042colwideright td:nth-child(2) {
  width: 82%;
  vertical-align: top;
  }

/* /// */

/* /// */

/* widetable 2 column, wider on right 20 / 80 */

table.table10042colwideright2080 {
  width: 100%;
  border-bottom: 0.25em solid rgba(95,121,149,0.5);
  margin: 0em 0em 2em 0em;
  padding-left: .5em;
  /*top right bottom left*/
}

.table10042colwideright2080 td:nth-child(1) {
  width: 15%;
  vertical-align: top;
  }
    
  .table10042colwideright2080 td:nth-child(2) {
  width: 85%;
  vertical-align: top;
  }





/* this is for where I use tables to format individual words or phrases across the page */
table.nobottomline {
  width: 85%;
  border-bottom: 0;
  margin: 0em 0em 2em 1em;
  /*top right bottom left*/
  /* border-spacing: 0; */
}


/* this is to shove tables in unit 63 over to the left consistently */
table.nobottomlinetableex {
  width: 85%;
  border-bottom: 0;
  margin: 0em 0em 2em 2em;
  /*top right bottom left*/
  /* border-spacing: 0; */
}

.nobottomlinetableex td:nth-child(1) {
  width: 50%;
  vertical-align: top;
  }
    
  .nobottomlinetableex td:nth-child(2) {
  width: 50%;
  vertical-align: top;
  }




table.yen {
  width: 85%;
  border-bottom: 0;
  margin: 0em 0em 2em 2em;
  /*top right bottom left*/
  /* border-spacing: 0; */
}


/* specific tables Cannot get this to target table in unit 25*/
table#table25-2-3a {
  width: 100%;
}


th {
  border-bottom: 0.25em solid rgba(95,121,149,0.5);
  background-color:#C0C0C0;
  text-align: left;
  /* font-style: italic; */
  /* width: auto; */
}

/* th .ex {
  font-weight : bold; color: #039;
  font-size:1em;
} */

table th .ex2 {
  font-style: normal; 
}


.js-hover {cursor:pointer; color: red;}
/* .js-hover:after {content:'click this to hide'; font-style:italic;} */


/* text used in example sentences */

TD#unit p.exen {padding: 0.3em 0 0.7em 10px; margin: 0 6.8em;
    color: #666; font-style: normal;}

/*.exen {COLOR: #C63; } */


p.exfr {
    margin: .6em 0em 0em 1em;
    /*top right bottom left*/
}


/* to catch  noteThat box*/
div.noteThat p.exfr {
  margin: 0em 0em 0em 1em;
  /*top right bottom left*/
}


/* for where the are 2 exfrs on top of each other - this one is the second */
p.exfrmiddle {
  font-style: italic;
  margin: 0em 0em 0em 1em;
  /*top right bottom left*/
}

/* This targets examples that need to be included on the same line, in 2 or 3 column format. Formerly tables were used for this, but not semantic*/

/* This is for 2 columns, i.e.  where 2 block examples (exfr and exen) are displayed on the same line. i.e.  the twocolumnexamples class contains 2 divs that will be presented on the same line approriately tabulated */

.twocolumnexamples {
  display: flex;
}

/* taking off as it seems tidier to have div blocks hugging to each other leftways */
.twocolumnexamples > div {
  /* flex-grow: 1; */
  margin-left: .5em;
  /* flex: 1 1 50%; */
  /* border: solid .1em; */
  /* border-color: DodgerBlue; */
  /* width: 50%; */
}


/* This is a 2-column flex for examples that need spacing over 50/50 rather than bunching to the left */

.twocolumnexamples2 {
  display: flex;
}

/* taking off as it seems tidier to have div blocks hugging to each other leftways */
.twocolumnexamples2 > div {
  /* flex-grow: 1; */
  margin-left: .5em;
  flex: 1 1 50%;
  /* border: solid .1em; */
  /* border-color: DodgerBlue; */
  /* width: 50%; */
}



/* This is for 3 columns, i.e.  where 3 block examples (exfr and exen) are displayed on the same line*/

.threecolumnexamples {
  display: flex;
}

.threecolumnexamples > div {
  flex: 1 1 33%;
  width: 50%;
}


.fourcolumnexamples {
  display: flex;
  flex-wrap: wrap;
}

 .fourcolumnexamples > div {
  width: 100%;
  /* margin-left: .5em; */
  max-width: 25%;
}   


@media only screen and (max-width: 600px) {
  .fourcolumnexamples > div {
    max-width: 50%;
  }
}



 /* .fourcolumnexamples > .fourcolumnexamplediv1 {
  flex: .8;
  width: 50%;
}

.fourcolumnexamples > .fourcolumnexamplediv2 {
  flex: .8;
  width: 50%;
}

.fourcolumnexamples > .fourcolumnexamplediv3 {
  flex: 1.2;
  width: 50%;
}

.fourcolumnexamples > .fourcolumnexamplediv4 {
  flex: 1.2;
  width: 50%;
} */
 

/* /////////////////// */
/* The next 2 rules  cause all ex spans to fade into a red colour  */
span.ex {
  /* padding: .2em .2em .2em .2em; */
   /* border-radius: 5px; */
   transition: color 0.5s ease;
}

span.ex:hover {
 /* background-color: rgba(95,121,149,0.15); */
 cursor:pointer; 
 color: red;
}


td.ex {
  /* padding: .2em .2em .2em .2em; */
   /* border-radius: 5px; */
   transition: color 0.5s ease;
}

td.ex:hover {
 /* background-color: rgba(95,121,149,0.15); */
 cursor:pointer; 
 color: red;
}




div.ex {
  /* padding: .2em .2em .2em .2em; */
   /* border-radius: 5px; */
   transition: color 0.5s ease;
}

div.ex:hover {
 /* background-color: rgba(95,121,149,0.15); */
 cursor:pointer; 
 color: red;
}

/* .ex:hover:after {content:' click to listen'; color: red; font-style:italic; font-size: 0.6em;} */

/* //////////////////// */

/*  listen after the exfr class  - fab bit of code - keep for later*/
/* .exfr:after {content:'listen'; color: #777; font-style:italic; font-size: 0.6em;} */


/* The next 2 rules  cause all listen spans to fade into a red colour  */
span.exfrlisten {
  /* padding: .2em .2em .2em .2em; */
   /* border-radius: 5px; */
   background-color: lightgrey;
   /* for when it is in an italicized sentence */
   font-style: normal;
   /* border: solid .1em; */
 border-radius: 6px;
   transition: color 0.5s ease;
}

span.exfrlisten:hover {
 /* background-color: rgba(95,121,149,0.15); */
 cursor:pointer; 
 color: red;
}

span.exfrlisten {
  /* color: #777;  */
  color: black; 
  /* font-style:italic;  */
  padding-left: .3em;
  padding-right: .3em;
  padding-top: .1em;
  padding-bottom: .1em;
  margin-left: .7em;
  /* moving button upwards slightly */
  position:relative;
  display: inline-block;
  top: -.25em;
  font-size: 0.6em;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  box-shadow: 1px 1px 1px grey;
}


p.exen {
    font-style: italic;
    margin: 0em 0em 1.5em 1em;
    /*top right bottom left*/
}

/* to catch noteThat box */
div.noteThat p.exen {
  font-style: italic;
  margin: -.5em 0em 1em 1em;
  /*top right bottom left*/
}

p.exentopnotrans { /* For use where English is used as an example, with indicators rather than French as a translation*/
    margin: 0em 0em 0em 1em;
    font-style: italic;
}


p.exenio {
    margin: 0em 0em 1.5em 1em;
}

/* for use in the advchapter 4 and examples where a third explanatory example line is needed */
.exenioexplanline {
  margin: -1.5em 0em 2em 1em;
  /*top right bottom left*/
}



/* for using in the middle of examples such as "And not" sentences */

p.exenio2 {
  margin: 0em 0em 0em 1em;
  /*top right bottom left*/
}


/* for examples top, middle and bottom where there is possibly mixture of rench and English and does not need sound*/

p.exmixtop {
  margin: 1em 0em 0em 1em;
  /*top right bottom left*/
}

p.exmixmiddle {
  margin: 0.5em 0em 0em 1em;
  /*top right bottom left*/
}

/* for where the middle needs to be in italics as it is an example */
p.exmixmiddleexample {
  margin: 0em 0em 0em 1em;
  font-style: italic;
  /*top right bottom left*/
}

p.exmixbottom {
  margin: 0em 0em 1.5em 1em;
  /*top right bottom left*/
}

p.exmixtopandbottom {
  margin: 1.5em 0em 1.5em 1em;
  /*top right bottom left*/
}

/* THIS IS THE BOXES SECTION */


/* Some boxes are in divs, some in classes */
/* Taking this off - it makes no sense to have boxes as an ID as there could be more than one in one file*/
/* #boxed {
  background-color: rgb(251, 212, 212); */
  /* background-color: #E8E8E8; */
  /* padding: .5em 0.5em 0.5em .5em; */
  /* border-left: solid 5px salmon; */
    /*top right bottom left*/
/* } */


  .boxed { /* To create a box around some text, especially for "Note that..." text   */
  /* background-color: LightGrey ;  */
  background-color: #E8E8E8; 
  padding: 0.2em 0.5em 0.2em .5em;
    margin: 2em 0em 1.5em 0em;
    /*top right bottom left*/
}

.boxed h3 {
  font-family: 'Open Sans', sans-serif;
  padding: 0.5em 0em 0em 0em;
  /*top right bottom left*/
}

.boxed p {
  padding: 0em 0em 0em 0em;
  /*top right bottom left*/
}

.structurebox { /* to allow a heading effect in conjunctions unit 54   */
  background-color: #E8E8E8; 
  padding: .0em 0em .0em 1em;
   /*top right bottom left*/
  margin: 1em 0em 1em 0em;
}

.structurebox p { /* to allow a heading effect in conjunctions unit 54   */
  /* background-color: LightGrey ;  */
}

.structurebox2 { /* To create a box around some text, especially for "Note that..." text   */
  /* background-color: rgb(251, 212, 212); */
  /* background-color: rgb(249, 219, 219); pink */
  background-color: rgb(193, 235, 248);
  /* background-color: #E8E8E8; */
  padding: .2em 0.5em 0.2em .2em;
  font-size: 28px;
  margin: 1em 0em 1.5em 0em;
  /* border-left: solid 5px salmon; */
    /*top right bottom left*/
}

.structurebox2 p { /* To adjust the padding and margins for the noteThats   */
  padding: 0.3em 0.5em 0.3em .5em;
  margin: 0.5em 0em 0em 0em;
        /*top right bottom left*/
}

.structurebox2 .exmixmiddle {
  margin: 0em 0em 0em 1em;
        /*top right bottom left*/
}






.beginnersSummaryPanel { /* To create a box around the summary panel in the beginners grammar section*/
  /* background-color: LightGrey ;  */
  background-color: rgb(250, 241, 157); 
  padding: 0.0em 0.5em 0.2em .5em;
  margin: 0em 0em 1.5em 0em;
    /*top right bottom left*/
}

.beginnersSummaryPanel h3 {
  font-family: 'Open Sans', sans-serif;
  padding: 0.5em 0em 0.5em 0em;
  font-size: 32px;
  margin: 1em 0em 0em 0em;
  /*top right bottom left*/
}

/* taken out
.discuss { 
  background-color: LightGrey ; 
  background-color: rgb(177, 252, 254); 
  padding: 0.0em 0.5em 0.2em .5em;
    margin: 2em 0em 1.5em 0em;
    border-radius: 8px;
    font-size: .80em;
}  */

/* .discuss h3 {
  font-family: 'Open Sans', sans-serif;
  padding: 0.5em 0em 0.5em 0em;
  font-size: 32px;
} */

/* Some boxes are in divs, some in classes */
.noteThat { /* To create a box around some text, especially for "Note that..." text   */
  /* background-color: rgb(251, 212, 212); */
  background-color: rgb(249, 219, 219);
  /* background-color: #E8E8E8; */
  padding: .2em 0.5em 0.2em .2em;
  font-size: 28px;
  margin: 2em 0em 1.5em 0em;
  /* taken off border radius 13 Oct 2020 */
  /* border-radius: 8px; */
  /* border-left: solid 5px salmon; */
    /*top right bottom left*/
}


.noteThat p { /* To adjust the padding and margins for the noteThats   */
  padding: 0em 0.5em 0.5em .5em;
  margin: 0.5em 0em 0em 0em;
        /*top right bottom left*/
  
}

.noteThat {
  font-size: 1em;
}

.noteThat .exmixmiddle {
  margin: 0em 0em 0em 1em;
        /*top right bottom left*/
}

/* This applies border-radius, font-family and font size to all boxes */
.beginnersSummaryPanel, .discuss, .boxed { 
  border-radius: 8px;
}

/* This applies border-radius, font-family and font size to all boxes */
.beginnersSummaryPanel li, .noteThat li, .discuss li, .boxed li { 
  border-radius: 8px;
  margin: 0em 0em 0em 1.5em;
  padding: 0.2em 0em 0.2em .5em;
  /*top right bottom left*/
}

/* taken off 6 Oct 2020 */
/* .beginnersSummaryPanel, .discuss, .boxed { 
  font-family: 'Open Sans', sans-serif;
  font-size: 23px;
} */

.beginnersSummaryPanel, .discuss { 
  font-family: 'Open Sans', sans-serif;
  font-size: 23px;
}


p.exentop { 
  margin: .6em 0em 0em 1em;
  /*top right bottom left*/
 }
 
/* created 13 Feb 2020 - for when the French is on top but no sound is needed as e.g. there is text in the middle that shouldn't be sounded */
 p.exfrtop { 
  margin: .6em 0em 0em 1em;
  /*top right bottom left*/
 }


 /* where there's an English example on top, followed by another, this is the bottom one with a clear bottom margin */
 p.exenbottom { 
  margin: 0em 0em 2em 1em;
  /*top right bottom left*/
 }


 p.exenbottomital { 
  margin: -1em 0em 2em 1em;
  font-style: italic;
  /*top right bottom left*/
 }



p.exfrbottom {
  font-style: italic;
    margin: 0em 0em 1.5em 1em;
    /*top right bottom left*/

}


.exentab {
    font-style: italic;
    /*top right bottom left*/
}


ul,
ol {
    margin: 0em 0em 1em 0em;
    /*top right bottom left*/
    padding: 0;
}


li {
    margin: 0em 0em 1em 1em;
    /*top right bottom left*/
    padding: 0;
}


/* This is for examples that are in lists to have a littlemore left margin */
.exfrlist
{
  margin: 0em 0em 0em 2em;
  /*top right bottom left*/
}


.exenlist {
  margin: 0em 0em 1em 2em;
  font-style: italic;
  /*top right bottom left*/
}


TD#unit p.exenio {padding: 0.3em 0 0.2em 10px; margin: 0 6.8em;
    color: #333; font-style: normal; }

TD#unit p.exfr {padding: 1.5em 0 0.2em 10px; margin: 0 6.8em;
    color: #68d; font-weight: bold; }

    /*doesn't work
main.exfr {color: #039;}*/

.exfrstr {font-weight: bold; color: #039; }

.exenstr {
  font-weight: bold; 
  color: black;
  /* this works but am reverting to bold face as of 13Feb */
  /* border-color: #989898;
  border-bottom-style: dotted; */
}


.exspannormal {font-weight: normal; color:#333;
  margin: 0em 0em 0em 1em;
  /*top right bottom left*/
}

  .spannormal {
font-style: normal;
}

.exspanno {font-weight: normal; color:#333;}

TD#unit P.exentop { padding: 1.5em 0 0.2em 10px; margin: 0 6.8em;
    color: #999; font-weight: bold; }

TD#unit P.exfrbottom {padding: 0.3em 0 0.7em 10px; margin: 0 6.8em;
    color: #68d;  font-weight: bold;}

.exentopstr {font-weight: bold; 
}

.exfrheading {
	color: #039;
}
.outthere {
  float:right; 
  /* width: 160px;  */
  width: 6em; 
  background-color: #eee; 
  /* padding: 4px;  */
  padding: 0.4em;
  margin-left: .5em; 
  margin-top:0.8em; 
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa; 
  border-left: 1px solid #aaa; 
  border-right: 1px solid #aaa;
}

.outthere p {
margin:0; padding:0;
font-family: 'Open Sans', sans-serif;
font-size: 0.7em;
}


img {
  max-width: 100%; /* make sure the image is no wider than its container */
  height: auto; /* keeps the height in proportion to the width */ 
  }

  /* making specific images in advunit4 centred and % width */
  #advunit4 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:70%;
    }

  #advunit5 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:80%;
    }

    @media all and (max-width:500px) {
 /* except on a mobile */
 #advunit4 {
  width:85%;
  }
    }

  #advunit30a {
    display: block;
    margin-left: 3em;
    /* margin-left: auto;
    margin-right: auto; */
    width:65%;
    }
    
  #advunit30b {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:65%;
    }


  /* Controls div in which subsections are listed and linked to at top */
  #toclist {  
    padding-top: 1em; 
    line-height: 1.2em;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    /*lots of stuff taken out from original ltp.css */
  }

 .chapword {
        /* display: block; */
        /* font-size: 1em; */
        /* text-transform: lowercase; */
        font-weight: bold;
        color: gray;
        font-size: 1em;
        /* font-variant: small-caps; */
        letter-spacing: 0.2em;
        /* padding-top: .5em; */
        /* margin-bottom: .2em; */
    } 

    .forwardbacknav { 
      /* display: block; */
      /* padding-top: .5em;  */
      text-align: right;
      vertical-align: text-bottom;
      font-size: .8em;
  }

/* FLEX STUFF for forwardbacknav*/

main .flex-container {
  display: flex;
  align-items: stretch;
  /* background-color: #f1f1f1; */ 
}

main .flex-container > div {
  background-color: white;
  font-family: 'Open Sans', sans-serif;
  /* color: white; */
  /* width: 100px; */
  /* padding: .5em; */
  /* margin: 10px; */
  margin: .6em;
  margin-left: -.01em;
  /* text-align: center; */
  /* text-align: left; */
  /* line-height: 75px; */
  flex-grow: 1;
  /* border: solid .2em;
  border-radius: 6px;
  border-color:  DodgerBlue; */
  /* below z-index means that pointer will disappear under callout box */
  /* z-index: 2;  */
}





    /* keeps the top nav centered  and aligned with main page content*/
    .navWrapper {
      max-width: 780px;
      margin-left: auto;
      /* taken off 4 Feb */
      margin-right: 1px;
  }


  /* from Derren THIS SETS THE WIDTH OF THE MAIN BODY OF THE SITE*/
main {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

header {
  display: block;
  /* background-color: rgba(95,121,149,1); */
  background-color: white;
  /* background-image: url(../images/pigalle.jpg); */
  /* background-repeat: no-repeat; */
  background-size: cover;
  /* background-blend-mode: overlay; */
  /* background-color: cornflowerblue; test from neil orange peel*/
  /* background-color: rgba(49, 140, 231,1); classic French flag colour */
  color: black;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.frontpageheader {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  max-width: 1250px;
}

header .flex-container {
  display: flex;
  /* align-items: stretch; */
  /* flex-wrap: nowrap; */
}

header .flex-container > .HFWtitlepage {
  width: 100%;
    max-width: 65%;
  /* border: solid .1em; */
}

header .flex-container > .HFWicon {
  width: 100%;
    max-width: 35%;
    text-align: center;
 /* border: solid .1em; */
}

@media only screen and (max-width: 600px) {
  header .flex-container > .HFWicon {
    /* display: none; */
    text-align: center;
    max-width: 50%;
  }
  #homepagelogo{
    padding-top: .5em;
    width: 75%;
  }
  header .flex-container > .HFWicon {
      max-width: 50%;
  }
}

@media only screen and (max-width: 600px) {
  header .flex-container > .HFWtitlepage {
    max-width: 100%;
  }
}


/* header .flex-container > div:nth-of-type(1) {flex-grow: 2;}
header .flex-container > div:nth-of-type(2) {flex-grow: 1; margin-left: auto; margin-right: auto;} */


/* header .flex-container2 {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 1em;
}

header .flex-container2 > div {
  /* border: solid .1em; 
  border: none;
} */

/* header .flex-container2 > div:nth-of-type(1) {flex-grow: 1;} */



#about h2, #print h2, #contact h2 {
padding-top: .5em;
}



/* adv ch2 table of differences between English and French */
#table2_9a {
width: 100%;
}

#table2_9a td {
  width: 50%;
  vertical-align: top;
  padding-bottom: .5em;
  padding-left: .4em;
  }

  /*  table on Insults (descriptions) adv unit 9 */
  #table9_4_3a td {
    width: 33%;
  }

/* this selects the table with the given id and targets the first td in each tr */

  #table11_1_8d td:nth-child(1) {
    width: 15%;
    }

  
/* these selects the table Different uses of past participles advunit 12  */

#table12_2a td:nth-child(1) {
  width: 16%;
  vertical-align: top;
}
    
#table12_2a td:nth-child(2) {
  width: 42%;
  vertical-align: top;
}

#table12_2a td:nth-child(3) {
  width: 42%;
  vertical-align: top;
}

#table12_2a {
  width: 100%;
}


/* adv ch4 table of Sara teaches adults */
#table4_1a {
  width: 100%;
  }

/* adv ch2 table of differences between English and French */
.widetable {
  width: 100%;
  }

  .widetable td {
    vertical-align: top;
    padding-bottom: .3em;
    padding-left: .4em;
    width: 50%;
    }

    .widetable th {
      padding-left: .4em;
      }

    .spacertable {
      width: 85%;
      vertical-align: top;
      align-content: center;
      padding-bottom: .5em;
      padding-left: .4em;
      border-bottom: 0em;
      }


      #table21_2a td:nth-child(1) {
        width: 16%;
        vertical-align: top;
      }


      #table21_2b td:nth-child(1) {
        width: 16%;
        vertical-align: top;
      }


      /* ////////////// */
      #table24_1_4a {
        width: 100%;
        }

        #table24_1_4a td:nth-child(1) {
          width: 15%;
          vertical-align: top;
        }
            
        #table24_1_4a td:nth-child(2) {
          width: 22%;
          vertical-align: top;
        }
        
        #table24_1_4a td:nth-child(3) {
          width: 15%;
          vertical-align: top;
        }

        #table24_1_4a td:nth-child(4) {
          width: 48%;
          vertical-align: top;
        }


/* //////// */


#table25_1a {
  width: 100%;
}

#table25_1a td:nth-child(1) {
  width: 25%;
  vertical-align: top;
}
    
#table25_1a td:nth-child(2) {
  width: 50%;
  vertical-align: top;
}

#table25_1a td:nth-child(3) {
  width: 25%;
  vertical-align: top;
}

/* /// */
#table25_2_2_5a {
    width: 100%;
}
#table25_2_2_5a td:nth-child(1) {
  width: 25%;
  vertical-align: top;
}
    
#table25_2_2_5a td:nth-child(2) {
  width: 25%;
  vertical-align: top;
}

#table25_2_2_5a td:nth-child(3) {
  width: 25%;
  vertical-align: top;
}


/* //// */

#table26_2_2a {
  width: 100%;
}
#table26_2_2a td:nth-child(1) {
width: 25%;
vertical-align: top;
}
  
#table26_2_2a td:nth-child(2) {
width: 25%;
vertical-align: top;
}

#table26_2_2a td:nth-child(3) {
width: 25%;
vertical-align: top;
}



/* //// */
#table29_4_5a {
  width: 100%;
}
#table29_4_5a td:nth-child(1) {
width: 40%;
vertical-align: top;
}
  
#table29_4_5a td:nth-child(2) {
width: 60%;
vertical-align: top;
}
/* //// */


/* //// */
#table29_4_5b {
  width: 100%;
}
#table29_4_5b td:nth-child(1) {
width: 40%;
vertical-align: top;
}
  
#table29_4_5b td:nth-child(2) {
width: 60%;
vertical-align: top;
}
/* //// */




#table37_1a {
  width: 100%;
  font-size: 0.9em;
}
#table37_1a td:nth-child(1) {
width: 30%;
vertical-align: top;
}
  
#table37_1a td:nth-child(2) {
width: 30%;
vertical-align: top;
}

#table37_1a td:nth-child(3) {
width: 40%;
vertical-align: top;
}


/* ////// PREPOSITIONS*/


#table38_2_2a, #table38_3a, #table38_4a, #table38_5a, #table38_6a, #table38_7a, #table39_1a, #table39_2a, #table39_3a, #table39_4a, #table39_5a  {
  width: 100%;
  font-size: 0.9em;
}
#table38_2_2a td:nth-child(1),
#table38_4a td:nth-child(1), 
#table38_5a td:nth-child(1),
#table38_6a td:nth-child(1), 
#table38_7a td:nth-child(1),
#table39_1a td:nth-child(1),
#table39_2a td:nth-child(1),
#table39_3a td:nth-child(1),
#table39_4a td:nth-child(1),
#table39_5a td:nth-child(1)
{
width: 20%;
vertical-align: top;
}
  
#table38_2_2a td:nth-child(2),
#table38_4a td:nth-child(2),
#table38_5a td:nth-child(2),
#table38_6a td:nth-child(2), 
#table38_7a td:nth-child(2),
#table39_1a td:nth-child(2),
#table39_2a td:nth-child(2),
#table39_3a td:nth-child(2),
#table39_4a td:nth-child(2),
#table39_5a td:nth-child(2) 
{
width: 40%;
vertical-align: top;
}

#table38_2_2a td:nth-child(3),
#table38_4a td:nth-child(3),
#table38_5a td:nth-child(3),
#table38_6a td:nth-child(3), 
#table38_7a td:nth-child(3),
#table39_1a td:nth-child(3),
#table39_2a td:nth-child(3),
#table39_3a td:nth-child(3),
#table39_4a td:nth-child(3),
#table39_5a td:nth-child(3)  
{
width: 40%;
vertical-align: top;
}

/* ////// */


#table47_3_9a {
  width: 100%;
  font-size: 0.9em;
}
#table47_3_9a td:nth-child(1) {
width: 20%;
vertical-align: top;
}
  
#table47_3_9a td:nth-child(2) {
width: 40%;
vertical-align: top;
}

#table47_3_9a td:nth-child(3) {
width: 40%;
vertical-align: top;
}


/* ///// */

#table50a {
  width: 100%;
}

#table50a td:nth-child(1) {
  width: 20%;
  vertical-align: top;
}
    
#table50a td:nth-child(2) {
  width: 40%;
  vertical-align: top;
}

#table50a td:nth-child(3) {
  width: 40%;
  vertical-align: top;
}





/*  */




#table57_2_1a {
  width: 100%;
  font-size: 0.9em;
}
#table57_2_1a td:nth-child(1) {
width: 33%;
vertical-align: top;
}
  
#table57_2_1a td:nth-child(2) {
width: 33%;
vertical-align: top;
}

#table57_2_1a td:nth-child(3) {
width: 33%;
vertical-align: top;
}


/* intermediate tables */

#table3_4a td {
padding-left: .5em;
}


/* for verbs tables where a width of 50:50 is needed e.g. subjunctive */

.verbtable50 td,
.verbtable50 th {
  padding-left: .5em;
  width: 50%;
}


/* This is for all basic verb tables in both grammars*/

.verbtable td,
.verbtable th {
  padding-left: .5em;
  width: 50%;
}


/* This is for all tables in both grammars - it creates a narrow left margin of .5em*/
table td,
table th {
  padding-left: .5em;
}




.tablepadding td, 
.tablepadding th {
  padding-left: .5em;
}


/* This is for all tables with class table5columns which need evenly spaced 5 columns */

.table5columns {
  width: 100%;
}
.table5columns td:nth-child(1) {
width: 20%;
vertical-align: top;
}
  
.table5columns td:nth-child(2) {
width: 20%;
vertical-align: top;
}

.table5columns td:nth-child(3) {
width: 20%;
vertical-align: top;
}
.table5columns td:nth-child(4) {
  width: 20%;
  vertical-align: top;
  }

.table5columns td:nth-child(5) {
width: 20%;
vertical-align: top;
}



/* This is for all tables with class table4columns which need the left slightly wider e.g. int unit 44*/

.table4columnsLeftWider {
  width: 100%;
}
.table4columnsLeftWider td:nth-child(1) {
width: 40%;
vertical-align: top;
}
  
.table4columnsLeftWider td:nth-child(2) {
width: 20%;
vertical-align: top;
}

.table4columnsLeftWider td:nth-child(3) {
width: 20%;
vertical-align: top;
}
.table4columnsLeftWider td:nth-child(4) {
  width: 20%;
  vertical-align: top;
  }




/* 8 June 2020 This makes the pronoun form e.g. (Ils/Elles) small and open sans*/
.begverbtable td:nth-child(1) {
  /* width: 16%; */
  font-size: .8em;
  /* vertical-align: top; */
  font-family: 'Open Sans', sans-serif;
}

/* reduces h2 top margin on beginner end of unit games*/
.grambeginner_test {
  margin-top: 1em;
}

  
/* Figure stuff from ltp site */

figure img {
  display: inline-block;
  border: 1px dotted gray;
  margin-top: .2em;
  margin-bottom: 0em;
}

figure {
  margin-left: 0em;
  margin-top: 2em;
}
/* This is to take off the bottom margin of the figures in the activities section   as this creates an excessive vertical gap with the toggleMorteExamples class  */
figure.activitiesFigure {
margin-bottom: 1em;
}


figure img {
  vertical-align: top;
  /* border: 1px dotted gray; */
}
figcaption {
  font-family: 'Open Sans', sans-serif;
  font-size: .7em;
  margin-top: 2em;
  margin-left: .5em;
}

figcaption span {
  padding: .25em;
}

/* img {  
  height: auto;  */
  /* width: 75%; */
  /* max-width: 720px; */
  /* display: block; 
}  */

.sound {  
  display: inline-block; 
  width: .8em;
  height: .8em;
  margin-bottom: -.1em;
  margin-left: .4em;
  /* filter: grayscale(50%); */
  /* background-image: url(../images/sound.svg); */
} 

.sound:hover {
  /* background-color: rgba(95,121,149,0.15); */
  cursor:pointer; 
  /* background: red; */
 }

 .verbsound {  
  display: inline-block; 
  width: .8em;
  height: .8em;
  margin-bottom: -.1em;
  margin-left: .4em;
  /* filter: grayscale(50%); */
  /* background-image: url(../images/sound.svg); */
} 

.verbsound:hover {
  /* background-color: rgba(95,121,149,0.15); */
  cursor:pointer; 
  /* background: red; */
 }



 .conjsound {  
  display: inline-block; 
  width: .8em;
  height: .8em;
  margin-bottom: -.1em;
  margin-left: .4em;
  /* filter: grayscale(50%); */
  /* background-image: url(../images/sound.svg); */
} 

.conjsound:hover {
  /* background-color: rgba(95,121,149,0.15); */
  cursor:pointer; 
  /* background: red; */
 }

 .sound-icon {
  fill: black;
  transition: all 0.5s ease;
  stroke-width: 10;
}


audio {
  width: 280px;
  height: 25px;
  margin-left: 16px;
  margin-bottom: -4px;
}

.narrowAudio {
  width: 3.8em;
  height: 1em;
  margin-left: 16px;
  margin-bottom: -4px;
}

@keyframes pulse {

  0%,
  100% {
      opacity: 1;
  }

  50% {
      opacity: 0.7;
  }
}

.sound.playing .sound-icon {
  fill: red;
  animation: pulse 1s infinite;
}

.verbsound.playing .sound-icon {
  fill: red;
  animation: pulse 1s infinite;
}


img#adv3{  
  width: 90%;
} 


.sans-serif {
font-family: 'Open Sans', sans-serif;
}



/* verb conjugator */

#verbconjugator{
  margin-left: auto;
  margin-right: auto;
  padding-left: 2%;
  max-width: 1100px;
  background-color: lightgrey;
  border-radius: 6px;
}

#verbconjugatortable {
  width: 100%;
  border-bottom: none;
  padding: .8em 0em .8em 0em;
  /*top right bottom left*/
}

#verbconjugatortable td:nth-child(1) {
  width: 25%;
  border-bottom: none;
}

#verbconjugatortable tr:nth-child(1) {
  font-weight: bold;
}



.testYourself {
  /* background: lightgray; */
  background-color: rgb(222, 220, 220);
  padding-top: .5em;
  padding-bottom: .5em;
  /* font-size: 1.2em; */
  padding-left: .5em;
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  }

.testYourselfHeader {
  font-size: 1.2em;
  padding-left: .2em;
  margin-top: .2em;
  font-family: 'Open Sans', sans-serif;
  }
  
  .testYourselfParagraph {
    font-family: 'Open Sans', sans-serif;
    font-size: .8em;
    color: black;
  }

  .testYourselfForm {
    font-family: 'Open Sans', sans-serif;
    font-size: .8em;
    color: black;
  }


  .submitbutton {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: .9em;
    margin-top: .5em;
    margin-left: .5em;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    width: 20%;
  }
  
  .submitbuttonstyle {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
  }

  .submitbuttonstyle:hover {background-color: #efefef;} 


  .numberselect {
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: .9em;
    /* margin-top: 1em; */
    margin-left: 1em;
    padding: .4em;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    width: 3.5em;
  }
  
  .numberselectstyle {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
  }
  
  .numberselectstyle:hover {background-color: #efefef;} 


  .radio-toolbar {
  padding-top: .5em;
}

.radio-toolbar label {
  font-size: 1em;
  margin-left: .5em;
  font-size: 1em;
}



/* right-pointing arrow and container in gram navs and unit game links */

#unitnavleft {
  padding-left: .3em;
  padding-right: .3em;
}

#unitnavright {
  padding-left: .3em;
  padding-right: .3em;
}

.unitarrowright {
  padding-left: .3em;
  padding-right: .3em;
}

.unitarrowdown {
  color: rgba(204,0,0,0.9);
  padding-left: .3em;
  padding-right: .3em;
}

.unitarrowdown:hover {
  color: white;
}

#unitarrowright {
  /* color: black; */
  font-size: 1em;
}


#navarrow{
  color: gray;
  font-size: 1.2em;
  vertical-align: text-bottom;
}

.fa-caret-right {
  color: gray;
  font-size: 1.2em;
  margin-left: .2em;
  margin-right: .2em;
  vertical-align: text-bottom;
}

.fa-caret-left {
  color: black;
  font-size: 1.2em;
  margin-left: .2em;
  margin-right: .2em;
  vertical-align: text-bottom;
}

#downcaret {
  color: gray;
  font-size: 1.2em;
  margin-left: .2em;
  margin-right: .2em;
  vertical-align: text-bottom;
}


/* .fa-caret-down {
  color: gray;
  font-size: 1.2em;
  margin-left: .2em;
  margin-right: .2em;
  vertical-align: text-bottom;
} */


#unitarrowcentre {
  color: gray;
  font-size: .8em;
}
  
#unitarrowcentre:hover {
color: white;
} 

#unitarrowleft {
  color: gray;
  font-size: 1.1em;
}
  
#unitarrowleft:hover {
color: white;
} 

/* .unitnav {
  color: white;
  } 

.unitnav:hover {
  color: white;
  }  */


/* grabs all anchor links with unitnav class */
a .unitnav:hover,
a .unitnav:focus {
    /* background-color: rgba(204,0,0,0.9);
    border-color: rgba(204,0,0,0.9); */
    background-color: green;
    border-color: green;
    color: white;
}