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


/*------------GALLERY-------------*/

.gallery {
    margin-left: 200px;
    margin-top: 20px;
    align-content: center;
}

.thumbnails {
    margin-left: 5px;
}

.thumbnails img {
    height: 80px;
    border: 4px solid #E3E3E3;
    padding: 1px;
    margin: 0 50px 10px 0;
}

.thumbnails img:hover {
    border: 4px solid #4F5355;
    cursor: pointer;
    opacity: .5;
}


/*------------END GALLERY-------------*/


/*------------MAIN CONTENT----------------*/

.wrapper {
    overflow: hidden;
}

.main {
    background-color: #fff;
}

article {
    background-color: #fff;
    float: left;
    margin-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    width: 60%;
}

.article-thumbnail img {
    max-width: 100%;
    padding-left: 35px;
    padding-top: 15px;
}

.article-thumbnail a {
    transition: opacity .4s ease;
}

.article-thumbnail a:hover {
    opacity: 0.5;
}

.notes-block a:link {
    color: #4C4C4C;
    font-size: .85em;
    font-style: italic;
    text-decoration: none;
}

.notes-block a:visited {
    color: #4C4C4C;
    font-size: .85em;
    font-style: italic;
}

.notes-block a:hover {
    color: #9AD7B9;
    font-size: .85em;
    font-style: italic;
}

.notes-block {
    padding-right: 40px;
    text-align: right;
}


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


/*------------SIDEBAR CONTENT-----------------*/

aside {
    background-color: #fff;
    float: right;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
    padding-top: 15px;
    width: 35%;
}

.social-nav-1 {
    padding-left: 30px;
}

.social-nav-2 {
    padding-left: 0px;
}

.social-nav-3 {
    padding-left: 0px;
}

.social-nav-4 {
    padding-left: 0px;
}

#boxed img {
    border: 3px solid #E3E3E3;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    margin-left: 20px;
}

aside p {
    color: #4F5355;
    font-size: .75em;
    font-family: avenir, sans-serif;
    text-align: center;
    overflow: visible;
    word-wrap: break-word;
    width: 250px;
    height: 70px;
}

.sidebar ul {
    padding-left: 25px;
}

.sidebar h4 {
    color: #45966E;
    font-family: 'Amatic SC', cursive;
    font-size: 2.75em;
    font-weight: 700;
    text-align: left;
    padding-left: 90px;
}

.sidebar .desc {
    color: #FFF;
    font-size: .8em;
    font-style: oblique;
    padding-bottom: 10px;
    width: 80%;
}

.sidebar-thumbnail img {
    border: 3px solid #fff;
    max-width: 85%;
}

.sidebar-thumbnail a {
    transition: opacity .4s ease;
}

.sidebar-thumbnail a:hover {
    opacity: 0.5;
    transition: opacity .4s ease;
}

.sidebar img:hover {
    opacity: .5;
}


/*------------END SIDEBAR 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;
    }
    article p {
        font-size: .75em;
        width: 220px;
    }
    .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: 50%;
        -webkit-column-count: 1;
        /* Chrome, Safari, Opera */
        -moz-column-count: 1;
        /* Firefox */
        column-count: 1;
    }
    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;
    }
}