/* 

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

Northwest Lions Foundation

May, 2021; March, 2023

Standard colors (rgb):
    LCI gold: 255, 204, 0 or ebb700
    LCI blue: 0, 77, 153 or 00338d
    LCI gray: 85, 86, 90 or 766a62
    LCI red: 204, 51, 51 or 673227
    LCI purple: 98, 37, 103 or 622567

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;
        color: #000;
        margin: 0 auto;
        padding: 0 12px;
        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.6%;
        padding-left: 2rem;
        }*/

/* COLUMNS */

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

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

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


/* CONTAINERS */

    header {
        position: relative; /* So I can position of elements in and relative to the header */
        overflow: auto; /* Makes the header fill to the elements it contains */
        }

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

    .top-centered {
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translate(-50%, -6%);
        width: 97%;
        z-index: 999;
    }

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

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

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

    .speech-bubble {
        position: absolute;
        top: 0;
        left: 0;
    }

    /*main {

    }*/

    blockquote {
        margin:  0 0 0 0;
        padding: 0 24px 8px 24px;
    }

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

    abbr {
        cursor: pointer;
        border-bottom: 1px dotted /*rgba(14, 63, 121, 1)*/;
    }

    blockquote abbr {
        font-size: 80%;
    }

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

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

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



/* HEADINGS */

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


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

    h3 {
        font-size: 455%;
        font-weight: 600;
        color: rgba(255, 255, 255, .6);
        margin: 0;
        text-align: center;
        }

    h4 {
        font-size: 215%;
        font-weight: 600;
        font-style: italic;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, .6); 
        margin: 0;           
        }

    .trustee h3, 
    .trustee h4 {
        font-size: 200%;
        color: rgba(14, 63, 121, 1);
        text-align: left;
        border-top: 1px rgba(255, 0, 0, 1) solid;
        border-bottom: none;
        padding: 1rem 0;
        clear: both;
    }

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

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

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

    .snippets h5:first-of-type {
        border-top: none;
    } /* This is the dateline heading */

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


/* BASIC TYPOGRAPHY */

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

    p.right {
        text-align: right;
    }

    .sidebar p,
    .sidebar li,
    .snippets p,
    .snippets li {
        margin: 1em 16px;
    }

    .sidebar p,
    .snippets p {
        line-height: 1.4em;
    }

    .sidebar li,
    .snippets li {
        line-height: 1.4em;
    }

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

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

    /*
    .sidebar p,
    .snippets p {
        font-size: .9rem;
        margin: 1em 16px;
    }
    */

    .sidebar ul {
        margin: 0;
        padding: 0 0 0 16px;
    }

    .sidebar ol {
        margin: 0;
        padding: 0;
        list-style-position: inside;
    }

    .snippets ul {
        margin: 0;
        padding: 0 0 0 16px;
        /*list-style-type: none;*/
    }

    /*
    .sidebar li {
        font-size: .9rem;
        margin: 1rem 0;
    }
    */

    /*
    .snippets li {
        margin: 0;
        padding: 0 0 0 0;
        border-top: 1px solid rgba(0, 0, 0, 1);
    }
    */

    .sidebar ol ul li {
        /*margin-left: 0;*/
        list-style-type: disc;
        list-style-position: outside;
    }

    /*.snippets li:first-of-type {
        border:  none;
        padding-top: 0;
    }*/


    .snippets #datetime {
        color: rgba(255, 0, 0, 1);
        text-transform: uppercase;
    }

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

    footer p {
        font-size: .8rem;
        text-align: center;
        line-height: 1rem;
        margin: 0 0 2rem 0;
        }

    .trustee p {
        margin-top: 0;
    }

    b,
    strong { 
        font-weight: 700; 
        }

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

    /*.announcements em {
        color: rgba(255, 0, 0, 1);
    }*/

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

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

    sup { 
        top: -.5rem; 
        }

    sub { 
        bottom: -.25rem; 
        }




/* LISTS */

    ul.about ul {
        list-style-type: none;
        font-size: 100%;
    }

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

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

    ul.about li li {
        margin-left: 0;
    }

    ol {
        margin: 0;
    }

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

    li {
        margin: 1em 20px;
        }

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

    /*footer .group li:first-child {
        color: #aaa;
        font-weight: 600;
        letter-spacing: .05rem;
        text-transform: uppercase;
        text-decoration: underline;
        margin-bottom: 5px;
        }*/

    ul.date {
        list-style-type: none;
        /*font-size: 100%;*/
        padding-left: 0;
        /*margin-left: 32px;*/
    }

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

    /*.date li:first-of-type:not(li li) {
        border-top: none;
    }*/

    /*#health .snippets {
        margin-left: 0;
        padding: 0;
    }*/

    /*#health .snippets li {
        margin-left: 16px;
        padding: 0;
        border: none;
    }*/

    /*ul.date li:nth-of-type(even):not(li li) {
        background-color: rgba(255, 204, 0, .1);
    }*/
   
    /*ul.date li:nth-of-type(odd):not(li li) {
        background-color: rgba(255, 204, 0, .1);
    }*/

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

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

    /*.announcements li:first-of-type:not(li li) {
        border-top: none;
    }*/

    /*ul.announcements li:nth-of-type(even):not(li li) {
        background-color: rgba(255, 204, 0, .1);
        border:  1px solid rgba(255, 204, 0, .5);
    }*/

    /*ul.announcements li:nth-of-type(odd):not(li li) {
        background-color: rgba(255, 204, 0, .2);
        border:  1px solid rgba(85, 86, 90, .2);
    }*/

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

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

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

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

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

    ul.contact {
        margin: 0 1em;
        padding: 0;
    }

    ul.contact ul {
        /*list-style-type: none;*/
/*        font-size: 1rem;*/
        /*margin-left: 0;*/
        padding: 0 1rem;
    }

    ul.contact ul ul {
        padding: 0;
    }

    ul.contact li {
        list-style-type: none;
        margin: 0;
        font-size: 1.2rem;
    }

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

    ul.timeline li {
        margin-left: 0;
        padding-left: 0;
    }

    table.timeline {
        margin: 1rem 0;
    }

    table.timeline td:first-child{
        font-weight: 600;
    }

    table.timeline tr {
        background-color: none;
    }




/* THESE ARE FOR THE EXPANDABLE DETAIL LISTS */

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

    summary:focus {
        outline: none;    
    }

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

    details p {
        margin-left: 48px;
    }




/* LINKS */

    a { 
        /*color: rgba(14, 63, 121, 1);*/
        color: blue;
        text-decoration: none;
        }

    /*.snippets a {
        color: rgba(0, 0, 0, 1);
        }*/

    header nav a {
        color: rgba(255, 255, 255, 1);
        text-transform: uppercase;
        font-weight: 600;
        float: left;
        width: 11.11%; /* 100/10= 10, 100/9= 11.111, 100/8= 12.5, 100/7= 14.2857, 100/6= 16.667 */
        padding: 12px 0;
        background-color: rgba(0, 0, 0, .3); /* Moved this from the nav ul */
        }

    footer nav a {
        color: rgba(85, 86, 90, .5);
        font-size: .8rem;
        font-weight: 600;
        margin-right: 20px; /* Left justifies the nav bar */
        text-transform: uppercase;
        }

    footer a { 
        color: rgba(85, 86, 90, .5);
        /* color: rgba(0, 77, 153, .7); */
        font-weight: 400;
        }

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

    header nav a:hover {
        background-color: rgba(0, 0, 0, .6);
        color: rgba(255, 255, 255, 1);
        }

    a:hover img {
        opacity: .3;
        }

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

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

    header nav a.current {
        background-color: rgba(0, 0, 0, .6);
        color: rgba(255, 204, 0, 1);
        }

   footer nav a.current {
/*        color: rgba(255, 0, 0, .75);*/
        color: rgba(255, 204, 0, 1);
        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 ul {
        /*font-size: 100%;*/ /* This doesn't seem to do anything  */
        text-align: center;
        float: left;
        margin: 0;
        }

    /*
    footer nav ul {
        padding: 1rem 0 0 2rem;
        }
        */

    nav li {
        display: inline;
        margin: 0;
        }

    header nav li {
        font-size: .9rem;
        font-weight: 400;
        }

    /*
    footer nav li {
        padding-right: 1rem;
        }
        */





/* Styles for the Donate Now button */

    button {
        width: 100%;
        /* height: 40px; */
        font-size: 1.3rem;
        letter-spacing: 1px;
        padding: 12px 0;
        margin: 12px 0;
        background-color: rgba(14, 63, 121, 1); /* blue  */
        border: none;
        border-radius: 4px;
        font-weight: 600;
        /* box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, .1); */
        outline: none;
    }

    .sidebar button {
        width: 90%;
        margin: 0 5% 16px 5%;
    }

    button:hover {
        box-shadow: 0 0 16px 0 rgba(255, 204, 0, 1); /* gold */
        background-color: rgba(255, 0, 0, 1); /* red  */
    }

    button:active {
        box-shadow: none;
    }

    button a:link, 
    button a:visited {
        color: rgba(255, 255, 255, 1);
        /*color: rgba(14, 63, 121, 1);*/
    }

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

    button a:active {
        color: rgba(255, 0, 0, 1);
    }





/* TABLES */

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

    #grants table,
    #health table {
        /*margin-left: 6%;*/
        width: 100%;
    }

    /*tbody tr:nth-child(odd) {
        background-color: rgba(244, 242, 225, .7);
        }*/

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

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

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

    table.timeline {
        margin: 1rem 0;
    }

    table.timeline tbody tr {
        background-color: rgba(255, 255, 255, 1.0);
    }

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

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




/* IMAGES */

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

    header img {
        width: 100%;
        /* margin: 3rem 5% 2rem 5%;*/ /* to center the header image for the masthead */
        }

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


    .trustee img {
        width: 20%;
        height: auto;
        float: left;
        margin-bottom: 1em;
        margin-right: 4em;
    }

    img[alt="Foundation Logo"] {
        margin: 210px 0 0 0;
        padding: 24px 16px;
        border: 4px solid rgba(14, 63, 121, 1);
        border-radius: 8px;
    }

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

    .sidebar img[alt="SightLife logo"] {
        padding: 24px 24px 0 24px;
    }

    .sidebar img[alt="LWVI logo"] {
        padding: 24px 24px 0 24px;
    }

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

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

    .sidebar img[alt="Health Screening Unit"] {
        padding:  16px 16px 0 16px;
    }

    .sidebar img[alt="White Cane Days logo"] {
        padding: 16px 16px 0 16px;
    }

    img[alt="left-title-image"] {
        float: left;
        width: 100%;
        height: 100%;
    }

    img[alt="right-title-image"] {
        float: right;
        width: 100%;
        height: 100%;
    }

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

    .group .logos {
        margin-top: 64px;
        padding: 0 16px;
    }

    /*img[alt="Link to LCI"],
    img[alt="Link to MD19"] {
        height: 102px;
        width: auto;
        padding: 5%;
        border: 2px solid rgba(85, 86, 90, .2);
        border-radius: 16px;
    }*/

    img[alt="PDF document"],
    img[alt="Word document"]{
        width:  2.5em;
        height: auto;
    }

    img[alt="NWLLI logo"]{
        float: right;
        width: 1rem;
        height: auto;
        margin: 12px 0 12px 12px;
    }

    img[alt="LWVI link"] {
/*        float: right;*/
        width: 100%;
        height: auto;
        margin: 12px 0 0 0;
        padding: 18px 12px 18px 12px;
        border: 3px solid rgba(98, 37, 103, 1.0);
        border-radius: 8px;
    }

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

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



    /* VIDEO STYLES */

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