/* RESET */
body, p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

/* box model */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* body */
body {
    font-family: 'Acme', sans-serif;
    color: rgb(16 16 16);
    font-size: 18px;
    background-color: white;
    background-image: url(images/grad.gif);
    background-repeat: repeat-x;
    
}

/* wrapper */

div#wrapper {
    margin: 0 auto;
    max-width:1100px;
    box-shadow: 0 0 10px #101010;
}

/* header */
header {
    background-color: #c5ee7d;
    border-bottom: 4px solid #5c452d;
    background-image: url(images/shrek2.png);
    background-repeat: no-repeat;
    background-position: 5% .6rem;
    padding:.75rem
}

header h1 {
    color: rgb(16 16 16);
    padding: 1rem 0 0 9rem;
    font-size: 2.75rem;
    
}

header h2 {
    color: rgb(16 16 16);
    padding-left: 9rem;
    font-size: 1.25rem;
}



/* Navigation */

/* phone nav */
@media only screen and (max-width: 600px) {
    nav {
        background-color: #5c452d;
        padding: .75rem 5%;
        
    }
    
    nav ul.Shrek {
        list-style-type: none;
        padding: 0;
    }
    
    nav ul.Shrek li a {
        padding: .3rem 1.2rem;
        margin-bottom: .5rem;
        background-color: #e1dfb6;
        font-weight: bold;
        text-decoration: none;
        display: block;
        border: solid 2px #7a9244;
        border-radius: .75rem;
        color: #5c452d;
    }
    nav ul.Shrek li a:hover {
        background-color: #7a9244;
    }
    nav ul.Shrek li.whereami a {
        background-color: #8cb04e;
    }
    .outofmyswamp {
    clear: both;
        
    }   
    
}

/* desktop nav */
@media only screen and (min-width: 601px) {
    nav {background-color: #c5ee7d;
            background: linear-gradient(to bottom, #e1dfb6 0%, #5c452d 100%);
            border-bottom: solid 1px #5c452d;
            border-top: solid 1px #5c452d
    }

    nav ul.Shrek li {
    float: left;
    list-style-type:none;
    }

    nav ul.Shrek li a {
    display: block;
    padding: 5px 15px;
    color: #e1dab6;
    text-decoration: none;
    border-right: solid 1px #5c452d;
    border-top: solid 1px #5c452d;
    border-left: solid 1px #5c452d;
    }

    nav ul.Shrek li a:hover {
    background-color: #7a9244;
    }

    nav ul.Shrek li.whereami a {
    background-color: #8cb04e;
    }

    .outofmyswamp {
    clear: both;
    }

}

/* main */
main {
    padding: 1rem 0 0 5%;
    background-color: #e1dfb6;
}

main h1 {
    font-size: 2.5rem;
    color: rgb(16 16 16);
    border-bottom: 1px solid #5c452d;
    margin-bottom: .5rem;
}

main h2 {
    font-size: 1.5rem;
    color: rgb(16 16 16);
    margin-bottom: .5rem;
}

main p{
    padding-bottom: .5rem;
    line-height: 125%      
}

main blockquote {
    font-style: italic;
    margin: .5rem 5%;
    font-size: .98rem;
}

main a {
    color: #8cb04e;   
}

main a:hover {
    color: #5c452d;
}


/* images */
figure.shrekposter {
    float: right;
    width: 15%;
    border: solid 1px #5c452d;
    margin: 0 2rem .25rem 2%
    
}

figure.shrekposter img {
    width: 100%;
}
figure.shrekposter figcaption {
    text-align: center;
    font-size: .75rem;
    color: rgb(16 16 16); 
}

figure.logo {
    float:left;
    width: 72px;
    margin: 0 0 2rem 0;
}
figure.logo img {
    width: 100%;
}

figure.characters {
    float: left;
    padding-top: 2px;
    border: 1px solid #5c452d;
    height: 420px;
    width: 220px;
    text-align: center;
    margin: 1rem;
}
figure.characters figcaption{
    font-size: .75rem;
}

figure.characters figcaption span {
    display: block;
    font-weight: bold;
    font-size: .95rem;
}



/* lists */
main ul.Donkey, main ol.Fiona {
    margin: 0 0 1rem 0;
    padding: 0 0 0 4rem;
}

main ul.Donkey {
    list-style-image: url(images/UI/Movie.png);
}

main ol.Fiona {
    list-style-image: url(images/UI/film.png);
}



/* Definitions/trivia */
main dl dt {
    margin: 0;
    padding: 0 0 0 1rem;
}

main dl dd {
    margin: 0;
    padding: 0 0 1rem 1rem;
}


/* Form */
form.Shrek2form fieldset {
    margin-bottom: 1.5rem;
    border-radius: .75rem;
    font-size: 1.25rem;
    color: #101010;    
}

form.Shrek2form legend {
    margin-left: 1.5rem;
    font-weight: bold;
}


form.Shrek2form span {
    display: block;
    padding: 1rem 0 0 .5rem;
}

form.Shrek2form .info {
    width: 20rem;
    color: #101010;
    border-radius: 1rem;
    border: solid 1px #101010;
    padding: .2rem   
}

form.Shrek2form .uploadbutton {
    width: 20rem;
    padding: .75rem;
    margin-left: 2%;
    border: solid 1px #5c452d;
    border-radius: 1rem;
    color: #101010;
    background: #c5ee7d;
}
form.Shrek2form .submitbutton {
    width: 20rem;
    padding: .65rem;
    margin-left: 2%;
    border: solid 1px #5c452d;
    border-radius: 1rem;
    color: #101010;
    background: #c5ee7d;
}

/* Footer */
footer {
    background-color: #5c452d
}
footer p {
    text-align: center;
    color: #e1dfb6;
    padding: 1rem;
    font-size: .75rem;
    font-style: oblique;
}