/* ============================================================================

MD19 Lions Clubs International

Site revision: February, April 2018, March 2020, May 2021, October 2021, June 2024


Standard colors (rgb):
    LCI yellow: 235, 183, 0 
    LCI blue: 0, 51, 141 
    LCI gray: 85, 86, 90 
    LCI cool gray:  179, 178, 177
    LCI red: 255, 92, 53 
    LCI purple: 122, 38, 130
    LCI green:  0, 172, 105

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: "Franklin Gothic";
        src: url(../fonts/Franklin-Gothic-Book.woff) format("woff");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "Franklin Gothic";
        src: url(../fonts/Franklin-Gothic-Medium.woff) format("woff");
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: "Franklin Gothic";
        src: url(../fonts/Franklin-Gothic-Book-Italic.woff) format("woff");
        font-weight: normal;
        font-style: italic;
    }

    @font-face {
        font-family: "Franklin Gothic";
        src: url(../fonts/Franklin-Gothic-Medium-Italic.woff) format("woff");
        font-weight: bold;
        font-style: italic;
    }


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



    /*@font-face {
        font-family: "Garamond Premier Pro";
        src: url(../fonts/GaramondPremrPro.otf) format("opentype");
        font-weight: normal;
        font-style: normal;
    }

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

    @font-face {
        font-family: "Garamond Premier Pro";
        src: url(../fonts/GaramondPremrPro-It.otf) format("opentype");
        font-weight: normal;
        font-style: oblique;
    }

    @font-face {
        font-family: "Garamond Premier Pro";
        src: url(../fonts/GaramondPremrPro-BdIt.otf) format("opentype");
        font-weight: bold;
        font-style: oblique;
    }*/



    /*@font-face {
        font-family: "Chaparral Pro";
        src: url(../fonts/ChaparralPro-Regular.otf) format("opentype");
        font-weight: normal;
        font-style: normal;
    }

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

    @font-face {
        font-family: "Chaparral Pro";
        src: url(../fonts/ChaparralPro-Italic.otf) format("opentype");
        font-weight: normal;
        font-style: oblique;
    }

    @font-face {
        font-family: "Chaparral Pro";
        src: url(../fonts/ChaparralPro-BdIt.otf) format("opentype");
        font-weight: bold;
        font-style: oblique;
    }

    @font-face {
        font-family: "Chaparral Pro";
        src: url(../fonts/ChaparralPro-Light.otf) format("opentype");
        font-weight: lighter;
        font-style: normal;
    }*/


/* BASIC PAGE SETUP */

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

    body { 
        font-family: "Franklin Gothic", "Helvetica Nue", Helvetica, Arial, Verdana, sans-serif;
/*        font-family: Georgia, "Times New Roman", Times, serif;*/
        font-size: 1em;
        color: rgba(0, 0, 0, 1);
        margin: 0 auto;
        padding: 1em 2em; /* white space around the page */
        width: 80em;
    }

    article,aside,details,/*figcaption,*/
    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; /* probably not necessary */
        float:left;
        margin: 0 0 0 1.6%;
    } /* for the grids to work */

    .col:first-child {
        margin-left: 0; /* for the grids to work */
        padding: 0 26px 0 0; /* Adds more space to right margin on pages with 2 columns */
    }

    .buttonbar .col {
        padding: 0;
    } /* To offset the effect of padding between the two columns in the body */

    .col .col {
        padding: 0;
    } /* To offset the effect of padding between the two columns in the body */

    .two-column {
        column-count: 2;
        column-fill: balance;
    }

/* CONTAINERS */

    #masthead {        
        /*margin: 0 auto;*/ /* Probably do not need since the masthead is inside the header */
        /*text-align: center;*/ /* Probably do not need since the masthead is inside the header */
        padding: 8px 0 24px 0;
        position: relative;
    }

    .bottom-right {
        /* This is for the date displayed on the masthead */
        position: absolute;
        bottom: 0;
        right: 0  ;
        width: 33%;
        padding: 0 0 24px 0;
        text-align: right;
        color: rgba(85, 86, 90, 1.0);
        font-size: 1.2em;
        z-index: 996;
    }

    .sidebar {
        margin: 16px 0 ;
        padding: 15px;
        border: 1px solid rgba(255, 92, 53, 1);
    }

    footer {
        margin: 1rem 0 2rem 0;
        padding: 36px 0 36px 36px;
        /*font-size: .8rem;*/  /*This does not seem to work. Why not?*/ 
        /*border-top: 6px solid rgba(0, 77, 153, 1);*/
        border-top: 1px solid rgba(179, 178, 177, 1);
        border-bottom : 1px solid rgba(179, 178, 177, 1);
        /*background-color: rgba(179, 178, 177, 0.1);*/
        /*border-top: 3px solid rgba(0, 51, 141, 1);*/
        background-image: linear-gradient(to bottom right, rgba(0, 51, 141, 1), rgba(122, 38, 130, 1));
    }

    aside {
        width: 40%;
        float: right;
        margin: 0 0 20px 20px;
        border-top: 3px solid rgba(0, 77, 153, 1);
        border-bottom: 3px solid rgba(0, 77, 153, 1);
        font-style: italic;
        color: rgba(0, 77, 153, 1);
    }

    figure {
        margin: 24px 0;
        padding: 12px;
        border: 1px solid rgba(235, 183, 0, 1.0);
        /*background-color: rgba(179, 178, 177, .1);*/
        /*background-color: rgba(235, 183, 0, .1);*/
    }
    
    figcaption {
        color: rgba(0, 51, 141, 1); /*rgba(85, 86, 90, 1) */
        text-align: center;
        margin-top: 8px;
    }

    a figure:hover {
        /*opacity: .6;*/
        border-color: red;
        box-shadow: 4px 4px 4px 4px rgba(85, 86, 90, .3);
    }

    .common-links figure {
        height: 11rem;
        margin: 6px 0 0 0;
        padding: 0 0 8px 0;
        border: 2px solid rgba(122, 38, 130, 1.0); /* purple */
        background-color: rgba(255, 255, 255, 1);
        border-radius: 6px;
    }

    .common-links figcaption {
        margin: 0;        
    }

    .common-links figure img {
        background-color: transparent;
    }

    figure.leaflet {
        margin: 1em 0;
        padding: 16px 16px 16px 16px;
        border: 1px solid rgba(0, 51, 141, 1.0); /* blue */
        background-color: rgba(255, 255, 255, 1);
        border-radius: 6px;
    }

    figure.leaflet img {
        background-color: transparent;
        border: 1px solid rgba(85, 86, 90, .3); 
    }

    .leaflet figcaption {
        margin: 0;
        padding-top: 8px;
    }

    #about main figure {
        margin: 12px 0;
        padding: 0;
        background-color: rgba(255, 255, 255, 1.0);
        border: none;
    }

    figure img {
        background-color: rgba(255, 255, 255, 1.0);
        /*padding: 12px;*/
    }

    .common-links {
        margin: 1em 0;
    }

    .district-links {
        padding: 8px;
        border: 1px solid rgba(85, 86, 90, .1);
        background-color: rgba(179, 178, 177, .1);
    }

    .district-links img {
        background-color: rgba(255, 255, 255, 1.0);
        padding: 0;
    }

    /*figure.lead-photo {
        padding: 20px;
        border: 1px solid rgba(85, 86, 90, 1);
        margin-top: 1rem;
    }*/

    /*figure.lead-photo figcaption {
        text-align: left;
    }*/

    figure.holiday-wish {
        border: 1px solid rgba(0, 77, 153, 1);
    }

/*    figure.redistrict-video {
        background-color:rgba(250, 250, 250, 1);
    }
*/
/*    #redistricting figure.redistrict-video {
        /background-color:rgba(250, 250, 250, 1);*
        margin-bottom: 0;
        margin-top: 0;
    }*/

    #districts main figure,
    #subdistrict main figure {
        margin: 6px 0;
        padding: 12px;
        border: 1px solid rgba(0, 172, 105, 1.0);
        border-radius: 4px;
        background-color: rgba(0, 172, 105, 1.0);
    } /* This is for the thumbnails on the districts page */

    #districts main figure img,
    #subdistrict main figure img,
    #about main figure img {
        padding: 0;
    }

    #districts main figure:hover,
    #subdistrict main figure:hover {
        border-color: red;
        box-shadow: 4px 4px 4px 4px rgba(85, 86, 90, .3);
    }

    #districts main a.current figure, 
    #subdistrict main a.current figure {
        cursor:default;
        border: 1px solid rgba(0, 172, 105, 1.0);
        background-color: rgba(122, 38, 130, 1.0);
        }

    #districts main a.current figure:hover, 
    #subdistrict main a.current figure:hover {
        opacity: 1;
        /*cursor:default;*/
        border: 1px solid rgba(122, 38, 130, 1.0);
        background-color: rgba(122, 38, 130, 1.0);
        box-shadow: none;
        }

    #districts main figure figcaption,
    #subdistrict main figure figcaption {
        font-size: 1.2em;
        color: rgba(255, 255, 255, 1.0);
        font-weight: 600;
    }

    /*  #districts main figure a:hover figcaption,
        #subdistrict main figure a:hover figcaption {
            color: red;
        }
    */

    /*#districts main figure {
        background-color: rgba(0,172, 105, 1.0);
    }*/

    /*#districts figure.district-links:hover {
        box-shadow: none;
    }*/ /* This is for the new district figure on the district page to overide the style for the thumbnails */

    /*#districts figure:hover {
        box-shadow: 4px 4px 4px 4px rgba(85, 86, 90, .3);
    }*/ /* This is for the thumbnails on the district page */

    /*#home .redistrict-video {
        margin: 0 0 12px 0;
    }*/


/* THESE ARE FOR THE MARKETING PAGE MAIN FIGURES */

    #marketing main figure {
        margin: 6px 0;
        padding: 24px;
        border: 3px solid rgba(122, 38, 130, 1.0);
        /*border: 3px solid rgba(0, 51, 141, 1);   */
        /*border: 3px solid rgba(0, 51, 141, 1.0);*/
        border-radius: 4px;
    }

    #marketing main figure img {
        padding: 18px;
        border: 1px solid rgba(122, 38, 130, 1.0);
        box-shadow: none;
    }

    #marketing main figure:hover {
        cursor: pointer;
        border-color: red;
        box-shadow: 4px 4px 4px 4px rgba(85, 86, 90, .3);
    }  

    #marketing main figure img:hover {
        opacity: 1;
    }  

    #marketing main figure figcaption {
        font-size: 1rem;
        color: rgba(0, 0, 0, 1.0);
        font-weight: 400;
        text-align: left;
        /*font-family: "Times New Roman";*/
    }

    #marketing main a:hover {
        text-decoration: none;
    }


/* MARKETiNG PAGE STYLE MODIFICATIONS */

    #marketing .index-box {
        padding: 0;
        background-color: rgba(64, 124, 202, .01);
        border: solid 2px rgba(0, 77, 153, 1);
        border-radius: 6px;
    }

    #marketing .index-box ul {
        margin: 1em 0 0 1em;
        padding: 0 0 1em 2em;
        list-style-type: square;
    }

    #marketing .index-box li {
        margin: 0;
        padding: 0;
        font-size: 90%;
    }

    /* .marketing-index ul {
        margin: 0;
        padding: 0;
    } */

    /* .marketing-index li {
        margin: 0;
        padding: 0;
        font-size: 90%;
    } */

    #marketing .index-box h4 {
        color: rgba(255, 255, 255, 1);
        text-align: center;
        padding: 12px 0 18px 0;
        margin: 0 0 12px 0;
        /*background-color: rgba(0, 77, 153, 1);*/
        background-image: linear-gradient(to top left, rgba(64, 124, 202, 1), rgba(0, 51, 141, 1));
        /*border: solid 1px rgba(0, 77, 153, 1);*/
        border: none;
        /*border-radius: 2px 2px 0 0;*/
    }



    .holiday-wish figcaption {
        margin: 0 0 18px 0;
        color: rgba(255, 92, 53, 1);
        font-size: 100%;
        font-weight: 600;
        letter-spacing: .01rem;
        text-transform: uppercase;       
        line-height: 1.5;
    }
    
    .box {
        border: 1px solid rgba(0, 172, 105, 1);
        padding: 16px 16px 32px 16px;
        /*margin: 16px 0;*/
    } /* Box around clip art and graphics */

    .box2 {
        border: 2px solid rgba(0, 51, 141, 1);
        border-radius: 8px;
        background-color: rgba(64, 124, 202, .05);
/*        background-color: rgba(0, 51, 141, .1);*/
    }
 
    .box p {
        font-size: 1.1rem;
        line-height: 1.5rem;
/*        color: rgba(0, 51, 141, 1);*/
        margin: 0;
        text-indent: 1em;
        padding: 0 1.5em;
    }

    .box img[alt="MD19 Lions Foundation Logo"] {
        padding: 1em 2em;
    }

/*    .box figure {
        margin: 0;
    } */

    /*figure.box {
        padding: 16px;
        border: 1px solid rgba(85, 86, 90, .1);
        margin-bottom: 0;
    }*/

    .ad {
        margin-bottom: 16px;    
        border: 1px solid rgba(85, 86, 90, 1);
        padding: 16px;
        border-radius: 4px;
    } /* Use .ltr for no padding, .flyer for no bottom margin  */

    a .ad:hover {
        border-color: rgba(255, 92, 53, 1);
        opacity: .6;
    }

    .ltr {
        padding: 0;
/*        margin-bottom: 24px;*/
        border: 2px solid rgba(85, 86, 90, .3);
/*        box-shadow: 0 0 4px 1px rgba(85, 86, 90, .3);    */
    }

    a .ltr:hover {
        /*box-shadow: 0 0 4px 1px rgba(85, 86, 90, .3); */
        border-color: rgba(255, 92, 53, 1);
        opacity: .6;
        box-shadow: 4px 4px 4px 4px rgba(85, 86, 90, .3);
    }

    .flyer {
        border: 2px solid rgba(85, 86, 90, .3);
        padding: 16px;
    } /*  Use .ltr for no padding, .ad if bottom margin needed */

    a .flyer:hover{
        border-color: rgba(255, 92, 53, 1);
        opacity: .6;
    }

    img[alt="Keep calm and join a Lions club"] {
        border: 3px solid rgba(0, 51, 141, 1);
    }

    img[alt="Grow With Us Logo"] {
        border: 3px solid rgba(0, 51, 141, 0);
    }

    img[alt="Wenatchee convention ad"] {
        border: 3px solid rgba(0, 51, 141, 0);
    }

    a img[alt="Keep calm and join a Lions club"]:hover,
    a img[alt="Grow With Us Logo"]:hover,
    a img[alt="Wenatchee convention ad"]:hover {
        opacity: 70%;
        border: 3px solid red;
        box-shadow: 4px 4px 4px 4px rgba(85, 86, 90, .3);    
    }

    .group .list-docs {
        margin-top: 1em;
    } /* For the flyears and ads below a calendar entry in On The Horizon */

    /*img[alt="Grow With Us Logo"] {
        margin-bottom: 0;
    }*/

    img[alt="Knights of the Blind holiday card"] {
        margin-top: 20px;
    }

    .modal-body img[alt="Grow Icon Thumbnail"],
    .modal-header img[alt="Grow Icon Thumbnail"] {
        float: left;
        width: 6em;
        height: auto;
        margin: 0 2em 1em 0;
        border: none;
        box-shadow: none;
    }

    .modal-body td img[alt="Graphic thumbnail"] {
            border: 1px solid rgba(255, 255, 255, 1);
            box-shadow: none;  
    }

    .modal-body img[alt="Grow Icon Thumbnail"]:hover,
    .modal-header img[alt="Grow Icon Thumbnail"]:hover {
        opacity: 1; 
    }


    /* STYLES FOR PAGE UNDER CONSTRUCTION IMAGE AND TEXT */

        .center {
            text-align: center;
        }

        .construction {
            margin: 0 25%;
            width: 50%;
        }

    

/* HEADINGS */

    h1 {
        font-size: 3rem;
        font-weight: 700;
        text-align: left;
        /*margin: 32px 0 0 0;*/ /* Why do I need this? */
        margin: 36px 0 0 0;
        color: rgba(0, 51, 141, 1);
        text-transform: uppercase;
        /* These are for gradient text */
        /*background: linear-gradient(to right, blue, red);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;*/
    }

    #awards h1 {
        margin-bottom: 15px;
    }

    h2 {
        font-size: 2.2rem;
        font-weight: 600;
        color: rgba(0, 51, 141, 1);
        margin: 16px 0 16px 0;
    }

    h3,
    h4 {
        font-size: 1.4rem;
        font-weight: 600;
        margin: 1rem 0 .5rem 0;
    }

    h3 {
        color: rgba(0, 51, 141, 1);
    }

    #clubs h3 {
        margin-bottom: 0;
        padding-bottom: 3px;
        border-bottom: 2px solid rgba(85, 86, 90, .3);
    }

    #home h3 {
        color: rgba(85, 86, 90, 1);
        line-height: 1.4;
        letter-spacing: .2px;
    } /* This is the last paragraph on the home page */

    #resources h3 {
        color: rgba(255, 255, 255, 1);
        background-image: linear-gradient(to right, rgba(85, 86, 90, 1), rgba(85, 86, 90, .5));
        padding: 8px 16px;
        margin: 0 0 24px 0;
    }

    #archives h3 {
        margin: 1.5rem 0 1rem 0;
    }

    #archives h3:first-of-type{
        margin: 0 0 1rem 0;
    }

    /*#redistricting h3 {
        margin: 24px 0 1em 0;
        text-transform: uppercase;
    }*/

    h4 {
        color: rgba(255, 92, 53, 1);
    }

    .contents h4 {
        color: rgba(85, 86, 90, 1);
        margin: 0;
    }

    h5 {
        font-size: .9rem;
        /* color: rgba(0, 77, 153, 1); */
        text-align: center;
        margin: 6px 0 24px 0;
    }

    .links h5 {
        color: rgba(0, 77, 153, .1);
        font-size: 5rem;
        margin: 0 0 -15px 0;
        text-align: left;
        }

    h6 { 
        font-family: serif;
        font-size: 1.6rem;
        letter-spacing: 1px;
        font-style: italic;
        color: /*rgba(0, 172, 105, 1)*/ rgba(85, 86, 90, 1);
        font-weight:400;
        margin: 24px 0 32px 0;
        text-align: center;
    } /* This is the title tag line */

/* BASIC TYPOGRAPHY */

    p,
    ol,
    ul,
    dl,
    li,
    address,
    summary,
    blockquote { 
        /*font-family: "Garamond Premier Pro", "Times New Roman", Times, Georgia, serif;*/
        margin-bottom: 1rem; 
        font-size: 1.25rem;
        line-height: 1.65rem;
        font-weight: 400;
        hyphens: auto;  
        -webkit-hyphens: auto; /* Probably do not need this anymore */
        -moz-hyphens: auto; /* Probably do not need this anymore */
        -ms-hyphens: auto; /* Probably do not need this anymore */
    }

    footer p {
        font-size: 1rem;
        text-align: center;
        margin: 0;
    } /* This is the disclaimer link at the bottom of the footer */

    .sidebar p,
    .sidebar li {
        font-size: 1.1rem;
        line-height: 1.5rem;
        color: rgba(85, 86, 90, 1);
    }

    .sidebar p {
        margin: 0 0 0 0;
    }

    .sidebar li {
        margin: 16px 0 0 0;
    }

    .submenu + p {
        margin-top: 0; /* The submenu is the tabbed menu on some pages */
    }

    #home p:first-of-type {
        margin-top: 0;  /* Why is there a top margin that I need to get rid of? */ 
    }

    #ethics main p {
        font-size: 1.2em;
    }

    .monthly-quote {
        margin: 16px 0;
    }

    .monthly-quote h6 {
        /*color: rgba(122, 38, 130, 1);*/
        /*color: rgba(153, 204, 0, 1);*/
        color: rgba(0, 172, 105, 1);
        font-style: normal;
        text-transform: uppercase;
        font-weight: 600;
        margin: 4px 0 8px 0;
    }

    .monthly-quote p {
        /*color: rgba(153, 204, 0, 1);*/
        color: rgba(0, 172, 105, 1);
        /*color: rgba(255, 183, 0, 1);*/
    }

    .quote,
    .author {
        font-family: serif;
        font-style: italic;
        /*color: rgba(0, 51, 141, 1.0);*/
        color: rgba(122, 38, 130, 1);
        line-height: 1.4em;
/*        margin: 0;*/
        text-indent: 1rem;
        hyphens: none;         
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
    }

    p.quote {
        font-size: 1.6em;
        margin: 0 1em;
    }

    p.author {
        margin: 0 3em 4px 0;
        text-align: right;
    }

    .perspectives {
        padding: 16px 32px 32px 32px;
        background-image: linear-gradient(to top left, rgba(64, 124, 202, 1), rgba(0, 51, 141, 1));
        margin: 24px 0;
    }

    .perspectives p {
        font-family: serif;
        text-align: center;
        font-size: 1.5em;
        color: rgba(255, 255, 255, 1.0);
        margin: 16px 0 16px 0;
    }

    .perspectives p.author {
        font-size: 1.2em;
        margin: 0;
        text-align: right;
    }

    .perspectives h4 {
        text-align: center;
        font-size: 2em;
        color: rgba(255, 255, 255, 1.0);
        text-decoration: underline overline;
        text-underline-offset: 5px;
        margin-bottom: 24px;
        margin-top: 24px;
    }

    .thoughts {
        padding: 16px 32px 32px 32px;
        background-image: linear-gradient(to top right, rgba(255, 92, 53, 1), rgba(220, 20, 60, 1));
        margin: 24px 0;
        border-radius: 6px;
    }

    .thoughts p {
        font-family: serif;
        text-align: center;
        font-size: 1.5em;
        color: rgba(255, 255, 255, 1.0);
        margin: 16px 0 16px 0;
    }

    .thoughts p.author {
        font-size: 1.2em;
        margin: 0;
        text-align: right;
    }

    .thoughts h4 {
        text-align: center;
        font-size: 2em;
        color: rgba(255, 255, 255, 1.0);
        /*text-decoration: underline overline;*/
        /*text-underline-offset: 5px;*/
        text-transform: uppercase;
        margin-bottom: 12px;
        margin-top: 24px;
    }

    .life-lessons {
        margin: 24px 0;
        padding: 16px 8px;
        background-image: linear-gradient(to bottom right, rgba(255, 183, 0, 1), rgba(255, 183, 0, .2));
        /*border: 12px groove rgba(235, 183, 0, 1.0);*/
    }

    .life-lessons h6 {
        font-family: Helvetica, Arial, Verdana, sans-serif;
        text-transform: uppercase;
        text-decoration: underline;
        text-underline-offset: 12px;
        font-style: normal;
        font-size: 1.6em;
        color: rgba(0, 51, 141, 1);
        font-weight: 600;
        margin: 16px 0 16px 0;
    }

    .life-lessons p {
        color: rgba(0, 51, 141, 1.0);        
    }

    .life-lessons p.quote {
        text-indent: 0;
        text-align: center;
    }

    .life-lesson p.author {
        text-align: right;
    }

    abbr {
        cursor: pointer;
    }

    b,
    strong { 
        font-weight: 700; 
    }

    i {
       font-style: italic; 
    }

    em {
        font-weight: 700;
        font-style: normal;
        text-transform: uppercase;
    }

    mark {
        background-color: yellow;
    }

    small { 
        font-size: .8rem;
    }

    sub, 
    sup { 
        font-size: .6em; 
        line-height: 0; 
        position: relative; 
    }

    sup { 
        vertical-align: super; 
    }

    sub { 
        vertical-align: baseline; 
    }

    smallcaps {
        font-variant: small-caps;
        font-size: 118%;        
    }

    span.smallcaps {
        font-variant: small-caps;
        font-size: 118%;   
    }

    allcaps {
        text-transform: uppercase;   
    }

    span.allcaps {
        text-transform: uppercase;   
    }

    .footnote {
        border-top: 2px dotted rgba(0, 77, 153, 1);
        font-size: 1rem;
        font-style: italic;
    }

    .strike {
        text-decoration: line-through;
    }

    .delete {
        text-decoration-line: line-through;
        text-decoration-color: rgba(255, 0, 0, 1);
    }

    .red {
        color: rgba(255, 0, 0, 1);
    }

    .blue {
        color: rgba(0, 0, 255, 1);
    }

    .fade10 {
        opacity: .1;
    }

    .fade20 {
        opacity: .2;
    }

    .fade30 {
        opacity: .3;
    }

    .fade40 {
        opacity: .4;
    }

    .fade50 {
        opacity: .5;
    }

/* THESE ARE FOR THE EXPANDABLE DETAIL LISTS */

    summary {
        margin: 0;
        padding: 8px 0 8px 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, .5);
    } /* styles the marker. Doesn't work in IE */

    details {
        margin-left: 24px;
    }

    details p {
        margin-left: 4rem;
    }

/* THESE ARE FOR THE LIST ON THE RESOURCE PAGE */

    .resourcelist {
        margin: 0 24px;
        padding: 0;    
    }

    .resourcelist li {
        list-style-type: none;
        margin: .5rem 0; /* Set the same as the resourcelist summary*/
    }

    .resourcelist li li {
        list-style-type: none;
    }

    .resourcelist ul ol li {
        list-style-type: decimal;
        padding-left: 16px;
        margin-left: 24px;
    }

    /*.resourcelist a {
        color: blue;
    }*/

    .resourcelist summary {
        padding: 12px 0 0 8px;
    }

    .resourcelist li summary {
        margin: .5rem -48px; /* Set the same as the resourcelist li */    
    } /* This affects the detail list inside a li */

    .resourcelist summary:hover {
        color: rgba(255, 92, 53, 1);
        text-decoration: underline;
    }

    .resourcelist summary:active {
        text-decoration: none;
    }

    .resourcelist details {
        margin: 0 0 0 88px;
    }

    .statslist ul li,
    .pcogs ul li {
        padding-left: 2rem;
    }

/* LISTS */

    .faq ul {
        margin-left: 48px;
    }

    .faq ol {
        margin-left: 48px;
    }

    .faq ol ol li {
        margin-left:  -48px;
        list-style-type: lower-alpha;
    }

    li {
        margin: 1rem 0 1rem 20px;
    }

    .faq ul li {
        padding-left: 8px;
    }

    .faq ol li {
        padding-left: 16px;
    }

    ol.alpha-lower li{
        list-style-type: lower-alpha;
    }

    ol.alpha-lower ol li {
        list-style-type: decimal;
    }

/* THESE ARE FOR THE EVENT LISTS ON THE HOME PAGE AND MAIN DISTRICT PAGES */

     ul.event,
     ul.announcements {
        list-style-type: none;
        margin-left: 0;
        margin-bottom: 0;
        padding-left: 0;
    }

    /*.event li:before {
        content: "\1f43e";
        padding-right: 24px;
        margin-left: -48px;
    }*/ /* 1f332 = evergreen tree, 1f43e = paw prints, 1f981 = lion face, 1f4a1 = lightbulb, 
    1f50d = magnifying glass left, 1f50e = magnifying glass right, 25a3 = outlined box, 
    2582 = box outline, 25b7 = outline carat right, 25ef is circle outline, 1f7e5 = red square, 
    26a1 = lightning bolt. */

    .event li:not(li li),
    .announcements li:not(li li) {
        padding: 16px 0;
        margin: 0 0 0 0; /* Make this 48 if using a symbol for the bullet */        
        /*border-top: 2px solid rgba(255, 92, 53, 1);*/
        border-top: 1px solid rgba(0, 172, 105, .5);
    }

    .event li:not(li li):first-of-type,
    .announcements li:not(li li):first-of-type {
        border-top: none;
        padding-top: 0;
    }

    .announcements li.noborder {
        border-top: none;
        margin-top: -2em;
    }



    .sublist li {
        list-style-type: none;
        margin: 12px 0;
        padding: 0;
    } /* for sub events under the main list category */

    li.sublist {
        list-style-type: none;
    }

    ul.date,
    ul.notice {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
/*        border-bottom: 1px solid rgba(255, 92, 53, 1);                */
    }

    .date li,
    .notice li {
        margin-left: 10%;
        padding: 16px 0 0 0;
        border-top: 1px solid rgba(255, 92, 53, 1);
    }

    .date li:first-of-type,
    .notice li:first-of-type {
        border-top: none;
        padding-top: 0;  
    }  /* May need to change img[alt="Date graphic"]:first-of-type {} if top border added to 1st item in date list */

    .notice a img:hover {
        border-color: rgba(255, 92, 53, 1);
        box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, .3);
        /*box-shadow: 0 0 16px 3px rgba(255, 204, 0, .5);*/
        /*opacity: 0.6;*/
        border: 2px solid red;
    }

/*.date li:last-of-type {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 92, 53, 1);        
    }*/

    li li {
        list-style-type: none;
    }

    .checklist li {
        list-style-type: none;
        margin-left: 0;
        padding: 16px 0 0 0;
        border-top: none;
/*        border-top: 1px solid /*rgba(255, 92, 53, 1)*/
    }

    .checklist li:before {
        content: "\2713"; 
        padding-right: 16px;
        margin-left: -32px;
    }

    /* This put a checkmark for the bullet. Also 2714 and 2611 for other checkmark symbols.
     \0020 for space. Need to set list style type to none. */

    ul.breaking-news {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
    }

    .breaking-news li:not(li li) {
        margin-left: 10%;
        padding: 16px 0 0 0;
/*        border-top: 2px solid rgba(0, 172, 105, .5);*/
        border-top: 1px solid rgba(255, 92, 53, 1);
    }

     .breaking-news li:first-of-type:not(li li) {
        border-top: none;
        padding-top: 0;
    } 

    .breaking-news li table {
        margin-top: 1em;
        margin-bottom: 1em;
    }


    ul.member-perks {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
    }



/* THESE ARE FOR THE LISTS ON THE CLUB PAGES */

    .clubs ul {
        list-style-type: none;
        margin: 0 0 1rem 4rem;
        padding: 0 0 0 0;
    } /*These deal with the club lists */

    .clubs ul li ul {
        margin: 0;
    }

    .clubs li {
        margin: 0 0 0 2rem;
        padding: 0;
    }

    .clubs span,
    h1 span {
        color: rgba(85, 86, 90, .6);
    }

/* THESE ARE FOR THE LISTS ON THE COG HISTORy PAGES */

    .pcogs ul {
        list-style-type: none;
        margin: 0 0 24px 3rem;
        padding: 0 0 0 0;
    }

    .pcogs li {
        /*font-size: 120%;*/
        margin: 8px 0 0 0;
        padding: 0;
    }

    .pcogs span {
        color: rgba(85, 86, 90, .6);
    }

/* THESE ARE FOR THE LISTS ON THE STATS PAGES */

    .statslist ul {
        list-style-type: none;
        margin: 0 0 0 3rem;
        padding: 0 0 0 0;
    }

    .statslist li {
        margin: 8px 0;;
        padding: 0;
    }

/* THESE ARE FOR THE TABLE OF CONTENTS LISTS */

    .contents ul {
        margin-top: 8px;
        margin-bottom: 0;
    }

    .contents ul li{
        margin: 0;
    }

/* THESE ARE FOR THE LISTS ON THE ABOUT PAGES */

    ul.about ul {
        list-style-type: none;
    }

    ul.about {
        list-style-type: none;
         margin-top: 3px;
         padding-left: 10px;
    }

    ul.about li {
        margin-top: 0;
        margin-bottom: 0;
        list-style-type: none;
    }

/* THESE ARE FOR THE LISTS IN THE FOOTER */

    footer .group {
        padding: 0;
        margin: 0 0 16px 0;
    }

    footer .col:first-child {
        padding: 0;
    }

    footer .group ul {
        padding: 0;
        margin: 0;
    }

    footer .group li {
        font-size: 1rem;
        margin: 0;
        line-height: 1.2rem;
        /* letter-spacing: 0.02rem; */
        list-style-type: none;
        text-align: left;
        }

    footer .group li:first-child {
        /*color: rgba(85, 86, 90, .7);*/
        /*color: rgba(255, 204, 0, 1);*/
        color: rgba(255, 255, 255, 1);
        font-weight: 700;
        letter-spacing: .02rem;
        text-transform: uppercase;
        text-decoration: underline;
        margin-bottom: 4px;
        }

/* THESE ARE FOR DATA LISTS */

    dl {
        margin: 32px 0 0 0;
        }

    dt {
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: .02rem;
        text-transform: capitalize;
        color: rgba(85, 86, 90, 1);
    }

    #mission dt {
        text-decoration: underline;
    }

    dd {
        margin-left: 1rem;
        margin-bottom: 10px;
        list-style-type:square;
        }

    #mission dd {
        margin: 16px 48px 32px;
        }

/* LINKS */

    a { 
        color: blue;
        /* color: rgba(0, 77, 153, 1); */
        text-decoration: none;
    }

    footer a {
        /*color: rgba(85, 86, 90, .7);*/
        color: rgba(255, 255, 255, 1);
        font-weight: 400;
    }

    dt a{
        color: rgba(85, 86, 90, 1);
        cursor: pointer;
    }

    /* a:visited {
        color: rgba(0, 77, 153, 1);
    }*/ /* Not needed if no change to link color wanted and link color is set */

    a:hover { 
        color: rgba(255, 92, 53, 1);
        text-decoration: underline
    }

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

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

    a.current {
        color: rgba(0, 51, 141, 1);
        text-decoration: none;
    }


    h3 a {
        color: rgba(85, 86, 90, .3);  
    }

    h3 a:hover{
        color: rgba(85, 86, 90, 1);
    }

/* THESE ARE FOR THE LINKS TO 3RD PARTY SITES ON THE LINKS PAGE */

    .links li {
        list-style-type: none;
        margin: 6px 0;
        padding: 0;
    }

    .links a {
        color: rgba(0, 77, 153, 1);
    }

    .links a:hover {
        color: rgba(255, 92, 53, 1);
    }

    .links a:active {
        color: rgba(255, 204, 0, 1);
    }

/* NAVIGATION */

    nav {
        overflow: auto; /* Makes the navbar fill to the elements it contains */
    } 

    nav ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    nav li {
        display: inline;
        text-transform: capitalize;
        margin: 0;
    }

    nav a.current{
        cursor:default;
    }

/* THESE ARE FOR THE MAIN NAVIGATION BAR */

    header nav {
        position: relative; /* probably do not need this */
        margin: 0 auto;
        background-image: linear-gradient(to bottom right, rgba(0, 51, 141, 1), rgba(122, 38, 130, 1));
        /*background-image: linear-gradient(to right, rgba(13, 34, 64, 1), rgba(0, 51, 141, 1), rgba(122, 38, 130, 1));*/
        /*background-image: linear-gradient(to right, rgba(122, 38, 130, 1), rgba(0, 51, 141, 1), rgba(0, 51, 141, .5));*/
    }

    header nav li {
        text-align: center; /* Probably do not need this */
    }

    header nav a {
        color: rgba(255, 255, 255, 1);
        font-size: 1rem;
        font-weight: 400;
        text-transform: uppercase;
        float: left;
        width: 9.09%; /* Use these for centered menu list -- 100/11=9.09. 100/9= 11.111,
        100/8= 12.5, 100/7= 14.2857, 100/6= 16.667 */
        padding: 12px 0; /* This sets the height of the top menu bar */
        /* background-color: rgba(0, 77, 153, 1); */ /* Lions blue  */
        /* background-color: rgba(85, 86, 90, 1); */ /* Lions gray */
        /*background-image: linear-gradient(to right, rgba(122, 138, 130, 1), rgba(0, 51, 141, 1), rgba(0, 51, 141, 1));*/
    }

/* THESE ARE MODIFICATIONS FOR CHRISTMAS AND NEW YEARS COLOR CHANGES ON HOME PAGE ONLY */

    /* GREEN */

        /*#home header nav a:not(.current):not(:hover) {
            background-color: rgba(0, 172, 105, 1);
        } */

    /* PURPLE */

        /*#home header nav a:not(.current):not(:hover) {
            background-color: rgba(122, 38, 105, 1);
        } */

    header nav a:hover {
        color: rgba(0, 0, 0, 1.0);
/*        color: rgba(255, 255, 255, 1);*/
        background-color: rgba(255, 204, 0, 1);
        text-decoration: none;
    }

    header nav a:active { 
        color: rgba(255, 255, 255, 1);
        text-decoration: underline;
    }    

    header nav a.current {
        color: rgba(255, 255, 255, 1.0);
/*        color: rgba(255, 204, 0, 1);*/
/*        background-color: rgba(0, 77, 153, 1);*/
        background-color: rgba(85, 86, 90, 1);
        text-decoration: none;
    } 

    header nav li:last-of-type {
        display: none;
    }

/* THESE ARE FOR THE NAVIGATION BAR IN THE FOOTER */

    footer nav {
        margin: 0 0 24px 0;
    }

    footer nav a {
        /*color: rgba(85, 86, 90, .7);*/
        color: rgba(255, 255, 255, 1);
        font-size: 1rem;
        font-weight: 700;
        float: left;
        margin-right: 20px; /* Left justifies the nav bar */
        text-transform: uppercase;
    }

    /*footer nav a:active { 
        color: rgba(255, 255, 255, 1);
    }*/  

    footer nav a.current {
        /*color:rgba(204, 92, 53, 1);*/
        /*color:rgba(255, 255, 255, 1);*/
        color:rgba(235, 183, 0, 1);
        /*text-decoration: underline;*/
    }

/* THESE ARE FOR THE NAVIGATION TABS ON SOME PAGES */

    .submenu {
        text-align: center;
        padding-bottom: 12px;
        margin-left: 0; /* this creates an "indent" from the edge of the tab bar. Need to adjust 
        if .span_2_of_3 padding is changed  */
        margin-top: 1rem;
    }

    .submenu a {
        color: rgba(85, 86, 90, 1);
        font-weight: 400;
        width: 13.9%; /* for 7 tabs. Change for pages with fewer tabs */
        float: left;
        border: 1px solid rgba(85, 86, 90, 1);
        margin: 0 1px 10px 1px;  
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        padding: 6px 0; 
        background-color: rgba(179, 178, 177, .2)
    }

    #about .submenu a {
        width: 19.7%;
    } /* for 4 tabs 19.7% for 5 tabs, 24.7% */

    #archives .submenu a {
        width: 16.3%;
    } /* for 5 tabs */

    #district .submenu a {
        width: 33%;
    } /* for 3 tabs */

    #subdistrict .submenu a {
        width: 33%;
    } /* for 3 tabs */

    #clubs .submenu a {
        width: 19.7%;
    } /* For 2 tabs */

    #awards .submenu a {
        width: 49.7%;
    } /* for 2 tabs */

    #join .submenu a {
        width: 33%;
    } /* for 3 tabs */

    #resources .submenu a {
        width: 16.3%;
    } /* for 6 tabs */

    #partners .submenu a {
        width: 24.7%;
    } /* for 4 tabs */


    #questions .submenu a {
        width: 49.7%;
    } /* for 2 tabs */

    #sitemap .submenu a {
        width: 49.7%;
    } /* for 2 tabs */

    .submenu a:hover {
        color: rgba(255, 92, 53, 1);
        background-color: rgba(85, 86, 90, .1);
        border-color: rgba(85, 86, 90, .3); /* 0, 77, 153, 1 */
    }

    .submenu a:active {
        color: rgba(0, 77, 153, 1);
        border-color: rgba(0, 77, 153, 1);
    }

    .submenu a.current {
        color: rgba(0, 77, 153, 1);
        background-color: rgba(255, 255, 255, 1);
        border-color: rgba(85, 86, 90, 1); /*(0, 77, 153, 1)*/
        border-bottom: none;
    }

/* THESE ARE FOR NAVIGATION BUTTONS */

    .backbutton {
        display: inline-block;
    } /* This is for a button to a specific page as opposed to the last page visited */

    button,
    .backbutton {
        font-size: 1rem;
        color: rgba(255, 255, 255, 1);
        margin-top: 20px;
        padding: 6px 24px;
        background-color: rgba(255, 204, 0, 1);
        border: 1px solid rgba(255, 255, 255, 1);
        box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .1);
    } /* This is the Go Back button-- button is generic, .backbutton is specific */

    button:first-of-type,
    .backbutton:first-of-type{
        float: right;
        margin-top: 0;
    } /* This is the Go Back button at the top of the list */

    button:hover,
    .backbutton:hover {
        cursor: pointer;
        color: rgba(255, 92, 53, 1); /* rgba(152, 50, 34, 1) */
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(255, 92, 53, 1);
        box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .1);
    } /* This is the Go Back button */

    button:active,
    backbutton:active {
        color: rgba(0, 0, 0, 1);
        background-color: rgba(255, 204, 0, 1);
        box-shadow: none;
    }

/* THESE ARE FOR AUDIO PLAYER BUTTONS */

    .player button {
        float: none;
        color: rgba(0, 61, 141, 1);
        background-color: rgba(255, 255, 255, 1);
        width: 33%;
        margin: 1em 0 0 0;
        padding: 10px 0;
        border: 1px solid rgba(0, 41, 151, 1);
        border-radius: 12px;
    }

    .player button:hover {
        cursor: pointer;
        color: rgba(255, 92, 53, 1);
        border: 1px solid rgba(255, 92, 53, 1);
        box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .1);
    } /* This is the Go Back button */

    .player button:active {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(255, 92, 53, 1);
        box-shadow: none;
    }

/* THESE ARE FOR THE DISTRICT NAVIGATION BUTTONS */

    .buttonbar {
        margin: 0 0 32px 0;
    }

    #home .buttonbar {
        margin-bottom: 0;
    }

    #home li .buttonbar:first-of-type {
        margin: 1rem 0;
    } /* This is for the buttonbars if used in the body of the main page lists */

    #archives .buttonbar {
        margin: .5rem 1rem 1.5rem 1rem;
    }

    .buttonbar img {
        margin: 0;
        padding: 0;
        border: 1px solid rgba(179, 178, 177, 1); /* 0, 77, 153, 1 */
        border-radius: 25%;
        background-image: radial-gradient(rgba(179, 178, 177, 0), rgba(179, 178, 177, .2));
    }

    p ~ .buttonbar img {
        margin-top: 10px;  
    }

    h1 + .buttonbar {
        padding: 30px 0 0 0;
    }

    .buttonbar img:hover {
        border-color: rgba(255, 92, 53, 1);
        box-shadow: 0 0 12px 3px rgba(255, 204, 0, .4);
        opacity: 1;
    }

    .buttonbar img:active {
        opacity: 1;
        transform:rotate(20deg);
    }

    .buttonbar .current img {
        border-color: rgba(0, 77, 153, 1); /* 0, 77, 153, 1 */
        background-image: none;
        box-shadow: none;
        cursor: default;
    }

    .buttonbar .current img:active {
        transform: rotate(0deg);
    } /* Puts some motion on the button when selected */


/* THIS IS THE DISTRICT CALENDAR ICON BUTTON */

    img[alt="Go To Calendar"] {
        float: right;
        width: 7%;
        margin-top: -4px;
        border: 1px solid #fff;
        box-shadow: 2px 2px 6px 3px rgba(85, 86, 90, .2);
    }

    .calendar-button:hover {
        border-color: rgba(255, 92, 53, 1);
        box-shadow: 0 0 12px 3px rgba(255, 204, 0, .4);
        opacity: 1;
    }

    .calendar-button:active {
            border-color: rgba(255, 92, 53, 1);
            box-shadow:none;
            opacity: .5;
        }

/* THIS IS THE DISTRICT CALENDAR SIDEBAR */

    .district-calendar {
        border: 1px solid rgba(85, 86, 90, .5);
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 16px;
    }

    .district-calendar p {
        margin: 0;
        line-height: 120%;
        font-size: 90%;
        font-weight: 300;
    }

    .district-calendar img[alt="Go To Calendar"] {
        float: left;
        width: 25%;
        margin: 0 18px 0 0;
        border: 1px solid #fff;
        box-shadow: 2px 2px 6px 3px rgba(85, 86, 90, .2);
    }

    .district-calendar img[alt="Go To Calendar"]:hover {
        border-color: rgba(255, 92, 53, 1);
        box-shadow: 0 0 12px 3px rgba(255, 204, 0, .4);
        opacity: 1;
        }

    .district-calendar img[alt="Go To Calendar"]:active {
        border-color: rgba(255, 92, 53, 1);
        box-shadow:none;
        opacity: .5;
        }

/* THESE ARE THE MAP BUTTONS FOR THE LIST ON THE DISTRICTS PAGE */

    .map-list {
        margin: 0;
        padding: 0;
    }

    .map-list p {
        margin: 0;
    }

    .map-list p:first-child {
        font-weight: 700;
        color: rgba(85, 86, 90, 1);
        padding-top: 16px;
    }

    .district-icon {
        width: 75%;
        margin-top: 12px;
        padding: 0;
        border: 1px solid rgba(179, 178, 177, 1);
        border-radius: 12px;
    }

    .district-icon:hover {
        border-color: rgba(255, 92, 53, 1);
        box-shadow: 0 0 16px 3px rgba(255, 204, 0, .4);
        opacity: 1;
    }

    .district-icon:active {
        opacity: 1;
        border: 1px solid rgba(0, 77, 153, 1);
        transform: rotate(90deg); /* rotates the image on click */
    }

/* THE READ MORE BUTTON */

    #more,
    #more1,
    #more2,
    #more3,
    #more4,
    #more5,
    #more6,
    #more7,
    #more8,
    #more9 {
        display: none;
    }    

/* THESE ARE THE DISTRICT ICONS ON THE BETA DISTRICTS PAGE */

    /*#districts .span_1_of_3 .district-icon {
        width:100%;
        border-radius: 24px;
        border: 1px solid #fff;
        box-shadow: 0px 0px 8px 4px rgba(179, 178, 177, .3);
    }*/

    /*#districts .span_1_of_3 .district-icon:hover {
        opacity: 0.8;
        border-color: rgba(255, 92, 53, 1);
    }*/

    /*#districts .span_1_of_3 .district-icon:active {
        opacity: 1;
        border-color: rgba(179, 178, 177, .4);
        box-shadow: none;
        transform: none;
    }*/

/* THESE ARE FOR THE ALPHABET LIST ON THE LINKS PAGE */

    .alphabet_list {
        padding: 0;
        margin: 4px 0 0 0;
        overflow: hidden;
        border-top: 1px solid rgba(0, 77, 153, .3);
        }

    .alphabet_list li {
        display: inline;
        margin: 0 -2px;
        padding: 0 .32%;
        text-align: center;
        }

    .alphabet_list li a {
        padding: 4px 5px;
        color: rgba(0, 77, 153, 1);
        }

    .alphabet_list a:hover {
        color: rgba(255, 255, 255, 1);
        text-decoration: none;
        background-color: rgba(0, 77, 153, 1);
        }

    .alphabet_list li a:active {
        background-color: rgba(255, 92, 53, 1);
    }

/* TABLES */

    table { 
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%; 
        border-right: hidden;
        border-left: hidden;
        margin: 0;
    }

    .district-links table {
        border: 1px solid rgba(85, 86, 90, .2);
        background-color: rgba(255, 255, 255, 1);
    }

    .district-links td:hover {
        /*background-color: rgba(179, 178, 177, .1);*/
        box-shadow: 0 6px 12px 6px rgba(0, 0, 0, .1);
    }

    #archives tr:nth-child(odd) {
/*        background-color: rgba(85, 86, 90, .1);*/
        background-color: rgba(255, 204, 0, .1);
    } /* This adds the shading to every other row in a table in awards */

    th,
    td {
        vertical-align: baseline;
        font-size: 1.2rem;
        padding: 8px 8px 8px 8px;
    }

    th {
        color: rgba(255, 255, 255, 1);
        font-weight: 700;
        text-align: left;
        /*line-height: 2rem;*/
        /*padding-left: 12px;*/
/*        background-color: rgba(85, 86, 90, 1);*/
        background-color: rgba(122, 38, 130, 1);
        border: 1px solid rgba(255, 255, 255, 1);
        border-top: none;
    }

    td {
        margin-bottom: 1rem; 
        /*line-height: 2rem;*/
        border: 1px solid rgba(85, 86, 90, .2);
        /*padding-left: 12px;*/
        /*font-weight: 400;*/
    }

    .faq table {
        margin-left: 92px;
        width: 80%;
    }

/* THESE ARE THE FUTURE CONVENTIONS TABLE */

    table.conventions {
        margin-left: 5%;
        width: 90%;
        margin-bottom: 1em;
        margin-top: 1em;
    }

    .conventions caption {
        text-align: left;
        margin-bottom: 1em;
        font-weight: 900;
    }
    .conventions thead {
        /*color: rgba(0, 0, 0, 1);*/
        color: rgba(255, 255, 255, 1);
        font-weight: 900;
        background-color: rgba(0, 172, 105, 1);
    }

    .conventions tbody tr:nth-child(odd) {
        background-color: rgba(255, 255,255, 0);
    }  /* This adds the shading to every other row in a table */

    .conventions tbody tr:nth-child(even) {
        background-color: rgba(0, 172, 105, .1);
    }  /* This adds the shading to every other row in a table */



/* THESE ARE THE FOR CANDIDATE VOTING RESULTS TABLE FOR THE 2022 12 ELECTIONS */

    table.candidates {
        margin: 1em auto;
    }

    .candidates th,
    .candidates td {
        font-size: 1.1rem;
    }

    .candidates th {
        background-color: rgba(0, 77, 153, .8);
            }

    .candidates td {
        text-align: left;
        color: rgba(0, 77, 153, 1.0);
        font-weight: 500;
    }

    .candidates tr:first-of-type th:first-child {
        background-color: rgba(255, 255, 255, 1.0);
    }

     .candidates tr:nth-child(odd) {
        background-color: rgba(255, 204, 0, .1);
    }  /* This adds the shading to every other row in a table */



/* THE TABLES IN THE MARKETING MODALS */

    #marketing .modal-body table {
        margin: 1em auto;
    }

    #marketing .modal-body thead {
        /*color: rgba(0, 0, 0, 1);*/
        color: rgba(255, 255, 255, 1);
        font-weight: 900;
        background-color: rgba(0, 172, 105, 1);
    }

    #marketing .modal-body th,
    #marketing .modal-body td {
        font-size: 1em;
    }

    #marketing .modal-body th {
        background-color: rgba(0, 77, 153, .8);
            }

    #marketing .modal-body td {
        text-align: left;
        color: rgba(0, 77, 153, 1.0);
        font-weight: 500;
    }

    /*#marketing .modal-body tr:first-of-type th:first-child {
        background-color: rgba(255, 255, 255, 1.0);
    }*/

     #marketing .modal-body tr:nth-child(odd) {
        background-color: rgba(255, 204, 0, .1);
    }  /* This adds the shading to every other row in atable */

    #marketing .modal-body table.documents tr {
    background-color: rgba(255, 255, 255, 1.0);    
    } /* This eliminates even/odd row shading in the document and clip art tables */




/* THESE ARE FOR FORMS */

    form {
        font-weight: 400;
        margin-left: 6rem;
        width: 60%;
    }

    input[type="text"],
    textarea {
        width: 100%;
        border: 1px solid rgba(85, 86, 90, .3);
        font-size: 1rem;
        margin-bottom: 1rem;
        padding-left: 1rem;
    }

    input[type="text"] {
        height: 2rem;
        cursor: pointer;
    }

    textarea {
        height: 100px;
    }

    input[type="checkbox"] {
        margin-left: 0;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    input[type="radio"] {
        margin: 0 0 1rem 30px;
        width: 20px;
        height: 18px;
        cursor: pointer;
    }

    input[type="submit"] {
        margin-top: 20px;
        width: 120px;
        height: 36px;
        font-size: 1.2rem;
        background-color: rgba(255, 204, 0, 1);
        border: 1px solid #fff;
        box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .1);
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
    }

    input[type="submit"]:hover {
        color: rgba(255, 92, 53, 1);
        background-color: rgba(255, 255, 255, 1);
        text-decoration: underline;
        border: 1px solid rgba(255, 92, 53, 1);
    }

    input[type="submit"]:active {
        color: #000; /* rgba(0, 77, 153, 1) */
        background-color: rgba(255, 204, 0, 1);
        text-decoration: none;
        box-shadow: none;
        outline: none;
    }

    label {
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.6rem;
    }

    .hominid {
        display: none;
    }

/* IMAGES */

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

    #home .social:first-of-type {
        margin-top: 24px;}

    #masthead img {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    img.dropcap {
        float:left;
        height: 4rem;
        width: auto;
        margin: 4px 12px 0 0;   
    }

    img[alt="Melvin Jones"] {
        float: right;
        margin: 16px 0 0 32px;  
    } /* the photo on the Melvin Jones page*/

    img[alt="Gordon Smith"] {
        width: 30%;
        float: right;
        margin: 16px 0 0 32px;  
    } /* the photo on the Gordon Smith page*/

    img[alt="Pin image"] {
        padding: 0 48px;
    } /* For the pin image on the Goordon Smith page */

    /*img[alt="Conference Registration Form"] {
        margin: 0 0 0 36px;
        padding: 0;
    }*/

    img[alt="Date graphic"] {
        float: left;
        width: 7%;
        height: 7%;
        margin: 4px 0 0 -10%;
        box-shadow: 2px 2px 4px 0 rgba(85, 86, 90, .3);
    } /* These are the calendar icons for events */

    /*img[alt="Date graphic"]:first-of-type {
        margin-top: 6px;
        } */ /* can eliminate this if a border is added to the first date entry -- see .date li:first-of-type */
        /* Actually -- can remove this whole thing and just set padding at .date li {} */

    img[alt="Arrow pointing left"] {
        float: left;
        width: 7%;
        height: auto;
        margin: 6px 18px 0 -10%;
    } /* These are the calendar icons for events */

    img[alt="Exclamation"] {
        float: left;
        width: 1.75rem;
        height: auto;
        margin: 8px 0 0 -10%;
    }

    img[alt="Finger pointing up"] {
        width: 7%;
        float: left;
        margin: 12px 0 0 -10%;
    }

    .sidebar img[alt="Finger pointing up"] {
        width: 14%;
        float: left;
        margin: 0 20px 0 0;
    }

    img[alt="Change sign"] {
        float: right;
        width: 15%;
        height: auto;
        margin: 0 0 0 6px;
    }

    img[alt="Ballot Box graphic"] {
        float: right;
        width: 25%;
        padding: 0;
        margin: 12px 0 0 12px;
    }

    img[alt="Thank You Image"] {
        float: right;
        width: 40%;
        position: relative;
        z-index: -5;
        padding: 0;
        margin: -20% -60px 0 -36px;
    }

    img[alt="Wheelchair Image"] {
        float: right;
        width: 11%;
        margin: 0 5rem 0 0;
    }

    img[alt="Paper Boy"] {
        padding: 18px 32px 6px 32px;
    }

    img[alt="Border Crossing archive image"] {
        padding: 18px 32px 6px 32px;
    }

    img[alt="Training schedule"] {
        padding: 12px 32px 0 32px;        
    }

    img[alt="Lions of Canada website"] {
        padding: 12px 32px 0 32px;        
    }

    img[alt="Lions band graphic"] {
        padding: 0 24px 0 24px;
    }

    img[alt="link to MD19 Lions Foundation"] {
        padding: 15px 42px 0 42px;
    }

    img[alt="link to Northwest Lions Foundation"] {
        padding: 12px 24px 6px 24px;
    }

    img[alt="link to LERC newsletter"] {
        padding: 24px 6px 24px 15px;
    }

    img[alt="link to LERC resources"] {
        padding: 18px 12px 18px 12px;
    }

    img[alt="Proposed MD19 Map"] {
        float: right;
        width: 28%;
        padding: 18px 0 0 8px;
    }

    /*img[alt="Link to redistricting page"] {
        float: right;
        width: 28%;
        padding: 12px;
        border: 1px solid rgba(255, 0, 0, 1);
        border-radius: 12px;
        box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .2);
        margin: 16px 0 0 12px;
    }*/

    /*a img[alt="Link to redistricting page"]:active {
        box-shadow: none;
    }*/

    img[alt="Knights of the Blind logo"] {
        float: right;
        width: 12%;
        padding: 16px 0 0 12px;
    }

    img[alt="Paper people"] {
        float: right;
        width: 28%;
        padding: 4px 0 0 8px;
    }

    img[alt="I Voted"] {
        float: right;
        width: 14%;
        padding: 0.5em 0 0 12px;
    }

    img[alt="New MD19 map"] {
        float: right;
        width: 15%;
        padding: 1em 0 0 8px;
    }

    img[alt="district map"] {
        padding: 8px;
    }

    /*img[alt="convention image"]{
        float: right;
        width: 28%;
        margin: 8px 0 0 0;
    }*/

    /*img[alt="Convention logo"] {
        float: right;
        width: 25%;
        padding: 1em 0 0 8px;
    }*/

    /*img[alt="Convention icon"] {
        float: right;
        width: 19%;
        padding: 1em 0 0 8px;
    }*/

    img[alt="Three Peaks Mountain Snowflake"] {
        float: left;
        width: 16%;
        padding: 24px 8px 0 0;
    }

    img[alt="speed limit sign"] {
        float: left;
        width: 11%;
        padding: 1em 16px 0 0;
    }

    img[alt="pi symbol"] {
        float: right;
        width: 14%;
        margin: 8px 0 0 4px;
    }

    img[alt="New Districts Map"] {
        float: right;
        width: 32%;
        margin: 6px 0 0 0;
    }

    img[alt="legacy districts map"] {
        float: right;
        width: 15%;
        margin: 6px 0 0 0;
    }

    img[alt="Potato Chef Image"] {
        float: right;
        width: 12%;
        margin: -12px 0 0 8px;
    }

    img[alt="champagne bottle"] {
        float: right;
        width: 16%;
        margin: -60px 48px 0 36px;
        transform: rotate(30deg);
    }

    img[alt="New Voices logo"] {
        float: right;
        width: 24%;
        margin: 0 0 0 12px;
    }

    img[alt="Early Bird"] {
        float: right;
        width: 21%;
        margin: -8px 0 0 12px;
    }

    img[alt="Donate image"] {
        float: right;
        width: 21%;
        margin: 16px 0 0 16px;
    }

    img[alt="Email"] {
        float: right;
        width: 20%;
        margin: 24px 0 0 16px;        
    }

img[alt="Benefits icon"] {
    width: 100px;
    float: left;
    margin: 4px 16px 4px 0;  
}


/* THESE ARE TO POSITION THE CANCELLED STAMP ON A LIST ITEM */

    img[alt="Cancelled stamp"] {
        position: absolute;
        width: 55%;
        top: 0;
        left: 6rem;
    }

    li.cancelled {
        position: relative;
    }

/* THESE ARE FOR THE HOLIDAY CARD ON THE HOME PAGE*/

    img[alt="holiday dove image"] {
        padding: 48px;
        border: 1px solid rgba(179, 178, 177, .2);
        border-radius: 8px;
}

    img[alt="New Year"]  {
        padding: 12px 18px;
    }

/* THESE ARE THE GRAPHICS FOR THE ANNOUNCEMENTS AND DATES */

    img[alt="Lion reading"] {
        float: right;
        width: 21%;
        height: auto;
        margin: -36px 0 0 20px;
        padding: 0;
    }

    img[alt="CARE Logo"] {
        float:right;
        width: 20%;
        height: auto;
        margin: -12px 0 0 24px;
        padding: 0; 
    }

    img[alt="Lions Journey Graphic"] {
        float:right;
        width: 24%;
        height: auto;
        margin: -8px -24px -24px -8px;
        padding: 0; 
    }

    img[alt="Gone Fishing Graphic"] {
        float:right;
        width: 20%;
        height: auto;
        margin: -8px 0 0 24px;
        padding: 0; 
    }

    img[alt="Christmas ship notice"] {
        float:right;
        width: 17%;
        height: auto;
        margin: 20px 0 0 24px;
        padding: 0; 
    }

    img[alt="Turkey drinking beer"] {
        float:right;
        width: 15%;
        height: auto;
        margin: -20px 0 0 12px;
        padding: 0; 
    }
    
    img[alt="Closed Sign"] {
        float:right;
        width: 28%;
        height: auto;
        margin: -16px -16px 0 -16px;
        padding: 0;
    }

    img[alt="help wanted sign"] {
        float:right;
        width: 20%;
        height: auto;
        margin: 8px 0 0 16px;
        padding: 0;             
    }

    img[alt="Hooray image"] {
        float:left;
        width: 20%;
        height: auto;
        margin: -12px 24px -12px 28px;
        padding: 0;    
    }

    img[alt="wine glasses"] {
        float: right;
        width: 15%;
        margin: 24px 0 0 12px;

    }

img[alt="VCC debate flyer"] {
    float: right;
        width: 30%;
        margin: 0 0 0 12px;
    }

    /*#home .span_1_of_2 .box {
        margin: 0;
        border-radius: 8px;
    }*/ /* This is for the top and bottom margins on the LCIF donation logos on the home page */

    /*a:hover img {
        opacity: .6;
         border-color: rgba(255, 92, 53, 1); 
    }*/

    /*img[alt="Lion Logo Face Mask Picture"] {
        float: right;
        width: 20%;
        margin: 4px 0 0 24px;
        padding: 0
    }*/

    /*img[alt="MD19 Logo Face Mask Picture"] {
        float:left;
        width: 20%;
        margin: 12px 24px 0 0;
        padding: 0
    }*/

    /*img[alt="Tee Shirt Picture"] {
        float: right;
        width: 20%;
        margin: 4px 0 0 24px;
        padding: 0;
    }*/

    img[alt="USA Canada Logo"] {
        float: right;
        width: 18%;
        margin: 24px 0 0 18px;
        padding: 0
    }

    img[alt="NWLLI logo"] {
        float: right;
        width: 10%;
        margin: 4px 0 0 18px;
        padding: 0
    }

    img[alt="Update image"] {
        float: right;
        width: 15%;
        margin: 16px 0 0 8px;
    }

    img[alt="QR Code"] {
        float: right;
        width: 12%;
        margin: 1em 0 0 16px;
    }

    img[alt="rescheduled stamp"] {
        float: right;
        width: 22%;
        margin: -24px 0 0 8px;
    }

    img[alt="postponed stamp"] {
        float: right;
        width: 24%;
        margin: -16px 0 0 0;
    }

    /*img[alt="Runners image"] {
        float: right;
        width: 24%;
        margin: 28px 0 8px 16px;        
    }*/

    /*img[alt="postponed stamp"] {
        position: absolute;
        top: 44%;
        left: 45%;
        width: 20%;
    }*/

    /*img[alt="rescheduled stamp"] {
        position: absolute;
        top: 43%;
        left: 41%;
        width: 20%;
    }*/

    img[alt="LCI fee update"] {
        float: left;
        width: 12%;
        margin: -8px 12px 0 0;
    }

    img[alt="Happy birthday"] {
        float: right;
        width: 20%;
        margin: o 0 12px 12px;
    }

    /*img[alt="MD19 Band logo"] {
        float: right;
        width: 24%;
        margin: -18px 0 0 0;
    }*/

    img[alt="New clip art"] {
        float: right;
        top: 12px;
        left: 12px;
        width: 4%;
        z-index: 999;
    }

    #home img[alt="New clip art"] + li {
        list-style: none;
    }  /* Gets rid of the bullet on the list when the clip art is on the left side of the list */

    #resources img[alt="New"] {
        display: block;
        z-index: 100;
        width: 4rem;
        border: none;
    }

    img[alt="Archive Stamp"] {
        padding-top: 12px; 
    }

    img[alt="Update stamp"] {
        float: right;
        width: 18%;
        margin: -8px 0 0 0;
        /*transform: rotate(-20deg);*/
    }

    #home img[alt="Cocktail Image"] {
        float: right;
        width: 18%;
        margin: -12px 0 0 12px;
    }

    img[alt="Champagne glasses"] {
        float: right;
        width: 18%;
        margin: 12px 0 0 12px;
    }

    img[alt="MD district icon"] {
        float: right;
        width: 10%;
        margin: 0;
    }

    /*img[alt="District Consolidation Guide"] {
        border: 1px solid rgba(85, 86, 90, .2);
    }*/

    img[alt="Putting image"] {
        float: right;
        width:  30%;
        margin:  60px 0 0 0;
    }

    img[alt="Golf cartoon"] {
        float: right;
        width:  15%;
        margin:  4px 0 0 18px;
    }

    img[alt="Dollar sign"] {
        float: right;
        width:  8%;
        margin:  12px 0 0 18px;
    }

    img[alt="No cost sign"] {
        float: right;
        width:  12%;
        margin:  24px 0 0 12px;
    }

    /*img[alt="Convo 2021 Logo"] {
        float: right;
        width:  18%;
        margin:  24px 0 0 12px;
    }*/

    /*.hunt-email figure {
        margin: 1em 0 1em 0;
    }*/

    /*.hunt-email figcaption {
        margin-top: -4em;
    }*/

    /*img[alt="Picture of flooding in Sumas Washington"] {
        float: right;
        width:  40%;
        margin:  8px 0 8px 12px;        
    }*/

    img[alt="Easel image"] {
        float: right;
        width: 28%;
        margin: 12px 0 0 1em;
    }

    img[alt="Gas pump image"] {
        float: left;
        width: 9%;
        margin: 16px 16px 0 0;
    }

    img[alt="Meet The Candidates"] {
        display: block;
        margin: 24px auto;
    }

    img[alt="VDG training image"] {
        float: right;
        width: 18%;
        margin: 6px 0 0 12px;
    }

    img[alt="Club Excellence Award"]{
        float: right;
        width: 12%;
        margin: 12px 0 0 24px;
    }

    img[alt="Job Opening"]{
        float: left;
        width: 20%;
        margin: 0 12px 0 0;
    }

img[alt="DG Donna Murr Logo"] {
    margin-bottom: 2em;
}

/* ANNIVERSARIES */

    img[alt="100th anniversary logo"] {
        float: right;
        width: 18%;
        margin: 12px 0 0 8px;
    }

    img[alt="95th anniversary logo"] {
        float: right;
        width: 15%;
        margin: 0 0 0 8px;
    }

    img[alt="85th anniversary logo"] {
        float: right;
        width: 17%;
        margin: 16px 0 6px 6px;
    }

    img[alt="80th anniversary logo"] {
        float: right;
        width: 15%;
        margin: 8px 0 6px 6px;
    }

    img[alt="75th anniversary logo"] {
        float: right;
        width: 17%;
        margin: 16px 0 6px 6px;
    }

    img[alt="70th anniversary logo"] {
        float: right;
        width: 17%;
        margin: 16px 0 6px 6px;
    }

    img[alt="60th anniversary logo"] {
        float: right;
        width: 15%;
        margin: 16px 0 0 8px;
    }

    img[alt="50th anniversary logo"] {
        float: right;
        width: 18%;
        margin: 16px 0 0 8px;
    }

    img[alt="patti hill photo"] {
        float: left;
        width: 14%;
        margin: 21px 24px 0 8px;
    }

    img[alt="Oliviera photo"] {
        float: left;
        width: 14%;
        margin: 21px 24px 0 8px;
    }

    img[alt="President Oliviera's official pin"] {
        float: right;
        width: 18%;
        margin: 6px 0 24px 8px;
    }

    img[alt="Clapping hands"] {
        float: right;
        width: 18%;
        margin: 12px 0 0 8px;        
    }

    img[alt="environment icon"] {
        float: right;
        width: 12%;
        margin: 0 0 0 8px;
    }

    img[alt="Global Action Team logo"] {
        float: right;
        width: 17%;
        margin: -4px 0 0 16px;
    }

    img[alt="QR code 2026"] {
        float: right;
        width: 17%;
        margin: 0 0 0 16px;
    }



/* THIS IS THE CARTOON ON THE BRAG PAGE */

    img[alt="Brag Image"] {
        float:right;
        width: 22%;
        height: auto;
        margin: -4px 0 0 10px;
        padding: 0; 
    }
    

/* THESE ARE IMAGES FOR HELP, REPORTING CORRECIONS AND BROKEN LINKS */

    img[alt="help image"] {
        float: left;
        width: 24%;
        height: auto;
        margin-right: 10px;
    }

    img[alt="lightbulb image"] {
        float: left;
        width: 18%;
        height: auto;
        margin-right: 10px;
    }

    img[alt="checkmark image"] {
        float: left;
        width: 23%;
        height: auto;
        margin-right: 10px;
/*        margin-top: 4px;*/
    }

    img[alt="broken link image"] {
        float: left;
        width: 20%;
        height: auto;
        margin-right: 10px;
    }

    img[alt="rule book image"] {
        float: left;
        width: 30%;
        height: auto;
        margin-right: 12px;
    }



/* THE VIDEO LINK CAMERA IMAGE */

    img[alt="video camera image"] {
        float: left;
        width: 30%;
        height: auto;
        margin-right: 24px;
    }


/* THESE ARE FOR THE MD19 MAP IMAGES */

    .map {
        margin-bottom: 30px;
    }

/* THESE ARE FOR THE SOCIAL MEDIA ICON IMAGES */

    .social {
        margin-bottom: 30px;
    }

    .social img {
        margin: 0;
        border: 1px solid rgba(179, 178, 177, 1);
        border-radius: 50%;
    }

    .social a img:hover {
        border-color: rgba(255, 92, 53, 1);
        box-shadow: 0 0 16px 3px rgba(255, 204, 0, .5);
        opacity: 0.6;
    }

    .social a img:active {
        opacity: 1;
    }

/* THESE ARE THE DEFAULT THUMBNAIL IMAGES */

    .thumbnail img,
    img[alt="Rule Book"] {
        box-shadow: 0 0 4px 1px #ccc;
        border: 1px solid transparent;
    }

    .thumbnail img:hover,
    img[alt="Rule Book"]:hover {
        border-color: rgba(255, 92, 53, 1);
        opacity: .6;
    }

    .thumbnail img:active,
    img[alt="Rule Book"]:active {
        opacity: 1;
    }


/* THESE ARE THE THUMBNAIL IMAGES FOR THE AWARDS */

    .awards img {
        border: 1px solid transparent;
        box-shadow: 0 0 4px 1px #fff;
        padding: 0;
    }

    .awards figure {
        background-color: rgba(255, 255, 255, 1.0);
        padding: 0;
        margin:  0 0 32px 0;
        border: 1px solid transparent;
    }

/* THESE ARE THE THUMBNAIL IMAGES FOR THE CLIP ART */

    table.documents,
    table.clip_art {
        border-left: 1px solid rgba(85, 86, 90, .5);
        border-right: 1px solid rgba(85, 86, 90, .5);
    }

    .clip_art td {
        padding-right: 12px;
    }

    .clip_art img {
        width: 8rem;
        padding: 8px 0 8px 0;
    }

    .clip_art img:hover {
        opacity: .6;
    }

    .clip_art td {
        vertical-align: middle;    
    }

    .clip_art td:first-of-type {
        border-right: hidden;
    }

    .clip_art td:last-of-type {
        border-left: hidden;
    }

/*  THESE ARE FOR FORMS AND LEARNING DOCUMENT TABLES */

    .documents td {
        width: 25%;
    }

    .documents td {
        /*font-size: 1rem;*/
        vertical-align: middle;
    }

    .documents td:first-of-type {
        border-right: hidden;
    }

    .documents td:last-of-type {
        border-left: hidden;
    }

    .documents img {
        border: 1px solid rgba(85, 86, 90, .5);
        box-shadow: 2px 2px 6px 3px rgba(179, 178, 177, .3);
        width: 90%;
        margin: 8px 0;
    }

    .documents img:hover {
        box-shadow: -2px -2px 6px 3px rgba(179, 178, 177, .3);
        border: 1px solid rgba(255, 92, 53, 1);
    }


    img.redistricting-image[alt="Document Thumbnail Image"] {
        border: none;
    }

/* THESE ARE FOR THE LCI SIGNATURE LOGO IMAGE */

    .lci-signature {
        margin: 15px 0;
        display: none; /* To show or hid the LCI signature logo */
    } /* This is the LCI signature logo */

    .lci-signature:hover {
        opacity: .6;
    }

/* THESE ARE FOR THE MD19 LOGO IMAGES */

    .span_1_of_3 {
        position: relative;
    } /* This sets the containing element for positioning the MD19 logo image */

    .md-logo {
        width: 104px;
        position:absolute;
        top: 0;
        right: 16px; 
    } /* This positions the md19 logo top right in the column next to the map */

    .md-logo:hover {
        opacity: .6;
    }

    .md-logo:active {
        opacity: 1;
    }

    img[alt="LCI Icon"] {
        padding: 8px;
        background-color: rgba(0, 77, 153, 1);
    }

/* THESE ARE FOR THE THE SUBDISTRICT ICONS */

    /*img[alt="district l icon"],
    img[alt="district i icon"],
    img[alt="district o icon"],
    img[alt="district n icon"],
    img[alt="district s icon"] {
        float:left;
        width: 10%;
        padding: 8px;
    }*/

    img[alt="District L logo"],
    img[alt="District I logo"],
    img[alt="District O logo"],
    img[alt="District N logo"],
    img[alt="District S logo"] {
        float:right;
        width: 12%;
        height: auto;
        margin: 0 0 0 8px;     
    }

img[alt="PowerPoint Icon"] {
    width: 110px;
    height: auto;
    margin: 1em;
    border: none;
    box-shadow: none;        
}



/* AUDIO */

    audio {
        width: 100%;
        margin-top: -24px;
    }

/* VIDEOS */

    video {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(179, 178, 177, .2);
        /*box-shadow: 0 0 4px 1px #ccc;*/
    }

    /*video:hover {
        border-color: rgba(152, 50, 34, 1);
        box-shadow: 0 0 4px 1px rgba(255, 204, 0, 1);
        opacity: .6;
        cursor: pointer;
    }*/

    /*video:active {
        opacity: 1;
    }*/



    #about .care-video {
        padding: 18px 0 12px 0;
        border-top: 6px solid rgba(85, 86, 90, .8);
        border-bottom: 6px solid rgba(85, 86, 90, .8);
    }

/* MODALS */

    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        /*background-color: rgb(0,0,0);*/ /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    } /* The Modal (background) */

/* THESE ARE STYLES FOR THE VIDEO MODALS */

    .videoModalContent {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        /*-moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;*/
        box-shadow: 1px 1px 3px #000;
    } /* Modal Content */

    .videoBtn {
        border: none;
        background-color: #fff;	
        padding: 0 0 0 0;
        box-shadow: none;
        margin-bottom: 8px;
    } /* The open button */

    .videoBtn:hover {
        cursor: pointer;
        opacity: .6;
        border: none;
        box-shadow: none;
        background-color: #fff;
    }

    .videoBtn img {
        width: 100%;
        border: 1px solid rgba(85, 86, 90, .2);
    }

    .close {
        background: #666;
        color: #FFFFFF;
        line-height: 100%;
        font-size: 180%;
        position: absolute;
        right: 9%;
        text-align: center;
        padding: 4px 12px;
        top: 90px;
        width: 40px;
        height: 40px;
        text-decoration: none;
        font-weight: bold;
        /*
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        */
        border-radius: 100%;
        /*
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        */
        box-shadow: 1px 1px 3px #000;
    } /* The Close Button */

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    #modalVideo {
        opacity: 1;
        border: none;
        box-shadow: none;
    } /* This removes the default outline that is on video links */




/* THESE ARE STYES FOR THE POP UP WINDOW MODALS*/

    .overlay {
        display: inline-block;
        }

    .modal-content {
        position: relative;
        background-color: rgba(255, 255, 255, 1.0);
        margin: auto;
        padding: 0 2em;
        border: 1px solid rgba(0, 0, 0, 1.0);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 52em;
        max-height: 42em;
        overflow: auto; /* This puts the scrollbar in the content window */
        }

    #marketing .modal-content {
        width: 70%;
        max-height: 85%;
        padding: 2em 4em;
    }

    /*input[type=checkbox] {
        position: absolute;
        clip: rect(0 0 0 0);
        }*/

    /*
    #modal-01:target,
    #modal-02:target,
    #modal-03:target,
    #modal-04:target,
    #modal-05:target,
    #modal-06:target,
    #modal-07:target,
    #modal-08:target,
    #modal-09:target,
    #modal-10:target,
    #modal-11:target,
    #modal-12:target,
    #modal-13:target,
    #modal-14:target,
    #modal-15:target,
    #modal-16:target,
    #modal-17:target,
    #modal-18:target,
    #modal-19:target,
    #modal-20:target,
    #modal-21:target,
    #modal-22:target,
    #modal-23:target {
        display: block;
        z-index: 999;
        }
        */

    [id^="modal"]:target {
        display: block;
        /*z-index: 999;*/
        } /* target is the place clicking the button goes --  what pops up -- ^ selects all id's that start with the letters "modal" -- this replaces the seperate selectors for each target */

    .modal-header {
        /*margin: 0 0 3em 0;*/
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        }

    .modal-header a,
    .modal-header button {
        background-color: rgba(255, 255, 255, 1);
        border: 2px solid rgba(255, 183, 0, 1);
        box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .1);
        padding: 8px 12px;
        font-size: 1rem;
        color: blue;
        font-weight: 600;
        border-radius: 12%;
        float: right;
        margin: 1em -1em .5em 0;
        }

    /*.close-button {
        font-size: 2em;
    }*/

    .modal-header a:hover,
    .modal-header button:hover {
        color: red;
        border-color: red;
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }        

    .modal-body {
        clear: both;
        display: block;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    #marketing .modal-body h3 {
        margin: 24px 0 1em 0;
        text-transform: uppercase;
        border-bottom: 1px solid;
        padding-bottom: 8px;
    }

    .modal-footer {
        clear: both;
        display: block;
        margin-top: 1em;
        /*border-top: 1px solid rgba(85, 86, 90, 1);*/
    }

    #marketing .modal-footer {
        clear: both;
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
        border-top: 1px solid rgba(85, 86, 90, 1);
        text-align: center;
    }

    #marketing .modal-footer p {
        font-size: 1em;
        margin-top: 8px;
    }


/* STYLES FOR POP UP WINDOWS */

    .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      transition: opacity 500ms;
      visibility: hidden;
      opacity: 0;
    }

    .overlay:target {
      visibility: visible;
      opacity: 1;
    }

    .popup {
      margin: 70px auto;
      padding: 20px;
      background: #fff;
      border-radius: 5px;
      width: 50%;
      position: relative;
      transition: all 5s ease-in-out;
    }

    #popup1 .popup {
        background: none;
    }

    .popup .close {
      position: absolute;
      top: 30px;
      right: 20px;
      transition: all 200ms;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #000;
    }

    #popup1 .popup .close {
        background-color: #fff;
    }

    .popup .close:hover {
      color: red;
    }

    .popup .content {
      max-height: 30%;
      overflow: auto;
}



/* STYLE MODIFICATIONS FOR DIFFERENT PAGES */

    #calendar {
        margin: 20px auto;
    }

/* STYLE MODIFICATIONS FOR SNIPPETS */

    /*.sidebar.snippets {
        padding: 1rem 2rem;
        background-color: rgba(85, 86, 90, .1);
        border: none;
    }*/ /* Pretty sure this can be removed... can't find where it is used */

    .snippets {
        margin: 24px auto;
        padding: 24px 0 16px 16px;
        border: 1px solid rgba(0, 172, 105, .5) /*rgba(200, 200, 200, .2)*/;
        background-color: rgba(200, 200, 200, .1); 
        }
        
    .snippets p,
    .snippets li{
        font-size: 1rem;
        }

    .snippets p {
        line-height: 1.7;
        margin: 1rem 20px;
    }
    
    .snippets ul {
        margin: 0 0 0 1rem;
        padding: 0 1rem;
    }

    .snippets li,
    .snippets li li {
        line-height: 1.5rem;
        padding: 0;
    }

    .snippets li {
        margin: 0 0 .6rem -8px;
/*        padding: 0;*/
    }

    .snippets li li {
        margin-bottom: .6rem;
        margin-top: .6rem;
    }

    .snippets h5 {
        font-size: 1.4em;
        margin: 1rem 0;
        text-align: left;
        text-transform: uppercase;
        }
    
    .snippets h5:first-of-type {
        border-bottom: 8px solid rgba(0, 172, 105, 1.0);
        text-indent: 16px;
        display: inline-block;
        line-height: 1.5em;
        margin: 0 0 1em -16px;
    } /* This is the dateline heading */

    .snippets #datetime {
        text-transform: uppercase;
    }

    .snippets a img:hover {
        filter:drop-shadow(0 0 6px rgba(85, 86, 90, 0.8));
        opacity: 1;
    }