/*  Reference for custom font used: PPD-Black */
@font-face
{
    font-family: myFont;
    src:url(fonts/PPD-Black.otf);
    
}

/*  No padding on webpage, initially, by default */
*
{
    padding: 0;
}
          
#loading #appContent, #tableStyle2Reading, #tableStyle2Copying, #tableStyle2Spelling, #tableStyle2Checking, #tableStyle2Stages, #spellingList
{
    display: none;
}



#mobileScreensOnly
{
    display: none;
}
    
/*  Default settings for body of pages, sets default font, background color and fade in animation settings  */
body 
{
    overflow-x: hidden;
    font-family: 'myFont', cursive;    
    background-color: white;
    
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*  Opacity range for page fade-in animation  */
@keyframes fadeInAnimation 
{
    0% 
    {
        opacity: 0;
    }
    100% 
    {
        opacity: 1;
    }
}

audio
{
    display: none;
}


/*  Sets background logo container to transparent */
.logo
{
    background-color: transparent;
    
}

/*  Sets background logo image specs */
.logo img
{
    margin-top: 30px;
    padding: 0px;
    width: 15%;
    background-color: rgba(0,0,0,0);
    border-radius: 10%;
    transition: 0.5s;
}

/*  To brighten logo on cursor hover */
.logo img:hover
{
    filter: brightness(125%);
}

/*  Sets hero video width */
.heroPicture img
{
    width:  100%;
    text-align: center;
}

.heroPicture a
{
    font-size: 16px;
    margin: 10px;
    margin-top: 15px;
    width: 100%;
    text-decoration: underline;
    color: dodgerblue;
}

/*  Navbar container specs - adapted from Greatstack 'Website Design With HTML and CSS' */

#headerBody
{
    position: relative;
    text-align: center;       
}

#headerBody h6
{
    color: dodgerblue;
    letter-spacing: 5px;
    font-size: 12px;
    width: 90%;
    margin-left: 5%;
}

.navbar
{
    margin-left: auto;
    margin-right: auto;
    
}

    /*  List of links container specs */
    .navbar ul
    {       
        background-color: none;
        border-radius: 25px;
        display: inline-block;
        list-style-type: none;
    }

    /*  General list of links specs */
    .navbar ul li
    {
        height: auto;
        position: relative;
        display: inline-block;    
        margin: 12px 12px 12px 12px;
    }

    /*  Individual links spec */
    .navbar ul li a
    {
        height: 20px;    
        text-decoration: none;
        color: black;
        letter-spacing: 5px;
    }

    /*  Link underline specs - has 0 width initially, not displayed on hover  */
    .navbar ul li::after
    {
        background: dodgerblue;
        content: '';
        width: 0;
        height: 3px;    
        left: 0;
        bottom: -10px;
        position: absolute;
        transition: 0.5s;
    }

    /*  Displays link underline on hover */
    .navbar ul li:hover::after
    {
        width: 100%;
    }

    .navbar img
    {
        background-color: dodgerblue;
    }

    #usernameOnIndexPage
    {
        color: darkorange;
        font-size: 18px;
    }

    /*  Sets background logo container to transparent */
    .shoppingCart
    {
        padding-right: 30px;
        background-color: transparent;        
    }

    /*  Sets background logo image specs */
    .shoppingCart img
    {
        height: 40px;
        background-color: transparent;
        border-radius: 10%;
        transition: 0.5s;
    }

    .shoppingCartBadge
    {
        position: absolute;
        background-color: red; /* Badge background color */
        color: white; /* Badge text color */
        border-radius: 50%; /* Makes it circular */
        text-align: center;        
        padding: 3px 5px 2.5px 4px; /* Adjust padding for size */
        font-size: 11px; /* Adjust font size */        
        z-index: 10; /* Ensures it appears above the icon */
    }

    /*  To brighten logo on cursor hover */
    .shoppingCart img:hover
    {
        filter: brightness(125%);
    }

/* Caption container over hero image  */
.captionText 
{
    border-radius: 25px;
    
    top: 20%;
    left: 10%;
    color: black;
    
    position: absolute;
    text-decoration: none;
}

    /* First heading specs  */
    .captionText h1
    {
        font-size: 24px;
        letter-spacing: 10px;
    }

    /* Second heading specs  */
    .captionText h2
    {
        font-size: 45px;
        font-weight: lighter;
        margin-bottom:  5px;
    }

    /* Link specs  */
    .captionText a
    {
        color: black;
        font-size: 15px;      
    }

    /* Increases link size on cursor hover */   
    .captionText a:hover
    {
        /*color: rgba(255, 190, 9, 0.75);*/
        font-size: 15.5px;
    }

/* Specs for right columns on Home page containing captioned image panels */ 
.leftColumn 
{
    display:inline-block;
    margin-right: 2.5%;    
    width: 39.8%;
}

/* Specs for left columns on Home page containing captioned image panels */ 
.rightColumn
{
    display:inline-block;    
    width: 39.8%;
    left: 60%;
    margin-left: 2.5%;
    margin-right: 7.5%;  
}

    /* General specs for both columns */ 
    .flexColumn 
    {
        flex-direction: column;
        position:relative;        
        color: white;
        margin-top: 100px;
        width: 100%;
        left: 17.5%;

    }

    /* General specs for images in the panels */ 
    .leftColumn img, .rightColumn img
    {
        vertical-align: bottom;
        width: 100%;
        height: 450px;
        transition: transform 0.75s ease;
    }

    /* Height specs for long image panels */ 
    .longItem img
    {   
        height: 1000px;
    }

    /* General specs for all panels */ 
    .longItem, .topShortItem, .bottomShortItem
    {
        position: relative;
    }

    /* Margin specs for top short panel, to create space from the bottom short panel */ 
    .bottomShortItem img
    {
        margin-top: 100px;
    }

    /* Image resizing and brightness specs for cursor hover over images*/ 
    .leftColumn img:hover, .rightColumn img:hover
    {        
        filter: brightness(75%);
        cursor: pointer;
    }

    /* Column caption container specs */
    .caption
    {   
        position: absolute;
        bottom: 50px;
        left: 10%;
        padding: 8px 12px;
        background-color: rgba(38, 48, 43, 0.5);
        color: ghostwhite;
        font-size: 12px;    
    }

    /* Caption resizing specs on cursor hover */
    .caption:hover
    {        
        cursor: pointer;
    }

    /* Specs for first heading */
     .caption h1
    {
        font-size: 15px;
        letter-spacing: 7.5px;
        margin-bottom:  20px;
    }

    /* Specs for second heading */
     .caption h2
    {
        font-size: 30px;
        font-weight: lighter;
    }

/* Specs for section line breaks */
hr
{
    margin-left: 7.5%;
    margin-top: 100px;
    margin-bottom: 100px;
    width: 85%;
    text-align: center;
}

/* Specs for call to action section on Home page */
.callToAction
{
    width: 85%;
    margin-left: 15%;    
    margin-top: 50px;
}

    /* Specs for heading and link */
    .callToAction h1, .callToAction h2
    { 
        width: 80%;
        color: ghostwhite;
    }

    /* Specs for heading */
     .callToAction h1
    {    
        font-size: 40px;
        letter-spacing: 5px;
        margin-bottom:  40px;
    }

    /* Specs for link */
    .callToAction h2
    {    
        font-weight: lighter;
        font-size: 25px;
        cursor: pointer;
        transition: 0.5s;    
    }

    /* Recolouring and size specs for link on mouse cursor hover */
    .callToAction h2:hover
    {
        font-size: 27px;
        color: cyan;
    }


/* Awards section specs */
.awards
{
    margin-left: 15%;
}

    /* Awards heading specs */
    .awards h1
    {
        color: white;
        margin-top:  10px;
        font-size: 20px;
        letter-spacing: 5px;
        margin-bottom:  75px;
    }

    /* Specs for column container containing each award, as displayed in list */
    .awardsFlexColumn
    {
        transition: ease 0.1s;
    }

    /* Specs for each award image */
    .awardsFlexColumn img
    {
        background-color: white;
        border-radius: 5px;
    }

    /* Specs for lists for each award, including image and details */
    .awards ul li
    {
        width: 20%;
        height: auto;
        margin: 0 20px;
        display: inline-block;
        position: relative;
        
    }

    /* Specs for list of details for each award */
    .awards h2
    {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 10px;
        letter-spacing: 5px;
    }


    .shoppingCartItems
    {
        flex-direction: column;
        position: relative;
        display:inline-block;
        width: 85%;
        left: 7.5%;
        margin-top:200px;    
        color: black;
    }

    .shoppingCartItems hr
    {
        margin:0px 0px 0px 150px;
        padding:0%;               
    }

    .shoppingCartItems h1
    {
        color: black;
    }
    .shoppingCartItems h2
    {
        margin-left: 150px;        
        font-size: 14px;
        color:red;
    }
    
    .shoppingCartItems h3
    {
        color: black
    }

    .shoppingCartItem
    {
        font: 10px;
        height: 10%;             
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
        color: black;
    }

    .shoppingCartItemsHeadings
    {
        font-weight:bold;
    }

    .shoppingCartItemName
    {
        margin-left:150px;
        width: 500px;
    }

    .shoppingCartItemSize
    {
        width: 200px;

    }
    .shoppingCartItemPrice
    {
        width: 200px;

    }

    .shoppingCartItemQuantity
    {
        width: 200px;
    }

        .shoppingCartItemRemove
    {
        width: 200px;
    }

    .shoppingCartItemQuantity input
    {
        width: 38px;
        text-align: left;
        padding-left: 28px;
    }

    .shoppingCartItems button
    {        
        margin-top: 10px;
        text-align: center;
        vertical-align: middle;
        background-color: rgba(255, 190, 9, 0.75);
        color: black;
        font-size: 14px;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;
        
    }

    .shoppingCartItemRemove button
    {        
        margin-bottom: 8px;
        width: 20px;
        text-align: center;
        vertical-align: middle;
        background-color:chocolate;
        color: black;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;        
    }    

    .shoppingCartItems button:hover
    {
     
        filter: brightness(125%);
        cursor: pointer;
    }

     .generalForm2
    {
        margin-top: 100px;
        margin-bottom: 100px;
        flex-direction: column;
        position: relative;
        display:inline-block;        
        background-color: none;        
    }

    .generalForm2 h1
    {        
        font-size: 20px;  
        margin-bottom: 0px;        
    }

    .generalForm2 input
    {
        width: 300px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px;
        text-align: center;
        font-size: 20px;          
    }

    .generalForm2 button
    {        
        margin-top: 15px;
        margin-bottom: 15px;
        text-align: center;
        vertical-align: middle;
        background-color: dodgerblue;
        color: black;
        font-size: 20px;  
        width: 80px;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;        
    }

    .generalForm2 button:hover
    {
        filter: brightness(125%);
        cursor: pointer;
    }

    .generalForm2 p
    {        
        font-size: 12px;    
        color: red;    
    }

    #resetPasswordMessage
    {
        font-size: 12px;    
        color: black;    
    }

    #myAccount p
    {
        color:black;
    }
    
    .generalForm2 a
    {        
        margin-top: 20px;
        font-size: 15px;
            
        margin: 10px;
        margin-top: 15px;
        width: 100%;
        text-decoration: underline;
        color: dodgerblue;
    }

    #learnButton a
    {
        font-size: 20px;
        color:black;
        text-decoration: none;    
    }

    .generalForm2 h3
    {
        color: red;
    }

    

/* Specs for mail-list sign-up section */
.mailList
{
    margin-left: 15%;
    width: 75%
}

    /* mail-list heading specs */
    .mailList h1
    {
        display: inline-block;
        margin-top:  10px;
        margin-bottom:  75px;
        margin-right: 20px;
        font-size: 20px;
        letter-spacing: 5px;
        color: white;
        
    }

    /* mail-list text-input box specs */
    .mailList input
    {
        display: inline-block;
        width:30%;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom:  75px;
        padding: 5px;
        font-size: 15px;        
        letter-spacing: 2px;
        color:#26302b;
        transition: 1s;
    }

    /* mail-list button specs */
    .mailList button
    {        
        position: relative;
        display: inline-block;
        background:none;
        border:none;
        width:auto;
        height: 27.5px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom:  75px;
        font-size: 15px;
        letter-spacing: 2px;
        color: white;
        transition: 1s;
    }

    /* mail-list color and resize specs on mouse cursor hover */
    .mailList button:hover
    {
        color: cyan;
        font-size: 15.5px;
        cursor: pointer;
    }

/* Spacer before footer specs */
.spacer
{
    position: relative;
    margin-top: 100px;    
}

/* Footer section specs */
.footer
{
    position: relative;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 25px;
    background-color:#26302b;
    text-align: center;    
}
    /* Links columns specs */
    .footer-flex-column
    {    

        position: relative;
        display: flex;
        display:inline-block;
        width: 30%;
    }

        .footer-flex-column ul
        {
            list-style-type: none;
        }

            /* Links column header specs */
            .footer-flex-column h1
            {
                margin-top: 25px;    
                font-size: 20px;
                letter-spacing: 5px;
                color:white;
            }

            /* Links specs */
            .footer-flex-column a
            {
                font-size: 12.5px;
                letter-spacing: 5px;
                color:white;
                text-decoration: none;    
                transition: 0.5s;
                margin-bottom: 10px;    
            }

            /* Link resize specs on mouse cursor hover */
            .footer-flex-column a:hover
            {
                filter: brightness(200%);
            }

    /* Social media container with all social media icons specs */
    .socialMediaContainer
    {
        width: 50px;
        height: 20px;
        margin-top: 25px;
        margin-left: 15%;

    }

    .socialMediaContainer a
    {
        position: relative;
        display: flex;
        display:inline-block;
    }

        /* Social media icon specs */
        .socialMediaIcon
        {
            height: 15px; 
            width: 15px; 
            
            margin-right: 10%;  
            transition: 0.5s;
        }        


    /* Copyright disclaimer specs */
    .copyrightDisclaimer h1
    {
        min-width: 30%;        
        margin-top: 75px;        
        color:white;
        font-size: 15px;
        letter-spacing: 5px;    
    }

/* Message specs - used at top of Services, Blog and Contact pages */
.message
{
    padding-top: 125px;
    padding-bottom: 100px;
    width: 70%;
    margin-left: 15%;    
    margin-top: 50px;
    transition:0.5s
}

    /* Heading specs for all headings */
    .message h1, .message h2, .message h3
    {
        color: black;
        background-color: transparent;
        text-decoration: none;
    }

    /* Heading specs for main heading */
    .message h1
    {    
        font-size: 15px;
        letter-spacing: 5px;
        margin-bottom:  20px;
    }

    /* Heading specs for second heading on Service and Blog pages */
    .message h2
    {
        font-size: 40px;
        font-weight: lighter;
    }

    /* Contact details text specs on Contact page */
    .message h3
    {
        font-size: 20px;
        font-weight:100;
    }

    #privacyPolicy, #terms
    {
        text-align: left;
    }

    #privacyPolicy p, #terms p
    {
        font-size:12px;
        color: black;
    }

    #privacyPolicy h1, #terms h1
    {
        text-align: left;
        font-size:18px;
        color: black;
    }

    #privacyPolicy h3, #terms h3
    {
        text-align: left;
        font-size:16px;
        font-weight: bold;
        color: black;
    }

    #copyrightPolicy
    {
        color: black;
    }

/* Contact form specs */
.contactForm
{
    padding-top: 100px;
    padding-bottom: 200px;
    width: 85%;
    margin-left: 15%;    
    margin-top: 15px;
    transition:0.5s
}

    /* Heading specs */
    .contactForm h1
    {
        font-size: 20px;
        letter-spacing: 5px;
        margin-bottom:  40px;
        font-size: 15px;
        color: ghostwhite;
        background-color: transparent;
        text-decoration: none;

    }

    /* E-mail field specs */
    .contactForm input
    {
        display: inline-block;
        width:70%;
        padding: 5px;
        margin-right: 10px;
        margin-bottom:  37.5px;
        font-size: 15px;        
        letter-spacing: 2px;
        color:#26302b;
        font-family: 'myFont';    
    }

    /* Message field specs */
    .contactForm textarea
    {
        display: inline-block;
        width: 70%;
        height: 200px;
        padding: 5px;
        margin-right: 10px;
        margin-bottom:  37.5px;
        font-size: 15px;        
        letter-spacing: 2px;
        color:#26302b;
        font-family: 'myFont';   
    }

    /* Send button specs */
    .contactForm button
    {
        position: relative;
        display: inline-block;
        top: 40px;
        background:none;
        border:none;
        width:auto;
        vertical-align: bottom;
        height: 27.5px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom:  75px;
        font-size: 15px;
        letter-spacing: 2px;
        color: white;
        transition: 1s;
    }

    /* Send button resize and re-colour specs on mouse-cursor hover */
    .contactForm button:hover
    {
        color: cyan;
        font-size: 15.5px;
        cursor: pointer;
    }


/* Two panel/column row specs used in Services, About and Blog pages */
.twoPanelRow
{
    flex-direction: column;
    position: relative;
    display:inline-block;
}

    .twoPanelRow button
    {
        background-color: dodgerblue;
        color: black;
        font-size: 15.5px;
        cursor: pointer;
        border-radius: 10px;
        border-style: none;
        padding: 10px 10px 10px 10px;
    }

    /* Left column panel specs */
    .leftColumnPanel
    {
        flex-direction: row;
        position: relative;
        display:inline-block; 
        margin-top: 100px;
        margin-right: 2.5%;    
        width: 60%;
        height: 400px;
        vertical-align: top;
        transition: 0.5s;
    }

    /* Right column panel specs */
    .rightColumnPanel
    {
        flex-direction: row;
        position: relative;
        display:inline-block;   
        margin-top: 100px;    
        width: 36%;
        height: 400px;
        transition: 0.5s;
        vertical-align: top;
    }

    /* Prevents text panels from appearing in left column and images appearing in right column by default */ 
    .column1Text, .column2Image
    {
        visibility: hidden;
    }

    /* Text panel specs */
    .textPanel
    {
        border-top: 1px solid grey;  
        transition: 0.25s;
    }

    /* Text panel main heading specs on Services and About page */
    .textPanel h1
    {
        letter-spacing: 5px;
        margin-top: 15px;
        margin-bottom: 15px;    
        font-size: 20px;
        color: black;
    }

    /* Text panel main heading for Blog page */
    .textPanel h2
    {
        margin-top: 15px;
        margin-bottom: 15px;    
        font-size: 25px;  
        color: black;
    }

    /* Text panel date heading specs for blog page */
    .textPanel h3
    {
        margin-top: 15px;
        margin-bottom: 15px;    
        font-size: 15px;
        font-style: italic;
        color:black;
        
    }

    /* Text panel paragraph specs */
    .textPanel p
    {
        color:black;
        font-size: 20px;
        line-height: 30px;
    }

    /* Image panel specs */
    .leftColumnPanel img, .rightColumnPanel img
    {
        width: 100%;
        height: 400px;
        transition: 0.5s;
        display:inline-block;   
        vertical-align: middle;
    }
    
    .leftColumnPanel select, .rightColumnPanel select
    {
        font-size: 14px;
        font-weight: bold;
        padding: 5px;
        margin: 15px;        
    }


    /* If arriving via a link to specific item (e.g. specific service) page appears a bit further scrolled up than default */
    .anchor
    { 
        position: absolute;
        transform: translateY(-13vh);      
    }

    /* Range select specs on Range page */

    .rangeButtons
    {
        padding-top: 100px; 
        text-align: center;
        vertical-align: middle;
    }

    #staffMenuButtons
    {
        background-color:dodgerblue;
        color: black;
        border-radius: 25px;
        font-size: 16px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 100px;
    }
        .button
        {
            padding-bottom: 5px;
            display:inline-block;   
            background-color:transparent;
            width: 80px;                        
        }

            .button button
            {
                padding: 10px;
                background-color: dodgerblue;
                color: black;
                font-size: 16px;
                cursor: pointer;
                border-radius: 10px;
                border-style: none;                
                
                /*padding: 10px 10px 10px 10px;*/
            }

            .button a
            {
                color: black;
            }

        #readers button, #tableStyle2Stages button, #tableStyle2Reading button, #tableStyle2Copying button, #tableStyle2Spelling button, #tableStyle2Checking button
        {
            border-radius: 10px;
            border-style:none;
            font-size: 16px;
            margin: 1px;
        }

        #tableStyle2Reading button
        {
            width: 80px;
        }

        #readers button:hover, #tableStyle2Stages button:hover, #tableStyle2Reading button:hover, #tableStyle2Copying button:hover, #tableStyle2Spelling button:hover, #tableStyle2Checking button:hover
        {
            filter: brightness(125%);
            cursor: pointer;
        }

        .rangeButtons button:hover
        {
            filter: brightness(125%);
            cursor: pointer;
        }

        #staffMenuButtons:hover
        {
            filter: brightness(125%);
        }

        .searchForm 
        {
            margin-top: 35px;            
            margin-bottom: 35px;            
            text-align: center;
            vertical-align: middle;
            color: black;
        }

        .searchForm select
        {
            margin-right: 10px;
            height: 20px;
        }

        .searchForm label
        {
            margin-right: 10px;
        }

        .searchForm input
        {
            margin-right: 10px;
            height: 20px;
        }

        .searchForm button
        {

            background-color: gold;
            color: black;
            height: 24px;
            padding: 2px;
            cursor: pointer;
            
        }

            .searchForm button:hover
            {             
                filter: brightness(125%);                
            }
       



    /* Page select spects on Range page */

    .pageSelect
    {
        text-align: center;
        vertical-align: middle;
    }

        .previousPage
        {
            display:inline-block;   
            background-color:transparent;
        }

        .previousPage button
        {
            font-size: 30px;
            color:  white;
            background-color:transparent;
            border-style:none;
            padding-right: 15px;
        }

        .nextPage
        {
            display:inline-block;   
            background-color:transparent;
        }

        .nextPage button
        {
            font-size: 30px;
            color: white;
            background-color:transparent;
            border-style:none;
            padding-left: 15px;
        }
    
        .pageSelect button:hover
        {            
            filter: brightness(125%);
            cursor: pointer;
        }

/* Slideshow container specs on About page - Adapted from www.w3schools.com 'How TO - slideshow' */
.slideshow-container 
{
  top: 15%;
  width: 100%;
  position: relative;
  margin: auto;
}

    /* Hides images by default */
    .mySlides 
    {
      display: none;
    }

    /* Slideshow fading animation specs */
    .fade 
    {
      animation-name: fade;
      animation-duration: 1.5s;
    }

    /* Sets opacity level range for fade animation */
    @keyframes fade 
    {
      from {opacity: .4}
      to {opacity: 1}
    }

/* History section specs on About page */
.history
{
    padding-top: 100px;
    padding-bottom: 100px;
    width: 55%;
    margin-left: 15%;    
    margin-top: 50px;
    transition: 0.5s;   
   
}

    /* Paragraph specs */
    .history p
    {
        color: ghostwhite;
        background-color: transparent;
        text-decoration: none;
        font-size: 20px;
        font-weight: lighter;
        transition: 0.12s;  
    }



h1
{
    color: black;
    font-size: 16px;
    text-align: center;
    background-color: white;
}

.footer h1
{
    background-color:#26302b
}

#tableStyle1 h1
{
    color: black;
    font-size: 16px;
    text-align: center;
}

.tableContainer, .textContainer
{    
    background-color: white;
    opacity: 0.8;    
    z-index: 100;        
    color: white;
    width: auto;
    
    position:relative;
    text-align: center;
}

.imageCentraliser
{
    width: 100%;
    text-align: center;

}

    .textContainer
    {
        overflow-y:auto;
    }

        #tableStyle2
        {
            visibility: visible;
            height: auto;
        }

        #tableStyle2 h1
        {
            color: black;
            font-size: 16px;
            text-align: center;
        }

        /* Table and text container heading / paragraph / content specs */
        .tableContainer p, .textContainer p, .tableContainer h1, .textContainer h1
        {
            padding-left: 20px;
            color: black;
        }

        /* General table specs */
        table
        {
            width: auto;
            width: 90%;
            left: 5%;
            border: 1px solid dodgerblue;
            color: black;
            position: relative;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #tableReaders, #tableStages, #tableSpelling, #tableCopying
        {
            border: none;         
        }

        #tableStyle2Spelling, #tableStyle2Copying, #tableStyle2Stages, #tableStyle2Readers
        {
            width: auto;
            width: 90%;
            left: 5%;
            border: 1px solid dodgerblue;
            color: black;
            position: relative;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #readers
        {
            width: auto;
            width: 90%;
            left: 5%;
            border: 1px solid dodgerblue;
            color: black;
            position: relative;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #tableStyle2Checking, #tableStyle2Reading
        {
            width: auto;
            width: 90%;
            left: 5%;
            border: 1px solid dodgerblue;
            color: black;
            position: relative;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #tableStory
        {
            border: none;
        }

        #toggleButtons
        {
            border: none;
        }

            /* Table heading specs */
            .tableHeading
            {                
                background-color: white;
                color: black;
            }

            /* Table row specs */
            tr
            {
                height: 25px;
            }

            /* Table heading for mobile */
            .tableHeadingMobile
            {                
                background-color: white;
                
                color: black;
            }
            #sentence1, #checkSentence1, #sentence2, #sentence3, #sentence4,  #sentence5,  #sentence6,  #sentence7,  #sentence8,  #sentence9,  #sentence10,
            #checkSentence2, #checkSentence3, #checkSentence4, #checkSentence5, #checkSentence6, #checkSentence7, #checkSentence8, #checkSentence9, #checkSentence10 
            {
                width: 60%;
            }
            #sentence1, #checkSentence1
            {
                font-weight: bolder;
                text-align: center;
            }

            #sentence2, #sentence3, #sentence4,  #sentence5,  #sentence6,  #sentence7,  #sentence8,  #sentence9,  #sentence10,
            #checkSentence2, #checkSentence3, #checkSentence4, #checkSentence5, #checkSentence6, #checkSentence7, #checkSentence8, #checkSentence9, #checkSentence10 
            {
                padding-left: 5%;
                font-weight: lighter;
                text-align: left;
            }

            h5
            {
                position: absolute;
                z-index: 100;
                color: black;
            }

            /* Table input specs */
            table input
            {                
                font-size: 20px;
                min-height: 40px;
                width: 200px !important;
                text-align: left;
                padding-left: 10px;                                
            }

            table #spellingAnswer1, #spellingAnswer2, #spellingAnswer3, #spellingAnswer4, #spellingAnswer5, #spellingAnswer6, #spellingAnswer7, #spellingAnswer8, #spellingAnswer9, #spellingAnswer10
            {
                background-color: lightsteelblue;
            }
            
            table .button
            {
                background-color: dodgerblue;
                color: black;                
                height: 40px;
                padding-left: 15px; 
                padding-right: 15px;
                padding: 2px;
            }

            #editButton
            {
                height: 20px;
            }

            table .button:hover
            {                
                filter: brightness(125%);
                
            }

            table #notCompleted
            {
                background-color: gray;
            }

            #storyTableCell
            {
                text-align: center;
            }
            
            
            .addButton
            {
                width: 100%;
                text-align: center;
            }
            .addButton button
            {
                margin-top: 15px;;
                padding:5px;
                border-radius:10px;
                background-color: red;
                color: black;
                border-style:none;   
                text-align:center;          
            }

            .addButton a
            {
                color: black;
            }

            .addButton button:hover
            {                
                filter: brightness(125%);
                
            }
            .addButton a:hover
            {             
                filter: brightness(125%);
                
            }
            
            #storyRow1Buttons, #storyRow2Buttons, #storyRow3Buttons, #storyRow4Buttons, #storyRow5Buttons, #storyRow6Buttons, #storyRow7Buttons, #storyRow8Buttons,  #storyRow9Buttons, #storyRow10Buttons
            {
                text-align: right;
                margin-right: 2.5%;
                padding-right: 2.5%;
            }

/* Form layout specs */
.formLayout 
{       
    margin: auto;
    margin-top: 60px;
    text-align: center;
    width: 40%;    
    color: black;
    padding: 8px 12px;
    text-decoration: none;
}

    /* Form heading specs  */
    .formLayout h1
    {
        color: black;
        font-size: 20px;
        letter-spacing: 10px;
        margin-bottom:  25px;
        text-align: center;
    }

    /* General form positioning specs e.g. for add and edit operations  */
    #generalForm
    {
        z-index: 500;
    }

    #generalForm button
    {
        background-color: gold;
        color: black;
        height: 24px;
        padding: 2px;
        cursor: pointer;        
    }

        .searchForm button:hover
        {            
            filter: brightness(125%);                
        }

    /* Registration form positioning specs e.g. for add and edit operations  */
    #regForm
    {
        top: 30%;
    }

    /* Login form positioning specs */
    #generalForm2
    {
        top: 50%;
    }

    #generalForm2 h6
    {
        margin-top:0px;
        color: black;
        font-size: 12px;
        margin-bottom: 2px;
    }

    .generalForm2 select
    {
        font-size: 16px;
        margin-bottom:10px;
        text-align: center;
        padding: 2.5px;
    }

    #cancelSubscription p
    {
        color: black;
        font-size: 16px;
        margin-bottom:10px;
        text-align: center;
        padding: 2.5px;
    }

    /* Span for displaying form processing messages e.g. processing error messages */ 
    .formLayout span
    {
        opacity: 0.9;
        background-color: white;        
        margin-bottom: 150px;
    }

    /* Form input and combo box specs */ 
    .formLayout input
    {
        border-style: solid;
        border-width:thin;
        display: inline-block;
        width:96.5%;
        margin-right: 10px;
        margin-bottom:  20px;
        padding: 5px;
        letter-spacing: 2px;
        color:#26302b;
    }

    .formLayout textarea
    {
        border-style: solid;
        border-width:thin;
        display: inline-block;
        width:96.5%;
        margin-right: 10px;
        margin-bottom:  20px;
        padding: 5px;
        letter-spacing: 2px;
        color:#26302b;
    }

    .formLayout select 
    {
        border-style: solid;
        border-width:thin;
        display: inline-block;
        width:100%;
        margin-right: 10px;
        margin-bottom:  20px;
        padding: 5px;
        letter-spacing: 2px;
        color:#26302b;
    }

    .formHeading
    {
        color:black;
    }


            .formLayout button
            {
                background-color: rgb(114, 100, 20);
                color: black;
            }

            .formLayout button
            {                
                filter: brightness(125%);
            }

    #editButton
    {
        text-align: center;
        
    }
    
            
#appContent, #tableStyle2Spelling, #tableStyle2Reading, #tableStyle2Stages, #spellingList
{
    display: none;

}

#modProgress
{
    width:auto;
    position: relative;
    display:inline-block;

}

#help
{    
    text-align: center;
    position: relative;
    width: 101%;

}

#help button
{
    text-align: left;
    width:10px;
    padding: 10px;
    padding-right: 18px;
    background-color:rgb(236, 236, 156);
    color: black;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
    border-style: none;                
    
    /*padding: 10px 10px 10px 10px;*/
}

#contactFormButton
{
    background-color: dodgerblue !important;
    color: black;
    font-size: 15.5px;
    cursor: pointer;
    border-radius: 10px;
    border-style: none;
    padding: 10px 10px 10px 10px;
}

#contactFormButton:hover
{
    filter: brightness(130%);
}

/* ------------ */

@media screen and (min-width: 1500px) 
{
    .leftColumnPanel
    {   
        width: 65%;
    }

    /* Right column panel specs */
    .rightColumnPanel
    { 
        width: 31%;
    }              
}

@media screen and (min-width: 1750px) 
{
    .leftColumnPanel
    {   
        width: 70%;
    }

    /* Right column panel specs */
    .rightColumnPanel
    { 
        width: 24%;
    }
}

#markSpelling
{
    margin-top: 5px;
    position: relative;
    display:inline-block;
}    

#tableStory tr
{
    height: 60px;
}

#storyImage, #checkStoryImage
{
    margin-top: -150px;
}

/* SPECS FOR NARROW SCREENS (EG. MOBILES) */
@media screen and (max-width: 1000px) 
{    

 .tableContainer, .textContainer
{
    overflow-y:unset;   
}

    .tableContainer td
    {
        margin: 0px;
        padding: 0px;        
    }

    #regularScreensOnly
    {
        display: none;        
        height: 0px;
    }

    #mobileScreensOnly
    {
        display: block;        
        height: 0px;
    }

    #mobileScreensOnly td
    {
        width: 50%
    }

    .leftColumnPanel
    {
        height: 100px;
    }

    .rightColumnPanel
    {
        height: 300px;
    }
     
    .rightColumnPanel img
    {
        margin-top: -40px;
        height:125%;
    }

    
    /* Hero video specs on Home page for narrower screens.  Widens image to prevent it being 'squished' and too short subsequently to function as a hero image */
    
    .shoppingCartItems
    {
        flex-direction: column;
        position: relative;
        display:inline-block;
        width: 95%;
        left: 2.5%;
        margin-top:200px;    
    }

    .shoppingCartItems hr
    {        
        padding:0%;               
    }

    .shoppingCartItems h2
    {        
        font-size: 14px;
        color:red;        
    }

    .shoppingCartItems h3
    {                
        margin-left: 175px;
        font-size: 14px;        
        font-weight:100;
        color: black;
    }
    
    .shoppingCartItems
    {                
        margin-left: -100px;          
    }    

    .shoppingCartItemsHeadings
    {
        font-weight:bold;
        
    }

    .shoppingCartItem
    {
        
        font: 10px;
        height: 10%;             
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
    }

    .shoppingCartItemName
    {        
        margin-right: 20px;        
    }

    .shoppingCartItemSize
    {
        margin-right: 20px;

    }
    .shoppingCartItemPrice
    {
        margin-right: 20px;

    }

    .shoppingCartItemQuantity
    {
        margin-right: 20px;
    }

    .shoppingCartItemQuantity input
    {
        width: 38px;
        text-align: left;
        padding-left: 28px;
    }

    .shoppingCartItems button
    {        

        margin-top: 10px;
        text-align: center;
        vertical-align: middle;
        background-color: rgba(255, 190, 9, 0.75);
        color: black;
        font-size: 14px;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;
        
    }

    .shoppingCartItemRemove button
    {        
        margin-bottom: 8px;
        width: 20px;
        text-align: center;
        vertical-align: middle;
        background-color:chocolate;
        color: black;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 12px;
        border-style: none;
        padding: 5px 5px 5px 5px;        
    }    

    .shoppingCartItems button:hover
    {
     
        filter: brightness(125%);
        cursor: pointer;
    }
    
    
    
    .heroVideo video
    {
        width: 250%;
        margin-left: -150%;
    }
    
    /* Logo specs for narrower screens */
    .logo img
    {
        width: 60px;
        height: auto;
        position: absolute;
        top: -5%;  
        height: 60px;  
        left: 2.5%;
    }
    
    #generalForm
    {
        width: 90%;
    }

    /* Displays mobile navigation menu button on narrower screens */    
    .mobileNavButton
    {
        visibility: visible;
        z-index: 100;
    }
    
    /* Mobile navigation menu specs on narrower screens */   
    #mobileNav    
    {
        top: 0;
        position: fixed;
        visibility: visible;
    }

    .shoppingCart
    {        
        margin-right: 65px;
        background-color: transparent;        
    }

    .shoppingCart img
    {
        margin-top: 6px;
        height: 25px;
    }

    .captionText
    {
        width: 75%
    }

    #login
    {
        text-align: center;
    }
       
    .heroPicture
    {        
        width:  100%;
        text-align: center;
        
    }
    /*  Sets hero video width */
    .heroPicture img
    {
        height: 800px;
    }

    .heroPicture img
    {
        height: 800px;
        
    }
    
    /* Mobile navigation overlay specs on narrower screens */      
    .overlay 
    {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgb(0,0,0);
      overflow-x: hidden;
      transition: 0.5s;
    }
    
        /* Close button specs */
        .overlay .closebtn 
        {
          position: absolute;
          top: 20px;
          right: 45px;
          font-size: 60px;
        }

        /* Links container specs */
        .overlayContent 
        {
          position: relative;
          top: 25%;
          width: 100%;
          text-align: center;
          margin-top: 30px;
        }

        /* Links specs */
        .overlay a 
        {
          padding: 8px;
          text-decoration: none;
          font-size: 36px;
          color: gold;
          display: block;
          transition: 0.3s;
        }

        /* Links color specs on mouse cursor hover */
        .overlay a:hover, .overlay a:focus 
        {
          color: #f1f1f1;
        }
    
    /* First heading specs hero video caption on Home page for narrower screens */
    .captionText h1
    {
        font-size: 18px;
        letter-spacing: 9px;
    }

    /* Second heading font-resize for hero video caption on Home page for narrower screens */
    .captionText h2
    {
        font-size: 30px;
    }

    /* Link font-resize for hero video caption on Home page for narrower screens */
    .captionText a
    {
        font-size: 15px;
    }
        
        /* Link font-resize for hero video caption on mouse cursor hover */
        .captionText a:hover
        {
         
            font-size: 12px;
        }  
    
    /* Left column width change on home page for narrower screens - columns will now be wider to ensure only one column can be displayed at a time - this prevents appearance of  two squished columns on mobile widths */
    .leftColumn 
    {
        width: 75%;
    }

    /* Right column width change on home page for narrower screens - columns will now be wider to ensure only one column can be displayed at a time - this prevents two squished columns on mobile widths */
    .rightColumn
    {
        width: 75%;
        margin-left: 0;
    }
    
    /* Individual award re-specs for narrower screens */
    .awards ul li
    {
        width: 85%;
        height: auto;
        margin-bottom: 50px;
    }
    
    /* Mail-list sign up input field respecs on Home page for narrower screens  */
    .mailList input
    {
        width:55%;      
    }

    /* Mail-list sign up button respecs on Home page for narrower screens  */
    .mailList button
    {
        width:20%;
    }
    
    /* Copyright disclaimer re-specs for narrower screens */
    .spacer
    {
        height: 5%;
    }

    /* Copyright disclaimer re-specs for narrower screens */
    .copyrightDisclaimer h1
    {
        margin-left: 10%; 
        width: 85%;   
        font-size: 10px;
    }

    /* Left column panel re-specs on Services, About, and Blog pages.  Columns will now be wider to ensure only one column can be displayed at a time - this prevents two squished columns on narrower screens */
    .leftColumnPanel
    {
        width: 98.8%;
        height: auto;
    }

    /* Right column panel re-specs on Services, About, and Blog pages.  Columns will now be wider to ensure only one column can be displayed at a time - this prevents two squished columns on narrower screens */
    .rightColumnPanel
    {
        width: 98.8%;
        height: 400px;
    }

        /* The below CSS ensure that on mobile screens, when scrolling, the items on the Blog page do not display as image -> text -> text -> image -> image etc., rather more consistently as text -> image -> text -> image -> text -> image etc.  */

        /* Makes visible any text in left column panels */
        .column1Text
        {
            display:block;
        }
    
        /* Hides any text in right column panels */
        .column2Text
        {
            display:none;
        }

        /* Makes visible any images in right column panels */
        .column2Image
        {
            display:block;
        }

        /* Hides any images in left column panels */
        .column1Image
        {
            display:none;
        }
    
    /* Slideshow container re-specs on About page for narrower screens - heightens the slideshow images so they can still display as hero images */
    .slideshow-container img
    {
        height: 350px;
    }   

    #line1SayButton button, #line2SayButton button, #line3SayButton button, #line4SayButton button, #line5SayButton button, #line6SayButton button, #line7SayButton button, #line8SayButton button, #line9SayButton button, #line10SayButton button,
    #line1CheckButton button, #line2CheckButton button, #line3CheckButton button, #line4CheckButton button, #line5CheckButton button, #line6CheckButton button, #line7CheckButton button, #line8CheckButton button, #line9CheckButton button, #line10CheckButton button
    {
        width: 70px;
    }

    @media screen and (max-width: 750px) 
    {      
       
        #product h1, #about h1
        {
            font-size: 16px;
        }

        #product p, #about p
        {
            font-size: 14px;
        }

        .leftColumnPanel
        {
            height: auto;
            margin-top: 50px;
        }

        .rightColumnPanel
        {
            height: 350px;
            margin-top: 50px;
        }
        
        .rightColumnPanel img
        {
           margin-top: 0px;
            
        }

        #line1SayButton, #line2SayButton, #line3SayButton, #line4SayButton, #line5SayButton, #line6SayButton, #line7SayButton, #line8SayButton, #line9SayButton, #line10SayButton
        {
            width: 35px  !important;
            margin-right:1px  !important;
        }

        #line1ReadButton, #line2ReadButton, #line3ReadButton, #line4ReadButton, #line5ReadButton, #line6ReadButton, #line7ReadButton, #line8ReadButton, #line9ReadButton, #line10ReadButton,
        #line1CheckButton, #line2CheckButton, #line3CheckButton, #line4CheckButton, #line5CheckButton, #line6CheckButton, #line7CheckButton, #line8CheckButton, #line9CheckButton, #line10CheckButton
        {
            width: 35px  !important;
            margin-right:1px  !important;
        }

        #spellingAnswer1, #spellingAnswer2, #spellingAnswer3, #spellingAnswer4, #spellingAnswer5, #spellingAnswer6, #spellingAnswer7, #spellingAnswer8, #spellingAnswer9, #spellingAnswer10
        {
            width: 75px !important;
        }

        #wordAttempt1, #wordAttempt2, #wordAttempt3, #wordAttempt4, #wordAttempt5, #wordAttempt6, #wordAttempt7, #wordAttempt8, #wordAttempt9, #wordAttempt10
        {
            width: 75px !important;
        }

        #copyWord1, #copyWord2, #copyWord3, #copyWord4, #copyWord5, #copyWord6, #copyWord7, #copyWord8, #copyWord9, #copyWord10
        {
            width: 100px !important;
        }

        #copyAttempt1, #copyAttempt2, #copyAttempt3, #copyAttempt4, #copyAttempt5, #copyAttempt6, #copyAttempt7, #copyAttempt8, #copyAttempt9, #copyAttempt10
        {
            width: 100px !important;
        }

        #spellingWord1, #spellingWord2, #spellingWord3,  #spellingWord4,  #spellingWord5,  #spellingWord6,  #spellingWord7,  #spellingWord8,  #spellingWord9,  #spellingWord10,
        #spellingSentence1, #spellingSentence2, #spellingSentence3,  #spellingSentence4,  #spellingSentence5,  #spellingSentence6,  #spellingSentence7,  #spellingSentence8, #spellingSentence9,  #spellingSentence10
        {
            width: 25px !important;
        }
    }

    @media screen and (max-width: 550px) 
    {
        #storyImage, #checkStoryImage
        {
            width: 275px;
        }
    }

    @media screen and (max-width: 400px) 
    {
      

        #spellingAnswer1, #spellingAnswer2, #spellingAnswer3, #spellingAnswer4, #spellingAnswer5, #spellingAnswer6, #spellingAnswer7, #spellingAnswer8, #spellingAnswer9, #spellingAnswer10
        {
            width: 65px !important;
        }

        #wordAttempt1, #wordAttempt2, #wordAttempt3, #wordAttempt4, #wordAttempt5, #wordAttempt6, #wordAttempt7, #wordAttempt8, #wordAttempt9, #wordAttempt10
        {
            width: 65px !important;
        }

        #copyWord1, #copyWord2, #copyWord3, #copyWord4, #copyWord5, #copyWord6, #copyWord7, #copyWord8, #copyWord9, #copyWord10
        {
            width: 65px !important;
        }

        #copyAttempt1, #copyAttempt2, #copyAttempt3, #copyAttempt4, #copyAttempt5, #copyAttempt6, #copyAttempt7, #copyAttempt8, #copyAttempt9, #copyAttempt10
        {
            width: 65px !important;
        }

    }  

        @media screen and (orientation: portrait) 
    {
        /* Links specs */

        .footer-flex-column h1
        {    
            font-size: 16px;
        }

        .footer-flex-column a
        {    
            font-size: 10px;
        }

        #aboutTextPanel p
        {
            font-size: 16px;
        }
    }

}