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

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


/* --- BODY --- */
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #2C3440;
    background-color: white;
    background-image: url(images/body.grad.gif);
    background-repeat: repeat-x;
    font-size: 16px;
    
}

/* --- WRAPPER --- */
div#wrapper {
    max-width: 960px; 
    margin: 0 auto;
    box-shadow: 0px 0px 10px #999;
}
/* --- HEADER --- */
header {
    background-color: whitesmoke;
    padding-bottom: 4px;
    background-image: url(images/graphic.png);
    background-repeat: no-repeat;
    background-position: 2% 1rem;
    background-size: 100px;
}
header h1 {
    color: #2c3440;
    padding: 1rem 0 0 2%;
    font-size: 2.4rem;
    letter-spacing: 1.2px;
    margin-left: 120px;
}
header h2 {
    color: #5F6773;
    padding-left: 2%;
    font-size: 1rem;
    margin-left: 120px;    
}

/* --- NAVIGATION ---*/

/*phone nav rules here*/
@media only screen and (max-width: 800px) {
    nav {
        background-color: #929EAD;
        padding: .5rem 2%;
    }

    nav ul.menu {
        list-style-type: none;
        padding: 0;
    }
    
    nav ul.menu li a {
        border: solid 1px pink;
        display: block;
        padding: .5rem 2%;
        background-color: white;
        margin-bottom: .5rem;
        border-radius: .4rem;
        color: #5F6773;
        font-weight: 700;
        text-decoration: none;
    }
    
    nav ul.menu li.active a {
        background-color: #FF5C5C;
        color: white;
    }
    
    nav ul.menu li:hover a {
        background-color: #5F6773;
        color: white;
    }
    
} /*end of phone*/

/*desktop nav rules here*/
@media only screen and (min-width: 801px) {
    nav {
    background-color: #ff5c5c;
    border-top: solid 5px #5F6773;
}
nav ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav ul.menu li {
    float: left;
}
nav ul.menu li a {
    display: block;
    padding: .7rem 1.5rem 1rem 1.5rem;
    color: white;
    text-decoration: none;
    border-right: solid 1px #E0EDFF;
}
nav ul.menu li a:hover {
    background-color: #929ead;
}
nav ul.menu li.active a {
    background-color: #5F6773;
    font-weight: 700;
}
    
} /*end of desktop*/

/* --- MAIN --- */
main {
    padding: .5rem 2%;
    background: white;

}
main h1 {
    font-size: 2rem;
    color: #ff5c5c;
    border-bottom: 1px solid #333;
    margin-bottom: .4rem;
    text-shadow: 1px 1px 1px #AAA;
}
main h2 {
    font-size: 1.6rem;
    color: #5f6773;
    margin-bottom: .4rem;
}
main p {
    padding-bottom: .75rem;
    line-height: 150%
}
main blockquote {
    font-style: italic;
    margin: .4rem 2%;
    font-size: .9rem;
}
main a {
    color: #ff5c5c;
    text-decoration: none;
}
main a:hover {
    color: #1290cf
}

/* --- IMAGES ---*/
figure.rightside {
    float: right;
    width: 33.333%;
    border: solid 1px #5F6773;
    margin: 0 0 .25em 2%;    
}figure.rightside img {
    width: 100%
}
figure.rightside figcaption {
    text-align: center;
    font-size: .8rem;
    color: #2C3440;
    padding: 0 0 .3rem 0;
}

figure.success {
    float: left;
    border: 1px solid #5F6773;
    text-align: center;
    height: 390px;
    width: 402px;
    margin: 1rem;
}

figure.success figcaption {
    font-size: .8rem;
    padding: 0 3px 0 3px;
    text-align: left;
}
figure.success figcaption span {
    display: block;
    font-weight: bold;
    font-size: 1rem;
    color: #FF5C5C;
    text-align: center;
}

/* --- LISTS ---*/
main ul.essentials, main ol.additionals {
    margin: 0 0 1.75rem 0;
    padding: 0 0 0 1.75rem;
}
main ul.essentials li {
    background-image: url(images/dumbbell.png);
    background-repeat: no-repeat;
    list-style-type: none;
    padding-left: 25px;
}

main ol.additionals {
    list-style-image: url(images/dumbbell.png);
    padding-left: 50px;
}

main dl dt {
    margin: 0;
    font-weight: 700;
    padding: 0 0 0 1rem;
}
.main dl dd {
    margin: 0;
    font-weight: 400;
    padding: 0 0 .75rem 1rem;
}

/* --- FORM STYLING --- */
form.instructions fieldset {
    margin-bottom: 2rem;
    border-radius: .5rem;
    font-size: .95rem;
    color: #2C3440;
}

form.instructions legend {
    font-weight: 700;
    margin-left: 1rem;
    color: #FF5C5C;
}

form.instructions span {
    display: block;
    padding: .8rem 0 0 .3rem
}
form.instructions .userinfo {
    color: #5F6773;
    width: 20rem;
    border-radius: .4rem;
    border: solid 1px #929EAD;
    padding: .5rem;
}
form.instructions .userbutton {
    width: 20rem;
    padding: .9rem;
    margin-left: 2%;
    background: #E0EDFF;
    border: solid 1px #FF5C5C;
    border-radius: .4rem;
    font-weight: 700;
    color: #FF5C5C;
    font-size: .95rem;
}
form.instructions .subheader {
    font-weight: 700;
    font-size: .95rem;
}



/* --- FOOTER --- */
footer {
    background-color: rgb(95, 103, 115);
    padding: 0 0 2rem 0;
        
}
footer p {
    padding-top: 1rem;
    text-align: center;
    color: #e0edff;
    font-size: .8rem;
    letter-spacing: 1.4px;
}
footer a {
    color: #E0EDFF;
    text-decoration: none;
}
footer a:hover {
    color: #1290cf
}

/* --- OTHER ---*/
div.keepOpen {
    clear: both;
}