/*  Elise Murphy
    Web Design 2
    Final Project
    May 2013
*/

/* Table of Content
==================================================
	#Reset & Basics
	#Typography
	#Links
	#Nav
	#Header Styles & Layout
	#Body Styles & Layout
	#Footer Styles & Layout
	#Forms
    #Media Queries
	#Misc */


/* #Reset & Basics
================================================== */

* {
    margin:                             0;
    padding:                            0;
    border:                             0;
}

html {
    margin:                             0 auto;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:                            block;
}

ol, ul {
    list-style:                         none;
}

img {
    max-width:				            100%;
    height:					            auto;
    width: 					            auto\9; /* ie8 */
}

body {
    font:                               100%/1.3 'Quattrocento Sans', sans-serif;
    font-weight:                        400;
    color:                              #444;
    background:                         url('../images/brown-bg-640x640.jpg') #fff;
}


/* #Typography
================================================== */

@font-face {
    font-family: 'Quattrocento Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Quattrocento Sans'), local('QuattrocentoSans'), url(http://themes.googleusercontent.com/static/fonts/quattrocentosans/v5/efd6FGWWGX5Z3ztwLBrG9coBJSyBiVuloIc8IXLz46o.woff) format('woff');
}
@font-face {
    font-family: 'Quattrocento Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Quattrocento Sans Bold'), local('QuattrocentoSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/quattrocentosans/v5/tXSgPxDl7Lk8Zr_5qX8FIaILZ3_VFR4y34zupljc1bH3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}

@font-face {
    font-family: 'IM Fell DW Pica SC';
    font-style: normal;
    font-weight: 400;
    src: local('IM FELL DW Pica SC'), local('IM_FELL_DW_Pica_SC'), url(http://themes.googleusercontent.com/static/fonts/imfelldwpicasc/v3/xBKKJV4z2KsrtQnmjGO17N53Gl4ViFi9Z2HSjeIl6bI.woff) format('woff');
}


/* #Links
================================================== */

a img[src$=png], a:active img[src$=png],
a img[src$=jpg], a:active img[src$=jpg] {
    text-decoration:					none;
    border:								0 none;
}

a:hover img[src$=png],
a:hover img[src$=jpg] {
    text-decoration:					none;
    border:								0 none;
}

a, a:link, a:visited, a:active  {
    text-decoration:					none;
    color:                              #916633;
}


/* #Nav
================================================== */

#mainNav {
    position:                           absolute;
    top:                                0;
    background:                         url('../images/green-bg-960x40.gif') repeat;
    height:                             40px;
    margin-bottom:                      0;
    z-index:                            99;
}

#mainNav li ul {
    display:                            none;
}

#mainNav li:hover ul {
    display:                            block;
    padding-top:                        0;
}

#mainNav li a {
    display:                            block;
    padding:                            15px 5px 4px;
}

#mainNav li a:hover, #mainNav li a.activeLink {
    color: 								#fff;
    background-color:                   #EA8B10;
    font-weight:                        700;
    z-index:                            99;
}

#mainNav li ul li {
    padding-top:                        0;
    padding-bottom:                     0;
    width:                              170%;
    background-color:                   #fff;
}

#mainNav li ul li a {
    padding-top:                       3px;
    border-bottom:                     1px dotted #444;
}

#mainNav li li:first-child a {
    padding-top:                        1px;
}

figcaption a:hover,
.cta a:hover,
.cta:hover,
#main-content section a:hover,
#news-events-list a:hover,
#join-process a:hover {
    font-weight:                        700;
    background-color:                   rgb(64,182,89);
    border-top:                         0 none;
    border-bottom:                      0 none;
}

.opacity:hover {
    opacity:							.7;
}



/* #Header Styles & Layout
================================================== */

.container {
    margin:                             0 auto;
    position:                           relative;
    top:                                0;
    background-color:                   #fff;
}

header {
    position:                           relative;
    top:                                40px;
    background-color:                   rgb(64,182,89);
    height:                             60px;
}

#title h1 {
    color:                             #fff;
    font-size:                         3.3em;
    letter-spacing:                    .01em;
    text-transform:                    uppercase;
    text-align:                        justify;
}

#tagline h2, #tagline-ll h2 {
    color:                             #F2AD52;
    font-size:                         2em;
    font-weight:                       400;
    font-style:                        normal;
}
#tagline-ll h2 {
    position:                          relative;
    top:                               30px;
}

#hp-banner {
    margin-top:                         60px;
    background-image:                   url('../images/wood-960x380.jpg');
    height:                             380px;
}

#ll-banner {
    margin-top:                         60px;
    width:                              auto;
    height:                             auto;
}

#slogan {
    font-size:                         4.5em;
    font-weight:                       700;
    letter-spacing:                    .148em;
    line-height:                       120%;
    text-align:                        justify;
    text-shadow:                       0 2px 4px #78615A;
    text-transform:                    uppercase;
    margin-top:                          25px;
    margin-bottom:                       0;
    z-index:                             4;
}

.arrow {
    font-size:                          1.5em;
}

#flower-vine {
    background:                         url('../images/greenVine-646x92.png') no-repeat top right;
    height:                             92px;
    width:                              646px;
    z-index:                            5;
    position:                           relative;
    top:                                -55px;
}

/* #Body Styles & Layout
================================================== */

figure img {
    border:                             1px solid #444;
    box-shadow:                         2px 2px 2px #444;
    background-color:                   #fff;
}
figure figcaption {
    font-size:                           .96em;
}

#main-content h3 {
    font-family:                        'IM Fell DW Pica SC', serif;
    color:                               #916633;
    font-size:                          1.5em;
    font-weight:                        normal;
}

#main-content p, aside li {
    font-size:                          .88em;
}

#main-content section p {
    padding-bottom:                     8px;
}

#main-content section p strong {
    border-left:                        5px solid rgb(64,182,89);
    padding-left:                       3px;
}

#main-content section p strong span {
    color:                              #444;
}

#volunteer-cta {
    font-size:                          1.1em;
    padding-top:                        10px;
    padding-bottom:                     15px;
    clear:                              both;
}

.cta {
    border-top:                         1px dotted #916633;
    border-bottom:                      1px dotted #916633;
    color:                              #916633;
    font-weight:                        700;
    padding-top:                        3px;
    padding-bottom:                     3px;
}

.side-list {
    list-style:                         disc inside;
}

#main-content li,
.side-list li {
    padding-bottom:                     8px;
}

#ll-focus-items h4 {
    color:                              #464637;
    font-weight:                        700;
    padding-top:                        20px;
    padding-bottom:                     15px;
}

section#ll-focus-items {
    background: #fff; /* Old browsers */
    background: -moz-linear-gradient(top,  #fff 1%, #ea8b10 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#ea8b10)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fff 1%,#ea8b10 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fff 1%,#ea8b10 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fff 1%,#ea8b10 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #fff 1%,#ea8b10 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#ea8b10',GradientType=0 ); /* IE6-9 */
    height:                         auto;
    z-index:                        9999;
    padding-bottom:                 25px;
    margin-bottom:                  0;
}

article.ll-focus {
    margin-bottom:                  0;
}

q {
    display:                        inline-block;
    background-color:               rgba(64,182,89, .3);
    border-top:                     3px solid rgb(64,182,89);
    text-align:                     center;
    font-weight:                    700;
    margin-bottom:                  15px;
    padding-top:                    10px;
    padding-bottom:                 10px;
 }

q:before, q:after {
    content: "";
}

.testimonial {
    display:                        inline-block;
    font-size:                      .88em;
    font-weight:                    400;
}


/* #Footer Styles & Layout
================================================== */

footer {
    color:                              #fff;
    text-shadow:                        2px 2px 0 #222;
}

footer.dirt {
    background:                         url('../images/dirt-bg-960x100.jpg') repeat;
    margin-bottom:                      0;
    height:                             100px;
 }

.footerArea {
    padding-top:                        20px;
}

.smLogo {
    display:                            inline-block;
    margin-top:                         -5px;
}

/* #Forms
================================================== */

form {
    font:                               .88em/1.3 'Quattrocento Sans', sans-serif;
}
input {
    padding-top:                        5px;
    padding-bottom:                     5px;
    border:                             1px solid #444;
}
input:focus {
    border:                             1px solid rgb(64,182,89);
    padding-left:                       3px;
}
#donate-form input {
    display:                            block;
    margin-bottom:                      7px;
}
input.magnify {
    background:							#fff url('../images/magnifier-right-21x21.png') no-repeat 5% 50%;
    z-index:							30;
}
input.magnify:focus {
    background:                         #fff;
}
#donate-form input.enews {
    display:                            inline-block;
    margin-right:                       15px;
}
.enews {
    padding-right:                      3px;
}
#next-button {
    color: 								#dee5f0;
    padding: 							5px 10px;
    border: 							solid 1px #fff;;
    border-radius: 						5px;
    margin-top:                         5px;
    background: 						#916633;;
    }
#next-button:hover {
    background: 						rgb(64,182,89);
}
#next-button:active {
    color: 								#444;
}
#searchForm {
    height:                             1em;
}

/* #Misc
================================================== */

/* #Media Queries
================================================== */

/* larger than 768 (devices and browsers) */
@media screen and (min-width: 768px) {
    #menu {
        display:        none;
    }
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

   body {
       font-size:               .88em;
   }
    #mainNav {
        font-size:               1em;
    }
    #mainNav li a {
        padding-bottom:          7px;
    }
    #slogan {
        letter-spacing:         .13em;
    }
    figure figcaption {
        font-size:              .87em;
    }
    footer {
       font-size:               .92em;
       font-weight:             700;
   }

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    body {
        font-size:               .95em;
    }
    .container, #menu,
    #navLinks.open li a,
    #mainNav li ul li, .dirt {
        width:                  420px;
    }
    #menu {
        position:               absolute;
        top:                    0;
        display:                block;
        background:             url('../images/green-bg-960x40.gif') #fff no-repeat;
        color:                  #444;
        font-size:              1.5em;
        padding:                .5em 0;
    }
    #menu p,
    #navLinks.open li a,
    #title h1,
    #focus-items figure,
    #ll-focus-items figure {
        text-align:             center;
    }
    #mainNav {
        background-image:       none;
        top:                    40px;
        height:                 auto;
    }
    #navLinks {
        display:                none;
    }
    #navLinks.open {
        display:                block;
        height:                 auto;
        background-color:       #fff;
    }
    #navLinks.open li {
        padding:                0;
        border-top:             1px dotted #444444;
    }
    #navLinks.open li a {
        display:                block;
        padding:                .5em 0;
    }
    #mainNav li ul li {
        border-bottom:          none;
        border-top:             none;
    }
    header {
        height:                 auto;
    }
    #title h1 {
        font-size:              1.9em;
        z-index:                2;
    }
    #hp-banner, #ll-banner {
        width:                  100%;
        height:                 auto;
    }
    #slogan {
        font-size:              3.4em;
        padding-left:           .25em;
        width:                  auto;
    }
    #flower-vine {
        top:                    -45px;
        background-position:    left center;
        width:                  100%;
        background-size:        100%;
    }
    #tagline, #tagline-ll,
    #main-content h3, #main-content h4,
    section p, section ul,
    aside h3, aside ul, aside p,
    .cta, #ll-focus-items h4,
    #donate-section, #donate-form {
        padding-left:            10px;
        padding-right:           10px;
        width:                  400px;
    }
    section#volunteer-cta h4 {
        width:                 392px;
        padding-top:            20px;
        padding-left:           4px;
        padding-right:          4px;
    }
    #tagline, #tagline-ll {
        font-size:              .6em;
    }
    #ll-banner {
        margin-top:             40px;
    }
    figure img {
        display:                none;
    }
    #focus-items {
        border-top:             1px dotted #916633;
        border-bottom:          1px dotted #916633;
    }
    #focus-items figure,
    #ll-focus-items figure {
        width:                  33%;
        border-right:           1px dotted #916633;
        padding:                8px 0;
    }
    #focus-items figure:last-child,
    #ll-focus-items figure:last-child {
        border-right:           none;
    }
    #ll-focus {
        padding-top:            0;
    }
    .footerArea, .copyright, #searchForm, #social-media {
        position:               relative;
        top:                    0;
    }
    section p.copyright {
        top:                    40px;
        padding-right:          0;
        left:                   10px;
        text-align:             left;
    }
    #searchForm, #social-media{
        top:                    -20px;
        width:                  50%;
    }
    #search {
        width:                  168px;
        margin-left:            10px;
    }
    #social-media ul {
        width:                  188px;
        display:                inline;
        float:                  left;
        margin-left:            200px;
    }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

    body {
        font-size:              .88em;
    }
    .container, #menu,
    #navLinks.open li a,
    #mainNav li ul li, .dirt {
        width:                  300px;
    }
    #menu {
        position:               absolute;
        top:                    0;
        display:                block;
        background:             url('../images/green-bg-960x40.gif') #fff no-repeat;
        color:                  #444;
        font-size:              1.5em;
        padding:                .5em 0;
    }
    #menu p,
    #navLinks.open li a,
    #title h1,
    #focus-items figure,
    #ll-focus-items figure,
    section p.copyright {
        text-align:             center;
    }
    #mainNav {
        background-image:       none;
        top:                    40px;
        height:                 auto;
    }
    #navLinks {
        display:                none;
    }
    #navLinks.open {
        display:                block;
        height:                 auto;
        background-color:       #fff;
    }
    #navLinks.open li {
        padding:                0;
        border-top:             1px dotted #444444;
    }
    #navLinks.open li a {
        display:                block;
        padding:                .5em 0;
    }
    #mainNav li ul li {
        border-bottom:          none;
        border-top:             none;
    }
    #title h1 {
        font-size:              1.8em;
        z-index:                2;
    }
    #hp-banner, #ll-banner {
        width:                  100%;
        height:                 auto;
    }
    #slogan {
        font-size:              3.4em;
        padding-left:           .25em;
        width:                  auto;
    }
    #flower-vine {
        top:                    -45px;
        background-position:    left center;
        width:                  100%;
        background-size:        100%;
    }
    #tagline, #tagline-ll,
    #main-content h3, #main-content h4,
    section p, section ul,
    aside h3, aside ul, aside p,
    .cta, #ll-focus-items h4,
    #donate-section, #donate-form {
        padding-left:            8px;
        padding-right:           8px;
        width:                  284px;
    }

    section#volunteer-cta h4 {
        width:                 292px;
        padding-top:            20px;
        padding-left:           4px;
        padding-right:          4px;
    }

    #tagline, #tagline-ll {
        font-size:              .6em;
    }
    #ll-banner {
        margin-top:             40px;
    }
    figure img {
        display:                none;
    }
    #focus-items {
        border-top:             1px dotted #916633;
        border-bottom:          1px dotted #916633;
    }
    #focus-items figure,
    #ll-focus-items figure {
        width:                  33%;
        border-right:           1px dotted #916633;
        padding:                8px 0;
    }
    #focus-items figure:last-child,
    #ll-focus-items figure:last-child {
        border-right:           none;
    }
    #ll-focus {
        padding-top:            0;
    }
    .footerArea, .copyright, #searchForm, #social-media {
        position:               relative;
        top:                    0;
    }
    section p.copyright {
        top:                    40px;
        padding-right:          0;
    }
    #searchForm, #social-media{
        top:                    -20px;
        width:                  50%;
    }
    #search {
        width:                  127px;
        margin-left:            3px;
    }
    #social-media ul {
        width:                  142px;
        display:                inline;
        float:                  left;
        margin-left:            150px;
    }

}