/*======================================================================*/
/* MICHAEL JONES                                                           */
/*======================================================================*/
HTML
    {
    background: #F3F3F3;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
    }


BODY
    {
    box-sizing: border-box;
    max-width: 1200px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0;
    color: black;
    background: white;
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 ) ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    }


:FOCUS
    {
    outline: 0;
    }

.smaller
    {
    font-size: smaller;
    }

 .small
    {
    font-size: small;
    }

 /* ============================================================ */
/* MAIN BODY OF PAGE                                            */
/* ============================================================ */
MAIN
    {
    display: block;
    padding: 16px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 28px;
    }

H1
    {
    font-family: Candara;
    line-height: normal;
    margin-top: 0;
    padding-top: 0;
    }

H2

{
    color:#37a0d1;
}

 /* ============================================================ */
/* PAGE HEADER                                                  */
/* ============================================================ */
HEADER
    {
    display: block;
    position: relative;
    overflow: hidden;
    background: black;
   padding-bottom:18px;
    padding-right:16px;
    padding-top:8px;
    }

HEADER IMG.logo
    {
    display: block;
    float: right;
    position: relative;
    z-index: 2;
    height: 108px;
    border: 0;
    }

HEADER DIV.topwording
    {
    padding: 8px 0 8px 16px;
    font-size: 28pt;
    font-weight: bold;
    letter-spacing: 1px;
    color:white;
    }

HEADER DIV.strapline
    {
    padding: 0 0 0 16px;
    color: #e0ff00;
    font-size: 16pt;
    font-weight: bold;
    }

@media screen and ( max-width: 640px )
    {
    HEADER IMG.logo
        {
        width: 64px;
        height: 64px;
        #border-radius: 32px;
        }

    HEADER DIV.topwording
        {
        letter-spacing: 0;
        font-size: 16pt;
        }

    HEADER DIV.strapline
        {
        font-size: 11pt;
        }
    }

@media screen and ( max-width: 400px )
    {
    HEADER DIV.strapline
        {
        display: none;
        }
    }

/* ============================================================ */
/* TWO-PART LAYOUT                                              */
/* ============================================================ */
DIV.twopart
    {
    display: table;
    table-layout: fixed;
    width: 100%;
    }

DIV.twopart DIV.mainbar
    {
    display: table-cell;
    vertical-align: top;
    width: 64%;
    padding: 0 16px 16px 16px;
    }

DIV.twopart DIV.sidebar
    {
    display: table-cell;
    vertical-align: top;
    width: 36%;
    padding: 0 0 16px 0 ;
    background:#D5D5D5;
    font-size:small;
    }


DIV.twopart DIV.sidebar IMG
    {
    display: block;
    width: 100%;
    }

DIV.twopart DIV.sidebartext
{
    padding:0 16px 0 16px;
}

@media screen and ( max-width: 720px )
    {
    DIV.twopart, DIV.twopart DIV.mainbar, DIV.twopart DIV.sidebar
        {
        display: block;
        width: auto;
        padding: 0 0 32px 0;
        border: 0;
        margin: 0;
        }


    }
/* ============================================================ */
/* FOOTER                                                       */
/* ============================================================ */
FOOTER
    {
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    position: sticky;
    min-height: 6vh;
    top: 94vh;
    padding: 2vh 16px;
    background:#C3C3C3;
    }

footer img
{
display:block;
float:right;
position: relative;
padding:32px;
}