/* basic body html set up */

        body {
            background: unset;
            background-color: hsl(0, 0%, 90%);
            padding: 0;
            margin: 0;
        }

/* setup up the expanding background */
        
        div.main-background {
            /*min-height: 100vh;*/

            height: 720px;
            background-repeat: no-repeat;
            background-image: url('images/who-care-block.png');
            background-image: url('images/who-care-block-wide.bmp');
            
        }

        div.main-background {
            /*
            background-size: 400px 500px;
            background-size: 100% auto;
            */
                        
            background-image: url('images/other/christopher-gower-m_HRfLhgABo-unsplash-wide-3.jpg');
            
            background-image: url('images/other/who-care-block-test-space-lines.png');
            background-image: url('images/who-care-block-wide.bmp');

            /* previous */
            /*
                background-position:center;
                border: 1px solid black;
                background-size: auto 100%;
            */

                background-position:center;
                border: 1px solid black;
                background-size: 100% 64px;

            
        }


/* mobile */

nav ul li a {
    font-size: 12pt;
}

/* /mobile */


/* desktop and larger */

@media only screen and (min-width: 680px) { 

    /* 630px seems min cut off point but 680 works nicely */
    /*
    nav ul li a {
        font-size: 20pt;
    }

    nav ul li a {
        font-size: 14pt;
    }
    */


}




/* mobile */

div.main-background {
    
        background-image: url('images/default-header/default-header-block-1.png');
        height: 64px;
}

nav ul li a {
    font-size: 12pt;
}

/* /mobile */



/* test for other pages */
@media only screen and (min-width: 620px) {

    div.main-background {
        background-image: url('images/default-header/default-header-block-1.png');
        height: 64px;
    }

    nav ul li a {
        font-size: 14pt;
    }
}
/* /test for other pages */



div.main-background {
    border: none;
}


/* setup up the expanding background */



/* set up the content colours */

        div.content {
            color: hsl(0, 0%, 10%);
            background-color: hsl(0, 0%, 90%);
        }

/* set up the content colours */

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

/* the new :) */

body {
    font-family: 'Franklin Gothic Medium', Tahoma, sans-serif;
}


div.nav-holder-desktop {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 10px;
    right: 25px;
}

nav.top-nav {

}



nav {

    display: flex;

}

nav ul {

    list-style: none;

}

nav ul li {
    list-style-type:none;
    display: inline-block;
    padding-left: 1.5em;
}



nav ul li a {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
}







nav ul li a.secondary {
    /*
    color: hsl(81, 100%, 50%);
    color: hsl(188, 100%, 59%);
    color: hsl(188, 100%, 43%);
        */
}

nav ul li a:hover {

    transition-duration: 0.2s;

    /*
    color: hsl(200, 50%, 100%);
    */
    color: hsl(81, 100%, 50%); /* lime secondary */
    color: hsl(173, 100%, 75%); /* turqoise */
    color: hsl(188, 100%, 59%);
    color: hsl(188, 100%, 43%);

        color: hsl(188, 80%, 40%);

        color: hsl(188, 50%, 50%);

}

/* other branding lime */

/*   looks like hsl(81, 100%, 50%);   */




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

/*
nav.home-top {

    position: absolute;

    right: 20px;
    top: 8px;

    
}

nav.home-top a {
    text-decoration: none;
    font-family: Tahoma;
}
*/

/* ----------------------- main content container ------------------------------  */


div.default-content-container {
            padding: 0em 0.5em;
            margin: 0 auto;
            max-width: 940px;
}



/* ----------------------- /main content container ------------------------------  */

br.clear-left {
    clear: left;
    line-height: 0;
}