header, main, nav, footer, figure, figcaption, aside, section, article { display: block; }

body { background-color:#4F6D93;
        color:#666666;
        font-family: Arial, Helvetica, sans-serif;
        background-image: linear-gradient(to bottom, #ffffff, #90c7e3);
        background-repeat: no-repeat;
}

#wrapper { width: 80%;
            margin-left: auto;
            margin-right: auto;
            background-color: #90C7E3;
            min-width: 960px;
            max-width: 2048px;
            box-shadow: 3px 3px 3px #333333;
}

header { background-color: #000033;
        color:#FFFFFF;
        background-image: url(sunset.jpg);
        background-position: right;
        background-repeat: no-repeat;
        height: 60px;
        text-align: center;
        padding-top: 15px;
}

h1 { margin-bottom: 0;
    margin-top: 0;
    font-family: Georgia, "Times New Roman", serif;
}

nav { float: left;
        width: 160px;
        font-weight: bold;
        padding: 20px;
}

nav ul {list-style-type: none;
        margin: 0;
        padding-left: 0;
        font-size: 1.2em;
}

nav a { text-decoration: none;
}

nav a:link {color: #000033;}
nav a:visited {color: #344873;}
nav a:hover {color: #FFFFFF;}

main { padding: 1px 20px 20px 30px;
        display:block;
        background-color: #FFFFFF;
        margin-left: 190px;
}

h2 { color:#3399CC;
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 1px 1px 1px #ccc;
}

h3 { color: #000033;
    font-family: Georgia, "Times New Roman", serif; }
  
label
{
   float: left;
   display: block;
   text-align: right;
   width: 120px;
   padding-right: 10px;
}

input, textarea
{
   margin-bottom: 20px;
    display: block;
}

#mySubmit
{
   margin-left: 130px;
}
  
  

dt {color:#000033;
}

main ul { list-style-image: url(marker.gif);
}

footer {font-size: 75%;
        font-style: italic;
        font-family: Georgia, "Times New Roman", serif;
        text-align: center;
        padding: 20px;
        background-color: #FFFFFF;
        margin-left: 190px;
}

.resort {color:#5C7FA3;
            font-weight: bold;
}

#contact { font-size: 90%; }

#homehero { background-image: url(coasthero.jpg);
            height: 300px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 190px;
}

#yurthero { background-image: url(yurthero.jpg);
            height: 300px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 190px;
}

#trailhero { background-image: url(trailhero.jpg);
            height: 300px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 190px;
}

#mobile { display: none; }
#desktop { display: inline; }

table { border: 1px solid #3399CC; width: 80%; border-spacing:0;}
td, th { padding: 5px; border: 1px solid #3399CC;}
td { text-align: center;}
.text { text-align: left;}
tr:nth-of-type(odd) { background-color: #F5FAFC; }

@media only screen and (max-width: 64em) {
  
    body { margin: 0;
            background-color: #FFFFFF;
    }
  
    #wrapper { min-width: 0;
                width: auto;
                box-shadow: none;
    }
  
    #homehero, #yurthero, #trailhero { margin-left: 0; height: 200px; }
  
    main { margin-left: 0; }
  
  
    nav { float: none;
            width: auto;
            padding: .5em;
            text-align: center;
    }
  
    nav li { display: inline;
                padding: .25em .75em;
    }
  
    footer { margin-left: 0;}
}
  
@media only screen and (max-width: 37.5em) {
  
    header { padding-top: 1em; }
  
    main { padding: .1em 1em;
            font-size: 90%;
    }
  
    h1 { font-size: 1.5em; }
  
    nav { padding: 0;}
  
    nav li { display: block;
            margin: 0;
            border-bottom: 2px solid #330000;
    }
  
   label
   {
   float:none;
    text-align:left;
    }

    #mySubmit
    {
   margin-left:0;
   }
  
    nav a { display: block;}
  
    #homehero, #yurthero, #trailhero { background-image: none; height: 0;}
  
    #mobile {display: inline;}
    #desktop {display: none;}
}