/* 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: border-box; box-sizing: border-box;}

/* --- BODY --- */
body {
    font-family: 'Oswald', sans-serif;
    color: darkslategray;
    background-color: white; 
    background-image: url(images/gradient.gif);
    background-repeat: repeat-x;
    
    font-size: 1rem;
}

/* --- WRAPPER --- */

div#wrapper {
    margin: 0 auto;
    max-width: 1000px; 
    min-width: 200px;
    box-shadow: 0px 0 15px #d3d3d3;
}


/* --- HEADER --- */

header {
    background-color: #FFEEE6; 
    background-image: url(images/mountains28.png);
    background-repeat: no-repeat;
    background-position:0% 100%;
    background-size: 550px;
    padding-left: 2.5%;
    
}

header h1 {
    color: darkslategray; 
    padding: 1rem 0 0 2.7rem;
    font-size:2.3rem;
    margin-left: 20px;
}
header h2 {
    color: darkslategray;
    padding: 0 0 .1rem 3rem;
    margin: -1% 0 0 0;
    font-size: 1rem;
    letter-spacing: .27rem;
    margin-left: 20px;
}
@media only screen and (max-width:385px){
    header h1 {
    font-size: 2.3rem;
        line-height:2.3rem;
        margin-bottom: .5rem;
    }
}

/* ---NAVIGATION --- */

@media only screen and (max-width: 600px){
    nav {
        background-color: #e7eeee;
            padding: .5rem 2%;
    }
    nav ul.menu {
        list-style-type: none;
        padding:0;
        }
    nav ul.menu li a {
    padding: .3rem 1.2rem;
    margin-bottom: .5rem;
    background-color: #7E8A51;
    font-weight: 600;
    text-decoration: none;
    display: block;
    border: solid 1px darkslategray;
    border-radius: .6rem;
    
    }
    nav ul.menu li a {
    display: block; 
   
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
}
    nav ul.menu li.active a{
    background-color: #B5B277;
}
nav ul.menu li a:hover {
    background-color: #fff;
    background-color: rgb(199,110,42);
    color:#677053;
    color: #fff;
}
    
    
    }   
 @media only screen and (min-width: 601px){
    nav {
    background-color: #7E8A51;
    background: linear-gradient(to bottom, #A8B86C 0%, #7E8A51 100%);
    border-top: solid 1px darkslategray;
    border-bottom: solid 1px darkslategray;
}
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:.5rem 1.5rem; 
    text-decoration: none;
    color: #EEFFFF;
    letter-spacing: 2px;
}

nav ul.menu li.active a{
    background-color: #B5B277;
}
nav ul.menu li a:hover {
    background-color: #91F2FF;
    color:#677053;
}

}


/* --- MAIN --- */
main {
    padding: .5rem 2%; 
    background-color: #FFF;
}
main h1 {
    font-size: 1.8rem;
    color: rgb(199,110,42); 
    border-bottom: 1px solid lightgray;
    margin-bottom: .4rem;
    text-shadow: 2px 2px 0px #f4f4f4;
}
main h2 {
    font-size: 1.5rem;
    color: darkslategray;
    margin-bottom: .2rem;
}
main p {
    padding-bottom: .8rem;
    line-height: 150%;
}
main blockquote {
    font-style: italic;
    margin: .4rem 2%;
    font-size: .9rem;
}
main a {
    color: #52B8C2;
   
}
main a:hover {
    color: #B5B277;
}

/* --- IMAGES --- */

figure.rightside {
    float:right; 
    Width: 38%; 
    border: solid 2px lightgray;
    margin: 0 0 .25em 2%;
    box-shadow: 5px 5px 15px #d3d3d3;
}
figure.rightside img {
    width: 100%;
}
figure.rightside figcaption {
    text-align: center;
    font-size: .7rem;
    color: darkslategray;
}

figure.trips {
    float:left;
    height:248px;
    width: 150px; 
    padding-top:2px;
    border: 1px solid lightgray;
    text-align: center;
    margin:1rem; 
}

figure.trips figcaption {
    font-size: .7em;
}
figure.trips figcaption span {
    display: block; 
    font-weight: bold;
    font-size: .9rem; 
    color: #52B8C2;
}

/* --- LISTS --- */
main ol.check, main ul.square {
    margin: 0 0 .8rem 0;
    padding: 0 0 0 1rem;
}
main ul.square li {
    background-image: url(images/starzzz.png);
    background-repeat: no-repeat;
    list-style-type: none;
    padding-left:20px;
    background-position: 0; 
}
main ol.check li {
   background-image: url(images/checkmark.png);
    background-repeat: no-repeat;
    list-style-type: none;
    padding-left: 20px;
    background-position: 0;
}
main dl dt {
    margin: 0;
    padding: 0 0 0 1rem;
    font-weight:600;
}
main dl dd {
    margin: 0;
    padding: 0 0 .75rem 2rem;
}

/* --- FORM STYLING --- */

form.book fieldset {
    margin-bottom: 2rem; 
    border-radius: .5rem; 
    font-size: .9rem;
    color: #7E8A51; 
}
form.book legend {
    font-weight: bold; 
    margin-left: 1rem;
    color:#52B8C2 ;
}

form.book span {
    display: block; 
    padding: .8rem 0 0 .3rem;
}

form.book .userinfo {
    width: 20rem;
    border-radius: .3rem;
    border: solid 1px darkslategray; 
    padding: .4rem; 
    
}
form.book .formbutton {
    width: 20rem; 
    padding: .8rem;
    margin: 0 0 2% 1rem; 
    background:rgb(199,110,42);
    border-radius: .5rem;
    font-weight: bold;
    color:#FFF;
    border: solid 1px darkslategray; 
}


/* --- FOOTER --- */
footer {
    background-color: #7E8A51; 
    
    
}
footer p {
    text-align: center;
    padding: .5rem;
    color: white; 
    font-size: .8rem; 
    font-weight: 600; 
}

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