/* The default style sheet for this site. */
    /*Reset browser's own internal CSS stylesheet before reading this file. */
    
    * {
        margin: 0;
        padding: 0;
    }
    /*--------PAGE STYLE RULES-------*/
    
    body {
        background-color: #ffffff;
        font-family: 'PTSans', Geneva, Tahoma, Verdana, sans-serif;
        font-size: 100%;
        font-weight: 400;
        margin: 0 auto;
        max-width: 100%;
    }
    
    header {
        background-color: #ffffff;
    }
    
    h1 {
        background-color: #9AD7B9;
        color: #9AD7B9;
        font-family: 'PTSans', Calibri, sans-serif;
        font-size: .5em;
        font-weight: 700;
        padding: 0px 25px 25px 0px;
    }
    
    h2 {
        color: #45966E;
        font-family: 'Amatic SC', cursive;
        font-size: 2.75em;
        font-weight: 700;
        text-align: center;
    }
    
    h3 {
        color: #4C4C4C;
        font-family: futura;
        font-size: 2.75em;
        font-weight: 700;
        text-align: center;
    }
    
    h4 {
        background-color: #fff;
        color: #4C4C4C;
        font-family: 'Sacramento', cursive;
        font-size: 6.1875em;
        font-weight: 700;
        padding: 0px 10px 0px 15px;
        text-align: center;
    }
    
    h5 {
        background-color: #fff;
        color: #fff;
        font-family: 'PTSans', Calibri, sans-serif;
        font-size: .2em;
        font-weight: 700;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
    p {
        color: #4C4C4C;
        font-family: avenir, sans-serif;
        font-size: .8em;
        padding: 20px;
        padding-left: 40px;
    }
    /* unvisited link */
    
    a:link {
        color: #45966E;
        text-decoration: none;
    }
    /* visited link */
    
    a:visited {
        color: #9AD7B9;
        text-decoration: none;
    }
    /* mouse over link */
    
    a:hover {
        color: #E3E3E3;
        text-decoration: none;
    }
    /* selected link */
    
    a:active {
        color: paleturquoise;
        text-decoration: none;
    }
    /*--------END PAGE STYLE RULES-------*/
    /*---------MAIN NAVIGATION----------*/
    
    #banner img {
        background-color: #ffffff;
        min-height: 100%;
        float: center;
        max-width: 100%;
    }
    
    nav {
        background-color: #9AD7B9;
        color: #4F5355;
        font-family: futura;
        font-size: 16px;
        padding-bottom: 30px;
    }
    
    nav ul {
        text-align: center;
    }
    
    li {
        list-style-type: none;
    }
    
    nav li {
        color: #4F5355;
        display: inline-block;
        margin-left: 30px;
        margin-right: 30px;
    }
    
    .main-nav li a:link {
        color: #4F5355;
        text-decoration: none;
    }
    
    .main-nav li a:visited {
        color: #4F5355;
    }
    
    .main-nav li a:hover {
        color: #000000;
    }
    
    .main-nav a:active {
        color: #000000;
    }
    
    #active-page .current-page-item a {
        font-size: 1.4em;
        font-weight: bold;
    }
    /*------------END MAIN NAVIGATION--------------*/
    /*------------MAIN CONTENT----------------*/
    
    .wrapper {
        overflow: hidden;
    }
    
    .main {
        background-color: #fff;
    }
    
    #content img {
        width: 50%;
    }
    
    article {
        background-color: #fff;
        margin-top: 20px;
        padding-bottom: 20px;
        max-width: 75%;
    }
    /*------------END MAIN CONTENT----------------*/
    /*----------SECONDARY PAGES CONTENT-----------*/
    
    .full-article {
        float: none;
        width: 100%;
    }
    
    .full-article .desc {
        font-size: .75em;
        font-style: italic;
        padding-left: 35px;
    }
    /*----------END SECONDARY PAGES CONTENT-------*/
    /*------------FOOTER CONTENT------------------*/
    
    footer {
        background-color: #ffffff;
        clear: both;
    }
    
    footer nav {
        clear: both;
        background-color: #ffffff;
        padding-bottom: 10px;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 10px;
        font-size: .9em;
    }
    
    .main-nav img:hover {
        opacity: .5;
    }
    
    footer small {
        background-color: #ffffff;
        color: #4C4C4C;
        display: block;
        padding: 1em;
        text-align: center;
        text-decoration: none;
    }
    
    footer a {
        text-decoration: none;
    }
    /*
The following approach adapts a procedure explained by developer Tony Thomas on medialoot.com: 
http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
*/
    /* Style 'show menu' label button and hide it by default */
    
    .show-menu {
        color: #fff;
        display: none;
        float: right;
        font-family: 'PTSans', Geneva, Tahoma, Verdana, sans-serif;
        font-size: 2.2em;
        text-decoration: none;
    }
    /*Hide checkbox permanently*/
    
    input[type=checkbox] {
        display: none;
    }
    /*Show menu when invisible checkbox is checked*/
    
    input[type=checkbox]:checked~.main-nav {
        display: block;
    }
    /*------------END FOOTER CONTENT------------------*/
    /*------------MEDIA QUERIES------------------*/
    /* smartphone vertical orientation: 320px to +/- 479px*/
    
    @media only screen and (min-width: 20em) and (max-width: 29em) {
        #banner img {
            background-color: #ffffff;
            min-height: 100%;
            float: center;
            max-width: 100%;
        }
        body {
            background-image: none;
        }
        .main-nav {
            display: none;
            position: static;
        }
        /*Display the'show menu' icon link */
        .show-menu {
            display: block;
            margin-top: -50px;
        }
        nav li {
            display: block;
            text-align: left;
        }
        nav a {
            font-size: .875em;
        }
        .main-nav .subnav li {
            background-color: #D9853B;
            border-bottom: solid 10px #D9853B;
            border-left: solid 20px #D9853B;
            border-right: solid 20px #D9853B;
            border-top: solid 10px #D9853B;
            float: left;
            font-size: 1em;
            width: auto;
        }
        h1 {
            font-size: 1.1875em;
            font-weight: 700;
            padding: 10px 25px 10px 15px;
        }
        h2 {
            font-size: 1.125em;
            font-weight: 700;
            padding: 10px 25px 10px 15px;
        }
        h3 {
            font-size: 1em;
            font-weight: 700;
            padding: 5px 0 5px 40px;
        }
        h4 {
            font-size: 4em;
            font-weight: 700;
        }
        .gallery {
            display: none;
        }
        article {
            width: 100%;
            -webkit-column-count: 1;
            /* Chrome, Safari, Opera */
            -moz-column-count: 1;
            /* Firefox */
            column-count: 1;
        }
        #content img {
            text-align: center;
            width: 100%;
        }
        article p {
            font-size: .75em;
        }
        .article-thumbnail img {
            max-width: 60%;
            padding-left: 35px;
            padding-top: 15px;
        }
        aside {
            width: 100%;
        }
        .sidebar-thumbnail img {
            max-width: 75%;
        }
        #active-page .current-page-item a {
            font-size: 1.2em;
        }
    }
    /* smartphone and tablet: 480px to +/- 719px */
    
    @media only screen and (min-width: 30em) and (max-width: 59em) {
        #banner img {
            background-color: #ffffff;
            min-height: 100%;
            float: center;
            max-width: 100%;
        }
        header {
            position: relative;
        }
        nav li {
            display: inline-block;
            margin-left: 10px;
            margin-right: 10px;
        }
        nav a {
            font-size: .875em;
        }
        .main-nav li:hover .subnav {
            background-color: #D9853B;
            display: block;
            float: left;
            font-size: .875em;
            width: 2em;
        }
        .main-nav li:hover .subnav li {
            width: 8em;
        }
        h1 {
            font-size: 1.1875em;
            font-weight: 700;
            padding: 10px 25px 10px 15px;
        }
        h2 {
            font-size: 1.125em;
            font-weight: 700;
            padding: 10px 25px 10px 15px;
        }
        h3 {
            font-size: 1em;
            font-weight: 700;
            padding: 5px 0 5px 40px;
        }
        .gallery {
            display: none;
        }
        article {
            max-width: 100%;
            -webkit-column-count: 1;
            /* Chrome, Safari, Opera */
            -moz-column-count: 1;
            /* Firefox */
            column-count: 1;
        }
        #content img {
            text-align: center;
            width: 100%;
        }
        article p {
            font-size: .75em;
        }
        .article-thumbnail img {
            max-width: 65%;
            padding-left: 35px;
            padding-top: 15px;
        }
        aside {
            width: 35%;
        }
        .social-nav-1 img {
            max-width: 25px;
        }
        .social-nav-2 img {
            max-width: 25px;
        }
        .social-nav-3 img {
            max-width: 25px;
        }
        .social-nav-4 img {
            max-width: 25px;
            padding-right: 10px;
        }
        #boxed img {
            max-width: 60%;
        }
        .sidebar h4 {
            font-size: 1.4em;
        }
        aside p {
            width: 100px;
            height: auto;
        }
        aside li:last-child {
            padding-bottom: 20px;
        }
        footer nav {
            font-size: 1.3em;
        }
        footer small {
            font-size: .5em;
        }
    }
    /* tablet and desktop: 720px to +/- 1400px */
    
    @media only screen and (min-width: 60em) and (max-width: 100em) {
        article {
            padding-left: 190px;
        }
        #content img {
            width: 50%;
            padding-left: 200px;
        }
    }