@font-face {
    font-family: 'Roboto';
    src: url('/vis/fonts/roboto-v30-latin-regular.woff2') format('woff2'),
         url('/vis/fonts/roboto-v30-latin-regular.woff') format('woff');
}
  
@font-face {
    font-family: 'Gentium Book Basic';
    src: url('/vis/fonts/gentium-book-basic-v16-latin-regular.woff2') format('woff2'),
         url('/vis/fonts/gentium-book-basic-v16-latin-regular.woff') format('woff');
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    background-color: #3b6e8f;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 175%;
    margin: 0;
    padding: 0 0.5rem 1rem 0.5rem;
}

header,
section,
footer,
aside,
nav,
main,
article,
figure {
    display: block;
}

img {
    border: 0;
}

a img {
    border: 0;
    text-decoration: none;
}

a {
    background-color: inherit;
    color: #930;
    text-decoration: underline;
}

a:hover,
a:active {
    background-color: inherit;
    color: #000;
}


p {
    margin: 0.5rem 0.8rem 1rem 0.8rem;
    text-indent: 0;
}

h1 {
    background-color: #fcfcfc;
    border: 2px solid #eee;
    color: #1f7d3d;
    font-family: 'Gentium Book Basic', serif;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    line-height: 145%;
    margin: 0 0.5rem 1rem 0.5rem;
    text-align: center;
    word-spacing: 0.13em;
}

h2 {
    font-family: 'Gentium Book Basic', serif;
    text-align: center;
    color: #000;
    background-color: #fffffd;
    font-size: 120%;
}

/* main components */

#container {
    background-color: #fffffd;
    color: inherit;
    margin: 0 auto;
    width: 960px;
}

header {
    clear: both;
    font-size: 90%;
    padding-bottom: 3.5rem;
    width: 100%;
}

aside {
    float: left;
    padding-bottom: 3rem;
    width: 160px;
}

#content {
    float: left;
    padding-bottom: 3rem;
    width: 560px;
}

#news {
    float: left;
    padding-bottom: 3rem;
    width: 240px;
}

footer {
    background-color: #dae8d8;
    border-color: #c2c7cc;
    border-style: solid;
    border-width: 1px 0 0 0;
    clear: both;
    color: inherit;
}

footer p {
    font-size: 0.95rem;
    line-height: 145%;
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 1rem;
    text-align: center;
    text-indent: 0;
}

/* decorative */

ul li {
    text-align: left;
    list-style-image: url(vis/leafbullet.gif);
    margin: 0 0.5rem 1rem 3rem;
}

ol li {
    text-align: left;
    margin: 0 0.5rem 1rem 3rem;
}

.board_member {
    background-color: inherit;
    color: #000;
    margin: 0.5rem 1rem 1rem 1rem;
    text-indent: 0;
}

.board_member p {
    background-color: inherit;
    color: #555;
    font-size: 85%;
    margin: 0 1rem 0 1rem;
    text-indent: 0;
}

.adv_board_member {
    background-color: inherit;
    color: #000;
    margin: 0.5rem 1rem 1rem 1rem;
    text-indent: 0;
}

.adv_board_member p {
    background-color: inherit;
    color: #555;
    font-size: 85%;
    margin: 0 1rem 0 1rem;
    text-indent: 0;
}

.clear {
    clear: both;
}

.fir {
    float: right;
    margin: 1rem;
}

.fil {
    float: left;
    margin: 1rem;
}

/* front page only */
.letterbox {
    background-color: #f5ebd0;
    border: 1px solid #c2c7cc;
    color: inherit;
    padding: 2rem 1rem 3rem 1rem;
}

/* repeated pages */
.navbar {
    background-color: #dae8d8;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #c2c7cc;
    color: inherit;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    padding: 3px;
    text-align: right;
}

.floatbox {
    background-color: #fffff2;
    border: 1px solid #c2c7cc;
    color: #000;
    float: right;
    font-size: 90%;
    line-height: 135%;
    margin: 4px 0 5px 8px;
    padding: 6px;
    width: 175px;
}

.fleft {
    background-color: #eed;
    border: 1px solid #000;
    color: #000;
    float: left;
    font-size: 0%;
    line-height: 0%;
    margin: 4px 10px 5px 0px;
    padding: 0;
}

.caption {
    background: #ee9;
    border: 1px solid #c2c7cc;
    color: inherit;
    font-size: 90%;
    line-height: 110%;
    margin: 0 5px 5px;
    padding: 3px;
    width: 96%;
}

.inlinequotebox {
    background: #fffff2;
    border: 1px solid #c2c7cc;
    color: inherit;
    font-size: 90%;
    font-weight: normal;
    line-height: 130%;
    margin: 10px 0 0 4px;
    padding: 8px;
    width: 505px;
}

.inlinequoteboxsig {
    text-align: right;
}

.quotehead {
    background-color: #dae8d8;
    border-color: #c2c7cc;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    color: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 130%;
    margin: 0 1rem 0 1rem;
    padding: 0.25rem 1rem 0.25rem 1rem;
}

.quotebox {
    background-color: #fffff2;
    border: 1px solid #c2c7cc;
    color: inherit;
    font-weight: 400;
    line-height: 130%;
    margin: 0 1rem 1rem 1rem;
    padding: 1rem;
}

.quoteboxsig {
    text-align: right;
}

.newshead {
    background-color: #dae8d8;
    border-color: #c2c7cc;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    color: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 130%;
    margin: 0 1rem 0 1rem;
    padding: 0.25rem 1rem 0.25rem 1rem;
}

.newsbox {
    background-color: #fffff2;
    border: 1px solid #c2c7cc;
    color: inherit;
    font-weight: 400;
    line-height: 130%;
    margin: 0 1rem 1rem 1rem;
    padding: 1rem;
}

.paypalhead {
    background-color: #dae8d8;
    border-color: #c2c7cc;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    color: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 130%;
    margin: 0 1rem 0 1rem;
    padding: 0.25rem 1rem 0.25rem 1rem;
}

.paypalbox {
    background-color: #fffff2;
    border: 1px solid #c2c7cc;
    color: inherit;
    font-weight: 400;
    line-height: 130%;
    margin: 0 1rem 1rem 1rem;
    padding: 1rem;
}

.red {
    background-color: inherit;
    color: #963;
}

.blue {
    background-color: inherit;
    color: #369;
}

.iall {
    background-color: #9C0;
    color: #693;
    font-size: x-small;
}

.iselect {
    background-color: inherit;
    color: #000;
    font-weight: bold;
}

.spacer {
    padding: 4px;
}

.sztwo {
    font-size: 80%;
    margin: 0 10px 10px;
}

.twitter {
    font-weight: normal;
    margin: 0 10px 15px 10px;
    padding: 0px;
}

/* Vertical menu system derived from http://www.alistapart.com/articles/horizdropdowns/ */
nav ul {
    list-style: none;
    width: 100%;
}

nav ul li {
    float: left;
    list-style: none;
    margin: 0 0 0 4px;
    position: relative;
    width: 155px;
}

nav li ul {
    display: none;
    left: -4px;
    position: absolute;
    top: 37px;
}

nav ul li a,
nav ul li.donate a {
    background-color: #fffffd;
    border-color: #5f8196;
    border-radius: 12px;
    border-style: solid;
    border-width: 1px 3px 2px 1px;
    color: #2b5e7f;
    display: block;
    font-size: 120%;
    font-weight: bold;
    line-height: 1.5rem;
    padding: 5px 10px 5px 10px;
    text-align: center;
    text-decoration: none;
}

nav ul li.donate a {
    background-color: #fffffd;
    color: #1f7d3d;
}

nav li ul li a {
    background-color: #fafefe;
    color: #000;
    font-size: 115%;
    font-weight: normal;
    padding: 5px 10px 5px 10px;
    text-align: left;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li {
    float: left;
}

* html ul li a {
    height: 1%;
}

/* End */
nav ul li a:hover {
    background-color: #fefefa;
    color: #000;
}

nav ul li.donate a:hover {
    background-color: #fefefa;
    color: #1f7d3d;
}

nav li:hover ul,
nav li.over ul {
    display: block;
}

nav ul li ul li a:hover {
    background-color: #fefefa;
    color: #000;
}

span.definition {
    display: none;
}

span.word span.definition:hover {
    display: inline;
}

@media screen and (max-width:960px) {
    aside {
        display: none;
    }

    header {
        clear: both;
        width: 100%;
    }

    img#eiseley {
        height: 100%;
        width: 100%;
    }

    #container {
        width: 100%;
    }

    nav {
        margin-left: 0;
        width: 100%;
    }

    #content {
        width: 100%;
    }

    #news {
        width: 100%;
    }

    footer {
        width: 100%;
    }
}

@media screen and (max-width:640px) {
    aside {
        display: none;
    }

    header {
        clear: both;
        width: 100%;
    }

    img#eiseley {
        height: 100%;
        width: 100%;
    }

    #container {
        width: 100%;
    }

    nav {
        margin-left: 0;
        width: 100%;
    }

    #content {
        width: 100%;
    }

    #news {
        width: 100%;
    }

    footer {
        width: 100%;
    }

    .floatbox {
        width: 100%;
    }
}

@media screen and (max-width:480px) {
    .navicon {
        background: url(vis/navstack.png) no-repeat 98% center;
        background-color: #3b6e8f;
        color: inherit;
        cursor: pointer;
        display: block;
        height: 44px;
        width: 100%;
    }

    nav {
        background-color: #3b6e8f;
        color: inherit;
    }

    nav ul,
    nav ul li ul li {
        height: 0;
        overflow: hidden;
    }

    nav ul.open,
    nav ul li ul li.open {
        height: auto;
    }

    nav ul li {
        float: none;
        margin: 0;
        text-align: left;
        width: 100%;
    }

    nav ul li a,
    nav ul li.donate a {
        display: block;
        margin: 0;
        padding: 10px;
    }

    aside {
        display: none;
    }

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

    header {
        clear: both;
        width: 100%;
    }

    img#eiseley {
        height: 100%;
        width: 100%;
    }

    #container {
        width: 100%;
    }

    nav {
        margin-left: 0;
        width: 100%;
    }

    #content {
        width: 100%;
    }

    #news {
        width: 100%;
    }

    footer {
        width: 100%;
    }

    .floatbox {
        margin: 0;
        padding: 0;
        width: 100%;
    }
}