/* potentially redundent scripts are in backStockCss.css in the CSS root folder */
/* media query at the bottom for samaller screens
 *
 * CV VERSION
 *
 * */

    @import url("clearCss.css");
    @import "tab.css";
     @import "businessConcept.css";


    #fullpage {

        width: 100%;

        max-width: 100%;
        border: 1px solid white;
        margin: auto;
        box-sizing: border-box;
        padding: 0% 12%;
        background-color:deepskyblue;
        color: navy;
        font: 12px/16px ubuntu, verdana,arial, times;
        line-height: 18pt;
    }



     body {

       /* #fullpage does these settings */






    }

    *, *:before, *:after {

        box-sizing: inherit;
    }

/* CSS Document imported above, initialises all style settings */


/* THIS IS DEFAULT  media queries at the bottom settings for different page concepts in seperate folders */



/* --------------put test settings down here ---------------------- */

    #soundOn {

        display:none;

    }

    #soundOff {

        display:inline;

    }

/* --------------put test settings up here ---------------------- */



    header {

    /* margin: auto; */
        margin-top:3px;
        width: 100%;
        text-align: center;
        border:3px solid SteelBlue;
        height:auto;


        opacity: 1.00; /* set this - gives the tweek needed for the text to show strong against the picture below */


    }


    header a {

        display: inline-block;

    }

    header a img {


        height: 33px;
        width: 180px;
        padding: 3px 3px;
        float: left;
        opacity: 0.8;

    }

    header a img:hover {

        height: 70px;
        width: 280px;
        opacity: 1.0;
        text-decoration: none;
        color: snow;

    }

    header a img:visited {

        height: 70px;
        width: 280px;

        text-decoration: none;
        color: snow;
        opacity: 1.0;

    }


    header h2 {

        padding: 4px 8px;
        font-size: 1.2em;
        color: firebrick;
        text-align: center;
        margin-left: 10px;

    }


    div {


        width: auto;


    }


    h1, h2 , h3 {

        font-weight: bold;
        margin: 2px 0;
        padding: 4px;


    }

    h1 {

         font-size: 1.6em;


    }

    h2 {

        font-size: 1.4em;

    }

    h3 {

        font-size: 1.2em;

    }

    a:link {

         text-decoration: none;

    }

    a:hover {

        font-size: 1.3em;
        font-weight: bold;
        color:snow;

        }

    a:visited {

        font-size: 1.3em;
        font-weight: bold;
        color:snow;
        text-decoration: none;

        }

    #workDataContainer button {

        display: inline-block;
        background-color: lightgray;
        color: black;
        padding: 8px ;
        margin: 2px;
        width: 100%;
        border: 1px solid white;
        border-radius: 25px;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 12px;

    }


    p {

        font-size: 1em;
        margin: 5px;
        padding: 5px;
        border-width: 3px;
        width: 100%;
    }


    ul {

        padding-left: 1px;
        margin: 0;

    }

    li {

        margin-left: 1px;
        padding-left: 4px;
        font-size: 1em;

    }







    form h3 {

        padding-bottom: 10px;

    }

    input {

        margin:10px 5px;

    }

    footer {

        width: auto;
        margin-bottom: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: black;
        text-align: center;
        clear: left;


    }

/* CLASSES ================================================================================================ */




    .inlineH {

        display:inline;
    }


    .indented_ul {

        list-style-position: inside;

            /* float: left;*/

        width: auto;
        border: 2px solid transparent;
        margin-right: 3%;
        font-size: 1.4em;
        padding: 5px;


    }

    ul.indented_li {

        padding-left: 8px;
        list-style-position: outside;
        width:auto;

    }


    .divFloatLeft {

        width: 28%;
        float: left;
        margin: 2px 2px;
        border-width: 1px;
        border-style: solid;
        border-color: black;
        padding: 4px;
        height:auto;

    }


    .divClearLeft {

        clear: left;

    }

    .divClearBoth {

        clear:both;

    }

/* Style the close button */

    .topright {

        float: right;
        cursor: pointer;
        font-size: 28px;

    }

    .topright:hover {

        color: firebrick;

    }


/* CLASSES FOR BACKGROUND IMAGE WATERMARK */

    .hTransparentImage   {

        width:100%;

        height:auto;

        background:url("images/MoonBack.png");

        background-repeat:no-repeat;

        background-position:center;
        background-size:cover;

        border:2px solid;

        border-color:white;



    }

    .cvBackgroundImage   {

        width:100%;

        height:auto;

        background:url("images/cvBackground.jpg");

        background-repeat:no-repeat;

        background-position:center;
        background-size:cover;

        border:2px solid;

        border-color:white;

        opacity: 0.60; /* set this - gives the tweek needed for the text to show strong against the picture below */

    }




    .transparentImage   {

        width:100%;

        height:auto;

        background:url("../CSS/images/rainbow_zebra.png");

        background-repeat:no-repeat;

        background-position:center;
        background-size:cover;

    }



/* other classes ================================== */







    .webLink:link {

        color:Black;

    }

    .webLink:visited {

        color:tomato;
    }

    .bulletpoint {

        list-style-type: circle;
    }


 @media only screen and (max-width: 1000px) { /* settings for slightly smaller screens */


    #fullpage {

        max-width: 99%;
        border: 1px solid white;

    }


    header {

        display: none;

        }


   p {

        font-size: 0.9em;
        color: navy;
        margin: 1px;

        padding: 1px;
        border-width: 1px;
        width: 100%;

    }

    .hTransparentImage   {

        width:100%;

        height:auto;

        background:url("images/MoonBack.png");

        background-repeat:no-repeat;

        background-position:center;
        background-size:cover;

 /* border:2px solid; */

        border-color:white;

    }




}

/* Above is for max-width 700px =================================================== */

 @media only screen and (max-width: 700px) { /* settings for smaller screens */





















/*
closing brace below for the media query */

} /* !!!!!!!!!!! */