@charset 'UTF-8';

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

@font-face {
    font-family: 'et-book';
    src: url('../fonts/etbookot-roman-webfont.woff2') format('woff2'),
         url('../fonts/etbookot-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'et-book';
    src: url('../fonts/etbookot-italic-webfont.woff2') format('woff2'),
         url('../fonts/etbookot-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'et-book';
    src: url('../fonts/etbookot-bold-webfont.woff2') format('woff2'),
         url('../fonts/etbookot-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@media print {
    @page {
        margin: 1in 0.5in 0.5in;
        orphans: 4;
        widows: 3;
    }
}


body {
    background-color: white;
    color: black;
    font-family: 'et-book', Georgia, serif;
    font-weight: normal;
    font-variant-ligatures: common-ligatures;
    font-variant-numeric: oldstyle-nums;
    /* line-height: 1.5; taken off 29 Jan to make HFWtitle less padded */
    margin: 0;
    padding: 0;
}

.frontpage {
    scroll-behavior: smooth;
}

@media print {
    body {
        background-color: transparent;
        color: black;
    }
}

/* HFWtitle to be 40 when 320px wide iPhone SE*/

.HFWtitle {
    font-size: 60px; 
    /* was 2.2em changed 29 Jan*/
    letter-spacing: 0.02em;
    font-weight: normal;
  }

/* This overrides the user stylesheet that makes all headings bold */
h1, h2 {
    font-weight: normal;
    font-family: 'Open Sans', sans-serif;
}

.unitheading {
    padding-top: .2em;
}

.intercontents {
    padding-top: .2em;
}

.intercontentsnav {
    padding-top: 1em;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
}

.view {
font-size: 0.8em;
}

/* This controls the boxes and other elements wrapping the list of contents in intermediate contents / advanced contents list pages */

.intercontentswrapper{
    border-top: solid .1em;
    border-color: rgba(95,121,149,0.2);;
  /* border-radius: 6px; */
  margin-top: 1em;
  margin-bottom: 1em;
}

.intercontentswrapper h2{
    margin: .5em 0.1em .5em 0.1em;
    /*top right bottom left*/
}

.intercontentswrapper p{
    margin: 0em 0em 0em 0em;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    margin: .5em 0.1em .5em 0.1em;
    /*top right bottom left*/
}

/* This controls the headings on the h2s */
h2 {   
    margin: 2.2em 0em 0em 0em;
    /*top right bottom left*/
}

/* this controls the paragraph margins */
p {
    margin: .5em 0em 1em 0em;
    /*top right bottom left*/
}

/* from line 400, this controls the heading text on the homepage */

header hgroup h1 {
    font-size: 4.5em;
    border-bottom: 0em;
     /* added 4 Feb to test */
     font-family: 'Open Sans', sans-serif;
}

.titlesubhead {
    font-size: 1.2em;
    letter-spacing: 0.04em;
    padding-top: 1.5em;
}

#about {
    min-height: 100vh;
}

#print {
    min-height: 100vh;
}

#contact {
    min-height: 100vh;
}



/* 30em - 70em as per Resilient Web Design
30 = 480px
40 = 640px
50 = 800px
60 = 960px
70 = 1120px
*/


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


header hgroup {
    /* min-height: calc(100vh - 2em); */
    min-height: 100vh;
    /* min-height: calc(100vh); */
}

header hgroup
 {
    display: block;
    /* max-width: 27em; */
    /* padding-top: 50px; */
    /* margin-top: 3em; */
    /* padding: 50px; */
    /* taken out 4 Feb */
    margin-left: 2%;
    /* margin-right: auto; */
    /* font-family: Futura, 'Gill Sans', 'Helvetica Neue', Arial, sans-serif; */
    /* text-transform: uppercase; */
    letter-spacing: 0.2em;
    position: relative;
}

.homepagelinks {
    font-family: 'Open Sans', sans-serif;
    font-size: .8em;
    margin-top: 4em;
    color: gray;
    letter-spacing: 0.1em;
    
}

@media screen and (min-height: 640px){
    .homepagelinks {
    position: absolute;
    /* bottom: 5em; */
    bottom: 10em;
    }  
}


/* This relates to the table headers e.g. aimer - to give */

th {
    font-family: 'Open Sans', sans-serif;
    font-size: .9em;
}


h3 {
    /* font-size: 1.25em;  */
    /*font-size: calc( 1.25em + (3.75 - 1.25) * ( (100vw - 20em) / ( 100 - 20) ));*/
    font-weight: normal;
    line-height: 1.25;
    font-family: 'Open Sans', sans-serif;
    margin: 2em 0em 0em 0em;
    /*top right bottom left*/
}

/* This controls the spacing between the h3 number and title e.g. 3.3----The verb phrase */
h3 .h3number {
    margin-right: 0.2em
}

h3 .ex2 {
    font-style: normal;
    font-weight: bold;
}

h2 .ex2 {
    font-style: normal;
    font-weight: bold;
}


h4 {
    font-weight: normal;
    line-height: 1.25;
    font-family: 'Open Sans', sans-serif;
    margin: 2.5em 0em 0em 0em;
    /*top right bottom left*/
}

table h4 {
    margin: 1em 0em 1em 0em;
    /*top right bottom left*/
}

/* below is bringing the text size down on the homepage so that we get the 'How French' on the same line */

@media all and (min-width: 200px) {

    body {
        font-size: 18px;
        line-height: 1.50;
    } 

    h1 {
        font-size: 22px;
        line-height: 1;
        margin: 0;  
        padding-bottom: 0.15em;
        border-bottom: 0.15em solid rgba(95,121,149,0.5);
        letter-spacing: 0.025em;
        }
    h2 {
        font-size: 18px;  
        line-height: 1.125;
        }
    h3 {
        font-size: 16px;  
        line-height: 1.125;
        }

    h4 {
        font-size: 14px;  
        line-height: 1.125;
        }


.HFWtitle {
    /* font-size: 1.8em; */
    font-size: 28px;    
    }

.titlepage {
    font-size: 2em;
    }


    /* This is the "How French Works" text on the homepage */
    header hgroup h1 {
        font-size: 2.1em;
    }

    header hgroup
{
/* display: block;
max-width: 27em; */
padding-top: 50px;
margin-top: 2em;
padding: 20px;
/* taken out 4 Feb */
/* margin-left: 2%; */
/* margin-right: auto; */
/* font-family: Futura, 'Gill Sans', 'Helvetica Neue', Arial, sans-serif; */
/* text-transform: uppercase; */
/* letter-spacing: 0.2em; */
}

/* This relates to the table headers e.g. aimer - to give */
th {
    font-size: .8em;
}

table {
    width: 100%;
    /* border-radius: 8px; */
}

/* tr th { */
    /* border-top-left-radius: 8px;
    border-top-right-radius: 8px; */
/* } */
 
.tabletopradius {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: red;
  }


  figure {
    width: 100%;
  }
}



@media all and (min-width: 480px) {
    body {
        font-size: 16px;
        line-height: 1.50;
    } 
    h1 {
        font-size: 30px;
        line-height: 1;
        margin: 0;  
        padding-bottom: 0.15em;
        border-bottom: 0.15em solid rgba(95,121,149,0.5);
        letter-spacing: 0.025em;
        }
    h2 {
        font-size: 24px;  
        line-height: 1.125;
        }

        h3 {
            font-size: 20px;  
            line-height: 1.125;
            }

        h4 {
            font-size: 18px;  
            line-height: 1.125;
            }

    .HFWtitle {
        font-size: 40px; 
        line-height: 1.45;
        }

    .titlepage {
        font-size: 3.5em;
        }

        header hgroup h1 {
            font-size: 4em;
        }

        table {
            width: 100%;
        }


    /* The above means in English: When the page width 
 reaches 480px or more, then the font size will be 14px */
}
@media all and (min-width: 640px) {
    body {
        font-size: 20px;
        line-height: 1.40;
    }
    h1 {
        font-size: 34px;
        line-height: 1;
        margin: 0;  
        padding-bottom: 0.15em;
        border-bottom: 0.15em solid rgba(95,121,149,0.5);
        letter-spacing: 0.025em;
        }
    h2 {
        font-size: 26px;  
        line-height: 1.125;
        }

    h3 {
        font-size: 22px;  
        line-height: 1.125;
        }

    h4 {
        font-size: 20px;  
        line-height: 1.125;
        }

    .HFWtitle {
        font-size: 46px; 
        line-height: 1.45;
        }

    .titlepage {
        font-size: 3em;
        }


        table {
            width: 90%;
        }

}

/* 3rd widest screen-width: 960px */

@media all and (min-width: 800px) {
    body {
        font-size: 26px;
        line-height: 1.45;
    }
    h1 {
        font-size: 36px;
        line-height: 1;
        margin: 0;  
        padding-bottom: 0.15em;
        border-bottom: 0.15em solid rgba(95,121,149,0.5);
        letter-spacing: 0.025em;
        }
    h2 {
        font-size: 28px;  
        line-height: 1.125;
        }

    h3 {
        font-size: 24px;  
        line-height: 1.125;
        }

    h4 {
        font-size: 22px;  
        line-height: 1.125;
        }


    .HFWtitle {
        font-size: 52px; 
        line-height: 1.45;
        }

    .titlepage {
        font-size: 3.5em;
        }

        table {
            width: 90%;
        }

}

/* 2nd widest screen-width: 960px */

@media all and (min-width: 960px) {
    body {
        font-size: 26px;
        line-height: 1.50;
    }
    h1 {
        font-size: 40px;
        line-height: 1;
        margin: 0;  
        padding-bottom: 0.15em;
        border-bottom: 0.15em solid rgba(95,121,149,0.5);
        letter-spacing: 0.025em;
        }
    h2 {
        font-size: 30px;  
        line-height: 1.125;
        }

        h3 {
            font-size: 24px;  
            line-height: 1.125;
            }
    
        h4 {
            font-size: 22px;  
            line-height: 1.125;
            }


    .HFWtitle {
        font-size: 55px; 
        line-height: 1.45;
        }

    .titlepage {
        font-size: 4em;
        }

        table {
            width: 85%;
        }
}

/* Widest screen-width: 1120px */

@media all and (min-width: 1120px) {
    body {
        line-height: 1.60;
        font-size: 28px;
    }
    h1 {
        /* font-size: 52px; */
        font-size: 44px;
        line-height: 1;
        margin: 0;  
        padding-bottom: 0.15em;
        border-bottom: 0.15em solid rgba(95,121,149,0.5);
        /* letter-spacing: 0.025em; */
        }
    h2 {
        font-size: 32px;  
        line-height: 1.125;
        }

    h3 {
        font-size: 27px;  
        line-height: 1.125;
        }
    
    h4 {
        font-size: 24px;  
        line-height: 1.125;
        }

    .HFWtitle {
        font-size: 60px; 
        line-height: 1.45;
        }

    .titlepage {
        font-size: 4.5em;
        }

        table {
            width: 85%;
        }
}


/* This section governs the table captions */
table caption {
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: .4em;
}

span.captiontable {
  font-weight: bold;
  font-size: 0.8em;
} 

span.captionheading {
  font-weight: bold;
  font-size: 0.8em;
} 



/* red fade table */

/* The next 2 rules  cause all listen spans to fade into a red colour  */
.hidetable {
    /* margin-left: .4em;
   font-size: 0.6em;
   color: black; 
   background-color: lightgrey;
  border-radius: 6px;
  box-shadow: 2px 2px 2px grey;*/
  margin-left: .4em;
  display: inline;
  /* padding-right: .4em; */
  /* padding-top: .2em; */
  /* padding-bottom: -.2em; */
  margin-bottom: -.22em;
   /*  transition: color 0.5s ease; */
 }
 
 span.hidetable:hover {
   /* background-color: rgba(95,121,149,0.15); */
   cursor:pointer; 
   color: red;
 }
 
 /* red fade table end */

 /* The rest is in the graminter etc. php files (need to slowly move over). This controls the width of the See more examples button  */

 .showmoreexamplescontainer, .showmoreexamplescontainerconj {
    background-color: #eee;
    /* background-color: rgb(222, 220, 220); */

    padding-top: .5em;
    padding-left: 1em;      
    padding-bottom: .5em;
    border: 2px;
    border-radius: 8px;
    text-align: left;
    outline: none;
    font-size: .75em;
    transition: 0.4s;
    margin-bottom: 3em;
    margin-top: 2.5em;
    display: flex;
    flex-wrap: wrap;
    padding: .5em 0.5em 0.5em .5em;

 }

.showmoreexamplescontainer > div {
    width: 100%;
    max-width: 33%;
    }

/* specifically for verb conjugator examples which doesn't need 3 things */
.showmoreexamplescontainerconj > div {
    width: 100%;
    max-width: 100%;
        }

@media only screen and (max-width: 600px) {
        .showmoreexamplescontainer > div {
          max-width: 100%;
        }
      }
 
 .gotoExercise{  
    font-size: 1em; 
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    padding-top: .2em;
    padding-bottom: .2em;
} 

.moreexamples {
    font-size: 1em; 
}

/* for verb conjugator examples*/
.moreexamplesconj {
    font-size: 1.3em; 
}


a {
   text-decoration: none;
   transition: color 0.25s, background-color 0.25s;
}

/* needs work trying to get the subnav of the top heading nav to have different font*/
#smallrednav{
    background-color: transparent;
    color: rgba(204,0,0,0.9);
}

a:link,
a:visited {
    background-color: transparent;
    color: rgba(204,0,0,0.9);
}
a:hover,
a:focus {
    background-color: rgba(204,0,0,0.9);
    border-color: rgba(204,0,0,0.9);
    color: white;
}
picture {
    max-width: 100%
}
img {
    border: none;
    max-width: 100%;
}
abbr,
code.markup.element,
code.markup.attribute {
    text-decoration: none;
    font-family: inherit;
    font-variant: all-small-caps;
}
pre {
    color: rgba(0,0,0,0.75);
    white-space: pre-wrap;
    margin: 1em;
}
@media print {
    pre {
        page-break-inside: avoid;
    }
}
sup {
    vertical-align: top;
}
i,
em,
cite {
    font-style: italic;
}
b,
strong {
    font-weight: bold;
}

/* deleted 29 Jan */
/* p {
    margin: 2em 0;
} */

@media print {
    p {
        page-break-inside: avoid;
    }
}
ul,
ol {
    margin: 2em 0;
    padding: 0;
}
li {
    margin: 1em;
    padding: 0;
}
@media print {
    li {
        page-break-inside: avoid;
    }
}



@media print {
    h1,h2,h3,h4,h5 {
        page-break-after: avoid;
    }
}

/* Blockquote stuff for People are saying section */

blockquote {
    font-style: italic;
    margin: 2em;
    padding: 0;
}
blockquote p:first-child,
blockquote p:last-child {
    position: relative;
}
blockquote p:first-child::before,
blockquote p:last-child::after {
    font-style: normal;
    font-size: 4em;
    line-height: 1;
    color: rgba(0,0,0,0.25);
    position: absolute;
}
blockquote p:first-child::before {
    content: '“';
    top: -0.125em;
    left: -0.5em;
}
blockquote p:last-child::after {
    content: '”';
}
@media print {
    blockquote {
        page-break-inside: avoid;
    }
}

/* got rid of all the figure stuff 29 Jan */

@media print {
    header {
        background-color: transparent;
        color: black;
    }
}

/* 
header hgroup {
    min-height: calc(100vh - 2em);
    /* min-height: calc(100vh);
} */

/* header hgroup h1 stuffy moved to media queries */


header a:link,
header a:visited,
header a:hover,
header a:focus {
    color: inherit;
    background-color: inherit;
}

main {
    display: block;
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    padding-top: 0em;
}
main ::selection {
    background-color: rgba(95,121,149,1);
    color: white;
}

/* taken off 22 Oct 2020 */
/* main > h1 span {
    display: block;
    font-size: 0.5em;
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: 0.3em;
    margin-bottom: 1em;
} */

@media print {
    main > h1 {
        border-bottom: none;
        page-break-after: always;
    }
}


main > p:first-of-type cite {
    white-space: pre;
}

@media print {
    section {
        page-break-before: always;
    }
}

aside li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-align: right;
}
aside li a {
    text-align: left;
}
@media print {
    aside {
        display: none;
    }
}

nav {
    display: block;
}
nav a {
    display: block;
    padding: 1em;
}
nav cite span {
    font-style: normal;
    font-size: 0.8em;
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: 0.3em;
}
nav a[rel="next"] {
    text-align: center;
    border-top: 1px solid;
    border-bottom: 1px solid;
}
nav a[rel="next"] cite {
    letter-spacing: 0.05em;
    font-style: normal;
}
nav a[rel="next"] cite span {
    display: block;
}
nav a[rel="author"] cite {
    font-style: normal;
}

nav ol,
nav li {
    display: block;
    margin: 0;
}
nav li:not(:last-child) {
    border-bottom: 1px dotted rgba(0,0,0,0.2);
}
nav li cite {
    display: block;
    display: flex;
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    align-items: baseline;
}
nav li li:first-child {
    border-top: 1px dotted rgba(0,0,0,0.2);
}
nav li li cite {
    justify-content: flex-end;
}
@media print {
    nav {
        display: none;
    }
}

footer {
    display: block;
    background-color: gray;
    color: black;
    padding: 1em;
}
footer > p {
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
}
footer a:link,
footer a:visited {
    color: rgba(255,51,51,0.9);
}
footer a:hover,
footer a:focus {
    color: white;
}
@media print {
    footer {
        background-color: transparent;
        color: black;
    }
    footer a:link,
    footer a:visited {
        color: inherit;
    }
    main + nav + footer {
        display: none;
    }
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px; 
     /*  top: 10px;*/
    right: 30px;
    z-index: 99;
    font-size: 16px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
  }
  
  #myBtn:hover {
    background-color: #555;
  }


  /* Add a black background color to the top navigation */
.topnav {
    /* background-color: #333; */
    /* background-color: lightcoral; test from neil orange peel*/
    /* background-color: rgba(95,121,149,0.5);   */
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    /* color: black; */
    color: gray;
    text-align: center;
    padding: 14px 16px;
    /* padding: 1em 1.2em; */
    text-decoration: none;
    font-size: .65em;
    font-weight: 600;
    /* font-family: Futura, 'Gill Sans', 'Helvetica Neue', Arial, sans-serif; */
    font-family: 'Open Sans', sans-serif;
    letter-spacing: .09em;
    
  }

/* Makes hamburger nav text bigger on mobile */
  @media only screen and (max-width: 600px) {
    .topnav a {
        font-size: .9em;
        max-height: 1.5em;
    }
  }


  
  /* Add an active class to highlight the current page */
  a.active {
    background-color:rgba(95,121,149,1);
    color: white;
  }
  
  /* style the dropdown button blue when active i.e. when you're on a grammar page */
  .dropdown .dropbtn.active {
    background-color:rgba(95,121,149,1);
    color: white;
  }


  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  
  /* Dropdown container - needed to position the dropdown content */
  div.dropdown {
    float: left;
    overflow: hidden;
    font-family: Futura, 'Gill Sans', 'Helvetica Neue', Arial, sans-serif;
  }
  
  /* Style the dropdown button to fit inside the topnav */
  .dropdown .dropbtn {
    font-size: 17px; 
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    /* added: */
    color: gray;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: .65em;
    font-weight: 600;
    /* font-family: Futura, 'Gill Sans', 'Helvetica Neue', Arial, sans-serif; */
    font-family: 'Open Sans', sans-serif;
    letter-spacing: .09em;
    /* line-height: 1.6; */
    line-height: inherit;
  }
  

  /* Makes hamburger nav text bigger on mobile */
  @media only screen and (max-width: 600px) {
    .dropdown .dropbtn {
        font-size: .9em;
    }
  }


  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a dark background on topnav links and the dropdown button on hover */
  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }

    /* This relates to the hamburger icon. We've made it bigger than the text (.9em). Also it has max-height to keep the background colour height the same as the HOME height*/
    .topnav a.icon {
      float: right;
      display: block;
      font-size: 1.1em;
      padding: 11px;
      max-height: 1.5em;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }


  .tooltip {
    position: relative;
    /* display: inline-block; */
    /* display: inline;  */
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    font-family: 'Open Sans', sans-serif;
    font-size: .6em;
    visibility: hidden;
    width: 20em;
    background-color: lightgray;
    color: black;
    /* text-align: center; */
    border-radius: 6px;
    padding: .6em;
    /*top right bottom left*/
    box-shadow: 2px 2px 2px grey;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  .breadcrumb_ex {
      /* color: black; */
      font-family: 'Open Sans', sans-serif;
      font-size: .85em;
      margin-top: 1em;
  }