/* 

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

Vancouver Lions Club

Site revision: December 4, 2021

Standard colore:
    yellow: 235, 183, 0
    blue: 0, 51, 141
    light blue: 64, 124, 202
    light gray: 179, 178, 177
    gray: 85, 86, 90
    red: 255, 92, 53
    purple: 122, 38, 130
    green: 0, 172, 130

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;
    }



/* 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-size: 1em; /* Changed to em from % when wrapper removed */
        color: #000;
        margin: 0 auto; /* Added this when wrapper removed */
        padding: 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 */

    footer .group {
        padding-bottom: 1.6em;
        padding-left: 2em;
    }



/* 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 */
    
    main .col .col {
        padding: 0;
    } /* elimnates the padding from the pictures on the sidebars */ 

    main .col:first-child {
        padding: 0;
    } /* This is the left coulmn on the home page */

    #home main .col:nth-of-type(2):not(#newsletter main .col:nth-of-type(2), #join main .col:nth-of-type(2)) {
        padding: 0 16px;
        } /* This is the middle column on the home page */

    #join main .group:nth-of-type(4) .col,
    #join main .group:nth-of-type(7) .col,
    #join main .group:nth-of-type(12) .col {
        padding: 0;
    } /* What does this do? */



/* CONTAINERS */

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

     header:not(#home header) {
/*        border-bottom: solid 3px rgba(235, 183, 0, 1);*/
        border-bottom: solid 1px rgba(85, 86, 90, 1);
        margin-bottom: 1em;
    } 

    header img {
        width: 100%; /* probably not necessary at 100% width */
        margin: 2em 0 0 0; 
    }

    header .group img {
        width: 100%;
        margin: 0;
    }

    #join section {
        padding: 0 6%;
        text-align: center;
    }

    aside {
        width: 40%;
        border-top: 6px solid rgba(0, 51, 141, 1);
        border-bottom: 3px solid rgba(0, 51, 141, 1);
        padding: 1em 20px 0 20px;
        font-size: .8em;
        font-style: italic;
        color: rgba(0, 51, 141, 1);
    }

    .sidebar {
        width: 100%;
        padding: 12px 16px 16px 16px;        
        /*background-color: rgba(179, 178, 177, .1);*/
        /*border-top: 1px solid rgba(85, 86, 90, 1);*/
        /*border: 1px solid rgba(179, 178, 177, .2); */
        /*border: 1px solid rgba(235, 183, 0, 1.0); */
        border: 1px solid rgba(0, 172,105, 1.0); /* Green */
        margin-bottom: 16px;
    }

    /* .sidebar:first-of-type {
        border-top: none;
    } */

    .sidebar + .sidebar {
        margin-top: 1em;
    }

    figure {
        border: 1px solid rgba(179, 178, 177, .2);
        background-color: rgba(179, 178, 177, .1);
        margin: 0 0 16px 0;
        padding: 12px 12px 8px 12px;
    }

    sidebar + figure {
        margin-bottom: 16px;
    }

    figcaption {
        font-size: .9em;
        font-weight: 400;
        /* color: #000; */ /*rgba(85, 86, 90, 1) */
        text-align: center;
        margin-top: 8px;
        line-height: 1.6;
    }

    .slideshow {
        margin: 0 0 1em 0;
        border: 1px solid rgba(179, 178, 177, 1);
        background-color: rgba(178, 178, 177, .1);
        padding: 12px;
    }

    footer {
        margin-top: 1.6%;
        font-size: .8em;
        background-color: rgba(179, 178, 177, .1);
        border: 1px solid rgba(179, 178, 177, .2); 
        padding: 8px 0 12px 0;
    }

    .box {
        border: 1px solid rgba(85, 86, 90, .3);
        padding: 16px;
        margin: 1em 0 30px 0;
    } /* Box around clip art and graphics */

    .box figure {
        margin: 0;
    }

    .ad {
        margin-bottom: 16px;    
        border: 1px solid rgba(85, 86, 90, .3);
        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: 0;
        box-shadow: 0 0 4px 1px rgba(85, 86, 90, .3);    
    }

    a .ltr:hover {
        box-shadow: 0 0 4px 1px rgba(255, 92, 53, 1); 
    }

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

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

/* STYLES FOR THE SHOW MORE BUTTON */

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


/* HEADINGS */

    h1,
    h2,
    h3 {
        font-weight: 300;
        color: rgba(85, 86, 90, 1);
    }

    h1 { 
        font-size: 4.2em;
        margin: 60px 0 0 0;
    }

    header h1 {
        font-size: 1.4em;
        text-transform: capitalize;
        margin: 8px 0 24px 0;
        padding: 0;
        text-align: center;
    }

    h2 { 
        font-size: 3.2em;
    }

    h1+h2 {
        margin-top: 0;
    }

    h3 { 
        font-size: 2em;
        /*margin: 1em 0 0 0;*/
    }

    h4 { 
        font-size: 1.7em;
        /*margin: 1em 0 0 0;*/
    }

    h3 {
        /*padding-bottom: 20px;*/ /* added space below the title for each page */
        margin: 16px 0 20px 0;
    }

    h3 strong {
/*        color: rgba(0, 51, 141, 1);*/
        color: rgba(235, 183, 0, 1);
        padding-right: 10px;
        border-right: 1px solid;
    }
/*
    h3 a:hover {
        text-decoration: none;
    }
*/
    h3:before {
        content: "";
        height: 40px;
        width: 40px;
        background: url(../images/lionlogo_2c_40.png) 0 0 no-repeat;
        float: left;
        margin: -3px 12px 0 0;
    } /* to insert logo before the heading */

    /* h3:after {
        content: "";
        height: 40px;
        width: 56px;
        background: url(../images/VLC_90_40_solid.png) 0 0 no-repeat;
        float: right;
    } */ /* to insert logo after the heading */

    h4 {
        font-weight: 600;
        color: rgba(0, 51, 141, 1); /* blue */
        letter-spacing: .3px;
        margin: 0 0 16px 0;
        text-transform: uppercase;
    }

    h5 {
        font-size: 1.4em;
        line-height: 1.4em;
        font-weight: 600;
        margin: 20px;
        text-align: center;
        color: rgba(85, 86, 90, 1); /* grey */
    }

    .sidebar h5 {
        color: rgba(0, 51, 141, 1);
        text-transform: uppercase;
        font-style: italic;
        text-align: left;
        text-indent: 16px;
        border-bottom: 8px solid rgba(0, 172, 105, 1); /* gold  */
        display: inline-block; /* Forces bottom border to with of the paragraph */
        margin: 16px 0 1em -16px;
    }

    /*h5.subhead {
        font-family: "Times New Roman";
        font-style: italic;
        text-transform: capitalize;
        font-weight: 200;
        font-size: 1.4em;
        margin: 16px 0 0 0;
    }*/

    #helen_keller h5 {
        font-weight: 600;
    }

    #join h5 {
        font-size: 2em;
        font-weight: 400;
        margin: 30px 0 10px 0;
    }

    h6 { 
        font-size: .8em;
        text-align: center; 
        font-weight: 700;
        margin: 5px 0 15px 0;
    }




/* BASIC TYPOGRAPHY */

    p,
    ol,
    ul,
    dl,
    address,
    summary { 
        margin: 0 0 1em 0; 
        font-size: 1.2em;
        line-height: 1.6em;
        font-weight: 300;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto; /* Automatic hyphens not supported in Chrome */
        hyphens: auto;  
    }

    main .group .col:last-child p {
        color: rgba(0, 51, 141, 1); /* blue  */
    }

    p:first-child {
        margin-top: 0; /* closes space to header from first paragraph */
        }

    /* main .group .col:nth-of-type(2) {
        margin-top: 3em;
    } */

    abbr {
        border-bottom: 1px rgba(85, 86, 90, 1) dotted;
        cursor: pointer;
    }

    .quote {
        margin: 1em 2em 1em 2em;
    }

    /* .notice {
        border: ridge 8px rgba(255, 92, 53, 1);
        border-radius: 12px;
    } */

    .footnote {
        font-size: 70%;
        margin: 1em 0 0 0;
        border-top: dotted 1px rgba(0, 51, 141, 1); /* blue */
        padding-top: 1em;
    }

    /*.footnote p {
        text-indent: 0;
    }*/

    p.notice,
    ul.notice {
        color: rgba(255, 0, 0, 1); /* red  */
    }

    #join p {
        color: rgba(85, 86, 90, 1); /* grey  */
        line-height: 1.5em;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;  
        }

    #join section p {
        font-size: 1.4em;
        }

    .sidebar p {
        font-size: 1em;
        color: rgba(0, 51, 141, 1); /* blue */
        margin: 0;
        text-indent: 16px;
    }

    .sidebar p:first-of-type:not(.footnote p) {
        text-indent: 0;
    }

    footer p {
        text-align: center;
        margin: 0;
        padding: 0 1em 1em 1em;
    }

    b,
    strong { 
        font-weight: 600; 
    }

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

    small { 
        font-size: 1em; /* 16/16 = 1 */ 
    }

    .smallcaps {
        font-variant: small-caps;
    }

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

    sup { 
        top: -0.6em; 
    }

    sub { 
        bottom: -.25em; 
    }




/* LISTS */

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

    li {
        margin: 1em 20px;
        }

    ul.date {
        list-style-type: none;
        padding-left: 0;
    }

    .date li {
        margin-left: 12%;
        padding: 16px 0 0 0;
        /*border-top:  1px solid rgba(255, 0, 0, 1);*/
        /*border-top: 1px solid rgba(85, 86, 90, .3);*/
        border-top: 1px solid rgba(235, 183, 0, 1);
    }

    .date li:first-of-type {
        border: none;
    }

    ul.announcements {
        list-style-type: none;
        padding-left: 0;
    }

    ul.announcements li {
        margin-left: 0;
        padding: 16px 0 0 0;
        /*border-top:  1px solid rgba(255, 0, 0, 1);*/
        /*border-top: 1px solid rgba(85, 86, 90, .3);*/
        border-top: 1px solid rgba(235, 183, 0, 1);
    }

    ul.announcements li:first-of-type {
        border: none;
    }

    footer li {
        margin: 0;
        list-style-type: none;
        }

    footer .group li:first-child {
        color: rgba(85, 86, 90, .8);
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: uppercase;
        text-decoration: underline;
        margin-bottom: 5px;
        font-size: .8em; /* For reasons that escape me, this does not inherit the footer font size */
        }

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

    .breaking-news li:not(li li) {
        margin: 0 0 0 48px;
        padding: 16px 0;
        /*border-top:  1px solid rgba(255, 0, 0, 1);*/
        /*border-top: 1px solid rgba(85, 86, 90, .3);*/
        border-top: 1px solid rgba(235, 183, 0, 1);
    }

    .breaking-news li:first-of-type {
        border: none;
    }

    #walk_and_knock main ul,
    #contact main ul {
        margin: 0 0 0 30px;
        padding: 0;
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
        -webkit-column-gap: 8px; /* Chrome, Safari, Opera */
        -moz-column-gap: 8px; /* Firefox */
        column-gap: 8px;
    }

    #walk_and_knock main li,
    #contact main li {
        margin: 0 0 8px 0;
        padding-left: 8px;
    }

    .droplist {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
        -webkit-column-gap: 0; /* Chrome, Safari, Opera */
        -moz-column-gap: 0; /* Firefox */
        column-gap: 0;
        padding-right: 0;
    }

    .droplist ul {
        margin-top:0;
        padding: 0;
    }

    .droplist li {
        font-size: .9em;
        margin: 0;
        padding: 0;
        list-style-type: none;
        line-height: 1.4em;
    }

    .droplist li ul {
        /*margin-left: 1em;*/
        padding: 0;
    }

    .droplist li:first-of-type {
        font-weight: 600;
    }

    .droplist li li:first-of-type {
        font-weight: 300;
    }

    #hearing-foundation ul {
        list-style-type: none;
    }

    #hearing-foundation ul ol li {
        font-size: 1.2rem;
        margin: .5em 20px;
        line-height: 1.6em;
    }

    #members main .col .sidebar ol {
        margin-left: 32px;
        padding: 0;
        font-size: 1em;
        color: rgba(0, 51, 141, 1); /* blue */
        margin-bottom: .8em;
        border: none;
    }

    #members main .col .sidebar ol li {
        margin: 0;
        padding: 0;
        border: none;
    }

    #members main .col .sidebar ol li:hover {
        background-color: rgba(179, 178, 177, 0);
    }


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

    .club-list {
        border-bottom: 1px solid rgba(85, 86, 90, .2);
        margin-bottom: 1em;
    }

    .clubs ul {
        list-style-type: none;
        margin: 0 0 1rem 4rem;
        font-size: 1.2rem;
        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 EXPANDABLE DETAIL LISTS */

    summary {
        margin: 0 0 0 0;
        padding: 1em;
        border-top: 1px solid rgba(85, 86, 90, .2);
        /*font-size: 1em;*/
        cursor: pointer;
    }

    summary:focus {
        outline: none;    
    }

    summary::-webkit-details-marker {
        color: rgba(122, 38, 130, 1);
    } /* styles the marker. Doesn't work in IE */

    details {
        margin-left: 24px;
    }

    details p {
        margin-left: 4rem;
    }


/* FORMS */

    form {
        font-weight: 300;
        font-size: 1.1em;
        margin-left: 3em;
        width: 70%;
    }

    form p {
        font-size: 1.1em;
    }

    input[type="text"],
    textarea {
        width: 100%;
        border: 1px solid rgba(0, 51, 141,.5);
        font-size: 1em;
        margin-bottom: 1em;
    }

    input[type="text"] {
        height: 30px;
        padding-left: 1em;
    }

    textarea {
        height: 100px;
    }

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

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

    input[type="submit"] {
        font-size: 1.1em;
        margin-top: 0;
        width: 160px;
        height: 48px;
        background-color: rgba(0, 51, 141, 1); /* blue */
        color: #fff;
    }

    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-size: 1em;
        line-height: 1.6em;
    }

    .hominid,
    .whatdoesitmeantobealion {
        display: none;
    }


/* LINKS */

    a { 
        color:blue;
        text-decoration: none;
    }

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

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

    a:hover img {
        opacity: .3;
    }

    h3 a:hover {
        text-decoration: none;
    }

    a:active { 
        color: rgba(235, 183, 0, 1); /* gold */
        text-decoration: none;
    }    

    a.current {
        color: rgba(235, 183, 0, 1); /* gold */
        text-decoration: none;
        cursor: default;
    }


/* NAVIGATION */

    nav {
        overflow: auto;
    } /* Makes the header fill to the elements it contains -- hidden does as well */

    nav ul {
        width: 100%;
        padding: 0;
        list-style-type: none;
    }

    /* header nav {
        margin-bottom: 0;
    } */

    header nav ul {
        text-align: center;
        float: left;
        font-size: .9em;
        /*background-color: rgba(0, 51, 141, 1);*/ /* blue */
        /* background-color: rgba(122, 38, 130, 1); */ /* purple */
        /*background-color: rgba(85, 86, 90, 1);*/ /* grey */
        background-image: linear-gradient(to bottom right, rgba(0, 51, 141, 1), rgba(122, 38, 130, 1));
    }

    footer nav ul {
        padding: 1em 0 0 2em;
    }

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

    header nav li {
/*        font-size: .9em;*/
        text-transform: uppercase;
    }

    footer nav li {
        font-size: .8em; /* For reasons that escape me, this does not inherit the footer font size */
        padding-right: 1em;
    }

    header nav a {
        color: rgba(255, 255, 255, 1); /* white */
        font-weight: 500;
/*        letter-spacing: 1px;*/
        float: left;
        width: 9.09%; /* 100/11= 9.09, 100/10=10, 100/9= 11.111, 100/8= 12.5, 100/7= 14.2857, 100/6= 16.667 */
        padding: 16px 0 12px 0;
    }

    header nav a:hover {
/*         color: rgba(0, 51, 141, 1); */
         color: rgba(0, 0, 0, 1); 
         background-color: rgba(235, 183, 0, 1); /* gold */
         text-decoration: none;
     }

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

    header nav a.current {
        /*color: rgba(235, 183, 0, 1);*/ /* gold */
        color: rgba(255, 255, 255, 1);
        /*background-color: rgba(255, 255, 255, .3);*/
        background-color: rgba(0, 0, 0, 1); /* grey */
    }

    header nav .current:hover {
        /*background-color: inherit;*/
        /*background-color: rgba(255, 255, 255, 1);*/
        background-color: rgba(85, 86, 90, 1); /* grey */
    }

    footer nav a {
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-weight: 600;
    }


/* THE ICON MENU */

    .span_1_of_7,
    .span_1_of_8,
    .span_1_of_9 {
        /*border: 2px solid rgba(0, 51, 141, 0);*/
        /*border: 2px solid rgba(235, 183,0, .9);*/
        margin-bottom: 24px;
        margin-top: 16px;
        border-radius: 8px;
        /*background-color: rgba(235, 183, 0, .1);*/
        /*background-image: linear-gradient(to bottom right, rgba(235, 183, 0, .8), rgba(235, 183, 0, .1));*/
        /*background-image: radial-gradient(circle, rgba(235, 183, 0, 0) 50%, rgba(235, 183, 0, .5));*/
        /*background-image: radial-gradient(circle, rgba(255, 255, 255, 1) 60%, rgba(235, 183, 0, .4), rgba(235, 183, 0, .8));*/
        border: solid 2px rgba(0, 0, 0, .1);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }

    #home .span_1_of_7,
    #home .span_1_of_8,
    #home .span_1_of_9 {
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .span_1_of_7:hover,
    .span_1_of_8:hover,
    .span_1_of_9:hover {
        /*border-color: rgba(255, 92, 53, 1);*/
        border: 2px solid rgba(255, 92, 53, 1);
        background-image: none;
        /*background-color: rgba(255, 255, 255, 1);*/
    }



/* THE SUB MENUS IN THE MEMBER PAGES AND ETHICS PAGES */

    #members main .col:first-child ul,
    #ethics main .col:first-child ul {
        list-style-type: none;
        padding-left: 0;
        margin: 40px 0 32px 0;
        border-bottom: 1px solid rgba(85, 86, 90, .3); /* light grey */
    } /* This is for the nav bar on the members and ethics pages */ 

    #members main .col:first-child li,
    #ethics main .col:first-child li {
        margin: 0;
        border-top: 1px solid rgba(85, 86, 90, .3); /* light grey */
    } /* This is for the nav bar on the members and ethics pages */ 

    #members main .col:first-child a,
    #ethics main .col:first-child a {
        /*color: rgba(85, 86, 90, 1);*/
        color: rgba(0, 51, 141, 1);  /* blue */
        /* color: rgba(255, 255, 255, 1.0); */
        font-weight: 500;
        font-size: .85em;
        padding: 6px 0 6px 16px;
        display: block; /* Need this for the link to span the entire block not just the anchor */
    }

    #members main .col:first-child a:hover,
    #ethics main .col:first-child a:hover { 
        text-decoration: none; 
        color: rgba(255, 92, 53, 1.0);
        background-color: rgba(85, 86, 90, .1);
    }

    #members main .col:first-child a:active,
    #ethics main .col:first-child a:active { 
        text-decoration: underline;
         /* background-color: rgba(0, 51, 141, 1); */
    }

    #members main .col:first-child a.current,
    #ethics main .col:first-child a.current {
/*        color: rgba(255, 255, 255, 1.0); */
/*        color: rgba(235, 183, 0, 1.0);*/
        color: rgba(255, 92, 53, 1.0);
/*        font-weight: 600;*/
/*        background-color: rgba(85, 86, 90, .1);*/
        text-decoration: none;
        margin-left: 0;
    }

    #members main .col:first-child a.current::before,
    #ethics main .col:first-child a.current::before {
        content: "\232A";
        /*color: rgba(179, 178, 177, 1)*/; /* light grey */
    }



/* TABLES */

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

    tbody tr:nth-child(odd) {
        background-color: rgba(179, 178, 177, .2); /* light grey */
    }

    #events tbody tr {
        background-color: #fff; /* white */
    }

    th,
    td {
        vertical-align: baseline;
        font-size: 1.2em;
        text-align: left;
        /* line-height: 1.7em; */
        /* padding-left: 10px; */
    }
 
    th {
        color: #fff;
        font-weight: 400;
        /* line-height: 2em; */
        padding: 10px 0 8px 12px;
        /* background-color: rgba(0, 51, 141, 1); blue */
        background-color: rgba(179, 178, 177, 1); /* light grey */
        border: 1px dotted #fff;
        border-top: none;
    }

    td {
        margin-bottom: 1em; 
        border: 1px solid rgba(179, 178, 177, .2); /* light grey */
        font-weight: 300;
        /* line-height: 1.7em; */
        padding: 8px 0 6px 12px;
    }

    #duck_derby td:nth-of-type(4):before,
    #duck_derby_after td:nth-of-type(5):before {
        content: "$";
    }

/* THESE ARE THE FUTURE CONVENTIONS TABLE */

    table.conventions {
        margin-left: 5%;
        width: 95%;
        margin-bottom: 1em;
        margin-top: 1em;
        font-size: 1rem;
    }

    .conventions thead {
        color: rgba(0, 0, 0, 1);
        font-weight: 900;
        /*background-color: rgba(122, 38, 130, 1);*/
        /*background-image: linear-gradient(to bottom right, rgba(0, 51, 141, 1), rgba(122, 38, 130, 1));*/
        /*background-image: linear-gradient(to bottom right, rgba(235, 183, 0, 1), rgba(235, 183, 0, .1));*/
        background-color: rgba(255, 204, 0, .6);
    }

     .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(255, 204, 0, .1);
    }  /* This adds the shading to every other row in a table */

/* IMAGES */

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

    #about img[alt="lions clubs international logo"] {
        width: 100%;
        margin: 0 0% 1em 0;
    }

    #newsletter img[alt="archive image"] {
        width: 100%;
    }

    #newsletter main .span_1_of_3 img {
        box-shadow: 0 0 6px 0 rgba(179, 178, 177, 1.0); /* light grey */
    }

    #newsletter main a:hover img {
        box-shadow: 0 0 16px 0 rgba(235, 183, 0, 1); /* gold */
    }

    img[title="map"] {
        box-shadow: 0 0 6px 0 rgba(179, 178, 177, 1.0); /* light grey */
    }

    a:hover img[title="map"] {
        box-shadow: 0 0 16px 0 rgba(235, 183, 0, 1); /* gold */
    }

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

    img[alt="ducks racing image"] {
        width: 45%;
        height: 45%;
        margin: 12px 0 0 24px; 
        float: right;
    }

    img[alt="smiling lion graphic"] {
        width: 100%;
        padding-left: 50px;
    }

    img[title="Open Quote"] {
        float: left;
        margin: 0 20px 20px 0; 
        height: 35%;
        width: 30%;
    }

    img[title="Close Quote"] {
        float: right;
        margin: 20px 0 0 20px;
        height: 35%;
        width: 30%;
    }

    img[alt="picture of Helen Keller"] {
        margin: 0 8% 1em 8%; 
        /*height: 80%;*/
        width: 84%;
    }

    #helen_keller .col:last-child img {
        float:right;
        margin: 0 0 0 10px; 
        height: 50%;
        width: 50%;
    }

    #meetings main .col:first-child img {
        width: 100%;
    }

    img[alt="Melvin Jones photo"] {
        float: right;
        margin: 0 0 10px 10px;
        border: 1px solid rgba(85, 86, 90, 1); /* grey */
        }

    img[alt="picture of pruenarian parade"] {
        height: 40%;
        width: 40%;
        float: right;
        margin: 3px 0 20px 20px;
    }

    img[title="WeServe"],
    img[title="Anniversary"] {
        padding: 0;
    }

    img[title="MD19"] {
        height: auto;
        width: 43%;
        float: right;
        margin: 0 0 24px 40px;
        padding: 0;
    }

    img[title="ServiceLogos"]{
        margin: 16px 0 0 0;
    }

    img[alt="picture of used tennis shoes"] {
        float: right;
        width: 25%;
        margin: 8px 16px 0 4px;
    }

    img[alt="picture of onsies"] {
        float: right;
        width: 40%;
        margin: 16px 16px 4px 8px;
    }

    img[alt="dropcap e"] {
        float: left;
        width: 12%;
        margin: 0 0 0 0;
    }

    img[alt="dropcap m"] {
        height: 4em;
        width: 4em;
        float: left;
        margin: 3px 10px 0 0;
    }

    img[alt="dropcap o"] {
        height: 4em;
        width: 4em;
        float: left;
        margin: 3px 10px 0 0;
    }

    img[alt="dropcap t"] {
        float: left;
        width: 12%;
        margin: 0 4px 0 0;
    }

    img[alt="dropcap v"] {
        float: left;
        width: 12%;
        margin: 0 0 0 0;
    }

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

    img[alt="Woo Hoo image"] {
        float: left;
        width: 120px;
        height: auto;
        margin: 12px 8px 0 0;
    }

    img[alt="vancouver highway sign"] {
        margin: 0 0 1em 0;
    }

    img[alt="we need you image"] {
        float: right;
        width: 33%;
        margin: 12px 0 0 12px;
    }

    img[alt="Salvation Army red kettle image"] {
        float: right;
        width: 16%;
        margin: 12px 0 0 8px;
    }

    img[alt="food bank image"] {
        float: right;
        width: 25%;
        margin: 0 12px 0 12px;
    }

    img[alt="Food bank project"] {
        float: right;
        width: 40%;
        margin: 24px 0 0 24px;
    }

    img[alt="Lion of the year photo"] {
        float: right;
        width: 30%;
        margin: 24px 0 0 24px;
    }

    img[alt="Blue Ribbon"] {
        float: left;
        width: 18%;
        margin: -4px 12px 0 0;
    }

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

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

    img[alt="Garage sale graphic"] {
        width: 30%;
        float: right;
        margin: 12px 12px 0 12px;
    }

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

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

    img[alt="Pendleton Beef logo"] {
        float: right;
        width: 30%;
        margin: -12px 0 0 12px;
    }

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

    img[alt="info icon"] {
        float: left;
        width: 28%;
        height: auto;
        margin-right: 10px;
    }

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

    img[alt="patti hill photo"] {
        float: left;
        width: 17%;
        margin: 18px 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="QR Code"] {
        float: right;
        width: 12%;
        margin: 1em 0 0 16px;
    }


    .info-sidebar {
        margin: 0 0;
        padding: 15px;
        border: 1px solid rgba(255, 92, 53, 1); /* Gold  */
    }

    .info-2_of_9 p {
        font-size: 1rem;
        margin: 0;
    }



/* VIDEOS */    

    video {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
    }



/* COUNTDOWN TIMER */

    #duck_derby p#countdown,
    #hawaii p#countdown,
    #beef p#countdown {
        margin: 0 0 24px 0;
        font-size: 200%;
        text-transform: uppercase; 
        font-weight: 400;
        color: red;
        text-align: center;
        line-height: 1.6em;
        padding-top: 12px;
/*        border: 6px double; red;*/
        border-radius: 8px;
    }

    p#countdown span {
        font-size: 50%;
        font-weight: 200;
        }

    #countdown {
        border: 8px double rgba(255, 0, 0, 1);
/*        box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);*/
        transform: scale(1);
        animation: pulse 1s infinite;
    }

    @keyframes pulse {
        0% {
        /*transform: scale(0.95);*/
        /*border: 6px double rgba(255, 0, 0, .7);*/
        box-shadow: 0 0 8px 0 rgba(253, 183, 0, .7);
        }

        70% {
        /*transform: scale(1);*/
        /*border: 6px double rgba(255, 0, 0, .4);*/
        box-shadow: 0 0 8px 8px rgba(253, 183, 0, .4);
        }

        100% {
        /*transform: scale(0.95);*/
        /*border: 6px double rgba(255, 0, 0, 1);*/
        box-shadow: 0 0 8px 0 rgba(253, 183, 0, 0);
        }
    }


/* STYLE MODIFICATIONS FOR DIFFERENT PAGES */

    #calendar {
        margin: 20px auto;
    }

    #join .span_1_of_2 {
        text-align: center;
    }

    #join .span_1_of_2:first-child {
        padding: 0 5% 0 5%;
    }

    #join .span_1_of_2:last-child {
        padding: 0 5% 0 5%;
    }



/* SURVEY RESPONSE */    

    #acknowledge_survey main,
    #acknowledge_application main {
        text-align: center;
    }