/* 

================================================================ 

J D Nellor for International Director

July, 2023

Standard colors (rgb):
    LCI gold: 235, 183, 0 or ebb700
    LCI blue: 0, 51, 141 or 00338d
    light blue 64 124 202 or 4077cca
    LCI gray: 85, 86, 90 or 55565a
    LCI cool gray:  179, 178, 177 or b3bb2b1
    LCI red: 255, 92, 53 or ff5b35
    LCI purple: 122, 38, 130 or 7a2582
    LCI green:  0, 172, 105 0r 00ab68

Standard typeface:
    Helvetica Nue
    Adobe Caslon

Screen sizes:
    1200px/13 = 92.3 em
    1140/13 = 87.69 em
    1024px/13 = 78.8 em
    960px/13 = 73.84 em
    800px/13 = 61.5 em
    768 px/13 = 59.079 em

J. D. Nellor

================================================================ 

*/


/* FONT CALLS */

    @font-face {
        font-family: "News Gothic";
        src: url(../fonts/NewsGothicStd.otf) format("opentype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "News Gothic";
        src: url(../fonts/NewsGothicStd-Bold.otf) format("opentype");
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: "News Gothic";
        src: url(../fonts/NewsGothicStd-Oblique.otf) format("opentype");
        font-weight: normal;
        font-style: oblique;
    }

    @font-face {
        font-family: "News Gothic";
        src: url(../fonts/NewsGothicStd-BoldOblique.otf) format("opentype");
        font-weight: bold;
        font-style: oblique;
    }




    @font-face {
        font-family: "Argesta";
        src: url(../fonts/Argesta-Text.otf) format("opentype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Argesta";
        src: url(../fonts/Argesta-Text-Bold.otf) format("opentype");
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: "Argesta";
        src: url(../fonts/Argesta-Text-Italic.otf) format("opentype");
        font-weight: normal;
        font-style: italic;
    }




/*    @font-face {
        font-family: "Americana";
        src: url(../fonts/Americans-BT-Roman.ttf) format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Americana";
        src: url(../fonts/Americana-BT-Bold.ttf) format("truetype");
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: "Americana";
        src: url(../fonts/Americana-BT-Italic.ttf) format("truetype");
        font-weight: normal;
        font-style: italic;
    }
*/



/*    @font-face {
        font-family: "Bernhard";
        src: url(../fonts/BernhardModernStd-Roman.otf) format("opentype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Bernhard";
        src: url(../fonts/BernhardModernStd-Bold.otf) format("opentype");
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: "Berhnard";
        src: url(../fonts/BernhardModernStd-Italic.otf) format("opentype");
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: "Bernhard";
        src: url(../fonts/BernhardModernStd-BoldIt.otf) format("opentype");
        font-weight: bold;
        font-style: italic;
    }
*/



/*    @font-face {
        font-family: "Broadsheet";
        src: url(../fonts/Broadsheet-LDO.ttf) format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Broadsheet";
        src: url(../fonts/Broadsheet-LDO-Bold.ttf) format("truetype");
        font-weight: boldtruetype
        font-style: normal;
    }

    @font-face {
        font-family: "Broadsheet";
        src: url(../fonts/Broadsheet-LDO-Italic.ttf) format("trutype");
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: "Broadsheet";
        src: url(../fonts/Broadsheet-LDO-Bold-Italic.ttf) format("truetype");
        font-weight: bold;
        font-style: italic;
    }
*/



/*    @font-face {
        font-family: "Cambria";
        src: url(../fonts/Cambria.ttf) format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Cambria";
        src: url(../fonts/Cambria-Bold.ttf) format("truetype");
        font-weight: bold
        font-style: normal;
    }

    @font-face {
        font-family: "Cambria";
        src: url(../fonts/Cambria-Italic.ttf) format("trutype");
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: "Cambria";
        src: url(../fonts/Cambria-Bold-Italic.ttf) format("truetype");
        font-weight: bold;
        font-style: italic;
    }
*/




/*    @font-face {
        font-family: "Calibri";
        src: url(../fonts/Calibri.ttf) format("truetype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Calibri";
        src: url(../fonts/Calibri-Bold.ttf) format("truetype");
        font-weight: bold
        font-style: normal;
    }

    @font-face {
        font-family: "Calibri";
        src: url(../fonts/Calibri-Italic.ttf) format("trutype");
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: "Calibri";
        src: url(../fonts/Cambria-Bold-Italic.ttf) format("truetype");
        font-weight: bold;
        font-style: italic;
    }*/









/* BASIC PAGE SETUP */

    html {
        box-sizing: border-box;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

    body { 
/*        font-family: "News Gothic", "Helvetica Nue", Helvetica, Arial, Verdana, sans-serif;*/
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 1em;
        color: #000;
        margin: 0 auto;
        /* margin: 20px 30px; */ /* Eliminated this and put padding on wrapper to make border around page and get rid of right margin crowding on iPad */
        padding: 0 16px; /* Do I need this */
        width: 80em; /* Set this to % to make fluid */
    }

    article,aside,details,figcaption,figure,
    footer,header,menu,nav,section { 
        display: block;
    }


/* GROUPS */

    .group:before,
    .group:after {
        content: "";
        display: table;
    } /* For clearfix */

    .group:after {
        clear:both;
        } /* For clearfix */


/* COLUMNS */

    .col {
        display: block;
        float:left;
        margin: 1.6% 0 0 1.6%;
        } /* for the grids to work */

    .col:first-child {
        margin-left: 0; 
        } /* for the grids to work */

    .two-column {
        column-count: 2;
        column-width: 50%;
        margin-bottom: 1rem;
    }


/* CONTAINERS */

    header {
        position: relative; /* So I can position elements in and relative to the header */
/*        background-color: rgba(98, 37, 103, 1); /* Some color if image fails */
        overflow: auto; /* Makes the header fill to the elements it contains */
        margin: 0 0 0 0;
        }

     #masthead {
        position: relative;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .top-left {
        position: absolute;
        top: 18px;
        left: 18px;
        z-index: 999;        
    }

    /*.bottom-left {
        position: absolute;
        bottom: 40%;
        left: 6%;
        width: 40%;
        background-color: rgba(0, 0, 0, .4);
        padding: 24px 48px;
        z-index: 994;
    }*/

    .top-centered {
        position: absolute;
        top: 6%;
        left: 50%;
/*        transform: translate(-50%, -5%);*/
        translate: -50% -6%;
        width: 98%;
        z-index: 995;
    }

    .bottom-centered {
        position: absolute;
        bottom: 3%;
        left: 50%;
/*        transform: translate(-50%, -10%);*/
        translate: -50% -3%;
        width: 100%;
        z-index: 998;
    }

    /*.top-right {
        position: absolute;
        top: 13%;
        right: 18px;
        width: 33%;
        background-color: rgba(0, 0, 0, .2);
        padding: 24px;
        z-index: 997;
    }*/

    /*.bottom-right {
        position: absolute;
        bottom: 6%;
        right: 18px;
        width: 40%;
        background-color: rgba(0, 0, 0, .4);
        padding: 24px 48px;
        z-index: 996;
    }*/

    blockquote {
        margin:  10px 0 0 0;
        padding: 16px 24px;
/*        border: 1px solid rgba(85, 86, 90, 1); */
        border: 1px solid rgba(255, 0, 0, 1); 
/*        border: 1px solid rgba(0, 172, 105, 1.0);*/
        border-radius: 4px;      
    }

    blockquote p {
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
/*        color: rgba(85, 86, 90, 1);*/
        color: rgba(255, 0, 0, 1);
/*        color: rgba(0, 172, 105, 1);*/
/*        color: rgba(122, 38, 130, 1);*/
        line-height: 1.7rem;
        margin: 0;
        text-indent: 1rem;
        font-size:120%;
        hyphens: none;         
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
    }

    .indent {
        margin-left: 3rem;
    }

    abbr{
        cursor: pointer;
/*        border-bottom: 1px dotted;*/
    }

    /*blockquote abbr {
        font-size: 80%;
    }*/

    .sidebar {
        margin: 32px auto;
        border: 1px solid rgba(14, 63, 121, 1);
        }

    .snippets {
        margin: 32px auto;
        padding-bottom: 16px;
        background-image: linear-gradient(to bottom right, rgba(179, 178, 177, .1), rgba(85, 86, 90, .1));
        border-top: 6px solid rgba(85, 86, 90, 1);
        border-radius: 4px;
    }

    footer {
        text-align: center;
        margin: 1em 0 0 0;
        border-top: 3px solid rgba(85, 86, 90, .3);
    }

    #masthead-video {
        width: 78em; /* width of body minus body padding ?? seems to be same as 100% */
        height: auto;
        object-fit: contain;
        /*position: relative;*/
        /*left: 0;*/
        /*right:  0;*/
        /*top:  0;*/
        /*bottom:  0;*/
        background-color: rgba(222, 226, 207, .3);
    }

    .box {
        font-size: 1.2rem;
        width: 40rem;
        float: left;
        border: 1px solid rgba(85, 86, 90, .3);
        /*background-color: rgba(179, 178, 177, .1);*/
        margin: 12px 24px 6px -17rem;
        padding: 16px 24px 24px 36px;
        line-height: 1.7em;
    }

    img[alt="exclamation point"] {
        float: left;
        width: 42px;
        margin-right: 24px;
    }

    figure {
        margin: 24px 0;
        padding: 18px;
         border: 1px solid rgba(85, 86, 90, .1); 
        /* border: 1px solid rgba(235, 183, 0, 1.0); */
        background-color: rgba(179, 178, 177, .1);
        /*background-color: rgba(235, 183, 0, .1);*/
    }

    figure.half {
        width: 50%;
        float: left;
        margin: 6px 24px 12px 0;
    } /* THIS IS FOR THE SLIDE SHOW FIGURE ON THE CONTACT PAGE */
    
    figcaption {
        /*font-size: .9rem;*/
        /*font-weight: 400;*/
        color: rgba(0, 51, 141, 1); /*rgba(85, 86, 90, 1) */
        text-align: center;
        margin-top: 8px;
    }



/* HEADINGS */

    h1,
    h2 {
        font-family: "News Gothic", "Helvetica Nue", Helvetica, Arial, Verdana, sans-serif;
        color: rgba(255, 255, 255, 1);
        font-weight: 600;
        /*text-align: center;*/
    }

    h1 {
        font-size: 780%;
        margin: 0;
    }

    h1.title {
        font-size: 240%;
        margin: 60px 0 28px 0;
        text-transform: uppercase;
    }

    h2 {
        font-size: 480%;
        margin: 8px 0 0 0;           
    }

    h3 { 
        font-family: "Times New Roman", Times, serif;
        font-size: 1.7rem;
        font-style: italic;
        font-weight: 400;
        color:  /*rgba(14, 63, 121, 1)*/ rgba(85, 86, 90, .8) /* (0, 77, 153, 1) */;
        text-align: left;
        margin: 0; /* Why do I need this? */
        border-bottom: 6px solid rgba(255, 0, 0, 1);
        display: inline-block; /* keeps the underline the length of the text */
        line-height: 3rem; /* adds space between text and underline */
    }

    h4 { 
        font-size: 3rem;
        font-weight: 600;
        margin: 16px 0 16px 0;
        text-transform: capitalize;
        }

    h5 {
        font-size: .9em;
        margin: 0;
        }

    .sidebar h5 {
        text-transform: uppercase;
        padding: 12px 0;
        text-align: center;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 1);
        background-color: rgba(14, 63, 121, 1);
    }

    .snippets h5 {
        margin: 1em 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(0, 0, 0, .2);
        color: rgba(14, 63, 121, 1);
    }

    .snippets h5:first-of-type {
        border-top: none;
    }

    h6 {
        font-size: 1.7rem;
        font-weight: 600;
/*        letter-spacing: .3px;*/
        margin: 1rem 0;
        text-transform: uppercase;
        color: rgba(14, 63, 121, 1);
    }


/* BASIC TYPOGRAPHY */

    p,
    /*ol,
    ul,*/
    dl,
    address { 
        margin-bottom: 1rem; 
        font-size: 1.2rem;
        line-height: 1.8rem;
        font-weight: 400;
        hyphens: auto;  
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto; /* Automatic hyphens not supported in Chrome */
    }

    p.right {
        text-align: right;
    }

    #masthead p {
        color: rgba(255, 255, 255, 1.0);
    }


    .sidebar p,
    .snippets p,
     {
        margin: 1em 16px;
        line-height: 1.4em;
    }

    .sidebar p {
        font-size: 1rem;
        color: rgba(14, 63, 121, 1) /*(85, 86, 90, .8)*/;
    }

    .snippets p {
        font-size: .9rem;
        color:rgba(14, 63, 121, 1);
    }

    footer p {
        font-family: "News Gothic", "Helvetica Nue", Helvetica, Arial, Verdana, sans-serif;
        font-size: .8rem;
        text-align: center;
        line-height: 1rem;
        margin: 0 0 2rem 0;
    }

    b,
    strong { 
        font-weight: 700; 
    }

    em {
        font-style: normal;
        font-weight: 600;
        text-transform: capitalize;
    }


    small { 
        font-size: .5rem; /* 16/16 = 1 */ 
    }

    sub, 
    sup { 
        font-size: 50%; 
        line-height: 0; 
        position: relative; 
        vertical-align: baseline; 
    }

    sup { 
        top: -.5rem; 
    }

    sub { 
        bottom: -.25rem; 
    }


/* CONTACT LIST */

    ul.contactlist {
        list-style-type: none;
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin: 1rem 0 0 2rem;
        padding: 0;
        text-align: center;
    }

    ul.contactlist ul {
        list-style-type: none;
        margin: 0 0 1rem 1rem;
        padding: 0 1rem;
    }


/* THE RESUME PAGE LIST */

    ul.resume {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin: 1rem 0 0 1rem;
    }

    ul.resume li {
        list-style-type: square;
        margin: 1rem 0 0 0;
    }



/* THE WHAT PAGE LIST */

    ul.default {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin: 1rem 0 0 1rem;
    }

    ul.default li {
        list-style-type: square;
        margin: 1rem 0 0 0;
    }


    ul.bullet {
        list-style-type: square;
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin: 1rem 0 0 1rem;
    }

    ul.bullet li {
        list-style-type: square;
        margin: 1rem 0 0 0;
    }



/* THESE ARE FOR EXPANDABLE DETAIL LISTS */

    summary {
        font-size: 1.2rem;
        font-weight: 400;
        color: rgba(85, 86, 90, 1);
        margin: 0 0 8px 0;
        padding-top: 8px;
        border-top: 1px solid rgba(85, 86, 90, .2);
        cursor: pointer;
    }

    summary:focus {
        outline: none;    
    }

    summary::-webkit-details-marker {
        color: rgba(85, 86, 90, .3);
    } /* styles the marker. Doesn't work in IE */

    details p {
        margin-left: 48px;
    }



/* THIS IS A GENERAL ORDERED LIST */

    ol {
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin: 1rem 0 0 2rem;
        padding: 0;
    }

    ol li {
        margin: 1rem 0 0 2rem;
    }



/* LINKS */

    a { 
        text-decoration: none;
    }

    a:visited {
        color: blue;
    }

    a:hover { 
        color: rgba(255, 0, 0, 1);
        /* text-decoration: underline*/
    }

    a:hover img {
        opacity: .3;
    }

    a:active { 
        color: rgba(255, 204, 0, 1);
        text-decoration: none;
    }

    footer a { 
        color: rgba(85, 86, 90, .5);
        font-weight: 600;
    }

    /*footer a:visited {

    }*/



/* VERTICAL NAV BAR */

     /*header nav ul {
        font-family: "News Gothic", "Helvetica Nue", Helvetica, Arial, Verdana, sans-serif;
        list-style-type: none;
        margin: 0;
        padding: 6px 0;
        width: 200px;
        background-color: rgba(0, 0, 0, .6);
        border-radius: 8px;
    }

    header nav li a {
        display: block;
        margin: 0;
        padding: 12px 0 6px 21px;
        text-align: left;
        font-size: .9em;
        color: rgba(255, 255, 255, 1);
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
    }

    header nav a:visited { 
        color: rgba(255, 255, 255, 1);
    }    
    
    header nav li a.current {
        background-color: none;
        color: rgba(255, 204, 0, 1);
        cursor: default;
    }

    header nav li a:hover {
        text-decoration: none;
    }

    header nav li a:hover:not(.current) {
        background-color: rgba(255, 255, 255, .5);
        color: rgba(0, 0, 0, 1);
        cursor: pointer;
    } */

/* HORIZONTAL NAV BAR */

     header ul {
        font-family: "News Gothic", "Helvetica Nue", Helvetica, Arial, Verdana, sans-serif;
        list-style-type: none;
        margin:  1em 0 0 0;
        padding: 0;
        overflow: hidden;
        background-color: rgba(0, 0, 0, .6);
    }

    header nav li {
        float: left;
        width: 14.2857%;  /*100/10= 10, 100/9= 11.111, 100/8= 12.5, 100/7= 14.2857, 100/6= 16.667*/ /* Use this for left justification */
/*        border-right: 1px solid rgba(255, 255, 255, .5);*/
        border-top: 1px solid rgba(255, 255, 255, .5);
        border-bottom: 1px solid rgba(255, 255, 255, .5);
        border-left: 1px solid rgba(255, 255, 255, .5);
    }

    header nav li:last-child {
        float: right;
/*        border-right: none;*/
/*        border-left: 1px solid rgba(255, 255, 255, .5);*/
        border-right: 1px solid rgba(255, 255, 255, .5);
    }

    header nav a {
        display: block;
        padding: 16px 16px 12px 16px;
/*        font-size: .9em;*/
        color: rgba(255, 255, 255, 1);
        text-align: center;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: capitalize;
    }

    header nav a:visited { 
        color: rgba(255, 255, 255, 1);
    }    
    
    header nav li a.current {
        background-color: none;
        color: rgba(255, 204, 0, 1);
        cursor: default;
    }

    header nav li a:hover {
        text-decoration: none;
    }

    header nav li a:hover:not(.current) {
        background-color: rgba(255, 255, 255, .5);
        color: rgba(0, 0, 0, 1);
        cursor: pointer;
    }

/* MENU FOR IN-PAGE LINKS ON THE ABOUT PAGE */

    .span_2_of_9:first-child {
        padding-top: 132px;
    }

    .bio-menu {
/*        padding-top: 132px;*/
        /*margin-top: 150px;*/
        font-size: 1.2rem;
        width: 240px;
        /*border-top: 1px solid rgba(85, 86, 90, .3);*/
    /* THESE ARE FOR A FIXED MENU */
        /*overflow: hidden;
        position: fixed;
        top: 854px;*/
    }

    .bio-menu li {
        border-bottom: 1px solid rgba(85, 86, 90, .3);
        list-style-type: none;
        margin-left: -40px;
    }

    .bio-menu li:first-of-type {
        border-top: 1px solid rgba(85, 86, 90, .3);
    }

    .bio-menu a {
        display: block;
        color: rgba(85, 86, 90, 1);
        padding: 12px 0 12px 12px;
    }

    .bio-menu a:hover {
        color: rgba(255, 0, 0, 1);
        background-color: rgba(85, 86, 90, .1);
    }

    .bio-menu a:active {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(85, 86, 90, .5);
    }

    .sticky {
        position: fixed;
        top: 0;
    }

    /*.span_5_of_9 {
        padding-top: 0;
    }

    .sticky + .span_5_of_9 {
        padding-top: 60px;
    }*/




/* FOOTER NAVIGATION */

    footer nav ul {
        font-family: "News Gothic", "Helvetica Nue", Helvetica, Arial, Verdana, sans-serif;
        list-style-type: none;
        width: 100%; /* Sets the ul to the width of the page */
        margin: 1em 0;
        padding: 0 15%; /* Centers the horizontal menu selections in the ul */
        overflow: hidden;
    }

    footer nav li {
        float: left; /* So the lis line up next to each other */
        width: 14.2857%;  /*100/10= 10, 100/9= 11.111, 100/8= 12.5, 100/7= 14.2857, 100/6= 16.667*/
    }

    footer nav li a {
        display: block;
/*        color: rgba(85, 86, 90, .5);*/
        font-size: .75em;
        font-weight: 600;
        text-transform: uppercase;
        margin: 0;
        padding: 0; /* Don't need to set a left/right padding when li width is set */ 
    }

    footer nav a:visited { 
        color: rgba(85, 86, 90, .5);
    }    

   footer nav a.current {
        color: rgba(255, 204, 0, 1);
        text-decoration: none;
        cursor: default;
   }

    footer nav li a:hover {
        text-decoration: none;        
    }

    footer nav li a:hover:not(.current) {
        color: rgba(255, 0, 0, 1);
        cursor: pointer;
    }



/* TABLES */

    table { 
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%; 
        border-right: hidden;
        border-left: hidden;
        font-size: 1.2rem;
        margin-bottom: 1em;
    }

    /*tbody tr:nth-child(even) {
        background-color: rgba(85, 86, 90, .1);
        }*/

    th,
    td {
        vertical-align: middle;
    }
 
    th {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(204, 51, 51, 1.0); /* rgba(14, 63, 121, 1) for blue */
        font-weight: 500;
        text-align: center;
        line-height: 1.5rem;
        padding: 12px 12px 8px 12px;
        border: 1px dotted rgba(255, 255, 255, 1);
        border-top: none;
    }

    td {
        /*margin-bottom: 1rem; */
        line-height: 1.6rem;
        border: 1px solid rgba(204, 51, 51, 1.0); /* rgba(14, 63, 121, 1)for blue */
        padding: 12px;
        font-weight: 400;
        text-align: center;
    }

    td:first-child,
    th:first-child {
        text-align: left;
        padding-left: 16px;
    }

    td:last-child,
    th:last-child {
        text-align: right;
        padding-left: 16px;
    }


/* STYLES FOR THE TIMELINE TABLE  */

   table.timeline {
        table-layout: fixed;
        width: 100%;
        margin: 1rem 0;
    }

    table.timeline tbody tr {
        background-color: rgba(255, 255, 255, 1.0);
        border-top: 1px solid rgba(85, 86, 90, .2);
    }

    table.timeline td:first-child{
        font-weight: 600;
        padding-left: 0;
        width: 30%;
    }

    table.timeline td {
        vertical-align: baseline;
        text-align: left;
        padding: 12px 0 12px 36px;
        border: none;
    }


/* STYLES FOR THE DOCUMENTS TABLE */

    table.documents td {
        border: none;
    }

    table.documents tbody tr {
        background-color: rgba(255, 255, 255, 1.0);
        border-top: 1px solid rgba(85, 86, 90, .2);
    }


/* IMAGES */

    img {
        max-width: 100%;
        height: auto;
        width: auto;
    }

    header img {
        width: 100%;
    }

    img[alt="ID campaign logo"] {
        margin-top: 152px;
    }

    img[alt="JDN Portrait"] {
        float: left;
        width: 36%;
        margin: 0.5em 2em 1em 0;
        background-image: linear-gradient(to top left, rgba(0, 51, 141, .8), rgba(0, 51, 141, .2));
    }

    img[alt="Susan and JD"] {
        float: left;
        width: 50%;
        margin: 0.5em 2em 0 0;
    }

    img[alt="JD and Susan"] {
        float: left;
        width: 35%;
        margin: 0.5em 2em 0 0;
/*        background-image: linear-gradient(to top left, rgba(0, 172, 105, .8), rgba(0, 172, 105, .2));*/
/*        background-image: linear-gradient(to top left, rgba(122, 38, 130, .6), rgba(122, 38, 130, .2));*/
/*        background-image: radial-gradient(circle, rgba(235, 183, 0, .8), rgba(235, 183, 0, .3));        */
/*        background-image: linear-gradient(to top left, rgba(235, 183, 0, .6), rgba(235, 183, 0, .3));        */
        background-image: radial-gradient(circle, rgba(179, 178, 177, .3), rgba(179, 178, 177, .6));        
    }

    img[alt="Memorial Day hot dogs"] {
        float: left;
        width: 35%;
        margin: 0.5em 2em 1em 0;
    }

    img[alt="Doug Rae presentation"] {
        float: left;
        width: 50%;
        margin: 0.5em 2em 1em 0;
    }

    img[alt="Walk and Knock"] {
        float: left;
        width: 50%;
        margin: 0.5em 2em 1em 0;
    }

    img[alt="JD at picnic"] {
        float: left;
        width: 50%;
        margin: 0.5em 2em 1em 0;
    }

    img[alt="JD MD19 hat"] {
        float: left;
        width: 50%;
        margin: 0.5em 2em 0.5em 0;
    }

    img[alt="Tree planting"]{
        float: left;
        width: 50%;
        margin: 0.5em 2em 1em 0;
    }

    img[alt="JD Tree planting"]{
        float: left;
        width: 35%;
        margin: 0.5em 2em 1em 0;
    }
    
    img[alt="Red Noses"] {
        float: left;
        width: 50%;
        margin: 0.5em 2em 1em 0;
    }
    #masthead img[alt="LCI logo"] {
        margin: 0 auto;
        width: 18%;
        opacity: 1;
    }

    .sidebar img[alt="LCI logo"] {
        padding: 16px 36px 0 36px;
    }

    .sidebar img[alt="MD19 logo"] {
        margin: 0;
        padding: 16px 40px 0 40px;
    }

    img[alt="PDF document"],
    img[alt="M S Word document"]{
        width:  400px;
        height: auto;
    }

    img[alt="document thumbnail"]{
        width: 400px;
        border: 1px solid rgba(0, 0, 0, 1);
    }

    img[alt="darts at carnival"]{
        float:right;
        width: 50%;
        height: auto;
        margin: 0.5em -15% 1em 2em;
    }

    p.signature-block {
        position: relative;
        top: -112px;
        margin: 0;
        padding: 0;
    }

    img[alt="JDN signature"] {
        position: relative;
        right: 30px;
    }