/* --------------------------------------------------

Style sheet for Washington School For The Blind Foundation.
11/15/08

rev. 03/09/2015, 12/30/2015, 12/3/2020, 6/18/2024

J. D. Nellor

-------------------------------------------------- */

html {
    box-sizing: border-box;
    font-size: 16px; /* For global control of scaling -- 16 px seems to be default */
    }

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

body{
    font-size: 100%;
    font-family: Helvetica, Arial, sans-serif;
    margin: 0 auto;
    padding: 16px 32px;
    width: 80rem; /* Set this to % to make fluid */
}

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

    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: 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 */

    .two-column {
        column-count: 2;
        column-width: 50%;
        margin-bottom: 1rem;
        /*column-rule: 1px solid rgba(0, 0, 0, 1.0);*/
    }



/* CONTAINERS */

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

    #masthead {
        position: relative;
    }

    #masthead img.logo {
        width: 42%;
        height: auto;
        margin: 24px 0 16px 0;
    }

    /*#masthead img {
        width: 100%;
    }

    #masthead img.logo {
        position: absolute;
        bottom: 8%;
        left: 3%;
        width: 50%;
        height: auto;
        z-index: 995;        
    }*/

    #subhead {
        margin: 12px 0 32px 0;
        padding: 16px 0 20px 24px;
        /* The header or banner specific to each page. */
    }

    /*footer {
        text-align: center;
        margin: 0;
        padding: 12px 0;
        border-top: 2px dotted #0e3f79;
    }*/

    footer {
        text-align: center;
        margin: 0 0 1em 0;
        padding: 24px 60px 8px 60px;
        background-color: #0e3f79;
    }

    footer p {
        margin-top: 12px;
        padding-top: 8px;
        /*border-top: 1px dotted #fff;*/
    }

    footer a {
        font-size: 80%;
        /*color: #0e3f79;*/
        color: #fff;
        margin: 0 0 6px 0;
    }

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

    footer a:visited {
        color: #fff;
    }

    footer a.current,
    footer .menubar a.current {
        text-decoration: none;
        /*color:red;*/
        color: #99cc00;
        cursor: default;
    }

    blockquote {
        margin: 0 0 64px 0;
        padding: 0;
/*        border: 2px #99cc00 solid;*/
        /*-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;*/
    }

    blockquote img[alt="top border"],
    blockquote img[alt="bottom border"] {
        width: 100%;
    }

    blockquote p {
        font-family: Georgia, Times, "Times New Roman", serif;
        font-style: italic;
        color: #0e3f79;
        line-height: 1.7em;
        margin: 0 28px;
        padding-top: 32px;
        text-indent: 1em;
        font-size:110%;
        /* text-shadow: 3px 3px 3px silver; */
    }

    blockquote p.right {
        font-size: 90%;
        margin-top: 0;
        margin-bottom: 8px;
        padding: 0;
    }

    .ad,
    .sidebar {
        margin: 0 0 24px 0;        
    }

    .sidebar {
        border: 1px  #0e3f79 solid;
/*        margin: 0 0 24px 0;*/
    }

    .ad {
        width: 100%;
/*        margin: 0 0 24px 0;*/
    }

    .notebox {
        margin: .5em 2em .5em -275px;
        padding: 0 1em 0 1em;
        border: 3px dotted #99cc00;
        border-radius: 6px;
        float: left;
        width: 90%;
    }

    .notebox p {
        font-size: 1em;
        color: #0e3f79;
        hyphens: auto;
        text-align: justify;
        text-justify: inter-word;
        margin: 1em;
    }

    .notebox h2 {
        font-size: 1.4em;
        font-weight: 600;
        color: #0e3f79;
        text-align: center;
        text-transform: uppercase;
        margin: 1em 0;
    }

/* DONATE NOW BUTTON */

    button {
        width: 100%;
        font-size: 130%;
        letter-spacing: .5px;
        padding: 12px 0;
        margin: 24px 0 0 0;
        background-color: #99cc00;
/*        border-radius: 8px;*/
        font-weight: 600;
/*        border: 1px solid #99cc00;*/
        border: none;
        outline: none;
    }

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

    button:hover {
        box-shadow: 0 0 12px rgba(128, 128, 128, 1);
        background-color: #0e3f79;
    }

    button:active {
        box-shadow: none;
    }

/*    #right-column button {
        margin: 0 10% 16px 10%;
    }*/

    button a:link, 
    button a:visited {
        color: #fff; /* Not working??? Why?? */
    }

    button a:hover {
        text-decoration: none;
    } /* Not working??? Why?? */

    button a:active {
        color: #fff;
    }

    input[type="submit"]{
        width: 190px;
        /* height: 50px; */
        color: #fff;
        font-size: 130%;
        letter-spacing: .05em;
        border: none;
        padding: 9px 0 12px 0;
        background-color: #99cc00;
        border-radius: 4px;
        font-weight: 600;
        box-shadow: none;
        outline: none;
    }   
      
    input[type="submit"]:hover {
        color: #0e3f79;
    }

    input[type="submit"]:active {
        color: #99cc00;
        background-color: #0e3f79;
        /* box-shadow: -1px -1px 1px 1px #999; */
    }

    /*#left-column input[type="submit"] {
        width: 243px;
        margin: 30px 3px;
    }*/

    /*#right-column input[type="submit"] {
        width: 190px;
        margin: 0 30px 20px 30px;
    }*/

    
/* TEXT STYLES */

    p,
    li,
    caption,
    th,
    td {
        font-size: 1.2em;
    }

    p.right {
        text-align: right;
    }

    p.script {
        font-family: Georgia, Times, "Times New Roman", serif;
        font-style: italic;
        color: #0e3f79;
/*        line-height: 1.6em;*/
        margin: 1em;
        padding: 0;
        text-indent: 1em;
        font-size:110%;
        text-align: left;
        /* text-shadow: 3px 3px 3px silver; */
    }

    p.script:first-of-type {
        text-indent:0;
    }

    p.script.signature {
        text-indent: 0;
/*        float: right;*/
        margin-bottom: 1em;
        margin-left: 1em;
    }

    p,
    li {
        margin: 0 0 1em 0;
        line-height: 1.6em;
        hyphens: auto;
    }

    .sidebar p,
    .sidebar li {
        font-size: .9em;
        line-height: 1.6em;
        color: #444;
    }

    .sidebar p {
        margin: 1em 20px;
    }

    .sidebar li {
        margin: 1em 10px;
    }

    abbr {
        border-bottom: 1px #999 dotted;
    }

    strong {
        font-weight: bold;
    }
    
    em {
        font-style: italic;
    }

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

/* LIST STYLES */

    /*ul {
        margin: 1em 2em;
    }*/

    /*.sidebar ul {

    }*/

    ul li {
        list-style-type: square;
        margin: 1em;
    }

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

    .linklist ul {
        margin: 0 0 0 2em;
    }

    .linklist li li {
        font-size: 100%;
        /* If I do not set this, the font size scales to .8 em of the p size. If I set this to inherit, the font size is correct in Safari, Firefox, Opera and Camino, but still scales in IE Win 6. If I set this to 1em, the font size is correct across the board-- logically, I suspect this means the same as inherit--1em of .8em should equal .8em. Why I should have to do this at all, however, escapes me. */
    }

    ol {
        margin: 1em 0 1em 3em;
    }

    ol li {
        list-style-type: decimal;
        margin: 1em 0;
    }

    ol li li {
        list-style-type: lower-alpha;
        margin: 1em 0;
        font-size: 100%;
    }

/* HEADING STYLES */

    h1, 
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-transform: capitalize;
    }

    h1,
    h2 {
        font-weight: normal;
    }

    h1 {
        font-size: 2em;
        text-align: left;
        letter-spacing: .03em;
        color: #fff;
        font-weight: 400;
        background-color: #0e3f79;
/*        padding: 6px 20px 9px 20px;*/
    }

    h2 {
        font-size: 1.2em;
    }

    h3 {
        font-size: 2em;
        font-weight: 600;
        letter-spacing: .3px;
        margin: 10px 0;
        color: #0e3f79;
/*        border-bottom: 1px #0e3f79 dotted;*/
/*        padding-bottom: 10px;*/
        padding-top: 16px;
    }

    h4 {
        color: #0e3f79;
        font-size: 1.5em;
        font-weight: 400;
        margin: 0 0 10px 0;
        padding-bottom: 6px;
        letter-spacing: .3px;
        border-bottom: 1px #0e3f79 dotted;
    }

    #contact h4 {
        border-bottom: none;
        border-top: 1px #0e3f79 dotted;
        padding-top: 1em;
    }

    #contact h4:first-of-type {
        border-top: none;
        padding-top: 0;
        margin-top: 8px;
    }

    h5 {
        font-size: .9em;
        color: #fff;
        text-transform: uppercase;
        text-indent: 20px;
        margin: 0;
        padding: 18px 0;
        background-color:  #0e3f79;
    }

    h6 {
        font-size: .9em;
        color: #0e3f79;
        margin: 1em 0;
        text-align: center;
    }


/* TABLES */

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

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

    th,
    td {
        vertical-align: middle;
        font-size: 1.2em;
        }
 
    th {
        color: #fff;
        font-weight: 500;
        text-align: center;
        line-height: 1.6em;
        padding: 8px;
/*        background-color: rgba(85, 86, 90, .7);*/
/*        background-color: rgba(204, 51, 51, 1.0);*/
        background-color: #0e3f79;
        border: 1px dotted rgba(255, 255, 255, 1);
        border-top: none;
        }

    td {
/*        margin-bottom: 1em; */
        line-height: 1.6em;
        border: 1px dotted rgba(141, 124, 104, 1);
        /*padding: 8px 8px 8px 8px;*/
        padding: 16px 16px 8px 16px;
        font-weight: 400;
        text-align: center;
        }

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

    th:first-child {
        padding-left: 16px;
    }

    td:first-child {
        padding: 0 16px;
    }

/* LINK STYLES */

    a {
        text-decoration: none;
        color: blue;
        /* color: #0e3f79; */
    }

    a:hover,
    a:active {
        color: red;
        text-decoration: underline;
    }

    a:hover img {
        opacity: 0.3;
        }
    /*a.current {
        color: #99cc00;
        cursor: default;
    }*/

/* MAIN NAVIGATION */

    nav ul {
        padding: 0;
        margin-top: 10px;
    }

    nav li {
        font-size: 100%;
        font-weight: 400;
        text-indent: 14px;
        letter-spacing: .03em;
        margin: 0;
        padding: 0;
        list-style-type: none;
        border-top: 1px #99cc00 solid;
    }

    nav li:last-of-type {
        border-bottom: 1px #99cc00 solid;        
    }

    nav li:first-of-type {
        border-top: 4px #99cc00 solid;        
    }

    nav.primary-menu a {
        color: #0e3f79;
        text-decoration: none;
        display: block;
        width: 100%; /* A hack for IE Win so that the entire width of the button responds. */ 
        padding: 12px 0 12px 12px;
    }

    nav a:hover {
        color: #fff;
        background-color: #99cc00;
        /* border-left-color: #0e3f79; */ /* Not needed unless usingg the border left on the anchor */
        text-decoration: none;
    }

    nav a:active {
        color: #99cc00;
        background-color: #0e3f79;
    }

    nav a.current {
        color: red;
/*        color: #99dd00;*/
        background-color: #fff;
        /* border-left-color: #fff; */
        cursor: default;
    }

    nav a.current::before {
        content: "\232A";
        /*color: rgba(179, 178, 177, 1)*/; /* light grey */
    }



/* SECONDARY NAVIGATION */

    .menubar ul {
        margin: 0;
    }

    .menubar li {
/*        font-size: 90%;*/
        display: inline;
        margin: 0;
        padding: 0 8px 0 6px;
/*        border-right: 1px #0e3f79 solid;*/
        border-right: 1px #fff solid;
    }

    .menubar li:first-child {
/*        border-left: 1px #0e3f79 solid;*/
        border-left: 1px #fff solid;
        padding-left: 8px;
    }

    .menubar a {
/*        color: #0e3f79;*/
/*        color: #fff;*/
        text-decoration: none;
        display: inline;
    }

    .menubar a:hover {
        color: red;
        text-decoration: underline;
    }

    .menubar a.current {
        text-decoration: none;
        color: red;
        /*color: #99cc00;*/
        cursor: default;
    }



/* CATALOG STYLES */

    .catalog {
        width: 450px;
        float: left;
    }

    .catalog p {
        width: 210px;
        float: right;
        line-height: 1.2em;
        clear: right;
    }

    .catalog h3,
    .catalog h4{ 
        color: #0e3f79;
        clear: both;
        border-top: 1px #ccc solid;
        margin: 0 0 1em 0;
        padding: 1em 0 0 0;
    }

    .catalog img {
        border: 1px #444 solid;
        width: 210px;
        margin: 0 0 1em 0;
    }

/* BIOGRAPHY STYLES */

    /*.biography img {
        float: left;
        width: 600px;
    }*/

    .biography p {
        text-align: justify;
        text-justify: inter-word;
        width: 72%;
        float: right;
        line-height: 1.6em;
        clear: right;
    }

    .biography h3, 
    .biography h4 {
        color: #0e3f79;
        clear: both;
        border-top: 1px #ccc solid;
        border-bottom: none;
        margin: 0;
        padding: 1em 0;
    }

    .biography h3 {
        font-size: 2em;
        font-weight: 600;
        padding: 1em 0;
    }
    .biography img {
        width: 150px;
        height: 188px;
        margin: 8px 0 1em 0;
    }

/* SIGNATURE BLOCK */

    p.signature {
        margin: 0;
    }

    img.signature {
        margin: 1em 0 0 0;
        border: none;
        float: none;
    }

/* IMAGES */

    img {
        float: left;
        border: none;
    }

    header img {
        float: none;
    }

    img[alt="PDF document"],
    img[alt="Word document"]{
        width:  3em;
        height: auto;
        margin: 6px;
    }
    
    /*#index #middle-column img {
        float: left;
        width: 100%;
        margin: 5px 10px 20px 0;
        border: 1px solid #ccc;
    }*/
    
    /*#donate #middle-column img {
        float: left;
        width: 100%;
        margin: 5px 10px 20px 0;
        border: 1px solid #ccc;
    }*/

    /*#left-column img {
        margin: 1em 0;
        border: 2px solid #ccc;
    }*/

    /*#left-column img {
        width: 100%;
    }*/

    /*img.portrait, 
    img.landscape, 
    img.snapshot {

    }*/

    img.drawing {
        margin: 10px 20px 0 0;
    }

    img.portrait {
        margin: 0 20px 0 0;
        height: 225px;
        width: 180px;
        /* Set portrait dimensions to a 4 x 5 aspect ratio */
    }

    img.landscape {
        margin: 10px 20px 0 0;
        width: 210px;
        height: 150px;
        /* Set landscape dimensions to 7 x 5 aspect ration -- the opposite of portrait */
    }

    img.snapshot {
        margin: 10px 20px 0 0;
    }

    img[alt="picture"] {
        margin: 5px 20px 0 0;
    }

    img[alt="photo"] {
        float: right;
        margin: 5px 0 0 20px;
    }

    img[alt="left quote mark"] {
        float: left;
    }

    img[alt="right quote mark"] {
        float: right;
    }

    .notebox img[alt="left quote mark"] {
        margin: 1em 1em 0 0;
        width: 10%;
    }

    .notebox img[alt="right quote mark"] {
        margin: 0 0 1em 1em;
        width: 10%;
    }


    /*#right-column .sidebar img {
        width: 90%;
        border: 1px solid #ccc;
    }*/

    /*#right-column img {
        float: none;
        margin: 1em auto 0 auto;
        display: block;
    }*/

    /*#index #middle-column img {
        width: 100%;
        margin-bottom: 20px;
    }*/

    #safari #middle-column img {
        width: 50%;
        height: 50%;
    }

    /*#amznCharityBanner {
        float: right;
        margin: 0 0 10px 20px;
    }*/


    /*a:hover img,
    #amznCharityBanner:hover {
        box-shadow: 0 0 20px rgba(128, 128, 128, 1);
    }*/

    /*.videoModalContent {
        
    }*/

    video {
        margin-top: 8px;
/*        border: solid 1px  #0e3f79;*/
        outline: none;
    }


    .videoModalContent {
        margin-bottom: 24px;
    }

    /*.modalVideo {
        
    }*/

/* MAP PAGE STYLES. */

    #map img{
        float: none;
        margin: 30px auto;
        display: block;
    }