/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
    margin: 0;	
    padding: 0;	
    border: 0;	
    font-size: 100%;	
    font: inherit;	
    vertical-align: baseline;}
    
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
    display: block;}
    
    body {	
    line-height: 1.5;
    }
    
    ol, ul {	
    list-style: none;
    }
    
    blockquote, q {	
    quotes: none;
    }
    
    blockquote:before, blockquote:after,q:before, q:after {	
    content: '';	
    content: none;
    }
    
    table {	
    border-collapse: collapse;	border-spacing: 0;
    }	 
    
    /* end reset*/

/* 
COLORS
---------------------------
Dark Brown: #8F7263
Pale Green: #C8DBC3
Light Brown: #DBBDAD
Light Purple: #9997DB
Dark Purple: #6A6A8F

Dark Green: #879484
Darker Green: #5B6359
Darker Brown: #5C493F

*/


/* MAIN */

body  {
    color: black;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    background-color: #5C493F;
    font-size: 20px;
}

.wrapper      {
    width: 100%;
    max-width: 1200px;
    min-width: 400px;
    margin: 10px auto;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #8F7263;
}

.page-title {
    font-weight: bold;
    font-size: 1.8em;
    font-family: 'Josefin Slab', serif;
    text-align: center;
    letter-spacing: 0.2em;
}

p {
    margin-bottom: 1em;
}

a {
    color: rgb(51, 58, 41);
}

.tiny {
    display: grid;
    grid-column: 1;
    font-size: 0.8em;
}


/* NAVIGATION */

.main-navigation {
    overflow: hidden;
    background-color: #333;
    font-size: 1.0em;
    letter-spacing: 0.2em;
    font-family: 'Josefin Slab', serif;
}

.main-navigation a {
    float: left;
    color: white;
    background: #879484;
    text-decoration: none;
    padding: 10px 28px;
    border-right: 2px solid rgba(0,0,0,.5);
    transition: background 80ms ease-in-out;
}
      
.main-navigation a:hover, .main-navigation a:focus {
    background: #5B6359;
    /* top: 2px; */
}

/* INDEX */

.statement {
    font-size: 0.9em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    width: 100%;
    margin: 2px auto;
    text-align: center;
}

.statement h3 {
    font-family: Georgia, serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #36453d;
}

.statement .top {
    margin-top: 10px;
}

.statement img {
    width: 30%;
    min-width: 250px;
    margin: 2px auto;
}

.banner img {
    width: 100%;
    min-width: 300px;
}

.banner a {
    display: block;
    font-size: 0.6em;
    padding-top: 0;
    margin-top: 0;
    color: black;
}

#statement-img {
    margin: 2px auto;
}


/* PAGE1 PAGE2 */

/* PAGE1 LEFT-RIGHT SPLIT */
    
.left-content    {
    float: left;
    width: 60%;
    /* border: 1px solid #333; */
    text-align: center;
    margin: 2px auto;
}

.left-content img {
    margin: 2px auto;
    text-align: center;
}

.right-content  {
    float: right;
    width: 20%;
    padding: 15px;
    color: rgb(0, 0, 0);
    border-left: 1px solid #333;
}

.main-image {  /*this removes the line-height beneath the image*/
    display: block;
}   

.right-content h3 {
    font-family: Georgia, serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #36453d;
}

.sub {
    font-size: 0.9em;
}

/* PAGE 2 TOP-BOTTOM SPLIT */

.top-content    {
    width: 100%;
    border: 1px solid #333;
    text-align: center;
}

.bottom-content  {
    width: 100%;
    padding: 15px;
    text-align: center;
    color: rgb(0, 0, 0);
    /* border-left: 1px solid #333; */
}

.top-content img {
    width: 100%;
    min-width: 400px;
}

.bottom-content h3 {
    font-family: Georgia, serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #36453d;
}


/* CLEARFIX AND FOOTER */

.clearfix {   /* place this after elements with float: left and float: right to "clear" layout issues */
    clear: both;
}
    
footer {
    clear: both;
    font-size: 10px;
    color: #333;
}

/* uncomment the following block to add responsive styles for mobile devices */

/*
@media screen and (max-width: 480px) {
    body {
        background-color: peachpuff;
        color: hotpink;
    }

    .main-navigation {
        background-color: chartreuse;
    }

    .main-navigation a {
        background-color: aqua;
    }
}
*/