*
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    background-color: #78C262;
    font-size: 10pt;
    color: #393A39;
    letter-spacing: 0.4px;
    padding:0px;
}

.grey
{
    color: #141715;
}

.extraLightGreen
{
    color: #B6EDA4;
}

.lightGreen
{
    color: #78C262;
}

.darkGreen
{
    color: #53A546;
}

a
{
    border: none;
    color: inherit;
    text-decoration: none;
}

    a:hover
    {
        color:#78C262;
    }

ul
{
    list-style-type: none;
    line-height: 16pt;
    margin-left: 17px;
    margin-top:10px;
    margin-bottom:20px;
    font-weight:700;
}

#logo, #slogan
{
    width: auto;
    margin: auto;
    display: block;
}

h2
{
    font-weight: 100;
    font-size: 2.0em;
    color: #141715;
    margin: 8% 0 1% 0;
    display:block;
    border-bottom: 1px solid #dbd7d7;
}

h3, dt
{
    font-weight: 700;
    font-size: 1.4em;
    margin: 2% 0 2% 0;
}


h4
{
    font-weight: 300;
    font-size: 1.6em;
    color: #141715;
    margin: 60px 0 20px 0;
    text-align: center;
    font-style:italic;
}

.photo
{
    margin: 20px 0;
    border: 1px solid white;
}

#container
{
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
}

#header
{
    width: 100%;
    height: 100%;
    background-color: #78C262;
}

#menu
{

    max-width: 100%;
    margin: 0 auto;
    background-color: #F9F9F9;

}

    #ww
    {
        color: white;
        float: right;
        font-size: 1.2em;
        margin-top: 0.8%;
        position:relative;
        right: -4.8%;
        background-color:black;
        padding: 6px 20px;
    }

    #menu a
    {
        width: 10%;
        float: left;
        padding: 1.2% 3.5%;
        display: inline-block;
        text-align: center;
        float: left;
        color: #141715;
        font-weight: 100;
        letter-spacing: 0.9px;
        opacity: 0.7;
        background-color: #F9F9F9;
        margin-left:1%;

    }

    #menu a:hover
    {
        color: #78C262;
        background-color: black
    }
    
#content
{
    width: 90%;
    height: 100%;
    margin: 0 1%;
    padding: 3% 4%;
    background: #F2F2F2;
    border: 1px solid white;
    border-radius: 10px;
    border-bottom: none;
    float: left;
}

#middle, #right
{
    float: left;
    width: 40%;
    padding: 2% 2%;
}

#right
{
    margin-left: 40px;
}

#bottom
{
    max-width: 650px;
    float: left;
}

#wrapper
{
    float: left;
    width: 60%;
    margin-left: 40%;
    padding-bottom:60px;
    height: auto;
}
#photos img
{
    margin-top:30px;
    width: 100%
}


#grass
{
    width: 100%;
    height: 80px;
    margin-top: -80px;
    background-image: url(images/grass.png);
    float: left;
}

#flowers
{
    margin: 0 0 -70px -300px;
}

#tree
{
    margin-bottom: -124px;
    margin-top: -400px;
}

#footer
{
    width: 100%;
    padding-top: 10px;
}

li
{
    list-style-image: url(images/listLeaves.png);
    line-height: 1.4em
   
}

dl
{
    margin: 10px 0;
    float: left;
    width: 50%
}

p
{
    margin-top: 10px;
    width: 100%;
}

em
{
    font-weight:700;
    font-style: normal;
}

/*iPad*/
@media screen and (max-width: 768px) {
    body
    {
        font-size:8pt;
    }
    
    #logo, #slogan
    {
        max-width: 50%
    }
    
    #tree
    {
        margin-left: -2000px
    }
    #flowers
    {
        margin:0;
    }
    #wrapper
    {
        width: 100%;
        margin:0%
    }
    h2
    {
        margin: 6% 0 1% 0%;
        width: 70%
    }
    h4
    {
        width: 70%;
        margin: 8% auto 0 auto;
    }
    p
    {
        max-width:70%
    }
    li
    {
        line-height: 0.9em
    }
    dt
    {
        margin-bottom:1%;
    }
    dl
    {
        width: 100%
    }
    dd
    {
        line-height:1.6em;
    }

}

/*iPhone Landscape*/
@media screen and (max-width: 568px) {
        body
    {
        font-size:8pt;
    }
    p
    {
        max-width:100%;
        line-height:10pt;
    }
    #content
    {
        margin: 0;
        width:92%
    }
    #menu a
    {
        width: 100%;
        text-align:center;
        padding: 4% 0%;
        border-bottom: 1px solid white;
        font-size: 1.1em
    }
    h2
    {
        width: 100%
    }
    h3, dt
    {
        font-weight: 700;
        font-size: 1.4em;
        margin: 2% 0 2% 0;
    }
    #ww
    {
        font-size:1.0em;
        display:block;
        width: 100%;
        padding: 1% 0;
        text-align:center;
        margin: 0;
        margin-bottom:1%;
        float:none;
        position:inherit
    }
    li
    {
        line-height:1.1em;
    }
    dl
    {
        text-align:right;
        display:block
    }

}

/*iPhone Portrait*/
@media screen and (max-width: 320px) {

    #ww
    {
        font-size: 1.0em;
    }
    #menu a
    {
        padding: 4% 0%;
    }
    h2
    {
        font-size:1.6em;
    }
    #logo, #slogan
    {
        max-width:70%
    }

    h4
    {
        width:90%;

    }
}